:root { 
	--navHeight: 95px;
	--navBgColor: #fff; 
	--navMobBgColor: linear-gradient(17deg, #000, #363636); 
	--navElementsMobBgColor: linear-gradient(17deg, #ccc, #f8f8f8); 
	--navElementsMobSeparatorColor: 1px solid #666;
	--navFooterMobColor: #000;
	--navBgShadow: 0 1px 0px #999; 
	--navLinkColor: #494949; 
	--navLinkHoverColor: var(--second-color); 
	--navLinkHoverBgColor: transparent; 
	--navFooterColor: rgba(255,255,255,0.5);
	--navLinkFont: var(--font3);
}

/* LOGO */
nav #desktoplogo {text-align:center; padding-left: 20%;}

/* LANGUAGE SELECTOR */
nav #langSelector {position: absolute; margin: 0px 0px 0px 4vw;}
nav #langSelector a {color:#333;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 {margin: auto;}
nav .tools table td {min-width: 80px; padding: 0 0 0 0;}
/* FASTFORM */
nav .tools i.fa {font-size: 1.5rem; color: rgba(0,0,0,0.2); padding-top: 5px;}
nav .tools i.fa:hover {color: rgba(0,0,0,0.5); cursor:pointer;}

/* SEARCH FORM */
.searchHead {padding-top: 150px;}
nav #searchForm {position: fixed; z-index: 200; display: none; margin-top: 0px; width: 100%;
background: linear-gradient(90deg, transparent, rgba(0,0,0,0.9), 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 {position: fixed; top: 0; width: 100%; z-index:100;}
.topinfobar {height: 30px; background: var(--main-color);font-family: var(--font2); font-size: 11px; letter-spacing: 1px;}
.topinfobar .col-4.left {text-align:right;}
.topinfobar .col-4.right {text-align:left;}
.topinfobar i.fa span,
.topinfobar i.fa span a {font-weight: normal; font-family: var(--font2); color: rgba(255,255,255,0.8); line-height: 9px; letter-spacing: 1px;}
.topinfobar i.fa span a:hover {color: var(--second-color); text-decoration:underline;}
.topinfobar i.fa {color: rgba(255,255,255,0.8);}

.grid {margin: 0px;}
.navigation {padding: 0px; height: var(--navHeight); background: var(--navBgColor); box-shadow: var(--navBgShadow);}
.navigation .col.logo,
.navigation .col.navelements,
.navigation .col.tools	 {background: var(--navBgColor); text-align:center;}
.navigation .col {text-align:center;}
.navigation .fa.fa-angle-down,
.navigation .fa.fa-angle-up {padding: 4px 0 0 5px;}
.navigation .col.logo .col.hamburger{display:none;}
.navigation ul.main {list-style:none; display:inline-block; margin: auto;}
.navigation li {float:left; padding: 10px 10px 15px 10px;}
.navigation li:hover,
.navigation li.current,
.navigation li.current a {background: var(--navLinkHoverBgColor); color: var(--navLinkHoverColor); border-radius: 4px;}
.navigation li a {font-family: var(--navLinkFont); text-decoration:none; text-transform:none;  font-size: 18px; line-height: 18px;font-weight: normal; color: var(--navLinkColor);}
.navigation li a:hover {text-decoration:underline; color: var(--navLinkHoverColor);}
.navigation ul.first { position: absolute; padding-top: 0px; margin-top: 5px; margin-left: -10px; background: var(--navBgColor); 
box-shadow: var(--navBgShadow); list-style:none; text-align: left; display: none;}
.navigation ul.first li {float:none; padding: 5px 10px; 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 #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) {
	.searchHead {padding-top: 25px;}
	#content .fullHeight {min-height: calc(100vh - var(--navHeight));}
	nav {position: unset;}
	nav #langSelector {position: absolute; margin: unset; right: 2%; top: 15px;}
	.navigation {background: var(--navMobBgColor); padding: 0; box-shadow: 0px 0px 0px;}
	.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); background: var(--navBgColor); box-shadow: var(--navBgShadow); padding-left: 10px;}
	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; background: var(--navElementsMobBgColor); 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 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); box-shadow: var(--navBgShadow);}
	.navigation .tools table td {min-width: unset; padding-right: 10px;}
	.navigation .col.tools #magnifyerglas {display: none;}
	
	.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); 
	position:absolute; z-index:100; bottom: 50px; 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;}
}

@media only screen and (min-width: 290px) and (max-width: 959px) and (orientation: landscape) {
	.navigation #mobMenueFooter { bottom: 0px;}
}	
@media only screen and (min-width: 290px) and (max-width: 568px) {
	.navigation .col.tools #requestquote {display: none;}
	.navigation .col.tools #magnifyerglas {display: block;}
}
@media only screen and (min-width: 290px) and (max-width: 760px) {
	.topinfobar .col-4.left {display: none;}
	.topinfobar .col-4.right {display: none;}
}
@media only screen and (min-width: 960px) and (max-width: 1119px) {
	.navigation li a {font-size: 90%;}
	.navigation li {padding: 10px 5px;}
}
@media only screen and (min-width: 1120px) and (max-width: 1279px) {
	.navigation li a {font-size: 90%;}
	.navigation li {padding: 10px 5px;}
}