#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) */
@-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;}
    14% 	{opacity:1;}
	18% 	{opacity:0;}
    100% 	{opacity:0;}
}
@-moz-keyframes anim_slides { /* Mozilla Firefox Version vor 16.0 */
    0% 		{opacity:0;}
    4% 		{opacity:1;}
    14% 	{opacity:1;}
	18% 	{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;}
    14% 	{opacity:1;}
	18% 	{opacity:0;}
    100% 	{opacity:0;}
}

.carousel-slides ul li {
    opacity:0;	

    /* css3 animation */
    -webkit-animation-name: anim_slides;
    -webkit-animation-duration: 42.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: 42.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;
}
.carousel-slides ul  li:nth-child(5), .carousel-slides ul  li:nth-child(5) div{
    -webkit-animation-delay: 28.0s;
    -moz-animation-delay: 28.0s;
	animation-delay: 28.0s;
}
.carousel-slides ul  li:nth-child(6), .carousel-slides ul  li:nth-child(6) div{
    -webkit-animation-delay: 35.0s;
    -moz-animation-delay: 35.0s;
	animation-delay: 35.0s;
}
/* 	
	ANMERKUNG:
	Das letzte Slide muss immer einen "Schritt" kürzer sein als die gesamtlänge der Animation. In diesem Fall ist die Länge 30 Sekunden
	Das letzte Slide wird nach 25 Sekunden abgespielt. Grund dafür ist, dass wenn es bei 30 sekunden abspielt sich dann über das erste Slide legt. Somit wirkt es
	als ob es beim nächsten Durchlauf beim zweiten Slide starten würde, was es aber eigentlich nicht der Fall ist.
*/

/* 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) */
@-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;}
    3%  	{left:15vw;		opacity:1;} /**/
	4%  	{left:14vw;		opacity:1;} /* Für diese 3 Keyframes wurde vw benutzt, somit positioniert sich die Box basierend auf die Breite des Viewports. */
    14% 	{left:14vw;  	opacity:1;} /**/
    18% 	{left:-100%;  	opacity:0;}
    100%	{left:-100%;  	opacity:0;}
}
@-moz-keyframes anim_titles { /* Mozilla Firefox Version vor 16.0 */
    0%		{left:-100%;	opacity:0;}
    3%  	{left:15vw;		opacity:1;} /**/
	4%  	{left:14vw;		opacity:1;} /* Für diese 3 Keyframes wurde vw benutzt, somit positioniert sich die Box basierend auf die Breite des Viewports. */
    14% 	{left:14vw;  	opacity:1;} /**/
    18% 	{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;}
    3%  	{left:15vw;		opacity:1;} /**/
	4%  	{left:14vw;		opacity:1;} /* Für diese 3 Keyframes wurde vw benutzt, somit positioniert sich die Box basierend auf die Breite des Viewports. */
    14% 	{left:14vw;  	opacity:1;} /**/
    18% 	{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: 42.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: 42.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 42s infinite;
  -moz-animation:on 42s infinite;
  animation:on 42s infinite;
}

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

/* Keyframes on (Animation für den Punkt) */
@-webkit-keyframes on{ /* Chrome Ab 4.0 bis 43.0 | Safari Ab 4.0 bis 9.0 | Opera Ab 15.0 bis 30.0 */
  
  /* Punkt 1 */
  0%,100%{margin-left:0%;} 
  14%{margin-left:0%;} 
  
  /* Punkt 2 */	
  19%{margin-left:15px;} 
  30%{margin-left:15px;} 
  
  /* Punkt 3 */		
  36%{margin-left:30px;} 
  47%{margin-left:30px;}  
  
  /* Punkt 4 */		
  52%{margin-left:45px;} 
  64%{margin-left:45px;}  
  
  /* Punkt 5 */ 
  69%{margin-left:60px;}           
  80%{margin-left:60px;}  
  
  /* Punkt 6 */
  86%{margin-left:75px;} 
  98%{margin-left:75px;}  
}

@-moz-keyframes on{ /* Mozilla Firefox Version vor 16.0 */
  
    0%,100%{margin-left:0%;} 
  14%{margin-left:0%;} 
  
  /* Punkt 2 */	
  19%{margin-left:15px;} 
  30%{margin-left:15px;} 
  
  /* Punkt 3 */		
  36%{margin-left:30px;} 
  47%{margin-left:30px;}  
  
  /* Punkt 4 */		
  52%{margin-left:45px;} 
  64%{margin-left:45px;}  
  
  /* Punkt 5 */ 
  69%{margin-left:60px;}           
  80%{margin-left:60px;}  
  
  /* Punkt 6 */
  86%{margin-left:75px;} 
  98%{margin-left:75px;} 
  
}

@keyframes on{ /* Chrome Ab 43.0 | Safari Ab 9.0 | Opera Ab 30.0 */
	
  0%,100%{margin-left:0%;} 
  14%{margin-left:0%;} 
  
  /* Punkt 2 */	
  19%{margin-left:15px;} 
  30%{margin-left:15px;} 
  
  /* Punkt 3 */		
  36%{margin-left:30px;} 
  47%{margin-left:30px;}  
  
  /* Punkt 4 */		
  52%{margin-left:45px;} 
  64%{margin-left:45px;}  
  
  /* Punkt 5 */ 
  69%{margin-left:60px;}           
  80%{margin-left:60px;}  
  
  /* Punkt 6 */
  86%{margin-left:75px;} 
  98%{margin-left:75px;} 
}

/* 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;
	}	
	
}