html, body {
	width: 100%;
	overflow-x: hidden; 
}

nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li a{
  font-size: 14px;
  text-transform:uppercase;
  display: block;
  padding: 20px;
  text-decoration: none;
  color: #eee;
  border-bottom:1px solid #333;
}
nav ul li:last-child a {
	border-bottom:0;
}
nav ul li a:hover, nav ul li a.current{
  text-decoration: none;
  color: #999;
  background-color: rgba(0,0,0,0.2);
}

nav ul li .sub-menu{
	display:none;
	margin-top:20px
}

.has-sub span{
	margin-left:20px;
	font-size:10px
}

nav ul li .sub-menu a{
	font-size:12px;
	padding:10px 40px;
	border:0;
}
nav ul li .sub-menu a:hover{
	background-color:transparent;
}

.ham{
	margin-top: 16px;
	width:32px;
	z-index:20;
	height:24px;
	float:right;
	display:inline-block;
	position:relative;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	cursor:pointer;
}

.ham-line{
	display: block;
	position: absolute;
	height: 2px;
	width: 32px;
	background: #fff;
	opacity: 1;
	left: 0;
	-webkit-transform: rotate(0deg);
	-moz-transform: rotate(0deg);
	-o-transform: rotate(0deg);
	transform: rotate(0deg);
	-webkit-transition: .1s ease-in-out;
	-moz-transition: .1s ease-in-out;
	-o-transition: .1s ease-in-out;
	transition: .1s ease-in-out;
}
.sb-active nav{
    right: 0;
}
.ham-line:nth-child(1) {
  top: 0px;
  width:15px;
}

.ham-line:nth-child(2), .ham-line:nth-child(3) {
  top: 8px;
  width:20px;
}

.ham-line:nth-child(4) {
  top: 16px;
}

.sb-active .ham-line:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}

.sb-active .ham-line:nth-child(2) {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}

.sb-active .ham-line:nth-child(3) {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}

.sb-active .ham-line:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}