/* -----------------------------------------------------------------------------*/
/* ----------------------------                  -------------------------------*/
/* ----------------------------  BILD-Animation  -------------------------------*/
/* ----------------------------                  -------------------------------*/
/* -----------------------------------------------------------------------------*/
/* diese Schiebe-SlideShow funktioniert sauber mit 3, 4 oder 9 Bildern 100:(3+1)=25%, 100:(4+1)=20% oder 100:(9+1)=10% */
/* zusätzlich habe ich 5 Bilder eingebaut: 16.666666666% - hier am rechner funktioniert das.  */
/* Allerdings könnten sich da Fehler zeigen: schon ein Milli-Prozent zu viel (16.67%) und schon geht es nicht mehr - alles verzieht sich!!! */
   
				
 /* Der Bildausschnitt, mit dem auf die Foto-Tapete geguckt wird */
.SlideTV { overflow: hidden;}
 
/*Foto-Tapete: Die Bilder werden nebeneinander gelegt. Es muss immer ein Bild mehr sein, als eigentlich gezeigt wird */
.fototapete, .fototapete figure {margin: 0;}

/* Zuweisung je nach ID(#drei,#vier,#fünf,#neun), welche Animation angesprungen werden soll */
.fototapete#drei {
    position: relative;
    left: 0;
    width: 400%;			/* Breite der Tapete: je Bild 100%, für 3 Bilder deshalb 300%+100% */
    padding: 0;
    /* Überblend-Animation */
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s  ease-in-out;
	/* Animation */
  	-webkit-animation:picslide3 15s ease-in-out infinite;
  	-moz-animation:picslide3 15s ease-in-out infinite;
  	-o-animation:picslide3 15s ease-in-out infinite;
    animation: picslide3 15s ease-in-out infinite;
}
.fototapete#vier {
    position: relative;
    left: 0;
    width: 500%;			/* Breite der Tapete: je Bild 100%, für 4 Bilder deshalb 400%+100% */
    padding: 0;
    /* Überblend-Animation */
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s  ease-in-out;
	/* Animation */
  	-webkit-animation:picslide4 20s ease-in-out infinite;
  	-moz-animation:picslide4 20s ease-in-out infinite;
  	-o-animation:picslide4 20s ease-in-out infinite;
    animation: picslide4 20s ease-in-out infinite;
}
.fototapete#fünf {
    position: relative;
    left: 0;
    width: 600%;			/* Breite der Tapete: je Bild 100%, für 5 Bilder deshalb 500%+100% */
    padding: 0;
    /* Überblend-Animation */
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s  ease-in-out;
	/* Animation */
  	-webkit-animation:picslide5 25s ease-in-out infinite;
  	-moz-animation:picslide5 25s ease-in-out infinite;
  	-o-animation:picslide5 25s ease-in-out infinite;
    animation: picslide5 25s ease-in-out infinite;
}
.fototapete#neun {
    position: relative;
    left: 0;
    width: 1000%;			/* Breite der Tapete: je Bild 100%, für 9 Bilder deshalb 900%+100% */
    padding: 0;
    /* Überblend-Animation */
    -webkit-transition: left .8s ease-in-out;
    -moz-transition: left .8s ease-in-out;
    -o-transition: left .8s ease-in-out;
    transition: left .8s  ease-in-out;
	/* Animation */
  	-webkit-animation:picslide9 40s ease-in-out infinite;
  	-moz-animation:picslide9 40s ease-in-out infinite;
  	-o-animation:picslide9 40s ease-in-out infinite;
    animation: picslide9 40s ease-in-out infinite;
}

/* Restaurierung nach der Tapeten-Box */
 .fototapete:after {
    content: ".";
    display: block;
    height: .1px;
    clear: both;
    visibility: hidden;
    font-size: 0;
    overflow: hidden;
}

/* Jede <div> innerhalb der Tapete stellt ein Bild dar!
   Jedes Bild darf nur den ihm zugedachten Teil der Gesamtbreite einnehmen. */
.fototapete#drei > div {
    float: left;
    width: 25%;	/* bei 4 (3 + 1) Bildern bleibt für ein Bild=25% */
    position: relative;
}
.fototapete#vier > div {
    float: left;
    width: 20%;	/* bei 5 (4 + 1) Bildern bleibt für ein Bild=20% */
    position: relative;
}
.fototapete#fünf > div {
    float: left;
    width: 16.6666%;	/* bei 6 (5 + 1) Bildern bleibt für ein Bild=16.6666% */
    position: relative;
}
.fototapete#neun > div {
    float: left;
    width: 10%;	/* bei 10 (9 + 1) Bildern bleibt für ein Bild=10% */
    position: relative;
}

