/* ==========================================================================
   CSS3 animations for data-showtime events
   ========================================================================== */

/* Global animation properties */

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

/* ==========================================================================
   Entrances
   ========================================================================== */

/* Stamp */

@-webkit-keyframes stamp {
    0% {
        -webkit-transform: rotate(27deg) scale(2.3, 2.3) translateX(140px);
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: none;
        -webkit-opacity: 1;
    }
}
@keyframes stamp {
    0% {
        transform: rotate(27deg) scale(2.3, 2.3) translateX(140px);
        opacity: 0;
    }
    100% {
        transform: none;
        opacity: 1;
    }
}

.stamp {
    display: block;
    -webkit-animation-name: stamp;
            animation-name: stamp;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
}

/* Badge */

@-webkit-keyframes badge {
    0% {
        -webkit-transform: scale(3.5, 3.5);
        -webkit-opacity: 0;
    }
    100% {
        -webkit-transform: scale(1, 1);
        -webkit-opacity: 1;
    }
}
@keyframes badge {
    0% {
        transform: scale(3.5, 3.5);
        opacity: 0;
    }
    100% {
        transform: scale(1, 1);
        opacity: 1;
    }
}

.badge {
    display: block;
    -webkit-animation-name: badge;
            animation-name: badge;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
}

/* slideInLeft */

