@import url('https://fonts.googleapis.com/css?family=PT+Sans');

#sl_ff_ad_728{
display:block;
width:728px;
height:90px;
margin:0;
position:relative;
}

#sl_ff_ad_728 #sl_ff_ad.sl_center{
margin:40px auto 20px;
}

#sl_ff_ad_728 #sl_bg{
width:548px;
height:90px;
position:absolute;
top:0;
left:180px;
background: -webkit-linear-gradient(to right, #2b3d90, #4894cf);
background: -moz-linear-gradient(to right, #2b3d90, #4894cf);
background: linear-gradient(to right, #2b3d90, #4894cf);
}

#sl_ff_ad_728 #sl_logo{
width:728px;
height:90px;
top:0;
left:0;
position:absolute;
background-image:url(sl_logo.png);
}

#sl_ff_ad_728 #sl_moustache{
width:728px;
height:90px;
top:0;
left:0;
position:absolute;
background-image:url(ff_moustache.png);
}

#sl_ff_ad_728 #sl_txt{
width:428px;
height:90px;
padding:0 110px 0 200px;
top:0;
left:0;
position:absolute;
font-size:20px;
line-height:125%;
text-align:left;
font-family:'PT Sans',sans-serif;
color:#fff;
}

#sl_ff_ad_728 #sl_txt div.t_tab{
display: table;
width:418px;
height:90px;
}

#sl_ff_ad_728 #sl_txt div.t_logo{
display:none;
}
        
#sl_ff_ad_728 #sl_txt span{
display: table-cell;
vertical-align:middle;
text-align:left;
}

/*
eyes
*/

/* blink */
@-moz-keyframes eye_op {
0% {opacity:1; visibility: visible;}
24% {opacity:0;  visibility: hidden;}
26%  {opacity:1; visibility: visible;}
58% {opacity:0;  visibility: hidden;}
60%  {opacity:1; visibility: visible;}
64% {opacity:0;  visibility: hidden;}
66%  {opacity:1; visibility: visible;}
}
@-webkit-keyframes eye_op {
0% {opacity:1; visibility: visible;}
24% {opacity:0;  visibility: hidden;}
26%  {opacity:1; visibility: visible;}
58% {opacity:0;  visibility: hidden;}
60%  {opacity:1; visibility: visible;}
64% {opacity:0;  visibility: hidden;}
66%  {opacity:1; visibility: visible;}
}
@keyframes eye_op {
0% {opacity:1; visibility: visible;}
24% {opacity:0;  visibility: hidden;}
26%  {opacity:1; visibility: visible;}
58% {opacity:0;  visibility: hidden;}
60%  {opacity:1; visibility: visible;}
64% {opacity:0;  visibility: hidden;}
66%  {opacity:1; visibility: visible;}
}

/* look */
@-moz-keyframes eye_look {
0% {opacity:0;  visibility: hidden;}
30% {opacity:1; visibility: visible;}
45% {opacity:0;  visibility: hidden;}
}
@-webkit-keyframes eye_look {
0% {opacity:0;  visibility: hidden;}
30% {opacity:1; visibility: visible;}
45% {opacity:0;  visibility: hidden;}
}
@keyframes eye_look {
0% {opacity:0;  visibility: hidden;}
30% {opacity:1; visibility: visible;}
45% {opacity:0;  visibility: hidden;}
}

#sl_ff_ad_728 #sl_eyes{
width:728px;
height:90px;
top:0;
left:0;
position:absolute;
}

#sl_ff_ad_728 #sl_eyes.op{
background-image:url(ff_eyes_open.png);
background-position:0 0;
opacity:1;

-moz-animation-name: eye_op;
-moz-animation-iteration-count: 6;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 5s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: eye_op;
-webkit-animation-iteration-count: 6;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 5s;
-webkit-animation-fill-mode: forwards;

animation-name: eye_op;
animation-iteration-count: 6;
animation-timing-function:steps(1);
animation-duration: 5s;
animation-fill-mode: forwards;
}

