#header {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1000;
}

nav#menu {
	z-index: 1000;
	backdrop-filter: blur(1rem);
	background-color: rgba(0, 0, 0, 0.3);
	border-bottom: .1rem solid white;
	margin-bottom: calc(-1 * var(--header-height));
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	position: fixed;
	width: 100%;
	top: 0;
	left: 0;
	transition: 0.4s;
}

nav#menu.menu-attached,
html.menu-open nav#menu {
	background-color: white;
	border: 0;
	color: var(--primary-color);
	box-shadow: 0 .4rem 1.2rem rgba(0, 0, 0, .2);
}

.menu-main-container {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: nowrap;
	width: 100%;
}

.menu {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 4rem 2rem;
	max-height: var(--header-height);
	height: 100%;
	width: 100%;
	max-width: 120rem;
	transition: 0.4s;
	overflow: hidden;
}

.menu-item {
	height: var(--menu-item-height);
	position: relative;
	display: flex;
	align-items: center;
}

.menu-item > a {
	height: var(--menu-item-height);
	display: flex;
	align-items: center;
	padding: 0 2rem;
}

.menu-item > a > span {
	font-family: 'Barlow Semi Condensed', sans-serif;
	font-size: 1.6rem;
	text-transform: uppercase;
	font-weight: 500;
	letter-spacing: .1rem;
	color: white;
	transition: 0.4s;
}

nav#menu.menu-attached .menu {
	padding: 1rem 2rem;
	border: 0;
}

nav#menu.menu-attached .menu > li > a > span {
	color: var(--color-primary);
}

.menu-item-home,
.mobile-menu-logo {
	background-image: url('../images/inverted_logo.png');
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	padding: 0;
	transition: 0.4s;
}

.menu-item-home > a {
	color: transparent;
	height: 6rem;
	width: 26rem;
}

nav#menu.menu-attached .menu-item-home,
nav#menu.menu-attached .mobile-menu-logo,
html.menu-open .mobile-menu-logo {
	background-image: url('../images/logo.png');
}

.menu-item-home > a > span,
.mobile-menu-logo > a > span,
.mobile-menu-logo,
.mobile-menu-toggle {
	display: none;
}


/* non-mobile view */
@media only screen and (min-width: 768px) {
	.menu-item::after {
		content: '';
		display: block;
		position: absolute;
		z-index: -1;
		width: 100%;
		left: 0;
		height: var(--header-height);
		background-color: white;
		transition: all 0.4s;
		translate: 0 100%;
	}

	nav#menu.menu-attached .menu > .menu-item::after {
		background-color: var(--color-primary);
	}

	.menu-item:hover > a > span {
		color: var(--color-primary);
		transition: 0.4s;
	}
	
	nav#menu.menu-attached .menu-item:hover > a > span {
		color: white;
	}
	
	.menu-item.current-menu-item:not(.menu-item-home)::after {
		translate: 0 calc(100% - 0.5rem);
	}

	.menu-item:hover:not(.menu-item-home)::after {
		translate: 0 0%;
	}
}

/* tablet view */
@media only screen and (max-width: 1023px) {
	.menu-item > a > span {
		font-size: 1.4rem;
		letter-spacing: .05rem;
	}

	.menu-item > a {
		padding: 0 1rem;
	}

	.menu-item-home > a {
		width: 18rem;
	}
	
}


