nav{font-size:200%;line-height: 125%;}
nav > ul{float:left;margin:0;width:100%;}
nav > ul > li > a{display:block;outline:none;width:100%;text-decoration:none;padding:0;}
nav > ul li ul{display:none;position:absolute;left:0;top:100%;z-index:2000;padding:0;box-shadow:5px 5px 5px #666;}
nav > ul li ul li{text-align:center;;list-style-type:none;padding:10px;}
nav ul li:hover{position:relative;}
nav ul li:hover > ul{display:block;}
nav > ul li ul li > a{text-decoration:none;}
[type="checkbox"]{display:none;}

nav ul{display:none;}
nav > label{display:block;width:54px;height:49px;cursor:pointer;position:absolute;top:45px;right:20px;}
nav > label:after{content:'';display:block;width:40px;height:7px;background:#365DA2;margin:7px 0 0 7px;box-shadow:0px 14px 0px #365DA2, 0px 28px 0px #365DA2}
nav > label:hover{background:#FFF;}

[type="checkbox"]:checked ~ label{background:#FFF;}
[type="checkbox"]:checked ~ ul{display:block;z-index:9999;position:absolute;top:125px;left:0px;padding:0;width:100%;height:calc(100vh - 125px); padding-top:10px; 
	background-image: -webkit-linear-gradient(bottom right, #365DA2 0%, #000 100%);
	background-image: -o-linear-gradient(bottom right, #365DA2 0%, #000 100%);
	background-image: linear-gradient(to top left, #365DA2 0%, #000 100%); }
	nav ul li{display:block;text-align:center;}
	nav > ul > li{float:none;padding:10px 0; font-weight:700}
	nav ul li:hover{}
	nav > ul li ul li{display:block;float:none;padding:0;font-weight:300}
	nav > ul li ul{display:block;position:relative;z-index:9999;float:none;left:0;box-shadow:none;padding-top:10px}
	nav a, nav a:visited{color:#FFF;}
	nav a:hover{color:#000;}
@media screen and (min-width:1400px){
	nav{width:280px;}
}
@media screen and (max-width:420px){
	nav{font-size:160%;}
	[type="checkbox"]:checked ~ ul{top:170px}
}
@media screen and (max-width:375px){
	nav{font-size:140%;}
	[type="checkbox"]:checked ~ ul{top:135px}
	nav > label{top:35px;width:40px;height:35px;}
	nav > label:after{width:30px;height:5px;margin:5px 0 0 5px;box-shadow:0px 10px 0px #365DA2, 0px 20px 0px #365DA2}
}
@media screen and (max-width:320px){
	nav{font-size:100%;line-height: 110%;}
	nav > label{right:10px}
}