@charset "UTF-8";
/* CSS Document */

/*	*{margin:0;padding:0;}
		#slider, #items > div, #items > div > div{
			height:557px;
			/* line-height:420px; */
			/* text-align:center; */
/*			}
		#slider{
			width: 100%;
			margin: 0 auto;
			overflow: hidden;
			position:relative;
			height:557px;
			margin: 0 auto;
		}
		#items{
			width: 2000em;
			position: absolute;
		}
		#items > li, #items > div{
			float: left;
			overflow: visible;
		}
		#items > div > div{
			margin: 0 auto;
			/*background: #f4f4f4;*/
/*			}
		#slide-1{
			background-color:black;
		}
		#items > div > div{
			width: 960px;
		}
/*		
	@media and (max-width: 768px) {
		  #items > div > div{
		    width: 760px;
				background-color:#0F0;
		  }
		}
		
@media screen and (max-width: 320px) {
		  #items > div > div{
		    width: 310px;
				background-color:#F00;
		  }
		} */


/* slider container */
.iosSlider {
	/* required */
	position: relative;
	top: 0;
	left: 0;
	overflow: hidden;
	
	/* optional */
	width: 100%;
	height: 557px;
}

@media screen and (max-width: 1023px) {
	
	.iosSlider {
		height:840px;		
}	
}

@media screen and (max-width: 767px) {
	
	.iosSlider {
		height:477px;		
}	
}

@media screen and (max-width: 479px) {
	
	.iosSlider {
		height:457px;		
}	
}

/* slider */
.iosSlider .slider {
	/* required */
	width: 100%;
	height: 100%;
}

/* slide */
.iosSlider .slider .slide {
	/* required */
	float: left;

	/* optional */
	width: 100%;
	height: 557px;
}

@media screen and (max-width: 1023px) {	
	.iosSlider {
		height:840px;			
}	
}

@media screen and (max-width: 767px) {	
	.iosSlider {
		height:477px;		
}	
}

@media screen and (max-width: 479px) {	
	.iosSlider {
		height:457px;		
}	
}

