/* ================================================================================================
 Stylesheet für die Bilderschow auf der Startseite von meteosa.de
 Datei: bilderschow.css
 Datum: 30.01.2020
 Autor: Olaf Sakuth
 ================================================================================================*/

/* Bilder übereinander legen */
#bildershow {
    position: relative;
}

#bildershow figure {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    width: 100%;
    height: auto;
}

.bildershow_bild {
    width: 100%;
    height: auto;
}

#bildershow figure:last-of-type {
    position: relative;
}
/*Ende - Bilder übereinander legen */

.klasse_bild1 {
    animation-name: bs1;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
}

.klasse_bild2 {
    animation-name: bs2;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
}

.klasse_bild3 {
    animation-name: bs3;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
}

.klasse_bild4 {
    animation-name: bs4;
    animation-duration: 40000ms;
    animation-iteration-count: infinite;
}

@keyframes bs1 {
    0% {opacity: 1;}
    20% {opacity: 1;}   
    25% {opacity: 0;}
    94% {opacity: 0;}
    99% {opacity: 1;}
}

@keyframes bs2 {
    0% {opacity: 0;}
    20% {opacity: 0;}   
    25% {opacity: 1;}
    45% {opacity: 1;}
    50% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes bs3 {
    0% {opacity: 0;}
    45% {opacity: 0;}   
    50% {opacity: 1;}
    70% {opacity: 1;}
    75% {opacity: 0;}
    100% {opacity: 0;}
}

@keyframes bs4 {
     0% {opacity: 0;}
    70% {opacity: 0;}   
    75% {opacity: 1;}
    95% {opacity: 1;}
    100% {opacity: 0;}
}