/* ALL OF THIS CODE SHOULD BE PUT DIRECTLY IN THE BLOCK EDITOR FOR BETTER RESULTS -> SHARPER HEADER IMAGE */

body[data-gb-menu-open="full-overlay"] .logo-nav svg {
	fill: var(--neutral-0) !important; /* This logo is always on a black background of the expanded mobile menu, indepentent of the theme selected. It keeps working when scrolling a little down and toggeling the mobile menu there. */
}
/* -- HEADER IMAGE ADJUSTMENTS FOR MOBILE-- */
@media (max-width: 768px) {
    /* CSS in here for mobile only */
	.navigation-section {
		position: relative !important;
		background-color: transparent !important;
		z-index: 10000 !important; /* Keep the navigation bar on mobile on top of other content */
	}
	.navigation-section-grid {
		border: 0px !important;
	}
	.primary-nav {
		color: var(--neutral-0) !important;
	}
	.header-hero {
		position: relative !important;
		padding: 0 !important;
		display: flex; /* to show the background-image "shadow" effect from the borders inwards */
	}
	.header-hero-backgroundimage {
		margin: 0 !important;
		max-width: 100% !important;
		border-radius: initial !important;
		position: initial !important;
		max-height: 100% !important;
	}
	.header-hero-query {
		/*align-items: flex-end;*/
	}
	.header-hero-image {
		/*min-height: 500px;*/
		min-height: clamp(25.1rem,0.848rem + 0.758vw,10.5rem) !important;
		position: relative !important;
		/*top: 10px;*/
		/*height: 100vw !important;*/
		min-width: 100vw !important;

	}
	#page {
		position: relative !important;
	}
	#content {
		background-color: var(--bg-color) !important;
		z-index: 4 !important;
		position: initial !important;
	}
	.gb-is-sticky{
		color: black !important;
	}
}

.header-hero-backgroundimage::after {
	background-image: linear-gradient(to right, rgba(0,0,0,0.4) 0%, transparent 12%), linear-gradient(to left, rgba(0,0,0,0.4) 0%, transparent 12%), linear-gradient(to bottom, rgba(0,0,0,0.02) 0%, transparent 35%), linear-gradient(to top, rgb(0, 0, 0) 0%, rgba(0,0,0,0.65) 0%, transparent 65%) !important;
	content: "";
  	inset: 0;
  	position: absolute;
  	background-size: cover;
  	background-repeat: no-repeat;
  	background-position: center;
  	background-blend-mode: multiply;
  	width: 100%;
 	height: 100%;
  	mix-blend-mode: multiply;
  	z-index: 0;
}
.header-hero-text {
	z-index: 2;
}



.header-hero-backgroundimage {
  	background-size: cover;
  	background-position: center;
  	background-repeat: no-repeat;
  	height: 100vh;
  	width: 100%;
	z-index: 0;
}

@media (max-width: 767px) {
  .header-hero-backgroundimage {
	  height: clamp(15.6rem,0.848rem + 0.758vw,10.5rem) !important; /* Make the header image that spans to the top of the nav on mobile a little larger */
	}
}


.header-hero-image {
	width:100%;
	height:100%;
	object-fit:cover; 
	position:absolute; 
	inset:0;
}
.header-hero .header-hero-backgroundimage {
	background-image: none;
	background-color: inherit;
}