#overlay{opacity: 0; position: absolute; top: 0; left: -10000px; z-index: 100; width: 100%; height: 100vh; 
background: linear-gradient(90deg,rgba(0,0,0,0.9), rgba(0,0,0,0.7),rgba(0,0,0,0.6)); overflow: hidden;}
#hamburger {right: 50px; position:fixed;top: 40px;cursor:pointer; z-index: 100; display: flex; flex-direction: column; justify-content: space-between; height: 28px; width:40px;}
#hamburger .line {display:block; height: 6px; width: 100%;  background: var(--main-color); filter: drop-shadow(0 0 1px #f9f9f9);}
.sidenav {right: 0; height: 100%;width: 0;position: fixed;z-index: 101;top: 0;background: #000;
overflow-x: hidden;padding-top: 40px; text-align:left; font-family: var(--font2); line-height: 6vh; box-shadow: 0px 0px 5px #666;}

.sidenav .menuToggle {line-height: 4vh;}


.sidenav a,
.sidenav .toggle-title {padding: 4px 8px 8px 32px;text-decoration: none; line-height: 120%; font-weight: normal;font-size: 20px;color: #818181;display: block;cursor:pointer;}
.sidenav .toggle-title a {padding: 0px;}
.sidenav .toggle-inner a {padding: 4px 4px 4px 54px;text-decoration: none;font-size: 15px;color: #818181;display: block;}
.sidenav a:hover,
.sidenav a.activeLink,
#langSelector a.current {color: #f1f1f1;}
.sidenav .closebtn {position: absolute;top: 15px;right: 25px;font-size: 36px;margin-left: 50px;}

#langSelector {position:absolute; top: 25px; left: 32px;}
#langSelector a {padding: 5px; font-size: 11px; display: inline-block;}

.sidenav div.marrow {position: absolute; margin-top: -34px; left: 185px; padding: 0px 15px 10px 0;}
.menuToggle .toggle-inner {display: none;}
.menuToggle .fa {padding-left: 15px;} 
.menuToggle .fa:hover {color: #f1f1f1;}
.menuToggle .fa.fa-sort-down {font-size: 22px; margin-top: 5px;}
.menuToggle .fa.fa-sort-up {font-size: 22px; margin-top: 12px;}

.sidenav #genLinks {position: absolute; bottom: 45px; left: 0px; z-index: 110; border-radius: 10px 0px 0px 0px; font-family: var(--font2);}
.sidenav #genLinks a {display: inline-block; font-size: 11px; font-weight: normal; letter-spacing: 0.5px;}

@media only screen and (max-height: 450px) {
  	.sidenav {padding-top: 15px;}
	.sidenav a {font-size: 18px; line-height: 100%;}
	.sidenav .closebtn {top: 0px;}
	.menuToggle .fa.fa-sort-down { margin-top: 9px;}
	.menuToggle .fa.fa-sort-up {margin-top: 16px;}
	.sidenav #genLinks {bottom: 20px;}
	#mySidenav #searchForm {margin-top: -16px;} 	
}
@media only screen and (max-width: 767px) {
	#mobilhead #hamburger {top: 20px; right: 20px;  height: 29px;width: 35px;}
}



/* SEARCH FORM SIDENAV*/
#mySidenav .fa-search{color: rgba(255,255,255,0.5);}
#mySidenav .fa-search:hover {color: rgba(255,255,255,0.8);}
#mySidenav #searchForm {display: inline-block; margin-left: 24px; background: linear-gradient(90deg, transparent, var(--searchBarBg), transparent); padding: 2px 0px 7px 0px;}
#mySidenav .cf:before{display: inline-block;}
#mySidenav .cf:after{clear:both;}
#mySidenav .cf{zoom:1;}    
#mySidenav .search-wrapper input {width: 120px;height: 20px;padding: 10px 10px;float: left;border: 0;background: rgba(0,0,0,0.2);border-radius: 5px 0px 0px 5px; color: #666;}
#mySidenav .search-wrapper input:focus {outline: 0; border-bottom: 1px dashed rgba(255,255,255,0.3);}
#mySidenav .search-wrapper input::-webkit-input-placeholder,
#mySidenav .search-wrapper input:-moz-placeholder {color: #999;font-weight: normal;font-style: italic;}    
#mySidenav .search-wrapper button {overflow: visible;position: relative;float: right;border: 0;padding: 0;cursor: pointer;height: 40px; width: 40px;font: 13px var(--font1);color: white;text-transform: uppercase; letter-spacing: 1px; background: transparent;border-radius: 0px 5px 5px 0px;text-shadow: 0 -1px 0 rgba(0, 0, 0, .5);}
#mySidenav .search-wrapper button:hover{background: var(--main-color);}   
#mySidenav .search-wrapper button:active,
#mySidenav .search-wrapper button:focus{background: var(--main-color);outline: 0;}
#mySidenav .search-wrapper button:hover:before{border-right-color: var(--main-color);}
#mySidenav .search-wrapper button:focus:before,
#mySidenav .search-wrapper button:active:before{border-right-color: var(--main-color);}      
#mySidenav .search-wrapper button::-moz-focus-inner { /* remove extra button spacing for Mozilla Firefox */border: 0;padding: 0;}   


/* SEARCH FORM PAGE*/
.searchbar .cf:before, .cf:after{content:"";display: inline-block;}
.searchbar .cf:after{clear:both;}
.searchbar .cf{zoom:1;}    
.searchbar .search-wrapper {width: 230px;margin: 15px auto;box-shadow: 0 1px 1px rgba(0, 0, 0, .4) inset, 0 1px 0 rgba(255, 255, 255, .2);}
.searchbar .search-wrapper input {text-transform:none; width: 130px;height: 20px;padding: 10px 10px;float: left;border: 0;background: #f3f3f3;border-radius: 0px 0px 0px 0px; color: #666;}
.searchbar .search-wrapper input:focus {outline: 0;background: #fff;box-shadow: 0 0 2px rgba(0,0,0,.8) inset;}
.searchbar .search-wrapper input::-webkit-input-placeholder,
.searchbar .search-wrapper input:-moz-placeholder {color: #999;font-weight: normal;font-style: italic;}    
.searchbar .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);}
.searchbar .search-wrapper button:hover{background: var(--main-color);}   
.searchbar .search-wrapper button:active,
.searchbar .search-wrapper button:focus{background: var(--main-color);outline: 0;}
.searchbar .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;}
.searchbar .search-wrapper button:hover:before {border-color: transparent var(--main-color) transparent;}