/* new NAV BAR */
.header-mobile {
	display: none;
    position: relative;
}
.header-mobile img {
	width: auto;
	height: 12vw;
	float: left;
	margin-right: 2vw;
	margin-top: 1vh;
}
.header-mobile h1 {
	float: left;
	text-align: left;
	padding-top: calc(1vh + 1vw);
	font-size: 4.5vw;
}



#toggle {
	width: 8vw;
	/* max-width: 40px; */
	cursor: pointer;
	float: right;
	transition: all 0.3s ease-out;
	visibility: hidden;
	opacity: 0;
}
#toggle .span {
	height: 1vw;
	background: var(--colorBackgroundContent);
	transition: all 0.3s ease-out;
	backface-visibility: hidden;
	margin: 1.5vw auto;
}
#toggle.on #one { transform: rotate(45deg) translateX(1.5vw) translateY(2.5vw); /* margin-top: 10px; */}
#toggle.on #two { opacity: 0; }
#toggle.on #three { transform: rotate(-45deg) translateX(1vw) translateY(-2vw); }


@media screen and (max-width:34.375em){
	.navbar {
		width: 96%;
        position: absolute;
        opacity: 0;
		transition: all 0.3s ease-out;
		overflow: hidden;
		background-color: var(--colorBackground);
		height: calc(100% - 15vw);
        padding-top: 10vh;
        margin-top: 0px;
        box-shadow: none;
        display: none;
	}
	.navbar a {
		float: none;
		color: var(--colorTextNavi);
		text-align: center;
		margin: 0px;
		display: table-row;
		vertical-align: middle;
		font-size: 160%;
	}
	.dropdown {
		float: none;
		overflow: hidden;
		display: table-row;
		vertical-align: middle;
	}
	.dropdown .dropbtn {
		margin: 0px;
		font-size: 160%;
	}
	
	.navbar a:hover, .dropdown:hover .dropbtn {
		color: var(--colorTextNavi);
	}
	
	.dropdown:hover .dropdown-content {
	    display: none;
	}

	.dropbtn > .fa-caret-down{
		display: none;
	}
}

.navbar.visible {
	visibility: visible;
	opacity: 1;
	display: table;
}

#mobile-submenu {
	background-color: var(--colorBackgroundNavi);
	margin-top: 10px;
	margin-bottom: 0px;
	box-shadow: 0px -1px 1px 1px var(--colorBackgroundNavi);
	border-radius: 1px;
	line-height: 4vh;
	display: none;
}

#mobile-submenu:after {
    content: "";
    display: table;
    clear: both;
}

#mobile-submenu a{
	color: var(--colorTextNavi);
	float: left;
	width: 25%;
	text-align: center;
	text-decoration: none;
	font-size: calc(10px + (17 - 10) * ((100vw - 320px) / (550 - 320)))
}