/**** EASING ****/
.creative-ease, .creative-ease .list-item, .creative-ease a {
    transition: all linear 0.4s;
}

/**** ANIMATION ****/
body:not(.finetune) .animation-container {
    position: absolute!important;
    top: 0;
    right: 0;
    bottom: 0;
}

body:not(.finetune) .creative-slide {
    position: absolute!important;
    animation: slideAnimation 16s ease-in-out infinite; /* Adjust duration as needed */
}

body:not(.finetune) .creative-slide:nth-of-type(1) {
    animation-delay: -4s!important; /* Adjust delay as needed, should be negative one-third of the total time above */
    top: 0;
}

body:not(.finetune) .creative-slide:nth-of-type(2) {
    animation-delay: 0s!important;
    top: 200vh;
}

body:not(.finetune) .creative-slide:nth-of-type(3) {
    animation-delay: -8s!important; /* Adjust delay as needed, should be negative two-thirds of the total time above */
    top: 200vh;
}

body:not(.finetune) .creative-slide:nth-of-type(4) {
    animation-delay: -12s!important; /* Adjust delay as needed, should be negative two-thirds of the total time above */
    top: 200vh;
}

@keyframes slideAnimation {
    0%, 27% {
        top: 200vh;
    }
    42%, 58% {
        top: 0;
    }
    73%, 100% {
        top: -200vh;
    }
}

@keyframes horizontalAnimation {
    0%, 23% {
        left: 100vw;
    }
    40%, 60% {
        left: 0;
    }
    77%, 100% {
        left: -100vw;
    }
}

/**** MEDIA QUERIES FOR TABLET- AND MOBILE-SPECIFIC STYLES ****/
@media screen and (max-width: 800px) {
        body:not(.finetune) .creative-slide { top: 0; animation: horizontalAnimation 12s ease-in-out infinite; }
        body:not(.finetune) .creative-slide:nth-of-type(1) { left: 0; animation-delay: -4s!important; }
        body:not(.finetune) .creative-slide:nth-of-type(2) { top: 0!important; left: -100vw; animation-delay: 0s!important; }
        body:not(.finetune) .creative-slide:nth-of-type(3) { top: 0!important; left: -100vw; animation-delay: -8s!important; }
        body:not(.finetune) .animation-container { position: relative!important; height: 28rem; }
}

@media screen and (max-width: 667px) {
        body:not(.finetune) .animation-container { height: 32rem; }
}