/* ------------------------------ */
/* ---------- 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 1s cubic-bezier(0,.55,.45,1), opacity 1s;
    -o-transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s;
    -webkit-transition: opacity 1s, -webkit-transform 1s cubic-bezier(0,.55,.45,1);
    transition: opacity 1s, -webkit-transform 1s cubic-bezier(0,.55,.45,1);
    transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s;
    transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s, -webkit-transform 1s cubic-bezier(0,.55,.45,1);
    -webkit-transform: translateZ(0) !important;
    transform: translateZ(0) !important;
    will-change: opacity,transform;
}



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

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

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

    /* 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);}

}


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

    .intro-animation-mobile {
        opacity: 0;
    }

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

}