.nav{
	width: 100%;
	max-width: 100%;
	margin: 0;
	z-index: 110;
	position: relative}

/* overlay */
.nav__overlay{
	margin: 0 0.625rem;
	padding: 0.625em 0}
@media screen and (min-width: 22.5em) {
	.nav__overlay{
		margin: 0 1.25rem
	}
}
@media screen and (min-width: 29.938em) {
	.nav__overlay{
		margin: 0 1em;
		padding-top: 1em;
		padding-left: calc(1em + 64px)}
}
@media screen and (min-width: 30em) {
	.nav__overlay{
		padding-left: calc(2em + 88px)}
}
@media screen and (min-width: 35em) {
	.nav__overlay{
		display: flex;
		justify-content: space-between}
}
@media screen and (min-width: 48em) {
	.nav__overlay{
		margin: auto;
		padding-top: 2em;
		padding-left:  calc(3em + 108px)}
}
@media screen and (min-width: 60em) {
	.nav__overlay{
		padding-top: 2.5em;
		padding-left: calc(3em + 304px)}
}
@media screen and (min-width: 90em) {
	.nav__overlay{
		padding-top: 3.5em;
	}
}
	
/* responsive navigation */

.js-nav-active .nav-collapse{
	clip: unset !important;
	background: #efefef;
	width: 100% !important;
	max-width: 100%;
	position: absolute !important}
	
.nav-collapse ul{	
	margin-bottom: 1em}
.nav-collapse ul:last-child{	
	margin-bottom: 0.5em}
@media screen and (min-width: 30em) {
	.nav-collapse ul{
		text-align: left;
		padding: 0;
		display: inline-block;
		width: auto;
		vertical-align: top}
	.nav-collapse ul:first-child{
		width: 100%}
	/*.nav-collapse ul:nth-child(2){
		margin-right: 1em}*/
}
@media screen and (min-width: 30em) and (max-width: 34.938em) {
	.nav-collapse ul:nth-child(2){
		margin-right: 1em}
}
@media screen and (min-width: 35em) {
	.nav-collapse ul:first-child{
		width: auto}
	.nav-collapse ul:last-child{
		margin-right: 0}
}

/* toggle */
.nav-toggle{
	padding: 0.5em 0;
	display: block;
	float: right}
@media screen and (max-width: 29.938em) {
	.nav-toggle{
		z-index: 111;
		position: absolute}
}
@media screen and (min-width: 29.938em) {
	.nav-toggle{
		float: none}
}
@media screen and (min-width: 30em) {
	.nav-toggle{
		display: inline-block}
}
@media screen and (min-width: 48em) {
	.nav-toggle{
		vertical-align: middle}
}

/* DEMO */
.demo .nav-box{
	overflow: hidden}
.demo .toggle-icon--desktop{
	display: none}
.demo .nav-toggle{
	/*font-size: var(--text-xs);
	font-weight: bold;*/
	position: relative}
.demo .navigation-language{
	margin: 0.125em;
	display: none; /* TEMPORARILY DISABLED */
	/*float: right;
	margin-right: 3em*/}
/*
.demo .navigation-language ul li:first-child{
	border: 4px solid red;
	border-top-left-radius: 50%;
}
*/
.demo .navigation-language li{
	display: inline-block}
@media screen and (max-width: 29.938em) {
/*
.demo .navigation-language ul{
	display: block;
	border-right: 1px solid red;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}
*/		
.demo .navigation-language li a{
	display: block;
	border-top: 1px solid black;
	border-bottom: 1px solid black;
	padding: 0em 0.5em}
.demo .navigation-language li a:hover{
	display: block
}
.demo .navigation-language li:first-child a {
	padding-left: 0.75em;
	border: 1px solid black;
	border-right: none;
	border-top-left-radius: 30px;
	border-bottom-left-radius: 30px;
}
.demo .navigation-language li:last-child a {
	padding-right: 0.75em;
	border: 1px solid black;
	border-left: none;
	border-top-right-radius: 30px;
	border-bottom-right-radius: 30px;
}
}
/*.demo .navigation-language li:first-child a{
	padding-left: 0}*/
@media screen and (max-width: 29.938em) {
	.demo .navigation-language {
		display: none;
	}
	.js-nav-active .demo .navigation-language{
		/* TEMPORARILY DISABLED
		display: block;
		*/
		display: none;
		position: absolute !important}
	.js-nav-active .demo .nav__overlay{
		padding-top: 3em !important}
	.js-nav-active .demo .nav__overlay{
		display: flex;
		flex-flow: row wrap;
	}
	.js-nav-active .demo .nav__overlay ul{
		width: 70%;
		/*flex-grow: 1;*/
	}
	.js-nav-active .demo .nav__overlay ul:first-child{
		width: 30%;
	}
	.js-nav-active .demo .nav__overlay ul:last-child{
		margin-left: auto;
	}
}
.demo .navigation-language li{
	border-left: 1px solid;
	display: inline-block}
.demo .navigation-language li:first-child{
	border-left: none}
@media screen and (min-width: 30em) {
	.demo .bar{
		align-items: flex-start}
	.demo .navigation-language {
		margin: 0;
		border: none;/*
		float: none;*/
	}
	.demo .navigation-language li {
		margin: 0;
		padding: 0;
		border-left: none;
		/*border-top: 1px solid;*/
		display: block;
	}
	.demo .navigation-language li:first-child{
		border-top: none}
	.demo .navigation-language li{
		display: block}	
	.demo .navigation-language li a{
		padding: 0.25em}
		.demo .navigation-language{
		border: none}
	.demo .navigation-language li{
		margin-bottom: 0.25em;
		
		border: none}	
	.demo .navigation-language li a{
		padding: unset;
		padding: 0.188em;
		/*display: block*/}
}
@media screen and (min-width: 48em) {
	.demo .toggle-icon--mobile{
		display: none}
	.demo .toggle-icon--desktop{
		display: block}
	.demo .navigation-language li{
		margin-bottom: 0.5em
	}	
	.demo .nav-box{
		position: relative;
		overflow: unset;
		text-align: right}
	.demo .nav-toggle{
		position: absolute !important;
		padding: 0.188em 0;
		line-height: 1.3;
		top: 0;
		left: 156px}
	.demo .nav__overlay{
		padding-top: 3em !important}
}
@media screen and (min-width: 60em) {	
	.demo .navigation-language{
		padding: 0}
	.demo .navigation-language li{
		margin-left: 0.5em;
		margin-bottom: 0;
		display: inline-block}
	.demo .navigation-language li:first-child{
		margin-left: 0}
	.demo .nav-toggle{
		left: 352px}
}