#sl_ff_ad_728 #sl_eyes.cl{
background-image:url(ff_eyes_close.png);
opacity:1;
}

#sl_ff_ad_728 #sl_eyes.lft{
background-image:url(ff_eyes_left.png);
opacity:0;

-moz-animation-name: eye_look;
-moz-animation-iteration-count: 2;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 15s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: eye_look;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 15s;
-webkit-animation-fill-mode: forwards;

animation-name: eye_look;
animation-iteration-count: 2;
animation-timing-function:steps(1);
animation-duration: 15s;
animation-fill-mode: forwards;
}

/*
mouth
*/

/* look */
@-moz-keyframes mouth_sm_c {
0% {opacity:0;  visibility: hidden;}
60% {opacity:1; visibility: visible;}
85% {opacity:0;  visibility: hidden;}
}
@-webkit-keyframes mouth_sm_c {
0% {opacity:0;  visibility: hidden;}
60% {opacity:1; visibility: visible;}
85% {opacity:0;  visibility: hidden;}
}
@keyframes mouth_sm_c {
0% {opacity:0;  visibility: hidden;}
60% {opacity:1; visibility: visible;}
85% {opacity:0;  visibility: hidden;}
}

@-moz-keyframes mouth_sm_o {
0% {opacity:1;  visibility: visible;}
60% {opacity:0; visibility: hidden;}
85% {opacity:1;  visibility: visible;}
}
@-webkit-keyframes mouth_sm_o {
0% {opacity:1;  visibility: visible;}
60% {opacity:0; visibility: hidden;}
85% {opacity:1;  visibility: visible;}
}
@keyframes mouth_sm_o {
0% {opacity:1;  visibility: visible;}
60% {opacity:0; visibility: hidden;}
85% {opacity:1;  visibility: visible;}
}

#sl_ff_ad_728 #sl_mouth{
width:728px;
height:90px;
top:0;
left:0;
position:absolute;
}

#sl_ff_ad_728 #sl_mouth.op{
background-image:url(ff_smile_open.png);
opacity:1;

-moz-animation-name: mouth_sm_o;
-moz-animation-iteration-count: 2;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 15s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: mouth_sm_o;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 15s;
-webkit-animation-fill-mode: forwards;

animation-name: mouth_sm_o;
animation-iteration-count: 2;
animation-timing-function:steps(1);
animation-duration: 15s;
animation-fill-mode: forwards;
}


#sl_ff_ad_728 #sl_mouth.cl{
background-image:url(ff_smile_close.png);
opacity:0;

-moz-animation-name: mouth_sm_c;
-moz-animation-iteration-count: 2;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 15s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: mouth_sm_c;
-webkit-animation-iteration-count: 2;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 15s;
-webkit-animation-fill-mode: forwards;

animation-name: mouth_sm_c;
animation-iteration-count: 2;
animation-timing-function:steps(1);
animation-duration: 15s;
animation-fill-mode: forwards;
}

/*
FF
*/

/* look */
@-moz-keyframes arms_poc {
0% {opacity:1;  visibility: visible;}
30% {opacity:0; visibility: hidden;}
40% {opacity:1;  visibility: visible;}
83% {opacity:0; visibility: hidden;}
}
@-webkit-keyframes arms_poc {
0% {opacity:1;  visibility: visible;}
30% {opacity:0; visibility: hidden;}
40% {opacity:1;  visibility: visible;}
83% {opacity:0; visibility: hidden;}
}
@keyframes arms_poc {
0% {opacity:1;  visibility: visible;}
30% {opacity:0; visibility: hidden;}
47% {opacity:1;  visibility: visible;}
83% {opacity:0; visibility: hidden;}
}

