/* 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: 45vw;
    position: relative;
    border: none;
}  

#gallery img {
    width:  100%;
    height: 40vw;
    object-fit: cover;
}

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

}

#gallery #page {
	top:0;
	left:0;
	right:0;
	bottom:0;
	position:absolute;
}  
	
#gallery:has(#fullblock) {
	position:absolute;
	top:0;
	bottom:0;
	left:0;
	right:0;
	z-index:2;
	height:auto!important;
}
	
#gallery #fullblock {
	margin-top:45%;}
	
#gallery #fullblock button {
	text-transform:uppercase;
	font-size:0.8vw;
	padding:1vw 3vw;
	}

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

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

#short-gallery {
	overflow:hidden;
}

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

#short-gallery img  {
	height:40vw!important;
	object-fit:cover;
}


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

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

#columns-section {
	padding:2% 0;
	width:100%;
	z-index:2;
	position:relative;
}

#columns-section #quarterblock {
	width:24.5%!important;
	height:auto;
}

#columns-section #quarterblock #inset {
	height:auto;
}

#columns-section #quarterblock img {
	width:100%;
	height:35vw;
	object-fit:cover;
}

#columns-section #fullblock #thirdblock:not(#thirdblock:has(p)) {
	border-top:1px solid black;
}

#front .wp-block-image>img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}

	#main ul {
		padding-left:5%;
	}
	
#main ul {
		padding-left:5%;
		margin-left:auto;
		margin-right:auto;
		width:auto;
	max-width:50vw;
		text-align:left!important;
	}
	
#page.portfolio:has(.portfolio-gallery) {
	width:70%!important;}
	
.wp-block-gallery.portfolio-gallery figure  a { 
     display:block;
	width:100%;
	height:100%;
	}
	
	
.wp-block-gallery.portfolio-gallery {
	width:100%;
	margin-left:auto;
	margin-right:auto;}
	
	.wp-block-gallery.portfolio-gallery figure  img {
		 height: 100%; 
  width: 100%;
  object-fit: cover;
  display: block;
	}
	
	.wp-block-gallery.portfolio-gallery figure {
	height:338px;
	overflow:hidden;
	position: relative;}

	
	.wp-block-gallery.portfolio-gallery figure::after {
	content: ''; 
  position: absolute; 
  top: 0;
  left: 0;
  width: 100%; 
  height: 100%; 
  background-color:#ff950078;
  opacity: 0; 
  transition: opacity 0.4s ease-in-out; 
z-index:1;
		pointer-events:none;
	}
	
	.wp-block-gallery.portfolio-gallery figure:hover::after {
    opacity: 1;
}
	
	.wp-block-column.three-image figure {
	margin-left:0;
	margin-right:0;}
	
	.wp-block-column.three-image .wp-block-columns .wp-block-column:first-of-type figure{
		margin-right:1.5%;
	}
	
	.wp-block-column.three-image .wp-block-columns .wp-block-column:nth-of-type(2) figure {
	margin-left:1.5%;}
	
}