/*!

data-animate.css - http://www.sadiqevani.com

Based on the work of http://daneden.me/animate and by Nick Pettit - https://github.com/nickpettit/glide 

*/

/*
*
* Animation Property
*
*/

[data-animate] {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*
*
* Animation Delay
*
*/

[data-delay] {
    -webkit-animation-delay: 0s;
    animation-delay: 0s;
}

[data-delay="1ds"],
[data-animate~="1ds"] {
    -webkit-animation-delay: 1s;
    animation-delay: 1s;
}

[data-delay="2ds"],
[data-animate~="2ds"] {
    -webkit-animation-delay: 2s;
    animation-delay: 2s;
}

[data-delay="3ds"],
[data-animate~="3ds"] {
    -webkit-animation-delay: 3s;
    animation-delay: 3s;
}

[data-delay="4ds"],
[data-animate~="4ds"] {
    -webkit-animation-delay: 4s;
    animation-delay: 4s;
}

[data-delay="5ds"],
[data-animate~="5ds"] {
    -webkit-animation-delay: 5s;
    animation-delay: 5s;
}

[data-delay="6ds"],
[data-animate~="6ds"] {
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
}

[data-delay="7ds"],
[data-animate~="7ds"] {
    -webkit-animation-delay: 7s;
    animation-delay: 7s;
}

[data-delay="8ds"],
[data-animate~="8ds"] {
    -webkit-animation-delay: 8s;
    animation-delay: 8s;
}

[data-delay="9ds"],
[data-animate~="9ds"] {
    -webkit-animation-delay: 9s;
    animation-delay: 9s;
}

[data-delay="10ds"],
[data-animate~="10ds"] {
    -webkit-animation-delay: 10s;
    animation-delay: 10s;
}

/*
*
* Animation Direction
*
*/

[data-direction] {
    -webkit-animation-direction: normal;
    animation-direction: normal;
}

[data-direction~="reverse"],
[data-animate~="reverse"] {
    -webkit-animation-direction: reverse;
    animation-direction: reverse;
}

[data-direction~="alternate"],
[data-animate~="alternate"] {
    -webkit-animation-direction: alternate;
    animation-direction: alternate;
}

[data-direction~="alternate-reverse"],
[data-animate~="alternate-reverse"] {
    -webkit-animation-direction: alternate-reverse;
    animation-direction: alternate-reverse;
}

/*
*
* Animation Duration
*
*/

[data-duration],
[data-animate] {
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
}

[data-duration="2s"],
[data-animate~="2s"] {
    -webkit-animation-duration: 2s;
    animation-duration: 2s;
}

[data-duration="3s"],
[data-animate~="3s"] {
    -webkit-animation-duration: 3s;
    animation-duration: 3s;
}

[data-duration="4s"],
[data-animate~="4s"] {
    -webkit-animation-duration: 4s;
    animation-duration: 4s;
}

[data-duration="5s"],
[data-animate~="5s"] {
    -webkit-animation-duration: 5s;
    animation-duration: 5s;
}

[data-duration="6s"],
[data-animate~="6s"] {
    -webkit-animation-duration: 6s;
    animation-duration: 6s;
}

[data-duration="7s"],
[data-animate~="7s"] {
    -webkit-animation-duration: 7s;
    animation-duration: 7s;
}

[data-duration="8s"],
[data-animate~="8s"] {
    -webkit-animation-duration: 8s;
    animation-duration: 8s;
}

[data-duration="9s"],
[data-animate~="9s"] {
    -webkit-animation-duration: 9s;
    animation-duration: 9s;
}

[data-duration="10s"],
[data-animate~="10s"] {
    -webkit-animation-duration: 10s;
    animation-duration: 10s;
}

[data-duration="15s"],
[data-animate~="15s"] {
    -webkit-animation-duration: 15s;
    animation-duration: 15s;
}

[data-duration="20s"],
[data-animate~="20s"] {
    -webkit-animation-duration: 20s;
    animation-duration: 20s;
}

[data-duration="25s"],
[data-animate~="25s"] {
    -webkit-animation-duration: 25s;
    animation-duration: 25s;
}

/*
*
* Animation Iteration
*
*/

[data-iteration] {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

[data-iteration="infinite"],
[data-animate~="infinite"] {
    -webkit-animation-iteration-count: infinite;
    animation-iteration-count: infinite;
}

[data-iteration="1s"],
[data-animate~="1s"] {
    -webkit-animation-iteration-count: 1s;
    animation-iteration-count: 1s;
}

[data-iteration="2s"],
[data-animate~="2s"] {
    -webkit-animation-iteration-count: 2s;
    animation-iteration-count: 2s;
}

[data-iteration="3s"],
[data-animate~="3s"] {
    -webkit-animation-iteration-count: 3s;
    animation-iteration-count: 3s;
}

[data-iteration="4s"],
[data-animate~="4s"] {
    -webkit-animation-iteration-count: 4s;
    animation-iteration-count: 4s;
}

[data-iteration="5s"],
[data-animate~="5s"] {
    -webkit-animation-iteration-count: 5s;
    animation-iteration-count: 5s;
}

[data-iteration="6s"],
[data-animate~="6s"] {
    -webkit-animation-iteration-count: 6s;
    animation-iteration-count: 6s;
}

[data-iteration="7s"],
[data-animate~="7s"] {
    -webkit-animation-iteration-count: 7s;
    animation-iteration-count: 7s;
}

[data-iteration="8s"],
[data-animate~="8s"] {
    -webkit-animation-iteration-count: 8s;
    animation-iteration-count: 8s;
}

[data-iteration="9s"],
[data-animate~="9s"] {
    -webkit-animation-iteration-count: 9s;
    animation-iteration-count: 9s;
}

[data-iteration="10s"],
[data-animate~="10s"] {
    -webkit-animation-iteration-count: 10s;
    animation-iteration-count: 10s;
}

/*
*
* Animation State
*
*/

[data-state] {
    -webkit-animation-play-state: inherit;
    animation-play-state: inherit;
}

[data-state="paused"],
[data-animate~="paused"] {
    -webkit-animation-play-state: paused;
    animation-play-state: paused;
}

[data-state="running"],
[data-animate~="running"] {
    -webkit-animation-play-state: running;
    animation-play-state: running;
}

/*
*
* Animation Timing Function
*
*/

[data-timing] {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

[data-timing="ease"],
[data-animate~="ease"] {
    -webkit-animation-timing-function: ease;
    animation-timing-function: ease;
}

[data-timing="ease-in"],
[data-animate~="ease-in"] {
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

[data-timing="ease-out"],
[data-animate~="ease-out"] {
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

[data-timing="ease-in-out"],
[data-animate~="ease-in-out"] {
    -webkit-animation-timing-function: ease-in-out;
    animation-timing-function: ease-in-out;
}

[data-timing="linear"],
[data-animate~="linear"] {
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
}

[data-timing="step-start"],
[data-animate~="step-start"] {
    -webkit-animation-timing-function: step-start;
    animation-timing-function: step-start;
}

[data-timing="step-end"],
[data-animate~="step-end"] {
    -webkit-animation-timing-function: step-end;
    animation-timing-function: step-end;
}

/*
*
* Animation Filling Mode
*
*/

[data-fill] {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}

[data-fill="none"],
[data-animate~="none"] {
    -webkit-animation-fill-mode: none;
    animation-fill-mode: none;
}

[data-fill="forwards"],
[data-animate~="forwards"] {
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
}

[data-fill="backwards"],
[data-animate~="backwards"] {
    -webkit-animation-fill-mode: backwards;
    animation-fill-mode: backwards;
}

[data-fill="both"],
[data-animate~="both"] {
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
}

/*
*
* Animations
*
*/

@-webkit-keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

@keyframes bounce {
    0%, 20%, 50%, 80%, 100% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    40% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);
    }

    60% {
        -webkit-transform: translateY(-15px);
        -ms-transform: translateY(-15px);
        transform: translateY(-15px);
    }
}

[data-animate~="bounce"] {
    -webkit-animation-name: bounce;
    animation-name: bounce;
}

@-webkit-keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

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

@keyframes flash {
    0%, 50%, 100% {
        opacity: 1;
    }

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

[data-animate~="flash"] {
    -webkit-animation-name: flash;
    animation-name: flash;
}

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

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);
    }

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

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

    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);
    }

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

