/* For the timing of the slideshow, take 100 / the number of pictures you have */
@keyframes slideshow {
    0% {
        opacity: 0;
    }
    4% {
        opacity: 1;
    }
    5% {
        opacity: 1;
    }
    10% {
        opacity: 0;
    }
    100% {
        opacity: 0;
    }
}

.slideshow-1 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 0s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -1;
}

.slideshow-2 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 5s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -2;
}

.slideshow-3 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 10s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -3;
}

.slideshow-4 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 15s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -4;
}

.slideshow-5 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 20s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -5;
}

.slideshow-6 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 25s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -6;
}

.slideshow-7 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 30s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -7;
}

.slideshow-8 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 35s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -8;
}

.slideshow-9 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 40s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -9;
}

.slideshow-10 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 45s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -10;
}

.slideshow-11 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 50s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -11;
}

.slideshow-12 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 55s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -12;
}

.slideshow-13 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 60s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -13;
}

.slideshow-14 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 65s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -14;
}

.slideshow-15 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 70s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -15;
}

.slideshow-16 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 75s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -16;
}

.slideshow-17 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 80s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -17;
}

.slideshow-18 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 85s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -18;
}

.slideshow-19 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 90s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -19;
}

.slideshow-20 {
    opacity: 0;
    animation-name: slideshow;
    animation-delay: 95s;
    animation-duration: 100s;
    animation-iteration-count: infinite;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    z-index: -20;
}