:root {
    --duration: 20s;
    --delay: 20s;
}



.animated-slideup-gallery {
    position: relative;
    margin: 0 auto;
    padding: 0 1rem;
    height: 100vh;
    overflow: hidden !important;
    transform-style: preserve-3d;
    perspective: 25rem;
}

    .animated-slideup-gallery img {
        --duration: 40s;
        --name: float-up-1;
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        width: auto;
        transform: translateY(200vh);
        animation: var(--name) var(--duration) linear infinite;
        box-shadow: 1px 3px 15px rgba(0, 0, 0, 0.5);
        z-index: 1;
    }

img:nth-child(1) {
    animation-delay: 0s;
}

img:nth-child(2) {
    animation-delay: -3s;
}

img:nth-child(3) {
    animation-delay: -6s;
}

img:nth-child(4) {
    animation-delay: -9s;
}

img:nth-child(5) {
    animation-delay: -12s;
}

img:nth-child(6) {
    animation-delay: -15s;
}

img:nth-child(7) {
    animation-delay: -18s;
}

img:nth-child(8) {
    animation-delay: -21s;
}

img:nth-child(9) {
    animation-delay: -24s;
}

img:nth-child(10) {
    animation-delay: -27s;
}

img:nth-child(1) {
    --name: float-up-1;
    --duration: calc(20s * 1);
    left: 0vw;
    z-index: -1;
}

img:nth-child(2) {
    --name: float-up-3;
    --duration: calc(20s * 3);
    left: 10vw;
    z-index: -3;
}

img:nth-child(3) {
    --name: float-up-2;
    --duration: calc(20s * 2);
    left: 20vw;
    z-index: -2;
}

img:nth-child(4) {
    --name: float-up-1;
    --duration: calc(20s * 1);
    left: 36vw;
    z-index: -1;
}

img:nth-child(5) {
    --name: float-up-3;
    --duration: calc(20s * 3);
    left: 42vw;
    z-index: -3;
}

img:nth-child(6) {
    --name: float-up-2;
    --duration: calc(20s * 2);
    left: 15vw;
    z-index: -2;
}

img:nth-child(7) {
    --name: float-up-2;
    --duration: calc(20s * 2);
    left: 65vw;
    z-index: -2;
}

img:nth-child(8) {
    --name: float-up-3;
    --duration: calc(20s * 3);
    left: -20vw;
    z-index: -3;
}

img:nth-child(9) {
    --name: float-up-1;
    --duration: calc(20s * 1);
    left: 68vw;
    z-index: -1;
}

img:nth-child(10) {
    --name: float-up-2;
    --duration: calc(20s * 2);
    left: 0vw;
    z-index: -2;
}

@keyframes float-up-3 {
    from {
        transform: translateY(200vh) translateZ(-50vh);
    }

    to {
        transform: translateY(-200vh) translateZ(-50vh);
    }
}

@keyframes float-up-2 {
    from {
        transform: translateY(150vh) translateZ(-25vh);
    }

    to {
        transform: translateY(-150vh) translateZ(-25vh);
    }
}

@keyframes float-up-1 {
    from {
        transform: translateY(100vh);
    }

    to {
        transform: translateY(-100vh);
    }
}

@keyframes spin {
    10%, 100% {
        transform: rotateY(360deg);
    }
}

@keyframes shrink {
    0% {
        transform: scale(1) translateX(0);
    }

    2.5% {
        transform: scale(0.75) translateX(5%);
    }

    7.5% {
        transform: scale(0.75) translateX(-5%);
    }

    10%, 100% {
        transform: scale(1);
    }
}