[data-animate~="pulse"] {
    -webkit-animation-name: pulse;
    animation-name: pulse;
}

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

[data-animate~="shake"] {
    -webkit-animation-name: shake;
    animation-name: shake;
}

@-webkit-keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        transform: rotate(15deg);
    }

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

    60% {
        -webkit-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

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

@keyframes swing {
    20% {
        -webkit-transform: rotate(15deg);
        -ms-transform: rotate(15deg);
        transform: rotate(15deg);
    }

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

    60% {
        -webkit-transform: rotate(5deg);
        -ms-transform: rotate(5deg);
        transform: rotate(5deg);
    }

    80% {
        -webkit-transform: rotate(-5deg);
        -ms-transform: rotate(-5deg);
        transform: rotate(-5deg);
    }

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

[data-animate~="swing"] {
    -webkit-transform-origin: top center;
    -ms-transform-origin: top center;
    transform-origin: top center;
    -webkit-animation-name: swing;
    animation-name: swing;
}

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

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

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

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

    10%, 20% {
        -webkit-transform: scale(0.9) rotate(-3deg);
        -ms-transform: scale(0.9) rotate(-3deg);
        transform: scale(0.9) rotate(-3deg);
    }

    30%, 50%, 70%, 90% {
        -webkit-transform: scale(1.1) rotate(3deg);
        -ms-transform: scale(1.1) rotate(3deg);
        transform: scale(1.1) rotate(3deg);
    }

    40%, 60%, 80% {
        -webkit-transform: scale(1.1) rotate(-3deg);
        -ms-transform: scale(1.1) rotate(-3deg);
        transform: scale(1.1) rotate(-3deg);
    }

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

[data-animate~="tada"] {
    -webkit-animation-name: tada;
    animation-name: tada;
}

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

    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }

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

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

    15% {
        -webkit-transform: translateX(-25%) rotate(-5deg);
        -ms-transform: translateX(-25%) rotate(-5deg);
        transform: translateX(-25%) rotate(-5deg);
    }

    30% {
        -webkit-transform: translateX(20%) rotate(3deg);
        -ms-transform: translateX(20%) rotate(3deg);
        transform: translateX(20%) rotate(3deg);
    }

    45% {
        -webkit-transform: translateX(-15%) rotate(-3deg);
        -ms-transform: translateX(-15%) rotate(-3deg);
        transform: translateX(-15%) rotate(-3deg);
    }

    60% {
        -webkit-transform: translateX(10%) rotate(2deg);
        -ms-transform: translateX(10%) rotate(2deg);
        transform: translateX(10%) rotate(2deg);
    }

    75% {
        -webkit-transform: translateX(-5%) rotate(-1deg);
        -ms-transform: translateX(-5%) rotate(-1deg);
        transform: translateX(-5%) rotate(-1deg);
    }

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

[data-animate~="wobble"] {
    -webkit-animation-name: wobble;
    animation-name: wobble;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }

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

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

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

        opacity: 0;
    }

    50% {
        -webkit-transform: scale(1.05);
        -ms-transform: scale(1.05);
        transform: scale(1.05);

        opacity: 1;
    }

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

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

