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

#sl_ff_ad_300{
display:block;
width:300px;
height:250px;
margin:20px auto;
position:relative;
}

#sl_ff_ad_300 #sl_bg{
width:300px;
height:250px;
position:absolute;
top:0;
left:0;
background: -webkit-linear-gradient(#2b3d90, #4894cf);
background: -moz-linear-gradient(#2b3d90, #4894cf);
background: linear-gradient(#2b3d90, #4894cf);
}

#sl_ff_ad_300 #sl_logo{
width:300px;
height:250px;
top:0;
left:0;
position:absolute;
background-image:url(sl_logo.png);
}

#sl_ff_ad_300 #sl_moustache{
width:300px;
height:250px;
top:0;
left:0;
position:absolute;
background-image:url(ff_moustache.png);
}

#sl_ff_ad_300 #sl_txt{
width:130px;
height:201px;
padding:0 15px 0;
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_300 #sl_txt div.t_tab{
display: table;
width:130px;
height:201px;
}

#sl_ff_ad_300 #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_300 #sl_eyes{
width:300px;
height:250px;
top:0;
left:0;
position:absolute;
}

#sl_ff_ad_300 #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_300 #sl_eyes.cl{
background-image:url(ff_eyes_close.png);
opacity:1;
}

#sl_ff_ad_300 #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_300 #sl_mouth{
width:300px;
height:250px;
top:0;
left:0;
position:absolute;
}

#sl_ff_ad_300 #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_300 #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_300 #sl_ff{
width:300px;
height:250px;
top:0;
left:0;
position:absolute;
}

#sl_ff_ad_300 #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_300 #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_300 #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_300 #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_300 #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;
}