:root{
        --pTransValue: 40px;
        --nTransValue: -40px;
        --transformOrigin: top center;
        --animDuration: 3s;
        --animIterCount: 2;
        --animTiming: cubic-bezier(0.22, 1, 0.36, 1);
    }
    .animated {
        position: relative;
        animation-duration: var(--animDuration, 2s);
        /* animation-delay: 2s; */
        animation-iteration-count: var(--animIterCount);
        animation-fill-mode: both;
        animation-timing-function: var(--animTiming); 
        /* cubic-bezier(0.87, 0, 0.13, 1) */
    }
    
    /*=== FADE IN LEFT ===*/
    .anim-left {
        -webkit-animation-name: animLeft;
        -moz-animation-name: animLeft;
        -o-animation-name: animLeft;
        animation-name: animLeft;
    }
    
    @keyframes animLeft {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(var(--nTransValue, -10px), 0, 0);
            transform: translate3d(var(--nTransValue, -10px), 0, 0);
        }
        50% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    /*=== FADE IN LEFT END ===*/
    
    /*=== FADE IN RIGHT ===*/
    .anim-right {
        -webkit-animation-name: animRight;
        -moz-animation-name: animRight;
        -o-animation-name: animRight;
        animation-name: animRight;
    }
    
    @keyframes animRight {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(var(--pTransValue, 10px), 0, 0);
            transform: translate3d(var(--pTransValue, 10px), 0, 0);
        }
        50% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    /*=== FADE IN RIGHT END ===*/
    
    /*=== FADE IN UP ===*/
    .anim-up {
        -webkit-animation-name: animUp;
        -moz-animation-name: animUp;
        -o-animation-name: animUp;
        animation-name: animUp;
    }
    
    @keyframes animUp {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, var(--pTransValue, 10px), 0);
            transform: translate3d(0, var(--pTransValue, 10px), 0);
        }
        50% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    /*=== FADE IN UP END ===*/
    
    /*=== FADE IN DOWN ===*/
    .anim-down {
        -webkit-animation-name: animDown;
        -moz-animation-name: animDown;
        -o-animation-name: animDown;
        animation-name: animDown;
    }
    
    @keyframes animDown {
        0% {
            opacity: 0;
            -webkit-transform: translate3d(0, var(--nTransValue, -10px), 0);
            transform: translate3d(0, var(--nTransValue, -10px), 0);
        }
        50% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
        100% {
            opacity: 1;
            -webkit-transform: none;
            transform: none;
        }
    }
    /*=== FADE IN DOWN END ===*/
    
    /*=== BOUNCE ===*/
    .anim-bounceIn {
        -webkit-animation-name: animBounceIn;
        -moz-animation-name: animBounceIn;
        -o-animation-name: animBounceIn;
        animation-name: animBounceIn;
    }
    
    @keyframes animBounceIn {
        0% {
            opacity: 0;
            transform: scale(.3);
        }
        40% {
            opacity: 1;
            transform: scale(1.08);
        }
        70% {
            transform: scale(.9);
        }
        80% {
            transform: scale(1);
        }
    }
    /*=== BOUNCE IN END ===*/
    
    /*=== FADE IN OUT ===*/
    .anim-fadeInOut {
        animation-name: anim-out;
    }
    
    @keyframes anim-out {
        0% {
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            opacity: 0;
        }
    }
    /*=== FADE IN OUT END ===*/

    /*=== OPACITY ===*/
    .anim-opacity {
        animation-name: opac;
    }
    
    @keyframes opac {
        0% {
            opacity: 0;
        }
        80% {
            opacity: 1;
        }
    }
    /*=== OPACITY END===*/

    /*=== ZOOM IN ===*/
    .anim-zoom {
        animation-name: animZoom;
    }
    
    @keyframes animZoom {
        0% {
            transform: scale(0);
        }
        80% {
            transform: scale(1);
        }
        100% {
            transform: scale(1);
        }
    }
    /*=== ZOOM IN END ===*/

    /*=== ZOOM FROM CENTER ===*/
    .anim-zoomin-center {
        -webkit-animation-name: animZoomin;
        -moz-animation-name: animZoomin;
        -o-animation-name: animZoomin;
        animation-name: animZoomin;
        transform-origin: var(--transformOrigin, center center);
    }
    
    @keyframes animZoomin {
        0% {
            opacity: 0;
            transform: scale(.3);
        }
        80% {
            transform: scale(1);
        }
        100%{
            transform: scale(1);
        }
    }
    /*=== BOUNCE IN END ===*/

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    
    /*=== ANIMATION DELAY CLASSES ===*/
    .anim-delay-1 {
        -webkit-animation-delay: 0.3s;
        -moz-animation-delay: 0.3s;
        -o-animation-delay: 0.3s;
        animation-delay: 0.3s;
    }
    
    .anim-delay-2 {
        animation-delay: 0.6s;
    }
    
    .anim-delay-3 {
        animation-delay: 0.9s;
    }
    
    .anim-delay-4 {
        animation-delay: 1.2s;
    }
    
    .anim-delay-5 {
        animation-delay: 1.5s;
    }
    
    .anim-delay-6 {
        animation-delay: 1.8s;
    }
    
    .anim-delay-7 {
        animation-delay: 2.1s;
    }
    
    .anim-delay-8 {
        animation-delay: 2.4s;
    }
    
    .anim-delay-9 {
        animation-delay: 2.7s;
    }
    
    .anim-delay-10 {
        animation-delay: 3s;
    }
    /*=== ANIMATION DELAY END===*/