@-moz-keyframes arms_s1 {
0% {opacity:0;  visibility: hidden;}
30% {opacity:1; visibility: visible;}
35% {opacity:0;  visibility: hidden;}
}
@-webkit-keyframes arms_s1 {
0% {opacity:0;  visibility: hidden;}
30% {opacity:1; visibility: visible;}
35% {opacity:0;  visibility: hidden;}
}
@keyframes arms_s1 {
0% {opacity:0;  visibility: hidden;}
30% {opacity:1; visibility: visible;}
35% {opacity:0;  visibility: hidden;}
}

@-moz-keyframes arms_s2 {
0% {opacity:0;  visibility: hidden;}
35% {opacity:1; visibility: visible;}
47% {opacity:0;  visibility: hidden;}
83% {opacity:1; visibility: visible;}
87% {opacity:0;  visibility: hidden;}
}
@-webkit-keyframes arms_s2 {
0% {opacity:0;  visibility: hidden;}
35% {opacity:1; visibility: visible;}
47% {opacity:0;  visibility: hidden;}
83% {opacity:1; visibility: visible;}
87% {opacity:0;  visibility: hidden;}
}
@keyframes arms_s2 {
0% {opacity:0;  visibility: hidden;}
35% {opacity:1; visibility: visible;}
47% {opacity:0;  visibility: hidden;}
83% {opacity:1; visibility: visible;}
87% {opacity:0;  visibility: hidden;}
}

@-moz-keyframes arms_back {
0% {opacity:0;  visibility: hidden;}
87% {opacity:1; visibility: visible;}
95% {opacity:0;  visibility: hidden;}
}
@-webkit-keyframes arms_back {
0% {opacity:0;  visibility: hidden;}
87% {opacity:1; visibility: visible;}
95% {opacity:0;  visibility: hidden;}
}
@keyframes arms_back {
0% {opacity:0;  visibility: hidden;}
87% {opacity:1; visibility: visible;}
95% {opacity:0;  visibility: hidden;}
}

@-moz-keyframes arms_pen {
0% {opacity:0;  visibility: hidden;}
95% {opacity:1; visibility: visible;}
}
@-webkit-keyframes arms_pen {
0% {opacity:0;  visibility: hidden;}
95% {opacity:1; visibility: visible;}
}
@keyframes arms_pen {
0% {opacity:0;  visibility: hidden;}
95% {opacity:1; visibility: visible;}
}


#sl_ff_ad_728 #sl_ff{
width:728px;
height:90px;
top:0;
left:0;
position:absolute;
}

#sl_ff_ad_728 #sl_ff.pock{
background-image:url(ff_pocket.png);
opacity:0;

-moz-animation-name: arms_poc;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 30s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: arms_poc;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 30s;
-webkit-animation-fill-mode: forwards;

animation-name: arms_poc;
animation-iteration-count: 1;
animation-timing-function:steps(1);
animation-duration: 30s;
animation-fill-mode: forwards;
}

#sl_ff_ad_728 #sl_ff.side_1{
background-image:url(ff_side_1.png);
opacity:0;

-moz-animation-name: arms_s1;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 30s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: arms_s1;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 30s;
-webkit-animation-fill-mode: forwards;

animation-name: arms_s1;
animation-iteration-count: 1;
animation-timing-function:steps(1);
animation-duration: 30s;
animation-fill-mode: forwards;
}

#sl_ff_ad_728 #sl_ff.side_2{
background-image:url(ff_side_2.png);
opacity:0;

-moz-animation-name: arms_s2;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 30s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: arms_s2;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 30s;
-webkit-animation-fill-mode: forwards;

animation-name: arms_s2;
animation-iteration-count: 1;
animation-timing-function:steps(1);
animation-duration: 30s;
animation-fill-mode: forwards;
}

#sl_ff_ad_728 #sl_ff.back{
background-image:url(ff_back.png);
opacity:0;

-moz-animation-name: arms_back;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 30s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: arms_back;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 30s;
-webkit-animation-fill-mode: forwards;

animation-name: arms_back;
animation-iteration-count: 1;
animation-timing-function:steps(1);
animation-duration: 30s;
animation-fill-mode: forwards;
}

