@charset "utf-8";

/*!
 * animate.css -http://daneden.me/animate
 * version - 3.5.2
 * licensed under the mit license - http://opensource.org/licenses/mit
 *
 * copyright (c) 2017 daniel eden
 */

.animated {
  animation-duration: 1s;
  animation-fill-mode: both;}

.animated.infinite {
  animation-iteration-count: infinite;}

.animated.hinge {
  animation-duration: 2s;}

.animated.flipoutx,
.animated.flipouty,
.animated.bouncein,
.animated.bounceout {
  animation-duration: .75s;}

@keyframes bounce {
  from, 20%, 53%, 80%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transform: translate3d(0,0,0);}

  40%, 43% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -30px, 0);}

  70% {
    animation-timing-function: cubic-bezier(0.755, 0.050, 0.855, 0.060);
    transform: translate3d(0, -15px, 0);}

  90% {
    transform: translate3d(0,-4px,0);}
}

.bounce {
  animation-name: bounce;
  transform-origin: center bottom;}

@keyframes flash {
  from, 50%, to {
    opacity: 1;}

  25%, 75% {
    opacity: 0;}
}

.flash {
  animation-name: flash;}

/* originally authored by nick pettit - https://github.com/nickpettit/glide */

@keyframes pulse {
  from {
    transform: scale3d(1, 1, 1);}

  50% {
    transform: scale3d(1.05, 1.05, 1.05);}

  to {
    transform: scale3d(1, 1, 1);}
}

.pulse {
  animation-name: pulse;}

@keyframes rubberband {
  from {
    transform: scale3d(1, 1, 1);}

  30% {
    transform: scale3d(1.25, 0.75, 1);}

  40% {
    transform: scale3d(0.75, 1.25, 1);}

  50% {
    transform: scale3d(1.15, 0.85, 1);}

  65% {
    transform: scale3d(.95, 1.05, 1);}

  75% {
    transform: scale3d(1.05, .95, 1);}

  to {
    transform: scale3d(1, 1, 1);}
}

.rubberband {
  animation-name: rubberband;}

@keyframes shake {
  from, to {
    transform: translate3d(0, 0, 0);}

  10%, 30%, 50%, 70%, 90% {
    transform: translate3d(-10px, 0, 0);}

  20%, 40%, 60%, 80% {
    transform: translate3d(10px, 0, 0);}
}

.shake {
  animation-name: shake;}

@keyframes headshake {
  0% {
    transform: translatex(0);}

  6.5% {
    transform: translatex(-6px) rotatey(-9deg);}

  18.5% {
    transform: translatex(5px) rotatey(7deg);}

  31.5% {
    transform: translatex(-3px) rotatey(-5deg);}

  43.5% {
    transform: translatex(2px) rotatey(3deg);}

  50% {
    transform: translatex(0);}
}

.headshake {
  animation-timing-function: ease-in-out;
  animation-name: headshake;}

@keyframes swing {
  20% {
    transform: rotate3d(0, 0, 1, 15deg);}

  40% {
    transform: rotate3d(0, 0, 1, -10deg);}

  60% {
    transform: rotate3d(0, 0, 1, 5deg);}

  80% {
    transform: rotate3d(0, 0, 1, -5deg);}

  to {
    transform: rotate3d(0, 0, 1, 0deg);}
}

.swing {
  transform-origin: top center;
  animation-name: swing;}

@keyframes tada {
  from {
    transform: scale3d(1, 1, 1);}

  10%, 20% {
    transform: scale3d(.9, .9, .9) rotate3d(0, 0, 1, -3deg);}

  30%, 50%, 70%, 90% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);}

  40%, 60%, 80% {
    transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);}

  to {
    transform: scale3d(1, 1, 1);}
}

.tada {
  animation-name: tada;}

/* originally authored by nick pettit - https://github.com/nickpettit/glide */

@keyframes wobble {
  from {
    transform: none;}

  15% {
    transform: translate3d(-25%, 0, 0) rotate3d(0, 0, 1, -5deg);}

  30% {
    transform: translate3d(20%, 0, 0) rotate3d(0, 0, 1, 3deg);}

  45% {
    transform: translate3d(-15%, 0, 0) rotate3d(0, 0, 1, -3deg);}

  60% {
    transform: translate3d(10%, 0, 0) rotate3d(0, 0, 1, 2deg);}

  75% {
    transform: translate3d(-5%, 0, 0) rotate3d(0, 0, 1, -1deg);}

  to {
    transform: none;}
}

