#carousel {
    color:#fff;
    font:14px/1.3 Arial,sans-serif;
	//background: #F2F2F2;
	//padding: 30px 0 30px 0;
}

/* fade slider */
.carousel-slides {
    height:500px;
    overflow:hidden;
    position:relative;
    width:100%;
		background: #F0F0F0;

}
.carousel-slides ul {
	list-style: none;
    display: inline-block;
    vertical-align: middle;
	margin-left: auto;
	}


/* keyframes #anim_slides (Bilder Animation) */

/*
Die Animation jedes Bildes ist quasi die Komplette animation, allerdings wird diese durch ein delay nacheinander abgespielt.

Das Bild ist erst unsichtbar und wird dann relativ schnell sichtbar. Bleibt für einige Zeit sichtbar bis es wieder unsichtbar wird. Das Bild bleibt dann für die Restdauer
der Animation Unsichtbar.

Eine genaue Prozentberechnung ist mir nicht gelungen und mache dies immer nach aussehen und testen.


- Dominik
*/

@-webkit-keyframes anim_slides { /* Chrome Ab 4.0 bis 43.0 | Safari Ab 4.0 bis 9.0 | Opera Ab 15.0 bis 30.0 */
    0% 		{opacity:0;}
    4% 		{opacity:1;}
    20% 	{opacity:1;}
	25% 	{opacity:0;}
    100% 	{opacity:0;}
}
@-moz-keyframes anim_slides { /* Mozilla Firefox Version vor 16.0 */
    0% 		{opacity:0;}
    4% 		{opacity:1;}
    20% 	{opacity:1;}
	25% 	{opacity:0;}
    100% 	{opacity:0;}
}
@keyframes anim_slides { /* Chrome Ab 43.0 | Safari Ab 9.0 | Opera Ab 30.0 */
    0% 		{opacity:0;}
    4% 		{opacity:1;}
    20% 	{opacity:1;}
	25% 	{opacity:0;}
    100% 	{opacity:0;}
}

.carousel-slides ul li {
    opacity:0;	

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 28.0s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_slides;
    -moz-animation-duration: 28.0s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* css3 delays */

.carousel-slides ul  li:nth-child(1), .carousel-slides ul  li:nth-child(1) div{
    -webkit-animation-delay: 0.0s;
    -moz-animation-delay: 0.0s;
	animation-delay: 0.0s;
}
.carousel-slides ul  li:nth-child(2), .carousel-slides ul  li:nth-child(2) div{
    -webkit-animation-delay: 7.0s;
    -moz-animation-delay: 7.0s;
	animation-delay: 7.0s;
}
.carousel-slides ul  li:nth-child(3), .carousel-slides ul  li:nth-child(3) div{
    -webkit-animation-delay: 14.0s;
    -moz-animation-delay: 14.0s;
	animation-delay: 14.0s;
}
.carousel-slides ul  li:nth-child(4), .carousel-slides ul  li:nth-child(4) div{
    -webkit-animation-delay: 21.0s;
    -moz-animation-delay: 21.0s;
	animation-delay: 21.0s;
}



/* Formatierung und Positionierung der Bilder. Damit die Animation richtig funktioniert sollten alle Bilder die Selbe Größe haben. */
.carousel-slides ul li img {
	width: 400px;
	height: 400px;
	border-style: solid;
	border-width: 1px;
	border-color: #404040;
	position:absolute;
	left: 0vw;
	right: 0vw;
	top: 25px;
	bottom: 0px;
	margin: 30px 55%;
}

/* Formatierung der Hintergrundbilder */
#carousel-background {
	width: 100%;
	height: 100vw; /* Macht die Größe des Bildes 100% von der Breite des Viewports. Somit bleibt das bild immer gleich in den Dimensionen. */
	opacity: 0.5;
	position:absolute;
	left: -5px;
	right: 0px;
	top: -30vw; /* Verursacht, dass das Bild sich etwas nach oben Bewegt basierend auf die Viewport Breite. */
	bottom: 0px;
	margin: 0 auto;
	
	border-style: none;
	border-width: 0;
	border-color: #FFFFFF;
}

/* Keyframes anim_titles (Textfeld Animation) */

