@media screen {
	
.invisible {
	display:none;
}

#navigation {
	position:relative;
	height:45px;
	font-size:1.125rem;
	background:#ffffffaa;
    align-items:center;
    align-self:center;
    border-radius:25px;
}

#navigation a, #navigation strong {
	color:#666;
	font-weight:normal;
}

#navigation ul {
    display:flex;
    list-style:none;
    padding:0;
    margin:0;
}

#navigation .level_1>li {
    display:flex;
    align-items:center;
	position:relative;
}

#navigation .level_1>li a, #navigation .level_1>li strong {
    display:block;
    text-decoration:none;
    white-space:nowrap;
    height:45px;
	padding:0 15px;
	align-content:center;
}

#navigation .level_1>li:first-child a, #navigation .level_1>li:first-child strong {
    text-indent:-100vw;
    width:45px;
    height:45px;
	border-radius:50%;
    background-size:30px 30px;
    background-repeat:no-repeat;
    background-color:transparent;
    background-image:url(home_24dp_000000_FILL0_wght200_GRAD0_opsz24.svg),url(home_24dp_FFFFFF_FILL0_wght200_GRAD0_opsz24.svg);
    background-position:center center, center 45px;
}

#navigation .level_1>li:first-child a:hover, #navigation .level_1>li:first-child strong:hover {
    background-position:center 45px, center center;
	background-color:#e77336;
}

#navigation .level_1>li:hover>a, #navigation .active, #navigation .trail {
	text-decoration:none;
	background-color: #e77336;
    border-radius: 24px;
	color:#fff;
}

#navigation .level_2 {
	display:none;
	position:absolute;
	top:100%;
	background:#fff;
	border-radius:0 0 20px 20px;
	border-top: 5px solid transparent; 
	background-clip: padding-box;
}

#navigation .level_1>li:hover .level_2 {
	display:block;
}

#navigation .level_2>li:hover>a {
	text-decoration:underline;
	color:#e77336;
}

}


@media screen and (max-width:900px) {

/* burger-icon via pseudo-element */
#navigation::after {
    /*content:'\2630'; /* unicode for burger-icon(☰) */
    content:"";
	width:45px;
	height:45px;
	background-image:url(menu_24dp_000000_FILL0_wght200_GRAD0_opsz24.svg), url(close_24dp_000000_FILL0_wght200_GRAD0_opsz24.svg);
	background-size:30px 30px;
    background-repeat:no-repeat;
    background-position:center center, center 45px;
	background-color: #fff;
    position:absolute;
    left:0;
    top:0;
	border-radius:50%;
    cursor:pointer;
    z-index:101;
    transition:transform 0.3s;
}
    
#navigation {
	padding:0;
	order:-1;
	width:45px;
}

#navigation ul {
    position:fixed;
	inset:20px;
    height:calc(100vh - 65px);
    padding-top:75px;
    background:#00000099;
    border-radius:25px;
    flex-direction:column;
    /* Initially hide menu */
	transform:translateX(-100vw);
    transition:transform 0.4s ease-in-out;
}

#navigation a, #navigation strong, #navigation .active, #navigation .trail {
	font-size:1.3rem;
	color:#fff;
}
    
#navigation .level_1>li {
    margin:0 15px;
	display:unset;
}
    
#navigation .level_1>li:first-child a, #navigation .level_1>li:first-child strong {
    text-indent:initial;
    background:none;
}
    
#navigation .level_1>li:first-child a:hover, #navigation .level_1>li:first-child strong:hover {
    background:none;
}

#navigation .level_1>li:hover .level_2 {
	display:unset;
}

#navigation .level_2 {
	display:unset;
	position:unset;
	top:0;
	background:unset;
	border-radius:unset;
}

#navigation .level_2 li {
	margin:0 20px;
}
    
/* class is-open setted via js */
#navigation.is-open>ul {
    transform:translateX(0);
}

/* change burger-icon to X */
#navigation.is-open::after {
    /*content:'\2715'; /* Unicode for X (✕) */
    background-position:center 45px, center center;
    transform:rotate(90deg); /* Rotation-Effect */
	background-color:#e77336;
}
    
/* optional:prevent body-scroll in opened menu */
body.menu-active {
    overflow:hidden;
}

}