.animated {
    animation-duration: 1.25s
}

.animated.animated-slow {
    animation-duration: 2s
}

.animated.animated-fast {
    animation-duration: .75s
}

.animated.infinite {
    animation-iteration-count: infinite
}

.animated.reverse {
    animation-direction: reverse;
    animation-fill-mode: forwards
}

@media (prefers-reduced-motion:reduce) {
    .animated {
        animation: none
    }
}


.fadeIn { 
    animation-name:fadeIn
}
@keyframes fadeIn { 
    from { 
        opacity: 0;
    }
    
    to { 
        opacity: 1
    }
}


.fadeInUp {
    animation-name: fadeInUp
}
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translate3d(0,100%,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}


.fadeInRight {
    animation-name: fadeInRight
}
@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translate3d(100%,0,0)
    }

    to {
        opacity: 1;
        transform: none
    }
}




.bounceIn {
    animation-name: bounceIn
}
@keyframes bounceIn {
    20%,40%,60%,80%,from,to {
        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1)
    }

    0% {
        opacity: 0;
        transform: scale3d(.3,.3,.3)
    }

    20% {
        transform: scale3d(1.1,1.1,1.1)
    }

    40% {
        transform: scale3d(.9,.9,.9)
    }

    60% {
        opacity: 1;
        transform: scale3d(1.03,1.03,1.03)
    }

    80% {
        transform: scale3d(.97,.97,.97)
    }

    to {
        opacity: 1;
        transform: scale3d(1,1,1)
    }
}


.bounceInUp {
    animation-name: bounceInUp
}
@keyframes bounceInUp {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1)
    }

    from {
        opacity: 0;
        transform: translate3d(0,3000px,0)
    }

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

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

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

    to {
        transform: translate3d(0,0,0)
    }
}


.bounceInRight {
    animation-name: bounceInRight;
}
@keyframes bounceInRight {
    60%,75%,90%,from,to {
        animation-timing-function: cubic-bezier(0.215,0.61,0.355,1)
    }

    from {
        opacity: 0;
        transform: translate3d(3000px,0,0)
    }

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

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

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

    to {
        transform: none
    }
}


.bounceInLeft {
    animation-name: bounceInLeft;
}

@keyframes bounceInLeft {
    60%, 75%, 90%, from, to {
        animation-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
    }

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

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

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

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

    to {
        transform: none;
    }
}