/*
 * @file: custom media-queries for only state or "inter-state"
 */

/*
 * TABLET ONLY
 */
@media only screen and (min-width: 640px) and (max-width: 959px) {

body {
	background: #2c2c2c;
}

/* main menu */
.nav-toggler {
	display: block;
	background: url(../img/icon-menu-list.png) no-repeat 25px center #111;
	background-size: 26px 26px;
	height: 50px;
	cursor: pointer;
}

.nav {
  /* Collapsed */
 	width: 0px;
	background: #2c2c2c;
  height: 100%;
  float: left;
  position: fixed;
  z-index: -1;
}

.off-canvas-wrapper {
  width: 100%;
  float: left;
  margin-left: 0;
}

.nav,
.off-canvas-wrapper {
  transition: width .3s, margin .3s ease;
}

.off-canvas-wrapper {
	background: #fff;
}

#main-menu:target .nav {
  width: 280px;
  position: static;
}

#main-menu:target + .off-canvas-wrapper {
  margin-left: 280px;
  float: left;
  position: fixed;
  z-index: 1;
}

#main-menu:target + .off-canvas-wrapper .nav-toggler.close-nav,
.off-canvas-wrapper .nav-toggler.open-nav {
	display: block;
}

.off-canvas-wrapper .nav-toggler.close-nav,
#main-menu:target + .off-canvas-wrapper .nav-toggler.open-nav {
	display: none;
}

.nav {
	
}

.nav ul {
	margin: 0;
	padding: 0 0 20px;
	background: #2c2c2c;
}

.nav li {
}

.nav li.menu-item-depth-0 > a {
	color: #fff;
	font-size: 17px;
	font-weight: normal;
	padding: 14px 15px 0;
	height: 50px;
	display: block;
}
	.nav li.menu-item-depth-0 > a:hover,
	.nav li.menu-item-depth-0 > a:focus,
	.nav li.menu-item-depth-0.current-menu-item > a,
	.nav li.menu-item-depth-0.current-menu-ancestor > a {
		color: #ff8800;
		text-decoration: none;
	}

.nav ul ul {
	margin: 0;
	padding: 0 15px;
	background: #222;
}

.nav li.menu-item-depth-0 li > a {
	color: #fff;
	font-size: 13px;
	padding: 14px 15px 0;
	height: 50px;
	display: block;
	border-bottom: 1px solid #2c2c2c;
}
	.nav li.menu-item-depth-0 li > a:hover,
	.nav li.menu-item-depth-0 li.current-menu-item > a,
	.nav li.menu-item-depth-0 li.current-menu-ancestor > a {
		color: #ff8800;
		text-decoration: none;
	}
	
}