nav{background: #FFF;font-size:200%;line-height: 125%;}
nav a, nav a:visited{color:#FFF;}
nav a:hover{color:#000;}
nav ul{width:100%; margin:0;}
nav ul li{display:block; height:calc(50vh - 100px); width:25%; float:left; text-align:center; font-weight:700; color:#FFF}

nav img{width:40%;max-height: 20vh; margin:40px 0 0 0}
nav img:hover{ filter: brightness(0);}

[type="checkbox"]{display:none;}

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

[type="checkbox"]:checked ~ label{background:#FFF;}
[type="checkbox"]:checked ~ ul{display:flex;z-index:9999;position:absolute;top:100px;left:0;padding:0;width:100%;height:calc(100vh - 100px); padding-top:10px; align-items:center; justify-content:space-around;  
	background-image: -webkit-linear-gradient(bottom right, #ea690b 0%, #000 100%);
	background-image: -o-linear-gradient(bottom right, #ea690b 0%, #000 100%);
	background-image: linear-gradient(to top left, #ea690b 0%, #000 100%); }

@media only screen and (max-width:1000px){
	nav ul li{width:50%;}
	nav ul li:nth-child(odd){margin:0}
	nav ul li:nth-child(even){margin:0}
}

@media only screen and (max-width:600px){
	nav ul li{font-size:20px;line-height: 30px}
}
@media only screen and (max-width:380px){
	nav ul li{font-size:16px;line-height: 26px}
}