[data-animate~="bounceIn"] {
    -webkit-animation-name: bounceIn;
    animation-name: bounceIn;
}

@-webkit-keyframes bounceInDown {
    0% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }

    60% {
        -webkit-transform: translateY(30px);
        transform: translateY(30px);

        opacity: 1;
    }

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

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

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

        opacity: 0;
    }

    60% {
        -webkit-transform: translateY(30px);
        -ms-transform: translateY(30px);
        transform: translateY(30px);

        opacity: 1;
    }

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

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

[data-animate~="bounceInDown"] {
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }

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

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

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

        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(30px);
        -ms-transform: translateX(30px);
        transform: translateX(30px);

        opacity: 1;
    }

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

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

[data-animate~="bounceInLeft"] {
    -webkit-animation-name: bounceInLeft;
    animation-name: bounceInLeft;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }

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

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

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

        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-30px);
        -ms-transform: translateX(-30px);
        transform: translateX(-30px);

        opacity: 1;
    }

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

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

[data-animate~="bounceInRight"] {
    -webkit-animation-name: bounceInRight;
    animation-name: bounceInRight;
}

@-webkit-keyframes bounceInUp {
    0% {
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);

        opacity: 0;
    }

    60% {
        -webkit-transform: translateY(-30px);
        transform: translateY(-30px);

        opacity: 1;
    }

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

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

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

        opacity: 0;
    }

    60% {
        -webkit-transform: translateY(-30px);
        -ms-transform: translateY(-30px);
        transform: translateY(-30px);

        opacity: 1;
    }

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

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

