@charset "utf-8";

/*!
 * animate.css -https://daneden.github.io/animate.css/
 * version - 3.7.2
 * licensed under the mit license - http://opensource.org/licenses/mit
 *
 * copyright (c) 2019 daniel eden
 */

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

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

  70% {
    -webkit-animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    animation-timing-function: cubic-bezier(0.755, 0.05, 0.855, 0.06);
    -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 {
  from,
  20%,
  53%,
  80%,
  to {
    -webkit-animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

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

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

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

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

@keyframes flash {
  from,
  50%,
  to {
    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 {
  from {
    -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);
  }

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

@keyframes pulse {
  from {
    -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);
  }

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

.pulse {
  -webkit-animation-name: pulse;
  animation-name: pulse;
}

@-webkit-keyframes rubberband {
  from {
    -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(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

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

@keyframes rubberband {
  from {
    -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(0.95, 1.05, 1);
    transform: scale3d(0.95, 1.05, 1);
  }

  75% {
    -webkit-transform: scale3d(1.05, 0.95, 1);
    transform: scale3d(1.05, 0.95, 1);
  }

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

.rubberband {
  -webkit-animation-name: rubberband;
  animation-name: rubberband;
}

@-webkit-keyframes shake {
  from,
  to {
    -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 {
  from,
  to {
    -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);
  }
}

.shake {
  -webkit-animation-name: shake;
  animation-name: shake;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

@-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);
  }

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

@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);
  }

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

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

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

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.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);
  }

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

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

  10%,
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
    transform: scale3d(0.9, 0.9, 0.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);
  }

  to {
    -webkit-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 {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  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);
  }

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

@keyframes wobble {
  from {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

  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);
  }

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

.wobble {
  -webkit-animation-name: wobble;
  animation-name: wobble;
}

@-webkit-keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

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

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

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

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

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

@keyframes jello {
  from,
  11.1%,
  to {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }

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

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

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

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

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

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

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

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

@-webkit-keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

@keyframes heartbeat {
  0% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  14% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  28% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }

  42% {
    -webkit-transform: scale(1.3);
    transform: scale(1.3);
  }

  70% {
    -webkit-transform: scale(1);
    transform: scale(1);
  }
}

.heartbeat {
  -webkit-animation-name: heartbeat;
  animation-name: heartbeat;
  -webkit-animation-duration: 1.3s;
  animation-duration: 1.3s;
  -webkit-animation-timing-function: ease-in-out;
  animation-timing-function: ease-in-out;
}

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

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

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

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

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

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

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

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

  40% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.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(0.97, 0.97, 0.97);
    transform: scale3d(0.97, 0.97, 0.97);
  }

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

.bouncein {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bouncein;
  animation-name: bouncein;
}

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

  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);
  }

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

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

  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);
  }

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

.bounceindown {
  -webkit-animation-name: bounceindown;
  animation-name: bounceindown;
}

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

  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);
  }

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

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

  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);
  }

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

.bounceinleft {
  -webkit-animation-name: bounceinleft;
  animation-name: bounceinleft;
}

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

  from {
    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);
  }

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

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

  from {
    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);
  }

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

.bounceinright {
  -webkit-animation-name: bounceinright;
  animation-name: bounceinright;
}

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

  from {
    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);
  }

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

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

  from {
    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);
  }

  to {
    -webkit-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(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

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

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

@keyframes bounceout {
  20% {
    -webkit-transform: scale3d(0.9, 0.9, 0.9);
    transform: scale3d(0.9, 0.9, 0.9);
  }

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

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }
}

.bounceout {
  -webkit-animation-duration: 0.75s;
  animation-duration: 0.75s;
  -webkit-animation-name: bounceout;
  animation-name: bounceout;
}

@-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);
  }

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

@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);
  }

  to {
    opacity: 0;
    -webkit-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);
  }

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

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

  to {
    opacity: 0;
    -webkit-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);
  }

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

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

  to {
    opacity: 0;
    -webkit-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);
  }

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

@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);
  }

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

.bounceoutup {
  -webkit-animation-name: bounceoutup;
  animation-name: bounceoutup;
}

