/* ------------------------------ */
/* ---------- Animations -------- */
/* ------------------------------ */

.intro-animation, .intro-animation-mobile {
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center;
} 


.intro-animation.intro-animation--visible, 
.intro-animation-mobile.intro-animation--visible,
.intro-animation-container.intro-animation--visible .intro-animation {
    opacity: 1;
    -webkit-transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s;
    -o-transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s;
    -webkit-transition: opacity .75s, -webkit-transform .75s cubic-bezier(0,.55,.45,1);
    transition: opacity .75s, -webkit-transform .75s cubic-bezier(0,.55,.45,1);
    transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s;
    transition: transform .75s cubic-bezier(0,.55,.45,1), opacity .75s, -webkit-transform .75s cubic-bezier(0,.55,.45,1);
    -webkit-transition-delay: .15s;
         -o-transition-delay: .15s;
            transition-delay: .15s;
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: opacity,transform;
}


/* Delays */
.intro-animation.intro-animation--delay-2, .intro-animation-container .intro-animation:nth-of-type(2) {-webkit-transition-delay: calc(var(--transition-delay) * 1);-o-transition-delay: calc(var(--transition-delay) * 1);transition-delay: calc(var(--transition-delay) * 1);}
.intro-animation.intro-animation--delay-3, .intro-animation-container .intro-animation:nth-of-type(3) {-webkit-transition-delay: calc(var(--transition-delay) * 2);-o-transition-delay: calc(var(--transition-delay) * 2);transition-delay: calc(var(--transition-delay) * 2);}
.intro-animation.intro-animation--delay-4, .intro-animation-container .intro-animation:nth-of-type(4) {-webkit-transition-delay: calc(var(--transition-delay) * 3);-o-transition-delay: calc(var(--transition-delay) * 3);transition-delay: calc(var(--transition-delay) * 3);}
.intro-animation.intro-animation--delay-5, .intro-animation-container .intro-animation:nth-of-type(5) {-webkit-transition-delay: calc(var(--transition-delay) * 4);-o-transition-delay: calc(var(--transition-delay) * 4);transition-delay: calc(var(--transition-delay) * 4);}
.intro-animation.intro-animation--delay-6, .intro-animation-container .intro-animation:nth-of-type(6) {-webkit-transition-delay: calc(var(--transition-delay) * 5);-o-transition-delay: calc(var(--transition-delay) * 5);transition-delay: calc(var(--transition-delay) * 5);}
.intro-animation.intro-animation--delay-7, .intro-animation-container .intro-animation:nth-of-type(7) {-webkit-transition-delay: calc(var(--transition-delay) * 6);-o-transition-delay: calc(var(--transition-delay) * 6);transition-delay: calc(var(--transition-delay) * 6);}
.intro-animation.intro-animation--delay-8, .intro-animation-container .intro-animation:nth-of-type(8) {-webkit-transition-delay: calc(var(--transition-delay) * 7);-o-transition-delay: calc(var(--transition-delay) * 7);transition-delay: calc(var(--transition-delay) * 7);}
.intro-animation.intro-animation--delay-9, .intro-animation-container .intro-animation:nth-of-type(9) {-webkit-transition-delay: calc(var(--transition-delay) * 8);-o-transition-delay: calc(var(--transition-delay) * 8);transition-delay: calc(var(--transition-delay) * 8);}
.intro-animation.intro-animation--delay-10, .intro-animation-container .intro-animation:nth-of-type(10) {-webkit-transition-delay: calc(var(--transition-delay) * 9);-o-transition-delay: calc(var(--transition-delay) * 9);transition-delay: calc(var(--transition-delay) * 9);}
.intro-animation.intro-animation--delay-11, .intro-animation-container .intro-animation:nth-of-type(11) {-webkit-transition-delay: calc(var(--transition-delay) * 10);-o-transition-delay: calc(var(--transition-delay) * 10);transition-delay: calc(var(--transition-delay) * 10);}
.intro-animation.intro-animation--delay-12, .intro-animation-container .intro-animation:nth-of-type(12) {-webkit-transition-delay: calc(var(--transition-delay) * 11);-o-transition-delay: calc(var(--transition-delay) * 11);transition-delay: calc(var(--transition-delay) * 11);}
.intro-animation.intro-animation--delay-13, .intro-animation-container .intro-animation:nth-of-type(13) {-webkit-transition-delay: calc(var(--transition-delay) * 12);-o-transition-delay: calc(var(--transition-delay) * 12);transition-delay: calc(var(--transition-delay) * 12);}
.intro-animation.intro-animation--delay-14, .intro-animation-container .intro-animation:nth-of-type(14) {-webkit-transition-delay: calc(var(--transition-delay) * 13);-o-transition-delay: calc(var(--transition-delay) * 13);transition-delay: calc(var(--transition-delay) * 13);}
.intro-animation.intro-animation--delay-15, .intro-animation-container .intro-animation:nth-of-type(15) {-webkit-transition-delay: calc(var(--transition-delay) * 14);-o-transition-delay: calc(var(--transition-delay) * 14);transition-delay: calc(var(--transition-delay) * 14);}
.intro-animation.intro-animation--delay-16, .intro-animation-container .intro-animation:nth-of-type(16) {-webkit-transition-delay: calc(var(--transition-delay) * 15);-o-transition-delay: calc(var(--transition-delay) * 15);transition-delay: calc(var(--transition-delay) * 15);}
.intro-animation.intro-animation--delay-17, .intro-animation-container .intro-animation:nth-of-type(17) {-webkit-transition-delay: calc(var(--transition-delay) * 16);-o-transition-delay: calc(var(--transition-delay) * 16);transition-delay: calc(var(--transition-delay) * 16);}
.intro-animation.intro-animation--delay-18, .intro-animation-container .intro-animation:nth-of-type(18) {-webkit-transition-delay: calc(var(--transition-delay) * 17);-o-transition-delay: calc(var(--transition-delay) * 17);transition-delay: calc(var(--transition-delay) * 17);}
.intro-animation.intro-animation--delay-19, .intro-animation-container .intro-animation:nth-of-type(19) {-webkit-transition-delay: calc(var(--transition-delay) * 18);-o-transition-delay: calc(var(--transition-delay) * 18);transition-delay: calc(var(--transition-delay) * 18);}
.intro-animation.intro-animation--delay-20, .intro-animation-container .intro-animation:nth-of-type(20) {-webkit-transition-delay: calc(var(--transition-delay) * 19);-o-transition-delay: calc(var(--transition-delay) * 19);transition-delay: calc(var(--transition-delay) * 19);}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 576px) {

    .intro-animation--bottom {
        -webkit-transform: translate3d(0, var(--spacing-7), 0);
        transform: translate3d(0, var(--spacing-7), 0);
    }
    
    .intro-animation--top {
        -webkit-transform: translate3d(0, calc(-1 * var(--spacing-7)), 0);
        transform: translate3d(0, calc(-1 * var(--spacing-7)), 0);
    }
        
    .intro-animation--left {
        -webkit-transform: translate3d(calc(-1 * var(--spacing-7)), 0, 0);
        transform: translate3d(calc(-1 * var(--spacing-7)), 0, 0);
    }
        
    .intro-animation--right {
        -webkit-transform: translate3d(var(--spacing-7), 0, 0);
        transform: translate3d(var(--spacing-7), 0, 0);
    }

}


@media all and (max-width: 575.98px) {

    .intro-animation--bottom, .intro-animation--top, .intro-animation--left {
        -webkit-transform: translate3d(0, var(--spacing-6), 0);
        transform: translate3d(0, var(--spacing-6), 0);
    }
        
    .intro-animation--right {
        -webkit-transform: translate3d(var(--spacing-6), 0, 0);
        transform: translate3d(var(--spacing-6), 0, 0);
    }

}