[data-animate~="bounceInUp"] {
    -webkit-animation-name: bounceInUp;
    animation-name: bounceInUp;
}

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

    25% {
        -webkit-transform: scale(.95);
        transform: scale(.95);
    }

    50% {
        -webkit-transform: scale(1.1);
        transform: scale(1.1);

        opacity: 1;
    }

    100% {
        -webkit-transform: scale(.3);
        transform: scale(.3);

        opacity: 0;
    }
}

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

    25% {
        -webkit-transform: scale(.95);
        -ms-transform: scale(.95);
        transform: scale(.95);
    }

    50% {
        -webkit-transform: scale(1.1);
        -ms-transform: scale(1.1);
        transform: scale(1.1);

        opacity: 1;
    }

    100% {
        -webkit-transform: scale(.3);
        -ms-transform: scale(.3);
        transform: scale(.3);

        opacity: 0;
    }
}

[data-animate~="bounceOut"] {
    -webkit-animation-name: bounceOut;
    animation-name: bounceOut;
}

@-webkit-keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);

        opacity: 0;
    }
}

@keyframes bounceOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);

        opacity: 0;
    }
}

[data-animate~="bounceOutDown"] {
    -webkit-animation-name: bounceOutDown;
    animation-name: bounceOutDown;
}

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

    20% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);

        opacity: 1;
    }

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

        opacity: 0;
    }
}

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

    20% {
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);

        opacity: 0;
    }
}

[data-animate~="bounceOutLeft"] {
    -webkit-animation-name: bounceOutLeft;
    animation-name: bounceOutLeft;
}

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

    20% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);

        opacity: 1;
    }

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

        opacity: 0;
    }
}

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

    20% {
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);

        opacity: 0;
    }
}

[data-animate~="bounceOutRight"] {
    -webkit-animation-name: bounceOutRight;
    animation-name: bounceOutRight;
}

@-webkit-keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }
}

@keyframes bounceOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    20% {
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }
}

[data-animate~="bounceOutUp"] {
    -webkit-animation-name: bounceOutUp;
    animation-name: bounceOutUp;
}

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

    100% {
        opacity: 1;
    }
}

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

    100% {
        opacity: 1;
    }
}

[data-animate~="fadeIn"] {
    -webkit-animation-name: fadeIn;
    animation-name: fadeIn;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInDown"] {
    -webkit-animation-name: fadeInDown;
    animation-name: fadeInDown;
}

