@-webkit-keyframes menuIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-moz-keyframes menuIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-o-keyframes menuIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@-ms-keyframes menuIn { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes menuIn { 0% { opacity: 0; } 100% { opacity: 1; } }

#header { float: left; padding: 20px 3% 0 3%; width: 100%; z-index: 800;  box-sizing: border-box;}

#logo { float: left; margin-top: -9%; width: auto; z-index: 120; }
#logo a {  }
#logo a img { width: 100%; }

/* START: Main Nav; */
/* alle Ebenen */
#navHeader { float: left; position: relative; max-width: 234px; width: 100%; z-index: 150; }
#navHeader ul { padding-left: 0; }
#navHeader ul li { float: left; padding: 0; width: 100%; }
#navHeader ul li a { display: block; float: left;  text-transform: uppercase; width: 100%; }

/* 1. Ebene */
#navHeader > ul {  }
#navHeader > ul > li {  }
#navHeader > ul > li > a { padding: 7px 0; }

#navHeader ul > li {  }
#navHeader ul > li > a {  }

/* 2. Ebene */
#navHeader > ul > li > ul { background-color: rgba(255,255,255,0.8); display: none; left: 0; min-width: 210px; opacity: 0; padding-bottom: 8px;
    padding-top: 6px; position: absolute; top: 100%; width: auto; }
#navHeader > ul > li > ul li { width: 100%; }
#navHeader > ul > li > ul li > a { padding: 5px 10px 5px 56px; }

/* Ebene einblenden */
#header #navHeader ul > li:hover > ul { display: block; opacity: 1;
	-webkit-animation: menuIn 0.5s 1;
  	   -moz-animation: menuIn 0.5s 1;
  	     -o-animation: menuIn 0.5s 1;
  	    -ms-animation: menuIn 0.5s 1;
  	        animation: menuIn 0.5s 1; }
/* END: Main Nav; */
#mobile-btn { display: none; }

