:root { 
	--navHeight: 60px;
	--navBgColor: var(--main-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.8); 
	--navLinkHoverColor: #2f657f; 
	--navLinkHoverBgColor: var(--second-color); 
	--navFooterColor: rgba(255,255,255,0.5);
	--navLinkFont: var(--font3); 
}

/* TOP HEADER BAR */
/*
.topheaderbar {height: 70px; background: #fff;}
.topheaderbar .col-3 {display: flex; justify-content: center; align-items: center;}
.topheaderbar .redText {font-family: var(--font2); color: var(--main-color); text-align:left; font-size: 22px; font-weight: bold; letter-spacing: 2px;}
.topheaderbar .infoText {font-family: var(--font3); text-align:left;}
.topheaderbar .infoText li {border-bottom: 1px solid #ccc;}
.topheaderbar .infoText li:last-of-type {border-bottom: 0px}
.topheaderbar .infoText span {color:  var(--main-color);}
*/

/* LOGO */
nav #desktoplogo {text-align:right;}
.navigation .col.logo.col-grow-2 {flex-grow: 2;}

/* LANGUAGE SELECTOR */
nav #langSelector {}
nav #langSelector a {color:var(--navLinkColor);font-family: var(--font2); font-weight: normal;font-size: 12px; line-height:18px; padding-right:10px; letter-spacing: 0.5px; opacity: 0.7;}
nav #langSelector a:hover,
nav #langSelector a.current {color: var(--second-color); opacity: 1;}

nav .tools table {min-width: 60px; max-width: 100px; margin: auto;}
nav .tools table td {padding: 0 25% 0 0;}
/* FASTFORM */
nav .tools i.fa {font-size: 1.5rem; color: rgba(128,128,128,0.5);}
nav .tools i.fa:hover {color: rgba(0,0,0,0.5); cursor:pointer;}

/* SEARCH FORM */
nav #searchForm {position: fixed; z-index: 200; display: none; margin-top: 0px; width: 100%;
background: linear-gradient(90deg, transparent, var(--main-color), transparent); padding: 2px 0px 7px 0px;}
nav .topright {float:right;}
.cf:before, .cf:after{content:"";display: inline-block;}
.cf:after{clear:both;}
.cf{zoom:1;}    
.search-wrapper {width: 230px;margin: 5px auto;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
.search-wrapper input {width: 130px;height: 20px;padding: 10px 10px;float: left;border: 0;background: #f9f9f9;border-radius: 0px 0px 0px 0px; color: #666;}
.search-wrapper input:focus {outline: 0;background: #fff;box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.search-wrapper input::-webkit-input-placeholder,
.search-wrapper input:-moz-placeholder {color: #999;font-weight: normal;font-style: italic;}    
.search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 40px; width: 80px;font: 13px var(--font1);color: white;text-transform: uppercase; letter-spacing: 1px; background: var(--second-color);border-radius: 0px 0px 0px 0px;text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);}
.search-wrapper button:hover{background: var(--main-color);}   
.search-wrapper button:active,
.search-wrapper button:focus{background: var(--main-color);outline: 0;}
.search-wrapper button:before { content: '';position: absolute; border-width: 8px 8px 8px 0;border-style: solid solid solid none;  
border-color: transparent var(--second-color) transparent;top: 12px; left: -6px;}
.search-wrapper button:hover:before{border-right-color: var(--main-color);}
.search-wrapper button:focus:before,
.search-wrapper button:active:before{border-right-color: var(--main-color);}      
.search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */border: 0;padding: 0;}   

/* 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 - 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: transparent; 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 5px; color: var(--navLinkColor); line-height: 18px;}
.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; font-size: 13px; line-height: 25px;}
.navigation li:hover,
.navigation li.current{}
.navigation li.current a,
.navigation li.current .fa.fa-angle-up,
.navigation li.current .fa.fa-angle-down {color: var(--navLinkHoverColor); font-weight:bold;} 
.navigation li a {font-family: var(--navLinkFont); text-decoration:none; text-transform:uppercase; font-weight: bold; letter-spacing: 1px; color: var(--navLinkColor); 
 filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.1));}
.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: left; display: none; border-radius: 4px;}
.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;}
	#content .fullHeight {min-height: calc(100vh - var(--navHeight));}
	nav {position: unset;}
	nav #desktoplogo {text-align: center;}
	nav #desktoplogo img#logo {display: inline-block; filter: drop-shadow(0 0.1rem 0.5rem #fff);}
	.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: 80.00%; width: 80.00%; max-width: 80.00%; text-align:left; position:fixed; z-index:100; 
	height: var(--navHeight);padding-left: 10px; background: var(--navBgColor);}
	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; 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(--second-color);}
}
@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%;}
}