.page-header .nav-opener {
	position: absolute;
	padding: 5vw 4vw;
	width: 23vw;
	opacity: 0;
	transition: opacity 0.5s ease;
	transition-delay: 1.5s;
	z-index: 4;
}

.page-header .nav-opener.show {
	opacity: 1;
}

.main-nav {
	position: absolute;
	top: 4vw;
	left: 3vw;
	max-height: 6vw;
	width: 0;
	background-color: var(--bg-col);
	overflow:hidden;
	border-radius: 2vw;
	z-index: 12;
	-webkit-box-shadow: 0px 0px 11px 4px var(--spot-col-light);
	box-shadow: 0px 0px 9px 4px var(--spot-col-light);
	opacity: 0;
	transition: max-height 0.7s var(--ease), width 0.7s var(--ease), opacity 0.2s var(--ease);
}

.main-nav.half-open {
	width: 94vw;
	max-height: 6vw;
	opacity: 1;
}

.main-nav.open {
	max-height: 96dvh;
	width: 94vw;
	opacity: 1;
}

.main-nav.closed {
	width: 0;
	max-height: 6vw;
	opacity: 1;
}

.nav-closer {
	position: absolute;
	z-index: 11;
	top: 0;
	left: 0;
	padding: 3vw;
	width: 17vw;
	opacity: 0;
	transition: opacity 0.5s var(--ease);
	transition-delay: 0s;
}

.main-nav.open .nav-closer {
	opacity: 1;
	transition-delay: 0.2s;
}

.main-nav ul {
	font-size: var(--ty-big);
	letter-spacing: -0.03rem;
	padding: 19vw 3vw 3vw 3vw;
	margin: 0 0 0.5rem 0;
	line-height: 1.22;
	opacity: 0;
	transition: opacity 0.5s var(--ease);
	transition-delay: 0s;
}

.main-nav.open ul {
	opacity: 1;
	transition-delay: 0.2s;
}