/*

- slider1 + fade1 = 600x400px und 6 bilder im slider


Info wie die Prozente für die opacity berechnet werden:

Berechnungsbeispiel für 5 Bilder:
A = Anzahl der Bilder (5 Bilder)
Z = Zeit die ein Bild komplett sichtbar ist (4 Sekunden)
D = Dauer einer Überblendung (2 Sekunden)
G = ( Z + D ) * A = Gesamtdauer der Animation (30 Sekunden)
S = G / A = Staffelung der Startzeiten (6 Sekunden)
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{opacity:0;} -                                  = 0%
{opacity:1;} - [ 100% * D / G  ]                = 6,66%
{opacity:1;} - [ 100% / A ]                     = 20%
{opacity:0;} - [ 100% * ( Z + ( 2 * D ) ) / G ] = 26,66%
{opacity:0;} -                                  = 100%

Infos von: http://www.webdesign-klamonfra.de/codeschnipsel/diashow.php 

*/


#slider1 {
    height: 300px;
    width: 400px;
    /*margin: 2em auto 0;
    border: 5px solid #eee;
    box-shadow: 1px 1px 5px 2px #777;*/
}

#slider1 figure {
    position: absolute;
    height: 300px;
    width: 400px;
    opacity: 0;
}

#slider1 figcaption {
  position: absolute;
  left: 0.8em;
  font-size: 1.5em;
  font-weight: bold;
  bottom: 0.3em;
  z-index: 2;
  color: white;
}

#slider1 figure:nth-of-type(1) {
    animation: fade1 36s ease-in-out infinite;
}

#slider1 figure:nth-of-type(2) {
    animation: fade1 36s 6s ease-in-out infinite;
}

#slider1 figure:nth-of-type(3) {
    animation: fade1 36s 12s ease-in-out infinite;
}

#slider1 figure:nth-of-type(4) {
    animation: fade1 36s 18s ease-in-out infinite;
}

#slider1 figure:nth-of-type(5) {
    animation: fade1 36s 24s ease-in-out infinite;        
}

#slider1 figure:nth-of-type(6) {
    animation: fade1 36s 30s ease-in-out infinite;        
} 

img.slider1 {
  width: 600px;
  height: 400px;  

}

@keyframes fade1 {
    /* Für 6 Bilder */
    5.55%, 16.66%    {opacity:1;}
    0%, 22.22%, 100% {opacity:0;}

    /* Info zur Bereich welche opacity siehe Oben bei Info */
    
    /* 
    Für 5 Bilder:
    6.66%, 20%       {opacity:1;}
    0%, 26.66%, 100% {opacity:0;}*/    
}      

 
@media screen and (max-width:700px) { /* Umschalten auf schmales handy */


#slider1 {
    width: 370px;
    height: 246px;
}

#slider1 figure {
    position: absolute;
    top:150px;
    display: flex;
    justify-content: center;
    /*width: 370px;
    height: 246px;*/
    opacity: 0;
}

img.slider1 {
  width: 250px;
  height: 200px;


}
 
}
       

@media screen and (max-width:1070px) { /* Umschalten auf tablet (scheinbar auch phone)*/


#slider1 {
    width: 100%;   /* Gesamtbreite vom div wo die figures und images drin angezeigt werden, entscheidend ist aber das figure css */
    height: 320px; /* Gesamthöhe vom div wo die figures und images drin angezeigt werden, entscheidend ist aber das figure css */
}

#slider1 figure {
    position: absolute;      
    top:150px;
    display: flex;
    justify-content: center;
    /*left: 50px; */
    width: 100%;  /* Gesamtbreite wo die images drin angezeigt werden */
    height: 320px; /* Gesamthöhe wo die images drin angezeigt werden */                                                        
    opacity: 0;
}

img.slider1 {
  /*width: 500px;*/ 
  width: 80%; /* Breite vom Image im figure ... */
  height: 88%;  /* Höhe vom Image im figure ... */  

}
 
}