:root {
	--header-height: 75px;
	--menu-height: calc((100% - var(--header-height)) / 4);
	--menu-offset: var(--menu-height) - var(--header-height);
}
/* HEADER */
/* HEADER */
/* HEADER */

header *::after,
header *::before{
	transition: 0.25s;
}

header {
	position: fixed;
	left: 0px;
	top: 0px;

	background-color: rgba(0, 0, 0, 0.25);
	width: 100%;
	height: var(--header-height);
	color: white;

	display: flex;
	border-bottom: 1px solid var(--clr-border);

	z-index: 1000;

	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	transition: all 0.25s linear;
}

header > a {
	position: relative;
	z-index: 1;
}
header .logo {
	position: relative;
	padding: 0 5vw;
	height: 75px;
	border-right: 1px solid var(--clr-border);

	display: flex;
	align-items: center;
	z-index: 1;
}
header .logo svg {
	height: 100%;
	color: white;
}
header .logo svg *{
	transition: color 0.25s;
}
header .logo svg .color {
	color: inherit;
}
header .space {
	flex-grow: 99;
}
header .menubutton_mobile {
	position: relative;
	align-items: center;
	padding: 20px 5vw;
	height: 100%;
	
	z-index: 1;
	display: none;
}
header .menubutton_mobile svg{
	width: 100%;
	height: 100%;
	color: inherit;
	overflow: visible;
	transition: transform 0.25s ease-in-out;
}
header .menubutton_mobile path{
	transition: transform 0.25s ease-in-out;
}
header .menu-items {
	display: flex;
	align-items: center;
}
header .menu-items ul {
	list-style: none;
	height: 100%;
}
header .menu-items ul li {
	display: inline-block;
	height: 100%;
	border-left: 1px solid var(--clr-border);

	font-size: 20px;
}

header .menu-items ul li a {
	color: inherit;
	display: flex;
	height: 100%;
	align-items: center;
	justify-content: center;
	padding: 0 50px;

	transition: 0.25s;
}

header .menu-items ul li a:hover,
header .menu-items ul li a.active {
	background-color: var(--clr-magenta-100);
	color: white;
}
header .menu-items .menu_contact {
	width: calc(60%-20px);
	display: none;

	transform: translateY(-20px);
	opacity: 0;
	transition: 0.5s ease-in-out;
	transition-delay: 0.6s;
}
header .menu-items .menu_contact > p{
	font-weight: 700;
	margin-bottom: 24px;
	font-size: var(--txt-standard);
}
header .menu-items .menu_contact a{
	position: relative;
	color: inherit;
	margin-bottom: 16px;
	display: flex;
	font-size: var(--txt-small);
}
header .menu-items .menu_contact a p{
	position: relative;
	padding: 16px 12px;
	padding-left: 36px;
	color: white;
	background-color: var(--clr-magenta-100);
}
header .menu-items .menu_contact a p::before{
	content:'';
	left: 8px;
	top: 30%;
	position: absolute;
	height: 40%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	filter: invert(1);
}
header .menu-items .menu_contact .menu_call p::before{
	background-image: url(/assets/img/telephone.svg);
}
header .menu-items .menu_contact .menu_mail p::before{
	background-image: url(/assets/img/email.svg);
}

header .menu-items .menu_links {
	width: 40%;
	display: none;
	
	transform: translateY(-20px);
	opacity: 0;
	transition: 0.5s ease-in-out;
	transition-delay: 0.5s;
}
header .menu-items .menu_links > p{
	font-weight: 700;
	margin-bottom: 24px;
	font-size: var(--txt-standard);
}
header .menu-items .menu_links a{
	position: relative;
	color: inherit;
	margin-bottom: 16px;
	display: flex;
	font-size: var(--txt-small);
}
header .menu-items .menu_links a p{
	position: relative;
	padding-left: 24px;
}
header .menu-items .menu_links a p::before{
	content:'';
	left: 0;
	position: absolute;
	height: 100%;
	aspect-ratio: 1 / 1;
	background-size: cover;
	background-position: center;
	background-image: url(/assets/img/external.svg);
}

/* when header not at top */
header.not-at-top {
	background-color: rgba(255, 255, 255, 1);
	-webkit-backdrop-filter: blur(0px);
	backdrop-filter: blur(0px);
	transition: all 0.25s linear;
}
header.not-at-top .logo {
}
header.not-at-top .logo svg {
	color: var(--clr-black-100);
}
header.not-at-top .logo svg .color {
	color: var(--clr-magenta-100);
}
header.not-at-top {
	color: var(--clr-black-100);
}
header.not-at-top .quickmenu ul li a svg {
	color: black;
}
header.not-at-top .quickmenu ul li a:hover div,
header.not-at-top .quickmenu ul li a.active div {
	color: white;
}