/*
Die Textfeld Animation is relativ ähnlich wie die Bild Animation. Außer das es nicht nur unsichtbar wird sondern auch von links einfliegt, einen Gummiband Effekt hat, stehen bleibt
und dann wieder nach links hinausfliegt.

Das Gummiband Effekt entsteht dadurch entsteht dadurch, dass die erste Position etwas weiterfliegt als die Wirkliche Position sein wird. Das Textfeld bewegt sich dann im nächsten
Prozent in die Wirkliche Position.

Eine genaue Prozentberechnung ist mir nicht gelungen und mache dies immer nach aussehen und testen.

- Dominik
*/

@-webkit-keyframes anim_titles { /* Chrome Ab 4.0 bis 43.0 | Safari Ab 4.0 bis 9.0 | Opera Ab 15.0 bis 30.0 */
    0%		{left:-100%;	opacity:0;}
    5%  	{left:15vw;		opacity:1;} /**/
	6%  	{left:14vw;		opacity:1;} /* Für diese 3 Keyframes wurde vw benutzt, somit positioniert sich die Box basierend auf die Breite des Viewports. */
    20% 	{left:14vw;  	opacity:1;} /**/
    27% 	{left:-100%;  	opacity:0;}
    100%	{left:-100%;  	opacity:0;}
}
@-moz-keyframes anim_titles { /* Mozilla Firefox Version vor 16.0 */
    0%		{left:-100%;	opacity:0;}
    5%  	{left:15vw;		opacity:1;} /**/
	6%  	{left:14vw;		opacity:1;} /* Für diese 3 Keyframes wurde vw benutzt, somit positioniert sich die Box basierend auf die Breite des Viewports. */
    20% 	{left:14vw;  	opacity:1;} /**/
    27% 	{left:-100%;  	opacity:0;}
    100%	{left:-100%;  	opacity:0;}
}
@keyframes anim_titles { /* Chrome Ab 43.0 | Safari Ab 9.0 | Opera Ab 30.0 */
    0%		{left:-100%;	opacity:0;}
    5%  	{left:15vw;		opacity:1;} /**/
	6%  	{left:14vw;		opacity:1;} /* Für diese 3 Keyframes wurde vw benutzt, somit positioniert sich die Box basierend auf die Breite des Viewports. */
    20% 	{left:14vw;  	opacity:1;} /**/
    27% 	{left:-100%;  	opacity:0;}
    100%	{left:-100%;  	opacity:0;}
}

/* Textfeld Formatierungen */
.carousel-slides ul li div {
	left:-100%;
    background-color:#F2F2F2;
	border-style: solid;
	border-width: 1px;
	border-color: #404040;
	color: #404040;
    font-size:24px;
    padding:20px;
    position:absolute;
    top:225px;
	width: 32.5vw; /* Begrenzt die Breite basieren auf die Breite des Viewports in %. Verhindert das überlappen mit dem Bild. */
	height:auto; 
	background: rgba(242, 242, 242, 0.8);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;

    /* css3 animation */
    -webkit-animation-name: anim_titles;
    -webkit-animation-duration: 28.0s;
    -webkit-animation-timing-function: ease;
    -webkit-animation-iteration-count: infinite;
    -webkit-animation-direction: normal;
    -webkit-animation-delay: 0;
    -webkit-animation-play-state: running;
    -webkit-animation-fill-mode: forwards;

    -moz-animation-name: anim_titles;
    -moz-animation-duration: 28.0s;
    -moz-animation-timing-function: ease;
    -moz-animation-iteration-count: infinite;
    -moz-animation-direction: normal;
    -moz-animation-delay: 0;
    -moz-animation-play-state: running;
    -moz-animation-fill-mode: forwards;
}

/* Switch */
.carousel-switch{
  width:200px;
  height:10px;
  position:relative; /* Von absolute auf relative geändert. Verhindert inkorrekte positionierung. */
  top: -475px;
  z-index:99;
  left:50px;
}
.carousel-switch > ul{
  list-style:none;
  padding-inline-start: 0px; /* Verhindert ein Problem bei dem durch ein Zeilenumbruch die Punkte untereinander angezeigt werden. */
}
.carousel-switch > ul > li{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#333;
  float:left;
  margin-right:5px;
  cursor:pointer;
}
.carousel-switch ul{
  overflow:hidden;
}
.carousel-on{
  width:10px;
  height:10px;
  border-radius:50%;
  background:#f39c12;
  position:relative;
  
  /* Gesamte Durchlaufzeit der Animation */
  -webkit-animation:on 28.0s infinite;
  -moz-animation:on 28.0s infinite;
  animation:on 28.0s infinite;
}