/* Bilder responsive - jedes Bild hat eine Einzelbreite von 100% */
.fototapete img {
    width: 100%;
    height: auto;
}
  
/* Bildunterschrift auf dem Bild positionieren */

.fototapete figcaption{
}
.fototapete figcaption {
    display: block;
    color: #fff;
    position: absolute;
    left: 0;
    bottom: 1em;
    padding: 0.6em 1em 0.6em 0.6em;
    background: rgba(0,0,0,.5); border-radius:  0 20px 20px 0;
}

/*##################################*/
/* ###### ERGÄNZEN:   Sekundenzeiten ausprobieren   */
/*##################################*/


				
/* Keyframes für die verschiedenen Browser */
				
/* -moz-    */
@-moz-keyframes picslide3{
0%   {left: 0;}
20%  {left: 0;}
33%  {left: -100%;}
53%  {left: -100%;}
66%  {left: -200%;}
86%  {left: -200%;} 
100% {left: -300%;}
}
@-moz-keyframes picslide4{
0%   {left: 0;}
20%  {left: 0;}
25%  {left: -100%;}
45%  {left: -100%;}
50%  {left: -200%;}
70%  {left: -200%;} 
75%  {left: -300%;}
95%  {left: -300%;}  
100% {left: -400%;}
}
@-moz-keyframes picslide5{
0%   {left: 0;}
12%  {left: 0;}
20%  {left: -100%;}
32%  {left: -100%;}
40%  {left: -200%;}
52%  {left: -200%;} 
60%  {left: -300%;}
72%  {left: -300%;}  
80%  {left: -400%;}  
92%  {left: -400%;}  
100% {left: -500%;}
}
@-moz-keyframes picslide9{
0%   {left: 0;}
8%   {left: 0;}
11%  {left: -100%;}
19%  {left: -100%;}
22%  {left: -200%;}
30%  {left: -200%;} 
33%  {left: -300%;}
41%  {left: -300%;}  
44%  {left: -400%;}  
52%  {left: -400%;}  
55%  {left: -500%;}
63%  {left: -500%;}  
66%  {left: -600%;}
74%  {left: -600%;}  
77%  {left: -700%;}
85%  {left: -700%;}  
88%  {left: -800%;}
96%  {left: -800%;}  
100% {left: -900%;}
}

/* -webkit-    */
@-webkit-keyframes picslide3{
0%   {left: 0;}
20%  {left: 0;}
33%  {left: -100%;}
53%  {left: -100%;}
66%  {left: -200%;}
86%  {left: -200%;} 
100% {left: -300%;}
}
@-webkit-keyframes picslide4{
0%   {left: 0;}
20%  {left: 0;}
25%  {left: -100%;}
45%  {left: -100%;}
50%  {left: -200%;}
70%  {left: -200%;} 
75%  {left: -300%;}
95%  {left: -300%;}  
100% {left: -400%;}
}
@-webkit-keyframes picslide5{
0%   {left: 0;}
12%  {left: 0;}
20%  {left: -100%;}
32%  {left: -100%;}
40%  {left: -200%;}
52%  {left: -200%;} 
60%  {left: -300%;}
72%  {left: -300%;}  
80%  {left: -400%;}  
92%  {left: -400%;}  
100% {left: -500%;}
}
@-webkit-keyframes picslide9{
0%   {left: 0;}
8%   {left: 0;}
11%  {left: -100%;}
19%  {left: -100%;}
22%  {left: -200%;}
30%  {left: -200%;} 
33%  {left: -300%;}
41%  {left: -300%;}  
44%  {left: -400%;}  
52%  {left: -400%;}  
55%  {left: -500%;}
63%  {left: -500%;}  
66%  {left: -600%;}
74%  {left: -600%;}  
77%  {left: -700%;}
85%  {left: -700%;}  
88%  {left: -800%;}
96%  {left: -800%;}  
100% {left: -900%;}
}


