/* CSS Document */


/*----- slides js ------*/
.slides_container {
/*
	display:block;
	width:768px;
	height:auto;
*/
}
.slides_container.page {
	display:block;
	width:960px;
	height:570px;
	overflow:hidden;
}
.slides_container.adv {
	display:block;
	width:430px;
	height:640px;
	overflow:hidden;
	margin:0px auto;
}
.slides_container.adv .slidesjs-container{
	border:#ccc 1px solid;
	-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;



}

#slides {
	position:relative;
	display:none;
}

#slides.slider_js_in_content > div {
position:relative;
	text-align: center;
	/* NEU --- Center slide text vertically */
	
	display: -webkit-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	
	-webkit-justify-content: center;
	justify-content: center;
	
	-webkit-box-align: center;
	-ms-flex-align: center;
	-webkit-align-items: center;
	align-items: center;

	/* Ende -----------------NEU --- */

}

.slider_js_in_content > div img {
	width: 100%;
	height: auto;
}

/* mit BG */
.slider_js_in_content div.bg.slidesjs-slide {
	position: relative;
	display: block;
	width: 100%;
	height: 100%; /* per JS */
	max-height: 100%;

	background: no-repeat center center scroll; 
	background-color: #333;
	
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: contain;
	background-size: cover;

}

/* ////////////////////////////////// */

#slides .slidesjs-navigation {
	z-index:20000;
	position:absolute;
	top:40%;

	width: 50px;
	height: 40px;
		
	background: transparent;
	background-color: #CCC; 
	background-color: rgba(255, 255, 255, .2);
	background-position:center; 
	
	background-repeat:no-repeat;
	background-size: contain;	
	

}

#slides .slidesjs-navigation:hover { background-color: #FFF; background-color: rgba(255, 255, 255, .8); }

#slides .slidesjs-previous {
	left: 20px;
	left: 0px;
	
	background-image: url(../img/arrow_left.png);
	background-position: right center;

}
#slides .slidesjs-next {
	right:20px;
	right: -5px;
	
	background-image: url(../img/arrow_right.png);
	background-position: left center;
}



/*#slides .slidesjs-previous.adv{
	left: -40px;
}
#slides .slidesjs-next.adv{
	right:-40px;
}*/

ul.slidesjs-pagination {
	margin: 2px 0 0 0;
	float: right;
	list-style: none !important;	
	padding:0px;

}
.slidesjs-pagination li, ul.slidesjs-pagination li {
	float: left;
	margin: 0px 2px 0px 0px;
	list-style: none;
	
}
.slidesjs-pagination li a {
	display: block;
	width: 27px;
	height: 0;
	padding-top: 6px;
	background-image: url(../img/pagination_balken.png);
	background-position: 0 0;
	float: left;
	overflow: hidden;
}
.slidesjs-pagination li a:hover {
	background-position: 0 -12px;
}
.slidesjs-pagination li a.active,  .slidesjs-pagination li a:hover.active {
	background-position: 0 -6px;
}


/* ////////////// Slider in Head / Dialog ///////// aspect-ratio: 3/2; */

#dialog_slider #slides {
	position: relative;
	display: block;
	width: auto !important;
	max-height: 100% !important;
	height: auto !important;	
	border: 0px solid black;	
}

/* Media Queries 2022 - nach mobile first s.o. */
@media (min-width: 1400px) {
    #dialog_slider #slides {
        aspect-ratio: 21/8;
		width: 100% !important;
		max-height: 60vh!important;
		border: 0px solid yellow;	
    }
	#dialog_slider #slides img {
		width: 100%!important;
		height: 100%!important;
		object-fit: contain;
		overflow: hidden;
	}
}


/*
#dialog_slider .slidesjs-container, #dialog_slider .slidesjs-control { margin: 0 0 -0px 0; max-height: 100% !important}
*/
#dialog_slider #slides .slidesjs-navigation {
	z-index:20000;
	position:absolute !important;
	top:40%;	
}

#dialog_slider .slidesjs-pagination {
	float: none; z-index: 99 !important; 
	position: absolute; 
	bottom: 10px; 
	left: 40%;
	right: -50%;	
	margin: 0;
	padding: 2px; 
	background: #FFF;
	background: rgba(255,255,255,.7);
}


/* Vertical Middle in function . js gesetzt in Callback Fkt. */

#dialog_slider #slides img{ 
	display: block;
	position: absolute; 
	width: 100% !important;
	height: auto !important;
	
	top: 0px;
	margin: 0px;

}