Difference between revisions of "Team:HBUT-China"

Line 3: Line 3:
 
<head>
 
<head>
 
<style>
 
<style>
 +
*{
 +
  padding: 0;
 +
  margin:0;
 +
  list-style: none;
 +
}
 
body{
 
body{
−
   max-height:100%;
+
   font-family:Helvetica;
−
   background-color:#FFF;
+
}
−
  font-family:F2U Scratch;
+
.top-nav{
 +
  height: 52px;
 +
  width: 100%;
 +
   background-color: #002742;
 
}
 
}
 
#cssmenu,
 
#cssmenu,
Line 37: Line 45:
 
}
 
}
 
#cssmenu {
 
#cssmenu {
−
   width: auto;
+
   width: 1000px;
−
   font-family: 'Open Sans', sans-serif;
+
   margin:0 auto;
 
   line-height: 1;
 
   line-height: 1;
−
   background: #ffffff;
+
   z-index: 1000;
 +
  /*background: #ffffff;*/
 
}
 
}
 
#menu-line {
 
#menu-line {
Line 79: Line 88:
 
   text-decoration: none;
 
   text-decoration: none;
 
   text-transform: uppercase;
 
   text-transform: uppercase;
−
   color: #000000;
+
   color: #FFCB05;
 
   -webkit-transition: color .2s ease;
 
   -webkit-transition: color .2s ease;
 
   -moz-transition: color .2s ease;
 
   -moz-transition: color .2s ease;
Line 149: Line 158:
 
   width: 160px;
 
   width: 160px;
 
   font-size: 12px;
 
   font-size: 12px;
−
   background: #333333;
+
   background: #FFCB05;
 
   text-decoration: none;
 
   text-decoration: none;
−
   color: #dddddd;
+
   color: #000000;
 
   -webkit-transition: color .2s ease;
 
   -webkit-transition: color .2s ease;
 
   -moz-transition: color .2s ease;
 
   -moz-transition: color .2s ease;
Line 215: Line 224:
 
   #cssmenu ul ul li a {
 
   #cssmenu ul ul li a {
 
     width: 100%;
 
     width: 100%;
 +
    color: #000000;
 
   }
 
   }
 
   #cssmenu > ul > li,
 
   #cssmenu > ul > li,
 
   #cssmenu.align-center > ul > li,
 
   #cssmenu.align-center > ul > li,
 
   #cssmenu.align-right > ul > li {
 
   #cssmenu.align-right > ul > li {
−
     float: none;
+
     /*float: none;*/
 +
    background: #FFCB05;
 
     display: block;
 
     display: block;
 
   }
 
   }
Line 234: Line 245:
 
   #cssmenu ul ul ul li a {
 
   #cssmenu ul ul ul li a {
 
     padding-left: 40px;
 
     padding-left: 40px;
 +
    color: #000000;
 
   }
 
   }
 
   #cssmenu ul ul,
 
   #cssmenu ul ul,
Line 316: Line 328:
 
   }
 
   }
 
}
 
}
 +
#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:Helvetica;
 +
}
 +
#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: 30px;
 +
  font-family:Helvetica;
 +
}                 
 +
   
 +
#obo_slider .oneByOne_item span.txt3{
 +
  clear: left;
 +
  position: relative;
 +
  float: left;
 +
  margin: 0 0 0 10px;
 +
  width:400px;
 +
  font-family:Helvetica;
 +
} 
 +
#obo_slider .oneByOne_item span.txt4{
 +
  clear: left;
 +
  position: relative;
 +
  float: left;
 +
  margin: 55px 0 0 10px;
 +
  width:400px;
 +
  font-family:Helvetica;
 +
} 
 +
   
 +
#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;text-indent:2em;}
 +
 +
.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;
 +
}
 +
 +
.project-desc h1{
 +
  text-align: center;
 +
  font-weight: bold;
 +
}
 +
.project-desc p{
 +
  text-indent:2em;
 +
}
 +
.project-desc small{
 +
  font-weight: bold;
 +
}
 +
