.animated {
opacity: 0;

-webkit-animation-duration: 1s;
   -moz-animation-duration: 1s;
     -o-animation-duration: 1s;
        animation-duration: 1s;

-webkit-animation-fill-mode: both;
   -moz-animation-fill-mode: both;
     -o-animation-fill-mode: both;
        animation-fill-mode: both;

}

.animated.hinge {
-webkit-animation-duration: 5s;
   -moz-animation-duration: 5s;
     -o-animation-duration: 5s;
        animation-duration: 5s;
}


/*===================================================================================*/
/*  flipInX                                                                          */
/*===================================================================================*/

    @-webkit-keyframes flipInX {
        0% {
            -webkit-transform: perspective(400px) rotateX(90deg);
            opacity: 0;
        }

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

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

        100% {
            -webkit-transform: perspective(400px) rotateX(0deg);
            opacity: 1;
        }
    }
    @-moz-keyframes flipInX {
        0% {
            -moz-transform: perspective(400px) rotateX(90deg);
            opacity: 0;
        }

        40% {
            -moz-transform: perspective(400px) rotateX(-10deg);
        }

        70% {
            -moz-transform: perspective(400px) rotateX(10deg);
        }

        100% {
            -moz-transform: perspective(400px) rotateX(0deg);
            opacity: 1;
        }
    }
    @-o-keyframes flipInX {
        0% {
            -o-transform: perspective(400px) rotateX(90deg);
            opacity: 0;
        }

        40% {
            -o-transform: perspective(400px) rotateX(-10deg);
        }

        70% {
            -o-transform: perspective(400px) rotateX(10deg);
        }

        100% {
            -o-transform: perspective(400px) rotateX(0deg);
            opacity: 1;
        }
    }
    @keyframes flipInX {
        0% {
            transform: perspective(400px) rotateX(90deg);
            opacity: 0;
        }

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

        70% {
            transform: perspective(400px) rotateX(10deg);
        }

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

    .animated.flipInX {
        opacity: 1;

        -webkit-backface-visibility: visible !important;
           -moz-backface-visibility: visible !important;
             -o-backface-visibility: visible !important;
                backface-visibility: visible !important;

        -webkit-animation-name: flipInX;
           -moz-animation-name: flipInX;
             -o-animation-name: flipInX;
                animation-name: flipInX;
    }



/*===================================================================================*/
/*  fadeIn                                                                           */
/*===================================================================================*/

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

    @-moz-keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

    @-o-keyframes fadeIn {
        0% {opacity: 0;}
        100% {opacity: 1;}
    }

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

    .animated.fadeIn {
        opacity: 1;

        -webkit-animation-name: fadeIn;
           -moz-animation-name: fadeIn;
             -o-animation-name: fadeIn;
                animation-name: fadeIn;
    }



/*===================================================================================*/
/*  fadeInUp                                                                         */
/*===================================================================================*/

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

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

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

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

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

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

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

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

    .animated.fadeInUp {
        opacity: 1;

        -webkit-animation-name: fadeInUp;
           -moz-animation-name: fadeInUp;
             -o-animation-name: fadeInUp;
                animation-name: fadeInUp;
    }



/*===================================================================================*/
/* fadeInDown                                                                        */
/*===================================================================================*/

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

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

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

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

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

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

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

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

    .animated.fadeInDown {
        opacity: 1;

        -webkit-animation-name: fadeInDown;
           -moz-animation-name: fadeInDown;
             -o-animation-name: fadeInDown;
                animation-name: fadeInDown;
    }



/*===================================================================================*/
/*  fadeInLeft                                                                       */
/*===================================================================================*/

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

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

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

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

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

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

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

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

    .animated.fadeInLeft {
        opacity: 1;

        -webkit-animation-name: fadeInLeft;
           -moz-animation-name: fadeInLeft;
             -o-animation-name: fadeInLeft;
                animation-name: fadeInLeft;
    }



/*===================================================================================*/
/*  fadeInRight                                                                      */
/*===================================================================================*/

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

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

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

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

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

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

    @keyframes fadeInRight {
        0% {
            opacity: 0;
            transform: translateX(100px);
        }

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

    .animated.fadeInRight {
        opacity: 1;

        -webkit-animation-name: fadeInRight;
           -moz-animation-name: fadeInRight;
             -o-animation-name: fadeInRight;
                animation-name: fadeInRight;
    }

/*===================================================================================*/
/*  bounceIn                                                                         */  
/*===================================================================================*/

    @-webkit-keyframes bounceIn {
        0% {
            opacity: 0;
            -webkit-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -webkit-transform: scale(1.05);
        }

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

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

    @-moz-keyframes bounceIn {
        0% {
            opacity: 0;
            -moz-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -moz-transform: scale(1.05);
        }

        70% {
            -moz-transform: scale(.9);
        }

        100% {
            -moz-transform: scale(1);
        }
    }

    @-o-keyframes bounceIn {
        0% {
            opacity: 0;
            -o-transform: scale(.3);
        }

        50% {
            opacity: 1;
            -o-transform: scale(1.05);
        }

        70% {
            -o-transform: scale(.9);
        }

        100% {
            -o-transform: scale(1);
        }
    }

    @keyframes bounceIn {
        0% {
            opacity: 0;
            transform: scale(.3);
        }

        50% {
            opacity: 1;
            transform: scale(1.05);
        }

        70% {
            transform: scale(.9);
        }

        100% {
            transform: scale(1);
        }
    }

    .animated.bounceIn {
        opacity: 1;

        -webkit-animation-name: bounceIn;
           -moz-animation-name: bounceIn;
             -o-animation-name: bounceIn;
                animation-name: bounceIn;
    }


/*===================================================================================*/
/*  bounceInLeft                                                                     */
/*===================================================================================*/

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

        60% {
            opacity: 1;
            -webkit-transform: translateX(30px);
        }

        80% {
            -webkit-transform: translateX(-10px);
        }

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

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

        60% {
            opacity: 1;
            -moz-transform: translateX(30px);
        }

        80% {
            -moz-transform: translateX(-10px);
        }

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

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

        60% {
            opacity: 1;
            -o-transform: translateX(30px);
        }

        80% {
            -o-transform: translateX(-10px);
        }

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

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

        60% {
            opacity: 1;
            transform: translateX(30px);
        }

        80% {
            transform: translateX(-10px);
        }

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

    .animated.bounceInLeft {
        opacity: 1;

        -webkit-animation-name: bounceInLeft;
           -moz-animation-name: bounceInLeft;
             -o-animation-name: bounceInLeft;
                animation-name: bounceInLeft;
    }



/*===================================================================================*/
/*  bounceInRight                                                                    */
/*===================================================================================*/

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

        60% {
            opacity: 1;
            -webkit-transform: translateX(-30px);
        }

        80% {
            -webkit-transform: translateX(10px);
        }

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

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

        60% {
            opacity: 1;
            -moz-transform: translateX(-30px);
        }

        80% {
            -moz-transform: translateX(10px);
        }

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

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

        60% {
            opacity: 1;
            -o-transform: translateX(-30px);
        }

        80% {
            -o-transform: translateX(10px);
        }

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

    @keyframes bounceInRight {
        0% {
            opacity: 0;
            transform: translateX(2000px);
        }

        60% {
            opacity: 1;
            transform: translateX(-30px);
        }

        80% {
            transform: translateX(10px);
        }

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

    .animated.bounceInRight {
        opacity: 1;

        -webkit-animation-name: bounceInRight;
           -moz-animation-name: bounceInRight;
             -o-animation-name: bounceInRight;
                animation-name: bounceInRight;
    }

/*===================================================================================*/
/*  lightSpeedLeft                                                                  */
/*===================================================================================*/

    @-webkit-keyframes lightSpeedLeft {
        0% { -webkit-transform: translateX(-100%) skewX(-30deg); opacity: 0; }
        60% { -webkit-transform: translateX(20%) skewX(30deg); opacity: 1; }
        80% { -webkit-transform: translateX(0%) skewX(-15deg); opacity: 1; }
        100% { -webkit-transform: translateX(0%) skewX(0deg); opacity: 1; }
    }

    @-moz-keyframes lightSpeedLeft {
        0% { -moz-transform: translateX(-100%) skewX(-30deg); opacity: 0; }
        60% { -moz-transform: translateX(20%) skewX(30deg); opacity: 1; }
        80% { -moz-transform: translateX(0%) skewX(-15deg); opacity: 1; }
        100% { -moz-transform: translateX(0%) skewX(0deg); opacity: 1; }
    }

    @-o-keyframes lightSpeedLeft {
        0% { -o-transform: translateX(-100%) skewX(-30deg); opacity: 0; }
        60% { -o-transform: translateX(20%) skewX(30deg); opacity: 1; }
        80% { -o-transform: translateX(0%) skewX(-15deg); opacity: 1; }
        100% { -o-transform: translateX(0%) skewX(0deg); opacity: 1; }
    }

    @keyframes lightSpeedLeft {
        0% { transform: translateX(-100%) skewX(-30deg); opacity: 0; }
        60% { transform: translateX(20%) skewX(30deg); opacity: 1; }
        80% { transform: translateX(0%) skewX(-15deg); opacity: 1; }
        100% { transform: translateX(0%) skewX(0deg); opacity: 1; }
    }

    .animated.lightSpeedLeft {
        opacity: 1;

        -webkit-animation-name: lightSpeedLeft;
           -moz-animation-name: lightSpeedLeft;
             -o-animation-name: lightSpeedLeft;
                animation-name: lightSpeedLeft;

        -webkit-animation-timing-function: ease-out;
           -moz-animation-timing-function: ease-out;
             -o-animation-timing-function: ease-out;
                animation-timing-function: ease-out;
    }

    .animated.lightSpeedLeft {
        opacity: 1;

        -webkit-animation-duration: 0.5s;
           -moz-animation-duration: 0.5s;
             -o-animation-duration: 0.5s;
                animation-duration: 0.5s;
    }