#sl_ff_ad_728 #sl_ff.pen{
background-image:url(ff_pen.png);
opacity:1;

-moz-animation-name: arms_pen;
-moz-animation-iteration-count: 1;
-moz-animation-timing-function:steps(1);
-moz-animation-duration: 30s;
-moz-animation-fill-mode: forwards;

-webkit-animation-name: arms_pen;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function:steps(1);
-webkit-animation-duration: 30s;
-webkit-animation-fill-mode: forwards;

animation-name: arms_pen;
animation-iteration-count: 1;
animation-timing-function:steps(1);
animation-duration: 30s;
animation-fill-mode: forwards;
}

@media only screen and (max-width: 750px), only screen and (max-device-width: 750px) {

	#sl_ff_ad_728 {
	border:1px solid #2b3d90;
	display: block;
	width: calc(100% - 20px);
	height: auto;
	margin: 0 10px;
	background: #f0f0f0;
	position:static;
	}

	#sl_ff_ad_728 #sl_logo,
	#sl_ff_ad_728 #sl_bg,
	#sl_ff_ad_728 #sl_ff,
	#sl_ff_ad_728 #sl_ff.pock,
	#sl_ff_ad_728 #sl_ff.side_1,
	#sl_ff_ad_728 #sl_ff.side_2,
	#sl_ff_ad_728 #sl_ff.back,
	#sl_ff_ad_728 #sl_ff.pen,
	#sl_ff_ad_728 #sl_mouth.cl,
	#sl_ff_ad_728 #sl_mouth.op,
	#sl_ff_ad_728 #sl_eyes.cl,
	#sl_ff_ad_728 #sl_eyes.op,
	#sl_ff_ad_728 #sl_eyes.lft,
	#sl_ff_ad_728 #sl_moustache {
	display: none;
	}

	#sl_ff_ad_728 #sl_txt{
	position:static;
	height:auto;
	padding:0;
	width:100%;
	}

	#sl_ff_ad_728 #sl_txt div.t_tab{
	position:static;
	display: table;
	width:100%;
	height:auto;
	}

	#sl_ff_ad_728 #sl_txt div.t_logo {
	position: relative;
	width: 150px;
	display: table-cell;
	background-color: #fff;
	height: 100%;
	}

	#sl_ff_ad_728 #sl_txt div.t_logo::before {
	content: '';
	position: absolute;
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background-image: url('sl_logo_ff_m.svg');
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	}

	#sl_ff_ad_728 #sl_txt span{
	background: -webkit-linear-gradient(to right, #2b3d90, #4894cf);
	background: -moz-linear-gradient(to right, #2b3d90, #4894cf);
	background: linear-gradient(to right, #2b3d90, #4894cf);
	display: table-cell;
	vertical-align:middle;
	text-align:left;
	width:auto;
	padding:15px;
	}

	a#sl_ff_ad_728 {
	text-decoration: none !important;
	}
}

@media only screen and (max-width: 600px), only screen and (max-device-width: 600px) {

	#sl_ff_ad_728 #sl_txt div.t_logo {
	width:100px;
	}

	#sl_ff_ad_728 #sl_txt div.t_logo::before {
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 5px;
	}

	#sl_ff_ad_728 #sl_txt{
	font-size:16px;
	}

	#sl_ff_ad_728 #sl_txt span{
	padding:10px;
	}
}

@media only screen and (max-width: 450px), only screen and (max-device-width: 450px) {

	#sl_ff_ad_728 #sl_txt div.t_logo {
	width:75px;
	}

	#sl_ff_ad_728 #sl_txt{
	font-size:14px;
	}
}


@media only screen and (max-width: 350px), only screen and (max-device-width: 350px) {

	#sl_ff_ad_728 #sl_txt div.t_logo {
	width:50px;
	}

	#sl_ff_ad_728 #sl_txt div.t_logo::before {
	top: 10px;
	left: 10px;
	right: 10px;
	bottom: 10px;
	background-image: url('sl_pluma_ff_m.svg');
	}

}