/* id gallery + content_id aus CMS */

 div#gallery1448, 
 div#gallery874		 { position:fixed; left:0; top:0; z-index:10; width:100%; height:100%; padding:0; background:rgba(0,0,0,0.8); display:none; color:#f0f0f0 } 
 
 
 div#gallery1314 div.gallery,
 div#gallery874 div.gallery {  height:100%; width:100%; float:left; padding:0; overflow:hidden; position:relative; left:0; top:0;display: table; }

 div#gallery1448 .items ,
 div#gallery874 .items { width:200000em; height:auto; position:absolute; left:0;top:0; background:rgba(255,255,255,.8); }
 
div#gallery1448 .items div, 
 div#gallery874 .items div { position:relative; z-index:3;margin:0 auto; padding:0; text-align:center; display: table-cell;
											 float: none;vertical-align: middle; max-width:100%; max-height:100%; opacity:1; }
 
 
 div#gallery1448  .gallery .items div img,
 div#gallery874  .gallery .items div img {max-height: 100%; max-width: 100%;  width:auto !important;  height:auto !important; margin:0 auto}
/*-----------------------------------------------------------------------------------------------------------*/
.thumbs.preview {
	float: left;
	width: 100%;
	margin:0 auto;
	padding: 0;
	display:block;
	position:relative	
}


.preview .thumb, .preview .thumb.hidden, .preview .thumb-disabled, .preview .thumb-disabled.hidden {
	margin: 0 0;
	width:25%; float:left;
	height:auto !important; 
	max-height:15vw;
	overflow:hidden;
	position: relative;
	display:block !important;
}
.preview .thumb div	{ width:100%; height:100%; display:block; cursor:pointer; position:relative; }
 .thumbs.preview div img {
	margin: auto;
	cursor: pointer;
	text-align: left;
	vertical-align: top;
	min-width: 100%;
	
}

.thumbs.preview div div.info { display:none;position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; padding:0 1em;  background:rgba(40,38,37,.25);} 
.thumbs.preview div:hover div.info 	{ display:block;} 
.thumbs.preview div div.info h3 { color:#fff;margin:1em 0 .5em 0;font-size: 1.2em;}
.thumbs.preview div div.info p { line-height:1.4em}
.thumbs.preview .thb { position:relative; z-index:0; }
 
div.mosaik 			{ float:left; width:31.3334%; height:16vw; margin:0 1% 2%; overflow:hidden;  filter: alpha(opacity=0); opacity:0; position:relative; border:1px solid #ccc}
	
.mosaik h4 			{ position:relative; width:100%; padding:7% 2%;font-size: 1.3vw; z-index:2000; bottom:0 ; font-weight:300; margin:0 0}
.mosaik span 		{ float:left; width:33.33%; height:50%; overflow:hidden }
.mosaik span img { float:left; max-width:100%; max-height:100% }

.mosaik a{width:100%; display:block;  color:#555;}
.mosaik .items 				{ width:100%; height:85%; float:left; margin:15% 0 0; padding:0; }
.mosaik .items div 			{ position:absolute; top:0; left:0; margin:0; padding:0; display:inline;  width:100%; height:100%; float:left;background-size: auto 100% !important; }
.mosaik .items a div {  float:left; height:100%; width:100%; background-color:#fff !important;  }

@media all and (max-width:1200px) {
	.thumbs.preview div div.info { font-size:.9em; line-height:1.2em}
	.thumbs.preview div div.info p {line-height: 1.2em;}
}
@media all and (max-width:990px) {
.thumbs.preview div div.info {
	display:block;
	position:relative;
	background:#fff;
	color:#555}
	
.thumbs.preview div div.info h3 {color: #555;margin:0em 0 .5em 0;}		
}
@media all and (max-width:768px) {
	.thumb, .thumb.hidden, .thumb-disabled, .thumb-disabled.hidden {margin: 0 1% 2vw;width:48%;}
	.thumbs.preview div div.info p { font-size:.9em;line-height: 1.2em;}


.preview .thumb, .preview .thumb.hidden, .preview .thumb-disabled, .preview .thumb-disabled.hidden {
	width: 50%;	max-height: 30vw;}
	
}
@media all and (max-width:480px) {
		.thumb, .thumb.hidden, .thumb-disabled, .thumb-disabled.hidden {margin: 0 0 2vw;width:100%;}
		div.mosaik 			{ float:left; width:100%; height:0; padding-bottom:61.8%; margin:0 1% 2%; overflow:hidden;  filter: alpha(opacity=0); opacity:0; position:relative; border:1px solid #ccc; box-sizing:border-box;}
		.mosaik h4			{ font-size: 1em;}
}