.wobble {
  animation-name: wobble;}

@keyframes jello {
  from, 11.1%, to {
    transform: none;}

  22.2% {
    transform: skewx(-12.5deg) skewy(-12.5deg);}

  33.3% {
    transform: skewx(6.25deg) skewy(6.25deg);}

  44.4% {
    transform: skewx(-3.125deg) skewy(-3.125deg);}

  55.5% {
    transform: skewx(1.5625deg) skewy(1.5625deg);}

  66.6% {
    transform: skewx(-0.78125deg) skewy(-0.78125deg);}

  77.7% {
    transform: skewx(0.390625deg) skewy(0.390625deg);}

  88.8% {
    transform: skewx(-0.1953125deg) skewy(-0.1953125deg);}
}

.jello {
  animation-name: jello;
  transform-origin: center;}

@keyframes bouncein {
  // from, 20%, 40%, 60%, 80%, to {
  //   animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

  from, 50%, to {
    animation-timing-function: ease-out;}

  0% {
    opacity: 0;
    transform: scale3d(0, 0, 0);}

  // 20% {
  //   transform: scale3d(1.1, 1.1, 1.1);}

  // 40% {
  //   transform: scale3d(.9, .9, .9);}

  // 50% {
  //   opacity: .5;
  //   transform: scale3d(.5, .5, .5);}

  // 60% {
  //   opacity: 1;
  //   transform: scale3d(1.03, 1.03, 1.03);}

  // 80% {
  //   transform: scale3d(.97, .97, .97);}

  to {
    opacity: 1;
    transform: scale3d(1, 1, 1);}
}

.bouncein {
  animation-name: bouncein;}

@keyframes bounceindown {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

  0% {
    opacity: 0;
    transform: translate3d(0, -3000px, 0);}

  60% {
    opacity: 1;
    transform: translate3d(0, 25px, 0);}

  75% {
    transform: translate3d(0, -10px, 0);}

  90% {
    transform: translate3d(0, 5px, 0);}

  to {
    transform: none;}
}

.bounceindown {
  animation-name: bounceindown;}

@keyframes bounceinleft {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

  0% {
    opacity: 0;
    transform: translate3d(-3000px, 0, 0);}

  60% {
    opacity: 1;
    transform: translate3d(25px, 0, 0);}

  75% {
    transform: translate3d(-10px, 0, 0);}

  90% {
    transform: translate3d(5px, 0, 0);}

  to {
    transform: none;}
}

.bounceinleft {
  animation-name: bounceinleft;}

@keyframes bounceinright {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

  from {
    opacity: 0;
    transform: translate3d(3000px, 0, 0);}

  60% {
    opacity: 1;
    transform: translate3d(-25px, 0, 0);}

  75% {
    transform: translate3d(10px, 0, 0);}

  90% {
    transform: translate3d(-5px, 0, 0);}

  to {
    transform: none;}
}

.bounceinright {
  animation-name: bounceinright;}

@keyframes bounceinup {
  from, 60%, 75%, 90%, to {
    animation-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);}

  from {
    opacity: 0;
    transform: translate3d(0, 3000px, 0);}

  60% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);}

  75% {
    transform: translate3d(0, 10px, 0);}

  90% {
    transform: translate3d(0, -5px, 0);}

  to {
    transform: translate3d(0, 0, 0);}
}

.bounceinup {
  animation-name: bounceinup;}

@keyframes bounceout {
  20% {
    transform: scale3d(.9, .9, .9);}

  50%, 55% {
    opacity: 1;
    transform: scale3d(1.1, 1.1, 1.1);}

  to {
    opacity: 0;
    transform: scale3d(.3, .3, .3);}
}

.bounceout {
  animation-name: bounceout;}

@keyframes bounceoutdown {
  20% {
    transform: translate3d(0, 10px, 0);}

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, -20px, 0);}

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);}
}

.bounceoutdown {
  animation-name: bounceoutdown;}

@keyframes bounceoutleft {
  20% {
    opacity: 1;
    transform: translate3d(20px, 0, 0);}

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);}
}

.bounceoutleft {
  animation-name: bounceoutleft;}

@keyframes bounceoutright {
  20% {
    opacity: 1;
    transform: translate3d(-20px, 0, 0);}

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);}
}

