/* =============================================
 *
 *   FIXED RESPONSIVE NAV
 *
 *   (c) 2014 @adtileHQ
 *   http://www.adtile.me
 *   http://twitter.com/adtilehq
 *
 *   Free to use under the MIT License.
 *
 * ============================================= */



@-webkit-viewport { width: device-width; }
@-moz-viewport { width: device-width; }
@-ms-viewport { width: device-width; }
@-o-viewport { width: device-width; }
@viewport { width: device-width; }


/* ------------------------------------------
  RESPONSIVE NAV STYLES
--------------------------------------------- */

.nav-collapse ul { color: white; font-weight: lighter; font-style: normal; margin: 0; padding: 0; width: 100%; display: block; list-style: none; text-align: center; }

.nav-collapse li { color: white; font-weight: lighter; font-style: normal; width: 100%; display: block; margin: 0; padding: 0; width: 100%; float: none; }

.js .nav-collapse {
	color: white;
	max-height: 0;
	display: block;
	overflow: hidden;
	zoom: 1;
	position: absolute;
	top: 50px;
	left: 0;
}

/*clip: rect(0 0 0 0);*/

.nav-collapse.opened {color: white; font-weight: 200; max-height: 9999px; border-bottom: 2px solid white; background-color: #ffffff !important; /* Erzwingt einen weißen Hintergrund am Handy */
    color: #333333;  overflow-y: auto; }

    color: #333333;  overflow-y: auto; }

@media screen and (min-width: 620px) {
	.nav-collapse.opened { color: white; border-bottom: medium none; }
}
.disable-pointer-events {
  pointer-events: none !important;
}

.nav-toggle {
  -webkit-tap-highlight-color: rgba(0,0,0,0);
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  -o-user-select: none;
  user-select: none;
}

@media screen and (min-width: 620px) {
  .js .nav-collapse {
    position: relative;
  }
  .js .nav-collapse.closed {
    max-height: none;
  }
  .nav-toggle {
    display: none;
  }
}

/* ------------------------------------------
  MASK
--------------------------------------------- */

.mask {
  -webkit-transition: opacity 300ms;
  -moz-transition: opacity 300ms;
  transition: opacity 300ms;
  background: rgba(0,0,0, .5);
  visibility: hidden;
  position: fixed;
  opacity: 0;
  z-index: 110;
  bottom: 0;
  right: 0;
  left: 0;
  top: 0;
}

.android .mask {
  -webkit-transition: none;
  transition: none;
  background: transparent !important; /* Verhindert den schwarzen Schleier auf Android */
}

.js-nav-active .mask {
  visibility: visible;
  opacity: 1;
}

@media screen and (min-width: 620px) {
  .mask {
    display: none !important;
    opacity: 0 !important;
  }
}


/* ------------------------------------------
  NAVIGATION STYLES
--------------------------------------------- */

.fixed { color: white; font-weight: 200; position: fixed; width: 100%; left: 0; top: 0; }

.nav-collapse,
.nav-collapse * { font-weight: 200; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

.nav-collapse,
.nav-collapse ul { list-style: none; width: 100%; float: left; }

@media screen and (min-width: 620px) {
  .nav-collapse { color: white; float: right; width: auto; margin: 0 20px; }
}

.nav-collapse li { color: white; font-weight: 200; width: 100%; margin: 0; float: left;}

@media screen and (min-width: 620px) {
  .nav-collapse li { width: auto; margin: 0 7px; }
}
@media screen and (min-width: 760px) {
  .nav-collapse li { color: white; width: auto; margin: 0 10px; }
}

.nav-collapse a { color: #222222; -webkit-tap-highlight-color: rgba(0,0,0,0); border-top: 1px solid white; text-decoration: none; background: #DCDCDC; padding: 0.3em 1em; width: 100%; float: left; font-size: 1em; font-weight: 200; font-style: normal; }
.nav-collapse a:hover { color: 				white; font-weight: 200; }

.nav-collapse a:active,
.nav-collapse .active a { color: #8d4b07; font-weight: 200; font-style: italic; }

@media screen and (min-width: 620px) {
  .nav-collapse a { background: transparent; font-family: 		"Segoe UI", Arial, sans-serif; font-size: 			1em; font-weight: 200; letter-spacing:		0; padding: 			0; margin: 			0 0 5px; text-decoration: 	none; color: 				#222222; text-align: 		center; float: 				left; border-bottom: 1px solid gray; border-top-style: none; border-top-width: medium; border-right-style: non; border-left-style: none; border-left-width: medium;e;border-right-width: medium; }

  .nav-collapse a:hover { border-bottom: 		2px solid white; color: 				silver; font-weight: 200; }
  .nav-collapse a:active, .nav-collapse .active a { color: #a45404; font-weight: 350; background-color: white; border-bottom: 		2px solid #222222; }
}
@media screen and (min-width: 760px) {
	.nav-collapse a { font-size: 			1em;
	;font-weight: 200; }
}
@media screen and (min-width: 980px) {
	.nav-collapse a { font-size: 			1.1em; font-weight: 200; }
}

.nav-collapse ul ul a {
  background: #ca3716;
}

@media screen and (min-width: 620px) {
  .nav-collapse ul ul a {
    display: none;
  }
}


/* ------------------------------------------
  NAV TOGGLE STYLES
--------------------------------------------- */
/*@font-face{ font-family: responsivenav; font-style: normal; font-weight: all; src: url(../icons/responsivenav.eot), url(../icons/responsivenav.eot?#iefix) format("embedded-opentype"), url(../icons/responsivenav.ttf) format("truetype"), url(../icons/responsivenav.woff) format("woff"), url(../icons/responsivenav.svg#responsivenav) format("svg"); }*/
    
.nav-toggle { font-weight: 200; font-style: normal; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-decoration: none; text-indent: -300px; position: relative; overflow: hidden; width: 60px; height: 50px; float: right; }

.nav-toggle:before { color: silver; font: 200 48px/50px responsivenav; /* Edit font-size (28px) to change the icon size */
	text-transform: none; text-align: center; position: absolute; content: "\2261"; /* Hamburger icon */
	text-indent: 0; speak: none; width: 100%; left: 0; top: 0; }

.nav-toggle.active:before { color: silver; font-size: 32px; font-weight: 400; font-style: normal; content: "\78"; /* Close icon */
}