/* 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;
	}
	.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 .category-header-image::after {
	background-image: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 12%), linear-gradient(to left, rgba(0,0,0,0.3) 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.35) 35%, transparent 40%) !important;
}