.main-navigation{
	box-sizing:border-box;
	position:fixed;
	top:30px;
	right:50px;
	right: max(50px,calc( ( 100vw - 1600px ) / 2 + 50px ) );
	width:50px;
	height:50px;
	border:2px solid var(--menu-color,#011C26);
	z-index:100002;
	border-radius:30px;
	cursor:pointer;
	transition:border-color 300ms ease,box-shadow 300ms ease;
	overflow:hidden;
	background-color:transparent;
	backdrop-filter:blur(4px);
}
@media (min-width:0px) and (max-width:600px){.main-navigation{right:23px;}}

.main-navigation::before,
.main-navigation::after{
	content:'';
	position:absolute;
	left:0;
	width:24px;
	height:3px;
	background-color:var(--menu-color,#011C26);
	transition:all 300ms ease;
	transform-origin:center;
}
.main-navigation::before{transform:translate(11px,18px);}
.main-navigation::after{transform:translate(11px,26px);}

.main-navigation:hover,
.main-navigation.displayed{
	border-color:var(--menu-color-hover,#73B8BF);
	box-shadow:0 0 40px 0 var(--menu-color-hover,#73B8BF);
}
.main-navigation:hover::before,
.main-navigation:hover::after,
.main-navigation.displayed::before,
.main-navigation.displayed::after{
	background-color:var(--menu-color-hover,#73B8BF);
}
.main-navigation.displayed::before{transform:translate(11px,21px) rotate(45deg);}
.main-navigation.displayed::after{transform:translate(11px,21px) rotate(-45deg);}

.main-navigation-container{
	box-sizing:border-box;
	position:fixed;
	top:0;
	right:auto;
	bottom:0;
	left:-100%;
	width:60%;
	z-index:100001;
	overflow:hidden;
	transition:all 300ms ease;
}
.main-navigation-container.displayed{
	right:0;
	left:auto;
}
@media (min-width:0px) and (max-width:600px){
	.main-navigation-container{width:90%;}
}
.main-navigation-container>DIV{
	box-sizing:border-box;
	width:200%;
	display:grid;
	grid-template-columns:repeat(2,1fr);
	justify-items:stretch;
	gap:0;
	min-height:100%;
	transition:all 300ms ease;
	transform:translate(20%,0);
}
.main-navigation-container.displayed>DIV{transform:translate(0,0);}
.main-navigation-container.next>DIV{transform:translate(-50%,0);}
.main-navigation-container>DIV>DIV{
	min-height:100%;
	padding:80px 40px 40px 40px;
	background-color:var(--menu-color-background,#011C26);
}
.main-navigation-container A{
	display:block;
	padding:10px;
	text-decoration:none;
	color:var(--menu-link-color,#FFFFFF);
	border-bottom:1px solid var(--menu-link-border-color,#FFFFFF);
	transition:all 300ms ease;
	border-radius:0;
}
.main-navigation-container A:hover{
	color:var(--menu-link-color-hover,#011C26);
	background-color:var(--menu-link-hover-background,#FFFFFF);
}

/*
background-color:var(--menu-color-background,#011C26);
*/