/* mobile view */
@media only screen and (max-width: 767px) {
	nav#menu {
		height: var(--header-height);
		justify-content: flex-start;
		padding: 0 3.5rem;
	}

	.mobile-menu-logo,
	.mobile-menu-logo > a {
		display: block;
		width: 20rem;
		height: 5rem;
	}

	.mobile-menu-toggle {
		display: block;
		width: 5rem;
		height: 5rem;
		position: absolute;
		top: 50%;
		right: 2.5rem;
		translate: 0 -50%;
	}

	.mobile-menu-toggle > span {
		width: 2.6rem;
		height: .2rem;
		background-color: white;
		position: absolute;
	}

	.mobile-menu-toggle > span:nth-child(1) {
		left: 1.2rem;
		top: 1.4rem;
		transition-property: width, background-color;
		transition-timing-function: cubic-bezier(0, .5, .6, 1), linear;
		transition-delay: .3s, 0s;
		transition-duration: .15s, .2s;
	}

	.mobile-menu-toggle > span:nth-child(2) {
		left: 1.2rem;
		top: 2.4rem;
		transition-property: all;
		transition-timing-function: cubic-bezier(.4, 0, .6, 1);
		transition-delay: 0s;
		transition-duration: .2s;
	}

	.mobile-menu-toggle > span:nth-child(3) {
		left: 1.2rem;
		top: 2.4rem;
		opacity: 0;
		transition-property: rotate, opacity, background-color;
		transition-timing-function: cubic-bezier(.4, 0, .6, 1), linear, linear;
		transition-delay: 0s, .2s, 0s;
		transition-duration: .2s;
	}

	.mobile-menu-toggle > span:nth-child(4) {
		right: 1.2rem;
		bottom: 1.4rem;
		transition-property: width, background-color;
		transition-timing-function: cubic-bezier(0, .5, .6, 1), linear;
		transition-delay: .3s, 0s;
		transition-duration: .15s, .2s;
	}

	.menu-open .mobile-menu-toggle > span:nth-child(1) {
		width: 0;
		transition-property: width, background-color;
		transition-timing-function: cubic-bezier(.4, 0, 1, .5), linear;
		transition-delay: 0s, .2s;
		transition-duration: .15s, .2s;
	}

	.menu-open .mobile-menu-toggle > span:nth-child(2) {
		rotate: 45deg;
		transition-property: rotate, background-color;
		transition-timing-function: cubic-bezier(.3, 0, .4, 2), linear;
		transition-delay: .3s, 0s;
	}

	.menu-open .mobile-menu-toggle > span:nth-child(3) {
		rotate: -45deg;
		opacity: 1;
		transition-property: opacity, rotate, background-color;
		transition-timing-function: linear, cubic-bezier(.3, 0, .4, 2), linear;
		transition-delay: .1s, .3s, 0s;
	}

	.menu-open .mobile-menu-toggle > span:nth-child(4) {
		width: 0;
		transition-property: width, background-color;
		transition-timing-function: cubic-bezier(.4, 0, 1, .5), linear;
		transition-delay: 0s, .2s;
		transition-duration: .15s, .2s;
	}

	nav#menu.menu-attached .mobile-menu-toggle > span,
	html.menu-open .mobile-menu-toggle > span {
		background-color: var(--color-primary);
	}

	.menu-main-container {
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		position: absolute;
		top: var(--header-height);
		left: 0;
		align-items: stretch;
		background-color: white;
		height: calc(100dvh - (var(--header-height) - .1rem));
		transition: .2s;
		transition-delay: .7s;
	}

	html.menu-open .menu-main-container {
		visibility: visible;
		opacity: 1;
		transition-delay: .2s;
		pointer-events: all;
	}

	.menu {
		padding: 0 !important;
		max-height: none !important;
		flex-direction: column;
	}

	.menu > .menu-item.menu-item-home {
		display: none !important;
	}

	.menu-item:nth-child(1) { --menu-item-delay: .2s; }
	.menu-item:nth-child(2) { --menu-item-delay: .3s; }
	.menu-item:nth-child(3) { --menu-item-delay: .4s; }
	.menu-item:nth-child(5) { --menu-item-delay: .5s; }
	.menu-item:nth-child(6) { --menu-item-delay: .6s; }
	.menu-item:nth-child(7) { --menu-item-delay: .7s; }

	.menu-item {
		flex-grow: 1;
		width: 100%;
		justify-content: center;
		border-top: .1rem solid var(--color-grey);
		background-color: white;
		opacity: 0;
		transition: .2s;
		transition-delay: calc(.7s - var(--menu-item-delay)) !important;
	}

	html.menu-open .menu-item {
		opacity: 1;
		transition-delay: var(--menu-item-delay) !important;
	}

	.menu-item > a {
		width: 100%;
		height: 100%;
		justify-content: center;
	}

	.menu-item > a > span {
		font-size: 1.6rem;
		color: var(--color-primary);
	}

	html.menu-open {
		overflow: hidden;
	}
}