/* =============================================
 *
 *   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: normal; font-style: normal; margin: 0; padding: 0; width: 100%; display: block; list-style: none; text-align: center; }

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

.js .nav-collapse { color: white; clip: rect(0 0 0 0); max-height: 0; position: absolute; display: block; overflow: hidden; zoom: 1; }

.nav-collapse.opened { color: white; font-weight: 100; max-height: 9999px; border-bottom: 2px solid white; }
@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;
}

.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: 100; position: fixed; width: 100%; left: 0; top: 0; }

.nav-collapse,
.nav-collapse * { font-weight: 100; -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: 100; float: left; width: 100%; margin: 0 8px; }

@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: silver; -webkit-tap-highlight-color: rgba(0,0,0,0); border-top: 1px solid white; text-decoration: none; background: #121212; padding: 0.3em 1em; width: 100%; float: left; font-size: 1em; font-weight: 300; font-style: italic; }
.nav-collapse a:hover { color: 				white; font-weight: 100; }

.nav-collapse a:active,
.nav-collapse .active a { color: orange; font-weight: 400; font-style: italic; }

@media screen and (min-width: 620px) {
  .nav-collapse a { background: transparent; font-family: 		"Trebuchet MS", Helvetica, sans-serif; font-size: 			1em; font-weight: 400; letter-spacing:		0; padding: 			0; margin: 			0 0 5px; text-decoration: 	none; color: 				gray; 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: 				white; font-weight: 100; }
  .nav-collapse a:active, .nav-collapse .active a { color: #cd6600; font-weight: 400; background-color: #171717; border-bottom: 		3px solid #333333; }
}
@media screen and (min-width: 760px) {
	.nav-collapse a { font-size: 			1em;
	;font-weight: 100; }
}
@media screen and (min-width: 980px) {
	.nav-collapse a { font-size: 			1.1em; font-weight: 100; }
}

.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: 100; 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: 55px; float: right; }

.nav-toggle:before { color: silver; font: 100 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 */
}