.iosSlider .slider .item {
	width: 100%;
	height: 100%;
	padding: 0;
}
	


		
		#navigation-wrapper .left, #navigation-wrapper .right{margin-top:10px; top:-382px; position:absolute; z-index:2;}
		
		@media screen and (max-width: 1023px) {	
			#navigation-wrapper .left, #navigation-wrapper .right{	
			top:-495px;
			}	
		}
		
			@media screen and (max-width: 767px) {	
			#navigation-wrapper .left, #navigation-wrapper .right{	
			top:-309px;
			}	
		}
		
		@media screen and (max-width: 479px) {	
			#navigation-wrapper .left, #navigation-wrapper .right{	
			top:-110px;
			}	
		}
		
		#navigation-wrapper .left, #navigation li{left:30px;}
		
		
		#navigation-wrapper .right{right:30px;}
		#navigation-wrapper,#navigation{margin:0 auto; width:100%; position:relative;}
		#navigation{clear:both;width:81px;}
		#navigation li{width:15px;height:15px;list-style:none;border-radius:8px;border:1px solid #ccc;margin: 5px;}
		#navigation li:hover, #navigation-wrapper .left:hover, #navigation-wrapper .right:hover{cursor:pointer;}
		.active{background-color:#ccc;cursor:default;}
		.disabled{display:none;}
		
/*		#slider h1 {
			font-size:32px;
			margin:20px 0px 50px 20px;
			position:relative;
			}
	*/		
.test123 {
	width:30px;
	height:42px;
	position: absolute;
	padding:5px;
	
	}

	
div.pfeil {
   position: absolute;
   width:30px;
	height:42px;
	left:0px;
 }
 
 div.pfeil-rechts  {
   position: absolute;
   width:30px;
	height:42px;
	right:0px;
 }

@media screen and (max-width: 479px) {	
	div.pfeil,  div.pfeil-rechts {	
}	
}

  /*div.pfeil:before {
	 top: -10px;
	 
	 }
 
 
div.pfeil:before, div.pfeil:after {
   position: absolute;
   content: "";
   left: 7px;
   width: 7px;
   height: 25px;
   background-color:#d3d3d3;
   border-radius: 2px 2px 2px 2px;
	transform: rotate(135deg);
   -ms-transform: rotate(135deg); /* IE 9 */
/*	-webkit-transform: rotate(135deg); /* Safari and Chrome */
/*	-o-transform: rotate(135deg); /* Opera */
/*	-moz-transform: rotate(135deg); /* Firefox */
	
/*	-ms-transform-origin: 0 100%; /* IE 9 */
/*	-webkit-transform-origin: 0 100%; /* Safari and Chrome */
/*	-o-transform-origin: 0 100%; /* Opera */
	/*-moz-transform-origin: 0 100%; /* Firefox */
/*   transform-origin: 0 100%;
 }

 div.pfeil:after {
   left: 0;
   transform: rotate(45deg);
   -ms-transform: rotate(45deg); /* IE 9 */
/*	-webkit-transform: rotate(45deg); /* Safari and Chrome */
/*	-o-transform: rotate(45deg); /* Opera */
/*	-moz-transform: rotate(45deg); /* Firefox */
 /*  transform-origin: 100% 100%;
  /* -ms-transform-origin: 100% 100%; /* IE 9 */
	/*-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
	/*-o-transform-origin: 100% 100%; /* Opera */
	/*-moz-transform-origin: 100% 100%; /* Firefox */
  /* transform-origin: 100% 100%;
 }	
 */
 
 
 div.pfeil:before {
	 top: -12px; 
	 }

 
 div.pfeil:before, div.pfeil:after {
   	position: absolute;
   	content: "";
   	left: 9px;
   	width: 9px;
   	height: 31px;
   	background-color:#cccccc;
	transition: background-color 0.4s;
	-moz-transition: background-color 0.4s; /* Firefox 4 */
	-webkit-transition: background-color 0.4s; /* Safari and Chrome */
	-o-transition: background-color 0.4s; /* Opera */
   	border-radius: 2px 2px 2px 2px;
	transform: rotate(135deg);
   	transform-origin: 0 100%;
   
   	-ms-transform: rotate(135deg); /* IE 9 */
	-webkit-transform: rotate(135deg); /* Safari and Chrome */
	-o-transform: rotate(135deg); /* Opera */
	-moz-transform: rotate(135deg); /* Firefox */

	-ms-transform-origin: 0 100%; /* IE 9 */
	-webkit-transform-origin: 0 100%; /* Safari and Chrome */
	-o-transform-origin: 0 100%; /* Opera */
	-moz-transform-origin: 0 100%; /* Firefox */
}

div.pfeil:after {
   	left: 0;
 	transform: rotate(45deg);
   	transform-origin: 100% 100%;
	
	-ms-transform: rotate(45deg); /* IE 9 */
	-webkit-transform: rotate(45deg); /* Safari and Chrome */
	-o-transform: rotate(45deg); /* Opera */
	-moz-transform: rotate(45deg); /* Firefox */
	
	-ms-transform-origin: 100% 100%; /* IE 9 */
	-webkit-transform-origin: 100% 100%; /* Safari and Chrome */
	-o-transform-origin: 100% 100%; /* Opera */
	-moz-transform-origin: 100% 100%; /* Firefox */
}	
 
 
div.pfeil:hover:before, div.pfeil:hover:after, div.pfeil-rechts:hover:before, div.pfeil-rechts:hover:after  {
   	background-color:#0D0D0D;
}
 
 
 
div.pfeil-rechts:before {
	 top: -12px; 
	 }

 
div.pfeil-rechts:before, div.pfeil-rechts:after {
   	position: absolute;
   	content: "";
   	left: 15px;
   	width: 9px;
   	height: 31px;
   	background-color:#cccccc;
	transition: background-color 0.4s;
	-moz-transition: background-color 0.4s; /* Firefox 4 */
	-webkit-transition: background-color 0.4s; /* Safari and Chrome */
	-o-transition: background-color 0.4s; /* Opera */
   	border-radius: 2px 2px 2px 2px;
	transform: rotate(-135deg);
   	transform-origin: right bottom;
	
	-ms-transform: rotate(-135deg); /* IE 9 */
	-webkit-transform: rotate(-135deg); /* Safari and Chrome */
	-o-transform: rotate(-135deg); /* Opera */
	-moz-transform: rotate(-135deg); /* Firefox */
	
	-ms-transform-origin: right bottom; /* IE 9 */
	-webkit-transform-origin: right bottom; /* Safari and Chrome */
	-o-transform-origin: right bottom; /* Opera */
	-moz-transform-origin: right bottom; /* Firefox */
}

 div.pfeil-rechts:after {
   	left: 0;
   	top:2px;
 	transform: rotate(-45deg);
   	transform-origin: right top;
	
	-ms-transform: rotate(-45deg); /* IE 9 */
	-webkit-transform: rotate(-45deg); /* Safari and Chrome */
	-o-transform: rotate(-45deg); /* Opera */
	-moz-transform: rotate(-45deg); /* Firefox */
	
	-ms-transform-origin: right top; /* IE 9 */
	-webkit-transform-origin: right top; /* Safari and Chrome */
	-o-transform-origin: right top; /* Opera */
	-moz-transform-origin: right top; /* Firefox */
}