@-webkit-keyframes fadeInDownBig {
    0% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInDownBig"] {
    -webkit-animation-name: fadeInDownBig;
    animation-name: fadeInDownBig;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInLeft"] {
    -webkit-animation-name: fadeInLeft;
    animation-name: fadeInLeft;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInLeftBig"] {
    -webkit-animation-name: fadeInLeftBig;
    animation-name: fadeInLeftBig;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInRight"] {
    -webkit-animation-name: fadeInRight;
    animation-name: fadeInRight;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInRightBig"] {
    -webkit-animation-name: fadeInRightBig;
    animation-name: fadeInRightBig;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-animate~="fadeInUp"] {
    -webkit-animation-name: fadeInUp;
    animation-name: fadeInUp;
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

        opacity: 1;
    }
}

[data-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;
    }
}

[data-animate~="fadeOut"] {
    -webkit-animation-name: fadeOut;
    animation-name: fadeOut;
}

@-webkit-keyframes fadeOutDown {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(20px);
        transform: translateY(20px);

        opacity: 0;
    }
}

@keyframes fadeOutDown {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(20px);
        -ms-transform: translateY(20px);
        transform: translateY(20px);

        opacity: 0;
    }
}

[data-animate~="fadeOutDown"] {
    -webkit-animation-name: fadeOutDown;
    animation-name: fadeOutDown;
}

@-webkit-keyframes fadeOutDownBig {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(2000px);
        transform: translateY(2000px);

        opacity: 0;
    }
}

@keyframes fadeOutDownBig {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(2000px);
        -ms-transform: translateY(2000px);
        transform: translateY(2000px);

        opacity: 0;
    }
}

[data-animate~="fadeOutDownBig"] {
    -webkit-animation-name: fadeOutDownBig;
    animation-name: fadeOutDownBig;
}

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

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-20px);
        transform: translateX(-20px);

        opacity: 0;
    }
}

@keyframes fadeOutLeft {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
        transform: translateX(-20px);

        opacity: 0;
    }
}

[data-animate~="fadeOutLeft"] {
    -webkit-animation-name: fadeOutLeft;
    animation-name: fadeOutLeft;
}

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

        opacity: 1;
    }

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

        opacity: 0;
    }
}

@keyframes fadeOutLeftBig {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);

        opacity: 0;
    }
}

[data-animate~="fadeOutLeftBig"] {
    -webkit-animation-name: fadeOutLeftBig;
    animation-name: fadeOutLeftBig;
}

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

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(20px);
        transform: translateX(20px);

        opacity: 0;
    }
}

@keyframes fadeOutRight {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
        transform: translateX(20px);

        opacity: 0;
    }
}

[data-animate~="fadeOutRight"] {
    -webkit-animation-name: fadeOutRight;
    animation-name: fadeOutRight;
}

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

        opacity: 1;
    }

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

        opacity: 0;
    }
}

@keyframes fadeOutRightBig {
    0% {
        -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
        transform: translateX(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);

        opacity: 0;
    }
}

[data-animate~="fadeOutRightBig"] {
    -webkit-animation-name: fadeOutRightBig;
    animation-name: fadeOutRightBig;
}

@-webkit-keyframes fadeOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-20px);
        transform: translateY(-20px);

        opacity: 0;
    }
}

@keyframes fadeOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-20px);
        -ms-transform: translateY(-20px);
        transform: translateY(-20px);

        opacity: 0;
    }
}

[data-animate~="fadeOutUp"] {
    -webkit-animation-name: fadeOutUp;
    animation-name: fadeOutUp;
}

@-webkit-keyframes fadeOutUpBig {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }
}

@keyframes fadeOutUpBig {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }
}

[data-animate~="fadeOutUpBig"] {
    -webkit-animation-name: fadeOutUpBig;
    animation-name: fadeOutUpBig;
}

@-webkit-keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

