/* ------------------------------------------
  NECESSARY STYLES FOR RESPONSIVE NAV
--------------------------------------------- */

#nav {
  	font-family:Arial, Helvetica, sans-serif;
	font-size: 13px;
	font-weight: bold;
	text-transform:uppercase;
	z-index:20001;
	position:relative;
}

#nav ul {
  margin: 0;
  padding: 0;
  width: 100%;
  display: block;
  list-style: none;
}

#nav li {
  width: 100%;
  display: block;
  position:relative;
}

.js #nav {
  clip: rect(0 0 0 0);
  max-height: 0;
  position: absolute;
  display: block;
  zoom: 1;
}

#nav.opened {
  max-height: 9999px;
}

#nav ul ul {
	margin:0;
	padding:1px 0 0;
	width:200px;
	position:absolute;
	top:42px;
	z-index: 1000;
	
	left: -9999px;
	}
#nav ul ul li {
	display:block;
	float:none;
	background:none;
	margin:0;
	padding:0;
	width:100%; 
	border-bottom: 1px solid #8c0410;
	}
#nav ul ul li a {
	font-size:11px;
	font-weight:normal;
	display:block;
	color:#fff;
	float: none;
	background:#b60e1f;
	padding:10px;
	border-bottom: 1px solid #e22134;
	width: 100%;
	text-align:left;
	}
#nav ul ul li a:hover, #nav ul ul li:hover>a {
	background:#950d1b;
	color:#fff;
	}
#nav li:hover>ul {
	left:0;
	}

@media screen and (min-width: 40em) {
  .js #nav {
    position: relative;
    max-height: none;
  }
  #nav-toggle {
    display: none;
  }
}


/* ------------------------------------------
  DEMO PAGE'S STYLES
--------------------------------------------- */
#nav,
#nav * {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

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

#nav li {
  float: left;
  width: 100%;
}

@media screen and (min-width: 40em) {
  #nav li {
    width: auto!important;
  }
}

#nav a {
	font-family:Arial, Helvetica, sans-serif;
  color: #fff;
  text-decoration: none;
  width: 100%;
  border-bottom: 1px solid #fff;
  padding: 11px 14px;
  float: left;
  background:url(../../images/nav-bg.jpg) repeat left top;
}

#nav a:hover, #nav a.active, #nav li:hover > a {
  background-color: #b1101f; /* Safari 4-5, Chrome 1-9 */ /* Can't specify a percentage size? Laaaaaame. */ background: -webkit-gradient(radial, center center, 0, center center, 460, from(#f50219), to(#b1101f)); /* Safari 5.1+, Chrome 10+ */ background: -webkit-radial-gradient(circle, #f50219, #b1101f); /* Firefox 3.6+ */ background: -moz-radial-gradient(circle, #f50219, #b1101f); /* IE 10 */ background: -ms-radial-gradient(circle, #f50219, #b1101f); 
}


@media screen and (min-width: 40em) {
#nav li {
    background: url(../../images/nav-sep.jpg) no-repeat right top;
	padding-right:2px;
  }
  #nav a {
    margin: 0;
    float: left;
    text-align: center;
	border-bottom:none;
  }
 #nav li:last-child {
    background: none;
	padding-right:0px;
  }
}

#nav ul ul a {
  background: #ca3716;
  padding-left: 2em;
}

#nav > ul > li > span{
	display:none;
	}

@media screen and (max-width: 600px) {
#nav ul ul{
	display: none;
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
	padding: 0;
	}
#nav ul li span{
	background:url(nav-icon.png) no-repeat center center #253a96; /* #000 */
	cursor:pointer;
	display:block;
    height: 41px;
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    z-index: 10000;
	}
}

#nav-toggle {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  width: 100%;
  height: 45px;
  float: right;
  overflow: hidden;
  background: #253a96 url("nav-icon.png") no-repeat right 0;
  font:normal 20px/45px Arial, Helvetica, sans-serif;
  color:#fff;
  text-transform:uppercase;
  text-decoration:none;
  text-indent:10px;
}


/*@media screen and (-webkit-min-device-pixel-ratio: 1.3), screen and (min--moz-device-pixel-ratio: 1.3), screen and (-o-min-device-pixel-ratio: 2 / 1), screen and (min-device-pixel-ratio: 1.3), screen and (min-resolution: 192dpi), screen and (min-resolution: 2dppx) {
  #nav-toggle {
    background-image: url("hamburger-retina.gif");
    -webkit-background-size: 100px 100px;
    -moz-background-size: 100px 100px;
    -o-background-size: 100px 100px;
    background-size: 100px 100px;
  }
}*/