navigation - 5

				<div class="frame">
					<input type="checkbox" id="op"></input>
					<div class="lower">
						  <label for="op">click the text</label>
					</div>
					<div class="overlay overlay-big">
						<label for="op">X</label>
						<nav>
							<ul>
								<li><a href="#">Home</a></li>
								<li><a href="#">About</a></li>
								<li><a href="#">Work</a></li>
								<li><a href="#">Clients</a></li>
								<li><a href="#">Contact</a></li>
							</ul>
						</nav>
					</div>
				</div>
				<style>
					.lower{width:240px; margin:1% ; padding:5px; background:white; opacity:0.8; color:black; box-shadow:inset 0 0 0 1px black; border:30px solid white;}
					.lower:hover{background:black;	color:white; box-shadow:inset 0 0 0 1px white; border:30px solid black;}
					input{display:none;}
					.lower label{font-family: Helvetica, sans-serif;  text-transform:uppercase; font-size:40px; text-align:center;}
					.lower label:hover{cursor:pointer;}
					.overlay{position: fixed; width: 100%; height: 100%; top: 0; left: 0; background: rgba(0,0,0,0.9);}
					.overlay label{width: 58px;	height:58px; position: absolute; right: 20px; top: 20px; z-index: 100; cursor:pointer; }
					.overlay label{font-size: 3vw; color: orangered; font-weight: 900;}
					.overlay nav {text-align: center; position: relative; top: 50%;	height: 60%; font-size: 54px; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
					.overlay ul {list-style: none; padding: 0; margin: 0 auto;	display: inline-block; height: 100%; position: relative;}
					.overlay ul li {display: block;	height: calc(100% / 5); min-height: 54px;}
					.overlay ul li a {font-weight: 600; display: block; color: white; text-decoration:none; -webkit-transition: color 0.2s;transition: color 0.2s; font-family: Helvetica, sans-serif; text-transform:uppercase;}
					.overlay ul li a:hover, .overlay ul li a:focus {color: #849368;}
					.lower~.overlay-big{opacity: 0; visibility: hidden; -webkit-transition: opacity 0.5s, visibility 0s 0.5s; transition: opacity 0.5s, visibility 0s 0.5s;}
					#op:checked~.overlay-big{opacity: 1; visibility: visible; -webkit-transition: opacity 0.5s; transition: opacity 0.5s;}
					.overlay-big nav {-moz-perspective: 300px; perspective: 300px;}
					.overlay-big nav ul {opacity: 0.4; -webkit-transform: translateY(-25%) rotateX(35deg); transform: translateY(-25%) rotateX(35deg);	-webkit-transition: -webkit-transform 0.5s, opacity 0.5s; 
						transition: transform 0.5s, opacity 0.5s;}
					#op:checked~.overlay-big nav ul { opacity: 1; -webkit-transform: rotateX(0deg);	transform: rotateX(0deg);}
					#op:not(:checked)~.overlay-big nav ul {-webkit-transform: translateY(25%) rotateX(-35deg); transform: translateY(25%) rotateX(-35deg);}
				</style>