@-webkit-keyframes slideInLeft {
    0% {
        -webkit-transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInLeft {
    0% {
        transform: translateX(-50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slideInLeft {
    display: block;
    -webkit-animation-name: slideInLeft;
            animation-name: slideInLeft;
}

/* slideInRight */

@-webkit-keyframes slideInRight {
    0% {
        -webkit-transform: translateX(50px);
        opacity: 0;
    }
    100% {
        -webkit-transform: translateX(0);
        opacity: 1;
    }
}
@keyframes slideInRight {
    0% {
        transform: translateX(50px);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

.slideInRight {
    display: block;
    -webkit-animation-name: slideInRight;
            animation-name: slideInRight;
}

/* slideOutLeft */

@-webkit-keyframes slideOutLeft {
  0% {
      -webkit-transform: translateX(0);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateX(-50px);
      opacity: 0;
  }
}
@keyframes slideOutLeft {
  0% {
      transform: translateX(0);
      opacity: 1;
  }
  100% {
      transform: translateX(-50px);
      opacity: 0;
  }
}

.slideOutLeft {
  display: block;
  -webkit-animation-name: slideOutLeft;
          animation-name: slideOutLeft;
}

/* slideOutRight */

@-webkit-keyframes slideOutRight {
  0% {
      -webkit-transform: translateX(0);
      opacity: 1;
  }
  100% {
      -webkit-transform: translateX(50px);
      opacity: 0;
  }
}
@keyframes slideOutRight {
  0% {
      transform: translateX(0);
      opacity: 1;
  }
  100% {
      transform: translateX(50px);
      opacity: 0;
  }
}

.slideOutRight {
  display: block;
  -webkit-animation-name: slideOutRight;
          animation-name: slideOutRight;
}

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

/* fadeInUp */

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

/* fadeInDown */

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

/* fadeInDownSmall */

@-webkit-keyframes fadeInDownSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInDownSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, -20%, 0);
            transform: translate3d(0, -20%, 0);
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInDownSmall {
    -webkit-animation-name: fadeInDownSmall;
            animation-name: fadeInDownSmall;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
}

/* fadeInUpSmall */

@-webkit-keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes fadeInUpSmall {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0);
            transform: translate3d(0, 20%, 0);
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

.fadeInUpSmall {
    -webkit-animation-name: fadeInUpSmall;
            animation-name: fadeInUpSmall;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
}

/* FadeOutUpSmall */

@-webkit-keyframes fadeOutUpSmall {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

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

@keyframes fadeOutUpSmall {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

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

.fadeOutUpSmall {
    -webkit-animation-name: fadeOutUpSmall;
            animation-name: fadeOutUpSmall;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
}

/* FadeOutDownSmall */

@-webkit-keyframes fadeOutDownSmall {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

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

@keyframes fadeOutDownSmall {
  0% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
    -webkit-transition-timing-function: ease;
            transition-timing-function: ease;
  }

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

.fadeOutDownSmall {
    -webkit-animation-name: fadeOutDownSmall;
            animation-name: fadeOutDownSmall;
    -webkit-animation-duration: .3s;
            animation-duration: .3s;
}

/* bounceInLeft */

@-webkit-keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

@keyframes bounceInLeft {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }

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

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

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

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

  100% {
    -webkit-transform: none;
            transform: none;
  }
}

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

/* flipInX */

@-webkit-keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

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

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

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

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

@keyframes flipInX {
  0% {
    -webkit-transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
            transform: perspective(400px) rotate3d(1, 0, 0, 90deg);
    -webkit-transition-timing-function: ease-in;
            transition-timing-function: ease-in;
    opacity: 0;
  }

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

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

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

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

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

/* flipInYLeft */

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

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

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

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

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

/* flipInYRight */

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

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

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

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

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

/* rotateIn */

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

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

@keyframes rotateIn {
  0% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: rotate3d(0, 0, 1, -200deg) scale3d(2, 2, 2);
            transform: rotate3d(0, 0, 1, -200deg) scale3d(2, 2, 2);
    opacity: 0;
  }

  100% {
    -webkit-transform-origin: center;
            transform-origin: center;
    -webkit-transform: none;
            transform: none;
    opacity: 1;
  }
}

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

/* rollIn - originally authored by Nick Pettit - https://github.com/nickpettit/glide */

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

  100% {
    opacity: 1;
    -webkit-transform: none;
            transform: none;
  }
}

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

/* zoomIn */

@-webkit-keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

@keyframes zoomIn {
  0% {
    opacity: 0;
    -webkit-transform: scale3d(.3, .3, .3);
            transform: scale3d(.3, .3, .3);
  }

  50% {
    opacity: 1;
  }
}

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

/* inflate */

@-webkit-keyframes inflate {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
            transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
  }

  50% {
    opacity: 1;
  }
}

@keyframes inflate {
  0% {
    opacity: 0;
    -webkit-transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
            transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
  }

  50% {
    opacity: 1;
  }
}

.inflate {
  -webkit-animation-name: inflate;
          animation-name: inflate;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
}

/* deflate */

@-webkit-keyframes deflate {
  0% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
            transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

@keyframes deflate {
  0% {
    opacity: 1;
  }
  50% {
    -webkit-transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
            transform: translate3d(0, 20%, 0) scale3d(.8, .8, .8) perspective(1px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

.deflate {
  -webkit-animation-name: deflate;
          animation-name: deflate;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
}

/* drop */

@-webkit-keyframes drop {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes drop {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.drop {
  -webkit-animation-name: drop;
          animation-name: drop;
  -webkit-transform-origin: left top;
      -ms-transform-origin: left top;
          transform-origin: left top;
}

/* grow */

@-webkit-keyframes grow {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

@keyframes grow {
  0% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
  100% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
}

.grow {
  -webkit-animation-name: grow;
          animation-name: grow;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
}

/* shrink */

@-webkit-keyframes shrink {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}

@keyframes shrink {
  0% {
    -webkit-transform: scale(1, 1);
            transform: scale(1, 1);
  }
  100% {
    -webkit-transform: scale(1, 0);
            transform: scale(1, 0);
  }
}

.shrink {
  -webkit-animation-name: shrink;
          animation-name: shrink;
  -webkit-transform-origin: left bottom;
      -ms-transform-origin: left bottom;
          transform-origin: left bottom;
}


/***********************************************************************/
/* Attention Seekers
/***********************************************************************/

/* bounce */

@-webkit-keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0) perspective(1px);
            transform: translate3d(0,0,0) perspective(1px);
  }

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

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

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

@keyframes bounce {
  0%, 20%, 53%, 80%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
            transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    -webkit-transform: translate3d(0,0,0) perspective(1px);
            transform: translate3d(0,0,0) perspective(1px);
  }

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

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

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

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

/* pulse */

@-webkit-keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1) perspective(1px);
            transform: scale3d(1, 1, 1) perspective(1px);
  }

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

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

@keyframes pulse {
  0% {
    -webkit-transform: scale3d(1, 1, 1) perspective(1px);
            transform: scale3d(1, 1, 1) perspective(1px);
  }

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

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

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

/* rubberBand */

@-webkit-keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1) perspective(1px);
            transform: scale3d(1, 1, 1) perspective(1px);
  }

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

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

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

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

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

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


@keyframes rubberBand {
  0% {
    -webkit-transform: scale3d(1, 1, 1) perspective(1px);
            transform: scale3d(1, 1, 1) perspective(1px);
  }

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

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

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

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

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

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

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

@-webkit-keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes bounceIn {
    0%, 20%, 40%, 60%, 80%, 100% {
        -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
        transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    }
    0% {
        opacity: 0;
        -webkit-transform: scale3d(.3, .3, .3);
        transform: scale3d(.3, .3, .3);
    }
    20% {
        -webkit-transform: scale3d(1.1, 1.1, 1.1);
        transform: scale3d(1.1, 1.1, 1.1);
    }
    40% {
        -webkit-transform: scale3d(.9, .9, .9);
        transform: scale3d(.9, .9, .9);
    }
    60% {
        opacity: 1;
        -webkit-transform: scale3d(1.03, 1.03, 1.03);
        transform: scale3d(1.03, 1.03, 1.03);
    }
    80% {
        -webkit-transform: scale3d(.97, .97, .97);
        transform: scale3d(.97, .97, .97);
    }
    100% {
        opacity: 1;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
.bounceIn {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}