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

#gallery *{
	border:0px solid black;
}

#gallery img {
    width:  100%;
	height:45vw;
    object-fit: cover;
	vertical-align:bottom;
}

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

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

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


#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;
}

#gallery div {
	vertical-align:middle;
}

#gallery #fifthblock:nth-of-type(1){
	vertical-align:top;
	height:100%;
}

#gallery #fifthblock:nth-of-type(1) #fullblock #inset {
	width:90%;
	padding: 0 5%;
}

#gallery #fifthblock #fullblock {
	text-align:left;
	padding:3.4vw 0;
}
	
#gallery  #fifthblock #fullblock .wp-block-buttons .wp-block-button {
	padding:12px 20px;
}
	
#gallery  #fifthblock:nth-of-type(1) #fullblock .wp-block-buttons .wp-block-button .wp-element-button {
	margin:0;
}
	
#gallery #fifthblock #fullblock:nth-of-type(1) .wp-block-buttons .wp-block-button:nth-of-type(2) {
	font-weight:normal;
}
	
#gallery #fifthblock #fullblock:nth-of-type(1) .wp-block-buttons .wp-block-button:nth-of-type(1) {
	border-radius:var(--circular);
	background: var(--grey);
	color:var(--gold);
}
		
#gallery #fifthblock .wp-block-buttons .wp-block-button:nth-of-type(2) a {
	font-size:1vw;
}
	
#gallery #fifthblock #fullblock:nth-of-type(2) .wp-block-buttons .wp-block-button:nth-of-type(1) {
	border-radius:var(--circular);
}
	
#gallery #fifthblock #fullblock:nth-of-type(2) .wp-block-buttons .wp-block-button:nth-of-type(2) {
	background:none;
	color:white;
	font-weight:normal;
}

#gallery #halfblock:nth-of-type(2) {
	position:relative;
	vertical-align:top;
}

#gallery #halfblock:nth-of-type(2) #inset {
	width:96%;
	padding:2%;
}

#gallery #thirdblock:nth-of-type(4) {
	width:29.2%!important;
}


#skew {
	width:8%;
	position:absolute;
	content: "";
	padding: 2% 2%;
	background:white;
	transform: rotate(8deg);
	height:110%;
	left:68%;
	top:-5%;
}

.skew {
       border: 0px solid red;
        padding: 7vw 0;
        display: block;
        margin-top: 0;
        position: relative;
        width: 100vw;
		z-index: 0;
}


#front .wp-block-image>img {
    width: 100%;
    height: 20vw;
    object-fit: cover;
}
	
.wp-block-group.coloured-services-blocks .wp-block-details {
	width:90%;
	padding:2% 3% 20px;
	margin-left:4.5%;
}
	
.wp-block-group.coloured-services-blocks .wp-block-group__inner-container {
	margin:0 0!important;
	width:100%;
}
	
.wp-block-group.coloured-services-blocks {
	border:3px solid black;
}
		
.wp-block-columns:nth-of-type(3) .wp-block-column ul.wp-block-list {
	padding-bottom: 4%;
}
	
.wp-block-columns:nth-of-type(3) .wp-block-column:nth-of-type(1)  ul.wp-block-list {
	padding-left:10%;
}
	
.wp-block-columns:nth-of-type(3) .wp-block-column:nth-of-type(2)  ul.wp-block-list {
	padding-left:9%;
}

.is-content-justification-right {
	justify-content:right;
}
	
.is-content-justification-right .wp-block-button, .is-content-justification-left .wp-block-button {
	padding:20px 30px;
	height:2vw;
	width: 40%;
	vertical-align:middle;
}
	
.coloured-strip {
	padding:10px 0;
	width:98%;
	margin:1% 0;
}
	
.wp-block-button.coloured-strip {
	padding:20px 30px!important;
}
	
.wp-block-columns {
	max-width:100%;
	padding:0 auto 0 auto;
}
	

		
}