Difference between revisions of "Team:HBUT-China"

(Replaced content with "{{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 -->
 
<div class="wrape homeone">
 
<!-- <div class="fallback"><img src="images/home_page_1_fallback.jpg" alt="" /></div> -->
 
<div id="obo_slider"> 
 
<div class="oneByOne_item">
 
<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>            
 
<span class="txt1">创意生活!创意生活!如您所想!与众不同!</span>
 
<span class="txt2">无设计,不生活<br />好的设计令人心旷神怡</span>
 
<span class="txt3 short">我们擅长新颖、简练的视觉设计表现手法,并整合创新战略,品牌建设,为客户提供创新的解决方案,以帮助提高品牌知名度和提升消费者体验的客户。</span>
 
<span class="txt4 txt4up"><a href="http://sc.chinaz.com/"  onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a></span>
 
</div>
 
<div class="oneByOne_item">                               
 
<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>            
 
<span class="txt1 blue txt_right2">这是一个以国际4A标准来打造的团队</span>
 
<span class="txt2 blue txt_right2" style="width:380px">一次合作,终身朋友</span>
 
<span class="txt2 blue txt_right2" style="width:350px">一对一量身定制</span>
 
<span class="txt4 txt_right2 txt4up"><a href="http://sc.chinaz.com/" onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a></span>
 
</div>
 
<div class="oneByOne_item">
 
<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>            
 
<span class="txt1">我们依然活着,因为我们一直在挑战</span>
 
<span class="txt2">整合创意来诠释品牌的高<br />贵气质,前所未有的高端<br />
 
享受</span>
 
<span class="txt3">创意是思维意识的表现,设计创意表现的结果,创意生活,从本站开始。</span>
 
<span class="txt4" style="margin-top:15px"><a target="_blank" href="http://sc.chinaz.com/');" class="btn_l">+企业QQ为好友</a></span>
 
</div>                                                                                             
 
<div class="oneByOne_item">                               
 
<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>            
 
<span class="txt1 blue">细节决定成败!服务决定价值! </span>
 
<span class="txt2 blue">我们的宗旨!</span>
 
<span class="txt3 short">多年来,本站传播广结良友,和客户朋友们建立了忠实而坚定的亲密伙伴关系。本站始终坚守着“信、合、赢、上”的核心经营理念,得到了客户的广泛认可。</span>
 
<span class="txt4 txt4up"><a href="http://sc.chinaz.com/" onclick="javascript:window.open('http://sc.chinaz.com/');" class="btn_l">Contact Us</a></span>
 
</div>
 
</div>   
 
</div>
 
<!-- /one bt one slider -->
 

Revision as of 11:57, 30 July 2017