/* bilderblenden:  https://wiki.selfhtml.org/wiki/CSS/Tutorials/Bildwechsler
bilderschieben: http://www.webdesign-klamonfra.de/codeschnipsel/css3-slider.php */

#slider {
    position:relative;
	top:0px;
    ..height:550px;	/* kein height, wenn parents-div position:relative */
    width:100%;
    margin:0;
    cursor:pointer;
    ..overflow:hidden; /* sonst über ganze Seite das, kann weg, wenn parents-div (z.B. div.slidercontainer) */
	-webkit-border-radius:0; -moz-border-radius:0; border-radius:0; 
}

#slider figure {
    position:absolute;
    margin:0;
    width:100%;
    opacity:0; 
}
#slider figure > img {width:100%; max-width:1900px;}  /* ohne height bleibt Bild Seitenverhältnis responsive |  wenn slider nicht mit Bild gefüllt ist, Ausdehnung <a ..> bis unendlich nach unten */

#slider figcaption {
    position:absolute;
    top:75%;	
    height:7%;
    width:8em;
    left: -2000px;	
    color:#444;
    font:1.5vw serif;
    ..text-transform:uppercase;
    text-align:right;
	padding-right:3%;
    ..text-shadow:-1px -1px 0 rgba(255, 255, 255, .3), 1px 1px 0 #505050;
    background:rgba(255, 255, 255, .7);
    border:1px solid #fff;
    border-left:0;
    transition: 1s;
}

#slider:hover figcaption {
    left:0;
}



/* ------------------ Animation pause Mausover ----------------*/
.pause {
	position: absolute;
	top: 300px;
	left: 112px;
	color: #eee;
	font: bolder 2.3em/2 Impact;
	opacity: 0;
	transition: .5s;
	z-index: 2;
}
.pause:after {
    content: 'I I';
}
#slider:hover .pause {
    opacity:1;
}

#slider:hover figure {
    animation-play-state:paused;
}

/* ------------------  Animation bilder überblenden, 1.Bild Hintergrund (=Vorschau), nicht im slider (class=bgslider), dann verzögerter slider 4 Bilder, delay-Staffelung 8 Sek um 3 Sek verschoben   ---------------- */

#slider figure {
  animation: bilderblenden 23s infinite;
  animation-delay: 3s;
}
#slider figure:nth-of-type(2) {
  animation-delay: 5s;
}
#slider figure:nth-of-type(3) {
  animation-delay: 10s;
}
#slider figure:nth-of-type(4) {
  animation-delay: 15s;
}

@keyframes bilderblenden {
    0% {opacity: 0;}
   16.66% {opacity: 1;}
   25% {opacity: 1;}
   41.66% {opacity: 0;}
  100% {opacity: 0;}
}






/*
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)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - -

{top:-400px; opacity:0;} -                                  = 0%

{top:0;      opacity:1;} - [ 100 * D / G ]                = 6,66%

{top:0;      opacity:1;} - [ 100 / A ]                     = 20%

{top: 400px; opacity:0;} - [ 100 * ( Z + ( 2 * D ) ) / G ] = 26,66%

{top:-400px; opacity:0;} -                                  = 100%
*/




/* ------------------ Animation bilder v re nach  li schieben ----------------
#slider figure:nth-of-type(1) {
    animation: bilderschieben 30s ease-in-out infinite;
}
#slider figure:nth-of-type(2) {
    animation: bilderschieben 30s 6s ease-in-out infinite;
}
#slider figure:nth-of-type(3) {
    animation: bilderschieben 30s 12s ease-in-out infinite;
}
#slider figure:nth-of-type(4) {
    animation: bilderschieben 30s 18s ease-in-out infinite;
}
#slider figure:nth-of-type(5) {
    animation: bilderschieben 30s 24s ease-in-out infinite;
}

@keyframes bilderschieben {
      0%,    {top:-400px; opacity:0; z-index:0;}
      6.66%, {top:0;      opacity:1; z-index:1;}
     20%     {top:0;      opacity:1; z-index:1;}
     26.66%  {top: 400px; opacity:0; z-index:0;}
    100%     {top:-400px; opacity:0; z-index:0;}
}
*/