Difference between revisions of "Team:HBUT-China"

 
(46 intermediate revisions by the same user not shown)
Line 1: Line 1:
{{HBUT-China}}
 
 
<html>
 
<html>
 
<head>
 
<head>
<style>
+
<meta http-equiv="X-UA-Compatible" content="IE=edge">
*{
+
<meta name="viewport" content="width=device-width, initial-scale=1">
  padding: 0;
+
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  margin:0;
+
<link rel="stylesheet" href="http://123.207.175.242/csdn/css/igem-style.css">
  list-style: none;
+
<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
}
+
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
body{
+
<script type="text/javascript" src="http://123.207.175.242/csdn/js/menulist.js"></script>
  font-family:Helvetica;
+
<script type="text/javascript" src="http://123.207.175.242/csdn/js/jq22.js"></script>  
}
+
.top-nav{
+
  height: 52px;
+
  width: 100%;
+
  background-color: #002742;
+
}
+
#cssmenu,
+
#cssmenu ul,
+
#cssmenu ul li,
+
#cssmenu ul li a,
+
#cssmenu #menu-button {
+
  margin: 0;
+
  padding: 0;
+
  border: 0;
+
  list-style: none;
+
  line-height: 1;
+
  display: block;
+
  position: relative;
+
  -webkit-box-sizing: border-box;
+
  -moz-box-sizing: border-box;
+
  box-sizing: border-box;
+
}
+
#cssmenu:after,
+
#cssmenu > ul:after {
+
  content: ".";
+
  display: block;
+
  clear: both;
+
  visibility: hidden;
+
  line-height: 0;
+
  height: 0;
+
}
+
#cssmenu #menu-button {
+
  display: none;
+
}
+
#cssmenu {
+
  width: 1000px;
+
  margin:0 auto;
+
  line-height: 1;
+
  z-index: 1000;
+
  /*background: #ffffff;*/
+
}
+
#menu-line {
+
  position: absolute;
+
  top: 0;
+
  left: 0;
+
  height: 3px;
+
  background: #009ae1;
+
  -webkit-transition: all 0.25s ease-out;
+
  -moz-transition: all 0.25s ease-out;
+
  -ms-transition: all 0.25s ease-out;
+
  -o-transition: all 0.25s ease-out;
+
  transition: all 0.25s ease-out;
+
}
+
#cssmenu > ul > li {
+
  float: left;
+
}
+
#cssmenu.align-center > ul {
+
  font-size: 0;
+
  text-align: center;
+
}
+
#cssmenu.align-center > ul > li {
+
  display: inline-block;
+
  float: none;
+
}
+
#cssmenu.align-center ul ul {
+
  text-align: left;
+
}
+
#cssmenu.align-right > ul > li {
+
  float: right;
+
}
+
#cssmenu.align-right ul ul {
+
  text-align: right;
+
}
+
#cssmenu > ul > li > a {
+
  padding: 20px;
+
  font-size: 12px;
+
  text-decoration: none;
+
  text-transform: uppercase;
+
  color: #FFCB05;
+
  -webkit-transition: color .2s ease;
+
  -moz-transition: color .2s ease;
+
  -ms-transition: color .2s ease;
+
  -o-transition: color .2s ease;
+
  transition: color .2s ease;
+
}
+
#cssmenu > ul > li:hover > a,
+
#cssmenu > ul > li.active > a {
+
  color: #009ae1;
+
}
+
#cssmenu > ul > li.has-sub > a {
+
  padding-right: 25px;
+
}
+
#cssmenu > ul > li.has-sub > a::after {
+
  position: absolute;
+
  top: 21px;
+
  right: 10px;
+
  width: 4px;
+
  height: 4px;
+
  border-bottom: 1px solid #000000;
+
  border-right: 1px solid #000000;
+
  content: "";
+
  -webkit-transform: rotate(45deg);
+
  -moz-transform: rotate(45deg);
+
  -ms-transform: rotate(45deg);
+
  -o-transform: rotate(45deg);
+
  transform: rotate(45deg);
+
  -webkit-transition: border-color 0.2s ease;
+
  -moz-transition: border-color 0.2s ease;
+
  -ms-transition: border-color 0.2s ease;
+
  -o-transition: border-color 0.2s ease;
+
  transition: border-color 0.2s ease;
+
}
+
#cssmenu > ul > li.has-sub:hover > a::after {
+
  border-color: #009ae1;
+
}
+
#cssmenu ul ul {
+
  position: absolute;
+
  left: -9999px;
+
}
+
#cssmenu li:hover > ul {
+
  left: auto;
+
}
+
#cssmenu.align-right li:hover > ul {
+
  right: 0;
