.navbar{ z-index:0;display: block; width: 100%; height: 100%; left: 0; top: 0;overflow: hidden;transition-duration: 0.5s;transiting-timing-function: swing;}
.nav-toggle {
	width:34px;
	height:28px;
	background-color:#c70f02;
	top:1.5%;
	right:10px;
	z-index: 2;
	position: absolute;
	cursor: pointer;
	border-radius: 4px;
}
.nav-open{overflow: hidden;}
.nav-open .navbar{background:rgba(199,15,2,0.8); z-index:2; position: absolute;}
.nav-open .nav-toggle .icon { width: 0;}
.nav-open .nav-toggle .icon:before {
	-webkit-transform: translateY(5px) rotate(45deg);
	-ms-transform: translateY(5px) rotate(45deg);
	transform: translateY(5px) rotate(45deg);
}
.nav-open .nav-toggle .icon:after {
	-webkit-transform: translateY(-5px) rotate(-45deg);
	-ms-transform: translateY(-5px) rotate(-45deg);
	transform: translateY(-5px) rotate(-45deg);
}

.nav-toggle .icon {
	width:20px;
	height: 2px;
	background:#fff;
	position: absolute;
	top:13px;
	left:7px;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	transiting-timing-function: swing;
}

.nav-toggle .icon:before,.nav-toggle .icon:after {
	width: 20px;
	height: 2px;
	background:#fff;
	content: "";
	position: absolute;
	left: 0;
	-webkit-transition-duration: 0.5s;
	transition-duration: 0.5s;
	-webkit-transition-timing-function: swing;
	transition-timing-function: swing;
}

.nav-toggle .icon:before { top: -5px;}
.nav-toggle .icon:after { top: 5px;}
.nav-open .nav {-webkit-transform: translateY(0);transform: translateY(0); display: block;}
.nav{
	display: none;
	position: absolute;
	top:18%;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9;
	-webkit-transition-duration: 0.66s;
	transition-duration: 0.66s;
	-webkit-transition-timing-function: swing;
	transition-timing-function: swing;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}

.nav ul li a {
	display: block;
	padding: 11px 0;
	text-align: center;
	color: #fff;
	text-decoration: none;
	font-size:18px;
	-webkit-transition-duration: 0.25s;
	transition-duration: 0.25s;
    font-weight: bold;  
}
.nav ul:hover li a {opacity: 0.5;}
.nav ul:hover li:hover a {opacity: 1;}