#footer{
 +
  width: 100%;
 +
  height: 100px;
 +
  background-color: #002743;
 +
}
 +
#footer p{
 +
  text-align: center;
 +
  line-height: 100px;
 +
  font-size: 18px;
 +
  color: #FFCB05;
 +
}
 
</style>
 
</style>
 
<script>
 
<script>
Line 432: Line 3,561:
 
</head>
 
</head>
 
<body>
 
<body>
−
<div id='cssmenu'>
+
<div class="top-nav">
−
  <ul>
+
  <div id='cssmenu'>
−
      <li class="active"><a href='#'>首页</a></li>
+
      <ul>
−
      <li class='has-sub'><a href='#'>网页特效</a>
+
        <li><a href='https://2017.igem.org/Team:HBUT-China'>HOME</a></li>
−
        <ul>
+
        <li class='has-sub'><a href='#'>TEAM</a>
−
             <li class='has-sub'><a href='#'>jQuery特效</a>
+
            <ul>
−
              <ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Team'>Team</a></li>
−
                  <li><a href='#'>HTML5</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Collaborations'>Collaborations</a></li>
−
                  <li><a href='#'>CSS3</a></li>
+
             </ul>
−
               </ul>
+
        </li>
−
             </li>
+
        <li class='has-sub'><a href='javascript:;'>PROJECT</a>
−
             <li class='has-sub'><a href='#'>JS代码</a>
+
            <ul>
−
              <ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Description'>Description</a></li>
−
                  <li><a href='#'>Nav2</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Design'>Design</a></li>
−
                  <li><a href='#'>Nav3</a></li>
+
               <li ><a href='https://2017.igem.org/Team:HBUT-China/Experiments'>Experiments</a></li>
−
               </ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Notebook'>Notebook</a></li>
−
             </li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/InterLab'>InterLab</a></li>
−
         </ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Contribution'>Contribution</a></li>
−
      </li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Model'>Model</a></li>
−
      <li><a href='#'>jQuery</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Results'>Results</a></li>
−
      <li><a href='#'>flash动画</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Demonstrate'>Demonstrate</a></li>
−
  </ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Improve'>Improve</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Attributions'>Attributions</a></li>
 +
            </ul>
 +
        </li>
 +
        <li class='has-sub'><a href='javascript:;'>PARTS</a>
 +
             <ul>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Parts'>Parts</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Basic_Parts'>Basic Parts</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Composite_Parts'>Composite Parts</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Part_Collection'>Part Collection</a></li>
 +
             </ul>
 +
        </li>
 +
        <li><a href='https://2017.igem.org/Team:HBUT-China/SAFETY'>SAFETY</a></li>
 +
        <li class='has-sub'><a href='javascript:;'>HUMAN PRACTICES </a>
 +
            <ul>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Silver_HP'>Silver HP</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Integrated_and_Gold'>Integrated and Gold</a></li>
 +
               <li ><a href='https://2017.igem.org/Team:HBUT-China/Public_Engagement'>Public Engagement</a></li>
 +
             </ul>
 +
        </li>
 +
         <li class='has-sub'><a href='javascript:;'>AWARDS</a>
 +
            <ul>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Applied_Design'>Applied Design</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Entrepreneurship'>Entrepreneurship</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Hardware'>Hardware</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Measurement'>Measurement</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Model'>Model</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Plant'>Plant</a></li>
 +
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Software'>Software</a></li>
 +
            </ul>
 +
        </li>
 +
        <li><a href='https://2017.igem.org/Team:HBUT-China/Judging_Form'>Judging Form</a>
 +
      </ul>
 +
  </div>
 +
</div>
 +