+
}
+
#cssmenu ul ul ul {
+
  margin-left: 100%;
+
  top: 0;
+
}
+
#cssmenu.align-right ul ul ul {
+
  margin-left: 0;
+
  margin-right: 100%;
+
}
+
#cssmenu ul ul li {
+
  height: 0;
+
  -webkit-transition: height .2s ease;
+
  -moz-transition: height .2s ease;
+
  -ms-transition: height .2s ease;
+
  -o-transition: height .2s ease;
+
  transition: height .2s ease;
+
}
+
#cssmenu ul li:hover > ul > li {
+
  height: 32px;
+
}
+
#cssmenu ul ul li a {
+
  padding: 10px 20px;
+
  width: 160px;
+
  font-size: 12px;
+
  background: #FFCB05;
+
  text-decoration: none;
+
  color: #000000;
+
  -webkit-transition: color .2s ease;
+
  -moz-transition: color .2s ease;
+
  -ms-transition: color .2s ease;
+
  -o-transition: color .2s ease;
+
  transition: color .2s ease;
+
}
+
#cssmenu ul ul li:hover > a,
+
#cssmenu ul ul li a:hover {
+
  color: #ffffff;
+
}
+
#cssmenu ul ul li.has-sub > a::after {
+
  position: absolute;
+
  top: 13px;
+
  right: 10px;
+
  width: 4px;
+
  height: 4px;
+
  border-bottom: 1px solid #dddddd;
+
  border-right: 1px solid #dddddd;
+
  content: "";
+
  -webkit-transform: rotate(-45deg);
+
  -moz-transform: rotate(-45deg);
+
  -ms-transform: rotate(-45deg);
+
  -o-transform: rotate(-45deg);
+
  transform: rotate(-45deg);
+
  -webkit-transition: border-color 0.2s ease;
+
  -moz-transition: border-color 0.2s ease;
+
  -ms-transition: border-color 0.2s ease;
+
  -o-transition: border-color 0.2s ease;
+
  transition: border-color 0.2s ease;
+
}
+
#cssmenu.align-right ul ul li.has-sub > a::after {
+
  right: auto;
+
  left: 10px;
+
  border-bottom: 0;
+
  border-right: 0;
+
  border-top: 1px solid #dddddd;
+
  border-left: 1px solid #dddddd;
+
}
+
#cssmenu ul ul li.has-sub:hover > a::after {
+
  border-color: #ffffff;
+
}
+
@media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
+
  #cssmenu {
+
    width: 100%;
+
  }
+
  #cssmenu ul {
+
    width: 100%;
+
    display: none;
+
  }
+
  #cssmenu.align-center > ul,
+
  #cssmenu.align-right ul ul {
+
    text-align: left;
+
  }
+
  #cssmenu ul li,
+
  #cssmenu ul ul li,
+
  #cssmenu ul li:hover > ul > li {
+
    width: 100%;
+
    height: auto;
+
    border-top: 1px solid rgba(120, 120, 120, 0.15);
+
  }
+
  #cssmenu ul li a,
+
  #cssmenu ul ul li a {
+
    width: 100%;
+
    color: #000000;
+
  }
+
  #cssmenu > ul > li,
+
  #cssmenu.align-center > ul > li,
+
  #cssmenu.align-right > ul > li {
+
    /*float: none;*/
+
    background: #FFCB05;
+
    display: block;
+
  }
+
  #cssmenu ul ul li a {
+
    padding: 20px 20px 20px 30px;
+
    font-size: 12px;
+
    color: #000000;
+
    background: none;
+
  }
+
  #cssmenu ul ul li:hover > a,
+
  #cssmenu ul ul li a:hover {
+
    color: #000000;
+
  }
+
  #cssmenu ul ul ul li a {
+
    padding-left: 40px;
+
    color: #000000;
+
  }
+
  #cssmenu ul ul,
+
  #cssmenu ul ul ul {
+
    position: relative;
+
    left: 0;
+
    right: auto;
+
    width: 100%;
+
    margin: 0;
+
  }
+
  #cssmenu > ul > li.has-sub > a::after,
+
  #cssmenu ul ul li.has-sub > a::after {
+
    display: none;
+
  }
+
  #menu-line {
+
    display: none;
+
  }
+
  #cssmenu #menu-button {
+
    display: block;
+
    padding: 20px;
+
    color: #000000;
+
    cursor: pointer;
+
    font-size: 12px;
+
    text-transform: uppercase;
+
  }
+
  #cssmenu #menu-button::after {
+
    content: '';
+
    position: absolute;
+
    top: 20px;
+
    right: 20px;
+
    display: block;
+
    width: 15px;
+
    height: 2px;
+
    background: #000000;
+
  }
+
  #cssmenu #menu-button::before {
