/*
insp: https://codepen.io/torbencolding/pen/OPwwOg
 */
nav{max-height: 4.5em ;}

nav ul{
	display: flex; 
	flex-wrap: wrap; 
	max-width: 1000px; 
	margin: 0 auto;		
   background: darkred;
}
nav ul,
nav li{
	flex: 1;	
}
nav li:last-child{border-bottom: none;}
nav a{
	text-decoration: none;
	color: inherit;
	display: block;
	font-size: 1.5rem;
}
nav a:hover{
	background: rgba(0, 0, 0, 0.1);
	color: #fff;
}
nav li{
	position: relative;
	
	color: #fff;
	text-align: center;
	
}  
nav input,
nav label{
	display: none;
	width: 50%; 
	/*height: 2.5em; */
	background: darkred; 
	color: #fff; 
	text-align: center; 
	margin: 0 auto 0 auto;
	
 border-radius: 5px;
	z-index: 10 ;
	
} 
nav label{position: relative; top: 0px; right: 0px; transition: .4s;}
nav label:hover{cursor:pointer;}
nav label:before{
	
	
}

/*************** MEDIA QUERIES *******************/
@media only screen and (max-width: 1080px){

	nav ul{
	position: absolute; /*top:-150% ;*/
	 z-index: -2;
		transform: translateY(0);
		box-shadow: 0 0 5px rgba(0,0,0, .7);
      transition: all .5s;
	}
	nav li{
		flex: none; 
		width: 100%;
		border-bottom: solid 1px #777;
	} 
	nav input[type="checkbox"]:checked + ul{
		transform: translateY(40%);
		width: 95%;
		 background: darkred;   
      transition: all .5s;
      z-index: 2;
	}
	nav label{display: block;}  
	nav input[type="checkbox"]:checked + ul li:nth-child(1){
		background: rgba(0, 0, 0, 0.1);
		color: #fff;
	}  
}