Difference between revisions of "Team:HBUT-China"

Line 1: Line 1:
 
{{HBUT-China}}
 
{{HBUT-China}}
 +
<style>
 +
#obo_slider{ 
 +
position: relative;margin:0 auto;width:960px; 
 +
}   
 +
 +
.oneByOne1{
 +
margin: 0;
 +
width: 100%;
 +
height: 420px; 
 +
background: #fff;   
 +
position: relative;
 +
overflow: hidden;
 +
 +
} 
 +
 +
#obo_slider .oneByOne_item{
 +
position: absolute;
 +
width: 960px;
 +
height: 420px; 
 +
overflow: hidden; 
 +
}       
 +
                     
 +
#obo_slider .oneByOne_item span{
 +
font:13px 'PT Sans', Arial, Tahoma, Verdana, Sans-Serif;color:#393939;
 +
}                                                                                       
 +
 +
#obo_slider .oneByOne_item a{
 +
text-decoration: none;
 +
color: #B22222;
 +
}
 +
             
 +
#obo_slider .oneByOne_item span.slide2Txt1{
 +
  position: relative;
 +
float: left;
 +
margin: 120px 12px 0 120px;
 +
color: #9ACD32;
 +
font-size: 24px; 
 +
background: #FFFFFF;
 +
padding: 8px;           
 +
}
 +
 +
#obo_slider .oneByOne_item span.slide2Txt2{
 +
  position: relative;
 +
clear: left;
 +
float: left;
 +
margin: 6px 12px 0 120px;
 +
color: #666666;
 +
font-size: 14px; 
 +
background: #FFFFFF;
 +
padding: 8px;           
 +
} 
 +
 +
#obo_slider .oneByOne_item span.slide2Txt3{
 +
  position: relative;
 +
clear: left;
 +
float: left;
 +
margin: 6px 12px 0 120px;
 +
color: #666666;
 +
font-size: 12px; 
 +
background: #FFFFFF;
 +
padding: 8px;           
 +
}   
 +
                   
 +
 
 +
 +
#obo_slider img.wp1_1{
 +
position: absolute;
 +
top: 255px;
 +
left: 512px;
 +
}
 +
#obo_slider img.wp1_2{
 +
position: absolute;
 +
top: 190px;
 +
left: 360px;
 +
}             
 +
#obo_slider img.wp1_3{
 +
position: absolute;
 +
top: 28px;
 +
right: 0px;
 +
} 
 +
#obo_slider img.wp1_left {left:0;right:auto;}
 +
#obo_slider .oneByOne_item span.txt1{
 +
clear: left;
 +
position: relative;
 +
float: left;
 +
margin: 70px 0 0 10px;   
 +
font-size:24px;
 +
font-family: 'Microsoft Yahei', 'Simsun';
 +
}
 +
#obo_slider .oneByOne_item  span.txt1 a{
 +
color: #FFFFFF;
 +
}       
 +
#obo_slider .oneByOne_item span.txt2{
 +
clear: left;
 +
position: relative;
 +
float: left;
 +
margin: 0 0 0 10px;
 +
text-transform:uppercase;
 +
text-shadow:#fff 0 1px 1px, #bfbfbf 0 2px 2px;
 +
color: #5eafcd; 
 +
font-weight:bold;
 +
font-size: 38px;
 +
font-family: 'Microsoft Yahei', 'Simsun';
 +
}                 
 +
   
 +
#obo_slider .oneByOne_item span.txt3{
 +
clear: left;
 +
position: relative;
 +
float: left;
 +
margin: 0 0 0 10px;
 +
width:400px;
 +
font-family: 'Microsoft Yahei', 'Simsun';
 +
} 
 +
#obo_slider .oneByOne_item span.txt4{
 +
clear: left;
 +
position: relative;
 +
float: left;
 +
margin: 55px 0 0 10px;
 +
width:400px;
 +
font-family: 'Microsoft Yahei', 'Simsun';
 +
} 
 +
   
 +
#obo_slider .oneByOne_item span.txt4 a {
 +
display:block;
 +
text-align:center;
 +
cursor:pointer;
 +
font:bold italic 16px 'PT Sans';
 +
color:#3fa3c9;
 +
width:151px;
 +
height:39px;
 +
padding:17px 0 0 0;}
 +
 +
.btn_l {
 +
    background: url(../images/sprite.png) no-repeat scroll 0 -123px rgba(0, 0, 0, 0);
 +
    border: medium none;
 +
    color: #3FA3C9;
 +
    cursor: pointer;
 +
    font: italic bold 16px 'Microsoft Yahei','Simsun';
 +
    height: 56px;
 +
    padding: 0;
 +
    width: 151px;
 +
}
 +
 +
.btn_l:hover {
 +
    background-position: -157px -123px;
 +
}
 +
 +
 +
#obo_slider img.wp1{
 +
position: absolute;
 +
top: 240px;
 +
left: 380px;
 +
}
 +
#obo_slider img.wp2{
 +
position: absolute;
 +
top: 200px;
 +
left: 470px;
 +
}             
 +
#obo_slider img.wp3{
 +
position: absolute;
 +
top: 100px;
 +
left: 600px;
 +
} 
 +
 +
#obo_slider .oneByOne_item span.txt_right {padding-left:550px;}
 +
#obo_slider .oneByOne_item span.txt4.txt_right {padding-left:735px;}
 +
#obo_slider .oneByOne_item span.blue {background:#3fa3c9;color:#fff;padding:6px 17px;margin-bottom:5px;}
 +
#obo_slider .oneByOne_item span.txt_right2 {margin-left:405px;}
 +
#obo_slider .oneByOne_item span.short {width:290px;margin-top:20px;}
 +
 +
.homeone .oneByOne1 {background:#63b4d2 url(../images/moover_shadow.png) center top no-repeat;}
 +
.homeone #obo_slider .oneByOne_item span.txt1, .homeone #obo_slider .oneByOne_item span.txt2, .homeone #obo_slider .oneByOne_item span.txt3 {color:#fff;}
 +
.homeone #obo_slider .oneByOne_item span.txt1 {margin-top:80px;}
 +
.homeone #obo_slider .oneByOne_item span.txt1.blue {margin-top:66px;}
 +
.homeone #obo_slider .oneByOne_item span.blue {background:#fff;color:#3fa3c9;}
 +
.homeone #obo_slider .oneByOne_item span.txt4up {margin-top:30px;}
 +
.homeone #obo_slider .oneByOne_item .slide1_bot {margin-top:10px;}
 +
.homeone #obo_slider .oneByOne_item .slide2_bot {margin-top:15px;}
 +
.homeone #obo_slider .oneByOne_item .slide3_bot {margin-top:5px;}
 +
.homeone .arrowButton .prevArrow, .homeone .arrowButton .nextArrow {top:180px;}
 +
 +
#obo_slider .oneByOne_item span.wp1{
 +
clear: left;
 +
position: relative;
 +
float: left;
 +
margin: 120px 12px 0 60px;   
 +
background: #20B2AA;   
 +
padding: 8px;
 +
color: #FFFFFF;
 +
font-size: 40px;
 +
}
 +
#obo_slider .oneByOne_item span.wp1 a{
 +
color: #FFFFFF;
 +
}       
 +
#obo_slider .oneByOne_item span.wp2{
 +
clear: left;
 +
position: relative;
 +
float: left;
 +
margin: 12px 12px 0 60px;
 +
 +
color: #FFFFFF; 
 +
background: #5F9EA0;
 +
padding: 8px;
 +
font-size: 16px;
 +
}                 
 +
 +
#obo_slider .oneByOne_item img.bigImage{
 +
position: absolute;
 +
top: 0;
 +
left: 0;
 +
 +
}
 +
 +
#obo_slider .oneByOne_item span.slide5Txt1{
 +
  position: relative;
 +
float: left;
 +
margin: 150px 12px 0 600px;
 +
color: #9ACD32;
 +
font-size: 24px; 
 +
background: #FFFFFF;
 +
padding: 8px;           
 +
}
 +
 +
#obo_slider .oneByOne_item span.slide5Txt2{
 +
  position: relative;
 +
clear: left;
 +
float: left;
 +
margin: 12px 12px 0 600px;
 +
color: #666666;
 +
font-size: 12px; 
 +
background: #FFFFFF;
 +
padding: 8px;           
 +
} 
 +
 +
 +
 +
.buttonArea{
 +
    float: left;
 +
    left:38%;
 +
    position: relative;           
 +
    top:285px;
 +
}                   
 +
.buttonCon{ 
 +
    float: left;
 +
    position: relative;       
 +
}
 +
.buttonCon .theButton {
 +
display:none;
 +
color: #B22222;
 +
width: 10px;
 +
height: 11px;
 +
background:url(../images/circlebutton.png) -5px -3px no-repeat;
 +
text-indent: -9999px;
 +
border: 0;
 +
float: left;
 +
margin-right:5px;
 +
-webkit-border-radius:13px;-moz-border-radius:13px;border-radius:13px;behavior: url(PIE.htc);
 +
}
 +
.buttonArea a.active {
 +
background-position: -5px -25px;
 +
background-color:#5eafcd;
 +
}           
 +
 +
.arrowButton{   
 +
cursor: pointer; 
 +
}           
 +
.arrowButton .prevArrow{
 +
background: url(../images/prev.png) no-repeat;
 +
width: 60px;
 +
height: 60px;     
 +
position: absolute;
 +
top: 127px;
 +
left: 50px;       
 +
}
 +
.arrowButton .nextArrow{               
 +
background: url(../images/next.png) no-repeat;
 +
width: 60px;
 +
height: 60px;
 +
position: absolute;
 +
top: 127px;
 +
right: 50px;
 +
} 
 +
 +
.arrowButton .prevArrow:hover, .arrowButton .nextArrow:hover {opacity:.9;}
 +
 +
.animate0{
 +
  -webkit-animation-duration: .6s;
 +
-webkit-animation-delay: 0s;
 +
-webkit-animation-timing-function: ease;
 +
-webkit-animation-fill-mode: both;
 +
-moz-animation-duration: .6s;
 +
-moz-animation-delay: 0s;
 +
-moz-animation-timing-function: ease;
 +
-moz-animation-fill-mode: both;
 +
-ms-animation-duration: .6s;
 +
-ms-animation-delay: 0s;
 +
-ms-animation-timing-function: ease;
 +
-ms-animation-fill-mode: both;
 +
animation-duration: .6s;
 +
animation-delay: 0s;
 +
animation-timing-function: ease;
 +
animation-fill-mode: both;          
 +
}       
 +
 +
.animate1{
 +
  -webkit-animation-duration: .6s;
 +
-webkit-animation-delay: .2s;
 +
-webkit-animation-timing-function: ease;
 +
-webkit-animation-fill-mode: both;
 +
-moz-animation-duration: .6s;
 +
-moz-animation-delay: .2s;
 +
-moz-animation-timing-function: ease;
 +
-moz-animation-fill-mode: both;
 +
-ms-animation-duration: .6s;
 +
-ms-animation-delay: .2s;
 +
-ms-animation-timing-function: ease;
 +
-ms-animation-fill-mode: both;
 +
animation-duration: .6s;
 +
animation-delay: .2s;
 +
animation-timing-function: ease;
 +
animation-fill-mode: both;          
 +
}
 +
 +
.animate2{
 +
  -webkit-animation-duration: .6s;
 +
-webkit-animation-delay: .4s;
 +
-webkit-animation-timing-function: ease;
 +
-webkit-animation-fill-mode: both;
 +
-moz-animation-duration: .6s;
 +
-moz-animation-delay: .4s;
 +
-moz-animation-timing-function: ease;
 +
-moz-animation-fill-mode: both;
 +
-ms-animation-duration: .6s;
 +
-ms-animation-delay: .4s;
 +
-ms-animation-timing-function: ease;
 +
-ms-animation-fill-mode: both;
 +
animation-duration: .6s;
 +
animation-delay: .4s;
 +
animation-timing-function: ease;
 +
animation-fill-mode: both;          
 +
}
 +
 +
.animate3{
 +
  -webkit-animation-duration: .6s;
 +
-webkit-animation-delay: .6s;
 +
-webkit-animation-timing-function: ease;
 +
-webkit-animation-fill-mode: both;
 +
-moz-animation-duration: .6s;
 +
-moz-animation-delay: .6s;
 +
-moz-animation-timing-function: ease;
 +
-moz-animation-fill-mode: both;
 +
-ms-animation-duration: .6s;
 +
-ms-animation-delay: .6s;
 +
-ms-animation-timing-function: ease;
 +
-ms-animation-fill-mode: both;
 +
animation-duration: .6s;
 +
animation-delay: .6s;
 +
animation-timing-function: ease;
 +
animation-fill-mode: both;          
 +
} 
 +
 +
.animate4{
 +
  -webkit-animation-duration: .6s;
 +
-webkit-animation-delay: .8s;
 +
-webkit-animation-timing-function: ease;
 +
-webkit-animation-fill-mode: both;
 +
-moz-animation-duration: .6s;
 +
-moz-animation-delay: .8s;
 +
-moz-animation-timing-function: ease;
 +
-moz-animation-fill-mode: both;
 +
-ms-animation-duration: .6s;
 +
-ms-animation-delay: .8s;
 +
-ms-animation-timing-function: ease;
 +
-ms-animation-fill-mode: both;
 +
animation-duration: .6s;
 +
animation-delay: .8s;
 +
animation-timing-function: ease;
 +
animation-fill-mode: both;          
 +
} 
 +
 +