+
    content: '';
+
    position: absolute;
+
    top: 25px;
+
    right: 20px;
+
    display: block;
+
    width: 15px;
+
    height: 3px;
+
    border-top: 2px solid #000000;
+
    border-bottom: 2px solid #000000;
+
  }
+
  #cssmenu .submenu-button {
+
    position: absolute;
+
    z-index: 10;
+
    right: 0;
+
    top: 0;
+
    display: block;
+
    border-left: 1px solid rgba(120, 120, 120, 0.15);
+
    height: 52px;
+
    width: 52px;
+
    cursor: pointer;
+
  }
+
  #cssmenu .submenu-button::after {
+
    content: '';
+
    position: absolute;
+
    top: 21px;
+
    left: 26px;
+
    display: block;
+
    width: 1px;
+
    height: 11px;
+
    background: #000000;
+
    z-index: 99;
+
  }
+
  #cssmenu .submenu-button::before {
+
    content: '';
+
    position: absolute;
+
    left: 21px;
+
    top: 26px;
+
    display: block;
+
    width: 11px;
+
    height: 1px;
+
    background: #000000;
+
    z-index: 99;
+
  }
+
  #cssmenu .submenu-button.submenu-opened:after {
+
    display: none;
+
  }
+
}
+
#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>
+
<script>
+
(function($) {
+
 
+
  $.fn.menumaker = function(options) {
+
     
+
      var cssmenu = $(this), settings = $.extend({
+
        title: "Menu",
+
        format: "dropdown",
+
        sticky: false
+
      }, options);
+
 
+
      return this.each(function() {
+
        cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
+
        $(this).find("#menu-button").on('click', function(){
+
          $(this).toggleClass('menu-opened');
+
          var mainmenu = $(this).next('ul');
+
          if (mainmenu.hasClass('open')) {
+
            mainmenu.hide().removeClass('open');
+
          }
+
          else {
+
            mainmenu.show().addClass('open');
+
            if (settings.format === "dropdown") {
+
              mainmenu.find('ul').show();
+
            }
+
          }
+
        });
+
 
+
        cssmenu.find('li ul').parent().addClass('has-sub');
+
 
+
        multiTg = function() {
+
          cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
+
          cssmenu.find('.submenu-button').on('click', function() {
+
            $(this).toggleClass('submenu-opened');
+
            if ($(this).siblings('ul').hasClass('open')) {
+
              $(this).siblings('ul').removeClass('open').hide();
+
            }
+
            else {
+
              $(this).siblings('ul').addClass('open').show();
+
            }
+
          });
+
        };
+
 
+
        if (settings.format === 'multitoggle') multiTg();
+
        else cssmenu.addClass('dropdown');
+
 
+
        if (settings.sticky === true) cssmenu.css('position', 'fixed');
+
 
+
        resizeFix = function() {
+
          if ($( window ).width() > 768) {
+
            cssmenu.find('ul').show();
+
          }
+
 
+
          if ($(window).width() <= 768) {
+
            cssmenu.find('ul').hide().removeClass('open');
+
          }
+
        };
+
        resizeFix();
+
        return $(window).on('resize', resizeFix);
+
 
+
      });
+
  };
+
})(jQuery);
+
 
+
(function($){
+
$(document).ready(function(){
+
 
+
$(document).ready(function() {
+
  $("#cssmenu").menumaker({
+
    title: "Menu",
+
    format: "multitoggle"
+
  });
+
 
+
  $("#cssmenu").prepend("<div id='menu-line'></div>");
+
 
+
var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;
+
 
+
$("#cssmenu > ul > li").each(function() {
+
  if ($(this).hasClass('active')) {
+
    activeElement = $(this);
+
    foundActive = true;
+
  }
+
});
+
 
+
if (foundActive === false) {
+
  activeElement = $("#cssmenu > ul > li").first();
+
}
+
 
+
defaultWidth = lineWidth = activeElement.width();
+
 
+
defaultPosition = linePosition = activeElement.position().left;
+
 
+
menuLine.css("width", lineWidth);
+
menuLine.css("left", linePosition);
+
 
+
$("#cssmenu > ul > li").hover(function() {
+
  activeElement = $(this);
+
  lineWidth = activeElement.width();
+
  linePosition = activeElement.position().left;
+
  menuLine.css("width", lineWidth);
+
  menuLine.css("left", linePosition);
+
},
+
function() {
+
  menuLine.css("left", defaultPosition);
+
  menuLine.css("width", defaultWidth);
+
});
+
 
+
});
+
 
+
 
+
});
+
})(jQuery);
+
</script>
+
 
</head>
 
</head>
 
<body>
 
