
.animate {
      -webkit-animation-duration: 0.6s;
      animation-duration: 0.6s;
      -webkit-animation-fill-mode: both;
      animation-fill-mode: both;

      -webkit-animation-duration: 0.8s;
      -moz-animation-duration: 0.8s;
      -o-animation-duration: 0.8s;
      animation-duration: 0.8s;
      -webkit-animation-fill-mode: both;
      -moz-animation-fill-mode: both;
      -o-animation-fill-mode: both;
      animation-fill-mode: both;
}

.animate--delay-2nd {
      transition-delay: 1s;
      -webkit-transition-delay: 1s;
      animation-delay:1s;
      -webkit-animation-delay:1s;
}

.animate--delay-3rd {
      transition-delay: 1.5s;
      -webkit-transition-delay: 1.5s;
      animation-delay:1.5s;
      -webkit-animation-delay:1.5s;
}

.animate--delay-4th {
      transition-delay: 2s;
      -webkit-transition-delay: 2s;
      animation-delay:2s;
      -webkit-animation-delay:2s;
}

.animate--delay-5th {
      transition-delay: 3s;
      -webkit-transition-delay: 3s;
      animation-delay:3s;
      -webkit-animation-delay:3s;
}

.animate--delay { }


.animate.infinite {
      -webkit-animation-iteration-count: infinite;
      animation-iteration-count: infinite;
}




/* Tada
------------------------------------ */
@-webkit-keyframes tada {
      0% {-webkit-transform: scale(1);}
      10%, 20% {-webkit-transform: scale(0.9) rotate(-3deg);}
      30%, 50%, 70%, 90% {-webkit-transform: scale(1.1) rotate(3deg);}
      40%, 60%, 80% {-webkit-transform: scale(1.1) rotate(-3deg);}
      100% {-webkit-transform: scale(1) rotate(0);}
}

@-moz-keyframes tada {
      0% {-moz-transform: scale(1);}
      10%, 20% {-moz-transform: scale(0.9) rotate(-3deg);}
      30%, 50%, 70%, 90% {-moz-transform: scale(1.1) rotate(3deg);}
      40%, 60%, 80% {-moz-transform: scale(1.1) rotate(-3deg);}
      100% {-moz-transform: scale(1) rotate(0);}
}

@-o-keyframes tada {
      0% {-o-transform: scale(1);}
      10%, 20% {-o-transform: scale(0.9) rotate(-3deg);}
      30%, 50%, 70%, 90% {-o-transform: scale(1.1) rotate(3deg);}
      40%, 60%, 80% {-o-transform: scale(1.1) rotate(-3deg);}
      100% {-o-transform: scale(1) rotate(0);}
}

@keyframes tada {
      0% {transform: scale(1);}
      10%, 20% {transform: scale(0.9) rotate(-3deg);}
      30%, 50%, 70%, 90% {transform: scale(1.1) rotate(3deg);}
      40%, 60%, 80% {transform: scale(1.1) rotate(-3deg);}
      100% {transform: scale(1) rotate(0);}
}

.animate--tada {
      -webkit-animation-name: tada;
      -moz-animation-name: tada;
      -o-animation-name: tada;
      animation-name: tada;
}

/* Shake
------------------------------------ */
@-webkit-keyframes shake {
      0%, 100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }

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

      20%, 40%, 60%, 80% {
            -webkit-transform: translateX(10px);
            transform: translateX(10px);
      }
}

@keyframes shake {
      0%, 100% {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }

      10%, 30%, 50%, 70%, 90% {
            -webkit-transform: translateX(-10px);
            -ms-transform: translateX(-10px);
            transform: translateX(-10px);
      }

      20%, 40%, 60%, 80% {
            -webkit-transform: translateX(10px);
            -ms-transform: translateX(10px);
            transform: translateX(10px);
      }
}