.carousel-button-details {
	width: 120px;
	z-index: 999;
}

/* Keyframes on (Animation für den Punkt) */

/*
Die Berechnung der Punktanimation basiert sich hauptsächlich auf Prozent durch Menge der Punkte.

Beispiel: 100% / 4 = 25%
Das heißt also, dass der erste Punkt von 0 bis etwa 20% geht, 5% etwa für den Übergang lassen und der nächste Punkt dan bei 25% startet. Dann wieder etwa bis 45% stehen lassen und
dann 5% bis zum nächsten punkt bei 50% und so weiter.

Es ist wichtig den letzten Pozentsatz NIE auf 100% zu setzen, sondern eher etwa 95% bis 97% maximum! Grund dafür ist, dass 100% wieder die selbe position ist wie der erste Punkt.

Wenn dies fertig ist, speichern. Es wird auffallen, dass die Punkte noch immer nicht ganz Synchron sind. Meist muss man bei den "Anfangsprozenten" (In diesem Beispiel 25%, 50%, 75%)
noch ein paar Prozente dazu rechnen.

In diesem Fall habe ich bei allen noch 7% hinzugerechnet. Somit landet der Orangene Punkt immer im nächsten Schwarzen Punkt, wenn die Text animation ungefähr komplett stehen bleibt.
Dies kann man nur wirklich mit testen ermitteln und habe selbst noch keine Rechneriche Lösung gefunden.

-Dominik

*/


@-webkit-keyframes on{ /* Chrome Ab 4.0 bis 43.0 | Safari Ab 4.0 bis 9.0 | Opera Ab 15.0 bis 30.0 */
  
  0%,100%{margin-left:0%;} 
  20%{margin-left:0%;} 
  
  /* Punkt 2 */	
  32%{margin-left:15px;} 
  45%{margin-left:15px;} 
  
  /* Punkt 3 */		
  57%{margin-left:30px;} 
  70%{margin-left:30px;}  
  
  /* Punkt 4 */		
  82%{margin-left:45px;} 
  97%{margin-left:45px;}
}

@-moz-keyframes on{ /* Mozilla Firefox Version vor 16.0 */
  
  0%,100%{margin-left:0%;} 
  20%{margin-left:0%;} 
  
  /* Punkt 2 */	
  32%{margin-left:15px;} 
  45%{margin-left:15px;} 
  
  /* Punkt 3 */		
  57%{margin-left:30px;} 
  70%{margin-left:30px;}  
  
  /* Punkt 4 */		
  82%{margin-left:45px;} 
  97%{margin-left:45px;} 
}

@keyframes on{ /* Chrome Ab 43.0 | Safari Ab 9.0 | Opera Ab 30.0 */
	
  0%,100%{margin-left:0%;} 
  20%{margin-left:0%;} 
  
  /* Punkt 2 */	
  32%{margin-left:15px;} 
  45%{margin-left:15px;} 
  
  /* Punkt 3 */		
  57%{margin-left:30px;} 
  70%{margin-left:30px;}  
  
  /* Punkt 4 */		
  82%{margin-left:45px;} 
  94%{margin-left:45px;}
}

/* PAUSIERENDER HOVER */
 #carousel:hover *{ /* Pausiert alle animationen wenn die Maus über das #slider div "schwebt" */
    -webkit-animation-play-state: paused;
    -moz-animation-play-state: paused;
    animation-play-state: paused;
  }



/* RESPONISVES */


/* Macht die meisten Elemente ab 1024px breite dynamisch */
@media only screen and (max-width: 1024px){
	.carousel-switch{
		top: -47.5vw;
		left: 5vw;
	}
	
	.carousel-slides{
		height: 51vw !important;
	}
	
	.carousel-slides ul li div {
		top: 20vw;
		font-size: 2.5vw;
		width: 30vw;
		height: auto;
		padding: 2vw;
	}
	
	.carousel-button-details {
		width: 10vw;
		z-index: 999;
		font-size: 1.5vw;
	}
	
	.carousel-slides ul li img {
	top: 0.4vw;
	width: 40vw;
	height: 40vw;
	}	
	
}