<body>
Line 3,564: Line 14:
 
   <div id='cssmenu'>
 
   <div id='cssmenu'>
 
       <ul>
 
       <ul>
         <li><a href='https://2017.igem.org/Team:HBUT-China'>HOME</a></li>
+
         <li><img src="https://static.igem.org/mediawiki/2017/5/55/HBUT-logo2.png" height="45"/></li>
        <li class='has-sub'><a href='#'>TEAM</a>
+
            <ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Team'>Team</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Collaborations'>Collaborations</a></li>
+
            </ul>
+
        </li>
+
        <li class='has-sub'><a href='javascript:;'>PROJECT</a>
+
            <ul>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Description'>Description</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Design'>Design</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Experiments'>Experiments</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Notebook'>Notebook</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/InterLab'>InterLab</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Contribution'>Contribution</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/Results'>Results</a></li>
+
              <li ><a href='https://2017.igem.org/Team:HBUT-China/Demonstrate'>Demonstrate</a></li>
+
              <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>
 
       </ul>
 
   </div>
 
   </div>
 
</div>
 
</div>
 
<!-- one bt one slider -->
 
<!-- one bt one slider -->
<div class="wrape homeone">
+
<div class="js-silder">
   <!-- <div class="fallback"><img src="images/home_page_1_fallback.jpg" alt="" /></div> -->
+
   <div class="silder-scroll">
  <div id="obo_slider">          
+
<div class="silder-main">
      <div class="oneByOne_item">
+
<div class="silder-main-img">
        <a href="javascript:;"><img src="images/logo3.png" class="wp1_3 slide1_bot"/></a>               
+
<img src="//2017.igem.org/wiki/images/8/8c/Hbut-banner1.png" alt="">
        <span class="txt1">Nickel ion!</span>       
+
</div>
        <span class="txt2">Heavy metal pollutants!</span>                                 
+
<div class="silder-main-img">
        <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>                                   
+
<img src="//2017.igem.org/wiki/images/5/55/Hbut-member.jpeg" alt="">
      </div>
+
</div>
      <div class="oneByOne_item">                                  
+
        <a href="javascript:;"><img src="images/logo3.png" width="350" class="wp1_3 wp1_left slide2_bot" /></a>                  
+
</div>
        <span class="txt1 blue txt_right2">In order to achieve this goal, we use a nickel-sensitive repressive promoter (pncrA)</span>      
+
</div>
        <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>
 +
 +
 +
 +
 
<div class="content-main">
 
<div class="content-main">
 
   <div class="container">
 
   <div class="container">
Line 3,642: Line 45:
 
             </div>
 
             </div>
 
             <small>Overview</small>
 
             <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>For this year's iGEM Competition, our team has focused on putting forward a biological approach to detecting nickel ions as a heavy metal contaminant in the natural environment. Through our study over this summer, we are expecting to control the expression of red fluorescent protein by changing the nickel ion concentration. In a certain concentration range, we will try to establish a quantitative relationship between the intensity of the fluorescence and the concentration of nickel ions 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>
 
             <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>
 
         <div class="col-lg-2"></div>
 
         <div class="col-lg-2"></div>
 
       </div>
 
       </div>
      <div class="row">
+
<br/><br/><br/><br/>
        <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>
 
</div>
Line 3,667: Line 56:
 
   <p>copyright &copy;  2017 IGEM-HBUT-China All rights reserved.</p>
 
   <p>copyright &copy;  2017 IGEM-HBUT-China All rights reserved.</p>
 
</div>
 
</div>
 +
<script src="http://123.207.175.242/csdn/js/wySilder.min.js" type="text/javascript"></script>
 +
<script>
 +
$(function (){
 +
$(".js-silder").silder({
 +
auto: true,//自动播放,传入任何可以转化为true的值都会自动轮播
 +
speed: 20,//轮播图运动速度
 +
sideCtrl: true,//是否需要侧边控制按钮
 +
bottomCtrl: true,//是否需要底部控制按钮
 +
defaultView: 0,//默认显示的索引
 +
interval: 3000,//自动轮播的时间,以毫秒为单位,默认3000毫秒
 +
activeClass: "active",//小的控制按钮激活的样式,不包括作用两边,默认active
 +
});
 +
});
 +
</script>
 
</body>
 
</body>
 
</html>
 
</html>

Latest revision as of 02:33, 1 November 2017

Overview

For this year's iGEM Competition, our team has focused on putting forward a biological approach to detecting nickel ions as a heavy metal contaminant in the natural environment. Through our study over this summer, we are expecting to control the expression of red fluorescent protein by changing the nickel ion concentration. In a certain concentration range, we will try to establish a quantitative relationship between the intensity of the fluorescence and the concentration of nickel ions 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.