/* -o-    */
@-o-keyframes picslide3{
0%   {left: 0;}
20%  {left: 0;}
33%  {left: -100%;}
53%  {left: -100%;}
66%  {left: -200%;}
86%  {left: -200%;} 
100% {left: -300%;}
}
@-o-keyframes picslide4{
0%   {left: 0;}
20%  {left: 0;}
25%  {left: -100%;}
45%  {left: -100%;}
50%  {left: -200%;}
70%  {left: -200%;} 
75%  {left: -300%;}
95%  {left: -300%;}  
100% {left: -400%;}
}
@-o-keyframes picslide5{
0%   {left: 0;}
12%  {left: 0;}
20%  {left: -100%;}
32%  {left: -100%;}
40%  {left: -200%;}
52%  {left: -200%;} 
60%  {left: -300%;}
72%  {left: -300%;}  
80%  {left: -400%;}  
92%  {left: -400%;}  
100% {left: -500%;}
}
@-o-keyframes picslide9{
0%   {left: 0;}
8%   {left: 0;}
11%  {left: -100%;}
19%  {left: -100%;}
22%  {left: -200%;}
30%  {left: -200%;} 
33%  {left: -300%;}
41%  {left: -300%;}  
44%  {left: -400%;}  
52%  {left: -400%;}  
55%  {left: -500%;}
63%  {left: -500%;}  
66%  {left: -600%;}
74%  {left: -600%;}  
77%  {left: -700%;}
85%  {left: -700%;}  
88%  {left: -800%;}
96%  {left: -800%;}  
100% {left: -900%;}
}

/*     */
@keyframes picslide3{
0%   {left: 0;}
20%  {left: 0;}
33%  {left: -100%;}
53%  {left: -100%;}
66%  {left: -200%;}
86%  {left: -200%;} 
100% {left: -300%;}
}
@keyframes picslide4{
0%   {left: 0;}
20%  {left: 0;}
25%  {left: -100%;}
45%  {left: -100%;}
50%  {left: -200%;}
70%  {left: -200%;} 
75%  {left: -300%;}
95%  {left: -300%;}  
100% {left: -400%;}
}
@keyframes picslide5{
0%   {left: 0;}
12%  {left: 0;}
20%  {left: -100%;}
32%  {left: -100%;}
40%  {left: -200%;}
52%  {left: -200%;} 
60%  {left: -300%;}
72%  {left: -300%;}  
80%  {left: -400%;}  
92%  {left: -400%;}  
100% {left: -500%;}
}
@keyframes picslide9{
0%   {left: 0;}
8%   {left: 0;}
11%  {left: -100%;}
19%  {left: -100%;}
22%  {left: -200%;}
30%  {left: -200%;} 
33%  {left: -300%;}
41%  {left: -300%;}  
44%  {left: -400%;}  
52%  {left: -400%;}  
55%  {left: -500%;}
63%  {left: -500%;}  
66%  {left: -600%;}
74%  {left: -600%;}  
77%  {left: -700%;}
85%  {left: -700%;}  
88%  {left: -800%;}
96%  {left: -800%;}  
100% {left: -900%;}
}


/* -----------------------------------------------------------------------------*/
/* ----------------------------                  -------------------------------*/
/* ----------------------------  Bild-TEXT-Animation  -------------------------------*/
/* ----------------------------                  -------------------------------*/
/* -----------------------------------------------------------------------------*/
.fotoTV {width:100%; overflow:hidden; position:relative;}

/* ----- 3 Text-Bilder ----- */
.fotoTV#dreitext figure{position:absolute; -webkit-animation:fototext_fade3 21s infinite; animation:fototext_fade3 21s infinite; opacity:0; width: 100%; margin: 0;}

.fotoTV#dreitext figure:nth-child(1){-webkit-animation-delay:0s;animation-delay:0s;}
.fotoTV#dreitext figure:nth-child(2){-webkit-animation-delay:7s;animation-delay:7s;}
.fotoTV#dreitext figure:nth-child(3){-webkit-animation-delay:14s;animation-delay:14s;}
@-webkit-keyframes fototext_fade3 {
	0%{opacity:0;} 
	14.22%{opacity:1;} 
	33.33%{opacity:1;} 
	47.62%{opacity:0;} 
	100%{opacity:0;}
	}
@keyframes fototext_fade3 {
	0%{opacity:0;} 
	14.22%{opacity:1;} 
	33.33%{opacity:1;} 
	47.62%{opacity:0;} 
	100%{opacity:0;}
	}