.menu-toggle {position: absolute; padding: 0.8em; top: 30px; right: 5%; cursor: pointer;}

.hamburger, .hamburger::before, .hamburger::after {content: ''; display: block; background: #fff; height: 3px; width: 30px; border-radius: 4px; -webkit-transition: all ease-in-out 350ms; transition: all ease-in-out 350ms;}
.hamburger::before {-webkit-transform: translateY(-7px); transform: translateY(-7px);}
.hamburger::after {-webkit-transform: translateY(4px); transform: translateY(4px);}
.open .hamburger {-webkit-transform: rotate(45deg); transform: rotate(45deg);}
.open .hamburger::before {display: none;}
.open .hamburger::after {-webkit-transform: translateY(-1px) rotate(-90deg); transform: translateY(-1px) rotate(-90deg);}

nav {margin: 0; padding: 0; display:table; width:100%}
nav ul {display:table-cell; list-style-type: none; padding: 0; margin: 0; display: none; text-align:center;}
nav ul.opening {display: table-cell; height:calc(100vh - 220px); background-color:#000; opacity:0.9; vertical-align:middle; width:100% }
nav li {border-bottom: 1px solid #444;}
nav li:last-child {border-bottom: none;}
nav a {color: #cccccc; display: block; padding: 10px 20px; text-transform: uppercase; text-decoration: none;}
nav a:hover, nav a:focus {background: #555555; color:#FFFFFF}
.site-nav--icon {font-size: 1.4em; margin-right: 1em; width: 1.1em; text-align: right; color: rgba(255,255,255,.4);}
.site-nav {transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.175, 0.985, 0.2, 1.275);
 	 -webkit-transition: opacity 0.4s ease, -webkit-transform 0.8s cubic-bezier(0.175, 0.985, 0.32, 1.275);
 	 -moz-transition: opacity 0.4s ease, transform 0.8s cubic-bezier(0.175, 0.985, 0.32, 1.275);}

nav li.active a{color: #ffffff; font-weight:bold}

.nav.open{
 position:fixed;
 width:100%;
}
.nav.open{
    height:100%;
    overflow:hidden;
}

/*

@media (min-width: 1024px) {
.menu-toggle {display: none;}
nav ul {display: block; text-align:right}
nav li {display:inline-block; color: #cccccc; text-transform:uppercase; margin:0 20px; padding:0; border-bottom:none}
nav li a {padding:0; margin: 0; border: none;}
nav {display: block; text-align: center; background-color:transparent;}
nav a:hover, nav a:focus {background:transparent; color:#FFFFFF}
.site-nav--icon {display: none;}
.site-nav {position:absolute; top:70px; right:4%}
nav ul.opening {height:auto; background:transparent;}
}

*/