.menu-toggle {position: absolute; cursor: pointer; z-index:999}

.hamburger, .hamburger::before, .hamburger::after {content: ''; display: block; background: #fff; height: 3px; width: 1.7em; border-radius: 3px; -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; height:30px; margin-top:15px; /* divlogo padding top */ display:block;}
nav ul {list-style-type: none; padding: 0; margin: 0; display: none; text-align:center}
nav ul.opening {display: flex; flex-direction: column; align-items:center; justify-content: center; position:absolute; top:45px; left:0; width:calc(100vw); height:calc(100vh - 45px); background-color:#484848}
nav li:last-child {border-bottom: none;}
nav a {color: #eee; display: block; text-transform: uppercase; text-decoration: none; padding:0; margin:10px 0}
nav a:hover, nav a:focus {background: transparent; color:#fff}
.site-nav {position:relative; /* bottom:15px; Equal to header bottom padding */  background-color:#bf0718; width:100%;}
.site-nav--icon {font-size: 1.4em; margin-right: 1em; width: 1.1em; text-align: right; color: rgba(255,255,255,.4);}

nav li.active a{color: #ffffff; font-weight:bold; border-bottom:solid 5px #bf0718; padding-bottom:2px}

@media screen and (min-width: 300px) {
.menu-toggle {padding: 0.8em; top: 15px; right: 10px;}
nav li {font-size:14pt; line-height:24pt}
nav ul.opening {top:0px; height:100vh; margin-top:-15px}
}

@media screen and (min-width: 480px) {
.menu-toggle {padding: 0.8em; top: 15px; right: 10px;}
.hamburger, .hamburger::before, .hamburger::after {height: 3px; width: 2em;}
/*nav li:first-child {margin-top:-60px}*/
nav li {font-size:16pt; line-height:30pt}

}

@media screen and (min-width: 768px) {
nav {height:40px; margin-top:15px;}
.menu-toggle {padding: 0.8em; top: 19px; right: 3%;}
/*nav li:first-child {margin-top:45px}*/
/*nav li:first-child {margin-top:-70px}*/
nav li {font-size:18pt}

}

@media (min-width: 1024px) {
.menu-toggle {display: none;}
nav {height:40px; margin-top:30px;}
nav ul.opening {height:auto; display:block; background:transparent; position:static}
nav ul {display:block; text-align:right; height:40px; padding-right:60px}
nav li {display:inline-block; color: #eee; text-transform:uppercase; padding:0 10px; /*border-right:solid 1px #fff;*/ font-size:11pt; line-height:40px}
nav li:last-child {border-right:none}
nav li a {margin: 0; border: none;}
nav {display: block; text-align: center; background-color:transparent;}
nav a:hover, nav a:focus {background:transparent; color:#fff; border-bottom:solid 5px #bf0718; padding-bottom:2px}
.site-nav--icon {display: none;}
.site-nav {position:relative; /* bottom:15px; Equal to header bottom padding */  background-color:#bf0718; width:100%;}
}

@media (min-width: 1280px) {
nav {height:40px; margin-top:40px;}
nav ul {display:block; text-align:right; height:40px; padding-right:100px}
nav li {display:inline-block; color: #eee; text-transform:uppercase; padding:0 20px; /*border-right:solid 1px #fff;*/ font-size:11pt; line-height:40px}
}

@media (min-width: 1600px) {
nav li {font-size:12pt;}
}