.animate--shake {


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





/* Fade in
------------------------------------ */

@-webkit-keyframes fadeIn {
      0% {
            opacity: 0;
      }

      100% {
            opacity: 1;
      }
}

@keyframes fadeIn {
      0% {
            opacity: 0;
      }

      100% {
            opacity: 1;
      }
}

.animate--fadeIn {
      -webkit-animation-name: fadeIn;
      animation-name: fadeIn;
}

@-webkit-keyframes fadeInDown {
      0% {
            opacity: 0;
            -webkit-transform: translateY(-20px);
            transform: translateY(-20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
      }
}

/* Fade in down
------------------------------------ */
@keyframes fadeInDown {
      0% {
            opacity: 0;
            -webkit-transform: translateY(-20px);
            -ms-transform: translateY(-20px);
            transform: translateY(-20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
      }
}

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



@-webkit-keyframes fadeInLeft {
      0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
            transform: translateX(-20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }
}

@keyframes fadeInLeft {
      0% {
            opacity: 0;
            -webkit-transform: translateX(-20px);
            -ms-transform: translateX(-20px);
            transform: translateX(-20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }
}

.animate--fadeInLeft {
      -webkit-animation-name: fadeInLeft;
      animation-name: fadeInLeft;
}

@-webkit-keyframes fadeInLeftBig {
      0% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }
}

@keyframes fadeInLeftBig {
      0% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
            -ms-transform: translateX(-2000px);
            transform: translateX(-2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }
}

.animate--fadeInLeftBig {
      -webkit-animation-name: fadeInLeftBig;
      animation-name: fadeInLeftBig;
}

@-webkit-keyframes fadeInRight {
      0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            transform: translateX(20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }
}

@keyframes fadeInRight {
      0% {
            opacity: 0;
            -webkit-transform: translateX(20px);
            -ms-transform: translateX(20px);
            transform: translateX(20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }
}

.animate--fadeInRight {
      -webkit-animation-name: fadeInRight;
      animation-name: fadeInRight;
}

@-webkit-keyframes fadeInRightBig {
      0% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
            transform: translateX(2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }
}

@keyframes fadeInRightBig {
      0% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
            -ms-transform: translateX(2000px);
            transform: translateX(2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }
}

.animate--fadeInRightBig {
      -webkit-animation-name: fadeInRightBig;
      animation-name: fadeInRightBig;
}

@-webkit-keyframes fadeInUp {
      0% {
            opacity: 0;
            -webkit-transform: translateY(20px);
            transform: translateY(20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
      }
}

@keyframes fadeInUp {
      0% {
            opacity: 0;
            -webkit-transform: translateY(20px);
            -ms-transform: translateY(20px);
            transform: translateY(20px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
      }
}

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

@-webkit-keyframes fadeInUpBig {
      0% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
            transform: translateY(2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
      }
}

@keyframes fadeInUpBig {
      0% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
            -ms-transform: translateY(2000px);
            transform: translateY(2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
      }
}

.animate--fadeInUpBig {
      -webkit-animation-name: fadeInUpBig;
      animation-name: fadeInUpBig;
}

@-webkit-keyframes fadeOut {
      0% {
            opacity: 1;
      }

      100% {
            opacity: 0;
      }
}

@keyframes fadeOut {
      0% {
            opacity: 1;
      }

      100% {
            opacity: 0;
      }
}

.animate--fadeOut {
      -webkit-animation-name: fadeOut;
      animation-name: fadeOut;
}




@-webkit-keyframes 3DShakeY {
      0% {
            -webkit-transform: perspective(400px) rotateY(90deg);
            transform: perspective(400px) rotateY(90deg);
      }

      40% {
            -webkit-transform: perspective(400px) rotateY(-10deg);
            transform: perspective(400px) rotateY(-10deg);
      }

      70% {
            -webkit-transform: perspective(400px) rotateY(10deg);
            transform: perspective(400px) rotateY(10deg);
      }

      100% {
            -webkit-transform: perspective(400px) rotateY(0deg);
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
      }
}

@keyframes 3DShakeY {
      0% {
            -webkit-transform: perspective(400px) rotateY(90deg);
            -ms-transform: perspective(400px) rotateY(90deg);
            transform: perspective(400px) rotateY(90deg);
            opacity: 0;
      }

      40% {
            -webkit-transform: perspective(400px) rotateY(-10deg);
            -ms-transform: perspective(400px) rotateY(-10deg);
            transform: perspective(400px) rotateY(-10deg);
      }

      70% {
            -webkit-transform: perspective(400px) rotateY(10deg);
            -ms-transform: perspective(400px) rotateY(10deg);
            transform: perspective(400px) rotateY(10deg);
      }

      100% {
            -webkit-transform: perspective(400px) rotateY(0deg);
            -ms-transform: perspective(400px) rotateY(0deg);
            transform: perspective(400px) rotateY(0deg);
            opacity: 1;
      }
}

.animate--3DShakeY {
      -webkit-backface-visibility: visible !important;
      -ms-backface-visibility: visible !important;
      backface-visibility: visible !important;
      -webkit-animation-name: 3DShakeY;
      animation-name: 3DShakeY;
}





@keyframes slideInDown {
      0% {
            opacity: 0;
            -webkit-transform: translateY(-2000px);
            -ms-transform: translateY(-2000px);
            transform: translateY(-2000px);
      }

      100% {
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
      }
}

.animate--slideInDown {
      -webkit-animation-name: slideInDown;
      animation-name: slideInDown;
}

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

      100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }
}

@keyframes slideInLeft {
      0% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
            -ms-transform: translateX(-2000px);
            transform: translateX(-2000px);
      }

      100% {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }
}

.animate--slideInLeft {
      -webkit-animation-name: slideInLeft;
      animation-name: slideInLeft;
}

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

      100% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }
}

@keyframes slideInRight {
      0% {
            opacity: 0;
            -webkit-transform: translateX(2000px);
            -ms-transform: translateX(2000px);
            transform: translateX(2000px);
      }

      100% {
            -webkit-transform: translateX(0);
            -ms-transform: translateX(0);
            transform: translateX(0);
      }
}

.animate--slideInRight {
      -webkit-animation-name: slideInRight;
      animation-name: slideInRight;
}

@-webkit-keyframes slideOutLeft {
      0% {
            -webkit-transform: translateX(0);
            transform: translateX(0);
      }

      100% {
            opacity: 0;
            -webkit-transform: translateX(-2000px);
            transform: translateX(-2000px);
      }
}


@-webkit-keyframes slideInUp {
      0% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
            transform: translateY(2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            transform: translateY(0);
      }
}

@keyframes slideInUp {
      0% {
            opacity: 0;
            -webkit-transform: translateY(2000px);
            -ms-transform: translateY(2000px);
            transform: translateY(2000px);
      }

      100% {
            opacity: 1;
            -webkit-transform: translateY(0);
            -ms-transform: translateY(0);
            transform: translateY(0);
      }
}

.animate--slideInUp {
      -webkit-animation-name: slideInUp;
      animation-name: slideInUp;
}

