@media screen {
	#g-nav{ 
		position:fixed;
		z-index: 999;
		top:0;
		right: -120%;
		width:33%;
		height: 100vh;
		background:#980009;
		opacity: 0.8;
		transition: all 0.3s;
	}

	#g-nav.panelactive{
		right: 0;
	}

	#g-nav.panelactive #g-nav-list{
		position: fixed;
		z-index: 999; 
		width: 33%;
		height: 100vh;
		overflow: auto;
		-webkit-overflow-scrolling: touch;
	}

	#g-nav ul {
		z-index: 999;
		margin-top:6em;
	/*    position: absolute;
		top:50%;
		left:50%;
		transform: translate(-50%,-50%); */
	}


	#g-nav li{
		list-style: none;
		text-align: left;
		font-size:120%;
	}

	#g-nav li a{
		color: #fff;
		text-decoration: none;
		padding:0.75em 1em;
		display: block;
		text-transform: uppercase;
		letter-spacing: 0.1em;
		font-weight: normal;
	}

	.openbtn{
		position:fixed;
		z-index: 1999;
		top:0.5em;
		right: 1em;
		cursor: pointer;
		width: 50px;
		height:50px;
		background:#a5242c;
		border-radius: 5px;
		opacity: 0.8;
	}

	.openbtn span{
		display: inline-block;
		transition: all .4s;
		position: absolute;
		left: 14px;
		height: 3px;
		border-radius: 2px;
		background-color: #fff;
		width: 45%;
	  }

	.openbtn span:nth-of-type(1) {
		top:15px;	
	}

	.openbtn span:nth-of-type(2) {
		top:23px;
	}

	.openbtn span:nth-of-type(3) {
		top:31px;
	}

	.openbtn.active span:nth-of-type(1) {
		top: 18px;
		left: 18px;
		transform: translateY(6px) rotate(-45deg);
		width: 30%;
	}

	.openbtn.active span:nth-of-type(2) {
		opacity: 0;
	}

	.openbtn.active span:nth-of-type(3){
		top: 30px;
		left: 18px;
		transform: translateY(-6px) rotate(45deg);
		width: 30%;
	}

}

@media screen and (max-width: 480px) {
	#g-nav{
		width:75%;
	}

	#g-nav.panelactive #g-nav-list{
		width: 75%;
	}

}