@media (max-width: 1000px) {
	header {
		border-bottom: none;
	}
	header > a {
		flex-grow: 99999;
		border-bottom: 1px solid var(--clr-border);
	}
	header .menubutton_mobile{
		display: flex;
		border-bottom: 1px solid var(--clr-border);
	}
	header .menu-items{
		position: absolute;
		top: 0;
		width: 100vw;
		height: calc(100vh);
		background-color: white;
		flex-wrap: wrap;
		align-items: start;
		align-content: center;
		row-gap: 100px;
		column-gap: 20px;
		padding: 75px 7vw 0 7vw;

		transition: 0.5s;
		transform: translateX(-100vw);
	}
	header .menu-items ul {
		height: auto;
		display: flex;
		flex-direction: column;
		gap: 32px;
		width: 100%;
	}
	header .menu-items ul li {
		position: relative;
		display: flex;
		width: 80%;
		border-left: none;
		height: auto;
		font-size: 32px;

		opacity: 0;
		transform: translateY(-20px);
		transition: transform 0.5s ease-in-out;
		transition: opacity 0.5s ease-in-out;
	}
	header .menu-items ul li:nth-child(1) {
		transition-delay: 0.1s;
	}
	header .menu-items ul li:nth-child(2) {
		transition-delay: 0.2s;
	}
	header .menu-items ul li:nth-child(3) {
		transition-delay: 0.3s;
	}
	header .menu-items ul li:nth-child(4) {
		transition-delay: 0.4s;
	}
	header .menu-items ul li a {
		position: relative;
		justify-content: start;
		height: auto;
		width: 100%;
		padding: 0;
	}
	header .menu-items ul li a::after {
		content: '';
		position: absolute;
		top: 20%;
		right: 0;
		height: 60%;
		aspect-ratio: 1 / 1;
		background-image: url(/assets/img/chevron.svg);
	}
	header .menu-items ul li a div{
		position: relative;
		display: flex;
	}
	header .menu-items ul li a:hover,
	header .menu-items ul li a.active {
		background-color: transparent;
		color: inherit;
	}
	header .menu-items ul li a div::after,
	header .menu-items ul li a div::after {
		content: '';
		position: absolute;
		bottom: 0;
		left: 0;
		width: 0;
		height: 4px;
		background-color: var(--clr-magenta-100);
	}
	header .menu-items ul li a.active div::after {
		width: 100%;
	}

	header .menu-items .menu_contact,
	header .menu-items .menu_links {
		display: block;
	}

	header .menu-items {
		color: var(--clr-black-100);
	}
	header.open .menubutton_mobile svg,
	header.open .logo svg {
		color: var(--clr-black-100);
	}
	header.open .logo svg .color {
		color: var(--clr-magenta-100);
	}
	header.open .menu-items {
		transform: translateX(0);
	}
	header.open .menubutton_mobile svg path:nth-child(2) {
		transform: translate(-7px, 12px) rotate(-45deg);
	}
	header.open .menubutton_mobile svg path:nth-child(1) {
		transform: translate(10px, -5px) rotate(45deg);
	}
	header.open .menubutton_mobile svg {
		transform: scale(0.65);
	}
	header.open .menu-items ul li,
	header.open .menu-items .menu_links,
	header.open .menu-items .menu_contact {
		opacity: 1;
		transform: translateY(0px);
	}


	


	header .quickmenu ul li:nth-child(2) {
		top: calc((0 * var(--menu-height)) + var(--header-height));
	}
	header .quickmenu.open ul li:nth-child(2) {
		left: 0px;
		transition-delay: 0.1s;
	}

	header .quickmenu ul li:nth-child(3) {
		top: calc((1 * var(--menu-height)) + var(--header-height));
	}
	header .quickmenu.open ul li:nth-child(3) {
		left: 0px;
		transition-delay: 0.2s;
	}

	header .quickmenu ul li:nth-child(4) {
		top: calc((2 * var(--menu-height)) + var(--header-height));
	}
	header .quickmenu.open ul li:nth-child(4) {
		left: 0px;
		transition-delay: 0.3s;
	}

	header .quickmenu ul li:nth-child(5) {
		top: calc((3 * var(--menu-height)) + var(--header-height));
	}
	header .quickmenu.open ul li:nth-child(5) {
		left: 0px;
		transition-delay: 0.4s;
	}
}
@media (max-width: 364px) {
	header .menu-items{
		row-gap: 40px;
	}
	header .menu-items .menu_links{
		display: none;
	}
}
@media (max-height: 640px) {
	header .menu-items .menu_contact,
	header .menu-items .menu_links{
		display: none;
	}
}