@-webkit-keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes fadein {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

.fadein {
  -webkit-animation-name: fadein;
  animation-name: fadein;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeindown {
  -webkit-animation-name: fadeindown;
  animation-name: fadeindown;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeindownbig {
  -webkit-animation-name: fadeindownbig;
  animation-name: fadeindownbig;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeinleft {
  -webkit-animation-name: fadeinleft;
  animation-name: fadeinleft;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeinleftbig {
  -webkit-animation-name: fadeinleftbig;
  animation-name: fadeinleftbig;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeinright {
  -webkit-animation-name: fadeinright;
  animation-name: fadeinright;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeinrightbig {
  -webkit-animation-name: fadeinrightbig;
  animation-name: fadeinrightbig;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeinup {
  -webkit-animation-name: fadeinup;
  animation-name: fadeinup;
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.fadeinupbig {
  -webkit-animation-name: fadeinupbig;
  animation-name: fadeinupbig;
}

@-webkit-keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

@keyframes fadeout {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}

.fadeout {
  -webkit-animation-name: fadeout;
  animation-name: fadeout;
}

@-webkit-keyframes fadeoutdown {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutdown {
  from {
    opacity: 1;
  }

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

.fadeoutdown {
  -webkit-animation-name: fadeoutdown;
  animation-name: fadeoutdown;
}

@-webkit-keyframes fadeoutdownbig {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutdownbig {
  from {
    opacity: 1;
  }

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

.fadeoutdownbig {
  -webkit-animation-name: fadeoutdownbig;
  animation-name: fadeoutdownbig;
}

@-webkit-keyframes fadeoutleft {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutleft {
  from {
    opacity: 1;
  }

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

.fadeoutleft {
  -webkit-animation-name: fadeoutleft;
  animation-name: fadeoutleft;
}

@-webkit-keyframes fadeoutleftbig {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutleftbig {
  from {
    opacity: 1;
  }

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

.fadeoutleftbig {
  -webkit-animation-name: fadeoutleftbig;
  animation-name: fadeoutleftbig;
}

@-webkit-keyframes fadeoutright {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutright {
  from {
    opacity: 1;
  }

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

.fadeoutright {
  -webkit-animation-name: fadeoutright;
  animation-name: fadeoutright;
}

@-webkit-keyframes fadeoutrightbig {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutrightbig {
  from {
    opacity: 1;
  }

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

.fadeoutrightbig {
  -webkit-animation-name: fadeoutrightbig;
  animation-name: fadeoutrightbig;
}

@-webkit-keyframes fadeoutup {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutup {
  from {
    opacity: 1;
  }

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

.fadeoutup {
  -webkit-animation-name: fadeoutup;
  animation-name: fadeoutup;
}

@-webkit-keyframes fadeoutupbig {
  from {
    opacity: 1;
  }

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

@keyframes fadeoutupbig {
  from {
    opacity: 1;
  }

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

.fadeoutupbig {
  -webkit-animation-name: fadeoutupbig;
  animation-name: fadeoutupbig;
}

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

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) 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(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

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

  40% {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -190deg);
    transform: perspective(400px) scale3d(1, 1, 1) 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) scale3d(1, 1, 1) translate3d(0, 0, 150px)
      rotate3d(0, 1, 0, -170deg);
    transform: perspective(400px) scale3d(1, 1, 1) 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(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(0.95, 0.95, 0.95) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }

  to {
    -webkit-transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0)
      rotate3d(0, 1, 0, 0deg);
    transform: perspective(400px) scale3d(1, 1, 1) translate3d(0, 0, 0) rotate3d(0, 1, 0, 0deg);
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
  }
}

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

@-webkit-keyframes flipinx {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-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-animation-timing-function: ease-in;
    animation-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);
  }

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

@keyframes flipinx {
  from {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-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-animation-timing-function: ease-in;
    animation-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);
  }

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

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

@-webkit-keyframes flipiny {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-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-animation-timing-function: ease-in;
    animation-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);
  }

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

@keyframes flipiny {
  from {
    -webkit-transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    transform: perspective(400px) rotate3d(0, 1, 0, 90deg);
    -webkit-animation-timing-function: ease-in;
    animation-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-animation-timing-function: ease-in;
    animation-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);
  }

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

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

@-webkit-keyframes flipoutx {
  from {
    -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;
  }

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

@keyframes flipoutx {
  from {
    -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;
  }

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

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

@-webkit-keyframes flipouty {
  from {
    -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;
  }

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

@keyframes flipouty {
  from {
    -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;
  }

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

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

@-webkit-keyframes lightspeedin {
  from {
    -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);
  }

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

@keyframes lightspeedin {
  from {
    -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);
  }

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

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

@-webkit-keyframes lightspeedout {
  from {
    opacity: 1;
  }

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

@keyframes lightspeedout {
  from {
    opacity: 1;
  }

  to {
    -webkit-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 {
  from {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg);
    transform: rotate3d(0, 0, 1, -200deg);
    opacity: 0;
  }

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotatein {
  -webkit-animation-name: rotatein;
  animation-name: rotatein;
}

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

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateindownleft {
  -webkit-animation-name: rotateindownleft;
  animation-name: rotateindownleft;
}

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

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateindownright {
  -webkit-animation-name: rotateindownright;
  animation-name: rotateindownright;
}

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

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateinupleft {
  -webkit-animation-name: rotateinupleft;
  animation-name: rotateinupleft;
}

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

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

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

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    opacity: 1;
  }
}

.rotateinupright {
  -webkit-animation-name: rotateinupright;
  animation-name: rotateinupright;
}

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

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

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

  to {
    -webkit-transform-origin: center;
    transform-origin: center;
    -webkit-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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -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 {
  from {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: left bottom;
    transform-origin: left bottom;
    -webkit-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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -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 {
  from {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    opacity: 1;
  }

  to {
    -webkit-transform-origin: right bottom;
    transform-origin: right bottom;
    -webkit-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;
  }

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

@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;
  }

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

.hinge {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
  -webkit-animation-name: hinge;
  animation-name: hinge;
}

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

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

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

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

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

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

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

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

.jackinthebox {
  -webkit-animation-name: jackinthebox;
  animation-name: jackinthebox;
}

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

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

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

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

.rollin {
  -webkit-animation-name: rollin;
  animation-name: rollin;
}

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

@-webkit-keyframes rollout {
  from {
    opacity: 1;
  }

  to {
    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 {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
    -webkit-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 {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomin {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  50% {
    opacity: 1;
  }
}

.zoomin {
  -webkit-animation-name: zoomin;
  animation-name: zoomin;
}

@-webkit-keyframes zoomindown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

@keyframes zoomindown {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

.zoomindown {
  -webkit-animation-name: zoomindown;
  animation-name: zoomindown;
}

@-webkit-keyframes zoominleft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

@keyframes zoominleft {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(-1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

.zoominleft {
  -webkit-animation-name: zoominleft;
  animation-name: zoominleft;
}

@-webkit-keyframes zoominright {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

@keyframes zoominright {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(1000px, 0, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

.zoominright {
  -webkit-animation-name: zoominright;
  animation-name: zoominright;
}

@-webkit-keyframes zoominup {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

@keyframes zoominup {
  from {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 1000px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

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

.zoominup {
  -webkit-animation-name: zoominup;
  animation-name: zoominup;
}

@-webkit-keyframes zoomout {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

@keyframes zoomout {
  from {
    opacity: 1;
  }

  50% {
    opacity: 0;
    -webkit-transform: scale3d(0.3, 0.3, 0.3);
    transform: scale3d(0.3, 0.3, 0.3);
  }

  to {
    opacity: 0;
  }
}

.zoomout {
  -webkit-animation-name: zoomout;
  animation-name: zoomout;
}

@-webkit-keyframes zoomoutdown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.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.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomoutdown {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, -60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, 2000px, 0);
    transform: scale3d(0.1, 0.1, 0.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.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomoutdown {
  -webkit-animation-name: zoomoutdown;
  animation-name: zoomoutdown;
}

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

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

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

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(-2000px, 0, 0);
    transform: scale(0.1) translate3d(-2000px, 0, 0);
    -webkit-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(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(-42px, 0, 0);
  }

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

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

  to {
    opacity: 0;
    -webkit-transform: scale(0.1) translate3d(2000px, 0, 0);
    transform: scale(0.1) translate3d(2000px, 0, 0);
    -webkit-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(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.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.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

@keyframes zoomoutup {
  40% {
    opacity: 1;
    -webkit-transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    transform: scale3d(0.475, 0.475, 0.475) translate3d(0, 60px, 0);
    -webkit-animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
    animation-timing-function: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  }

  to {
    opacity: 0;
    -webkit-transform: scale3d(0.1, 0.1, 0.1) translate3d(0, -2000px, 0);
    transform: scale3d(0.1, 0.1, 0.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.32, 1);
    animation-timing-function: cubic-bezier(0.175, 0.885, 0.32, 1);
  }
}

.zoomoutup {
  -webkit-animation-name: zoomoutup;
  animation-name: zoomoutup;
}

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

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

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

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

.slideindown {
  -webkit-animation-name: slideindown;
  animation-name: slideindown;
}

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

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

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

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

.slideinleft {
  -webkit-animation-name: slideinleft;
  animation-name: slideinleft;
}

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

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

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

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

.slideinright {
  -webkit-animation-name: slideinright;
  animation-name: slideinright;
}

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

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

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

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

.slideinup {
  -webkit-animation-name: slideinup;
  animation-name: slideinup;
}

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

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

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

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

.slideoutdown {
  -webkit-animation-name: slideoutdown;
  animation-name: slideoutdown;
}

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

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

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

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

.slideoutleft {
  -webkit-animation-name: slideoutleft;
  animation-name: slideoutleft;
}

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

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

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

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

.slideoutright {
  -webkit-animation-name: slideoutright;
  animation-name: slideoutright;
}

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

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

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

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

.slideoutup {
  -webkit-animation-name: slideoutup;
  animation-name: slideoutup;
}

.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.delay-1s {
  -webkit-animation-delay: 1s;
  animation-delay: 1s;
}

.animated.delay-2s {
  -webkit-animation-delay: 2s;
  animation-delay: 2s;
}

.animated.delay-3s {
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
}

.animated.delay-4s {
  -webkit-animation-delay: 4s;
  animation-delay: 4s;
}

.animated.delay-5s {
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
}

.animated.fast {
  -webkit-animation-duration: 800ms;
  animation-duration: 800ms;
}

.animated.faster {
  -webkit-animation-duration: 500ms;
  animation-duration: 500ms;
}

.animated.slow {
  -webkit-animation-duration: 2s;
  animation-duration: 2s;
}

.animated.slower {
  -webkit-animation-duration: 3s;
  animation-duration: 3s;
}

@media (print), (prefers-reduced-motion: reduce) {
  .animated {
    -webkit-animation-duration: 1ms !important;
    animation-duration: 1ms !important;
    -webkit-transition-duration: 1ms !important;
    transition-duration: 1ms !important;
    -webkit-animation-iteration-count: 1 !important;
    animation-iteration-count: 1 !important;
  }
}
/*  20200204 新增动画   */
/*旋转2d*/
@keyframes rotation2d{
  0%{transform:rotate(0deg);}
  25%{transform:rotate(90deg);}
  50%{transform:rotate(180deg);}
  75%{transform:rotate(270deg);}
  100%{transform:rotate(360deg);}
}
@-webkit-keyframes rotation2d{
  0%{-webkit-transform:rotate(0deg);}
  25%{-webkit-transform:rotate(90deg);}
  50%{-webkit-transform:rotate(180deg);}
  75%{-webkit-transform:rotate(270deg);}
  100%{-webkit-transform:rotate(360deg);}
}
.rotation2d {
  -webkit-animation-name: rotation2d;
  animation-name: rotation2d;
}
/*闪烁*/
@keyframes light {
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}
@-webkit-keyframes light {
  0% {opacity:0;}
  50% {opacity:1;}
  100% {opacity:0;}
}
.light {
  -webkit-animation-name: light;
  animation-name: light;
}
/*从大到小*/
@-webkit-keyframes big2small {
  0%{-webkit-transform: scale(2);}
  50%{-webkit-transform: scale(1.5);}
}
@keyframes big2small {
  0%{transform: scale(2);}
  50%{transform: scale(1.5);}
}
.big2small {
  -webkit-animation-name: big2small;
  animation-name: big2small;
}
/*翻转淡出*/
@-webkit-keyframes whirlout {
  from {
    -webkit-transform: perspective(400px);
    opacity: 1;
    -webkit-transform:scale(1);
  }

  50% {
    -webkit-transform: perspective(400px) rotatey(90deg);
    opacity: 0.5;
  }

  to {
    -webkit-transform: perspective(400px) rotatey(180deg);
    -webkit-transform:scale(0);
    opacity: 0;
  }
}
@keyframes whirlout {
  from {
    transform: perspective(400px);
    transform:scale(1);
    opacity: 1;
  }
  50% {
    transform: perspective(400px) rotatey(90deg);
    opacity: 0.5;
  }
  to {
    transform: perspective(400px) rotatey(180deg);
    transform:scale(0);
    opacity: 0;
  }
}
.whirlout {
  -webkit-animation-name: whirlout;
  animation-name: whirlout;
}
/*收缩淡出*/
@-webkit-keyframes shrinkout {
  0%{-webkit-transform: scale(1);opacity: 1;}
  25%{-webkit-transform: scale(0.75);opacity: 0.5;}
  50%{-webkit-transform: scale(0.5);opacity: 0.25;}
  75%{-webkit-transform: scale(0.25);opacity: 0.1;}
  100%{-webkit-transform: scale(0);opacity: 0;}
}
@keyframes shrinkout {
  0%{transform: scale(1);opacity: 1;}
  25%{transform: scale(0.75);opacity: 0.5;}
  50%{transform: scale(0.5);opacity: 0.25;}
  75%{transform: scale(0.25);opacity: 0.1;}
  100%{transform: scale(0);opacity: 0;}
}
.shrinkout {
  -webkit-animation-name: shrinkout;
  animation-name: shrinkout;
}
/*放大淡出*/
@-webkit-keyframes expandout {
  50%{-webkit-transform: scale(1.5);opacity: 0.5;}
  100%{-webkit-transform: scale(1.8);opacity: 0;}
}
@keyframes expandout {
  50%{transform: scale(1.5);opacity: 0.5;}
  100%{transform: scale(1.8);opacity: 0;}
}
.expandout {
  -webkit-animation-name: expandout;
  animation-name: expandout;
}
/*放大淡出*/
@-webkit-keyframes expandout {
  50%{-webkit-transform: scale(1.5);opacity: 0.5;}
  100%{-webkit-transform: scale(1.8);opacity: 0;}
}
@keyframes expandout {
  50%{transform: scale(1.5);opacity: 0.5;}
  100%{transform: scale(1.8);opacity: 0;}
}
.expandout {
  -webkit-animation-name: expandout;
  animation-name: expandout;
}
/*从上透视淡出*/
@-webkit-keyframes perspectiveupout{
  0%{-webkit-transform-origin:0 100%;-webkit-transform:perspective(800px) rotatex(0deg);opacity: 1;}
  100%{-webkit-transform-origin:0 100%;-webkit-transform:perspective(800px) rotatex(-180deg);opacity: 0}
}
@keyframes perspectiveupout {
  0%{transform-origin:0 100%;transform:perspective(800px) rotatex(0deg);opacity: 1;}
  100%{transform-origin:0 100%;transform:perspective(800px) rotatex(-180deg);opacity: 0;}
}
.perspectiveupout {
  -webkit-animation-name: perspectiveupout;
  animation-name: perspectiveupout;
}
/*从下透视淡出*/
@-webkit-keyframes perspectivedownout{
  0%{-webkit-transform-origin:0 0;-webkit-transform:perspective(800px) rotatex(0deg);opacity: 1;}
  100%{-webkit-transform-origin:0 0;-webkit-transform:perspective(800px) rotatex(180deg);opacity: 0;}
}
@keyframes perspectivedownout{
  0%{transform-origin:0 0;transform:perspective(800px) rotatex(0deg);opacity: 1;}
  100%{transform-origin:0 0;transform:perspective(800px) rotatex(180deg);opacity: 0;}
}
.perspectivedownout {
  -webkit-animation-name: perspectivedownout;
  animation-name: perspectivedownout;
}
/*从左透视淡出*/
@-webkit-keyframes perspectiveleftout{
  0%{-webkit-transform-origin:0 0;-webkit-transform:perspective(800px) rotatey(0deg);opacity: 1;}
  100%{-webkit-transform-origin:0 0;-webkit-transform:perspective(800px) rotatey(-180deg);opacity: 0;}
}
@keyframes perspectiveleftout{
  0%{transform-origin:0 0;transform:perspective(800px) rotatey(0deg);opacity: 1;}
  100%{transform-origin:0 0;transform:perspective(800px) rotatey(-180deg);opacity: 0;}
}
.perspectiveleftout {
  -webkit-animation-name: perspectiveleftout;
  animation-name: perspectiveleftout;
}
/*从右透视淡出*/
@-webkit-keyframes perspectiverightout{
  0%{-webkit-transform-origin:100% 0;-webkit-transform:perspective(800px) rotatey(0deg);}
  100%{-webkit-transform-origin:100% 0;-webkit-transform:perspective(800px) rotatey(180deg);}
}
@keyframes perspectiverightout{
  0%{transform-origin:100% 0;transform:perspective(800px) rotatey(0deg);}
  100%{transform-origin:100% 0;transform:perspective(800px) rotatey(180deg);}
}
.perspectiverightout {
  -webkit-animation-name: perspectiverightout;
  animation-name: perspectiverightout;
}
/*图片由大到小*/
@-webkit-keyframes imgbig2small {
  0%{-webkit-transform: scale(1);}
  50%{-webkit-transform: scale(0.25);}
  100%{-webkit-transform: scale(1);}
}
@keyframes imgbig2small {
  0%{transform: scale(1);}
  50%{transform: scale(0.25);}
  100%{transform: scale(1);}
}
.imgbig2small {
  -webkit-animation-name: imgbig2small;
  animation-name: imgbig2small;
}
/*上移*/
@keyframes movetop {
  50%{transform: translatey(-30%);}
  100%{transform: translatey(0px)}
}
@-webkit-keyframes movetop{
  50%{-webkit-transform: translatey(-30%);}
  100%{-webkit-transform: translatey(0px)}
}
.movetop {
  -webkit-animation-name: movetop;
  animation-name: movetop;
}
/*下移*/
@keyframes movebottom {
  50%{transform: translatey(30%);}
  100%{transform: translatey(0px)}
}
@-webkit-keyframes movebottom{
  50%{-webkit-transform: translatey(30%);}
  100%{-webkit-transform: translatey(0px)}
}
.movebottom {
  -webkit-animation-name: movebottom;
  animation-name: movebottom;
}
/*左移*/
@keyframes moveleft {
  50%{transform: translatex(-30%);}
  100%{transform: translatex(0px)}
}
@-webkit-keyframes moveleft{
  50%{-webkit-transform: translatex(-30%);}
  100%{-webkit-transform: translatex(0px)}
}
.moveleft {
  -webkit-animation-name: moveleft;
  animation-name: moveleft;
}
/*右移*/
@keyframes moveright {
  50%{transform: translatex(30%);}
  100%{transform: translatex(0px)}
}
@-webkit-keyframes moveright{
  50%{-webkit-transform: translatex(30%);}
  100%{-webkit-transform: translatex(0px)}
}
.moveright {
  -webkit-animation-name: moveright;
  animation-name: moveright;
}
.hightlight {
  animation-name: hightlight;
  transform: scale(1.4);
}

@keyframes hightlight {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.4);
  }
}
/* animation sets */

/* move from / to  */

.pt-page-movetoleft {
	-webkit-animation: movetoleft .6s ease both;
	-moz-animation: movetoleft .6s ease both;
	animation: movetoleft .6s ease both;
}

.pt-page-movefromleft {
	-webkit-animation: movefromleft .6s ease both;
	-moz-animation: movefromleft .6s ease both;
	animation: movefromleft .6s ease both;
}

.pt-page-movetoright {
	-webkit-animation: movetoright .6s ease both;
	-moz-animation: movetoright .6s ease both;
	animation: movetoright .6s ease both;
}

.pt-page-movefromright {
	-webkit-animation: movefromright .6s ease both;
	-moz-animation: movefromright .6s ease both;
	animation: movefromright .6s ease both;
}

.pt-page-movetotop {
	-webkit-animation: movetotop .6s ease both;
	-moz-animation: movetotop .6s ease both;
	animation: movetotop .6s ease both;
}

.pt-page-movefromtop {
	-webkit-animation: movefromtop .6s ease both;
	-moz-animation: movefromtop .6s ease both;
	animation: movefromtop .6s ease both;
}

.pt-page-movetobottom {
	-webkit-animation: movetobottom .6s ease both;
	-moz-animation: movetobottom .6s ease both;
	animation: movetobottom .6s ease both;
}

.pt-page-movefrombottom {
	-webkit-animation: movefrombottom .6s ease both;
	-moz-animation: movefrombottom .6s ease both;
	animation: movefrombottom .6s ease both;
}

/* fade */

.pt-page-fade {
	-webkit-animation: fade .7s ease both;
	-moz-animation: fade .7s ease both;
	animation: fade .7s ease both;
}

/* move from / to and fade */

.pt-page-movetoleftfade {
	-webkit-animation: movetoleftfade .7s ease both;
	-moz-animation: movetoleftfade .7s ease both;
	animation: movetoleftfade .7s ease both;
}

.pt-page-movefromleftfade {
	-webkit-animation: movefromleftfade .7s ease both;
	-moz-animation: movefromleftfade .7s ease both;
	animation: movefromleftfade .7s ease both;
}

.pt-page-movetorightfade {
	-webkit-animation: movetorightfade .7s ease both;
	-moz-animation: movetorightfade .7s ease both;
	animation: movetorightfade .7s ease both;
}

.pt-page-movefromrightfade {
	-webkit-animation: movefromrightfade .7s ease both;
	-moz-animation: movefromrightfade .7s ease both;
	animation: movefromrightfade .7s ease both;
}

.pt-page-movetotopfade {
	-webkit-animation: movetotopfade .7s ease both;
	-moz-animation: movetotopfade .7s ease both;
	animation: movetotopfade .7s ease both;
}

.pt-page-movefromtopfade {
	-webkit-animation: movefromtopfade .7s ease both;
	-moz-animation: movefromtopfade .7s ease both;
	animation: movefromtopfade .7s ease both;
}

.pt-page-movetobottomfade {
	-webkit-animation: movetobottomfade .7s ease both;
	-moz-animation: movetobottomfade .7s ease both;
	animation: movetobottomfade .7s ease both;
}

.pt-page-movefrombottomfade {
	-webkit-animation: movefrombottomfade .7s ease both;
	-moz-animation: movefrombottomfade .7s ease both;
	animation: movefrombottomfade .7s ease both;
}

/* move to with different easing */

.pt-page-movetolefteasing {
	-webkit-animation: movetoleft .7s ease-in-out both;
	-moz-animation: movetoleft .7s ease-in-out both;
	animation: movetoleft .7s ease-in-out both;
}
.pt-page-movetorighteasing {
	-webkit-animation: movetoright .7s ease-in-out both;
	-moz-animation: movetoright .7s ease-in-out both;
	animation: movetoright .7s ease-in-out both;
}
.pt-page-movetotopeasing {
	-webkit-animation: movetotop .7s ease-in-out both;
	-moz-animation: movetotop .7s ease-in-out both;
	animation: movetotop .7s ease-in-out both;
}
.pt-page-movetobottomeasing {
	-webkit-animation: movetobottom .7s ease-in-out both;
	-moz-animation: movetobottom .7s ease-in-out both;
	animation: movetobottom .7s ease-in-out both;
}

/********************************* keyframes **************************************/

/* move from / to  */

@-webkit-keyframes movetoleft {
	to { -webkit-transform: translatex(-100%); }
}
@-moz-keyframes movetoleft {
	to { -moz-transform: translatex(-100%); }
}
@keyframes movetoleft {
	to { transform: translatex(-100%); }
}

@-webkit-keyframes movefromleft {
	from { -webkit-transform: translatex(-100%); }
}
@-moz-keyframes movefromleft {
	from { -moz-transform: translatex(-100%); }
}
@keyframes movefromleft {
	from { transform: translatex(-100%); }
}

@-webkit-keyframes movetoright {
	to { -webkit-transform: translatex(100%); }
}
@-moz-keyframes movetoright {
	to { -moz-transform: translatex(100%); }
}
@keyframes movetoright {
	to { transform: translatex(100%); }
}

@-webkit-keyframes movefromright {
	from { -webkit-transform: translatex(100%); }
}
@-moz-keyframes movefromright {
	from { -moz-transform: translatex(100%); }
}
@keyframes movefromright {
	from { transform: translatex(100%); }
}

@-webkit-keyframes movetotop {
	to { -webkit-transform: translatey(-100%); }
}
@-moz-keyframes movetotop {
	to { -moz-transform: translatey(-100%); }
}
@keyframes movetotop {
	to { transform: translatey(-100%); }
}

@-webkit-keyframes movefromtop {
	from { -webkit-transform: translatey(-100%); }
}
@-moz-keyframes movefromtop {
	from { -moz-transform: translatey(-100%); }
}
@keyframes movefromtop {
	from { transform: translatey(-100%); }
}

@-webkit-keyframes movetobottom {
	to { -webkit-transform: translatey(100%); }
}
@-moz-keyframes movetobottom {
	to { -moz-transform: translatey(100%); }
}
@keyframes movetobottom {
	to { transform: translatey(100%); }
}

@-webkit-keyframes movefrombottom {
	from { -webkit-transform: translatey(100%); }
}
@-moz-keyframes movefrombottom {
	from { -moz-transform: translatey(100%); }
}
@keyframes movefrombottom {
	from { transform: translatey(100%); }
}

/* fade */

@-webkit-keyframes fade {
	to { opacity: 0.3; }
}
@-moz-keyframes fade {
	to { opacity: 0.3; }
}
@keyframes fade {
	to { opacity: 0.3; }
}

/* move from / to and fade */

@-webkit-keyframes movetoleftfade {
	to { opacity: 0.3; -webkit-transform: translatex(-100%); }
}
@-moz-keyframes movetoleftfade {
	to { opacity: 0.3; -moz-transform: translatex(-100%); }
}
@keyframes movetoleftfade {
	to { opacity: 0.3; transform: translatex(-100%); }
}

@-webkit-keyframes movefromleftfade {
	from { opacity: 0.3; -webkit-transform: translatex(-100%); }
}
@-moz-keyframes movefromleftfade {
	from { opacity: 0.3; -moz-transform: translatex(-100%); }
}
@keyframes movefromleftfade {
	from { opacity: 0.3; transform: translatex(-100%); }
}

@-webkit-keyframes movetorightfade {
	to { opacity: 0.3; -webkit-transform: translatex(100%); }
}
@-moz-keyframes movetorightfade {
	to { opacity: 0.3; -moz-transform: translatex(100%); }
}
@keyframes movetorightfade {
	to { opacity: 0.3; transform: translatex(100%); }
}

@-webkit-keyframes movefromrightfade {
	from { opacity: 0.3; -webkit-transform: translatex(100%); }
}
@-moz-keyframes movefromrightfade {
	from { opacity: 0.3; -moz-transform: translatex(100%); }
}
@keyframes movefromrightfade {
	from { opacity: 0.3; transform: translatex(100%); }
}

@-webkit-keyframes movetotopfade {
	to { opacity: 0.3; -webkit-transform: translatey(-100%); }
}
@-moz-keyframes movetotopfade {
	to { opacity: 0.3; -moz-transform: translatey(-100%); }
}
@keyframes movetotopfade {
	to { opacity: 0.3; transform: translatey(-100%); }
}

@-webkit-keyframes movefromtopfade {
	from { opacity: 0.3; -webkit-transform: translatey(-100%); }
}
@-moz-keyframes movefromtopfade {
	from { opacity: 0.3; -moz-transform: translatey(-100%); }
}
@keyframes movefromtopfade {
	from { opacity: 0.3; transform: translatey(-100%); }
}

@-webkit-keyframes movetobottomfade {
	to { opacity: 0.3; -webkit-transform: translatey(100%); }
}
@-moz-keyframes movetobottomfade {
	to { opacity: 0.3; -moz-transform: translatey(100%); }
}
@keyframes movetobottomfade {
	to { opacity: 0.3; transform: translatey(100%); }
}

@-webkit-keyframes movefrombottomfade {
	from { opacity: 0.3; -webkit-transform: translatey(100%); }
}
@-moz-keyframes movefrombottomfade {
	from { opacity: 0.3; -moz-transform: translatey(100%); }
}
@keyframes movefrombottomfade {
	from { opacity: 0.3; transform: translatey(100%); }
}

/* scale and fade */

.pt-page-scaledown {
	-webkit-animation: scaledown .7s ease both;
	-moz-animation: scaledown .7s ease both;
	animation: scaledown .7s ease both;
}

.pt-page-scaleup {
	-webkit-animation: scaleup .7s ease both;
	-moz-animation: scaleup .7s ease both;
	animation: scaleup .7s ease both;
}

.pt-page-scaleupdown {
	-webkit-animation: scaleupdown .5s ease both;
	-moz-animation: scaleupdown .5s ease both;
	animation: scaleupdown .5s ease both;
}

.pt-page-scaledownup {
	-webkit-animation: scaledownup .5s ease both;
	-moz-animation: scaledownup .5s ease both;
	animation: scaledownup .5s ease both;
}

.pt-page-scaledowncenter {
	-webkit-animation: scaledowncenter .4s ease-in both;
	-moz-animation: scaledowncenter .4s ease-in both;
	animation: scaledowncenter .4s ease-in both;
}

.pt-page-scaleupcenter {
	-webkit-animation: scaleupcenter .4s ease-out both;
	-moz-animation: scaleupcenter .4s ease-out both;
	animation: scaleupcenter .4s ease-out both;
}

/********************************* keyframes **************************************/

/* scale and fade */

@-webkit-keyframes scaledown {
	to { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaledown {
	to { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaledown {
	to { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes scaleup {
	from { opacity: 0; -webkit-transform: scale(.8); }
}
@-moz-keyframes scaleup {
	from { opacity: 0; -moz-transform: scale(.8); }
}
@keyframes scaleup {
	from { opacity: 0; transform: scale(.8); }
}

@-webkit-keyframes scaleupdown {
	from { opacity: 0; -webkit-transform: scale(1.2); }
}
@-moz-keyframes scaleupdown {
	from { opacity: 0; -moz-transform: scale(1.2); }
}
@keyframes scaleupdown {
	from { opacity: 0; transform: scale(1.2); }
}

@-webkit-keyframes scaledownup {
	to { opacity: 0; -webkit-transform: scale(1.2); }
}
@-moz-keyframes scaledownup {
	to { opacity: 0; -moz-transform: scale(1.2); }
}
@keyframes scaledownup {
	to { opacity: 0; transform: scale(1.2); }
}

@-webkit-keyframes scaledowncenter {
	to { opacity: 0; -webkit-transform: scale(.7); }
}
@-moz-keyframes scaledowncenter {
	to { opacity: 0; -moz-transform: scale(.7); }
}
@keyframes scaledowncenter {
	to { opacity: 0; transform: scale(.7); }
}

@-webkit-keyframes scaleupcenter {
	from { opacity: 0; -webkit-transform: scale(.7); }
}
@-moz-keyframes scaleupcenter {
	from { opacity: 0; -moz-transform: scale(.7); }
}
@keyframes scaleupcenter {
	from { opacity: 0; transform: scale(.7); }
}

/* rotate sides first and scale */

.pt-page-rotaterightsidefirst {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotaterightsidefirst .8s both ease-in;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotaterightsidefirst .8s both ease-in;
	transform-origin: 0% 50%;
	animation: rotaterightsidefirst .8s both ease-in;
}
.pt-page-rotateleftsidefirst {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotateleftsidefirst .8s both ease-in;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotateleftsidefirst .8s both ease-in;
	transform-origin: 100% 50%;
	animation: rotateleftsidefirst .8s both ease-in;
}
.pt-page-rotatetopsidefirst {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatetopsidefirst .8s both ease-in;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatetopsidefirst .8s both ease-in;
	transform-origin: 50% 100%;
	animation: rotatetopsidefirst .8s both ease-in;
}
.pt-page-rotatebottomsidefirst {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatebottomsidefirst .8s both ease-in;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatebottomsidefirst .8s both ease-in;
	transform-origin: 50% 0%;
	animation: rotatebottomsidefirst .8s both ease-in;
}

/* flip */

.pt-page-flipoutright {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipoutright .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipoutright .5s both ease-in;
	transform-origin: 50% 50%;
	animation: flipoutright .5s both ease-in;
}
.pt-page-flipinleft {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipinleft .5s both ease-out;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipinleft .5s both ease-out;
	transform-origin: 50% 50%;
	animation: flipinleft .5s both ease-out;
}
.pt-page-flipoutleft {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipoutleft .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipoutleft .5s both ease-in;
	transform-origin: 50% 50%;
	animation: flipoutleft .5s both ease-in;
}
.pt-page-flipinright {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipinright .5s both ease-out;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipinright .5s both ease-out;
	transform-origin: 50% 50%;
	animation: flipinright .5s both ease-out;
}
.pt-page-flipouttop {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipouttop .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipouttop .5s both ease-in;
	transform-origin: 50% 50%;
	animation: flipouttop .5s both ease-in;
}
.pt-page-flipinbottom {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipinbottom .5s both ease-out;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipinbottom .5s both ease-out;
	transform-origin: 50% 50%;
	animation: flipinbottom .5s both ease-out;
}
.pt-page-flipoutbottom {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipoutbottom .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipoutbottom .5s both ease-in;
	transform-origin: 50% 50%;
	animation: flipoutbottom .5s both ease-in;
}
.pt-page-flipintop {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: flipintop .5s both ease-out;
	-moz-transform-origin: 50% 50%;
	-moz-animation: flipintop .5s both ease-out;
	transform-origin: 50% 50%;
	animation: flipintop .5s both ease-out;
}

/* rotate fall */

.pt-page-rotatefall {
	-webkit-transform-origin: 0% 0%;
	-webkit-animation: rotatefall 1s both ease-in;
	-moz-transform-origin: 0% 0%;
	-moz-animation: rotatefall 1s both ease-in;
	transform-origin: 0% 0%;
	animation: rotatefall 1s both ease-in;
}

/* rotate newspaper */
.pt-page-rotateoutnewspaper {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: rotateoutnewspaper .5s both ease-in;
	-moz-transform-origin: 50% 50%;
	-moz-animation: rotateoutnewspaper .5s both ease-in;
	transform-origin: 50% 50%;
	animation: rotateoutnewspaper .5s both ease-in;
}
.pt-page-rotateinnewspaper {
	-webkit-transform-origin: 50% 50%;
	-webkit-animation: rotateinnewspaper .5s both ease-out;
	-moz-transform-origin: 50% 50%;
	-moz-animation: rotateinnewspaper .5s both ease-out;
	transform-origin: 50% 50%;
	animation: rotateinnewspaper .5s both ease-out;
}

/* push */
.pt-page-rotatepushleft {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatepushleft .8s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatepushleft .8s both ease;
	transform-origin: 0% 50%;
	animation: rotatepushleft .8s both ease;
}
.pt-page-rotatepushright {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatepushright .8s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatepushright .8s both ease;
	transform-origin: 100% 50%;
	animation: rotatepushright .8s both ease;
}
.pt-page-rotatepushtop {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatepushtop .8s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatepushtop .8s both ease;
	transform-origin: 50% 0%;
	animation: rotatepushtop .8s both ease;
}
.pt-page-rotatepushbottom {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatepushbottom .8s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatepushbottom .8s both ease;
	transform-origin: 50% 100%;
	animation: rotatepushbottom .8s both ease;
}

/* pull */
.pt-page-rotatepullright {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatepullright .5s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatepullright .5s both ease;
	transform-origin: 100% 50%;
	animation: rotatepullright .5s both ease;
}
.pt-page-rotatepullleft {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatepullleft .5s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatepullleft .5s both ease;
	transform-origin: 0% 50%;
	animation: rotatepullleft .5s both ease;
}
.pt-page-rotatepulltop {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatepulltop .5s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatepulltop .5s both ease;
	transform-origin: 50% 0%;
	animation: rotatepulltop .5s both ease;
}
.pt-page-rotatepullbottom {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatepullbottom .5s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatepullbottom .5s both ease;
	transform-origin: 50% 100%;
	animation: rotatepullbottom .5s both ease;
}

/* fold */
.pt-page-rotatefoldright {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatefoldright .7s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatefoldright .7s both ease;
	transform-origin: 0% 50%;
	animation: rotatefoldright .7s both ease;
}
.pt-page-rotatefoldleft {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatefoldleft .7s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatefoldleft .7s both ease;
	transform-origin: 100% 50%;
	animation: rotatefoldleft .7s both ease;
}
.pt-page-rotatefoldtop {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatefoldtop .7s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatefoldtop .7s both ease;
	transform-origin: 50% 100%;
	animation: rotatefoldtop .7s both ease;
}
.pt-page-rotatefoldbottom {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatefoldbottom .7s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatefoldbottom .7s both ease;
	transform-origin: 50% 0%;
	animation: rotatefoldbottom .7s both ease;
}

/* unfold */
.pt-page-rotateunfoldleft {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotateunfoldleft .7s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotateunfoldleft .7s both ease;
	transform-origin: 100% 50%;
	animation: rotateunfoldleft .7s both ease;
}
.pt-page-rotateunfoldright {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotateunfoldright .7s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotateunfoldright .7s both ease;
	transform-origin: 0% 50%;
	animation: rotateunfoldright .7s both ease;
}
.pt-page-rotateunfoldtop {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotateunfoldtop .7s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotateunfoldtop .7s both ease;
	transform-origin: 50% 100%;
	animation: rotateunfoldtop .7s both ease;
}
.pt-page-rotateunfoldbottom {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotateunfoldbottom .7s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotateunfoldbottom .7s both ease;
	transform-origin: 50% 0%;
	animation: rotateunfoldbottom .7s both ease;
}

/* room walls */
.pt-page-rotateroomleftout {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotateroomleftout .8s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotateroomleftout .8s both ease;
	transform-origin: 100% 50%;
	animation: rotateroomleftout .8s both ease;
}
.pt-page-rotateroomleftin {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotateroomleftin .8s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotateroomleftin .8s both ease;
	transform-origin: 0% 50%;
	animation: rotateroomleftin .8s both ease;
}
.pt-page-rotateroomrightout {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotateroomrightout .8s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotateroomrightout .8s both ease;
	transform-origin: 0% 50%;
	animation: rotateroomrightout .8s both ease;
}
.pt-page-rotateroomrightin {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotateroomrightin .8s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotateroomrightin .8s both ease;
	transform-origin: 100% 50%;
	animation: rotateroomrightin .8s both ease;
}
.pt-page-rotateroomtopout {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotateroomtopout .8s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotateroomtopout .8s both ease;
	transform-origin: 50% 100%;
	animation: rotateroomtopout .8s both ease;
}
.pt-page-rotateroomtopin {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotateroomtopin .8s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotateroomtopin .8s both ease;
	transform-origin: 50% 0%;
	animation: rotateroomtopin .8s both ease;
}
.pt-page-rotateroombottomout {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotateroombottomout .8s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotateroombottomout .8s both ease;
	transform-origin: 50% 0%;
	animation: rotateroombottomout .8s both ease;
}
.pt-page-rotateroombottomin {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotateroombottomin .8s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotateroombottomin .8s both ease;
	transform-origin: 50% 100%;
	animation: rotateroombottomin .8s both ease;
}

/* cube */
.pt-page-rotatecubeleftout {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatecubeleftout .6s both ease-in;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatecubeleftout .6s both ease-in;
	transform-origin: 100% 50%;
	animation: rotatecubeleftout .6s both ease-in;
}
.pt-page-rotatecubeleftin {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatecubeleftin .6s both ease-in;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatecubeleftin .6s both ease-in;
	transform-origin: 0% 50%;
	animation: rotatecubeleftin .6s both ease-in;
}
.pt-page-rotatecuberightout {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatecuberightout .6s both ease-in;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatecuberightout .6s both ease-in;
	transform-origin: 0% 50%;
	animation: rotatecuberightout .6s both ease-in;
}
.pt-page-rotatecuberightin {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatecuberightin .6s both ease-in;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatecuberightin .6s both ease-in;
	transform-origin: 100% 50%;
	animation: rotatecuberightin .6s both ease-in;
}
.pt-page-rotatecubetopout {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatecubetopout .6s both ease-in;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatecubetopout .6s both ease-in;
	transform-origin: 50% 100%;
	animation: rotatecubetopout .6s both ease-in;
}
.pt-page-rotatecubetopin {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatecubetopin .6s both ease-in;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatecubetopin .6s both ease-in;
	transform-origin: 50% 0%;
	animation: rotatecubetopin .6s both ease-in;
}
.pt-page-rotatecubebottomout {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatecubebottomout .6s both ease-in;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatecubebottomout .6s both ease-in;
	transform-origin: 50% 0%;
	animation: rotatecubebottomout .6s both ease-in;
}
.pt-page-rotatecubebottomin {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatecubebottomin .6s both ease-in;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatecubebottomin .6s both ease-in;
	transform-origin: 50% 100%;
	animation: rotatecubebottomin .6s both ease-in;
}

/* carousel */
.pt-page-rotatecarouselleftout {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatecarouselleftout .8s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatecarouselleftout .8s both ease;
	transform-origin: 100% 50%;
	animation: rotatecarouselleftout .8s both ease;
}
.pt-page-rotatecarouselleftin {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatecarouselleftin .8s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatecarouselleftin .8s both ease;
	transform-origin: 0% 50%;
	animation: rotatecarouselleftin .8s both ease;
}
.pt-page-rotatecarouselrightout {
	-webkit-transform-origin: 0% 50%;
	-webkit-animation: rotatecarouselrightout .8s both ease;
	-moz-transform-origin: 0% 50%;
	-moz-animation: rotatecarouselrightout .8s both ease;
	transform-origin: 0% 50%;
	animation: rotatecarouselrightout .8s both ease;
}
.pt-page-rotatecarouselrightin {
	-webkit-transform-origin: 100% 50%;
	-webkit-animation: rotatecarouselrightin .8s both ease;
	-moz-transform-origin: 100% 50%;
	-moz-animation: rotatecarouselrightin .8s both ease;
	transform-origin: 100% 50%;
	animation: rotatecarouselrightin .8s both ease;
}
.pt-page-rotatecarouseltopout {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatecarouseltopout .8s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatecarouseltopout .8s both ease;
	transform-origin: 50% 100%;
	animation: rotatecarouseltopout .8s both ease;
}
.pt-page-rotatecarouseltopin {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatecarouseltopin .8s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatecarouseltopin .8s both ease;
	transform-origin: 50% 0%;
	animation: rotatecarouseltopin .8s both ease;
}
.pt-page-rotatecarouselbottomout {
	-webkit-transform-origin: 50% 0%;
	-webkit-animation: rotatecarouselbottomout .8s both ease;
	-moz-transform-origin: 50% 0%;
	-moz-animation: rotatecarouselbottomout .8s both ease;
	transform-origin: 50% 0%;
	animation: rotatecarouselbottomout .8s both ease;
}
.pt-page-rotatecarouselbottomin {
	-webkit-transform-origin: 50% 100%;
	-webkit-animation: rotatecarouselbottomin .8s both ease;
	-moz-transform-origin: 50% 100%;
	-moz-animation: rotatecarouselbottomin .8s both ease;
	transform-origin: 50% 100%;
	animation: rotatecarouselbottomin .8s both ease;
}

/* sides */
.pt-page-rotatesidesout {
	-webkit-transform-origin: -50% 50%;
	-webkit-animation: rotatesidesout .5s both ease-in;
	-moz-transform-origin: -50% 50%;
	-moz-animation: rotatesidesout .5s both ease-in;
	transform-origin: -50% 50%;
	animation: rotatesidesout .5s both ease-in;
}
.pt-page-rotatesidesin {
	-webkit-transform-origin: 150% 50%;
	-webkit-animation: rotatesidesin .5s both ease-out;
	-moz-transform-origin: 150% 50%;
	-moz-animation: rotatesidesin .5s both ease-out;
	transform-origin: 150% 50%;
	animation: rotatesidesin .5s both ease-out;
}

/* slide */
.pt-page-rotateslideout {
	-webkit-animation: rotateslideout 1s both ease;
	-moz-animation: rotateslideout 1s both ease;
	animation: rotateslideout 1s both ease;
}
.pt-page-rotateslidein {
	-webkit-animation: rotateslidein 1s both ease;
	-moz-animation: rotateslidein 1s both ease;
	animation: rotateslidein 1s both ease;
}

/********************************* keyframes **************************************/

/* rotate sides first and scale */

@-webkit-keyframes rotaterightsidefirst {
	40% { -webkit-transform: rotatey(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@-moz-keyframes rotaterightsidefirst {
	40% { -moz-transform: rotatey(15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@keyframes rotaterightsidefirst {
	40% { transform: rotatey(15deg); opacity: .8; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translatez(-200px); opacity:0; }
}

@-webkit-keyframes rotateleftsidefirst {
	40% { -webkit-transform: rotatey(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@-moz-keyframes rotateleftsidefirst {
	40% { -moz-transform: rotatey(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@keyframes rotateleftsidefirst {
	40% { transform: rotatey(-15deg); opacity: .8; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translatez(-200px); opacity:0; }
}

@-webkit-keyframes rotatetopsidefirst {
	40% { -webkit-transform: rotatex(15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@-moz-keyframes rotatetopsidefirst {
	40% { -moz-transform: rotatex(15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@keyframes rotatetopsidefirst {
	40% { transform: rotatex(15deg); opacity: .8; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translatez(-200px); opacity:0; }
}

@-webkit-keyframes rotatebottomsidefirst {
	40% { -webkit-transform: rotatex(-15deg); opacity: .8; -webkit-animation-timing-function: ease-out; }
	100% { -webkit-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@-moz-keyframes rotatebottomsidefirst {
	40% { -moz-transform: rotatex(-15deg); opacity: .8; -moz-animation-timing-function: ease-out; }
	100% { -moz-transform: scale(0.8) translatez(-200px); opacity:0; }
}
@keyframes rotatebottomsidefirst {
	40% { transform: rotatex(-15deg); opacity: .8; animation-timing-function: ease-out; }
	100% { transform: scale(0.8) translatez(-200px); opacity:0; }
}

/* flip */

@-webkit-keyframes flipoutright {
	to { -webkit-transform: translatez(-1000px) rotatey(90deg); opacity: 0.2; }
}
@-moz-keyframes flipoutright {
	to { -moz-transform: translatez(-1000px) rotatey(90deg); opacity: 0.2; }
}
@keyframes flipoutright {
	to { transform: translatez(-1000px) rotatey(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipinleft {
	from { -webkit-transform: translatez(-1000px) rotatey(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipinleft {
	from { -moz-transform: translatez(-1000px) rotatey(-90deg); opacity: 0.2; }
}
@keyframes flipinleft {
	from { transform: translatez(-1000px) rotatey(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipoutleft {
	to { -webkit-transform: translatez(-1000px) rotatey(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipoutleft {
	to { -moz-transform: translatez(-1000px) rotatey(-90deg); opacity: 0.2; }
}
@keyframes flipoutleft {
	to { transform: translatez(-1000px) rotatey(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipinright {
	from { -webkit-transform: translatez(-1000px) rotatey(90deg); opacity: 0.2; }
}
@-moz-keyframes flipinright {
	from { -moz-transform: translatez(-1000px) rotatey(90deg); opacity: 0.2; }
}
@keyframes flipinright {
	from { transform: translatez(-1000px) rotatey(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipouttop {
	to { -webkit-transform: translatez(-1000px) rotatex(90deg); opacity: 0.2; }
}
@-moz-keyframes flipouttop {
	to { -moz-transform: translatez(-1000px) rotatex(90deg); opacity: 0.2; }
}
@keyframes flipouttop {
	to { transform: translatez(-1000px) rotatex(90deg); opacity: 0.2; }
}

@-webkit-keyframes flipinbottom {
	from { -webkit-transform: translatez(-1000px) rotatex(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipinbottom {
	from { -moz-transform: translatez(-1000px) rotatex(-90deg); opacity: 0.2; }
}
@keyframes flipinbottom {
	from { transform: translatez(-1000px) rotatex(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipoutbottom {
	to { -webkit-transform: translatez(-1000px) rotatex(-90deg); opacity: 0.2; }
}
@-moz-keyframes flipoutbottom {
	to { -moz-transform: translatez(-1000px) rotatex(-90deg); opacity: 0.2; }
}
@keyframes flipoutbottom {
	to { transform: translatez(-1000px) rotatex(-90deg); opacity: 0.2; }
}

@-webkit-keyframes flipintop {
	from { -webkit-transform: translatez(-1000px) rotatex(90deg); opacity: 0.2; }
}
@-moz-keyframes flipintop {
	from { -moz-transform: translatez(-1000px) rotatex(90deg); opacity: 0.2; }
}
@keyframes flipintop {
	from { transform: translatez(-1000px) rotatex(90deg); opacity: 0.2; }
}

/* fall */

@-webkit-keyframes rotatefall {
	0% { -webkit-transform: rotatez(0deg); }
	20% { -webkit-transform: rotatez(10deg); -webkit-animation-timing-function: ease-out; }
	40% { -webkit-transform: rotatez(17deg); }
	60% { -webkit-transform: rotatez(16deg); }
	100% { -webkit-transform: translatey(100%) rotatez(17deg); }
}
@-moz-keyframes rotatefall {
	0% { -moz-transform: rotatez(0deg); }
	20% { -moz-transform: rotatez(10deg); -moz-animation-timing-function: ease-out; }
	40% { -moz-transform: rotatez(17deg); }
	60% { -moz-transform: rotatez(16deg); }
	100% { -moz-transform: translatey(100%) rotatez(17deg); }
}
@keyframes rotatefall {
	0% { transform: rotatez(0deg); }
	20% { transform: rotatez(10deg); animation-timing-function: ease-out; }
	40% { transform: rotatez(17deg); }
	60% { transform: rotatez(16deg); }
	100% { transform: translatey(100%) rotatez(17deg); }
}

/* newspaper */

@-webkit-keyframes rotateoutnewspaper {
	to { -webkit-transform: translatez(-3000px) rotatez(360deg); opacity: 0; }
}
@-moz-keyframes rotateoutnewspaper {
	to { -moz-transform: translatez(-3000px) rotatez(360deg); opacity: 0; }
}
@keyframes rotateoutnewspaper {
	to { transform: translatez(-3000px) rotatez(360deg); opacity: 0; }
}

@-webkit-keyframes rotateinnewspaper {
	from { -webkit-transform: translatez(-3000px) rotatez(-360deg); opacity: 0; }
}
@-moz-keyframes rotateinnewspaper {
	from { -moz-transform: translatez(-3000px) rotatez(-360deg); opacity: 0; }
}
@keyframes rotateinnewspaper {
	from { transform: translatez(-3000px) rotatez(-360deg); opacity: 0; }
}

/* push */

@-webkit-keyframes rotatepushleft {
	to { opacity: 0; -webkit-transform: rotatey(90deg); }
}
@-moz-keyframes rotatepushleft {
	to { opacity: 0; -moz-transform: rotatey(90deg); }
}
@keyframes rotatepushleft {
	to { opacity: 0; transform: rotatey(90deg); }
}

@-webkit-keyframes rotatepushright {
	to { opacity: 0; -webkit-transform: rotatey(-90deg); }
}
@-moz-keyframes rotatepushright {
	to { opacity: 0; -moz-transform: rotatey(-90deg); }
}
@keyframes rotatepushright {
	to { opacity: 0; transform: rotatey(-90deg); }
}

@-webkit-keyframes rotatepushtop {
	to { opacity: 0; -webkit-transform: rotatex(-90deg); }
}
@-moz-keyframes rotatepushtop {
	to { opacity: 0; -moz-transform: rotatex(-90deg); }
}
@keyframes rotatepushtop {
	to { opacity: 0; transform: rotatex(-90deg); }
}

@-webkit-keyframes rotatepushbottom {
	to { opacity: 0; -webkit-transform: rotatex(90deg); }
}
@-moz-keyframes rotatepushbottom {
	to { opacity: 0; -moz-transform: rotatex(90deg); }
}
@keyframes rotatepushbottom {
	to { opacity: 0; transform: rotatex(90deg); }
}

/* pull */

@-webkit-keyframes rotatepullright {
	from { opacity: 0; -webkit-transform: rotatey(-90deg); }
}
@-moz-keyframes rotatepullright {
	from { opacity: 0; -moz-transform: rotatey(-90deg); }
}
@keyframes rotatepullright {
	from { opacity: 0; transform: rotatey(-90deg); }
}

@-webkit-keyframes rotatepullleft {
	from { opacity: 0; -webkit-transform: rotatey(90deg); }
}
@-moz-keyframes rotatepullleft {
	from { opacity: 0; -moz-transform: rotatey(90deg); }
}
@keyframes rotatepullleft {
	from { opacity: 0; transform: rotatey(90deg); }
}

@-webkit-keyframes rotatepulltop {
	from { opacity: 0; -webkit-transform: rotatex(-90deg); }
}
@-moz-keyframes rotatepulltop {
	from { opacity: 0; -moz-transform: rotatex(-90deg); }
}
@keyframes rotatepulltop {
	from { opacity: 0; transform: rotatex(-90deg); }
}

@-webkit-keyframes rotatepullbottom {
	from { opacity: 0; -webkit-transform: rotatex(90deg); }
}
@-moz-keyframes rotatepullbottom {
	from { opacity: 0; -moz-transform: rotatex(90deg); }
}
@keyframes rotatepullbottom {
	from { opacity: 0; transform: rotatex(90deg); }
}

/* fold */

@-webkit-keyframes rotatefoldright {
	to { opacity: 0; -webkit-transform: translatex(100%) rotatey(90deg); }
}
@-moz-keyframes rotatefoldright {
	to { opacity: 0; -moz-transform: translatex(100%) rotatey(90deg); }
}
@keyframes rotatefoldright {
	to { opacity: 0; transform: translatex(100%) rotatey(90deg); }
}

@-webkit-keyframes rotatefoldleft {
	to { opacity: 0; -webkit-transform: translatex(-100%) rotatey(-90deg); }
}
@-moz-keyframes rotatefoldleft {
	to { opacity: 0; -moz-transform: translatex(-100%) rotatey(-90deg); }
}
@keyframes rotatefoldleft {
	to { opacity: 0; transform: translatex(-100%) rotatey(-90deg); }
}

@-webkit-keyframes rotatefoldtop {
	to { opacity: 0; -webkit-transform: translatey(-100%) rotatex(90deg); }
}
@-moz-keyframes rotatefoldtop {
	to { opacity: 0; -moz-transform: translatey(-100%) rotatex(90deg); }
}
@keyframes rotatefoldtop {
	to { opacity: 0; transform: translatey(-100%) rotatex(90deg); }
}

@-webkit-keyframes rotatefoldbottom {
	to { opacity: 0; -webkit-transform: translatey(100%) rotatex(-90deg); }
}
@-moz-keyframes rotatefoldbottom {
	to { opacity: 0; -moz-transform: translatey(100%) rotatex(-90deg); }
}
@keyframes rotatefoldbottom {
	to { opacity: 0; transform: translatey(100%) rotatex(-90deg); }
}

/* unfold */

@-webkit-keyframes rotateunfoldleft {
	from { opacity: 0; -webkit-transform: translatex(-100%) rotatey(-90deg); }
}
@-moz-keyframes rotateunfoldleft {
	from { opacity: 0; -moz-transform: translatex(-100%) rotatey(-90deg); }
}
@keyframes rotateunfoldleft {
	from { opacity: 0; transform: translatex(-100%) rotatey(-90deg); }
}

@-webkit-keyframes rotateunfoldright {
	from { opacity: 0; -webkit-transform: translatex(100%) rotatey(90deg); }
}
@-moz-keyframes rotateunfoldright {
	from { opacity: 0; -moz-transform: translatex(100%) rotatey(90deg); }
}
@keyframes rotateunfoldright {
	from { opacity: 0; transform: translatex(100%) rotatey(90deg); }
}

@-webkit-keyframes rotateunfoldtop {
	from { opacity: 0; -webkit-transform: translatey(-100%) rotatex(90deg); }
}
@-moz-keyframes rotateunfoldtop {
	from { opacity: 0; -moz-transform: translatey(-100%) rotatex(90deg); }
}
@keyframes rotateunfoldtop {
	from { opacity: 0; transform: translatey(-100%) rotatex(90deg); }
}

@-webkit-keyframes rotateunfoldbottom {
	from { opacity: 0; -webkit-transform: translatey(100%) rotatex(-90deg); }
}
@-moz-keyframes rotateunfoldbottom {
	from { opacity: 0; -moz-transform: translatey(100%) rotatex(-90deg); }
}
@keyframes rotateunfoldbottom {
	from { opacity: 0; transform: translatey(100%) rotatex(-90deg); }
}

/* room walls */

@-webkit-keyframes rotateroomleftout {
	to { opacity: .3; -webkit-transform: translatex(-100%) rotatey(90deg); }
}
@-moz-keyframes rotateroomleftout {
	to { opacity: .3; -moz-transform: translatex(-100%) rotatey(90deg); }
}
@keyframes rotateroomleftout {
	to { opacity: .3; transform: translatex(-100%) rotatey(90deg); }
}

@-webkit-keyframes rotateroomleftin {
	from { opacity: .3; -webkit-transform: translatex(100%) rotatey(-90deg); }
}
@-moz-keyframes rotateroomleftin {
	from { opacity: .3; -moz-transform: translatex(100%) rotatey(-90deg); }
}
@keyframes rotateroomleftin {
	from { opacity: .3; transform: translatex(100%) rotatey(-90deg); }
}

@-webkit-keyframes rotateroomrightout {
	to { opacity: .3; -webkit-transform: translatex(100%) rotatey(-90deg); }
}
@-moz-keyframes rotateroomrightout {
	to { opacity: .3; -moz-transform: translatex(100%) rotatey(-90deg); }
}
@keyframes rotateroomrightout {
	to { opacity: .3; transform: translatex(100%) rotatey(-90deg); }
}

@-webkit-keyframes rotateroomrightin {
	from { opacity: .3; -webkit-transform: translatex(-100%) rotatey(90deg); }
}
@-moz-keyframes rotateroomrightin {
	from { opacity: .3; -moz-transform: translatex(-100%) rotatey(90deg); }
}
@keyframes rotateroomrightin {
	from { opacity: .3; transform: translatex(-100%) rotatey(90deg); }
}

@-webkit-keyframes rotateroomtopout {
	to { opacity: .3; -webkit-transform: translatey(-100%) rotatex(-90deg); }
}
@-moz-keyframes rotateroomtopout {
	to { opacity: .3; -moz-transform: translatey(-100%) rotatex(-90deg); }
}
@keyframes rotateroomtopout {
	to { opacity: .3; transform: translatey(-100%) rotatex(-90deg); }
}

@-webkit-keyframes rotateroomtopin {
	from { opacity: .3; -webkit-transform: translatey(100%) rotatex(90deg); }
}
@-moz-keyframes rotateroomtopin {
	from { opacity: .3; -moz-transform: translatey(100%) rotatex(90deg); }
}
@keyframes rotateroomtopin {
	from { opacity: .3; transform: translatey(100%) rotatex(90deg); }
}

@-webkit-keyframes rotateroombottomout {
	to { opacity: .3; -webkit-transform: translatey(100%) rotatex(90deg); }
}
@-moz-keyframes rotateroombottomout {
	to { opacity: .3; -moz-transform: translatey(100%) rotatex(90deg); }
}
@keyframes rotateroombottomout {
	to { opacity: .3; transform: translatey(100%) rotatex(90deg); }
}

@-webkit-keyframes rotateroombottomin {
	from { opacity: .3; -webkit-transform: translatey(-100%) rotatex(-90deg); }
}
@-moz-keyframes rotateroombottomin {
	from { opacity: .3; -moz-transform: translatey(-100%) rotatex(-90deg); }
}
@keyframes rotateroombottomin {
	from { opacity: .3; transform: translatey(-100%) rotatex(-90deg); }
}

/* cube */

@-webkit-keyframes rotatecubeleftout {
	50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translatex(-50%) translatez(-200px) rotatey(-45deg); }
	100% { opacity: .3; -webkit-transform: translatex(-100%) rotatey(-90deg); }
}
@-moz-keyframes rotatecubeleftout {
	50% { -moz-animation-timing-function: ease-out;  -moz-transform: translatex(-50%) translatez(-200px) rotatey(-45deg); }
	100% { opacity: .3; -moz-transform: translatex(-100%) rotatey(-90deg); }
}
@keyframes rotatecubeleftout {
	50% { animation-timing-function: ease-out;  transform: translatex(-50%) translatez(-200px) rotatey(-45deg); }
	100% { opacity: .3; transform: translatex(-100%) rotatey(-90deg); }
}

@-webkit-keyframes rotatecubeleftin {
	0% { opacity: .3; -webkit-transform: translatex(100%) rotatey(90deg); }
	50% { -webkit-animation-timing-function: ease-out;  -webkit-transform: translatex(50%) translatez(-200px) rotatey(45deg); }
}
@-moz-keyframes rotatecubeleftin {
	0% { opacity: .3; -moz-transform: translatex(100%) rotatey(90deg); }
	50% { -moz-animation-timing-function: ease-out;  -moz-transform: translatex(50%) translatez(-200px) rotatey(45deg); }
}
@keyframes rotatecubeleftin {
	0% { opacity: .3; transform: translatex(100%) rotatey(90deg); }
	50% { animation-timing-function: ease-out;  transform: translatex(50%) translatez(-200px) rotatey(45deg); }
}

@-webkit-keyframes rotatecuberightout {
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translatex(50%) translatez(-200px) rotatey(45deg); }
	100% { opacity: .3; -webkit-transform: translatex(100%) rotatey(90deg); }
}
@-moz-keyframes rotatecuberightout {
	50% { -moz-animation-timing-function: ease-out; -moz-transform: translatex(50%) translatez(-200px) rotatey(45deg); }
	100% { opacity: .3; -moz-transform: translatex(100%) rotatey(90deg); }
}
@keyframes rotatecuberightout {
	50% { animation-timing-function: ease-out; transform: translatex(50%) translatez(-200px) rotatey(45deg); }
	100% { opacity: .3; transform: translatex(100%) rotatey(90deg); }
}

@-webkit-keyframes rotatecuberightin {
	0% { opacity: .3; -webkit-transform: translatex(-100%) rotatey(-90deg); }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translatex(-50%) translatez(-200px) rotatey(-45deg); }
}
@-moz-keyframes rotatecuberightin {
	0% { opacity: .3; -moz-transform: translatex(-100%) rotatey(-90deg); }
	50% { -moz-animation-timing-function: ease-out; -moz-transform: translatex(-50%) translatez(-200px) rotatey(-45deg); }
}
@keyframes rotatecuberightin {
	0% { opacity: .3; transform: translatex(-100%) rotatey(-90deg); }
	50% { animation-timing-function: ease-out; transform: translatex(-50%) translatez(-200px) rotatey(-45deg); }
}

@-webkit-keyframes rotatecubetopout {
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translatey(-50%) translatez(-200px) rotatex(45deg); }
	100% { opacity: .3; -webkit-transform: translatey(-100%) rotatex(90deg); }
}
@-moz-keyframes rotatecubetopout {
	50% { -moz-animation-timing-function: ease-out; -moz-transform: translatey(-50%) translatez(-200px) rotatex(45deg); }
	100% { opacity: .3; -moz-transform: translatey(-100%) rotatex(90deg); }
}
@keyframes rotatecubetopout {
	50% { animation-timing-function: ease-out; transform: translatey(-50%) translatez(-200px) rotatex(45deg); }
	100% { opacity: .3; transform: translatey(-100%) rotatex(90deg); }
}

@-webkit-keyframes rotatecubetopin {
	0% { opacity: .3; -webkit-transform: translatey(100%) rotatex(-90deg); }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translatey(50%) translatez(-200px) rotatex(-45deg); }
}
@-moz-keyframes rotatecubetopin {
	0% { opacity: .3; -moz-transform: translatey(100%) rotatex(-90deg); }
	50% { -moz-animation-timing-function: ease-out; -moz-transform: translatey(50%) translatez(-200px) rotatex(-45deg); }
}
@keyframes rotatecubetopin {
	0% { opacity: .3; transform: translatey(100%) rotatex(-90deg); }
	50% { animation-timing-function: ease-out; transform: translatey(50%) translatez(-200px) rotatex(-45deg); }
}

@-webkit-keyframes rotatecubebottomout {
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translatey(50%) translatez(-200px) rotatex(-45deg); }
	100% { opacity: .3; -webkit-transform: translatey(100%) rotatex(-90deg); }
}
@-moz-keyframes rotatecubebottomout {
	50% { -moz-animation-timing-function: ease-out; -moz-transform: translatey(50%) translatez(-200px) rotatex(-45deg); }
	100% { opacity: .3; -moz-transform: translatey(100%) rotatex(-90deg); }
}
@keyframes rotatecubebottomout {
	50% { animation-timing-function: ease-out; transform: translatey(50%) translatez(-200px) rotatex(-45deg); }
	100% { opacity: .3; transform: translatey(100%) rotatex(-90deg); }
}

@-webkit-keyframes rotatecubebottomin {
	0% { opacity: .3; -webkit-transform: translatey(-100%) rotatex(90deg); }
	50% { -webkit-animation-timing-function: ease-out; -webkit-transform: translatey(-50%) translatez(-200px) rotatex(45deg); }
}
@-moz-keyframes rotatecubebottomin {
	0% { opacity: .3; -moz-transform: translatey(-100%) rotatex(90deg); }
	50% { -moz-animation-timing-function: ease-out; -moz-transform: translatey(-50%) translatez(-200px) rotatex(45deg); }
}
@keyframes rotatecubebottomin {
	0% { opacity: .3; transform: translatey(-100%) rotatex(90deg); }
	50% { animation-timing-function: ease-out; transform: translatey(-50%) translatez(-200px) rotatex(45deg); }
}

/* carousel */

@-webkit-keyframes rotatecarouselleftout {
	to { opacity: .3; -webkit-transform: translatex(-150%) scale(.4) rotatey(-65deg); }
}
@-moz-keyframes rotatecarouselleftout {
	to { opacity: .3; -moz-transform: translatex(-150%) scale(.4) rotatey(-65deg); }
}
@keyframes rotatecarouselleftout {
	to { opacity: .3; transform: translatex(-150%) scale(.4) rotatey(-65deg); }
}

@-webkit-keyframes rotatecarouselleftin {
	from { opacity: .3; -webkit-transform: translatex(200%) scale(.4) rotatey(65deg); }
}
@-moz-keyframes rotatecarouselleftin {
	from { opacity: .3; -moz-transform: translatex(200%) scale(.4) rotatey(65deg); }
}
@keyframes rotatecarouselleftin {
	from { opacity: .3; transform: translatex(200%) scale(.4) rotatey(65deg); }
}

@-webkit-keyframes rotatecarouselrightout {
	to { opacity: .3; -webkit-transform: translatex(200%) scale(.4) rotatey(65deg); }
}
@-moz-keyframes rotatecarouselrightout {
	to { opacity: .3; -moz-transform: translatex(200%) scale(.4) rotatey(65deg); }
}
@keyframes rotatecarouselrightout {
	to { opacity: .3; transform: translatex(200%) scale(.4) rotatey(65deg); }
}

@-webkit-keyframes rotatecarouselrightin {
	from { opacity: .3; -webkit-transform: translatex(-200%) scale(.4) rotatey(-65deg); }
}
@-moz-keyframes rotatecarouselrightin {
	from { opacity: .3; -moz-transform: translatex(-200%) scale(.4) rotatey(-65deg); }
}
@keyframes rotatecarouselrightin {
	from { opacity: .3; transform: translatex(-200%) scale(.4) rotatey(-65deg); }
}

@-webkit-keyframes rotatecarouseltopout {
	to { opacity: .3; -webkit-transform: translatey(-200%) scale(.4) rotatex(65deg); }
}
@-moz-keyframes rotatecarouseltopout {
	to { opacity: .3; -moz-transform: translatey(-200%) scale(.4) rotatex(65deg); }
}
@keyframes rotatecarouseltopout {
	to { opacity: .3; transform: translatey(-200%) scale(.4) rotatex(65deg); }
}

@-webkit-keyframes rotatecarouseltopin {
	from { opacity: .3; -webkit-transform: translatey(200%) scale(.4) rotatex(-65deg); }
}
@-moz-keyframes rotatecarouseltopin {
	from { opacity: .3; -moz-transform: translatey(200%) scale(.4) rotatex(-65deg); }
}
@keyframes rotatecarouseltopin {
	from { opacity: .3; transform: translatey(200%) scale(.4) rotatex(-65deg); }
}

@-webkit-keyframes rotatecarouselbottomout {
	to { opacity: .3; -webkit-transform: translatey(200%) scale(.4) rotatex(-65deg); }
}
@-moz-keyframes rotatecarouselbottomout {
	to { opacity: .3; -moz-transform: translatey(200%) scale(.4) rotatex(-65deg); }
}
@keyframes rotatecarouselbottomout {
	to { opacity: .3; transform: translatey(200%) scale(.4) rotatex(-65deg); }
}

@-webkit-keyframes rotatecarouselbottomin {
	from { opacity: .3; -webkit-transform: translatey(-200%) scale(.4) rotatex(65deg); }
}
@-moz-keyframes rotatecarouselbottomin {
	from { opacity: .3; -moz-transform: translatey(-200%) scale(.4) rotatex(65deg); }
}
@keyframes rotatecarouselbottomin {
	from { opacity: .3; transform: translatey(-200%) scale(.4) rotatex(65deg); }
}

/* sides */

@-webkit-keyframes rotatesidesout {
	to { opacity: 0; -webkit-transform: translatez(-500px) rotatey(90deg); }
}
@-moz-keyframes rotatesidesout {
	to { opacity: 0; -moz-transform: translatez(-500px) rotatey(90deg); }
}
@keyframes rotatesidesout {
	to { opacity: 0; transform: translatez(-500px) rotatey(90deg); }
}

@-webkit-keyframes rotatesidesin {
	from { opacity: 0; -webkit-transform: translatez(-500px) rotatey(-90deg); }
}
@-moz-keyframes rotatesidesin {
	from { opacity: 0; -moz-transform: translatez(-500px) rotatey(-90deg); }
}
@keyframes rotatesidesin {
	from { opacity: 0; transform: translatez(-500px) rotatey(-90deg); }
}

/* slide */

@-webkit-keyframes rotateslideout {
	25% { opacity: .5; -webkit-transform: translatez(-500px); }
	75% { opacity: .5; -webkit-transform: translatez(-500px) translatex(-200%); }
	100% { opacity: .5; -webkit-transform: translatez(-500px) translatex(-200%); }
}
@-moz-keyframes rotateslideout {
	25% { opacity: .5; -moz-transform: translatez(-500px); }
	75% { opacity: .5; -moz-transform: translatez(-500px) translatex(-200%); }
	100% { opacity: .5; -moz-transform: translatez(-500px) translatex(-200%); }
}
@keyframes rotateslideout {
	25% { opacity: .5; transform: translatez(-500px); }
	75% { opacity: .5; transform: translatez(-500px) translatex(-200%); }
	100% { opacity: .5; transform: translatez(-500px) translatex(-200%); }
}

@-webkit-keyframes rotateslidein {
	0%, 25% { opacity: .5; -webkit-transform: translatez(-500px) translatex(200%); }
	75% { opacity: .5; -webkit-transform: translatez(-500px); }
	100% { opacity: 1; -webkit-transform: translatez(0) translatex(0); }
}
@-moz-keyframes rotateslidein {
	0%, 25% { opacity: .5; -moz-transform: translatez(-500px) translatex(200%); }
	75% { opacity: .5; -moz-transform: translatez(-500px); }
	100% { opacity: 1; -moz-transform: translatez(0) translatex(0); }
}
@keyframes rotateslidein {
	0%, 25% { opacity: .5; transform: translatez(-500px) translatex(200%); }
	75% { opacity: .5; transform: translatez(-500px); }
	100% { opacity: 1; transform: translatez(0) translatex(0); }
}

/* animation delay classes */

.pt-page-delay100 {
	-webkit-animation-delay: .1s;
	-moz-animation-delay: .1s;
	animation-delay: .1s;
}
.pt-page-delay180 {
	-webkit-animation-delay: .180s;
	-moz-animation-delay: .180s;
	animation-delay: .180s;
}
.pt-page-delay200 {
	-webkit-animation-delay: .2s;
	-moz-animation-delay: .2s;
	animation-delay: .2s;
}
.pt-page-delay300 {
	-webkit-animation-delay: .3s;
	-moz-animation-delay: .3s;
	animation-delay: .3s;
}
.pt-page-delay400 {
	-webkit-animation-delay: .4s;
	-moz-animation-delay: .4s;
	animation-delay: .4s;
}
.pt-page-delay500 {
	-webkit-animation-delay: .5s;
	-moz-animation-delay: .5s;
	animation-delay: .5s;
}
.pt-page-delay700 {
	-webkit-animation-delay: .7s;
	-moz-animation-delay: .7s;
	animation-delay: .7s;
}
.pt-page-delay1000 {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	animation-delay: 1s;
}