@keyframes flip {
    0% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(0) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    40% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(170deg) scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out;
    }

    50% {
        -webkit-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -ms-transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        transform: perspective(400px) translateZ(150px) rotateY(190deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    80% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(.95);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }

    100% {
        -webkit-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -ms-transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        transform: perspective(400px) translateZ(0) rotateY(360deg) scale(1);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in;
    }
}

[data-animate~="flip"] {
    -webkit-animation-name: flip;
    animation-name: flip;

    -webkit-backface-visibility: visible;
    -ms-backface-visibility: visible;
    backface-visibility: visible;
}

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

        opacity: 0;
    }

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

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

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);

        opacity: 1;
    }
}

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

        opacity: 0;
    }

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

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

    100% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);

        opacity: 1;
    }
}

[data-animate~="flipInX"] {
    -webkit-animation-name: flipInX;
    animation-name: flipInX;

    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

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

        opacity: 0;
    }

    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 flipInY {
    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;
    }
}

[data-animate~="flipInY"] {
    -webkit-animation-name: flipInY;
    animation-name: flipInY;

    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);

        opacity: 0;
    }
}

@keyframes flipOutX {
    0% {
        -webkit-transform: perspective(400px) rotateX(0deg);
        -ms-transform: perspective(400px) rotateX(0deg);
        transform: perspective(400px) rotateX(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateX(90deg);
        -ms-transform: perspective(400px) rotateX(90deg);
        transform: perspective(400px) rotateX(90deg);

        opacity: 0;
    }
}

[data-animate~="flipOutX"] {
    -webkit-animation-name: flipOutX;
    animation-name: flipOutX;

    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);

        opacity: 0;
    }
}

@keyframes flipOutY {
    0% {
        -webkit-transform: perspective(400px) rotateY(0deg);
        -ms-transform: perspective(400px) rotateY(0deg);
        transform: perspective(400px) rotateY(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: perspective(400px) rotateY(90deg);
        -ms-transform: perspective(400px) rotateY(90deg);
        transform: perspective(400px) rotateY(90deg);

        opacity: 0;
    }
}

[data-animate~="flipOutY"] {
    -webkit-animation-name: flipOutY;
    animation-name: flipOutY;

    -webkit-backface-visibility: visible !important;
    -ms-backface-visibility: visible !important;
    backface-visibility: visible !important;
}

@-webkit-keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);

        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);

        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);

        opacity: 1;
    }

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

        opacity: 1;
    }
}

@keyframes lightSpeedIn {
    0% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);

        opacity: 0;
    }

    60% {
        -webkit-transform: translateX(-20%) skewX(30deg);
        -ms-transform: translateX(-20%) skewX(30deg);
        transform: translateX(-20%) skewX(30deg);

        opacity: 1;
    }

    80% {
        -webkit-transform: translateX(0%) skewX(-15deg);
        -ms-transform: translateX(0%) skewX(-15deg);
        transform: translateX(0%) skewX(-15deg);

        opacity: 1;
    }

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

        opacity: 1;
    }
}

[data-animate~="lightSpeedIn"] {
    -webkit-animation-name: lightSpeedIn;
    animation-name: lightSpeedIn;
    -webkit-animation-timing-function: ease-out;
    animation-timing-function: ease-out;
}

@-webkit-keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);

        opacity: 0;
    }
}

@keyframes lightSpeedOut {
    0% {
        -webkit-transform: translateX(0%) skewX(0deg);
        -ms-transform: translateX(0%) skewX(0deg);
        transform: translateX(0%) skewX(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%) skewX(-30deg);
        -ms-transform: translateX(100%) skewX(-30deg);
        transform: translateX(100%) skewX(-30deg);

        opacity: 0;
    }
}

[data-animate~="lightSpeedOut"] {
    -webkit-animation-name: lightSpeedOut;
    animation-name: lightSpeedOut;
    -webkit-animation-timing-function: ease-in;
    animation-timing-function: ease-in;
}

@-webkit-keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        transform: rotate(-200deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: center center;
        transform-origin: center center;

        opacity: 1;
    }
}

