Difference between revisions of "Team:ASIJ Tokyo"

Line 18: Line 18:
 
*/
 
*/
  
.animated {
 
  -webkit-animation-duration: 1s;
 
  animation-duration: 1s;
 
  -webkit-animation-fill-mode: both;
 
  animation-fill-mode: both;
 
}
 
  
.animated.infinite {
 
  -webkit-animation-iteration-count: infinite;
 
  animation-iteration-count: infinite;
 
}
 
 
.animated.hinge {
 
  -webkit-animation-duration: 2s;
 
  animation-duration: 2s;
 
}
 
 
@-webkit-keyframes bounce {
 
  0%, 20%, 53%, 80%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    -webkit-transform: translate3d(0,0,0);
 
    transform: translate3d(0,0,0);
 
  }
 
 
  40%, 43% {
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    -webkit-transform: translate3d(0, -30px, 0);
 
    transform: translate3d(0, -30px, 0);
 
  }
 
 
  70% {
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    -webkit-transform: translate3d(0, -15px, 0);
 
    transform: translate3d(0, -15px, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(0,-4px,0);
 
    transform: translate3d(0,-4px,0);
 
  }
 
}
 
 
@keyframes bounce {
 
  0%, 20%, 53%, 80%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    -webkit-transform: translate3d(0,0,0);
 
    -ms-transform: translate3d(0,0,0);
 
    transform: translate3d(0,0,0);
 
  }
 
 
  40%, 43% {
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    -webkit-transform: translate3d(0, -30px, 0);
 
    -ms-transform: translate3d(0, -30px, 0);
 
    transform: translate3d(0, -30px, 0);
 
  }
 
 
  70% {
 
    -webkit-transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    transition-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
 
    -webkit-transform: translate3d(0, -15px, 0);
 
    -ms-transform: translate3d(0, -15px, 0);
 
    transform: translate3d(0, -15px, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(0,-4px,0);
 
    -ms-transform: translate3d(0,-4px,0);
 
    transform: translate3d(0,-4px,0);
 
  }
 
}
 
 
.bounce {
 
  -webkit-animation-name: bounce;
 
  animation-name: bounce;
 
  -webkit-transform-origin: center bottom;
 
  -ms-transform-origin: center bottom;
 
  transform-origin: center bottom;
 
}
 
 
@-webkit-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;
 
  animation-name: flash;
 
}
 
 
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 
@-webkit-keyframes pulse {
 
  0% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
 
  50% {
 
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
 
    transform: scale3d(1.05, 1.05, 1.05);
 
  }
 
 
  100% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
@keyframes pulse {
 
  0% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
 
  50% {
 
    -webkit-transform: scale3d(1.05, 1.05, 1.05);
 
    -ms-transform: scale3d(1.05, 1.05, 1.05);
 
    transform: scale3d(1.05, 1.05, 1.05);
 
  }
 
 
  100% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
.pulse {
 
  -webkit-animation-name: pulse;
 
  animation-name: pulse;
 
}
 
 
@-webkit-keyframes rubberBand {
 
  0% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
 
  30% {
 
    -webkit-transform: scale3d(1.25, 0.75, 1);
 
    transform: scale3d(1.25, 0.75, 1);
 
  }
 
 
  40% {
 
    -webkit-transform: scale3d(0.75, 1.25, 1);
 
    transform: scale3d(0.75, 1.25, 1);
 
  }
 
 
  50% {
 
    -webkit-transform: scale3d(1.15, 0.85, 1);
 
    transform: scale3d(1.15, 0.85, 1);
 
  }
 
 
  65% {
 
    -webkit-transform: scale3d(.95, 1.05, 1);
 
    transform: scale3d(.95, 1.05, 1);
 
  }
 
 
  75% {
 
    -webkit-transform: scale3d(1.05, .95, 1);
 
    transform: scale3d(1.05, .95, 1);
 
  }
 
 
  100% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
@keyframes rubberBand {
 
  0% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
 
  30% {
 
    -webkit-transform: scale3d(1.25, 0.75, 1);
 
    -ms-transform: scale3d(1.25, 0.75, 1);
 
    transform: scale3d(1.25, 0.75, 1);
 
  }
 
 
  40% {
 
    -webkit-transform: scale3d(0.75, 1.25, 1);
 
    -ms-transform: scale3d(0.75, 1.25, 1);
 
    transform: scale3d(0.75, 1.25, 1);
 
  }
 
 
  50% {
 
    -webkit-transform: scale3d(1.15, 0.85, 1);
 
    -ms-transform: scale3d(1.15, 0.85, 1);
 
    transform: scale3d(1.15, 0.85, 1);
 
  }
 
 
  65% {
 
    -webkit-transform: scale3d(.95, 1.05, 1);
 
    -ms-transform: scale3d(.95, 1.05, 1);
 
    transform: scale3d(.95, 1.05, 1);
 
  }
 
 
  75% {
 
    -webkit-transform: scale3d(1.05, .95, 1);
 
    -ms-transform: scale3d(1.05, .95, 1);
 
    transform: scale3d(1.05, .95, 1);
 
  }
 
 
  100% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
.rubberBand {
 
  -webkit-animation-name: rubberBand;
 
  animation-name: rubberBand;
 
}
 
 
@-webkit-keyframes shake {
 
  0%, 100% {
 
    -webkit-transform: translate3d(0, 0, 0);
 
    transform: translate3d(0, 0, 0);
 
  }
 
 
  10%, 30%, 50%, 70%, 90% {
 
    -webkit-transform: translate3d(-10px, 0, 0);
 
    transform: translate3d(-10px, 0, 0);
 
  }
 
 
  20%, 40%, 60%, 80% {
 
    -webkit-transform: translate3d(10px, 0, 0);
 
    transform: translate3d(10px, 0, 0);
 
  }
 
}
 
 
@keyframes shake {
 
  0%, 100% {
 
    -webkit-transform: translate3d(0, 0, 0);
 
    -ms-transform: translate3d(0, 0, 0);
 
    transform: translate3d(0, 0, 0);
 
  }
 
 
  10%, 30%, 50%, 70%, 90% {
 
    -webkit-transform: translate3d(-10px, 0, 0);
 
    -ms-transform: translate3d(-10px, 0, 0);
 
    transform: translate3d(-10px, 0, 0);
 
  }
 
 
  20%, 40%, 60%, 80% {
 
    -webkit-transform: translate3d(10px, 0, 0);
 
    -ms-transform: translate3d(10px, 0, 0);
 
    transform: translate3d(10px, 0, 0);
 
  }
 
}
 
 
.shake {
 
  -webkit-animation-name: shake;
 
  animation-name: shake;
 
}
 
 
@-webkit-keyframes swing {
 
  20% {
 
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
 
    transform: rotate3d(0, 0, 1, 15deg);
 
  }
 
 
  40% {
 
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
 
    transform: rotate3d(0, 0, 1, -10deg);
 
  }
 
 
  60% {
 
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
 
    transform: rotate3d(0, 0, 1, 5deg);
 
  }
 
 
  80% {
 
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
 
    transform: rotate3d(0, 0, 1, -5deg);
 
  }
 
 
  100% {
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
 
    transform: rotate3d(0, 0, 1, 0deg);
 
  }
 
}
 
 
@keyframes swing {
 
  20% {
 
    -webkit-transform: rotate3d(0, 0, 1, 15deg);
 
    -ms-transform: rotate3d(0, 0, 1, 15deg);
 
    transform: rotate3d(0, 0, 1, 15deg);
 
  }
 
 
  40% {
 
    -webkit-transform: rotate3d(0, 0, 1, -10deg);
 
    -ms-transform: rotate3d(0, 0, 1, -10deg);
 
    transform: rotate3d(0, 0, 1, -10deg);
 
  }
 
 
  60% {
 
    -webkit-transform: rotate3d(0, 0, 1, 5deg);
 
    -ms-transform: rotate3d(0, 0, 1, 5deg);
 
    transform: rotate3d(0, 0, 1, 5deg);
 
  }
 
 
  80% {
 
    -webkit-transform: rotate3d(0, 0, 1, -5deg);
 
    -ms-transform: rotate3d(0, 0, 1, -5deg);
 
    transform: rotate3d(0, 0, 1, -5deg);
 
  }
 
 
  100% {
 
    -webkit-transform: rotate3d(0, 0, 1, 0deg);
 
    -ms-transform: rotate3d(0, 0, 1, 0deg);
 
    transform: rotate3d(0, 0, 1, 0deg);
 
  }
 
}
 
 
.swing {
 
  -webkit-transform-origin: top center;
 
  -ms-transform-origin: top center;
 
  transform-origin: top center;
 
  -webkit-animation-name: swing;
 
  animation-name: swing;
 
}
 
 
@-webkit-keyframes tada {
 
  0% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
 
  10%, 20% {
 
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 
  }
 
 
  30%, 50%, 70%, 90% {
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 
  }
 
 
  40%, 60%, 80% {
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 
  }
 
 
  100% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
@keyframes tada {
 
  0% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
 
  10%, 20% {
 
    -webkit-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 
    -ms-transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);
 
  }
 
 
  30%, 50%, 70%, 90% {
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
 
  }
 
 
  40%, 60%, 80% {
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 
    -ms-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
 
  }
 
 
  100% {
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
.tada {
 
  -webkit-animation-name: tada;
 
  animation-name: tada;
 
}
 
 
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 
@-webkit-keyframes wobble {
 
  0% {
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
 
  15% {
 
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 
  }
 
 
  30% {
 
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 
  }
 
 
  45% {
 
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 
  }
 
 
  60% {
 
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes wobble {
 
  0% {
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
 
  15% {
 
    -webkit-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 
    -ms-transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);
 
  }
 
 
  30% {
 
    -webkit-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 
    -ms-transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);
 
  }
 
 
  45% {
 
    -webkit-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 
    -ms-transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);
 
  }
 
 
  60% {
 
    -webkit-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 
    -ms-transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 
    -ms-transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.wobble {
 
  -webkit-animation-name: wobble;
 
  animation-name: wobble;
 
}
 
 
@-webkit-keyframes bounceIn {
 
  0%, 20%, 40%, 60%, 80%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  20% {
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
 
    transform: scale3d(1.1, 1.1, 1.1);
 
  }
 
 
  40% {
 
    -webkit-transform: scale3d(.9, .9, .9);
 
    transform: scale3d(.9, .9, .9);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
 
    transform: scale3d(1.03, 1.03, 1.03);
 
  }
 
 
  80% {
 
    -webkit-transform: scale3d(.97, .97, .97);
 
    transform: scale3d(.97, .97, .97);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
@keyframes bounceIn {
 
  0%, 20%, 40%, 60%, 80%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    -ms-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  20% {
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
 
    -ms-transform: scale3d(1.1, 1.1, 1.1);
 
    transform: scale3d(1.1, 1.1, 1.1);
 
  }
 
 
  40% {
 
    -webkit-transform: scale3d(.9, .9, .9);
 
    -ms-transform: scale3d(.9, .9, .9);
 
    transform: scale3d(.9, .9, .9);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(1.03, 1.03, 1.03);
 
    -ms-transform: scale3d(1.03, 1.03, 1.03);
 
    transform: scale3d(1.03, 1.03, 1.03);
 
  }
 
 
  80% {
 
    -webkit-transform: scale3d(.97, .97, .97);
 
    -ms-transform: scale3d(.97, .97, .97);
 
    transform: scale3d(.97, .97, .97);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(1, 1, 1);
 
    -ms-transform: scale3d(1, 1, 1);
 
    transform: scale3d(1, 1, 1);
 
  }
 
}
 
 
.bounceIn {
 
  -webkit-animation-name: bounceIn;
 
  animation-name: bounceIn;
 
  -webkit-animation-duration: .75s;
 
  animation-duration: .75s;
 
}
 
 
@-webkit-keyframes bounceInDown {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -3000px, 0);
 
    transform: translate3d(0, -3000px, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, 25px, 0);
 
    transform: translate3d(0, 25px, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(0, -10px, 0);
 
    transform: translate3d(0, -10px, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(0, 5px, 0);
 
    transform: translate3d(0, 5px, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes bounceInDown {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -3000px, 0);
 
    -ms-transform: translate3d(0, -3000px, 0);
 
    transform: translate3d(0, -3000px, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, 25px, 0);
 
    -ms-transform: translate3d(0, 25px, 0);
 
    transform: translate3d(0, 25px, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(0, -10px, 0);
 
    -ms-transform: translate3d(0, -10px, 0);
 
    transform: translate3d(0, -10px, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(0, 5px, 0);
 
    -ms-transform: translate3d(0, 5px, 0);
 
    transform: translate3d(0, 5px, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.bounceInDown {
 
  -webkit-animation-name: bounceInDown;
 
  animation-name: bounceInDown;
 
}
 
 
@-webkit-keyframes bounceInLeft {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-3000px, 0, 0);
 
    transform: translate3d(-3000px, 0, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(25px, 0, 0);
 
    transform: translate3d(25px, 0, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(-10px, 0, 0);
 
    transform: translate3d(-10px, 0, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(5px, 0, 0);
 
    transform: translate3d(5px, 0, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes bounceInLeft {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-3000px, 0, 0);
 
    -ms-transform: translate3d(-3000px, 0, 0);
 
    transform: translate3d(-3000px, 0, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(25px, 0, 0);
 
    -ms-transform: translate3d(25px, 0, 0);
 
    transform: translate3d(25px, 0, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(-10px, 0, 0);
 
    -ms-transform: translate3d(-10px, 0, 0);
 
    transform: translate3d(-10px, 0, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(5px, 0, 0);
 
    -ms-transform: translate3d(5px, 0, 0);
 
    transform: translate3d(5px, 0, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.bounceInLeft {
 
  -webkit-animation-name: bounceInLeft;
 
  animation-name: bounceInLeft;
 
}
 
 
@-webkit-keyframes bounceInRight {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(3000px, 0, 0);
 
    transform: translate3d(3000px, 0, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(-25px, 0, 0);
 
    transform: translate3d(-25px, 0, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(10px, 0, 0);
 
    transform: translate3d(10px, 0, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(-5px, 0, 0);
 
    transform: translate3d(-5px, 0, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes bounceInRight {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(3000px, 0, 0);
 
    -ms-transform: translate3d(3000px, 0, 0);
 
    transform: translate3d(3000px, 0, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(-25px, 0, 0);
 
    -ms-transform: translate3d(-25px, 0, 0);
 
    transform: translate3d(-25px, 0, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(10px, 0, 0);
 
    -ms-transform: translate3d(10px, 0, 0);
 
    transform: translate3d(10px, 0, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(-5px, 0, 0);
 
    -ms-transform: translate3d(-5px, 0, 0);
 
    transform: translate3d(-5px, 0, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.bounceInRight {
 
  -webkit-animation-name: bounceInRight;
 
  animation-name: bounceInRight;
 
}
 
 
@-webkit-keyframes bounceInUp {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 3000px, 0);
 
    transform: translate3d(0, 3000px, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, -20px, 0);
 
    transform: translate3d(0, -20px, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(0, 10px, 0);
 
    transform: translate3d(0, 10px, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(0, -5px, 0);
 
    transform: translate3d(0, -5px, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: translate3d(0, 0, 0);
 
    transform: translate3d(0, 0, 0);
 
  }
 
}
 
 
@keyframes bounceInUp {
 
  0%, 60%, 75%, 90%, 100% {
 
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
 
  }
 
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 3000px, 0);
 
    -ms-transform: translate3d(0, 3000px, 0);
 
    transform: translate3d(0, 3000px, 0);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, -20px, 0);
 
    -ms-transform: translate3d(0, -20px, 0);
 
    transform: translate3d(0, -20px, 0);
 
  }
 
 
  75% {
 
    -webkit-transform: translate3d(0, 10px, 0);
 
    -ms-transform: translate3d(0, 10px, 0);
 
    transform: translate3d(0, 10px, 0);
 
  }
 
 
  90% {
 
    -webkit-transform: translate3d(0, -5px, 0);
 
    -ms-transform: translate3d(0, -5px, 0);
 
    transform: translate3d(0, -5px, 0);
 
  }
 
 
  100% {
 
    -webkit-transform: translate3d(0, 0, 0);
 
    -ms-transform: translate3d(0, 0, 0);
 
    transform: translate3d(0, 0, 0);
 
  }
 
}
 
 
.bounceInUp {
 
  -webkit-animation-name: bounceInUp;
 
  animation-name: bounceInUp;
 
}
 
 
@-webkit-keyframes bounceOut {
 
  20% {
 
    -webkit-transform: scale3d(.9, .9, .9);
 
    transform: scale3d(.9, .9, .9);
 
  }
 
 
  50%, 55% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
 
    transform: scale3d(1.1, 1.1, 1.1);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
}
 
 
@keyframes bounceOut {
 
  20% {
 
    -webkit-transform: scale3d(.9, .9, .9);
 
    -ms-transform: scale3d(.9, .9, .9);
 
    transform: scale3d(.9, .9, .9);
 
  }
 
 
  50%, 55% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(1.1, 1.1, 1.1);
 
    -ms-transform: scale3d(1.1, 1.1, 1.1);
 
    transform: scale3d(1.1, 1.1, 1.1);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    -ms-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
}
 
 
.bounceOut {
 
  -webkit-animation-name: bounceOut;
 
  animation-name: bounceOut;
 
  -webkit-animation-duration: .75s;
 
  animation-duration: .75s;
 
}
 
 
@-webkit-keyframes bounceOutDown {
 
  20% {
 
    -webkit-transform: translate3d(0, 10px, 0);
 
    transform: translate3d(0, 10px, 0);
 
  }
 
 
  40%, 45% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, -20px, 0);
 
    transform: translate3d(0, -20px, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 2000px, 0);
 
    transform: translate3d(0, 2000px, 0);
 
  }
 
}
 
 
@keyframes bounceOutDown {
 
  20% {
 
    -webkit-transform: translate3d(0, 10px, 0);
 
    -ms-transform: translate3d(0, 10px, 0);
 
    transform: translate3d(0, 10px, 0);
 
  }
 
 
  40%, 45% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, -20px, 0);
 
    -ms-transform: translate3d(0, -20px, 0);
 
    transform: translate3d(0, -20px, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 2000px, 0);
 
    -ms-transform: translate3d(0, 2000px, 0);
 
    transform: translate3d(0, 2000px, 0);
 
  }
 
}
 
 
.bounceOutDown {
 
  -webkit-animation-name: bounceOutDown;
 
  animation-name: bounceOutDown;
 
}
 
 
@-webkit-keyframes bounceOutLeft {
 
  20% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(20px, 0, 0);
 
    transform: translate3d(20px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-2000px, 0, 0);
 
    transform: translate3d(-2000px, 0, 0);
 
  }
 
}
 
 
@keyframes bounceOutLeft {
 
  20% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(20px, 0, 0);
 
    -ms-transform: translate3d(20px, 0, 0);
 
    transform: translate3d(20px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-2000px, 0, 0);
 
    -ms-transform: translate3d(-2000px, 0, 0);
 
    transform: translate3d(-2000px, 0, 0);
 
  }
 
}
 
 
.bounceOutLeft {
 
  -webkit-animation-name: bounceOutLeft;
 
  animation-name: bounceOutLeft;
 
}
 
 
@-webkit-keyframes bounceOutRight {
 
  20% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(-20px, 0, 0);
 
    transform: translate3d(-20px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(2000px, 0, 0);
 
    transform: translate3d(2000px, 0, 0);
 
  }
 
}
 
 
@keyframes bounceOutRight {
 
  20% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(-20px, 0, 0);
 
    -ms-transform: translate3d(-20px, 0, 0);
 
    transform: translate3d(-20px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(2000px, 0, 0);
 
    -ms-transform: translate3d(2000px, 0, 0);
 
    transform: translate3d(2000px, 0, 0);
 
  }
 
}
 
 
.bounceOutRight {
 
  -webkit-animation-name: bounceOutRight;
 
  animation-name: bounceOutRight;
 
}
 
 
@-webkit-keyframes bounceOutUp {
 
  20% {
 
    -webkit-transform: translate3d(0, -10px, 0);
 
    transform: translate3d(0, -10px, 0);
 
  }
 
 
  40%, 45% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, 20px, 0);
 
    transform: translate3d(0, 20px, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -2000px, 0);
 
    transform: translate3d(0, -2000px, 0);
 
  }
 
}
 
 
@keyframes bounceOutUp {
 
  20% {
 
    -webkit-transform: translate3d(0, -10px, 0);
 
    -ms-transform: translate3d(0, -10px, 0);
 
    transform: translate3d(0, -10px, 0);
 
  }
 
 
  40%, 45% {
 
    opacity: 1;
 
    -webkit-transform: translate3d(0, 20px, 0);
 
    -ms-transform: translate3d(0, 20px, 0);
 
    transform: translate3d(0, 20px, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -2000px, 0);
 
    -ms-transform: translate3d(0, -2000px, 0);
 
    transform: translate3d(0, -2000px, 0);
 
  }
 
}
 
 
.bounceOutUp {
 
  -webkit-animation-name: bounceOutUp;
 
  animation-name: bounceOutUp;
 
}
 
 
@-webkit-keyframes fadeIn {
 
  0% {
 
    opacity: 0;
 
  }
 
 
  100% {
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes fadeIn {
 
  0% {
 
    opacity: 0;
 
  }
 
 
  100% {
 
    opacity: 1;
 
  }
 
}
 
 
.fadeIn {
 
  -webkit-animation-name: fadeIn;
 
  animation-name: fadeIn;
 
}
 
 
@-webkit-keyframes fadeInDown {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -100%, 0);
 
    transform: translate3d(0, -100%, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInDown {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -100%, 0);
 
    -ms-transform: translate3d(0, -100%, 0);
 
    transform: translate3d(0, -100%, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInDown {
 
  -webkit-animation-name: fadeInDown;
 
  animation-name: fadeInDown;
 
}
 
 
@-webkit-keyframes fadeInDownBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -2000px, 0);
 
    transform: translate3d(0, -2000px, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInDownBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -2000px, 0);
 
    -ms-transform: translate3d(0, -2000px, 0);
 
    transform: translate3d(0, -2000px, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInDownBig {
 
  -webkit-animation-name: fadeInDownBig;
 
  animation-name: fadeInDownBig;
 
}
 
 
@-webkit-keyframes fadeInLeft {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-100%, 0, 0);
 
    transform: translate3d(-100%, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInLeft {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-100%, 0, 0);
 
    -ms-transform: translate3d(-100%, 0, 0);
 
    transform: translate3d(-100%, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInLeft {
 
  -webkit-animation-name: fadeInLeft;
 
  animation-name: fadeInLeft;
 
}
 
 
@-webkit-keyframes fadeInLeftBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-2000px, 0, 0);
 
    transform: translate3d(-2000px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInLeftBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-2000px, 0, 0);
 
    -ms-transform: translate3d(-2000px, 0, 0);
 
    transform: translate3d(-2000px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInLeftBig {
 
  -webkit-animation-name: fadeInLeftBig;
 
  animation-name: fadeInLeftBig;
 
}
 
 
@-webkit-keyframes fadeInRight {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(100%, 0, 0);
 
    transform: translate3d(100%, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInRight {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(100%, 0, 0);
 
    -ms-transform: translate3d(100%, 0, 0);
 
    transform: translate3d(100%, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInRight {
 
  -webkit-animation-name: fadeInRight;
 
  animation-name: fadeInRight;
 
}
 
 
@-webkit-keyframes fadeInRightBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(2000px, 0, 0);
 
    transform: translate3d(2000px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInRightBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(2000px, 0, 0);
 
    -ms-transform: translate3d(2000px, 0, 0);
 
    transform: translate3d(2000px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInRightBig {
 
  -webkit-animation-name: fadeInRightBig;
 
  animation-name: fadeInRightBig;
 
}
 
 
@-webkit-keyframes fadeInUp {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 100%, 0);
 
    transform: translate3d(0, 100%, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInUp {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 100%, 0);
 
    -ms-transform: translate3d(0, 100%, 0);
 
    transform: translate3d(0, 100%, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInUp {
 
  -webkit-animation-name: fadeInUp;
 
  animation-name: fadeInUp;
 
}
 
 
@-webkit-keyframes fadeInUpBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 2000px, 0);
 
    transform: translate3d(0, 2000px, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes fadeInUpBig {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 2000px, 0);
 
    -ms-transform: translate3d(0, 2000px, 0);
 
    transform: translate3d(0, 2000px, 0);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.fadeInUpBig {
 
  -webkit-animation-name: fadeInUpBig;
 
  animation-name: fadeInUpBig;
 
}
 
 
@-webkit-keyframes fadeOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes fadeOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
  }
 
}
 
 
.fadeOut {
 
  -webkit-animation-name: fadeOut;
 
  animation-name: fadeOut;
 
}
 
 
@-webkit-keyframes fadeOutDown {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 100%, 0);
 
    transform: translate3d(0, 100%, 0);
 
  }
 
}
 
 
@keyframes fadeOutDown {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 100%, 0);
 
    -ms-transform: translate3d(0, 100%, 0);
 
    transform: translate3d(0, 100%, 0);
 
  }
 
}
 
 
.fadeOutDown {
 
  -webkit-animation-name: fadeOutDown;
 
  animation-name: fadeOutDown;
 
}
 
 
@-webkit-keyframes fadeOutDownBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 2000px, 0);
 
    transform: translate3d(0, 2000px, 0);
 
  }
 
}
 
 
@keyframes fadeOutDownBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, 2000px, 0);
 
    -ms-transform: translate3d(0, 2000px, 0);
 
    transform: translate3d(0, 2000px, 0);
 
  }
 
}
 
 
.fadeOutDownBig {
 
  -webkit-animation-name: fadeOutDownBig;
 
  animation-name: fadeOutDownBig;
 
}
 
 
@-webkit-keyframes fadeOutLeft {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-100%, 0, 0);
 
    transform: translate3d(-100%, 0, 0);
 
  }
 
}
 
 
@keyframes fadeOutLeft {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-100%, 0, 0);
 
    -ms-transform: translate3d(-100%, 0, 0);
 
    transform: translate3d(-100%, 0, 0);
 
  }
 
}
 
 
.fadeOutLeft {
 
  -webkit-animation-name: fadeOutLeft;
 
  animation-name: fadeOutLeft;
 
}
 
 
@-webkit-keyframes fadeOutLeftBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-2000px, 0, 0);
 
    transform: translate3d(-2000px, 0, 0);
 
  }
 
}
 
 
@keyframes fadeOutLeftBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-2000px, 0, 0);
 
    -ms-transform: translate3d(-2000px, 0, 0);
 
    transform: translate3d(-2000px, 0, 0);
 
  }
 
}
 
 
.fadeOutLeftBig {
 
  -webkit-animation-name: fadeOutLeftBig;
 
  animation-name: fadeOutLeftBig;
 
}
 
 
@-webkit-keyframes fadeOutRight {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(100%, 0, 0);
 
    transform: translate3d(100%, 0, 0);
 
  }
 
}
 
 
@keyframes fadeOutRight {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(100%, 0, 0);
 
    -ms-transform: translate3d(100%, 0, 0);
 
    transform: translate3d(100%, 0, 0);
 
  }
 
}
 
 
.fadeOutRight {
 
  -webkit-animation-name: fadeOutRight;
 
  animation-name: fadeOutRight;
 
}
 
 
@-webkit-keyframes fadeOutRightBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(2000px, 0, 0);
 
    transform: translate3d(2000px, 0, 0);
 
  }
 
}
 
 
@keyframes fadeOutRightBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(2000px, 0, 0);
 
    -ms-transform: translate3d(2000px, 0, 0);
 
    transform: translate3d(2000px, 0, 0);
 
  }
 
}
 
 
.fadeOutRightBig {
 
  -webkit-animation-name: fadeOutRightBig;
 
  animation-name: fadeOutRightBig;
 
}
 
 
@-webkit-keyframes fadeOutUp {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -100%, 0);
 
    transform: translate3d(0, -100%, 0);
 
  }
 
}
 
 
@keyframes fadeOutUp {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -100%, 0);
 
    -ms-transform: translate3d(0, -100%, 0);
 
    transform: translate3d(0, -100%, 0);
 
  }
 
}
 
 
.fadeOutUp {
 
  -webkit-animation-name: fadeOutUp;
 
  animation-name: fadeOutUp;
 
}
 
 
@-webkit-keyframes fadeOutUpBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -2000px, 0);
 
    transform: translate3d(0, -2000px, 0);
 
  }
 
}
 
 
@keyframes fadeOutUpBig {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(0, -2000px, 0);
 
    -ms-transform: translate3d(0, -2000px, 0);
 
    transform: translate3d(0, -2000px, 0);
 
  }
 
}
 
 
.fadeOutUpBig {
 
  -webkit-animation-name: fadeOutUpBig;
 
  animation-name: fadeOutUpBig;
 
}
 
 
@-webkit-keyframes flip {
 
  0% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 
    -webkit-animation-timing-function: ease-out;
 
    animation-timing-function: ease-out;
 
  }
 
 
  40% {
 
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 
    -webkit-animation-timing-function: ease-out;
 
    animation-timing-function: ease-out;
 
  }
 
 
  50% {
 
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 
    -webkit-animation-timing-function: ease-in;
 
    animation-timing-function: ease-in;
 
  }
 
 
  80% {
 
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
 
    transform: perspective(400px) scale3d(.95, .95, .95);
 
    -webkit-animation-timing-function: ease-in;
 
    animation-timing-function: ease-in;
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px);
 
    transform: perspective(400px);
 
    -webkit-animation-timing-function: ease-in;
 
    animation-timing-function: ease-in;
 
  }
 
}
 
 
@keyframes flip {
 
  0% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
 
    -webkit-animation-timing-function: ease-out;
 
    animation-timing-function: ease-out;
 
  }
 
 
  40% {
 
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 
    -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
 
    -webkit-animation-timing-function: ease-out;
 
    animation-timing-function: ease-out;
 
  }
 
 
  50% {
 
    -webkit-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 
    -ms-transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
 
    -webkit-animation-timing-function: ease-in;
 
    animation-timing-function: ease-in;
 
  }
 
 
  80% {
 
    -webkit-transform: perspective(400px) scale3d(.95, .95, .95);
 
    -ms-transform: perspective(400px) scale3d(.95, .95, .95);
 
    transform: perspective(400px) scale3d(.95, .95, .95);
 
    -webkit-animation-timing-function: ease-in;
 
    animation-timing-function: ease-in;
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px);
 
    -ms-transform: perspective(400px);
 
    transform: perspective(400px);
 
    -webkit-animation-timing-function: ease-in;
 
    animation-timing-function: ease-in;
 
  }
 
}
 
 
.animated.flip {
 
  -webkit-backface-visibility: visible;
 
  -ms-backface-visibility: visible;
 
  backface-visibility: visible;
 
  -webkit-animation-name: flip;
 
  animation-name: flip;
 
}
 
 
@-webkit-keyframes flipInX {
 
  0% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
    opacity: 0;
 
  }
 
 
  40% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
  }
 
 
  60% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 
    opacity: 1;
 
  }
 
 
  80% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
}
 
 
@keyframes flipInX {
 
  0% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
    opacity: 0;
 
  }
 
 
  40% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
  }
 
 
  60% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
 
    opacity: 1;
 
  }
 
 
  80% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px);
 
    -ms-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
}
 
 
.flipInX {
 
  -webkit-backface-visibility: visible !important;
 
  -ms-backface-visibility: visible !important;
 
  backface-visibility: visible !important;
 
  -webkit-animation-name: flipInX;
 
  animation-name: flipInX;
 
}
 
 
@-webkit-keyframes flipInY {
 
  0% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
    opacity: 0;
 
  }
 
 
  40% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
  }
 
 
  60% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 
    opacity: 1;
 
  }
 
 
  80% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
}
 
 
@keyframes flipInY {
 
  0% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
    opacity: 0;
 
  }
 
 
  40% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
 
    -webkit-transition-timing-function: ease-in;
 
    transition-timing-function: ease-in;
 
  }
 
 
  60% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
 
    opacity: 1;
 
  }
 
 
  80% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px);
 
    -ms-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
}
 
 
.flipInY {
 
  -webkit-backface-visibility: visible !important;
 
  -ms-backface-visibility: visible !important;
 
  backface-visibility: visible !important;
 
  -webkit-animation-name: flipInY;
 
  animation-name: flipInY;
 
}
 
 
@-webkit-keyframes flipOutX {
 
  0% {
 
    -webkit-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
 
  30% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes flipOutX {
 
  0% {
 
    -webkit-transform: perspective(400px);
 
    -ms-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
 
  30% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    -ms-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
 
    opacity: 0;
 
  }
 
}
 
 
.flipOutX {
 
  -webkit-animation-name: flipOutX;
 
  animation-name: flipOutX;
 
  -webkit-animation-duration: .75s;
 
  animation-duration: .75s;
 
  -webkit-backface-visibility: visible !important;
 
  -ms-backface-visibility: visible !important;
 
  backface-visibility: visible !important;
 
}
 
 
@-webkit-keyframes flipOutY {
 
  0% {
 
    -webkit-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
 
  30% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes flipOutY {
 
  0% {
 
    -webkit-transform: perspective(400px);
 
    -ms-transform: perspective(400px);
 
    transform: perspective(400px);
 
  }
 
 
  30% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    -ms-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
 
    opacity: 0;
 
  }
 
}
 
 
.flipOutY {
 
  -webkit-backface-visibility: visible !important;
 
  -ms-backface-visibility: visible !important;
 
  backface-visibility: visible !important;
 
  -webkit-animation-name: flipOutY;
 
  animation-name: flipOutY;
 
  -webkit-animation-duration: .75s;
 
  animation-duration: .75s;
 
}
 
 
@-webkit-keyframes lightSpeedIn {
 
  0% {
 
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
 
    transform: translate3d(100%, 0, 0) skewX(-30deg);
 
    opacity: 0;
 
  }
 
 
  60% {
 
    -webkit-transform: skewX(20deg);
 
    transform: skewX(20deg);
 
    opacity: 1;
 
  }
 
 
  80% {
 
    -webkit-transform: skewX(-5deg);
 
    transform: skewX(-5deg);
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes lightSpeedIn {
 
  0% {
 
    -webkit-transform: translate3d(100%, 0, 0) skewX(-30deg);
 
    -ms-transform: translate3d(100%, 0, 0) skewX(-30deg);
 
    transform: translate3d(100%, 0, 0) skewX(-30deg);
 
    opacity: 0;
 
  }
 
 
  60% {
 
    -webkit-transform: skewX(20deg);
 
    -ms-transform: skewX(20deg);
 
    transform: skewX(20deg);
 
    opacity: 1;
 
  }
 
 
  80% {
 
    -webkit-transform: skewX(-5deg);
 
    -ms-transform: skewX(-5deg);
 
    transform: skewX(-5deg);
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
.lightSpeedIn {
 
  -webkit-animation-name: lightSpeedIn;
 
  animation-name: lightSpeedIn;
 
  -webkit-animation-timing-function: ease-out;
 
  animation-timing-function: ease-out;
 
}
 
 
@-webkit-keyframes lightSpeedOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
 
    transform: translate3d(100%, 0, 0) skewX(30deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes lightSpeedOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: translate3d(100%, 0, 0) skewX(30deg);
 
    -ms-transform: translate3d(100%, 0, 0) skewX(30deg);
 
    transform: translate3d(100%, 0, 0) skewX(30deg);
 
    opacity: 0;
 
  }
 
}
 
 
.lightSpeedOut {
 
  -webkit-animation-name: lightSpeedOut;
 
  animation-name: lightSpeedOut;
 
  -webkit-animation-timing-function: ease-in;
 
  animation-timing-function: ease-in;
 
}
 
 
@-webkit-keyframes rotateIn {
 
  0% {
 
    -webkit-transform-origin: center;
 
    transform-origin: center;
 
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
 
    transform: rotate3d(0, 0, 1, -200deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: center;
 
    transform-origin: center;
 
    -webkit-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes rotateIn {
 
  0% {
 
    -webkit-transform-origin: center;
 
    -ms-transform-origin: center;
 
    transform-origin: center;
 
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
 
    -ms-transform: rotate3d(0, 0, 1, -200deg);
 
    transform: rotate3d(0, 0, 1, -200deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: center;
 
    -ms-transform-origin: center;
 
    transform-origin: center;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
.rotateIn {
 
  -webkit-animation-name: rotateIn;
 
  animation-name: rotateIn;
 
}
 
 
@-webkit-keyframes rotateInDownLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
 
    transform: rotate3d(0, 0, 1, -45deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes rotateInDownLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
 
    -ms-transform: rotate3d(0, 0, 1, -45deg);
 
    transform: rotate3d(0, 0, 1, -45deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
.rotateInDownLeft {
 
  -webkit-animation-name: rotateInDownLeft;
 
  animation-name: rotateInDownLeft;
 
}
 
 
@-webkit-keyframes rotateInDownRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
 
    transform: rotate3d(0, 0, 1, 45deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes rotateInDownRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
 
    -ms-transform: rotate3d(0, 0, 1, 45deg);
 
    transform: rotate3d(0, 0, 1, 45deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
.rotateInDownRight {
 
  -webkit-animation-name: rotateInDownRight;
 
  animation-name: rotateInDownRight;
 
}
 
 
@-webkit-keyframes rotateInUpLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
 
    transform: rotate3d(0, 0, 1, 45deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes rotateInUpLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
 
    -ms-transform: rotate3d(0, 0, 1, 45deg);
 
    transform: rotate3d(0, 0, 1, 45deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
.rotateInUpLeft {
 
  -webkit-animation-name: rotateInUpLeft;
 
  animation-name: rotateInUpLeft;
 
}
 
 
@-webkit-keyframes rotateInUpRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
 
    transform: rotate3d(0, 0, 1, -90deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes rotateInUpRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -90deg);
 
    -ms-transform: rotate3d(0, 0, 1, -90deg);
 
    transform: rotate3d(0, 0, 1, -90deg);
 
    opacity: 0;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
    opacity: 1;
 
  }
 
}
 
 
.rotateInUpRight {
 
  -webkit-animation-name: rotateInUpRight;
 
  animation-name: rotateInUpRight;
 
}
 
 
@-webkit-keyframes rotateOut {
 
  0% {
 
    -webkit-transform-origin: center;
 
    transform-origin: center;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: center;
 
    transform-origin: center;
 
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
 
    transform: rotate3d(0, 0, 1, 200deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes rotateOut {
 
  0% {
 
    -webkit-transform-origin: center;
 
    -ms-transform-origin: center;
 
    transform-origin: center;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: center;
 
    -ms-transform-origin: center;
 
    transform-origin: center;
 
    -webkit-transform: rotate3d(0, 0, 1, 200deg);
 
    -ms-transform: rotate3d(0, 0, 1, 200deg);
 
    transform: rotate3d(0, 0, 1, 200deg);
 
    opacity: 0;
 
  }
 
}
 
 
.rotateOut {
 
  -webkit-animation-name: rotateOut;
 
  animation-name: rotateOut;
 
}
 
 
@-webkit-keyframes rotateOutDownLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
 
    transform: rotate3d(0, 0, 1, 45deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes rotateOutDownLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
 
    -ms-transform: rotate3d(0, 0, 1, 45deg);
 
    transform: rotate3d(0, 0, 1, 45deg);
 
    opacity: 0;
 
  }
 
}
 
 
.rotateOutDownLeft {
 
  -webkit-animation-name: rotateOutDownLeft;
 
  animation-name: rotateOutDownLeft;
 
}
 
 
@-webkit-keyframes rotateOutDownRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
 
    transform: rotate3d(0, 0, 1, -45deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes rotateOutDownRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
 
    -ms-transform: rotate3d(0, 0, 1, -45deg);
 
    transform: rotate3d(0, 0, 1, -45deg);
 
    opacity: 0;
 
  }
 
}
 
 
.rotateOutDownRight {
 
  -webkit-animation-name: rotateOutDownRight;
 
  animation-name: rotateOutDownRight;
 
}
 
 
@-webkit-keyframes rotateOutUpLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
 
    transform: rotate3d(0, 0, 1, -45deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes rotateOutUpLeft {
 
  0% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: left bottom;
 
    -ms-transform-origin: left bottom;
 
    transform-origin: left bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, -45deg);
 
    -ms-transform: rotate3d(0, 0, 1, -45deg);
 
    transform: rotate3d(0, 0, 1, -45deg);
 
    opacity: 0;
 
  }
 
}
 
 
.rotateOutUpLeft {
 
  -webkit-animation-name: rotateOutUpLeft;
 
  animation-name: rotateOutUpLeft;
 
}
 
 
@-webkit-keyframes rotateOutUpRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
 
    transform: rotate3d(0, 0, 1, 90deg);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes rotateOutUpRight {
 
  0% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform-origin: right bottom;
 
    -ms-transform-origin: right bottom;
 
    transform-origin: right bottom;
 
    -webkit-transform: rotate3d(0, 0, 1, 90deg);
 
    -ms-transform: rotate3d(0, 0, 1, 90deg);
 
    transform: rotate3d(0, 0, 1, 90deg);
 
    opacity: 0;
 
  }
 
}
 
 
.rotateOutUpRight {
 
  -webkit-animation-name: rotateOutUpRight;
 
  animation-name: rotateOutUpRight;
 
}
 
 
@-webkit-keyframes hinge {
 
  0% {
 
    -webkit-transform-origin: top left;
 
    transform-origin: top left;
 
    -webkit-animation-timing-function: ease-in-out;
 
    animation-timing-function: ease-in-out;
 
  }
 
 
  20%, 60% {
 
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
 
    transform: rotate3d(0, 0, 1, 80deg);
 
    -webkit-transform-origin: top left;
 
    transform-origin: top left;
 
    -webkit-animation-timing-function: ease-in-out;
 
    animation-timing-function: ease-in-out;
 
  }
 
 
  40%, 80% {
 
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
 
    transform: rotate3d(0, 0, 1, 60deg);
 
    -webkit-transform-origin: top left;
 
    transform-origin: top left;
 
    -webkit-animation-timing-function: ease-in-out;
 
    animation-timing-function: ease-in-out;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: translate3d(0, 700px, 0);
 
    transform: translate3d(0, 700px, 0);
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes hinge {
 
  0% {
 
    -webkit-transform-origin: top left;
 
    -ms-transform-origin: top left;
 
    transform-origin: top left;
 
    -webkit-animation-timing-function: ease-in-out;
 
    animation-timing-function: ease-in-out;
 
  }
 
 
  20%, 60% {
 
    -webkit-transform: rotate3d(0, 0, 1, 80deg);
 
    -ms-transform: rotate3d(0, 0, 1, 80deg);
 
    transform: rotate3d(0, 0, 1, 80deg);
 
    -webkit-transform-origin: top left;
 
    -ms-transform-origin: top left;
 
    transform-origin: top left;
 
    -webkit-animation-timing-function: ease-in-out;
 
    animation-timing-function: ease-in-out;
 
  }
 
 
  40%, 80% {
 
    -webkit-transform: rotate3d(0, 0, 1, 60deg);
 
    -ms-transform: rotate3d(0, 0, 1, 60deg);
 
    transform: rotate3d(0, 0, 1, 60deg);
 
    -webkit-transform-origin: top left;
 
    -ms-transform-origin: top left;
 
    transform-origin: top left;
 
    -webkit-animation-timing-function: ease-in-out;
 
    animation-timing-function: ease-in-out;
 
    opacity: 1;
 
  }
 
 
  100% {
 
    -webkit-transform: translate3d(0, 700px, 0);
 
    -ms-transform: translate3d(0, 700px, 0);
 
    transform: translate3d(0, 700px, 0);
 
    opacity: 0;
 
  }
 
}
 
 
.hinge {
 
  -webkit-animation-name: hinge;
 
  animation-name: hinge;
 
}
 
 
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 
@-webkit-keyframes rollIn {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    transform: none;
 
  }
 
}
 
 
@keyframes rollIn {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 
    -ms-transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);
 
  }
 
 
  100% {
 
    opacity: 1;
 
    -webkit-transform: none;
 
    -ms-transform: none;
 
    transform: none;
 
  }
 
}
 
 
.rollIn {
 
  -webkit-animation-name: rollIn;
 
  animation-name: rollIn;
 
}
 
 
/* originally authored by Nick Pettit - https://github.com/nickpettit/glide */
 
 
@-webkit-keyframes rollOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 
  }
 
}
 
 
@keyframes rollOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 
    -ms-transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);
 
  }
 
}
 
 
.rollOut {
 
  -webkit-animation-name: rollOut;
 
  animation-name: rollOut;
 
}
 
 
@-webkit-keyframes zoomIn {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  50% {
 
    opacity: 1;
 
  }
 
}
 
 
@keyframes zoomIn {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    -ms-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  50% {
 
    opacity: 1;
 
  }
 
}
 
 
.zoomIn {
 
  -webkit-animation-name: zoomIn;
 
  animation-name: zoomIn;
 
}
 
 
@-webkit-keyframes zoomInDown {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
@keyframes zoomInDown {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
.zoomInDown {
 
  -webkit-animation-name: zoomInDown;
 
  animation-name: zoomInDown;
 
}
 
 
@-webkit-keyframes zoomInLeft {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
@keyframes zoomInLeft {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 
    -ms-transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
.zoomInLeft {
 
  -webkit-animation-name: zoomInLeft;
 
  animation-name: zoomInLeft;
 
}
 
 
@-webkit-keyframes zoomInRight {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
@keyframes zoomInRight {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 
    -ms-transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
.zoomInRight {
 
  -webkit-animation-name: zoomInRight;
 
  animation-name: zoomInRight;
 
}
 
 
@-webkit-keyframes zoomInUp {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
@keyframes zoomInUp {
 
  0% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  60% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
.zoomInUp {
 
  -webkit-animation-name: zoomInUp;
 
  animation-name: zoomInUp;
 
}
 
 
@-webkit-keyframes zoomOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  50% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  100% {
 
    opacity: 0;
 
  }
 
}
 
 
@keyframes zoomOut {
 
  0% {
 
    opacity: 1;
 
  }
 
 
  50% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.3, .3, .3);
 
    -ms-transform: scale3d(.3, .3, .3);
 
    transform: scale3d(.3, .3, .3);
 
  }
 
 
  100% {
 
    opacity: 0;
 
  }
 
}
 
 
.zoomOut {
 
  -webkit-animation-name: zoomOut;
 
  animation-name: zoomOut;
 
}
 
 
@-webkit-keyframes zoomOutDown {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 
    -webkit-transform-origin: center bottom;
 
    transform-origin: center bottom;
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
@keyframes zoomOutDown {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
 
    -webkit-transform-origin: center bottom;
 
    -ms-transform-origin: center bottom;
 
    transform-origin: center bottom;
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
.zoomOutDown {
 
  -webkit-animation-name: zoomOutDown;
 
  animation-name: zoomOutDown;
 
}
 
 
@-webkit-keyframes zoomOutLeft {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
 
    transform: scale(.1) translate3d(-2000px, 0, 0);
 
    -webkit-transform-origin: left center;
 
    transform-origin: left center;
 
  }
 
}
 
 
@keyframes zoomOutLeft {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale(.1) translate3d(-2000px, 0, 0);
 
    -ms-transform: scale(.1) translate3d(-2000px, 0, 0);
 
    transform: scale(.1) translate3d(-2000px, 0, 0);
 
    -webkit-transform-origin: left center;
 
    -ms-transform-origin: left center;
 
    transform-origin: left center;
 
  }
 
}
 
 
.zoomOutLeft {
 
  -webkit-animation-name: zoomOutLeft;
 
  animation-name: zoomOutLeft;
 
}
 
 
@-webkit-keyframes zoomOutRight {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
 
    transform: scale(.1) translate3d(2000px, 0, 0);
 
    -webkit-transform-origin: right center;
 
    transform-origin: right center;
 
  }
 
}
 
 
@keyframes zoomOutRight {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale(.1) translate3d(2000px, 0, 0);
 
    -ms-transform: scale(.1) translate3d(2000px, 0, 0);
 
    transform: scale(.1) translate3d(2000px, 0, 0);
 
    -webkit-transform-origin: right center;
 
    -ms-transform-origin: right center;
 
    transform-origin: right center;
 
  }
 
}
 
 
.zoomOutRight {
 
  -webkit-animation-name: zoomOutRight;
 
  animation-name: zoomOutRight;
 
}
 
 
@-webkit-keyframes zoomOutUp {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 
    -webkit-transform-origin: center bottom;
 
    transform-origin: center bottom;
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
@keyframes zoomOutUp {
 
  40% {
 
    opacity: 1;
 
    -webkit-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    -ms-transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
 
    -webkit-animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);
 
  }
 
 
  100% {
 
    opacity: 0;
 
    -webkit-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 
    -ms-transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
 
    -webkit-transform-origin: center bottom;
 
    -ms-transform-origin: center bottom;
 
    transform-origin: center bottom;
 
    -webkit-animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);
 
  }
 
}
 
 
.zoomOutUp {
 
  -webkit-animation-name: zoomOutUp;
 
  animation-name: zoomOutUp;
 
}
 
</style>
 
  
 
<style type="text/css">
 
<style type="text/css">

Revision as of 04:02, 23 August 2016

The BIG TEMPLATE : RESPONSIVE and FREE

Project Description

We are surrounded by plastic everyday, specifically PET (Polyethylene terephthalate). Considered as the most common type of polyester, PET is a plastic resin often used for packaging consumer products. We can also find it in our water bottles, plastic toys, and even in the fiber of our clothing. PET is a combination of two monomers known as ethylene glycol and purified terephthalic acid that, when combined, form the polymer PET. The problem with PET is that although it is a convenient material for humans to use, it does not easily biodegrade. As PET accumulates in the ecosystems around the world, it poses detrimental effects on habitats worldwide. That is why it is crucial that we find an efficient way to degrade PET.

Upon conducting our research on plastic degradation, shortly after deciding to focus on this topic, our team came across a joint collaboration research project from Keio University and the Kyoto Institute of Technology, two prestigious universities in Japan. Their paper explained their recent research on PET degradation into terephthalic acid and ethylene glycol using a new bacterium originating from Japan called Ideonella Saikaienis. We were inspired by Ideonella Saikaienis because it was a wonderful PET degrader (containing PETase) from Japan, our current home. Given this, when we realized that the production of PETase was from a uniquely Japanese context, we saw it only apt to center our project around this as it showcases a special (and scientifically recent) feature of the Japanese environment. Consequently, our aim and experimental idea were born: to optimize the use of PETase and hopefully add a new biobrick to the iGEM catalog. Turkey’s 2014 project on PET degradation as well as The University of Washington's 2012 project and Darmstadt's 2012 Project also provided us with inspiration on the potential applications for our project in addition to lab protocol ideas.

We chose to optimize PETase as our goal to make a new type of biobrick available to future iGEM teams. We hope that this will make experiments in the following years easier to conduct. However, in order to even get to that stage, we recognized that we needed a well thought out procedure. Our team is currently working on this step. Thus far we have determined we will be using a western blot test to help us deal with the signal peptides. Currently we also have three promoters (one on the slightly weaker side and two on the stronger side) taken from the list of Anderson promoters to test in order to determine how to make PETase most efficient. Before testing such promoters though, we need to isolate evaluate each promoters' effectiveness and efficiency. This information is essential before we proceed onto our next steps and think about real world applications. Questions we may ask ourselves following this first step include: “How long will the degradation take?” and “Will the byproducts of the degradation be harmful in any way to the environment or to people?” Our aim, as stated above, is to find a faster, more efficient process to degrade plastic. Answers to such questions will be essential in seeking solutions to global environmental problems. In regards to the first question, to our current knowledge, 450 years is the timeframe for the natural biodegradation of PET. From our perspective this is much too inefficient when you consider how much PET we use daily. As a result, our experiment will focus on increasing the efficiency of the degradation of plastic through the manipulation of PETase. These are just some examples of the types of questions that we must first consider. Once our confidence in our research progresses, we can then fully focus on individual procedural steps of our project such as the Western Blot.


References

Keio University and Kyoto Institute of Technology. (2016, March 30). Discovery of a Bacterium that Degrades and Assimilates Poly(ethylene terephthalate) could Serve as a Degradation and/or Fermentation Platform for Biological Recycling of PET Waste Products [Press release]. Keio University. Retrieved June 30, 2016, from

https://www.keio.ac.jp/en/press_releases/2016/cb96u90000005501-att/160330_2.pdf


P. (2015). FAQs - Frequently Asked Questions. Retrieved June 30, 2016, from

http://www.petresin.org/faq.asp


Hampson, M. (2016, March 09). Science: Newly Identified Bacteria Break Down Tough Plastic. Retrieved June 30, 2016, from http://www.aaas.org/news/science-newly-identified-bacteria-break-down-tough-plastic
How Long does it take to Decompose - Facts Analysis. (2012, January 24). Retrieved June 30, 2016, from

http://www.hoaxorfact.com/Science/how-long-does-it-take-to-decompose.html


T. (n.d.). Labjournal Metabolism. Retrieved June 30, 2016, from

https://2012.igem.org/Team:TU_Darmstadt/Labjournal/Metabolism


M. (n.d.). Team:METU Turkey project. Retrieved June 30, 2016, from

https://2014.igem.org/Team:METU_Turkey_project


What is PET? (2015). Retrieved June 30, 2016, from

http://www.napcor.com/PET/whatispet.html


Yoshida, S., Hiraga, K., Takehana, T., Taniguchi, I., Yamaji, H., Maehada, Y., . . . Oda, K. (2016, March 11). Supplementary Materials for a Bacterium that Degrades and Assimilates Poly(ethylene terephthalate). Science, 351, 1196th ser. Retrieved June 30, 2016, from

file:///Users/lisawatanuki/Downloads/PETase supplemental (2).pdf

Yoshida, S., Hiraga, K., Takehana, T., Taniguchi, I., Yamaji, H., Maeda, Y., . . . Oda, K. (2016, March 11). A Bacterium that Degrades and Assimilates Poly(ethylene terephthalate). Science, 351(6278), 1196-1199. doi:10.1126/science.aad6359

FEATURES

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis felis dolor, id gravida tellus tempor vitae. In efficitur ipsum non faucibus tempus.

Responsive Design

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.

Easy to Customize

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.

Free to Use

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.

TEAM

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis felis dolor, id gravida tellus tempor vitae. In efficitur ipsum non faucibus tempus.

LEENA CHI MAXI

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.

JHON DEO ALEX

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.

CONTACT

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris sagittis felis dolor, id gravida tellus tempor vitae. In efficitur ipsum non faucibus tempus.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet.