/* ------------------------------ */
/* ---------- 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: 768px) {

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

    /* Delays */
    .intro-animation.intro-animation--delay-2, .intro-animation-container .intro-animation:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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:not(.logo):nth-child(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 all and (max-width: 767.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-5-5), 0);
        transform: translate3d(0, var(--spacing-5-5), 0);
    }

}