.bounceoutright {
  animation-name: bounceoutright;}

@keyframes bounceoutup {
  20% {
    transform: translate3d(0, -10px, 0);}

  40%, 45% {
    opacity: 1;
    transform: translate3d(0, 20px, 0);}

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);}
}

.bounceoutup {
  animation-name: bounceoutup;}

@keyframes fadein {
  from {
    opacity: 0;}

  to {
    opacity: 1;}
}

.fadein {
  animation-name: fadein;}

@keyframes fadeindown {
  from {
    opacity: 0;
    transform: translate3d(0, -100%, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeindown {
  animation-name: fadeindown;}

@keyframes fadeindownbig {
  from {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeindownbig {
  animation-name: fadeindownbig;}

@keyframes fadeinleft {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeinleft {
  animation-name: fadeinleft;}

@keyframes fadeinleftbig {
  from {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeinleftbig {
  animation-name: fadeinleftbig;}

@keyframes fadeinright {
  from {
    opacity: 0;
    transform: translate3d(100%, 0, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeinright {
  animation-name: fadeinright;}

@keyframes fadeinrightbig {
  from {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeinrightbig {
  animation-name: fadeinrightbig;}

@keyframes fadeinup {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeinup {
  animation-name: fadeinup;}

@keyframes fadeinupbig {
  from {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);}

  to {
    opacity: 1;
    transform: none;}
}

.fadeinupbig {
  animation-name: fadeinupbig;}

@keyframes fadeout {
  from {
    opacity: 1;}

  to {
    opacity: 0;}
}

.fadeout {
  animation-name: fadeout;}

@keyframes fadeoutdown {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(0, 100%, 0);}
}

.fadeoutdown {
  animation-name: fadeoutdown;}

@keyframes fadeoutdownbig {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(0, 2000px, 0);}
}

.fadeoutdownbig {
  animation-name: fadeoutdownbig;}

@keyframes fadeoutleft {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(-100%, 0, 0);}
}

.fadeoutleft {
  animation-name: fadeoutleft;}

@keyframes fadeoutleftbig {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(-2000px, 0, 0);}
}

.fadeoutleftbig {
  animation-name: fadeoutleftbig;}

@keyframes fadeoutright {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0);}
}

.fadeoutright {
  animation-name: fadeoutright;}

@keyframes fadeoutrightbig {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(2000px, 0, 0);}
}

.fadeoutrightbig {
  animation-name: fadeoutrightbig;}

@keyframes fadeoutup {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(0, -100%, 0);}
}

.fadeoutup {
  animation-name: fadeoutup;}

@keyframes fadeoutupbig {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(0, -2000px, 0);}
}

.fadeoutupbig {
  animation-name: fadeoutupbig;}

@keyframes flip {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, -360deg);
    animation-timing-function: ease-out;}

  40% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -190deg);
    animation-timing-function: ease-out;}

  50% {
    transform: perspective(400px) translate3d(0, 0, 150px) rotate3d(0, 1, 0, -170deg);
    animation-timing-function: ease-in;}

  80% {
    transform: perspective(400px) scale3d(.95, .95, .95);
    animation-timing-function: ease-in;}

  to {
    transform: perspective(400px);
    animation-timing-function: ease-in;}
}

.animated.flip {
  -webkit-backface-visibility: visible;
  backface-visibility: visible;
  animation-name: flip;}

@keyframes flipinx {
  from {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;}

  40% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    animation-timing-function: ease-in;}

  60% {
    transform: perspective(400px) rotate3d(1, 0, 0, 10deg);
    opacity: 1;}

  80% {
    transform: perspective(400px) rotate3d(1, 0, 0, -5deg);}

  to {
    transform: perspective(400px);}
}

.flipinx {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipinx;}

@keyframes flipiny {
  from {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    animation-timing-function: ease-in;
    opacity: 0;}

  40% {
    transform: perspective(400px) rotate3d(0, 1, 0, -20deg);
    animation-timing-function: ease-in;}

  60% {
    transform: perspective(400px) rotate3d(0, 1, 0, 10deg);
    opacity: 1;}

  80% {
    transform: perspective(400px) rotate3d(0, 1, 0, -5deg);}

  to {
    transform: perspective(400px);}
}

.flipiny {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipiny;}

@keyframes flipoutx {
  from {
    transform: perspective(400px);}

  30% {
    transform: perspective(400px) rotate3d(1, 0, 0, -20deg);
    opacity: 1;}

  to {
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    opacity: 0;}
}