@keyframes rotateIn {
    0% {
        -webkit-transform: rotate(-200deg);
        -ms-transform: rotate(-200deg);
        transform: rotate(-200deg);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;

        opacity: 1;
    }
}

[data-animate~="rotateIn"] {
    -webkit-animation-name: rotateIn;
    animation-name: rotateIn;
}

@-webkit-keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }
}

@keyframes rotateInDownLeft {
    0% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }
}

[data-animate~="rotateInDownLeft"] {
    -webkit-animation-name: rotateInDownLeft;
    animation-name: rotateInDownLeft;
}

@-webkit-keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }
}

@keyframes rotateInDownRight {
    0% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }
}

[data-animate~="rotateInDownRight"] {
    -webkit-animation-name: rotateInDownRight;
    animation-name: rotateInDownRight;
}

@-webkit-keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }
}

@keyframes rotateInUpLeft {
    0% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }
}

[data-animate~="rotateInUpLeft"] {
    -webkit-animation-name: rotateInUpLeft;
    animation-name: rotateInUpLeft;
}

@-webkit-keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }
}

@keyframes rotateInUpRight {
    0% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }

    100% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }
}

[data-animate~="rotateInUpRight"] {
    -webkit-animation-name: rotateInUpRight;
    animation-name: rotateInUpRight;
}

@-webkit-keyframes rotateOut {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: center center;
        transform-origin: center center;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(200deg);
        transform: rotate(200deg);
        -webkit-transform-origin: center center;
        transform-origin: center center;

        opacity: 0;
    }
}

@keyframes rotateOut {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(200deg);
        -ms-transform: rotate(200deg);
        transform: rotate(200deg);
        -webkit-transform-origin: center center;
        -ms-transform-origin: center center;
        transform-origin: center center;

        opacity: 0;
    }
}

[data-animate~="rotateOut"] {
    -webkit-animation-name: rotateOut;
    animation-name: rotateOut;
}

@-webkit-keyframes rotateOutDownLeft {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }
}

@keyframes rotateOutDownLeft {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }
}

[data-animate~="rotateOutDownLeft"] {
    -webkit-animation-name: rotateOutDownLeft;
    animation-name: rotateOutDownLeft;
}

@-webkit-keyframes rotateOutDownRight {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }
}

@keyframes rotateOutDownRight {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }
}

[data-animate~="rotateOutDownRight"] {
    -webkit-animation-name: rotateOutDownRight;
    animation-name: rotateOutDownRight;
}

@-webkit-keyframes rotateOutUpLeft {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }
}

@keyframes rotateOutUpLeft {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
        transform: rotate(-90deg);
        -webkit-transform-origin: left bottom;
        -ms-transform-origin: left bottom;
        transform-origin: left bottom;

        opacity: 0;
    }
}

[data-animate~="rotateOutUpLeft"] {
    -webkit-animation-name: rotateOutUpLeft;
    animation-name: rotateOutUpLeft;
}

@-webkit-keyframes rotateOutUpRight {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }
}

@keyframes rotateOutUpRight {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 1;
    }

    100% {
        -webkit-transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        transform: rotate(90deg);
        -webkit-transform-origin: right bottom;
        -ms-transform-origin: right bottom;
        transform-origin: right bottom;

        opacity: 0;
    }
}

[data-animate~="rotateOutUpRight"] {
    -webkit-animation-name: rotateOutUpRight;
    animation-name: rotateOutUpRight;
}

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

        opacity: 0;
    }

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

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

        opacity: 0;
    }

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

[data-animate~="slideInDown"] {
    -webkit-animation-name: slideInDown;
    animation-name: slideInDown;
}

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

        opacity: 0;
    }

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

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

        opacity: 0;
    }

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

[data-animate~="slideInLeft"] {
    -webkit-animation-name: slideInLeft;
    animation-name: slideInLeft;
}

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

        opacity: 0;
    }

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

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

        opacity: 0;
    }

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

