/* You can change this file 
---------------------------
Please use the IDs provided as much as possible
This css file is for everything related to the #gallery section
*/

@media only screen and (min-width: 819px) {
#gallery {
    width: 100%;
    height:38vw;
    position: relative;
    overflow: hidden;
    border: none;
} 

#long-gallery,#long-gallery img {
	width:100%;
	height:25vw!important;
	position:relative;
} 

#short-gallery, #short-gallery img {
	height:10vw;
	width:100%;
}

#short-gallery img, #long-gallery img {
	object-fit:cover;
}
	
#gallery img:not(#gallery #thirdblock #twothirdsblock img){
   width:100%;
    height: 30vw;
    object-fit: cover;
	z-index:1;
	position:relative;
}

#gallery #thirdblock #twothirdsblock {
	position:relative;
	text-align:center;
	z-index:2;
	margin-top:-25%;
	margin-left:auto;
	margin-right:auto;
}

#gallery #thirdblock #twothirdsblock img {
	height:16vw;
	object-fit:contain;
}

#gallery #halfblock, #long-gallery #halfblock {
    width: 49.5%;
    height: auto;
    margin: 0px;
    padding: 0;
    border: inherit;
    position: absolute;
    left: 2%;
    bottom: 20%;

}

#gallery #halfblock #inset {
padding: 5%;
width: 90%;
height: auto;
}

#gallery #halfblock button {
	width:25%;
	padding-left:0!important;
	padding-right:0!important;
	margin-top:5%!important;
}

#gallery #halfblock button:nth-of-type(2) {
	background:var(--button-color);
	color:var(--button-background);
	margin-left:3%;
}
	
#gallery p {
	position:relative;
	color:white;
	padding:1% 0;
	z-index:5;
}

button {
   width: auto;
   height:  auto;
   padding: 2% 5%;
   border:  none; 
}


#gallery #thirdblock {
    width: 33%;
    height: auto;
    margin: 0px;
    padding: 0;
    border: inherit;
}

#gallery #quarterblock {
    width: 25% !important;
    height: auto;
    margin: 0px;
    padding: 0;
    border: none;
}
	

#front .wp-block-image>img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}
	
#main ul {
		padding-left:5%;
		margin-left:auto;
		margin-right:auto;
		width:auto;
	max-width:50vw;
		text-align:left!important;
	}
	
.wp-block-buttons:has(.wp-block-button:nth-of-type(2)) {
	justify-content:space-evenly;
}

#footer #thirdblock #inset {margin:0!important;}

#gallery button, #header button:not(#menu-selector) {
	font-size:.9vw!important;
}
.wp-block-button, button {
	font-weight:500!important;
	/*padding:16px 40px!important;*/
	padding:0.9vw 2.5vw!important;
}
	
.woocommerce-product-gallery.woocommerce-product-gallery--with-images.woocommerce-product-gallery--columns-4.images {
	opacity:1!important;
	transition:none!important;
	margin:3% 0;}
	
form.cart,button.single_add_to_cart_button.button.alt  {
	margin:0% 0;}
	
div.woocommerce input[type="number"] {
	margin:1% 0;}
	
	form.variations_form.cart button.single_add_to_cart_button.button {
	margin:0;}
	
form.variations_form.cart div.quantity, div.quantity {
	margin-top:4px!important;
	}
	
/*

#featured{ 
	width:400px; 
	padding-right:20px; 
	position:relative; 
	height:250px; 
	background:transparent;
}

#featured li.ui-tabs-nav-item a:hover{ 
	background: transparent; 
}
#featured li.ui-tabs-selected{ 
	color: black; 
    } 
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	background: transparent; 
    width: 20px;
        color: Black;
        font-weight: bold;
}
#featured .ui-tabs-panel{ 
	width:600px; height:275px; 
    left: 30px; top: 0px;
	background:#ffffff; position:absolute;
    padding: 14px;
}

#featured img {
    height: 275px;
}

#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top:0; left:400px; 
	height:300px; 
	background: white; 

}
#featured .info h2{ 
	font-size:28px; font-family:'Times New Roman', serif; 
	color:black; padding:16px; margin-top: 20px;
	overflow:hidden; 
    font-style: italic;
    font-weight: normal;
}
#featured .info p{ 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	padding:15px; color:black;
}
#featured .info a{ 
	text-decoration:none; 
	color:black; 
    	font-size:28px; font-family:'Times New Roman', serif; 
        font-style: italic;
}

.readmore { 
	text-decoration:none; 
	color:black; 
    	font-size:14px !important; font-family:'Times New Roman', serif; 
        font-style: italic;
}

#featured .info a:hover{ 
	text-decoration: none; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}
	
#gallery #featured img {
	width:100%!important;
	object-fit:cover;
	height:100%!important;
	}

	
#featured{ 
	width:400px; 
	padding-right:20px; 
	position:relative; 
	height:250px; 
	background:transparent;
}

#featured li.ui-tabs-nav-item a:hover{ 
	background: transparent; 
}
#featured li.ui-tabs-selected{ 
	color: black; 
    } 
#featured ul.ui-tabs-nav li.ui-tabs-selected a{ 
	background: transparent; 
    width: 20px;
        color: Black;
        font-weight: bold;
}

#featured img {
    height: 275px;
}

#featured .ui-tabs-panel .info{ 
	position:absolute; 
	top:0; left:400px; 
	height:300px; 
	background: white; 

}
#featured .info h2{ 
	font-size:28px; font-family:'Times New Roman', serif; 
	color:black; padding:16px; margin-top: 20px;
	overflow:hidden; 
    font-style: italic;
    font-weight: normal;
}
#featured .info p{ 
	margin:0 5px; 
	font-family:Verdana; font-size:11px; 
	padding:15px; color:black;
}
#featured .info a{ 
	text-decoration:none; 
	color:black; 
    	font-size:28px; font-family:'Times New Roman', serif; 
        font-style: italic;
}

.readmore { 
	text-decoration:none; 
	color:black; 
    	font-size:14px !important; font-family:'Times New Roman', serif; 
        font-style: italic;
}

#featured .info a:hover{ 
	text-decoration: none; 
}
#featured .ui-tabs-hide{ 
	display:none; 
}
	
#gallery #featured img {
	width:100%!important;
	object-fit:cover;
	height:100%!important;
	}
	
 #gallery #featured .ui-tabs-panel .info {
	position:absolute;
	background:transparent;
	top:50%;
	left:50%;
	transform: translate(-50%, -50%);
	right:0;
	text-align:center;}
	
*/