.flipoutx {
  animation-name: flipoutx;
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;}

@keyframes flipouty {
  from {
    transform: perspective(400px);}

  30% {
    transform: perspective(400px) rotate3d(0, 1, 0, -15deg);
    opacity: 1;}

  to {
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    opacity: 0;}
}

.flipouty {
  -webkit-backface-visibility: visible !important;
  backface-visibility: visible !important;
  animation-name: flipouty;}

@keyframes lightspeedin {
  from {
    transform: translate3d(100%, 0, 0) skewx(-30deg);
    opacity: 0;}

  60% {
    transform: skewx(20deg);
    opacity: 1;}

  80% {
    transform: skewx(-5deg);
    opacity: 1;}

  to {
    transform: none;
    opacity: 1;}
}

.lightspeedin {
  animation-name: lightspeedin;
  animation-timing-function: ease-out;}

@keyframes lightspeedout {
  from {
    opacity: 1;}

  to {
    transform: translate3d(100%, 0, 0) skewx(30deg);
    opacity: 0;}
}

.lightspeedout {
  animation-name: lightspeedout;
  animation-timing-function: ease-in;}

@keyframes rotatein {
  from {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;}

  to {
    transform-origin: center;
    transform: none;
    opacity: 1;}
}

.rotatein {
  animation-name: rotatein;}

@keyframes rotateindownleft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;}

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;}
}

.rotateindownleft {
  animation-name: rotateindownleft;}

@keyframes rotateindownright {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;}

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;}
}

.rotateindownright {
  animation-name: rotateindownright;}

@keyframes rotateinupleft {
  from {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;}

  to {
    transform-origin: left bottom;
    transform: none;
    opacity: 1;}
}

.rotateinupleft {
  animation-name: rotateinupleft;}

@keyframes rotateinupright {
  from {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -90deg);
    opacity: 0;}

  to {
    transform-origin: right bottom;
    transform: none;
    opacity: 1;}
}

.rotateinupright {
  animation-name: rotateinupright;}

@keyframes rotateout {
  from {
    transform-origin: center;
    opacity: 1;}

  to {
    transform-origin: center;
    transform: rotate3d(0, 0, 1, 200deg);
    opacity: 0;}
}

.rotateout {
  animation-name: rotateout;}

@keyframes rotateoutdownleft {
  from {
    transform-origin: left bottom;
    opacity: 1;}

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, 45deg);
    opacity: 0;}
}

.rotateoutdownleft {
  animation-name: rotateoutdownleft;}

@keyframes rotateoutdownright {
  from {
    transform-origin: right bottom;
    opacity: 1;}

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;}
}

.rotateoutdownright {
  animation-name: rotateoutdownright;}

@keyframes rotateoutupleft {
  from {
    transform-origin: left bottom;
    opacity: 1;}

  to {
    transform-origin: left bottom;
    transform: rotate3d(0, 0, 1, -45deg);
    opacity: 0;}
}

.rotateoutupleft {
  animation-name: rotateoutupleft;}

@keyframes rotateoutupright {
  from {
    transform-origin: right bottom;
    opacity: 1;}

  to {
    transform-origin: right bottom;
    transform: rotate3d(0, 0, 1, 90deg);
    opacity: 0;}
}

.rotateoutupright {
  animation-name: rotateoutupright;}