[data-animate~="slideInRight"] {
    -webkit-animation-name: slideInRight;
    animation-name: slideInRight;
}

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

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

        opacity: 0;
    }
}

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

    100% {
        -webkit-transform: translateX(-2000px);
        -ms-transform: translateX(-2000px);
        transform: translateX(-2000px);

        opacity: 0;
    }
}

[data-animate~="slideOutLeft"] {
    -webkit-animation-name: slideOutLeft;
    animation-name: slideOutLeft;
}

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

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

        opacity: 0;
    }
}

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

    100% {
        -webkit-transform: translateX(2000px);
        -ms-transform: translateX(2000px);
        transform: translateX(2000px);

        opacity: 0;
    }
}

[data-animate~="slideOutRight"] {
    -webkit-animation-name: slideOutRight;
    animation-name: slideOutRight;
}

@-webkit-keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }
}

@keyframes slideOutUp {
    0% {
        -webkit-transform: translateY(0);
        -ms-transform: translateY(0);
        transform: translateY(0);
    }

    100% {
        -webkit-transform: translateY(-2000px);
        -ms-transform: translateY(-2000px);
        transform: translateY(-2000px);

        opacity: 0;
    }
}

[data-animate~="slideOutUp"] {
    -webkit-animation-name: slideOutUp;
    animation-name: slideOutUp;
}

@-webkit-keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        transform: rotate(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: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40% {
        -webkit-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(700px);
        transform: translateY(700px);

        opacity: 0;
    }
}

@keyframes hinge {
    0% {
        -webkit-transform: rotate(0);
        -ms-transform: rotate(0);
        transform: rotate(0);
        -webkit-transform-origin: top left;
        -ms-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: rotate(80deg);
        -ms-transform: rotate(80deg);
        transform: rotate(80deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    40% {
        -webkit-transform: rotate(60deg);
        -ms-transform: rotate(60deg);
        transform: rotate(60deg);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;
    }

    80% {
        -webkit-transform: rotate(60deg) translateY(0);
        -ms-transform: rotate(60deg) translateY(0);
        transform: rotate(60deg) translateY(0);
        -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
        transform-origin: top left;
        -webkit-animation-timing-function: ease-in-out;
        animation-timing-function: ease-in-out;

        opacity: 1;
    }

    100% {
        -webkit-transform: translateY(700px);
        -ms-transform: translateY(700px);
        transform: translateY(700px);

        opacity: 0;
    }
}

[data-animate~="hinge"] {
    -webkit-animation-name: hinge;
    animation-name: hinge;
}

@-webkit-keyframes rollIn {
    0% {
        -webkit-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);

        opacity: 1;
    }
}

@keyframes rollIn {
    0% {
        -webkit-transform: translateX(-100%) rotate(-120deg);
        -ms-transform: translateX(-100%) rotate(-120deg);
        transform: translateX(-100%) rotate(-120deg);

        opacity: 0;
    }

    100% {
        -webkit-transform: translateX(0px) rotate(0deg);
        -ms-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);

        opacity: 1;
    }
}

[data-animate~="rollIn"] {
    -webkit-animation-name: rollIn;
    animation-name: rollIn;
}

@-webkit-keyframes rollOut {
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);

        opacity: 0;
    }
}

@keyframes rollOut {
    0% {
        -webkit-transform: translateX(0px) rotate(0deg);
        -ms-transform: translateX(0px) rotate(0deg);
        transform: translateX(0px) rotate(0deg);

        opacity: 1;
    }

    100% {
        -webkit-transform: translateX(100%) rotate(120deg);
        -ms-transform: translateX(100%) rotate(120deg);
        transform: translateX(100%) rotate(120deg);

        opacity: 0;
    }
}

[data-animate~="rollOut"] {
    -webkit-animation-name: rollOut;
    animation-name: rollOut;
}