/********************************************/			
/* 		gallery styling and control			*/	
/********************************************/

@supports (display: grid) {
	 
	/* webkit Styles */
	@media screen and (min-width:64em){ 
		.layout.gallery {
			position: relative;
			width: var(--boxwidth);
			height: var(--boxheight);
			display: grid;
			grid-template-rows: minmax(1em, 4em) 1fr minmax(1em, 4em);
			grid-template-columns: 1fr 1fr;
			justify-content: space-around;
			grid-gap: 0em;
			background: transparent;
		}

		.layout.gallery > .navbar{position: relative; z-index: 100;}
		.layout.gallery > .sidebar{position: relative; z-index: 100;}
		
		.layout.gallery > .content {
					
			grid-row: 1 / span 3;
			grid-column: 1 / span 2;
			align-self: center;
			justify-self: start;
		
			display: grid;
			grid-template-rows: 1fr 1fr;
			grid-template-columns: 1fr 1fr;
		}
		.layout.gallery > .content > .gallery-col1 { 
			width: calc(50vw - 2em); 
			height: calc(100vh - 4em); 
			grid-row: 1 / span 2;
			grid-column: 1;
			align-self: end;
			justify-self: center;
		}
		.layout.gallery > .content > .gallery-col2 { 
			width: calc(50vw - 2em); 
			height: calc(100vh - 4em); 
			
			grid-row: 1 / span 2;
			grid-column: 2;
			align-self: center;
			justify-self: center;
		}

		.layout.gallery > .content > .gallery-col1 > .gallery-nav {
			width: 13em;
			margin: auto;
			
			
		}
		
		label.gallery-thumb {display: inline-block; background: url() no-repeat center center;
			background-size: cover; width:6em; height: 0em; 
			padding-top: 6em; overflow: hidden; 
			transition: transform .2s ease-in-out;
			border:1px solid #cdc;
			border-radius: 6px;
		}
		input.gallery-radio {position:absolute; left: -300%;}

		
		.gallery-imageholder {
			width: calc(50vw - 2em); 
			height: calc(100vh - 4em); 
			
		}
	}
	
	label.gallery-thumb {display: inline-block; background:  url() no-repeat center center;
		background-size: cover; width:6em; height: 0em; 
		padding-top: 6em; overflow: hidden; 
		transition: transform .2s ease-in-out;
		border:1px solid #cdc;
		border-radius: 6px;
	}

	@media screen and (max-width:64em){
		
		.layout.gallery {
			max-width: 100%;
			display: block;
		}
		
		label.gallery-thumb {display: inline-block; background: black url() no-repeat center center; background-size: cover; width:6em; height: 0em; padding-top: 6em; overflow: hidden; transition: transform .2s ease-in-out;}
		input.gallery-radio {position:absolute; left: -300%;}
		
		.layout.gallery > .content {
			max-width: 100%;
			display: block;
		}
		.layout.gallery > .content > .gallery-col1 { 
			padding: 3em;
			display: block;
		}
		.layout.gallery > .content > .gallery-col2 { 
			display: block;
		}
		.layout.gallery > .content > .gallery-col1 > .gallery-nav h2{
			
		}
		.layout.gallery > .content > .gallery-col1 > .gallery-nav {
			width: 26em;
			margin: auto;
		}
		
		.gallery-imageholder {
			margin: auto;
			width: calc(100vw); 
			height: calc(50vh); 
			}
		
	}
	
	@media screen and (max-width: 32em){
		.gallery-imageholder {
			position: relative;
			left: -1.5em;
			margin: 0;
			width: calc(100vw - 2em); 
			height: calc(60vh); 
			min-height: 20em;
			}
		
		.layout.gallery > .content > .gallery-col1 > .gallery-nav {
			width: 100%; margin: 0;
		}
		
		label.gallery-thumb {width:25%; height: 0em; padding-top: 25%;}
	}
	@media screen and (max-height: 40em){
			body {font-size: 14px;} 
	}
	@media screen and (max-height: 32em) and (min-width: 32em){
		.layout.gallery {
			position: static;
			max-width: 100%;
			
			width: calc(100vw - 2em);
			height: calc(200vh - 4em); 
		}
		
		label.gallery-thumb {display: inline-block; background: black url() no-repeat center center; background-size: cover; width:6em; height: 0em; padding-top: 6em; overflow: hidden; transition: transform .2s ease-in-out;}
		input.gallery-radio {position:absolute; left: -300%;}
		
		.layout.gallery > .content {
			width: calc(100vw - 2em);
			height: calc(200vh - 4em); 
		}
		.layout.gallery > .content > .gallery-col1 { 
		
			height: calc(100vh - 4em); 
			grid-row: 2 ;
			grid-column: 1 / span 2;
			align-self:end;
			justify-self: start;
		}
		.layout.gallery > .content > .gallery-col2 { 
			width: calc(100vw - 2em); 
			height: calc(100vh - 4em); 
			
			grid-row: 1;
			grid-column: 1 / span 2;
			align-self: center;
			justify-self: start;
		}
		.layout.gallery > .content > .gallery-col1 > .gallery-nav h2{
			
		}
		.layout.gallery > .content > .gallery-col1 > .gallery-nav {
			padding: 4em;
			
			margin: auto;
		}
		
		.gallery-imageholder {
			margin: auto;
			width: calc(100vw - 4em); 
			height: calc(100vh); 
			}
	}


}
@supports (display: -ms-grid) {
 /* EDGE Styles */ 
  	
	@media screen and (min-width:64em){ 
	
		.layout.gallery {
			position: relative;
			width: calc(100vw - 2em);
			height: calc(100vh - 2em);
			display: -ms-grid;
			-ms-grid-rows: minmax(1em, 4em) 1fr minmax(1em, 4em)
			-ms-grid-columns: 1fr 1fr;
			-ms-grid-row-gap: 0em;
			-ms-grid-column-gap: 0em;	
			background: transparent;
		}

		.layout.gallery > .navbar{position: relative; z-index: 100;}
		.layout.gallery > .sidebar{position: relative; z-index: 100;}
		
		.layout.gallery > .content {
					
			-ms-grid-row: 1; 
			-ms-grid-row-span: 3; 
			-ms-grid-column: 1;
			-ms-grid-column-span: 2;
			-ms-grid-column-align: center;
			-ms-grid-row-align: start;
		
			display: -ms-grid;
			-ms-grid-rows: 1fr 1fr;
			-ms-grid-columns: 1fr 1fr;
		}
		.layout.gallery > .content > .gallery-col1 { 
			width: calc(50vw - 2em); 
			height: calc(100vh - 2em); 

			-ms-grid-row: 1; 
			-ms-grid-row-span: 2; 
			-ms-grid-column: 1;
			-ms-grid-column-align: end;
			-ms-grid-row-align: center;
			
		}
		.layout.gallery > .content > .gallery-col2 { 
			width: calc(50vw - 2em); 
			height: calc(100vh - 2em); 
						
			-ms-grid-row: 1; 
			-ms-grid-row-span: 3; 
			-ms-grid-column: 2;
			-ms-grid-column-align: start;
			-ms-grid-row-align: center;
		}

		.layout.gallery > .content > .gallery-col1 > .gallery-nav {
			width: 13em;
			margin: auto;
			margin-top: calc(50vh - 18em);
			
		}
		
		label.gallery-thumb {display: inline-block; background: black url() no-repeat center center; background-size: cover; width:6em; height: 0em; padding-top: 6em; overflow: hidden; transition: transform .2s ease-in-out;}
		input.gallery-radio {position:absolute; left: -300%;}

		
		.gallery-imageholder {
			width: calc(50vw - 1em); 
			height: calc(100vh - 2em); 
			}
	}
	
	@media screen and (max-width:64em){
		
		.layout.gallery {
			max-width: 100%;
			display: block;
		}
		
		label.gallery-thumb {display: inline-block; background: black url() no-repeat center center; background-size: cover; width:6em; height: 0em; padding-top: 6em; overflow: hidden; transition: transform .2s ease-in-out;}
		input.gallery-radio {position:absolute; left: -300%;}
		
		.layout.gallery > .content {
			max-width: 100%;
			display: block;
		}
		.layout.gallery > .content > .gallery-col1 { 
			padding: 3em;
			display: block;
		}
		.layout.gallery > .content > .gallery-col2 { 
			display: block;
		}
		.layout.gallery > .content > .gallery-col1 > .gallery-nav h2{
			
		}
		.layout.gallery > .content > .gallery-col1 > .gallery-nav {
			width: 26em;
			margin: auto;
		}
		
		.gallery-imageholder {
			display: block;
			margin: auto;
			width: calc(100vw); 
			height: calc(70vh); 
			
		}
		
	}
  	@media screen and (max-height: 40em){
			body {font-size: 14px;} 
	}
}


 label { cursor: pointer;}
