:root { 
	--navHeight: 60px;
	--navBgColor: rgba(0,0,0,0.95); 
	--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(211,245,244,0.60); 
	--navLinkHoverColor: #f0f0f0; 
	--navLinkHoverBgColor: var(--second-color); 
	--navFooterColor: rgba(255,255,255,0.5);
	--navLinkFont: var(--font1); 
	--searchBarBg: var(--main-color);
}

/* LOGO */
nav #desktoplogo {text-align:center;}
nav #desktoplogo img#logo {display: none;}
 

/* NAVIGATION */
nav {top: 0px; width: 100%; z-index:100; position:fixed;}
.grid {margin: 0px;}
nav .col-grow-9 {margin-right: 2vw;}

#mobMenue {background: var(--navElementsMobBgColor);display: none; width: 100vw; min-height: calc(100vh - 80px);
	 top:var(--navHeight); 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.tools img {margin:auto; text-align:left;}

.navigation .col {text-align:center;}
.navigation .fa.fa-angle-down,
.navigation .fa.fa-angle-up {padding: 5px 0 0 5px; color: var(--navLinkColor); line-height: 18px;}
.navigation .col.logo .col.hamburger{display:none;}
.navigation .col.logo img {margin-left: 7vw;}
.navigation ul.main {list-style:none; display:inline-block;}
.navigation li {float:left; padding: 0px 10px 2px 10px; font-size: 13px; line-height: 25px;}
.navigation li:hover,
.navigation li.current {text-decoration: underline;}

.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); text-decoration:none; text-transform:uppercase; font-weight: normal; letter-spacing: 1.5px; color: var(--navLinkColor);}
.navigation li a:hover {text-decoration:none; color: var(--navLinkHoverColor);}
.navigation ul.first { position: absolute; padding-top: 0px; margin-top: 0px; margin-left: -5px; background: var(--navBgColor); 
box-shadow: var(--navBgShadow); list-style:none; text-align: center; display: none; border-radius: 4px; padding: 2px 6vw;}
.navigation ul.first li {float:none; margin-left: 0px;}
.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;}
	.navigation .col.tools img {display: none;}
	#content .fullHeight {min-height: calc(100vh - var(--navHeight));}
	nav {position: unset;}
	nav #desktoplogo {text-align: left;}
	nav #desktoplogo img#logo {display: inline-block;}
	.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: var(--navHeight);padding-left: 10px; background: var(--navBgColor);}
	nav #desktoplogo img#logo {margin-left: calc(50% - 193px);}
	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%;}
	.navigation li {float: none; padding-left: 10%; padding-right: 10%;  width: 90vw;}
	.navigation li:hover,
	.navigation li.current {border-radius: 0px;}
	.navigation li.current a,
	.navigation li a:hover,
	.navigation li.current .fa.fa-angle-up,
	.navigation li.current .fa.fa-angle-down {color: #222;} 
	.navigation li.current a {text-decoration: underline;}	

	.navigation li a,
	.navigation li.current li.nosel a {color: #222; text-decoration:none;}
	.navigation li.current li.nosel a {text-decoration-color:transparent;}
	
	.navigation ul.main  {margin-bottom: 50px;}
	.navigation ul.first {position: relative; background: transparent; box-shadow: 0 0 0px; padding-top: 0px; text-align:left;}
	.navigation ul.first li {border: 0px; margin-left: -5%; width: 100%;}
	.navigation ul.first li a {padding-left: 5%;}
 	
	.navigation li.current {text-decoration:none; border-bottom:1pxsolid #222;}
	.navigation li.nosel a {}	

	.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: #efefef;}
}
@media only screen and (max-width: 479px) and (orientation: portrait) {
	nav #desktoplogo img#logo {margin-left: 6vw;}
}
@media only screen and (min-width: 480px) and (max-width: 767px) {
	nav #desktoplogo img#logo {margin-left: 15vw;}
}

@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%;}
}