#slides {
    transition: transform 0.5s;
}

.slide-caption {

    letter-spacing: 14px;
    opacity: 0;
}

.z-slide:first-of-type .slide-caption {
    opacity: 1;
}

.caption-anim {
    animation: caption-anim 1s 0.2s;
}

@keyframes caption-anim {
    
    0% {

        opacity: 0;
        transform: translateX(-30px);
    }
    100% {

        opacity: 1;
        transform: translateX(0);
    }
}

#img-slider .z-slide img {

    width: 100vw;
    height: calc(50vh + 50vw);
    max-height: 100vh;
    user-select: none;
}

#nav-arrows {
    user-select: none;
}

#nav-arrows span {

    padding: 0px 18px 8px 15px;
    color: #fffa;
    cursor: pointer;
    transition: all 0.5s;
}

#nav-arrows span:hover {

    background: #0009;
    color: white;
}

.nav-dot {

    background: #fffa;
    cursor: pointer;
    transition: all 0.6s;
}

.nav-dot:hover {
    background: #00ccff;
}

.active-dot {

    background: #00ffdd;
    pointer-events: none;
}

@media only screen and (min-width: 720px) {

    #img-slider img {
        height: 100vh;
    }

    .slide-caption {
        letter-spacing: 24px;
    }
}