/* Nav Balken */
div#bg_head {position: relative; display: block; float: left; width: 55.7%; margin-top: 0px; padding-left: 40%; padding-right: 4.3%; z-index: 10; background-color: #036583;}
div#bg_banner {position: relative; display: block; float: left; width: 55%; margin-top: 0px; padding-left: 40%; padding-right: 5%; z-index: 10; background-color: rgba(221,221,221,.9); border-bottom: 4px solid #009623;}

/* FORMATIERUNG HAUPTKAT. */
div#wrapnav {position: relative; z-index: 20; width: 100%; margin-top: 0px; line-height: 16px; letter-spacing: 0px;}
div#wrapnav ul {display: inline-block; width: 100%; padding: 0; list-style: none;}			
div#wrapnav ul li {display: inline-block; width: auto; letter-spacing: 1px;}
div#wrapnav ul li:hover {position: relative; cursor: default;}
div#wrapnav ul li:hover > ul {visibility: visible; margin: 0;}
div#wrapnav ul li a {display: block; padding: 10px 8px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; color: #036583; transition-property: background-color; transition-duration: .5s; text-decoration: none;}
div#wrapnav ul li a:hover {background-color: #036583; color: #fff;} /* Mouseover der Hauptkategorien */
a.inhalthead {color: white; line-height: 16px; letter-spacing: 0px; font-size: 14px;}

/* FORMATIERUNG UNTERKAT. */
div#wrapnav ul ul {position: absolute; display: block; width: auto; left: 0; visibility: hidden;}
div#wrapnav ul ul li {display: block; float: none; height: 30px; line-height: 30px; margin: 0; padding: 0; text-align: left; background-color: #036583;}
div#wrapnav ul ul li:first-child {margin: 14px 0 0 0;} /* Abstand Unterkategorie zur Hauptkategorie */
div#wrapnav ul ul li a {display: block; height: 30px; line-height: 30px; color: #FFF; padding: 0 24px 0 8px; border-bottom: 1px solid #FFF;}
div#wrapnav ul ul li a:hover {background-color: #036583;}

/* Navicon Box */
div.line_menu {position: fixed; display: none;}
div.navicon {display: none;}

/* Navicon */
#navicon {position: relative; width: 40px; height: 30px; transform: rotate(0deg); transition: .5s ease-in-out; cursor: pointer;}
#navicon span {position: absolute; display: block; width: 100%; height: 6px; background: #FFF; border-radius: 9px; opacity: 1; left: 0; transform: rotate(0deg); transition: .25s ease-in-out;}
#navicon span:nth-child(1) {top: 0px;}
#navicon span:nth-child(2) {top: 12px;}
#navicon span:nth-child(3) {top: 24px;}
#navicon.open span:nth-child(1) {top: 12px; transform: rotate(135deg);}
#navicon.open span:nth-child(2) {opacity: 0; left: -60px;}
#navicon.open span:nth-child(3) {top: 12px; transform: rotate(-135deg);}


/*** Media Querries ***/
/* 1280 px (PC klein) */
@media only screen and (max-width: 1280px)
{div#bg_banner {width: 75%; padding-left: 20%; padding-right: 5%;}}

/* 1024 px (Tablet quer) */
@media only screen and (max-width: 1024px)
{div#wrapnav ul li {letter-spacing: 0px;}
div#wrapnav ul li a {padding: 10px 5px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem;}}

/* 800 px (Tablet hoch) */
@media only screen and (max-width: 800px) 
{div#bg_head {position: fixed;}
div#bg_banner {position: fixed; width: 100%; margin: 30px 0 0 0; padding: 0; height: 50px;}
/* FORMATIERUNG HAUPTKATEGORIE */
div.line_menu {display: block; right: 5%; margin: 40px 0 0 0; z-index: 20; width: 40px; height: 30px;}	
div.line_menu a {display: block; width: 100%; font-size: 30px; font-weight: bold; color: #00a0e6;}	
div.navicon {display: block; width: 100%; height: 40px;}
.wrapnavdiv {display: none;}
div#wrapnav {position: fixed; margin-top: 54px;}
div#wrapnav ul {margin: 0;}
div#wrapnav ul li {float: left; width: 100%; text-align: left; border-bottom: 1px solid #fff;}
div#wrapnav ul li:hover > ul {position: relative;}	
div#wrapnav ul li a {height: 40px; line-height: 40px; padding: 0 10px; color: #fff; background-color: #036583;}	
/* FORMATIERUNG UNTERKATEGORIE */	
div#wrapnav ul ul {display: none;}
div#wrapnav ul ul li:first-child {margin: 0;}
div#wrapnav ul ul li a {background-color: #036583;}}

/* 767 px (Tablet hoch) */
@media only screen and (max-width: 767px) 
{div#wrapnav ul li a {font-size: 2rem;}}