@media screen {

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

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

#navigation ul li {
    display:flex;
    align-items:center;
	border-radius:25px;
}

#navigation ul li a {
    display:block;
    text-decoration:none;
    color:#000000;
    white-space:nowrap;
    height:45px;
	padding:0 15px;
	align-content:center;
}

#navigation ul li:first-child a {
    text-indent:-100vw;
    width:45px;
    height:45px;
    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 ul li:first-child a:hover {
    background-position:center 45px, center center;
}

#navigation ul li:last-child {
    display:none;
}

#navigation ul li:hover {
    background:#cc0000;
	
}

#navigation ul li:hover a {
	color: #fff;
}

}


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

/* 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:#ffffffcc;
    border-radius:25px;
    flex-direction:column;
    /* Initially hide menu */
	transform:translateX(-100vw);
    transition:transform 0.4s ease-in-out;
}
    
#navigation ul li {
    margin:0 15px;
}
    
#navigation ul li:first-child a {
    text-indent:initial;
    background:none;
}
    
#navigation ul li:first-child a:hover {
    background:none;
}
    
#navigation ul li:last-child {
    display:initial;
}
    
/* 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:#cc0000;
}
    
/* optional:prevent body-scroll in opened menu */
body.menu-active {
    overflow:hidden;
}

}