.gallery-imageholder { 
	background: transparent no-repeat; background-size: contain; 
	background-position: right 0; 
	height:99%;
	/* box-shadow: inset 0 0 100px rgba(0,0,0,.1); */
	
}
.bk_info { display: none; }


#img0:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background: #fff }
#img1:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-curcuma.jpg); }
#img2:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-frutas.jpg); }
#img3:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-jengibre.jpg);}
#img4:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-limon.jpg);}
#img5:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-puerh.jpg);}
#img6:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-rooibos.jpg);}
#img7:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-teverde.jpg);}
#img8:checked ~ .layout.gallery > .content > .gallery-col2 > .gallery-imageholder {background-image: url(../biokombucha/pd-Biokombucha-yerbamate.jpg);}



#img1:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img1thumb {transform: scale(1.2);}
#img2:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img2thumb {transform: scale(1.2);}
#img3:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img3thumb {transform: scale(1.2);}
#img4:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img4thumb {transform: scale(1.2);}
#img5:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img5thumb {transform: scale(1.2);}
#img6:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img6thumb {transform: scale(1.2);}
#img7:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img7thumb {transform: scale(1.2);}
#img8:checked ~ .layout.gallery > .content > .gallery-col1 > .gallery-nav #img8thumb {transform: scale(1.2);}



#img1thumb{background-image: url(../biokombucha/pd-ring-curcuma.jpg);}
#img2thumb{background-image: url(../biokombucha/pd-ring-frutas.jpg);}
#img3thumb{background-image: url(../biokombucha/pd-ring-jengibre.jpg);}
#img4thumb{background-image: url(../biokombucha/pd-ring-limon.jpg);}
#img5thumb{background-image: url(../biokombucha/pd-ring-puerh.jpg);}
#img6thumb{background-image: url(../biokombucha/pd-ring-rooibos.jpg);}
#img7thumb{background-image: url(../biokombucha/pd-ring-teverde.jpg);}
#img8thumb{background-image: url(../biokombucha/pd-ring-yerbamate.jpg);}

}