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

    0%, 40% {
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-transform: perspective(400px) rotateX(-20deg);
        -ms-transform: perspective(400px) rotateX(-20deg);
        -moz-transform: perspective(400px) rotateX(-20deg);
        -o-transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        -moz-transform: perspective(400px) rotateX(10deg);
        -o-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
        -webkit-transform: perspective(400px) rotateX(-5deg);
        -ms-transform: perspective(400px) rotateX(-5deg);
        -moz-transform: perspective(400px) rotateX(-5deg);
        -o-transform: perspective(400px) rotateX(-5deg);
    }

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

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

    0%, 40% {
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-transform: perspective(400px) rotateX(-20deg);
        -ms-transform: perspective(400px) rotateX(-20deg);
        -moz-transform: perspective(400px) rotateX(-20deg);
        -o-transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        -moz-transform: perspective(400px) rotateX(10deg);
        -o-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
        -webkit-transform: perspective(400px) rotateX(-5deg);
        -ms-transform: perspective(400px) rotateX(-5deg);
        -moz-transform: perspective(400px) rotateX(-5deg);
        -o-transform: perspective(400px) rotateX(-5deg);
    }

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

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

    0%, 40% {
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-transform: perspective(400px) rotateX(-20deg);
        -ms-transform: perspective(400px) rotateX(-20deg);
        -moz-transform: perspective(400px) rotateX(-20deg);
        -o-transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        -moz-transform: perspective(400px) rotateX(10deg);
        -o-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
        -webkit-transform: perspective(400px) rotateX(-5deg);
        -ms-transform: perspective(400px) rotateX(-5deg);
        -moz-transform: perspective(400px) rotateX(-5deg);
        -o-transform: perspective(400px) rotateX(-5deg);
    }

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

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

    0%, 40% {
        animation-timing-function: ease-in;
        -webkit-animation-timing-function: ease-in;
        -moz-animation-timing-function: ease-in;
        -o-animation-timing-function: ease-in;
    }

    40% {
        transform: perspective(400px) rotateX(-20deg);
        -webkit-transform: perspective(400px) rotateX(-20deg);
        -ms-transform: perspective(400px) rotateX(-20deg);
        -moz-transform: perspective(400px) rotateX(-20deg);
        -o-transform: perspective(400px) rotateX(-20deg);
    }

    60% {
        transform: perspective(400px) rotateX(10deg);
        -webkit-transform: perspective(400px) rotateX(10deg);
        -ms-transform: perspective(400px) rotateX(10deg);
        -moz-transform: perspective(400px) rotateX(10deg);
        -o-transform: perspective(400px) rotateX(10deg);
        opacity: 1;
    }

    80% {
        transform: perspective(400px) rotateX(-5deg);
        -webkit-transform: perspective(400px) rotateX(-5deg);
        -ms-transform: perspective(400px) rotateX(-5deg);
        -moz-transform: perspective(400px) rotateX(-5deg);
        -o-transform: perspective(400px) rotateX(-5deg);
    }

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

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

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