@media only screen and (max-width: 1023px) {
	#mobileMenu {
		transform: translateY(-100%);
		transition: transform 300ms ease-in-out;
	}
	
	#mobileMenu[data-visible="true"] {
		transform: translateY(0%);
		transition: transform 300ms ease-in-out;
	}
	
	html:has(#mobileMenu[data-visible="true"]),
	body:has(#mobileMenu[data-visible="true"]) {
		overflow: hidden;
	}
}

body.styled-header #siteHeader {
	background: linear-gradient(180deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%);
	height: 10rem;
}

body.styled-header #main {
	margin-top: -10rem;
}

@media only screen and (min-width: 767px) {
	body.styled-header #siteHeader {
		height: 20rem;
	}
	body.styled-header #main {
		margin-top: -20rem;
	}
}

@media only screen and (min-width: 1023px) {
	body.styled-header #siteHeader {
		height: 25rem;
	}
	body.styled-header #main {
		margin-top: -25rem;
	}
}