.animate5{
 +
  -webkit-animation-duration: .6s;
 +
-webkit-animation-delay: 1s;
 +
-webkit-animation-timing-function: ease;
 +
-webkit-animation-fill-mode: both;
 +
-moz-animation-duration: .6s;
 +
-moz-animation-delay: 1s;
 +
-moz-animation-timing-function: ease;
 +
-moz-animation-fill-mode: both;
 +
-ms-animation-duration: .6s;
 +
-ms-animation-delay: 1s;
 +
-ms-animation-timing-function: ease;
 +
-ms-animation-fill-mode: both;
 +
animation-duration: .6s;
 +
animation-delay: 1s;
 +
animation-timing-function: ease;
 +
animation-fill-mode: both;          
 +
}   
 +
 +
 +
.animated {
 +
-webkit-animation: 1s ease;
 +
-moz-animation: 1s ease;
 +
-ms-animation: 1s ease;
 +
animation: 1s ease;
 +
}
 +
 +
.animated.hinge {
 +
-webkit-animation: 2s ease;
 +
-moz-animation: 2s ease;
 +
-ms-animation: 2s ease;
 +
animation: 2s ease;
 +
}
 +
 +
@-webkit-keyframes flash {
 +
0%, 50%, 100% {opacity: 1;}
 +
25%, 75% {opacity: 0;}
 +
}
 +
 +
@-moz-keyframes flash {
 +
0%, 50%, 100% {opacity: 1;}
 +
25%, 75% {opacity: 0;}
 +
}
 +
 +
@-ms-keyframes flash {
 +
0%, 50%, 100% {opacity: 1;}
 +
25%, 75% {opacity: 0;}
 +
}
 +
 +
@keyframes flash {
 +
0%, 50%, 100% {opacity: 1;}
 +
25%, 75% {opacity: 0;}
 +
}
 +
 +
.flash {
 +
-webkit-animation-name: flash;
 +
-moz-animation-name: flash;
 +
-ms-animation-name: flash;
 +
animation-name: flash;
 +
}
 +
@-webkit-keyframes shake {
 +
0%, 100% {-webkit-transform: translateX(0);}
 +
10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);}
 +
20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);}
 +
}
 +
 +
@-moz-keyframes shake {
 +
0%, 100% {-moz-transform: translateX(0);}
 +
10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);}
 +
20%, 40%, 60%, 80% {-moz-transform: translateX(10px);}
 +
}
 +
 +
@-ms-keyframes shake {
 +
0%, 100% {-ms-transform: translateX(0);}
 +
10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);}
 +
20%, 40%, 60%, 80% {-ms-transform: translateX(10px);}
 +
}
 +
 +
@keyframes shake {
 +
0%, 100% {transform: translateX(0);}
 +
10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);}
 +
20%, 40%, 60%, 80% {transform: translateX(10px);}
 +
}
 +
 +
.shake {
 +
-webkit-animation-name: shake;
 +
-moz-animation-name: shake;
 +
-ms-animation-name: shake;
 +
animation-name: shake;
 +
}
 +
@-webkit-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);}
 +
40% {-webkit-transform: translateY(-30px);}
 +
60% {-webkit-transform: translateY(-15px);}
 +
}
 +
 +
@-moz-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);}
 +
40% {-moz-transform: translateY(-30px);}
 +
60% {-moz-transform: translateY(-15px);}
 +
}
 +
 +
@-ms-keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);}
 +
40% {-ms-transform: translateY(-30px);}
 +
60% {-ms-transform: translateY(-15px);}
 +
}
 +
 +
@keyframes bounce {
 +
0%, 20%, 50%, 80%, 100% {transform: translateY(0);}
 +
40% {transform: translateY(-30px);}
 +
60% {transform: translateY(-15px);}
 +
}
 +
 +
.bounce {
 +
-webkit-animation-name: bounce;
 +
-moz-animation-name: bounce;
 +
-ms-animation-name: bounce;
 +
animation-name: bounce;
 +
}
 +
@-webkit-keyframes tada {
 +
0% {-webkit-transform: scale(1);}
 +
10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
 +
30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
 +
40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
 +
100% {-webkit-transform: scale(1) rotate(0);}
 +
}
 +
 +
@-moz-keyframes tada {
 +
0% {-moz-transform: scale(1);}
 +
10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
 +
30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
 +
40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
 +
100% {-moz-transform: scale(1) rotate(0);}
 +
}
 +
 +
@-ms-keyframes tada {
 +
0% {-ms-transform: scale(1);}
 +
10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);}
 +
30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);}
 +
40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);}
 +
100% {-ms-transform: scale(1) rotate(0);}
 +
}
 +
 +
@keyframes tada {
 +
0% {transform: scale(1);}
 +
10%, 20% {transform: scale(0.9) rotate(-3deg);}
 +
30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
 +
40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
 +
100% {transform: scale(1) rotate(0);}
 +
}
 +
 +
.tada {
 +
-webkit-animation-name: tada;
 +
-moz-animation-name: tada;
 +
-ms-animation-name: tada;
 +
animation-name: tada;
 +
}
 +
@-webkit-keyframes swing {
 +
20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; }
 +
20% { -webkit-transform: rotate(15deg); }
 +
40% { -webkit-transform: rotate(-10deg); }
 +
60% { -webkit-transform: rotate(5deg); }
 +
80% { -webkit-transform: rotate(-5deg); }
 +
100% { -webkit-transform: rotate(0deg); }
 +
}
 +
 +
@-moz-keyframes swing {
 +
20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center; }
 +
20% { -moz-transform: rotate(15deg); }
 +
40% { -moz-transform: rotate(-10deg); }
 +
60% { -moz-transform: rotate(5deg); }
 +
80% { -moz-transform: rotate(-5deg); }
 +
100% { -moz-transform: rotate(0deg); }
 +
}
 +
 +
@-ms-keyframes swing {
 +
20%, 40%, 60%, 80%, 100% { -ms-transform-origin: top center; }
 +
20% { -ms-transform: rotate(15deg); }
 +
40% { -ms-transform: rotate(-10deg); }
 +
60% { -ms-transform: rotate(5deg); }
 +
80% { -ms-transform: rotate(-5deg); }
 +
100% { -webkit-transform: rotate(0deg); }
 +
}
 +
 +
@keyframes swing {
 +
20%, 40%, 60%, 80%, 100% { transform-origin: top center; }
 +
20% { transform: rotate(15deg); }
 +
40% { transform: rotate(-10deg); }
 +
60% { transform: rotate(5deg); }
 +
80% { transform: rotate(-5deg); }
 +
100% { transform: rotate(0deg); }
 +
}
 +
 +
.swing {
 +
-webkit-animation-name: swing;
 +
-moz-animation-name: swing;
 +
-ms-animation-name: swing;
 +
animation-name: swing;
 +
}
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes wobble {
 +
  0% { -webkit-transform: translateX(0%); }
 +
  15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
 +
  30% { -webkit-transform: translateX(20%) rotate(3deg); }
 +
  45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
 +
  60% { -webkit-transform: translateX(10%) rotate(2deg); }
 +
  75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
 +
  100% { -webkit-transform: translateX(0%); }
 +
}
 +
 +
@-moz-keyframes wobble {
 +
  0% { -moz-transform: translateX(0%); }
 +
  15% { -moz-transform: translateX(-25%) rotate(-5deg); }
 +
  30% { -moz-transform: translateX(20%) rotate(3deg); }
 +
  45% { -moz-transform: translateX(-15%) rotate(-3deg); }
 +
  60% { -moz-transform: translateX(10%) rotate(2deg); }
 +
  75% { -moz-transform: translateX(-5%) rotate(-1deg); }
 +
  100% { -moz-transform: translateX(0%); }
 +
}
 +
 +
@-ms-keyframes wobble {
 +
  0% { -ms-transform: translateX(0%); }
 +
  15% { -ms-transform: translateX(-25%) rotate(-5deg); }
 +
  30% { -ms-transform: translateX(20%) rotate(3deg); }
 +
  45% { -ms-transform: translateX(-15%) rotate(-3deg); }
 +
  60% { -ms-transform: translateX(10%) rotate(2deg); }
 +
  75% { -ms-transform: translateX(-5%) rotate(-1deg); }
 +
  100% { -ms-transform: translateX(0%); }
 +
}
 +
 +
@keyframes wobble {
 +
  0% { transform: translateX(0%); }
 +
  15% { transform: translateX(-25%) rotate(-5deg); }
 +
  30% { transform: translateX(20%) rotate(3deg); }
 +
  45% { transform: translateX(-15%) rotate(-3deg); }
 +
  60% { transform: translateX(10%) rotate(2deg); }
 +
  75% { transform: translateX(-5%) rotate(-1deg); }
 +
  100% { transform: translateX(0%); }
 +
}
 +
 +
.wobble {
 +
-webkit-animation-name: wobble;
 +
-moz-animation-name: wobble;
 +
-ms-animation-name: wobble;
 +
animation-name: wobble;
 +
}
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes pulse {
 +
    0% { -webkit-transform: scale(1); }
 +
50% { -webkit-transform: scale(1.1); }
 +
    100% { -webkit-transform: scale(1); }
 +
}
 +
@-moz-keyframes pulse {
 +
    0% { -moz-transform: scale(1); }
 +
50% { -moz-transform: scale(1.1); }
 +
    100% { -moz-transform: scale(1); }
 +
}
 +
@-ms-keyframes pulse {
 +
    0% { -ms-transform: scale(1); }
 +
50% { -ms-transform: scale(1.1); }
 +
    100% { -ms-transform: scale(1); }
 +
}
 +
@keyframes pulse {
 +
    0% { transform: scale(1); }
 +
50% { transform: scale(1.1); }
 +
    100% { transform: scale(1); }
 +
}
 +
 +
.pulse {
 +
-webkit-animation-name: pulse;
 +
-moz-animation-name: pulse;
 +
-ms-animation-name: pulse;
 +
animation-name: pulse;
 +
}
 +
