div#nav{
	position:fixed;
	top:0;
	right:0;
	width:100%;
	z-index:999;
	margin:0;
	max-width:100%
}


div#nav label{
	position:absolute;
	top:20px;
	right:20px;
	width:30px;
	height:4px;
	background:#000;
	display:block;
	text-align:right;
	
 	cursor:pointer;

}

div#nav label:before{
	content:"";
	position:absolute;
	top:-6px;
	right:0px;
	width:30px;
	height:4px;
	background:#000;
	display:block;
	transition: all  .2s ease-out ;

}

div#nav label:after{
	content:"";
	position:absolute;
	top:6px;
	right:0;
	width:30px;
	height:4px;
	background:#000;
	display:block;
	transition: all  .2s ease-out ;

}

div#nav input{
	display:none;
}
div#nav #navver:checked ~label{
	background:transparent;
}

div#nav #navver:checked ~label:after{
	transform:rotate(45deg);
	top:0;
}
div#nav #navver:checked ~label:before{
	transform:rotate(-45deg);
	top:0;
}

div#nav #navver:checked ~nav{

	height:100vh;
}

div#nav nav{
 	height:0;
	overflow:hidden;
	background:rgba(255,255,255,.95);
	transition: all  .2s ease-out ;
	text-align:center;
}
div#nav nav ul{
	padding:10px;
	margin:10px auto;
}
div#nav li{
	list-style-type: none;
	font-size:18px;
	padding:4px;
	margin:5px;
	font-family:sans-serif;
}

div#nav li a:visited, div#nav li a{
	color:black;
	text-decoration: none;
	-webkit-tap-highlight-color: blue;
	-webkit-tap-highlight-color: transparent; /* for removing the highlight */
}
div#nav li a:hover{
	color:blue;
}