:root { 
	--navHeight: 80px;
	--navBgColor: var(--second-color); 
	--navMobBgColor: linear-gradient(17deg, #000, #363636); 
	--navElementsMobBgColor: linear-gradient(17deg, #acacac, #f8f8f8); 
	--navElementsMobSeparatorColor: 1px solid #666;
	--navFooterMobColor: #000;
	--navBgShadow: 0 0 0px #ccc; 
	--navLinkColor: rgba(255,255,255,0.96); 
	--navLinkHoverColor: var(--main-color); 
	--navLinkHoverBgColor: var(--second-color); 
	--navFooterColor: rgba(255,255,255,0.5);
	--navLinkFont: var(--font2); 
	--searchBarBg: var(--main-color);
}


/* LOGO */
nav #desktoplogo {text-align:center;}
nav #desktoplogo #logo {font-family: var(--font5); font-weight:lighter;font-size: 32px; margin-bottom: 5px;color: rgba(255,255,255,0.96); text-transform: uppercase; letter-spacing: 2px;}


/* NAVIGATION */
nav {top: 0px; width: 100%; z-index:100; position:fixed;}
.grid {margin: 0px;}

#mobMenue {background: var(--navElementsMobBgColor);display: none; width: 100vw; min-height: calc(100vh - var(--navHeight));
	 top:60px; left: 0;text-align:left; padding: 5vh 0 15vh 0; z-index:150; overflow-x: scroll; max-height: none; position: fixed;}
#mobMenue #modalDialog .button {display: none;}	 

.navigation {background: var(--navBgColor); padding: 0px; height: var(--navHeight);  box-shadow: var(--navBgShadow); }
.navigation .col.logo,
.navigation .col.navelements,
.navigation .col.tools {text-align:center;}
.navigation .col.tools .button {padding: 2px 5px;}
.navigation .col.tools .button.circleScaleBtn {color: var(--buttHoverLinkColor);}

.navigation .col {text-align:center;}
.navigation .fa.fa-angle-down,
.navigation .fa.fa-angle-up {padding: 5px 0 0 3px; color: var(--navLinkColor); line-height: 12px;}
.navigation .col.logo .col.hamburger{display:none;}
.navigation ul.main {list-style:none; display:inline-block; margin:auto;}
.navigation li {float:left; padding: 0px 10px 2px 10px;}
.navigation li:hover,
.navigation li.current{text-decoration: none;}
.navigation li.current a,
.navigation li.current .fa.fa-angle-up,
.navigation li.current .fa.fa-angle-down {color: var(--navLinkHoverColor);} 
.navigation li a {font-family: var(--navLinkFont); font-size: 16px; text-decoration:none; font-weight: normal; letter-spacing: 1px; color: var(--navLinkColor);}
.navigation li a:hover {text-decoration:none; color: var(--navLinkHoverColor);}
.navigation ul.first { position: absolute; padding: 5px; margin-top: 0px; margin-left: 0px; background: var(--navBgColor); 
box-shadow: var(--navBgShadow); list-style:none; text-align: left; display: none; border-radius: 4px;}
.navigation ul.first li {float:none; margin-left: 0px; padding-top: 5px;}
.navigation ul.first li a {font-size: 80%;}
.navigation ul.first li:hover,
.navigation ul.first li.current {border-radius: 0px;}
.navigation li.current li.nosel a:hover {color: var(--navLinkHoverColor);}
.navigation li.current li.nosel a {color: var(--navLinkColor);}
.navigation #mobMenueFooter {display: none;}

@media only screen and (min-width: 960px) {
	.navigation li:hover ul.first {display:block;}
}

@media only screen and (min-width: 290px) and (max-width: 959px) {
	.navigation .fa.fa-navicon {color: #f9f9f9; text-shadow: 0 0 4px #999;}
	/*#content .fullHeight {min-height: calc(100vh - var(--navHeight));}*/
	nav {position: unset; margin-top: -20px;}
	nav #desktoplogo {text-align: center;}
	nav #desktoplogo #logo {margin-bottom: 0;}
	.navigation .col-8 {display: none;}
	nav #langSelector {}
	#mobMenue #modalDialog .button {display: inline-block;width: 80px;float: right; text-align: center; margin-right: 5vw; padding: 2px;}
	nav #magnifyerglas {margin-top: 5px; text-align: center;} 
	.navigation {opacity: 1; padding: 0;}
	.navigation .col.logo {flex-basis: 100.00%; width: 100.00%; max-width: 100.00%; text-align:left; position:fixed; z-index:100; 
	height: 60px;padding-left: 10px; background: var(--navBgColor);}
	nav #desktoplogo img#logo {}
	nav #desktoplogo {padding: unset;}
	.navigation .col.navelements {order: 1; display: none; flex-basis: 100%; max-width: 100%; min-height: calc(100vh - 80px);
	 margin-top:var(--navHeight); margin-bottom: 100px; text-align:left; padding: 5vh 0 15vh 0;  
	 z-index:50; overflow-x: visible; max-height: none; clear: both; position: relative;}
	.navigation .fa.fa-angle-down,
	.navigation .fa.fa-angle-up {position: absolute; right: 5%; color: #000;}
	.navigation li {float: none; border-bottom: var(--navElementsMobSeparatorColor); padding-left: 5%; padding-right: 5%;  width: 90vw;}
	.navigation li:hover,
	.navigation li.current {border-radius: 0px;}
	
	.navigation li a,
	.navigation li.current li.nosel a {color: #222;}
	
	.navigation ul.main  {margin-bottom: 50px;}
	.navigation ul.first {position: relative; background: transparent; box-shadow: 0 0 0px; padding-top: 0px;}
	.navigation ul.first li {border: 0px; margin-left: -5%; width: 100%;}
	.navigation ul.first li a {padding-left: 5%;}
	
	.navigation .col.tools {flex-basis: 20.00%; width:20.00%; max-width: 20.00%; position:fixed; z-index:100; right: 0; 
	height: var(--navHeight); background: var(--navBgColor); }
	.navigation .col.logo .col {text-align:left;}
	.navigation .col.logo img#logo {display:inline-block; margin:auto;}
	.navigation .col.logo .col.hamburger{display:block; flex-basis: 20%; max-width: 20%; text-align:center; font-size: 2rem;}
	.navigation .fa.fa-navicon {line-height: 2;} 
	
	.navigation #mobMenueFooter {display: block; text-align: center; background: var(--navFooterMobColor); padding: 1rem 0; width: 100vw; color: var(--navFooterColor); 
	z-index:100; bottom: 0; margin: auto;}
	.navigation #mobMenueFooter a {color: var(--navFooterColor); padding: 5%;} 
	.navigation #mobMenueFooter ul {list-style: none; display: inline-block; margin: auto;}
	.navigation #mobMenueFooter li {float:left; padding: 5px 10px 5px 5px; width: unset; border: unset; font-size: 70%; display: inline-block; margin: auto;}
	.navigation #mobMenueFooter li:hover,
	.navigation #mobMenueFooter li.current {background: unset; color: var(--second-color);}
	.navigation #mobMenueFooter li a:hover,
	.navigation #mobMenueFooter li.current a {color: var(--main-color);}
}
@media only screen and (min-width: 370px) and (max-width: 959px) {
	nav #desktoplogo #logo {margin-bottom: 0; margin-left: calc(50% - 23vw); margin-top: 5px;}
}

@media only screen and (min-width: 960px) and (max-width: 1119px) {
	.navigation li a {font-size: 75%;}
	.navigation li {padding: 0px 5px 2px 5px;}
}

@media only screen and (min-width: 1120px) and (max-width: 1365px) {
	.navigation li a {font-size: 90%;}
}