@-webkit-keyframes fadeIn {
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
 +
@-moz-keyframes fadeIn {
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
 +
@-ms-keyframes fadeIn {
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
 +
@keyframes fadeIn {
 +
0% {opacity: 0;}
 +
100% {opacity: 1;}
 +
}
 +
 +
.fadeIn {
 +
-webkit-animation-name: fadeIn;
 +
-moz-animation-name: fadeIn;
 +
-ms-animation-name: fadeIn;
 +
animation-name: fadeIn;
 +
}
 +
@-webkit-keyframes fadeInUp {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInUp {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInUp {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
}
 +
 +
@keyframes fadeInUp {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
}
 +
 +
.fadeInUp {
 +
-webkit-animation-name: fadeInUp;
 +
-moz-animation-name: fadeInUp;
 +
-ms-animation-name: fadeInUp;
 +
animation-name: fadeInUp;
 +
}
 +
@-webkit-keyframes fadeInDown {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInDown {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInDown {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
}
 +
 +
@keyframes fadeInDown {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
}
 +
 +
.fadeInDown {
 +
-webkit-animation-name: fadeInDown;
 +
-moz-animation-name: fadeInDown;
 +
-ms-animation-name: fadeInDown;
 +
animation-name: fadeInDown;
 +
}
 +
@-webkit-keyframes fadeInLeft {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInLeft {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInLeft {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
}
 +
 +
@keyframes fadeInLeft {
 +
0% {
 +
opacity: 0;
 +
transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
}
 +
 +
.fadeInLeft {
 +
-webkit-animation-name: fadeInLeft;
 +
-moz-animation-name: fadeInLeft;
 +
-ms-animation-name: fadeInLeft;
 +
animation-name: fadeInLeft;
 +
}
 +
@-webkit-keyframes fadeInRight {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateX(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInRight {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateX(20px);
 +
}
 +
 +
100% {
 +
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInRight {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateX(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
}
 +
 +
@keyframes fadeInRight {
 +
0% {
 +
opacity: 0;
 +
transform: translateX(20px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
}
 +
 +
.fadeInRight {
 +
-webkit-animation-name: fadeInRight;
 +
-moz-animation-name: fadeInRight;
 +
-ms-animation-name: fadeInRight;
 +
animation-name: fadeInRight;
 +
}
 +
@-webkit-keyframes fadeInUpBig {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateY(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInUpBig {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateY(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInUpBig {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateY(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
}
 +
 +
@keyframes fadeInUpBig {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
}
 +
 +
.fadeInUpBig {
 +
-webkit-animation-name: fadeInUpBig;
 +
-moz-animation-name: fadeInUpBig;
 +
-ms-animation-name: fadeInUpBig;
 +
animation-name: fadeInUpBig;
 +
}
 +
@-webkit-keyframes fadeInDownBig {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateY(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInDownBig {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateY(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInDownBig {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateY(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
}
 +
 +
@keyframes fadeInDownBig {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
}
 +
 +
.fadeInDownBig {
 +
-webkit-animation-name: fadeInDownBig;
 +
-moz-animation-name: fadeInDownBig;
 +
-ms-animation-name: fadeInDownBig;
 +
animation-name: fadeInDownBig;
 +
}
 +
@-webkit-keyframes fadeInLeftBig {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateX(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
}
 +
@-moz-keyframes fadeInLeftBig {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateX(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
}
 +
@-ms-keyframes fadeInLeftBig {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateX(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
}
 +
@keyframes fadeInLeftBig {
 +
0% {
 +
opacity: 0;
 +
transform: translateX(-2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
}
 +
 +
.fadeInLeftBig {
 +
-webkit-animation-name: fadeInLeftBig;
 +
-moz-animation-name: fadeInLeftBig;
 +
-ms-animation-name: fadeInLeftBig;
 +
animation-name: fadeInLeftBig;
 +
}
 +
@-webkit-keyframes fadeInRightBig {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateX(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeInRightBig {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateX(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeInRightBig {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateX(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
}
 +
 +
@keyframes fadeInRightBig {
 +
0% {
 +
opacity: 0;
 +
transform: translateX(2000px);
 +
}
 +
 +
100% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
}
 +
 +
.fadeInRightBig {
 +
-webkit-animation-name: fadeInRightBig;
 +
-moz-animation-name: fadeInRightBig;
 +
-ms-animation-name: fadeInRightBig;
 +
animation-name: fadeInRightBig;
 +
}
 +
@-webkit-keyframes fadeOut {
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
 +
@-moz-keyframes fadeOut {
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
 +
@-ms-keyframes fadeOut {
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
 +
@keyframes fadeOut {
 +
0% {opacity: 1;}
 +
100% {opacity: 0;}
 +
}
 +
 +
.fadeOut {
 +
-webkit-animation-name: fadeOut;
 +
-moz-animation-name: fadeOut;
 +
-ms-animation-name: fadeOut;
 +
animation-name: fadeOut;
 +
}
 +
@-webkit-keyframes fadeOutUp {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateY(-20px);
 +
}
 +
}
 +
@-moz-keyframes fadeOutUp {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateY(-20px);
 +
}
 +
}
 +
@-ms-keyframes fadeOutUp {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateY(-20px);
 +
}
 +
}
 +
@keyframes fadeOutUp {
 +
0% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateY(-20px);
 +
}
 +
}
 +
 +
.fadeOutUp {
 +
-webkit-animation-name: fadeOutUp;
 +
-moz-animation-name: fadeOutUp;
 +
-ms-animation-name: fadeOutUp;
 +
animation-name: fadeOutUp;
 +
}
 +
@-webkit-keyframes fadeOutDown {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateY(20px);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeOutDown {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateY(20px);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeOutDown {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateY(20px);
 +
}
 +
}
 +
 +
@keyframes fadeOutDown {
 +
0% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateY(20px);
 +
}
 +
}
 +
 +
.fadeOutDown {
 +
-webkit-animation-name: fadeOutDown;
 +
-moz-animation-name: fadeOutDown;
 +
-ms-animation-name: fadeOutDown;
 +
animation-name: fadeOutDown;
 +
}
 +
@-webkit-keyframes fadeOutLeft {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(-20px);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeOutLeft {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateX(-20px);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeOutLeft {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateX(-20px);
 +
}
 +
}
 +
@keyframes fadeOutLeft {
 +
0% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateX(-20px);
 +
}
 +
}
 +
 +
.fadeOutLeft {
 +
-webkit-animation-name: fadeOutLeft;
 +
-moz-animation-name: fadeOutLeft;
 +
-ms-animation-name: fadeOutLeft;
 +
animation-name: fadeOutLeft;
 +
}
 +
@-webkit-keyframes fadeOutRight {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(20px);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeOutRight {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateX(20px);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeOutRight {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateX(20px);
 +
}
 +
}
 +
 +
@keyframes fadeOutRight {
 +
0% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateX(20px);
 +
}
 +
}
 +
 +
.fadeOutRight {
 +
-webkit-animation-name: fadeOutRight;
 +
-moz-animation-name: fadeOutRight;
 +
-ms-animation-name: fadeOutRight;
 +
animation-name: fadeOutRight;
 +
}
 +
@-webkit-keyframes fadeOutUpBig {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateY(-2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeOutUpBig {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateY(-2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeOutUpBig {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateY(-2000px);
 +
}
 +
}
 +
 +
@keyframes fadeOutUpBig {
 +
0% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateY(-2000px);
 +
}
 +
}
 +
 +
.fadeOutUpBig {
 +
-webkit-animation-name: fadeOutUpBig;
 +
-moz-animation-name: fadeOutUpBig;
 +
-ms-animation-name: fadeOutUpBig;
 +
animation-name: fadeOutUpBig;
 +
}
 +
@-webkit-keyframes fadeOutDownBig {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateY(2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeOutDownBig {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateY(2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeOutDownBig {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateY(2000px);
 +
}
 +
}
 +
 +
@keyframes fadeOutDownBig {
 +
0% {
 +
opacity: 1;
 +
transform: translateY(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateY(2000px);
 +
}
 +
}
 +
 +
.fadeOutDownBig {
 +
-webkit-animation-name: fadeOutDownBig;
 +
-moz-animation-name: fadeOutDownBig;
 +
-ms-animation-name: fadeOutDownBig;
 +
animation-name: fadeOutDownBig;
 +
}
 +
@-webkit-keyframes fadeOutLeftBig {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(-2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes fadeOutLeftBig {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateX(-2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes fadeOutLeftBig {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateX(-2000px);
 +
}
 +
}
 +
 +
@keyframes fadeOutLeftBig {
 +
0% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateX(-2000px);
 +
}
 +
}
 +
 +
.fadeOutLeftBig {
 +
-webkit-animation-name: fadeOutLeftBig;
 +
-moz-animation-name: fadeOutLeftBig;
 +
-ms-animation-name: fadeOutLeftBig;
 +
animation-name: fadeOutLeftBig;
 +
}
 +
@-webkit-keyframes fadeOutRightBig {
 +
0% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(2000px);
 +
}
 +
}
 +
@-moz-keyframes fadeOutRightBig {
 +
0% {
 +
opacity: 1;
 +
-moz-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateX(2000px);
 +
}
 +
}
 +
@-ms-keyframes fadeOutRightBig {
 +
0% {
 +
opacity: 1;
 +
-ms-transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateX(2000px);
 +
}
 +
}
 +
@keyframes fadeOutRightBig {
 +
0% {
 +
opacity: 1;
 +
transform: translateX(0);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateX(2000px);
 +
}
 +
}
 +
 +
.fadeOutRightBig {
 +
-webkit-animation-name: fadeOutRightBig;
 +
-moz-animation-name: fadeOutRightBig;
 +
-ms-animation-name: fadeOutRightBig;
 +
animation-name: fadeOutRightBig;
 +
}
 +
@-webkit-keyframes bounceIn {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: scale(.3);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
-webkit-transform: scale(1.05);
 +
}
 +
 +
70% {
 +
-webkit-transform: scale(.9);
 +
}
 +
 +
100% {
 +
-webkit-transform: scale(1);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceIn {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: scale(.3);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
-moz-transform: scale(1.05);
 +
}
 +
 +
70% {
 +
-moz-transform: scale(.9);
 +
}
 +
 +
100% {
 +
-moz-transform: scale(1);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceIn {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: scale(.3);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
-ms-transform: scale(1.05);
 +
}
 +
 +
70% {
 +
-ms-transform: scale(.9);
 +
}
 +
 +
100% {
 +
-ms-transform: scale(1);
 +
}
 +
}
 +
 +
@keyframes bounceIn {
 +
0% {
 +
opacity: 0;
 +
transform: scale(.3);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
transform: scale(1.05);
 +
}
 +
 +
70% {
 +
transform: scale(.9);
 +
}
 +
 +
100% {
 +
transform: scale(1);
 +
}
 +
}
 +
 +
.bounceIn {
 +
-webkit-animation-name: bounceIn;
 +
-moz-animation-name: bounceIn;
 +
-ms-animation-name: bounceIn;
 +
animation-name: bounceIn;
 +
}
 +
@-webkit-keyframes bounceInUp {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateY(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-webkit-transform: translateY(-30px);
 +
}
 +
 +
80% {
 +
-webkit-transform: translateY(10px);
 +
}
 +
 +
100% {
 +
-webkit-transform: translateY(0);
 +
}
 +
}
 +
@-moz-keyframes bounceInUp {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateY(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-moz-transform: translateY(-30px);
 +
}
 +
 +
80% {
 +
-moz-transform: translateY(10px);
 +
}
 +
 +
100% {
 +
-moz-transform: translateY(0);
 +
}
 +
}
 +
@-ms-keyframes bounceInUp {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateY(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-ms-transform: translateY(-30px);
 +
}
 +
 +
80% {
 +
-ms-transform: translateY(10px);
 +
}
 +
 +
100% {
 +
-ms-transform: translateY(0);
 +
}
 +
}
 +
@keyframes bounceInUp {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
transform: translateY(-30px);
 +
}
 +
 +
80% {
 +
transform: translateY(10px);
 +
}
 +
 +
100% {
 +
transform: translateY(0);
 +
}
 +
}
 +
 +
.bounceInUp {
 +
-webkit-animation-name: bounceInUp;
 +
-moz-animation-name: bounceInUp;
 +
-ms-animation-name: bounceInUp;
 +
animation-name: bounceInUp;
 +
}
 +
@-webkit-keyframes bounceInDown {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateY(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-webkit-transform: translateY(30px);
 +
}
 +
 +
80% {
 +
-webkit-transform: translateY(-10px);
 +
}
 +
 +
100% {
 +
-webkit-transform: translateY(0);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceInDown {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateY(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-moz-transform: translateY(30px);
 +
}
 +
 +
80% {
 +
-moz-transform: translateY(-10px);
 +
}
 +
 +
100% {
 +
-moz-transform: translateY(0);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceInDown {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateY(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-ms-transform: translateY(30px);
 +
}
 +
 +
80% {
 +
-ms-transform: translateY(-10px);
 +
}
 +
 +
100% {
 +
-ms-transform: translateY(0);
 +
}
 +
}
 +
 +
@keyframes bounceInDown {
 +
0% {
 +
opacity: 0;
 +
transform: translateY(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
transform: translateY(30px);
 +
}
 +
 +
80% {
 +
transform: translateY(-10px);
 +
}
 +
 +
100% {
 +
transform: translateY(0);
 +
}
 +
}
 +
 +
.bounceInDown {
 +
-webkit-animation-name: bounceInDown;
 +
-moz-animation-name: bounceInDown;
 +
-ms-animation-name: bounceInDown;
 +
animation-name: bounceInDown;
 +
}
 +
@-webkit-keyframes bounceInLeft {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateX(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-webkit-transform: translateX(30px);
 +
}
 +
 +
80% {
 +
-webkit-transform: translateX(-10px);
 +
}
 +
 +
100% {
 +
-webkit-transform: translateX(0);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceInLeft {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateX(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-moz-transform: translateX(30px);
 +
}
 +
 +
80% {
 +
-moz-transform: translateX(-10px);
 +
}
 +
 +
100% {
 +
-moz-transform: translateX(0);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceInLeft {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateX(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-ms-transform: translateX(30px);
 +
}
 +
 +
80% {
 +
-ms-transform: translateX(-10px);
 +
}
 +
 +
100% {
 +
-ms-transform: translateX(0);
 +
}
 +
}
 +
 +
@keyframes bounceInLeft {
 +
0% {
 +
opacity: 0;
 +
transform: translateX(-2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
transform: translateX(30px);
 +
}
 +
 +
80% {
 +
transform: translateX(-10px);
 +
}
 +
 +
100% {
 +
transform: translateX(0);
 +
}
 +
}
 +
 +
.bounceInLeft {
 +
-webkit-animation-name: bounceInLeft;
 +
-moz-animation-name: bounceInLeft;
 +
-ms-animation-name: bounceInLeft;
 +
animation-name: bounceInLeft;
 +
}
 +
@-webkit-keyframes bounceInRight {
 +
0% {
 +
opacity: 0;
 +
-webkit-transform: translateX(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-webkit-transform: translateX(-30px);
 +
}
 +
 +
80% {
 +
-webkit-transform: translateX(10px);
 +
}
 +
 +
100% {
 +
-webkit-transform: translateX(0);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceInRight {
 +
0% {
 +
opacity: 0;
 +
-moz-transform: translateX(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-moz-transform: translateX(-30px);
 +
}
 +
 +
80% {
 +
-moz-transform: translateX(10px);
 +
}
 +
 +
100% {
 +
-moz-transform: translateX(0);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceInRight {
 +
0% {
 +
opacity: 0;
 +
-ms-transform: translateX(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
-ms-transform: translateX(-30px);
 +
}
 +
 +
80% {
 +
-ms-transform: translateX(10px);
 +
}
 +
 +
100% {
 +
-ms-transform: translateX(0);
 +
}
 +
}
 +
 +
@keyframes bounceInRight {
 +
0% {
 +
opacity: 0;
 +
transform: translateX(2000px);
 +
}
 +
 +
60% {
 +
opacity: 1;
 +
transform: translateX(-30px);
 +
}
 +
 +
80% {
 +
transform: translateX(10px);
 +
}
 +
 +
100% {
 +
transform: translateX(0);
 +
}
 +
}
 +
 +
.bounceInRight {
 +
-webkit-animation-name: bounceInRight;
 +
-moz-animation-name: bounceInRight;
 +
-ms-animation-name: bounceInRight;
 +
animation-name: bounceInRight;
 +
}
 +
@-webkit-keyframes bounceOut {
 +
0% {
 +
-webkit-transform: scale(1);
 +
}
 +
 +
25% {
 +
-webkit-transform: scale(.95);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
-webkit-transform: scale(1.1);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: scale(.3);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceOut {
 +
0% {
 +
-moz-transform: scale(1);
 +
}
 +
 +
25% {
 +
-moz-transform: scale(.95);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
-moz-transform: scale(1.1);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: scale(.3);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceOut {
 +
0% {
 +
-ms-transform: scale(1);
 +
}
 +
 +
25% {
 +
-ms-transform: scale(.95);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
-ms-transform: scale(1.1);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: scale(.3);
 +
}
 +
}
 +
 +
@keyframes bounceOut {
 +
0% {
 +
transform: scale(1);
 +
}
 +
 +
25% {
 +
transform: scale(.95);
 +
}
 +
 +
50% {
 +
opacity: 1;
 +
transform: scale(1.1);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: scale(.3);
 +
}
 +
}
 +
 +
.bounceOut {
 +
-webkit-animation-name: bounceOut;
 +
-moz-animation-name: bounceOut;
 +
-ms-animation-name: bounceOut;
 +
animation-name: bounceOut;
 +
}
 +
@-webkit-keyframes bounceOutUp {
 +
0% {
 +
-webkit-transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-webkit-transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateY(-2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceOutUp {
 +
0% {
 +
-moz-transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-moz-transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateY(-2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceOutUp {
 +
0% {
 +
-ms-transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-ms-transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateY(-2000px);
 +
}
 +
}
 +
 +
@keyframes bounceOutUp {
 +
0% {
 +
transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
transform: translateY(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateY(-2000px);
 +
}
 +
}
 +
 +
.bounceOutUp {
 +
-webkit-animation-name: bounceOutUp;
 +
-moz-animation-name: bounceOutUp;
 +
-ms-animation-name: bounceOutUp;
 +
animation-name: bounceOutUp;
 +
}
 +
@-webkit-keyframes bounceOutDown {
 +
0% {
 +
-webkit-transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-webkit-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateY(2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceOutDown {
 +
0% {
 +
-moz-transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-moz-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateY(2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceOutDown {
 +
0% {
 +
-ms-transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-ms-transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateY(2000px);
 +
}
 +
}
 +
 +
@keyframes bounceOutDown {
 +
0% {
 +
transform: translateY(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
transform: translateY(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateY(2000px);
 +
}
 +
}
 +
 +
.bounceOutDown {
 +
-webkit-animation-name: bounceOutDown;
 +
-moz-animation-name: bounceOutDown;
 +
-ms-animation-name: bounceOutDown;
 +
animation-name: bounceOutDown;
 +
}
 +
@-webkit-keyframes bounceOutLeft {
 +
0% {
 +
-webkit-transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-webkit-transform: translateX(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(-2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceOutLeft {
 +
0% {
 +
-moz-transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-moz-transform: translateX(20px);
 +
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateX(-2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceOutLeft {
 +
0% {
 +
-ms-transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-ms-transform: translateX(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateX(-2000px);
 +
}
 +
}
 +
 +
@keyframes bounceOutLeft {
 +
0% {
 +
transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
transform: translateX(20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateX(-2000px);
 +
}
 +
}
 +
 +
.bounceOutLeft {
 +
-webkit-animation-name: bounceOutLeft;
 +
-moz-animation-name: bounceOutLeft;
 +
-ms-animation-name: bounceOutLeft;
 +
animation-name: bounceOutLeft;
 +
}
 +
@-webkit-keyframes bounceOutRight {
 +
0% {
 +
-webkit-transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-webkit-transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(2000px);
 +
}
 +
}
 +
 +
@-moz-keyframes bounceOutRight {
 +
0% {
 +
-moz-transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-moz-transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-moz-transform: translateX(2000px);
 +
}
 +
}
 +
 +
@-ms-keyframes bounceOutRight {
 +
0% {
 +
-ms-transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
-ms-transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
-ms-transform: translateX(2000px);
 +
}
 +
}
 +
 +
@keyframes bounceOutRight {
 +
0% {
 +
transform: translateX(0);
 +
}
 +
 +
20% {
 +
opacity: 1;
 +
transform: translateX(-20px);
 +
}
 +
 +
100% {
 +
opacity: 0;
 +
transform: translateX(2000px);
 +
}
 +
}
 +
 +
.bounceOutRight {
 +
-webkit-animation-name: bounceOutRight;
 +
-moz-animation-name: bounceOutRight;
 +
-ms-animation-name: bounceOutRight;
 +
animation-name: bounceOutRight;
 +
}
 +
@-webkit-keyframes rotateIn {
 +
0% {
 +
-webkit-transform-origin: center center;
 +
-webkit-transform: rotate(-200deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: center center;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
@-moz-keyframes rotateIn {
 +
0% {
 +
-moz-transform-origin: center center;
 +
-moz-transform: rotate(-200deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: center center;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
@-ms-keyframes rotateIn {
 +
0% {
 +
-ms-transform-origin: center center;
 +
-ms-transform: rotate(-200deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: center center;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
@keyframes rotateIn {
 +
0% {
 +
transform-origin: center center;
 +
transform: rotate(-200deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
transform-origin: center center;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
.rotateIn {
 +
-webkit-animation-name: rotateIn;
 +
-moz-animation-name: rotateIn;
 +
-ms-animation-name: rotateIn;
 +
animation-name: rotateIn;
 +
}
 +
@-webkit-keyframes rotateInUpLeft {
 +
0% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateInUpLeft {
 +
0% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateInUpLeft {
 +
0% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@keyframes rotateInUpLeft {
 +
0% {
 +
transform-origin: left bottom;
 +
transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
transform-origin: left bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
.rotateInUpLeft {
 +
-webkit-animation-name: rotateInUpLeft;
 +
-moz-animation-name: rotateInUpLeft;
 +
-ms-animation-name: rotateInUpLeft;
 +
animation-name: rotateInUpLeft;
 +
}
 +
@-webkit-keyframes rotateInDownLeft {
 +
0% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateInDownLeft {
 +
0% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateInDownLeft {
 +
0% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@keyframes rotateInDownLeft {
 +
0% {
 +
transform-origin: left bottom;
 +
transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
transform-origin: left bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
.rotateInDownLeft {
 +
-webkit-animation-name: rotateInDownLeft;
 +
-moz-animation-name: rotateInDownLeft;
 +
-ms-animation-name: rotateInDownLeft;
 +
animation-name: rotateInDownLeft;
 +
}
 +
@-webkit-keyframes rotateInUpRight {
 +
0% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateInUpRight {
 +
0% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateInUpRight {
 +
0% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@keyframes rotateInUpRight {
 +
0% {
 +
transform-origin: right bottom;
 +
transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
transform-origin: right bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
.rotateInUpRight {
 +
-webkit-animation-name: rotateInUpRight;
 +
-moz-animation-name: rotateInUpRight;
 +
-ms-animation-name: rotateInUpRight;
 +
animation-name: rotateInUpRight;
 +
}
 +
@-webkit-keyframes rotateInDownRight {
 +
0% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateInDownRight {
 +
0% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateInDownRight {
 +
0% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
@keyframes rotateInDownRight {
 +
0% {
 +
transform-origin: right bottom;
 +
transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
 +
100% {
 +
transform-origin: right bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
}
 +
 +
.rotateInDownRight {
 +
-webkit-animation-name: rotateInDownRight;
 +
-moz-animation-name: rotateInDownRight;
 +
-ms-animation-name: rotateInDownRight;
 +
animation-name: rotateInDownRight;
 +
}
 +
@-webkit-keyframes rotateOut {
 +
0% {
 +
-webkit-transform-origin: center center;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: center center;
 +
-webkit-transform: rotate(200deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateOut {
 +
0% {
 +
-moz-transform-origin: center center;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: center center;
 +
-moz-transform: rotate(200deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateOut {
 +
0% {
 +
-ms-transform-origin: center center;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: center center;
 +
-ms-transform: rotate(200deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@keyframes rotateOut {
 +
0% {
 +
transform-origin: center center;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
transform-origin: center center;
 +
transform: rotate(200deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
.rotateOut {
 +
-webkit-animation-name: rotateOut;
 +
-moz-animation-name: rotateOut;
 +
-ms-animation-name: rotateOut;
 +
animation-name: rotateOut;
 +
}
 +
@-webkit-keyframes rotateOutUpLeft {
 +
0% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateOutUpLeft {
 +
0% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateOutUpLeft {
 +
0% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@keyframes rotateOutUpLeft {
 +
0% {
 +
transform-origin: left bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-transform-origin: left bottom;
 +
-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
.rotateOutUpLeft {
 +
-webkit-animation-name: rotateOutUpLeft;
 +
-moz-animation-name: rotateOutUpLeft;
 +
-ms-animation-name: rotateOutUpLeft;
 +
animation-name: rotateOutUpLeft;
 +
}
 +
@-webkit-keyframes rotateOutDownLeft {
 +
0% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: left bottom;
 +
-webkit-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateOutDownLeft {
 +
0% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: left bottom;
 +
-moz-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateOutDownLeft {
 +
0% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: left bottom;
 +
-ms-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@keyframes rotateOutDownLeft {
 +
0% {
 +
transform-origin: left bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
transform-origin: left bottom;
 +
transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
.rotateOutDownLeft {
 +
-webkit-animation-name: rotateOutDownLeft;
 +
-moz-animation-name: rotateOutDownLeft;
 +
-ms-animation-name: rotateOutDownLeft;
 +
animation-name: rotateOutDownLeft;
 +
}
 +
@-webkit-keyframes rotateOutUpRight {
 +
0% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateOutUpRight {
 +
0% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateOutUpRight {
 +
0% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@keyframes rotateOutUpRight {
 +
0% {
 +
transform-origin: right bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
transform-origin: right bottom;
 +
transform: rotate(90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
.rotateOutUpRight {
 +
-webkit-animation-name: rotateOutUpRight;
 +
-moz-animation-name: rotateOutUpRight;
 +
-ms-animation-name: rotateOutUpRight;
 +
animation-name: rotateOutUpRight;
 +
}
 +
@-webkit-keyframes rotateOutDownRight {
 +
0% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-webkit-transform-origin: right bottom;
 +
-webkit-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-moz-keyframes rotateOutDownRight {
 +
0% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-moz-transform-origin: right bottom;
 +
-moz-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@-ms-keyframes rotateOutDownRight {
 +
0% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
-ms-transform-origin: right bottom;
 +
-ms-transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
@keyframes rotateOutDownRight {
 +
0% {
 +
transform-origin: right bottom;
 +
transform: rotate(0);
 +
opacity: 1;
 +
}
 +
 +
100% {
 +
transform-origin: right bottom;
 +
transform: rotate(-90deg);
 +
opacity: 0;
 +
}
 +
}
 +
 +
.rotateOutDownRight {
 +
-webkit-animation-name: rotateOutDownRight;
 +
-moz-animation-name: rotateOutDownRight;
 +
-ms-animation-name: rotateOutDownRight;
 +
animation-name: rotateOutDownRight;
 +
}
 +
@-webkit-keyframes hinge {
 +
0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 +
20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 +
40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 +
80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; }
 +
100% { -webkit-transform: translateY(700px); opacity: 0; }
 +
}
 +
 +
@-moz-keyframes hinge {
 +
0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 +
20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 +
40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 +
80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; }
 +
100% { -moz-transform: translateY(700px); opacity: 0; }
 +
}
 +
 +
@-ms-keyframes hinge {
 +
0% { -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
 +
20%, 60% { -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
 +
40% { -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
 +
80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; }
 +
100% { -ms-transform: translateY(700px); opacity: 0; }
 +
}
 +
 +
@keyframes hinge {
 +
0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; }
 +
20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; }
 +
40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; }
 +
80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; }
 +
100% { transform: translateY(700px); opacity: 0; }
 +
}
 +
 +
.hinge {
 +
-webkit-animation-name: hinge;
 +
-moz-animation-name: hinge;
 +
-ms-animation-name: hinge;
 +
animation-name: hinge;
 +
}
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes rollIn {
 +
0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); }
 +
100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); }
 +
}
 +
 +
@-moz-keyframes rollIn {
 +
0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); }
 +
100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); }
 +
}
 +
 +
@-ms-keyframes rollIn {
 +
0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); }
 +
100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); }
 +
}
 +
 +
@keyframes rollIn {
 +
0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); }
 +
100% { opacity: 1; transform: translateX(0px) rotate(0deg); }
 +
}
 +
 +
.rollIn {
 +
-webkit-animation-name: rollIn;
 +
-moz-animation-name: rollIn;
 +
-ms-animation-name: rollIn;
 +
animation-name: rollIn;
 +
}
 +
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 +
 +
@-webkit-keyframes rollOut {
 +
    0% {
 +
opacity: 1;
 +
-webkit-transform: translateX(0px) rotate(0deg);
 +
}
 +
 +
    100% {
 +
opacity: 0;
 +
-webkit-transform: translateX(100%) rotate(120deg);
 +
}
 +
}
 +
 +
@-moz-keyframes rollOut {
 +
    0% {
 +
opacity: 1;
 +
-moz-transform: translateX(0px) rotate(0deg);
 +
}
 +
 +
    100% {
 +
opacity: 0;
 +
-moz-transform: translateX(100%) rotate(120deg);
 +
}
 +
}
 +
 +
@-ms-keyframes rollOut {
 +
    0% {
 +
opacity: 1;
 +
-ms-transform: translateX(0px) rotate(0deg);
 +
}
 +
 +
    100% {
 +
opacity: 0;
 +
-ms-transform: translateX(100%) rotate(120deg);
 +
}
 +
}
 +
 +
@keyframes rollOut {
 +
    0% {
 +
opacity: 1;
 +
transform: translateX(0px) rotate(0deg);
 +
}
 +
 +
    100% {
 +
opacity: 0;
 +
transform: translateX(100%) rotate(120deg);
 +
}
 +
}
 +
 +
.rollOut {
 +
-webkit-animation-name: rollOut;
 +
-moz-animation-name: rollOut;
 +
-ms-animation-name: rollOut;
 +
animation-name: rollOut;
 +
}
 +
 +
</style>
 
<!-- one bt one slider -->
 
<!-- one bt one slider -->
 
<div class="wrape homeone">
 
<div class="wrape homeone">

Revision as of 11:57, 30 July 2017

HOME
TEAM
PROJECT
Description
Design
Experiments
Notebook
InterLab
Contribution
Model
Results
Demonstrate
Improve
Attributions
PARTS
Parts
Basic Parts
Composite Parts
Part Collection
SAFETY
HUMAN PRACTICES
Silver HP
Integrated and Gold
Public Engagement
AWARDS
Applied Design
Entrepreneurship
Hardware
Measurement
Model
Plant
Software
JUDGING FORM
<style>

  1. obo_slider{

position: relative;margin:0 auto;width:960px; }

.oneByOne1{ margin: 0; width: 100%; height: 420px; background: #fff; position: relative; overflow: hidden;

}

  1. obo_slider .oneByOne_item{

position: absolute; width: 960px; height: 420px; overflow: hidden; }

  1. obo_slider .oneByOne_item span{

font:13px 'PT Sans', Arial, Tahoma, Verdana, Sans-Serif;color:#393939; }

  1. obo_slider .oneByOne_item a{

text-decoration: none; color: #B22222; }

  1. obo_slider .oneByOne_item span.slide2Txt1{ 
 	position: relative;

float: left; margin: 120px 12px 0 120px; color: #9ACD32; font-size: 24px; background: #FFFFFF; padding: 8px; }

  1. obo_slider .oneByOne_item span.slide2Txt2{ 
 	position: relative;

clear: left; float: left; margin: 6px 12px 0 120px; color: #666666; font-size: 14px; background: #FFFFFF; padding: 8px; }

  1. obo_slider .oneByOne_item span.slide2Txt3{ 
 	position: relative;

clear: left; float: left; margin: 6px 12px 0 120px; color: #666666; font-size: 12px; background: #FFFFFF; padding: 8px; }


  1. obo_slider img.wp1_1{

position: absolute; top: 255px; left: 512px; }

  1. obo_slider img.wp1_2{

position: absolute; top: 190px; left: 360px; }

  1. obo_slider img.wp1_3{

position: absolute; top: 28px; right: 0px; }

  1. obo_slider img.wp1_left {left:0;right:auto;}
  2. obo_slider .oneByOne_item span.txt1{

clear: left; position: relative; float: left; margin: 70px 0 0 10px; font-size:24px; font-family: 'Microsoft Yahei', 'Simsun'; }

  1. obo_slider .oneByOne_item span.txt1 a{

color: #FFFFFF; }

  1. obo_slider .oneByOne_item span.txt2{

clear: left; position: relative; float: left; margin: 0 0 0 10px; text-transform:uppercase; text-shadow:#fff 0 1px 1px, #bfbfbf 0 2px 2px; color: #5eafcd; font-weight:bold; font-size: 38px; font-family: 'Microsoft Yahei', 'Simsun'; }

  1. obo_slider .oneByOne_item span.txt3{

clear: left; position: relative; float: left; margin: 0 0 0 10px; width:400px; font-family: 'Microsoft Yahei', 'Simsun'; }

  1. obo_slider .oneByOne_item span.txt4{

clear: left; position: relative; float: left; margin: 55px 0 0 10px; width:400px; font-family: 'Microsoft Yahei', 'Simsun'; }

  1. obo_slider .oneByOne_item span.txt4 a {

display:block; text-align:center; cursor:pointer; font:bold italic 16px 'PT Sans'; color:#3fa3c9; width:151px; height:39px; padding:17px 0 0 0;}

.btn_l { 

   background: url(../images/sprite.png) no-repeat scroll 0 -123px rgba(0, 0, 0, 0);
   border: medium none;
   color: #3FA3C9;
   cursor: pointer;
   font: italic bold 16px 'Microsoft Yahei','Simsun';
   height: 56px;
   padding: 0;
   width: 151px;

}

.btn_l:hover { 

   background-position: -157px -123px;

}


  1. obo_slider img.wp1{

position: absolute; top: 240px; left: 380px; }

  1. obo_slider img.wp2{

position: absolute; top: 200px; left: 470px; }

  1. obo_slider img.wp3{

position: absolute; top: 100px; left: 600px; }

  1. obo_slider .oneByOne_item span.txt_right {padding-left:550px;}
  2. obo_slider .oneByOne_item span.txt4.txt_right {padding-left:735px;}
  3. obo_slider .oneByOne_item span.blue {background:#3fa3c9;color:#fff;padding:6px 17px;margin-bottom:5px;}
  4. obo_slider .oneByOne_item span.txt_right2 {margin-left:405px;}
  5. obo_slider .oneByOne_item span.short {width:290px;margin-top:20px;}

.homeone .oneByOne1 {background:#63b4d2 url(../images/moover_shadow.png) center top no-repeat;} .homeone #obo_slider .oneByOne_item span.txt1, .homeone #obo_slider .oneByOne_item span.txt2, .homeone #obo_slider .oneByOne_item span.txt3 {color:#fff;} .homeone #obo_slider .oneByOne_item span.txt1 {margin-top:80px;} .homeone #obo_slider .oneByOne_item span.txt1.blue {margin-top:66px;} .homeone #obo_slider .oneByOne_item span.blue {background:#fff;color:#3fa3c9;} .homeone #obo_slider .oneByOne_item span.txt4up {margin-top:30px;} .homeone #obo_slider .oneByOne_item .slide1_bot {margin-top:10px;} .homeone #obo_slider .oneByOne_item .slide2_bot {margin-top:15px;} .homeone #obo_slider .oneByOne_item .slide3_bot {margin-top:5px;} .homeone .arrowButton .prevArrow, .homeone .arrowButton .nextArrow {top:180px;}

  1. obo_slider .oneByOne_item span.wp1{

clear: left; position: relative; float: left; margin: 120px 12px 0 60px; background: #20B2AA; padding: 8px; color: #FFFFFF; font-size: 40px; }

  1. obo_slider .oneByOne_item span.wp1 a{

color: #FFFFFF; }

  1. obo_slider .oneByOne_item span.wp2{

clear: left; position: relative; float: left; margin: 12px 12px 0 60px;

color: #FFFFFF; background: #5F9EA0; padding: 8px; font-size: 16px; }

  1. obo_slider .oneByOne_item img.bigImage{

position: absolute; top: 0; left: 0;

}

  1. obo_slider .oneByOne_item span.slide5Txt1{ 
 	position: relative;

float: left; margin: 150px 12px 0 600px; color: #9ACD32; font-size: 24px; background: #FFFFFF; padding: 8px; }

  1. obo_slider .oneByOne_item span.slide5Txt2{ 
 	position: relative;

clear: left; float: left; margin: 12px 12px 0 600px; color: #666666; font-size: 12px; background: #FFFFFF; padding: 8px; }


.buttonArea{ 

   float: left;
   left:38%;
   position: relative;            
   top:285px;

} .buttonCon{ 

   float: left;
   position: relative;

} .buttonCon .theButton { display:none; color: #B22222; width: 10px; height: 11px; background:url(../images/circlebutton.png) -5px -3px no-repeat; text-indent: -9999px; border: 0; float: left; margin-right:5px; -webkit-border-radius:13px;-moz-border-radius:13px;border-radius:13px;behavior: url(PIE.htc); } .buttonArea a.active { background-position: -5px -25px; background-color:#5eafcd; }

.arrowButton{ cursor: pointer; } .arrowButton .prevArrow{ background: url(../images/prev.png) no-repeat; width: 60px; height: 60px; position: absolute; top: 127px; left: 50px; } .arrowButton .nextArrow{ background: url(../images/next.png) no-repeat; width: 60px; height: 60px; position: absolute; top: 127px; right: 50px; }

.arrowButton .prevArrow:hover, .arrowButton .nextArrow:hover {opacity:.9;}

.animate0{ 

  	-webkit-animation-duration: .6s;

-webkit-animation-delay: 0s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .6s; -moz-animation-delay: 0s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .6s; -ms-animation-delay: 0s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .6s; animation-delay: 0s; animation-timing-function: ease; animation-fill-mode: both; }

.animate1{ 

  	-webkit-animation-duration: .6s;

-webkit-animation-delay: .2s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .6s; -moz-animation-delay: .2s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .6s; -ms-animation-delay: .2s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .6s; animation-delay: .2s; animation-timing-function: ease; animation-fill-mode: both; }

.animate2{ 

  	-webkit-animation-duration: .6s;

-webkit-animation-delay: .4s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .6s; -moz-animation-delay: .4s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .6s; -ms-animation-delay: .4s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .6s; animation-delay: .4s; animation-timing-function: ease; animation-fill-mode: both; }

.animate3{ 

  	-webkit-animation-duration: .6s;

-webkit-animation-delay: .6s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .6s; -moz-animation-delay: .6s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .6s; -ms-animation-delay: .6s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .6s; animation-delay: .6s; animation-timing-function: ease; animation-fill-mode: both; }

.animate4{ 

  	-webkit-animation-duration: .6s;

-webkit-animation-delay: .8s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .6s; -moz-animation-delay: .8s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .6s; -ms-animation-delay: .8s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .6s; animation-delay: .8s; animation-timing-function: ease; animation-fill-mode: both; }

.animate5{ 

  	-webkit-animation-duration: .6s;

-webkit-animation-delay: 1s; -webkit-animation-timing-function: ease; -webkit-animation-fill-mode: both; -moz-animation-duration: .6s; -moz-animation-delay: 1s; -moz-animation-timing-function: ease; -moz-animation-fill-mode: both; -ms-animation-duration: .6s; -ms-animation-delay: 1s; -ms-animation-timing-function: ease; -ms-animation-fill-mode: both; animation-duration: .6s; animation-delay: 1s; animation-timing-function: ease; animation-fill-mode: both; }


.animated { -webkit-animation: 1s ease; -moz-animation: 1s ease; -ms-animation: 1s ease; animation: 1s ease; }

.animated.hinge { -webkit-animation: 2s ease; -moz-animation: 2s ease; -ms-animation: 2s ease; animation: 2s ease; }

@-webkit-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} }

@-moz-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} }

@-ms-keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} }

@keyframes flash { 0%, 50%, 100% {opacity: 1;} 25%, 75% {opacity: 0;} }

.flash { -webkit-animation-name: flash; -moz-animation-name: flash; -ms-animation-name: flash; animation-name: flash; } @-webkit-keyframes shake { 0%, 100% {-webkit-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-webkit-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-webkit-transform: translateX(10px);} }

@-moz-keyframes shake { 0%, 100% {-moz-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-moz-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-moz-transform: translateX(10px);} }

@-ms-keyframes shake { 0%, 100% {-ms-transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {-ms-transform: translateX(-10px);} 20%, 40%, 60%, 80% {-ms-transform: translateX(10px);} }

@keyframes shake { 0%, 100% {transform: translateX(0);} 10%, 30%, 50%, 70%, 90% {transform: translateX(-10px);} 20%, 40%, 60%, 80% {transform: translateX(10px);} }

.shake { -webkit-animation-name: shake; -moz-animation-name: shake; -ms-animation-name: shake; animation-name: shake; } @-webkit-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 40% {-webkit-transform: translateY(-30px);} 60% {-webkit-transform: translateY(-15px);} }

@-moz-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-moz-transform: translateY(0);} 40% {-moz-transform: translateY(-30px);} 60% {-moz-transform: translateY(-15px);} }

@-ms-keyframes bounce { 0%, 20%, 50%, 80%, 100% {-ms-transform: translateY(0);} 40% {-ms-transform: translateY(-30px);} 60% {-ms-transform: translateY(-15px);} }

@keyframes bounce { 0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 40% {transform: translateY(-30px);} 60% {transform: translateY(-15px);} }

.bounce { -webkit-animation-name: bounce; -moz-animation-name: bounce; -ms-animation-name: bounce; animation-name: bounce; } @-webkit-keyframes tada { 0% {-webkit-transform: scale(1);} 10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);} 100% {-webkit-transform: scale(1) rotate(0);} }

@-moz-keyframes tada { 0% {-moz-transform: scale(1);} 10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);} 100% {-moz-transform: scale(1) rotate(0);} }

@-ms-keyframes tada { 0% {-ms-transform: scale(1);} 10%, 20% {-ms-transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {-ms-transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {-ms-transform: scale(1.1) rotate(-3deg);} 100% {-ms-transform: scale(1) rotate(0);} }

@keyframes tada { 0% {transform: scale(1);} 10%, 20% {transform: scale(0.9) rotate(-3deg);} 30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);} 40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);} 100% {transform: scale(1) rotate(0);} }

.tada { -webkit-animation-name: tada; -moz-animation-name: tada; -ms-animation-name: tada; animation-name: tada; } @-webkit-keyframes swing { 20%, 40%, 60%, 80%, 100% { -webkit-transform-origin: top center; } 20% { -webkit-transform: rotate(15deg); } 40% { -webkit-transform: rotate(-10deg); } 60% { -webkit-transform: rotate(5deg); } 80% { -webkit-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } }

@-moz-keyframes swing { 20%, 40%, 60%, 80%, 100% { -moz-transform-origin: top center; } 20% { -moz-transform: rotate(15deg); } 40% { -moz-transform: rotate(-10deg); } 60% { -moz-transform: rotate(5deg); } 80% { -moz-transform: rotate(-5deg); } 100% { -moz-transform: rotate(0deg); } }

@-ms-keyframes swing { 20%, 40%, 60%, 80%, 100% { -ms-transform-origin: top center; } 20% { -ms-transform: rotate(15deg); } 40% { -ms-transform: rotate(-10deg); } 60% { -ms-transform: rotate(5deg); } 80% { -ms-transform: rotate(-5deg); } 100% { -webkit-transform: rotate(0deg); } }

@keyframes swing { 20%, 40%, 60%, 80%, 100% { transform-origin: top center; } 20% { transform: rotate(15deg); } 40% { transform: rotate(-10deg); } 60% { transform: rotate(5deg); } 80% { transform: rotate(-5deg); } 100% { transform: rotate(0deg); } }

.swing { -webkit-animation-name: swing; -moz-animation-name: swing; -ms-animation-name: swing; animation-name: swing; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes wobble { 

 0% { -webkit-transform: translateX(0%); }
 15% { -webkit-transform: translateX(-25%) rotate(-5deg); }
 30% { -webkit-transform: translateX(20%) rotate(3deg); }
 45% { -webkit-transform: translateX(-15%) rotate(-3deg); }
 60% { -webkit-transform: translateX(10%) rotate(2deg); }
 75% { -webkit-transform: translateX(-5%) rotate(-1deg); }
 100% { -webkit-transform: translateX(0%); }

}

@-moz-keyframes wobble { 

 0% { -moz-transform: translateX(0%); }
 15% { -moz-transform: translateX(-25%) rotate(-5deg); }
 30% { -moz-transform: translateX(20%) rotate(3deg); }
 45% { -moz-transform: translateX(-15%) rotate(-3deg); }
 60% { -moz-transform: translateX(10%) rotate(2deg); }
 75% { -moz-transform: translateX(-5%) rotate(-1deg); }
 100% { -moz-transform: translateX(0%); }

}

@-ms-keyframes wobble { 

 0% { -ms-transform: translateX(0%); }
 15% { -ms-transform: translateX(-25%) rotate(-5deg); }
 30% { -ms-transform: translateX(20%) rotate(3deg); }
 45% { -ms-transform: translateX(-15%) rotate(-3deg); }
 60% { -ms-transform: translateX(10%) rotate(2deg); }
 75% { -ms-transform: translateX(-5%) rotate(-1deg); }
 100% { -ms-transform: translateX(0%); }

}

@keyframes wobble { 

 0% { transform: translateX(0%); }
 15% { transform: translateX(-25%) rotate(-5deg); }
 30% { transform: translateX(20%) rotate(3deg); }
 45% { transform: translateX(-15%) rotate(-3deg); }
 60% { transform: translateX(10%) rotate(2deg); }
 75% { transform: translateX(-5%) rotate(-1deg); }
 100% { transform: translateX(0%); }

}

.wobble { -webkit-animation-name: wobble; -moz-animation-name: wobble; -ms-animation-name: wobble; animation-name: wobble; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes pulse { 

   0% { -webkit-transform: scale(1); }

50% { -webkit-transform: scale(1.1); } 

   100% { -webkit-transform: scale(1); }

} @-moz-keyframes pulse { 

   0% { -moz-transform: scale(1); }

50% { -moz-transform: scale(1.1); } 

   100% { -moz-transform: scale(1); }

} @-ms-keyframes pulse { 

   0% { -ms-transform: scale(1); }

50% { -ms-transform: scale(1.1); } 

   100% { -ms-transform: scale(1); }

} @keyframes pulse { 

   0% { transform: scale(1); }

50% { transform: scale(1.1); } 

   100% { transform: scale(1); }

}

.pulse { -webkit-animation-name: pulse; -moz-animation-name: pulse; -ms-animation-name: pulse; animation-name: pulse; } @-webkit-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

@-moz-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

@-ms-keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

@keyframes fadeIn { 0% {opacity: 0;} 100% {opacity: 1;} }

.fadeIn { -webkit-animation-name: fadeIn; -moz-animation-name: fadeIn; -ms-animation-name: fadeIn; animation-name: fadeIn; } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(20px); }

100% { opacity: 1; -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUp { 0% { opacity: 0; -moz-transform: translateY(20px); }

100% { opacity: 1; -moz-transform: translateY(0); } }

@-ms-keyframes fadeInUp { 0% { opacity: 0; -ms-transform: translateY(20px); }

100% { opacity: 1; -ms-transform: translateY(0); } }

@keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px); }

100% { opacity: 1; transform: translateY(0); } }

.fadeInUp { -webkit-animation-name: fadeInUp; -moz-animation-name: fadeInUp; -ms-animation-name: fadeInUp; animation-name: fadeInUp; } @-webkit-keyframes fadeInDown { 0% { opacity: 0; -webkit-transform: translateY(-20px); }

100% { opacity: 1; -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInDown { 0% { opacity: 0; -moz-transform: translateY(-20px); }

100% { opacity: 1; -moz-transform: translateY(0); } }

@-ms-keyframes fadeInDown { 0% { opacity: 0; -ms-transform: translateY(-20px); }

100% { opacity: 1; -ms-transform: translateY(0); } }

@keyframes fadeInDown { 0% { opacity: 0; transform: translateY(-20px); }

100% { opacity: 1; transform: translateY(0); } }

.fadeInDown { -webkit-animation-name: fadeInDown; -moz-animation-name: fadeInDown; -ms-animation-name: fadeInDown; animation-name: fadeInDown; } @-webkit-keyframes fadeInLeft { 0% { opacity: 0; -webkit-transform: translateX(-20px); }

100% { opacity: 1; -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInLeft { 0% { opacity: 0; -moz-transform: translateX(-20px); }

100% { opacity: 1; -moz-transform: translateX(0); } }

@-ms-keyframes fadeInLeft { 0% { opacity: 0; -ms-transform: translateX(-20px); }

100% { opacity: 1; -ms-transform: translateX(0); } }

@keyframes fadeInLeft { 0% { opacity: 0; transform: translateX(-20px); }

100% { opacity: 1; transform: translateX(0); } }

.fadeInLeft { -webkit-animation-name: fadeInLeft; -moz-animation-name: fadeInLeft; -ms-animation-name: fadeInLeft; animation-name: fadeInLeft; } @-webkit-keyframes fadeInRight { 0% { opacity: 0; -webkit-transform: translateX(20px); }

100% { opacity: 1; -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInRight { 0% { opacity: 0; -moz-transform: translateX(20px); }

100% {

opacity: 1; -moz-transform: translateX(0); } }

@-ms-keyframes fadeInRight { 0% { opacity: 0; -ms-transform: translateX(20px); }

100% { opacity: 1; -ms-transform: translateX(0); } }

@keyframes fadeInRight { 0% { opacity: 0; transform: translateX(20px); }

100% { opacity: 1; transform: translateX(0); } }

.fadeInRight { -webkit-animation-name: fadeInRight; -moz-animation-name: fadeInRight; -ms-animation-name: fadeInRight; animation-name: fadeInRight; } @-webkit-keyframes fadeInUpBig { 0% { opacity: 0; -webkit-transform: translateY(2000px); }

100% { opacity: 1; -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInUpBig { 0% { opacity: 0; -moz-transform: translateY(2000px); }

100% { opacity: 1; -moz-transform: translateY(0); } }

@-ms-keyframes fadeInUpBig { 0% { opacity: 0; -ms-transform: translateY(2000px); }

100% { opacity: 1; -ms-transform: translateY(0); } }

@keyframes fadeInUpBig { 0% { opacity: 0; transform: translateY(2000px); }

100% { opacity: 1; transform: translateY(0); } }

.fadeInUpBig { -webkit-animation-name: fadeInUpBig; -moz-animation-name: fadeInUpBig; -ms-animation-name: fadeInUpBig; animation-name: fadeInUpBig; } @-webkit-keyframes fadeInDownBig { 0% { opacity: 0; -webkit-transform: translateY(-2000px); }

100% { opacity: 1; -webkit-transform: translateY(0); } }

@-moz-keyframes fadeInDownBig { 0% { opacity: 0; -moz-transform: translateY(-2000px); }

100% { opacity: 1; -moz-transform: translateY(0); } }

@-ms-keyframes fadeInDownBig { 0% { opacity: 0; -ms-transform: translateY(-2000px); }

100% { opacity: 1; -ms-transform: translateY(0); } }

@keyframes fadeInDownBig { 0% { opacity: 0; transform: translateY(-2000px); }

100% { opacity: 1; transform: translateY(0); } }

.fadeInDownBig { -webkit-animation-name: fadeInDownBig; -moz-animation-name: fadeInDownBig; -ms-animation-name: fadeInDownBig; animation-name: fadeInDownBig; } @-webkit-keyframes fadeInLeftBig { 0% { opacity: 0; -webkit-transform: translateX(-2000px); }

100% { opacity: 1; -webkit-transform: translateX(0); } } @-moz-keyframes fadeInLeftBig { 0% { opacity: 0; -moz-transform: translateX(-2000px); }

100% { opacity: 1; -moz-transform: translateX(0); } } @-ms-keyframes fadeInLeftBig { 0% { opacity: 0; -ms-transform: translateX(-2000px); }

100% { opacity: 1; -ms-transform: translateX(0); } } @keyframes fadeInLeftBig { 0% { opacity: 0; transform: translateX(-2000px); }

100% { opacity: 1; transform: translateX(0); } }

.fadeInLeftBig { -webkit-animation-name: fadeInLeftBig; -moz-animation-name: fadeInLeftBig; -ms-animation-name: fadeInLeftBig; animation-name: fadeInLeftBig; } @-webkit-keyframes fadeInRightBig { 0% { opacity: 0; -webkit-transform: translateX(2000px); }

100% { opacity: 1; -webkit-transform: translateX(0); } }

@-moz-keyframes fadeInRightBig { 0% { opacity: 0; -moz-transform: translateX(2000px); }

100% { opacity: 1; -moz-transform: translateX(0); } }

@-ms-keyframes fadeInRightBig { 0% { opacity: 0; -ms-transform: translateX(2000px); }

100% { opacity: 1; -ms-transform: translateX(0); } }

@keyframes fadeInRightBig { 0% { opacity: 0; transform: translateX(2000px); }

100% { opacity: 1; transform: translateX(0); } }

.fadeInRightBig { -webkit-animation-name: fadeInRightBig; -moz-animation-name: fadeInRightBig; -ms-animation-name: fadeInRightBig; animation-name: fadeInRightBig; } @-webkit-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }

@-moz-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }

@-ms-keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }

@keyframes fadeOut { 0% {opacity: 1;} 100% {opacity: 0;} }

.fadeOut { -webkit-animation-name: fadeOut; -moz-animation-name: fadeOut; -ms-animation-name: fadeOut; animation-name: fadeOut; } @-webkit-keyframes fadeOutUp { 0% { opacity: 1; -webkit-transform: translateY(0); }

100% { opacity: 0; -webkit-transform: translateY(-20px); } } @-moz-keyframes fadeOutUp { 0% { opacity: 1; -moz-transform: translateY(0); }

100% { opacity: 0; -moz-transform: translateY(-20px); } } @-ms-keyframes fadeOutUp { 0% { opacity: 1; -ms-transform: translateY(0); }

100% { opacity: 0; -ms-transform: translateY(-20px); } } @keyframes fadeOutUp { 0% { opacity: 1; transform: translateY(0); }

100% { opacity: 0; transform: translateY(-20px); } }

.fadeOutUp { -webkit-animation-name: fadeOutUp; -moz-animation-name: fadeOutUp; -ms-animation-name: fadeOutUp; animation-name: fadeOutUp; } @-webkit-keyframes fadeOutDown { 0% { opacity: 1; -webkit-transform: translateY(0); }

100% { opacity: 0; -webkit-transform: translateY(20px); } }

@-moz-keyframes fadeOutDown { 0% { opacity: 1; -moz-transform: translateY(0); }

100% { opacity: 0; -moz-transform: translateY(20px); } }

@-ms-keyframes fadeOutDown { 0% { opacity: 1; -ms-transform: translateY(0); }

100% { opacity: 0; -ms-transform: translateY(20px); } }

@keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0); }

100% { opacity: 0; transform: translateY(20px); } }

.fadeOutDown { -webkit-animation-name: fadeOutDown; -moz-animation-name: fadeOutDown; -ms-animation-name: fadeOutDown; animation-name: fadeOutDown; } @-webkit-keyframes fadeOutLeft { 0% { opacity: 1; -webkit-transform: translateX(0); }

100% { opacity: 0; -webkit-transform: translateX(-20px); } }

@-moz-keyframes fadeOutLeft { 0% { opacity: 1; -moz-transform: translateX(0); }

100% { opacity: 0; -moz-transform: translateX(-20px); } }

@-ms-keyframes fadeOutLeft { 0% { opacity: 1; -ms-transform: translateX(0); }

100% { opacity: 0; -ms-transform: translateX(-20px); } } @keyframes fadeOutLeft { 0% { opacity: 1; transform: translateX(0); }

100% { opacity: 0; transform: translateX(-20px); } }

.fadeOutLeft { -webkit-animation-name: fadeOutLeft; -moz-animation-name: fadeOutLeft; -ms-animation-name: fadeOutLeft; animation-name: fadeOutLeft; } @-webkit-keyframes fadeOutRight { 0% { opacity: 1; -webkit-transform: translateX(0); }

100% { opacity: 0; -webkit-transform: translateX(20px); } }

@-moz-keyframes fadeOutRight { 0% { opacity: 1; -moz-transform: translateX(0); }

100% { opacity: 0; -moz-transform: translateX(20px); } }

@-ms-keyframes fadeOutRight { 0% { opacity: 1; -ms-transform: translateX(0); }

100% { opacity: 0; -ms-transform: translateX(20px); } }

@keyframes fadeOutRight { 0% { opacity: 1; transform: translateX(0); }

100% { opacity: 0; transform: translateX(20px); } }

.fadeOutRight { -webkit-animation-name: fadeOutRight; -moz-animation-name: fadeOutRight; -ms-animation-name: fadeOutRight; animation-name: fadeOutRight; } @-webkit-keyframes fadeOutUpBig { 0% { opacity: 1; -webkit-transform: translateY(0); }

100% { opacity: 0; -webkit-transform: translateY(-2000px); } }

@-moz-keyframes fadeOutUpBig { 0% { opacity: 1; -moz-transform: translateY(0); }

100% { opacity: 0; -moz-transform: translateY(-2000px); } }

@-ms-keyframes fadeOutUpBig { 0% { opacity: 1; -ms-transform: translateY(0); }

100% { opacity: 0; -ms-transform: translateY(-2000px); } }

@keyframes fadeOutUpBig { 0% { opacity: 1; transform: translateY(0); }

100% { opacity: 0; transform: translateY(-2000px); } }

.fadeOutUpBig { -webkit-animation-name: fadeOutUpBig; -moz-animation-name: fadeOutUpBig; -ms-animation-name: fadeOutUpBig; animation-name: fadeOutUpBig; } @-webkit-keyframes fadeOutDownBig { 0% { opacity: 1; -webkit-transform: translateY(0); }

100% { opacity: 0; -webkit-transform: translateY(2000px); } }

@-moz-keyframes fadeOutDownBig { 0% { opacity: 1; -moz-transform: translateY(0); }

100% { opacity: 0; -moz-transform: translateY(2000px); } }

@-ms-keyframes fadeOutDownBig { 0% { opacity: 1; -ms-transform: translateY(0); }

100% { opacity: 0; -ms-transform: translateY(2000px); } }

@keyframes fadeOutDownBig { 0% { opacity: 1; transform: translateY(0); }

100% { opacity: 0; transform: translateY(2000px); } }

.fadeOutDownBig { -webkit-animation-name: fadeOutDownBig; -moz-animation-name: fadeOutDownBig; -ms-animation-name: fadeOutDownBig; animation-name: fadeOutDownBig; } @-webkit-keyframes fadeOutLeftBig { 0% { opacity: 1; -webkit-transform: translateX(0); }

100% { opacity: 0; -webkit-transform: translateX(-2000px); } }

@-moz-keyframes fadeOutLeftBig { 0% { opacity: 1; -moz-transform: translateX(0); }

100% { opacity: 0; -moz-transform: translateX(-2000px); } }

@-ms-keyframes fadeOutLeftBig { 0% { opacity: 1; -ms-transform: translateX(0); }

100% { opacity: 0; -ms-transform: translateX(-2000px); } }

@keyframes fadeOutLeftBig { 0% { opacity: 1; transform: translateX(0); }

100% { opacity: 0; transform: translateX(-2000px); } }

.fadeOutLeftBig { -webkit-animation-name: fadeOutLeftBig; -moz-animation-name: fadeOutLeftBig; -ms-animation-name: fadeOutLeftBig; animation-name: fadeOutLeftBig; } @-webkit-keyframes fadeOutRightBig { 0% { opacity: 1; -webkit-transform: translateX(0); }

100% { opacity: 0; -webkit-transform: translateX(2000px); } } @-moz-keyframes fadeOutRightBig { 0% { opacity: 1; -moz-transform: translateX(0); }

100% { opacity: 0; -moz-transform: translateX(2000px); } } @-ms-keyframes fadeOutRightBig { 0% { opacity: 1; -ms-transform: translateX(0); }

100% { opacity: 0; -ms-transform: translateX(2000px); } } @keyframes fadeOutRightBig { 0% { opacity: 1; transform: translateX(0); }

100% { opacity: 0; transform: translateX(2000px); } }

.fadeOutRightBig { -webkit-animation-name: fadeOutRightBig; -moz-animation-name: fadeOutRightBig; -ms-animation-name: fadeOutRightBig; animation-name: fadeOutRightBig; } @-webkit-keyframes bounceIn { 0% { opacity: 0; -webkit-transform: scale(.3); }

50% { opacity: 1; -webkit-transform: scale(1.05); }

70% { -webkit-transform: scale(.9); }

100% { -webkit-transform: scale(1); } }

@-moz-keyframes bounceIn { 0% { opacity: 0; -moz-transform: scale(.3); }

50% { opacity: 1; -moz-transform: scale(1.05); }

70% { -moz-transform: scale(.9); }

100% { -moz-transform: scale(1); } }

@-ms-keyframes bounceIn { 0% { opacity: 0; -ms-transform: scale(.3); }

50% { opacity: 1; -ms-transform: scale(1.05); }

70% { -ms-transform: scale(.9); }

100% { -ms-transform: scale(1); } }

@keyframes bounceIn { 0% { opacity: 0; transform: scale(.3); }

50% { opacity: 1; transform: scale(1.05); }

70% { transform: scale(.9); }

100% { transform: scale(1); } }

.bounceIn { -webkit-animation-name: bounceIn; -moz-animation-name: bounceIn; -ms-animation-name: bounceIn; animation-name: bounceIn; } @-webkit-keyframes bounceInUp { 0% { opacity: 0; -webkit-transform: translateY(2000px); }

60% { opacity: 1; -webkit-transform: translateY(-30px); }

80% { -webkit-transform: translateY(10px); }

100% { -webkit-transform: translateY(0); } } @-moz-keyframes bounceInUp { 0% { opacity: 0; -moz-transform: translateY(2000px); }

60% { opacity: 1; -moz-transform: translateY(-30px); }

80% { -moz-transform: translateY(10px); }

100% { -moz-transform: translateY(0); } } @-ms-keyframes bounceInUp { 0% { opacity: 0; -ms-transform: translateY(2000px); }

60% { opacity: 1; -ms-transform: translateY(-30px); }

80% { -ms-transform: translateY(10px); }

100% { -ms-transform: translateY(0); } } @keyframes bounceInUp { 0% { opacity: 0; transform: translateY(2000px); }

60% { opacity: 1; transform: translateY(-30px); }

80% { transform: translateY(10px); }

100% { transform: translateY(0); } }

.bounceInUp { -webkit-animation-name: bounceInUp; -moz-animation-name: bounceInUp; -ms-animation-name: bounceInUp; animation-name: bounceInUp; } @-webkit-keyframes bounceInDown { 0% { opacity: 0; -webkit-transform: translateY(-2000px); }

60% { opacity: 1; -webkit-transform: translateY(30px); }

80% { -webkit-transform: translateY(-10px); }

100% { -webkit-transform: translateY(0); } }

@-moz-keyframes bounceInDown { 0% { opacity: 0; -moz-transform: translateY(-2000px); }

60% { opacity: 1; -moz-transform: translateY(30px); }

80% { -moz-transform: translateY(-10px); }

100% { -moz-transform: translateY(0); } }

@-ms-keyframes bounceInDown { 0% { opacity: 0; -ms-transform: translateY(-2000px); }

60% { opacity: 1; -ms-transform: translateY(30px); }

80% { -ms-transform: translateY(-10px); }

100% { -ms-transform: translateY(0); } }

@keyframes bounceInDown { 0% { opacity: 0; transform: translateY(-2000px); }

60% { opacity: 1; transform: translateY(30px); }

80% { transform: translateY(-10px); }

100% { transform: translateY(0); } }

.bounceInDown { -webkit-animation-name: bounceInDown; -moz-animation-name: bounceInDown; -ms-animation-name: bounceInDown; animation-name: bounceInDown; } @-webkit-keyframes bounceInLeft { 0% { opacity: 0; -webkit-transform: translateX(-2000px); }

60% { opacity: 1; -webkit-transform: translateX(30px); }

80% { -webkit-transform: translateX(-10px); }

100% { -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInLeft { 0% { opacity: 0; -moz-transform: translateX(-2000px); }

60% { opacity: 1; -moz-transform: translateX(30px); }

80% { -moz-transform: translateX(-10px); }

100% { -moz-transform: translateX(0); } }

@-ms-keyframes bounceInLeft { 0% { opacity: 0; -ms-transform: translateX(-2000px); }

60% { opacity: 1; -ms-transform: translateX(30px); }

80% { -ms-transform: translateX(-10px); }

100% { -ms-transform: translateX(0); } }

@keyframes bounceInLeft { 0% { opacity: 0; transform: translateX(-2000px); }

60% { opacity: 1; transform: translateX(30px); }

80% { transform: translateX(-10px); }

100% { transform: translateX(0); } }

.bounceInLeft { -webkit-animation-name: bounceInLeft; -moz-animation-name: bounceInLeft; -ms-animation-name: bounceInLeft; animation-name: bounceInLeft; } @-webkit-keyframes bounceInRight { 0% { opacity: 0; -webkit-transform: translateX(2000px); }

60% { opacity: 1; -webkit-transform: translateX(-30px); }

80% { -webkit-transform: translateX(10px); }

100% { -webkit-transform: translateX(0); } }

@-moz-keyframes bounceInRight { 0% { opacity: 0; -moz-transform: translateX(2000px); }

60% { opacity: 1; -moz-transform: translateX(-30px); }

80% { -moz-transform: translateX(10px); }

100% { -moz-transform: translateX(0); } }

@-ms-keyframes bounceInRight { 0% { opacity: 0; -ms-transform: translateX(2000px); }

60% { opacity: 1; -ms-transform: translateX(-30px); }

80% { -ms-transform: translateX(10px); }

100% { -ms-transform: translateX(0); } }

@keyframes bounceInRight { 0% { opacity: 0; transform: translateX(2000px); }

60% { opacity: 1; transform: translateX(-30px); }

80% { transform: translateX(10px); }

100% { transform: translateX(0); } }

.bounceInRight { -webkit-animation-name: bounceInRight; -moz-animation-name: bounceInRight; -ms-animation-name: bounceInRight; animation-name: bounceInRight; } @-webkit-keyframes bounceOut { 0% { -webkit-transform: scale(1); }

25% { -webkit-transform: scale(.95); }

50% { opacity: 1; -webkit-transform: scale(1.1); }

100% { opacity: 0; -webkit-transform: scale(.3); } }

@-moz-keyframes bounceOut { 0% { -moz-transform: scale(1); }

25% { -moz-transform: scale(.95); }

50% { opacity: 1; -moz-transform: scale(1.1); }

100% { opacity: 0; -moz-transform: scale(.3); } }

@-ms-keyframes bounceOut { 0% { -ms-transform: scale(1); }

25% { -ms-transform: scale(.95); }

50% { opacity: 1; -ms-transform: scale(1.1); }

100% { opacity: 0; -ms-transform: scale(.3); } }

@keyframes bounceOut { 0% { transform: scale(1); }

25% { transform: scale(.95); }

50% { opacity: 1; transform: scale(1.1); }

100% { opacity: 0; transform: scale(.3); } }

.bounceOut { -webkit-animation-name: bounceOut; -moz-animation-name: bounceOut; -ms-animation-name: bounceOut; animation-name: bounceOut; } @-webkit-keyframes bounceOutUp { 0% { -webkit-transform: translateY(0); }

20% { opacity: 1; -webkit-transform: translateY(20px); }

100% { opacity: 0; -webkit-transform: translateY(-2000px); } }

@-moz-keyframes bounceOutUp { 0% { -moz-transform: translateY(0); }

20% { opacity: 1; -moz-transform: translateY(20px); }

100% { opacity: 0; -moz-transform: translateY(-2000px); } }

@-ms-keyframes bounceOutUp { 0% { -ms-transform: translateY(0); }

20% { opacity: 1; -ms-transform: translateY(20px); }

100% { opacity: 0; -ms-transform: translateY(-2000px); } }

@keyframes bounceOutUp { 0% { transform: translateY(0); }

20% { opacity: 1; transform: translateY(20px); }

100% { opacity: 0; transform: translateY(-2000px); } }

.bounceOutUp { -webkit-animation-name: bounceOutUp; -moz-animation-name: bounceOutUp; -ms-animation-name: bounceOutUp; animation-name: bounceOutUp; } @-webkit-keyframes bounceOutDown { 0% { -webkit-transform: translateY(0); }

20% { opacity: 1; -webkit-transform: translateY(-20px); }

100% { opacity: 0; -webkit-transform: translateY(2000px); } }

@-moz-keyframes bounceOutDown { 0% { -moz-transform: translateY(0); }

20% { opacity: 1; -moz-transform: translateY(-20px); }

100% { opacity: 0; -moz-transform: translateY(2000px); } }

@-ms-keyframes bounceOutDown { 0% { -ms-transform: translateY(0); }

20% { opacity: 1; -ms-transform: translateY(-20px); }

100% { opacity: 0; -ms-transform: translateY(2000px); } }

@keyframes bounceOutDown { 0% { transform: translateY(0); }

20% { opacity: 1; transform: translateY(-20px); }

100% { opacity: 0; transform: translateY(2000px); } }

.bounceOutDown { -webkit-animation-name: bounceOutDown; -moz-animation-name: bounceOutDown; -ms-animation-name: bounceOutDown; animation-name: bounceOutDown; } @-webkit-keyframes bounceOutLeft { 0% { -webkit-transform: translateX(0); }

20% { opacity: 1; -webkit-transform: translateX(20px); }

100% { opacity: 0; -webkit-transform: translateX(-2000px); } }

@-moz-keyframes bounceOutLeft { 0% { -moz-transform: translateX(0); }

20% { opacity: 1; -moz-transform: translateX(20px);

}

100% { opacity: 0; -moz-transform: translateX(-2000px); } }

@-ms-keyframes bounceOutLeft { 0% { -ms-transform: translateX(0); }

20% { opacity: 1; -ms-transform: translateX(20px); }

100% { opacity: 0; -ms-transform: translateX(-2000px); } }

@keyframes bounceOutLeft { 0% { transform: translateX(0); }

20% { opacity: 1; transform: translateX(20px); }

100% { opacity: 0; transform: translateX(-2000px); } }

.bounceOutLeft { -webkit-animation-name: bounceOutLeft; -moz-animation-name: bounceOutLeft; -ms-animation-name: bounceOutLeft; animation-name: bounceOutLeft; } @-webkit-keyframes bounceOutRight { 0% { -webkit-transform: translateX(0); }

20% { opacity: 1; -webkit-transform: translateX(-20px); }

100% { opacity: 0; -webkit-transform: translateX(2000px); } }

@-moz-keyframes bounceOutRight { 0% { -moz-transform: translateX(0); }

20% { opacity: 1; -moz-transform: translateX(-20px); }

100% { opacity: 0; -moz-transform: translateX(2000px); } }

@-ms-keyframes bounceOutRight { 0% { -ms-transform: translateX(0); }

20% { opacity: 1; -ms-transform: translateX(-20px); }

100% { opacity: 0; -ms-transform: translateX(2000px); } }

@keyframes bounceOutRight { 0% { transform: translateX(0); }

20% { opacity: 1; transform: translateX(-20px); }

100% { opacity: 0; transform: translateX(2000px); } }

.bounceOutRight { -webkit-animation-name: bounceOutRight; -moz-animation-name: bounceOutRight; -ms-animation-name: bounceOutRight; animation-name: bounceOutRight; } @-webkit-keyframes rotateIn { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(-200deg); opacity: 0; }

100% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; } } @-moz-keyframes rotateIn { 0% { -moz-transform-origin: center center; -moz-transform: rotate(-200deg); opacity: 0; }

100% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; } } @-ms-keyframes rotateIn { 0% { -ms-transform-origin: center center; -ms-transform: rotate(-200deg); opacity: 0; }

100% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1; } } @keyframes rotateIn { 0% { transform-origin: center center; transform: rotate(-200deg); opacity: 0; }

100% { transform-origin: center center; transform: rotate(0); opacity: 1; } }

.rotateIn { -webkit-animation-name: rotateIn; -moz-animation-name: rotateIn; -ms-animation-name: rotateIn; animation-name: rotateIn; } @-webkit-keyframes rotateInUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; }

100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } }

@-moz-keyframes rotateInUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; }

100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } }

@-ms-keyframes rotateInUpLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; }

100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } }

@keyframes rotateInUpLeft { 0% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; }

100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } }

.rotateInUpLeft { -webkit-animation-name: rotateInUpLeft; -moz-animation-name: rotateInUpLeft; -ms-animation-name: rotateInUpLeft; animation-name: rotateInUpLeft; } @-webkit-keyframes rotateInDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; }

100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; } }

@-moz-keyframes rotateInDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; }

100% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; } }

@-ms-keyframes rotateInDownLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; }

100% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; } }

@keyframes rotateInDownLeft { 0% { transform-origin: left bottom; transform: rotate(-90deg); opacity: 0; }

100% { transform-origin: left bottom; transform: rotate(0); opacity: 1; } }

.rotateInDownLeft { -webkit-animation-name: rotateInDownLeft; -moz-animation-name: rotateInDownLeft; -ms-animation-name: rotateInDownLeft; animation-name: rotateInDownLeft; } @-webkit-keyframes rotateInUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; }

100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } }

@-moz-keyframes rotateInUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; }

100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } }

@-ms-keyframes rotateInUpRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0; }

100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } }

@keyframes rotateInUpRight { 0% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; }

100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }

.rotateInUpRight { -webkit-animation-name: rotateInUpRight; -moz-animation-name: rotateInUpRight; -ms-animation-name: rotateInUpRight; animation-name: rotateInUpRight; } @-webkit-keyframes rotateInDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; }

100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; } }

@-moz-keyframes rotateInDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; }

100% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; } }

@-ms-keyframes rotateInDownRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0; }

100% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; } }

@keyframes rotateInDownRight { 0% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; }

100% { transform-origin: right bottom; transform: rotate(0); opacity: 1; } }

.rotateInDownRight { -webkit-animation-name: rotateInDownRight; -moz-animation-name: rotateInDownRight; -ms-animation-name: rotateInDownRight; animation-name: rotateInDownRight; } @-webkit-keyframes rotateOut { 0% { -webkit-transform-origin: center center; -webkit-transform: rotate(0); opacity: 1; }

100% { -webkit-transform-origin: center center; -webkit-transform: rotate(200deg); opacity: 0; } }

@-moz-keyframes rotateOut { 0% { -moz-transform-origin: center center; -moz-transform: rotate(0); opacity: 1; }

100% { -moz-transform-origin: center center; -moz-transform: rotate(200deg); opacity: 0; } }

@-ms-keyframes rotateOut { 0% { -ms-transform-origin: center center; -ms-transform: rotate(0); opacity: 1; }

100% { -ms-transform-origin: center center; -ms-transform: rotate(200deg); opacity: 0; } }

@keyframes rotateOut { 0% { transform-origin: center center; transform: rotate(0); opacity: 1; }

100% { transform-origin: center center; transform: rotate(200deg); opacity: 0; } }

.rotateOut { -webkit-animation-name: rotateOut; -moz-animation-name: rotateOut; -ms-animation-name: rotateOut; animation-name: rotateOut; } @-webkit-keyframes rotateOutUpLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; }

100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(-90deg); opacity: 0; } }

@-moz-keyframes rotateOutUpLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; }

100% { -moz-transform-origin: left bottom; -moz-transform: rotate(-90deg); opacity: 0; } }

@-ms-keyframes rotateOutUpLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; }

100% { -ms-transform-origin: left bottom; -ms-transform: rotate(-90deg); opacity: 0; } }

@keyframes rotateOutUpLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; }

100% { -transform-origin: left bottom; -transform: rotate(-90deg); opacity: 0; } }

.rotateOutUpLeft { -webkit-animation-name: rotateOutUpLeft; -moz-animation-name: rotateOutUpLeft; -ms-animation-name: rotateOutUpLeft; animation-name: rotateOutUpLeft; } @-webkit-keyframes rotateOutDownLeft { 0% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(0); opacity: 1; }

100% { -webkit-transform-origin: left bottom; -webkit-transform: rotate(90deg); opacity: 0; } }

@-moz-keyframes rotateOutDownLeft { 0% { -moz-transform-origin: left bottom; -moz-transform: rotate(0); opacity: 1; }

100% { -moz-transform-origin: left bottom; -moz-transform: rotate(90deg); opacity: 0; } }

@-ms-keyframes rotateOutDownLeft { 0% { -ms-transform-origin: left bottom; -ms-transform: rotate(0); opacity: 1; }

100% { -ms-transform-origin: left bottom; -ms-transform: rotate(90deg); opacity: 0; } }

@keyframes rotateOutDownLeft { 0% { transform-origin: left bottom; transform: rotate(0); opacity: 1; }

100% { transform-origin: left bottom; transform: rotate(90deg); opacity: 0; } }

.rotateOutDownLeft { -webkit-animation-name: rotateOutDownLeft; -moz-animation-name: rotateOutDownLeft; -ms-animation-name: rotateOutDownLeft; animation-name: rotateOutDownLeft; } @-webkit-keyframes rotateOutUpRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; }

100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(90deg); opacity: 0; } }

@-moz-keyframes rotateOutUpRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; }

100% { -moz-transform-origin: right bottom; -moz-transform: rotate(90deg); opacity: 0; } }

@-ms-keyframes rotateOutUpRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; }

100% { -ms-transform-origin: right bottom; -ms-transform: rotate(90deg); opacity: 0; } }

@keyframes rotateOutUpRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; }

100% { transform-origin: right bottom; transform: rotate(90deg); opacity: 0; } }

.rotateOutUpRight { -webkit-animation-name: rotateOutUpRight; -moz-animation-name: rotateOutUpRight; -ms-animation-name: rotateOutUpRight; animation-name: rotateOutUpRight; } @-webkit-keyframes rotateOutDownRight { 0% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(0); opacity: 1; }

100% { -webkit-transform-origin: right bottom; -webkit-transform: rotate(-90deg); opacity: 0; } }

@-moz-keyframes rotateOutDownRight { 0% { -moz-transform-origin: right bottom; -moz-transform: rotate(0); opacity: 1; }

100% { -moz-transform-origin: right bottom; -moz-transform: rotate(-90deg); opacity: 0; } }

@-ms-keyframes rotateOutDownRight { 0% { -ms-transform-origin: right bottom; -ms-transform: rotate(0); opacity: 1; }

100% { -ms-transform-origin: right bottom; -ms-transform: rotate(-90deg); opacity: 0; } }

@keyframes rotateOutDownRight { 0% { transform-origin: right bottom; transform: rotate(0); opacity: 1; }

100% { transform-origin: right bottom; transform: rotate(-90deg); opacity: 0; } }

.rotateOutDownRight { -webkit-animation-name: rotateOutDownRight; -moz-animation-name: rotateOutDownRight; -ms-animation-name: rotateOutDownRight; animation-name: rotateOutDownRight; } @-webkit-keyframes hinge { 0% { -webkit-transform: rotate(0); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 20%, 60% { -webkit-transform: rotate(80deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 40% { -webkit-transform: rotate(60deg); -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 80% { -webkit-transform: rotate(60deg) translateY(0); opacity: 1; -webkit-transform-origin: top left; -webkit-animation-timing-function: ease-in-out; } 100% { -webkit-transform: translateY(700px); opacity: 0; } }

@-moz-keyframes hinge { 0% { -moz-transform: rotate(0); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 20%, 60% { -moz-transform: rotate(80deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 40% { -moz-transform: rotate(60deg); -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 80% { -moz-transform: rotate(60deg) translateY(0); opacity: 1; -moz-transform-origin: top left; -moz-animation-timing-function: ease-in-out; } 100% { -moz-transform: translateY(700px); opacity: 0; } }

@-ms-keyframes hinge { 0% { -ms-transform: rotate(0); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 20%, 60% { -ms-transform: rotate(80deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 40% { -ms-transform: rotate(60deg); -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 80% { -ms-transform: rotate(60deg) translateY(0); opacity: 1; -ms-transform-origin: top left; -ms-animation-timing-function: ease-in-out; } 100% { -ms-transform: translateY(700px); opacity: 0; } }

@keyframes hinge { 0% { transform: rotate(0); transform-origin: top left; animation-timing-function: ease-in-out; } 20%, 60% { transform: rotate(80deg); transform-origin: top left; animation-timing-function: ease-in-out; } 40% { transform: rotate(60deg); transform-origin: top left; animation-timing-function: ease-in-out; } 80% { transform: rotate(60deg) translateY(0); opacity: 1; transform-origin: top left; animation-timing-function: ease-in-out; } 100% { transform: translateY(700px); opacity: 0; } }

.hinge { -webkit-animation-name: hinge; -moz-animation-name: hinge; -ms-animation-name: hinge; animation-name: hinge; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollIn { 0% { opacity: 0; -webkit-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } }

@-moz-keyframes rollIn { 0% { opacity: 0; -moz-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } }

@-ms-keyframes rollIn { 0% { opacity: 0; -ms-transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; -ms-transform: translateX(0px) rotate(0deg); } }

@keyframes rollIn { 0% { opacity: 0; transform: translateX(-100%) rotate(-120deg); } 100% { opacity: 1; transform: translateX(0px) rotate(0deg); } }

.rollIn { -webkit-animation-name: rollIn; -moz-animation-name: rollIn; -ms-animation-name: rollIn; animation-name: rollIn; } /* originally authored by Nick Pettit - https://github.com/nickpettit/glide */

@-webkit-keyframes rollOut { 

   0% {

opacity: 1; -webkit-transform: translateX(0px) rotate(0deg); } 

   100% {

opacity: 0; -webkit-transform: translateX(100%) rotate(120deg); } }

@-moz-keyframes rollOut { 

   0% {

opacity: 1; -moz-transform: translateX(0px) rotate(0deg); } 

   100% {

opacity: 0; -moz-transform: translateX(100%) rotate(120deg); } }

@-ms-keyframes rollOut { 

   0% {

opacity: 1; -ms-transform: translateX(0px) rotate(0deg); } 

   100% {

opacity: 0; -ms-transform: translateX(100%) rotate(120deg); } }

@keyframes rollOut { 

   0% {

opacity: 1; transform: translateX(0px) rotate(0deg); } 

   100% {

opacity: 0; transform: translateX(100%) rotate(120deg); } }

.rollOut { -webkit-animation-name: rollOut; -moz-animation-name: rollOut; -ms-animation-name: rollOut; animation-name: rollOut; }

</style>

<a href="http://sc.chinaz.com/"><img src="images/home1_slide_1.png" class="wp1_3 slide1_bot" alt="sc.chinaz.com , ChinaCoder关注前端开发、关注中国IT从业者" /></a> 创意生活！创意生活！如您所想！与众不同！ 无设计，不生活
好的设计令人心旷神怡 我们擅长新颖、简练的视觉设计表现手法，并整合创新战略，品牌建设，为客户提供创新的解决方案，以帮助提高品牌知名度和提升消费者体验的客户。 <a href="http://sc.chinaz.com/" onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a>

<a href="http://sc.chinaz.com/"><img src="images/home7_slide_2.png" class="wp1_3 wp1_left slide2_bot" alt="sc.chinaz.com , ChinaCoder关注前端开发、关注中国IT从业者" /></a> 这是一个以国际4A标准来打造的团队 一次合作，终身朋友 一对一量身定制 <a href="http://sc.chinaz.com/" onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a>

<a href="http://sc.chinaz.com/"><img src="images/home7_slide_3.png" class="wp1_3 slide2_bot" alt="sc.chinaz.com , ChinaCoder关注前端开发、关注中国IT从业者" /> </a> 我们依然活着，因为我们一直在挑战 整合创意来诠释品牌的高
贵气质，前所未有的高端
享受 创意是思维意识的表现，设计创意表现的结果，创意生活，从本站开始。 <a target="_blank" href="http://sc.chinaz.com/');" class="btn_l">+企业QQ为好友</a>

<a href="http://sc.chinaz.com/"><img src="images/home7_slide_4.png" class="wp1_3 slide3_bot" alt="sc.chinaz.com , ChinaCoder关注前端开发、关注中国IT从业者" /> </a> 细节决定成败！服务决定价值！ 我们的宗旨！ 多年来，本站传播广结良友，和客户朋友们建立了忠实而坚定的亲密伙伴关系。本站始终坚守着“信、合、赢、上”的核心经营理念，得到了客户的广泛认可。 <a href="http://sc.chinaz.com/" onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a>