@charset "utf-8";
:root
{
	--menu-main-color:var(--root-main-color);
	--menu-text-color:var(--root-main-text-color);
	--menu-hover-color:var(--root-main-2shade-darker);
}


#navmenu
{
	position:fixed;
	overflow:hidden;
	transition: all .3s cubic-bezier(.4,.01,.165,.99);
	height:2rem;
	justify-content: space-around;
	width:100%;
	z-index:10;
}
#menubutton
{
	background-color:var(--menu-main-color);
	height:2rem;
	width:2rem;
	z-index:10;
	
}
#burgerlines
{
	position: absolute;
    top: .5rem;
    left: .5rem;  
    width: 1rem;
	height:1rem;   
    overflow: hidden;
    cursor: pointer;
}

.nav-menu-opened #burgerlines .singleburgerline
{
	transform: rotate(90deg);
}

.singleburgerline, .singleburgerline:after
{
	content:"";
	background-color:var(--menu-text-color);
	height:2px;
	width:1rem;
	transition: all .55s cubic-bezier(.19,1,.22,1);
}
.singleburgerline
{
	position:relative;
}
.singleburgerline:after
{
	right: 0;
    position: absolute;
    transform: translate3d(120%,0,0);
}


.singleburgerline:nth-child(1)
{
	transform: translateY(0) translate3d(-120%,0,0);
}
#burgerlines:hover .singleburgerline:nth-child(1)
{
	transform: translate3d(0%,0,0);
}
.nav-menu-opened #burgerlines .singleburgerline:nth-child(1)
{
	transform: translateY(8px) rotate(45deg) translate3d(0,0,0);
}


.singleburgerline:nth-child(2)
{
	transform: translateY(.2rem) translate3d(-120%,0,0);
    transition-delay: 50ms;
}
#burgerlines:hover .singleburgerline:nth-child(2)
{
	transform: translate3d(0%,.2rem,0);
}
.nav-menu-opened #burgerlines .singleburgerline:nth-child(2)
{
	opacity: 0;
    transform: translate3d(0,0,0);
}


.singleburgerline:nth-child(3)
{
	transform: translateY(.4rem) translate3d(-120%,0,0);
    transition-delay: .1s;
}
#burgerlines:hover .singleburgerline:nth-child(3)
{
	transform: translate3d(0%,.4rem,0);
}
.nav-menu-opened #burgerlines .singleburgerline:nth-child(3)
{
	transform: translateY(5px) rotate(-45deg) translate3d(0,0,0);
}
#navtitle
{
	
	position:absolute;
	left:calc(.5rem - 1px);
	top:calc(.5rem + 8px + .4rem);
		width:1rem;
	font-size:calc(.6rem - 6px);
	color:var(--menu-text-color);
	pointer-events: none;
}
#navitems
{
	background-color:var(--menu-main-color);
	top:0px;
	left:calc(0px - 100%);
	width:calc(100% - 2rem);
	position:absolute;
	height:2rem;
	transition: all .3s ease-in-out;
	z-index:2;
	
}
.nav-menu-opened #navitems
{
	left:2rem;
}
#navitems ul
{
	display:flex;
	width:100%;
	list-style-type: none;
	justify-content: center;
	align-items: center;
	height:100%;
}
#navitems ul li
{
	flex:1 0 auto;
	font-size:.5rem;
	height:100%;
	text-align:center;
	transition: all .1s ease-in-out;

}
#navitems ul li:hover
{
	background-color:var(--menu-hover-color);

	
}
#navitems ul li a
{
	text-decoration:none;
	color:var(--menu-text-color);
	display:inline-block;
	width:100%;
	padding-top:.75rem;
}
#navitems ul li a:hover
{
	
}