/* HAMBURGER NAVIGATION ELEMENT */

nav a[href]#menu { display: block; position: fixed; top: 10px; right: 10px; z-index: 9500; width: 40px; height: 40px; border: 0 !important; }
nav a[href]#menu span { display: block; position: absolute; left: 5px; width: 30px; height: 4px; background: #fff; opacity: .5; transition: .5s ease-in all; }
nav a[href]#menu span:nth-child(1) { top: 9px; transform: rotate(0); }
nav a[href]#menu span:nth-child(2) { top: 18px; }
nav a[href]#menu span:nth-child(3) { top: 27px; transform: rotateY(0); }
nav a[href]#menu:hover span { opacity: 1; }

/* NAVIGATION OVERLAY BASE STYLES */

nav section { position: fixed; top: 0; left; 0; z-index: 9000; width: 100%; height: 0; overflow: hidden; opacity: 0; padding: 0 60px;  background: #000; background: rgba(0,0,0,.6); transition: .5s ease-in all; color: #fff; }

/* ALTERATIONS TO BASE STYLES WHEN MENU IS OPEN */

body.open { overflow-Y: hidden; }
body.open nav a[href]#menu span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
body.open nav a[href]#menu span:nth-child(2) { width: 0; }
body.open nav a[href]#menu span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }  
body.open nav section { height: 100%; opacity: 1; padding: 60px; }