<!-- 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="javascript:;"><img src="images/logo3.png" class="wp1_3 slide1_bot"/></a>               
 +
        <span class="txt1">Nickel ion!</span>       
 +
        <span class="txt2">Heavy metal pollutants!</span>                                 
 +
        <span class="txt3 short">For this year¡¯s iGEM Competition, our team will be focusing on putting forward a biological approach to detect nickel ions as a heavy metal contaminant in the natural environment</span>                                   
 +
      </div>
 +
      <div class="oneByOne_item">                                   
 +
        <a href="javascript:;"><img src="images/logo3.png" width="350" class="wp1_3 wp1_left slide2_bot" /></a>                   
 +
        <span class="txt1 blue txt_right2">In order to achieve this goal, we use a nickel-sensitive repressive promoter (pncrA)</span>     
 +
        <span class="txt1 blue txt_right2">In the absence of nickel ions, the repressor protein (NcrB) binds to the promoter, preventing the expression of the subsequent gene</span>
 +
  </div>   
 +
</div>
 +
<div class="content-main">
 +
  <div class="container">
 +
      <div class="row">
 +
        <div class="col-lg-2"></div>
 +
        <div class="col-lg-8 project-desc">
 +
            <div class="page-header">
 +
              <h1>Project Description</h1>
 +
            </div>
 +
            <small>Overview</small>
 +
            <p>For this year¡¯s iGEM Competition, our team will be focusing on putting forward a biological approach to detect nickel ions as a heavy metal contaminant in the natural environment. Through our study over this summer, we are expecting to make the expression of green fluorescent protein by nickel ion concentration control. In a certain concentration range, we will try to establish a quantitative relationship between fluorescence intensity and nickel ion concentration in the environment. This may build a nickel ion concentration quantitative detection system.</p>
 +
            <p>In order to achieve this goal, we use a nickel-sensitive repressive promoter (pncrA). In the absence of nickel ions, the repressor protein (NcrB) binds to the promoter, preventing the expression of the subsequent gene. The nickel ions in the environment can bind to repressor proteins to alter the domain of the protein, so that the fluorescent protein gene behind the promoter is expressed and produces fluorescence.</p>
 +
        </div>
 +
        <div class="col-lg-2"></div>
 +
      </div>
 +
      <div class="row">
 +
        <div class="col-lg-2"></div>
 +
        <div class="col-lg-8 project-desc">
 +
            <div class="page-header">
 +
              <h1>How do we come to this idea?</h1>
 +
            </div>
 +
            <small>1¡¢The harm of nickel ions</small>
 +
            <p>Nickel is an important element for humans. Normally, the human body maintains a daily demand of 0.3mg nickel. However, it is also one of the metal elements that easily cause allergy among human beings, with an estimated 20% of people being allergic to it. As is claimed by experts, an intake of more than 0.6mg nickel at a time can cause allergy to almost any person. A chronic excessive intake of nickel can cause a variety of toxic reactions, including dermatitis, respiratory disorders and even respiratory cancer. In addition, nickel is also considered to be one of the relevant factors that cause leukemia, asthma, and urinary stones. Also, it can possibly lead to reduced fertility and teratogenicity.</p>
 +
            <small>2¡¢Nickel pollution</small>
 +
            <p>Nickel pollution generally refers to excessive amounts of nickel existing in the environment that humans are exposed to. Traditionally, major sources of nickel in the environment are the industry of steelmaking and electroplating, with approximately 85% of nickel being used in certain process. However, with the rapid development of science and technology, the manufacturing of electronic products has brought a substantial amount of nickel ions to the environment. Also, with the popularity of new energy vehicles, nickel-metal hydride batteries being its major power source has contributed to an increasing demand of nickel, and unavoidably, an increasing amount of nickel ions to the environment as well. Statistics indicate that the 2016 global raw nickel consumption reached 200 million tons. The future demand for nickel is predicted to continue increasing at an annual 5% growth rate on average. As a consequence, we may have to anticipate a deterioration of nickel pollution. Therefore, the detection of nickel ions in the environment and hence methods to alleviate nickel pollution will be vitally important. </p>
 +
            <small>3¡¢The drawbacks of existing nickel ion detection methods </small>
 +
            <p>Currently, the most commonly adopted method of nickel ion detection is spectrophotometry, with which an amount of nickel ion within the range from 0.08 to 5.0 mg / L in solid samples and within the range from 0.25 to 10 mg / L in water samples can be detected. However, spectrophotometry has obvious limitations, being very susceptible to interference from other substances throughout its process and thus making itself a relatively less reliable detecting approach. Moreover, the procedures are fairly complicated and costly as well. Therefore, our team is striving to put forward a biological approach of nickel ion detection, which can achieve the same accuracy as spectrophotometry yet is simpler in procedures and probably much lower in cost.</p>
 +
        </div>
 +
        <div class="col-lg-2"></div>
 +
      </div>
 +
  </div>
 +
