/* Mobile Menu Concept @ Daniel Hearn
https://codepen.io/danhearn/pen/XprGrJ
*/

body {
	/* background: #87cc77;
	 margin: 0;
	 font-family: arial;
	 width: 100vw;
	 height: 100vh;*/
	 animation: bugfix infinite 1s;
	 -webkit-animation: bugfix infinite 1s;
}
 @keyframes bugfix {
	 from {
		 padding: 0;
	}
	 to {
		 padding: 0;
	}
}
 @-webkit-keyframes bugfix {
	 from {
		 padding: 0;
	}
	 to {
		 padding: 0;
	}
}
 #overlay-button {
	 position: absolute;
	 right: 20px;
	 /*top: 100px;*/
	 top: 0;
	 padding: 26px 11px;
	 z-index: 100000;
	 cursor: pointer;
	 user-select: none;
	 display: none;
	 
}
 #overlay-button span {
	 height: 1px;
	 width: 30px;
	 border-radius: 2px;
	 background-color: white;
	 position: relative;
	 display: block;
	 transition: all 0.1s ease-in-out;
}
 #overlay-button span:before {
	 top: -10px;
	 visibility: visible;
}
 #overlay-button span:after {
	 top: 10px;
}
 #overlay-button span:before, #overlay-button span:after {
	 height: 1px;
	 width: 30px;
	 border-radius: 2px;
	 background-color: white;
	 position: absolute;
	 content: "";
	 transition: all 0.1s ease-in-out;
}
 #overlay-button:hover span, #overlay-button:hover span:before, #overlay-button:hover span:after {
	 /*background: #000 !important;*/
}
 input[type=checkbox] {
	 display: none;
}
 input[type=checkbox]:checked ~ #overlay {
/* 	 visibility: visible; */
   opacity: 1;
}
 input[type=checkbox]:checked ~ #overlay-button:hover span, input[type=checkbox]:checked ~ #overlay-button span {
	 background: transparent;
}
 input[type=checkbox]:checked ~ #overlay-button span:before {
	 transform: rotate(45deg) translate(7px, 7px);
	 opacity: 1;
}
 input[type=checkbox]:checked ~ #overlay-button span:after {
	 transform: rotate(-45deg) translate(7px, -7px);
}
 #overlay {
	 height: 100vh;
	 width: 100vw;
	 background: #000;
	 z-index: 2;
/* 	 visibility: hidden; */
	 position: fixed;
	 top: 0;
	 left: 0;
   transition: opacity 0.1s;
    transition-timing-function: cubic-bezier(0.42, 0, 0.58, 1);
   opacity: 0;
}
 #overlay ul {
	 display: flex;
	 justify-content: center;
	 align-items: center;
	 flex-direction: column;
	 text-align: center;
	 height: 100vh;
	 padding-left: 0;
	 list-style-type: none;
}
 #overlay ul li {
	 padding: 1em;
}
 #overlay ul li a {
	 color: white;
	 text-decoration: none;
	 font-size: 1.5em;
}
 #overlay ul li a:hover {
	 color: #333332;
}



/* Small Devices */
@media only screen and (max-width: 768px) {
	#overlay-button{display: block;}
	

}

/* Mobile */
@media only screen and (max-width: 510px) {
	
	#overlay-button{right: 3px; top: -7px; transform: scale(80%); }
	 #overlay-button span, #overlay-button span:before, #overlay-button span:after{height: 1.5px;}
	
}

/* Small Mobile */
@media only screen and (max-width: 360px) {
	
	
}