@keyframes hinge {
  0% {
    transform-origin: top left;
    animation-timing-function: ease-in-out;}

  20%, 60% {
    transform: rotate3d(0, 0, 1, 80deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;}

  40%, 80% {
    transform: rotate3d(0, 0, 1, 60deg);
    transform-origin: top left;
    animation-timing-function: ease-in-out;
    opacity: 1;}

  to {
    transform: translate3d(0, 700px, 0);
    opacity: 0;}
}

.hinge {
  animation-name: hinge;}

@keyframes jackinthebox {
  from {
    opacity: 0;
    transform: scale(0.1) rotate(30deg);
    transform-origin: center bottom;}

  50% {
    transform: rotate(-10deg);}

  70% {
    transform: rotate(3deg);}

  to {
    opacity: 1;
    transform: scale(1);}
}

.jackinthebox {
  animation-name: jackinthebox;}

/* originally authored by nick pettit - https://github.com/nickpettit/glide */

@keyframes rollin {
  from {
    opacity: 0;
    transform: translate3d(-100%, 0, 0) rotate3d(0, 0, 1, -120deg);}

  to {
    opacity: 1;
    transform: none;}
}

.rollin {
  animation-name: rollin;}

/* originally authored by nick pettit - https://github.com/nickpettit/glide */

@keyframes rollout {
  from {
    opacity: 1;}

  to {
    opacity: 0;
    transform: translate3d(100%, 0, 0) rotate3d(0, 0, 1, 120deg);}
}

.rollout {
  animation-name: rollout;}

@keyframes zoomin {
  from {
    opacity: 0;
    transform: scale3d(.3, .3, .3);}

  50% {
    opacity: 1;}
}

.zoomin {
  animation-name: zoomin;}

@keyframes zoomindown {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}

.zoomindown {
  animation-name: zoomindown;}

@keyframes zoominleft {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(-1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}

.zoominleft {
  animation-name: zoominleft;}

@keyframes zoominright {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(1000px, 0, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-10px, 0, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}

.zoominright {
  animation-name: zoominright;}

@keyframes zoominup {
  from {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 1000px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}

  60% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}

.zoominup {
  animation-name: zoominup;}

@keyframes zoomout {
  from {
    opacity: 1;}

  50% {
    opacity: 0;
    transform: scale3d(.3, .3, .3);}

  to {
    opacity: 0;}
}

.zoomout {
  animation-name: zoomout;}

@keyframes zoomoutdown {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, -60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, 2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}

.zoomoutdown {
  animation-name: zoomoutdown;}

@keyframes zoomoutleft {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(42px, 0, 0);}

  to {
    opacity: 0;
    transform: scale(.1) translate3d(-2000px, 0, 0);
    transform-origin: left center;}
}

.zoomoutleft {
  animation-name: zoomoutleft;}

@keyframes zoomoutright {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(-42px, 0, 0);}

  to {
    opacity: 0;
    transform: scale(.1) translate3d(2000px, 0, 0);
    transform-origin: right center;}
}

.zoomoutright {
  animation-name: zoomoutright;}

@keyframes zoomoutup {
  40% {
    opacity: 1;
    transform: scale3d(.475, .475, .475) translate3d(0, 60px, 0);
    animation-timing-function: cubic-bezier(0.550, 0.055, 0.675, 0.190);}

  to {
    opacity: 0;
    transform: scale3d(.1, .1, .1) translate3d(0, -2000px, 0);
    transform-origin: center bottom;
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.320, 1);}
}

.zoomoutup {
  animation-name: zoomoutup;}

@keyframes slideindown {
  from {
    transform: translate3d(0, -100%, 0);
    visibility: visible;}

  to {
    transform: translate3d(0, 0, 0);}
}

.slideindown {
  animation-name: slideindown;}

@keyframes slideinleft {
  from {
    transform: translate3d(-100%, 0, 0);
    visibility: visible;}

  to {
    transform: translate3d(0, 0, 0);}
}

.slideinleft {
  animation-name: slideinleft;}

@keyframes slideinright {
  from {
    transform: translate3d(100%, 0, 0);
    visibility: visible;}

  to {
    transform: translate3d(0, 0, 0);}
}

.slideinright {
  animation-name: slideinright;}

@keyframes slideinup {
  from {
    transform: translate3d(0, 100%, 0);
    visibility: visible;}

  to {
    transform: translate3d(0, 0, 0);}
}

.slideinup {
  animation-name: slideinup;}

@keyframes slideoutdown {
  from {
    transform: translate3d(0, 0, 0);}

  to {
    visibility: hidden;
    transform: translate3d(0, 100%, 0);}
}

.slideoutdown {
  animation-name: slideoutdown;}

@keyframes slideoutleft {
  from {
    transform: translate3d(0, 0, 0);}

  to {
    visibility: hidden;
    transform: translate3d(-100%, 0, 0);}
}

.slideoutleft {
  animation-name: slideoutleft;}

@keyframes slideoutright {
  from {
    transform: translate3d(0, 0, 0);}

  to {
    visibility: hidden;
    transform: translate3d(100%, 0, 0);}
}

.slideoutright {
  animation-name: slideoutright;}

@keyframes slideoutup {
  from {
    transform: translate3d(0, 0, 0);}

  to {
    visibility: hidden;
    transform: translate3d(0, -100%, 0);}
}

.slideoutup {
  animation-name: slideoutup;}