</div>
 +
<div id="footer">
 +
  <p>copyright &copy;  2017 IGEM-HBUT-China All rights reserved.</p>
 
</div>
 
</div>
 
</body>
 
</body>
 
</html>
 
</html>

Revision as of 08:23, 31 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
Nickel ion! Heavy metal pollutants! For this year¡¯s iGEM Competition, our team will be focusing on putting forward a biological approach to detect nickel ions as a heavy metal contaminant in the natural environment
In order to achieve this goal, we use a nickel-sensitive repressive promoter (pncrA) In the absence of nickel ions, the repressor protein (NcrB) binds to the promoter, preventing the expression of the subsequent gene

Project Description

Overview

For this year¡¯s iGEM Competition, our team will be focusing on putting forward a biological approach to detect nickel ions as a heavy metal contaminant in the natural environment. Through our study over this summer, we are expecting to make the expression of green fluorescent protein by nickel ion concentration control. In a certain concentration range, we will try to establish a quantitative relationship between fluorescence intensity and nickel ion concentration in the environment. This may build a nickel ion concentration quantitative detection system.

In order to achieve this goal, we use a nickel-sensitive repressive promoter (pncrA). In the absence of nickel ions, the repressor protein (NcrB) binds to the promoter, preventing the expression of the subsequent gene. The nickel ions in the environment can bind to repressor proteins to alter the domain of the protein, so that the fluorescent protein gene behind the promoter is expressed and produces fluorescence.

How do we come to this idea?

1¡¢The harm of nickel ions

Nickel is an important element for humans. Normally, the human body maintains a daily demand of 0.3mg nickel. However, it is also one of the metal elements that easily cause allergy among human beings, with an estimated 20% of people being allergic to it. As is claimed by experts, an intake of more than 0.6mg nickel at a time can cause allergy to almost any person. A chronic excessive intake of nickel can cause a variety of toxic reactions, including dermatitis, respiratory disorders and even respiratory cancer. In addition, nickel is also considered to be one of the relevant factors that cause leukemia, asthma, and urinary stones. Also, it can possibly lead to reduced fertility and teratogenicity.

2¡¢Nickel pollution

Nickel pollution generally refers to excessive amounts of nickel existing in the environment that humans are exposed to. Traditionally, major sources of nickel in the environment are the industry of steelmaking and electroplating, with approximately 85% of nickel being used in certain process. However, with the rapid development of science and technology, the manufacturing of electronic products has brought a substantial amount of nickel ions to the environment. Also, with the popularity of new energy vehicles, nickel-metal hydride batteries being its major power source has contributed to an increasing demand of nickel, and unavoidably, an increasing amount of nickel ions to the environment as well. Statistics indicate that the 2016 global raw nickel consumption reached 200 million tons. The future demand for nickel is predicted to continue increasing at an annual 5% growth rate on average. As a consequence, we may have to anticipate a deterioration of nickel pollution. Therefore, the detection of nickel ions in the environment and hence methods to alleviate nickel pollution will be vitally important.

3¡¢The drawbacks of existing nickel ion detection methods

Currently, the most commonly adopted method of nickel ion detection is spectrophotometry, with which an amount of nickel ion within the range from 0.08 to 5.0 mg / L in solid samples and within the range from 0.25 to 10 mg / L in water samples can be detected. However, spectrophotometry has obvious limitations, being very susceptible to interference from other substances throughout its process and thus making itself a relatively less reliable detecting approach. Moreover, the procedures are fairly complicated and costly as well. Therefore, our team is striving to put forward a biological approach of nickel ion detection, which can achieve the same accuracy as spectrophotometry yet is simpler in procedures and probably much lower in cost.