/* START: MOBILE Menu; */
/* ! width abgleichen mit MainLayout.css ! */
@media screen and (max-width: 1000px) {
	/* Hamburger Menu Button */
	#mobile-btn { margin-right: 6%; position: fixed; top: 16px; right: 0; z-index: 999; }
	.c-hamburger {background: transparent;position: relative;overflow: hidden;margin: 0;
	  padding: 0;width: 38px;height: 30px;font-size: 0;text-indent: -9999px;box-shadow: none;
	  border-radius: none;border: none;cursor: pointer;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;}
	.c-hamburger:focus { outline: none; }
	#mobile-btn span { background-color: #adc047; display: block; height: 5px;
		left: 0; position: absolute; right: 0; top: 12px; }
	#mobile-btn span::before,
	#mobile-btn span::after { position: absolute; display: block; left: 0; width: 100%;
	  height: 5px; background-color: #adc047; content: ""; }
	#mobile-btn span::before { top: -10px; }
	#mobile-btn span::after { bottom: -10px; }
	#mobile-btn span::before,
	#mobile-btn span::after {
	  -webkit-transition-duration: 0.3s, 0.3s;
	          transition-duration: 0.3s, 0.3s;
	  -webkit-transition-delay: 0.3s, 0s;
	          transition-delay: 0.3s, 0s;}
	#mobile-btn span::before {
	  -webkit-transition-property: top, -webkit-transform;
	          transition-property: top, transform;}
	#mobile-btn span::after {
	  -webkit-transition-property: bottom, -webkit-transform;
	          transition-property: bottom, transform;}
	#mobile-btn.is-active span {background: none;}
	#mobile-btn.is-active span::before {top: 0; background-color: #4c4e55;
	  -webkit-transform: rotate(45deg);
	      -ms-transform: rotate(45deg);
	          transform: rotate(45deg);
	  -webkit-transition: rotate() 500ms, background-color 500ms;
       	 -moz-transition: rotate() 500ms, background-color 500ms;
           -o-transition: rotate() 500ms, background-color 500ms;
              transition: rotate() 500ms, background-color 500ms;}
	#mobile-btn.is-active span::after {bottom: 0; background-color: #4c4e55;
	  -webkit-transform: rotate(-45deg);
	      -ms-transform: rotate(-45deg);
	          transform: rotate(-45deg);
	  -webkit-transition: rotate() 500ms, background-color 500ms;
         -moz-transition: rotate() 500ms, background-color 500ms;
           -o-transition: rotate() 500ms, background-color 500ms;
              transition: rotate() 500ms, background-color 500ms;}
	#mobile-btn.is-active span::before,
	#mobile-btn.is-active span::after {
	  -webkit-transition-delay: 0s, 0.3s;
	          transition-delay: 0s, 0.3s;}
	/* Hamburger Menu END */

	/* Mobile Nav start */
	#MainWrapper { float: left; min-height: 100%; width: 100%; position: relative; z-index: 50; }
	#MainWrapper, #mobile-nav-wrapper {
		-webkit-transition: all 1s ease-in-out;
		-moz-transition: all 1s ease-in-out;
		-ms-transition: all 1s ease-in-out;
		-o-transition: all 1s ease-in-out;
		transition: all 1s ease-in-out; }
	.js #mobile-btn { display: block; }
	#mobile-nav-wrapper { background-color: #fff; height: 100%; right: -330px; position: fixed; top: 0; overflow: hidden;
		-o-backface-visibility: hidden;
		-moz-backface-visibility: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		width: 325px; z-index: 900;}
	#mobile-nav-wrapper.open, #MainWrapper.open {
		-webkit-transform: translateX(-320px);
		-moz-transform: translateX(-320px);
		-ms-transform: translateX(-320px);
		-o-transform: translateX(-320px);
		transform: translateX(-320px); }
	#menu-overlay {background-color: rgba(0,0,0,0.7); cursor: pointer; display: block; height: 100%; right: 0; opacity: 0;
		position: fixed; top: 0; width: 0; z-index: 800;
		-webkit-transition: opacity 0.7s;
		-moz-transition: opacity 0.7s;
		-ms-transition: opacity 0.7s;
		-o-transition: opacity 0.7s;
		transition: opacity 0.7s;
		-webkit-transform: translateZ(0);
		-moz-transform: translateZ(0);
		-ms-transform: translateZ(0);
		-o-transform: translateZ(0);
		transform: translateZ(0); }
	#menu-overlay.open { opacity: 1; height: 100%; width: 100%; }
	#mobile-nav-wrapper #navHeader { background-color: #fff; float: left; height: 100%; margin-left: -20px; position: relative; overflow: auto; width: 100%; z-index: 950; }
	#mobile-nav-wrapper #navHeader a { float: left; font-size: 120%; padding: 4px 0; width: 100%; }
	#mobile-nav-wrapper #navHeader ul, #mobile-nav-wrapper #navHeader li { float: left; width: 100%; }
	#mobile-nav-wrapper #navHeader > ul { padding: 20px; }
	#mobile-nav-wrapper #navHeader > ul ul { position: relative; }
	#mobile-nav-wrapper #navHeader > ul ul > li:last-child { padding-bottom: 10px; }
	#mobile-nav-wrapper #navHeader ul ul > li > a { padding-left: 16px; }
	#mobile-nav-wrapper #navHeader ul ul ul > li > a { padding-left: 30px; }
	#mobile-nav-wrapper #navHeader li > ul { max-height: 0; overflow: hidden;
		-webkit-transition: all 0.7s;
		-moz-transition: all 0.7s;
		-ms-transition: all 0.7s;
		-o-transition: all 0.7s;
		transition: all 0.7s; }
	#mobile-nav-wrapper #navHeader li.active > ul { max-height: 800px; display: block;  opacity: 1;}

	#mobile-nav-wrapper > #logo { background-color: #fff; float: left; padding-left: 6%; padding-top: 50px; width: 100%; }
	#mobile-nav-wrapper > #logo img { width: 136px; display: block;}
	/* Mobile Nav end */

	.js #mobile-btn { display: block; }
	.js #header #navHeader { display: none; }
	#logo { clear: both; padding-bottom: 0; }
}
/* END: MOBILE Menu; */