/* Galerie Wrapper Element, Galerie passt sich automatisch ein  -----------------------------------------------------------*/ 
 div#gallerywrapper 	{ position:fixed; left:0; top:0; z-index:1100; width:100%; height:100%; padding:0; text-align:center;/* background:rgba(0,0,0,0.8); */ display:none; color:#f0f0f0 }
 
 /* Navi Buttons */
  a.nav 	{  position:absolute; margin-top:-30px; top:50%; z-index:111111; display:block; text-align:center; width:80px;  height:80px; background:#707273; color:#fff; }
   a.nav:hover { background:#96c11f; color:#fff;}
 a.next { right:20px;  }
 a.next:before {font: normal normal normal 35px/1 FontAwesome; content: "\f105"; }
 a.prev { left:20px;  }
 a.prev:before { font: normal normal normal 35px/1 FontAwesome;content: "\f104";}

 
 a.next:before,
 a.prev:before {position:absolute; left:50%; top:50%;
 transform: translateY(-50%) translateX(-50%);
	-webkit-transform: translateY(-50%) translateX(-50%);
	-ms-transform: translateY(-50%) translateX(-50%);
	-moz-transform: translateY(-50%) translateX(-50%);}
 
 /* Galerie Bildzähler */
div.counter { display:none; position:absolute; bottom:10px; right:0; z-index:10000; padding-right:20px; font-size:12px; font-style:italic } 

/* Galerie Overlay schließen */
div.close { position:absolute; font-size:40px; padding:20px; cursor:pointer; right:0; top:0; z-index:1000; font-weight:bolder; background:#707273; color: #fff;text-shadow:none;opacity:1;}
div.close:hover { background:#96c11f;color:#fff;opacity:1;}
div.close:before { content: "\2715" }
/* Galerie Text Element */
div.hdtext 					{ position:absolute; left:0;bottom:0px;  width:100%; padding:1em 2%; z-index:10; background:rgba(112,114,115,1);}
.hdtext h3	{ color:#fff;font-size: 20pt;margin: 0 0 0 0;line-height: 1.2em;text-transform: uppercase;text-align: center; text-transform:none}
/*
div.ovlHeader				{ position:absolute; left:0; top:0; width:96%; z-index:10; line-height:40px; text-align:left; color:#fff; padding:0 2% 0 2%; margin:0 }						
*/
div#gallery 					{  height:100%; width:100%; margin:0 auto 0 auto; padding:0; overflow:hidden; position:relative; left:0; top:0; }
.items 							{ width:200000em; height:auto; position:absolute; left:0;top:0; background: rgba(255,255,255,0.7); }
.items div 					{ float:left; position:relative; z-index:3;margin:0; padding:0; display:inline; vertical-align:top; text-align:center;  background-size:auto 90%!important; height:90%;    /* display:table-cell */}
/*.items div a.imgLink 	{ display:block; width:100%; height:100%; background:transparent; position:relative; vertical-align:middle }*/
.items div img				{ margin:auto; }

/*@media all and (orientation:landscape) {*/
	div#gallery				{ display:table}
	.items { display:table-row}	
	.items div { display:table-cell; float:none; vertical-align:middle; }
	.items div img,  .items div a			{ max-height:90%; max-width:90%; } 
/*}
@media all and (orientation:portrait) {
	div#gallery				{ display:table}
	.items { display:table-row}	
	.items div { display:table-cell; float:none; vertical-align:middle }
	.items div img				{  height:auto; width:auto;  max-width:100%; max-height:100% }
}*/

/*.thumbs{ z-index:999; color:#fff;  text-align:center; width:100%; margin:0 auto 0}*/
div.thumbs{ float:left; width:100%; margin:50px auto 0; padding:0;     column-count: 3;
	-moz-column-count: 3;
    -webkit-column-count: 3;
    column-gap: 2em;
	-moz-column-gap: 2em;
    -webkit-column-gap: 2em;}
.thumb{ /* float:left; cursor:pointer; transition:all ease 0.5s; margin:10px; */   background-color: #eee;
    display: inline-block;
    margin: 0 0 2em;
    width: 100%;}
.thumb:hover { }
.thumb img { min-width:100%;}



.masonry { /* Masonry container */

	 /*display: -webkit-flex; 
    display: flex;
	flex-wrap: wrap;
   -webkit-flex-direction: column;
    flex-direction: column;*/
}
a.imgLink{ font-size:15pt; font-weight:700}
a.imgLink::before { content:"zum Produkt"; padding:25px 10px 25px 25px; background:#96c11f; color:#fff;  top:0; left:0; width:auto; margin:0 0 0 0; position:absolute;}
a.imgLink::after {content: "\f08e";font: normal normal normal 18pt/1 FontAwesome; color:#fff;padding:25px 25px 25px 5px; background:#96c11f;top:0; left:150px; position:absolute}


@media screen and (max-width:1023px) {
	div.thumbs{
    column-gap: 1em;
	-moz-column-gap: 1em;
    -webkit-column-gap: 1em;}
.thumb{  margin: 0 0 1em;}
}
@media screen and (max-width:767px) {
	div.thumbs{
	column-count: 2;
	-moz-column-count: 2;
    -webkit-column-count: 2;}
	.hdtext h3 {font-size: 1.2em;}
}
@media screen and (max-width:420px) {
	div.thumbs{
	column-count: 1;
	-moz-column-count: 1;
    -webkit-column-count: 1;}
	
	.hdtext h3 {font-size: 1em;}
}