/* Formulas:
   n ... Number of images
   d ... Duration to display in s
   f ... Duration to fade in/out in s

   t ... total animation duration = (d + f) * n
   animation delay per image = d + f

   Fade animation keyframes:
   0%
   d/t * 100%
   (d + f) / t * 100%
   100% - (f/t * 100%)
   100%

   I use now:
   n=4
   d=3s
   f=2s
   t=20s
*/

.fadein {
    width: 100%;
    position: absolute;
    min-height: 14em;
    z-index: -1;
}

.fadein .pic {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    -webkit-animation: fade 20s infinite;
    animation: fade 20s infinite;
    z-index: 99;
}

.fadein #pic1 {
    background-image: var(--linear-gradient), url('../assets/img/peony-background.jpg');
    animation-delay: 0s;
}

.fadein #pic2 {
    background-image: var(--linear-gradient),  url('../assets/img/ja_pair1.jpg');
    animation-delay: 5s;
}

.fadein #pic3 {
    background-image: var(--linear-gradient),  url('../assets/img/cclaxenburg.webp');
    animation-delay: 10s;
}

.fadein #pic4 {
    background-image: var(--linear-gradient),  url('../assets/img/ja_pair3.jpg');
    animation-delay: 15s;
}

@-webkit-keyframes fade {
    0% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade {
    0% {
        opacity: 1;
    }
    15% {
        opacity: 1;
    }
    25% {
        opacity: 0;
    }
    90% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}