.menu-toggle {position: absolute; padding: 0.8em; top: 10px; right:0; cursor: pointer; z-index:9999;}

.hamburger, .hamburger::before, .hamburger::after {content: ''; display: block; background: #ccc; height: 3px; width: 2em; border-radius: 3px; -webkit-transition: all ease-in-out 350ms; transition: all ease-in-out 350ms; z-index:999}
.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; font-size:0}
nav ul {display: block; list-style-type: none; padding: 0; margin: 0; display: none; text-align:center; font-size:0}
nav ul.opening {display: flex;flex-direction:column; width:100%; position: absolute; top:60px; height:calc(100vh - 60px) /* minus top value */;align-content:center;justify-content:center; background-color:rgba(6, 11, 33, 1)}
nav li {font-size:13pt; line-height:16pt; letter-spacing:1px; width:80%; margin:0 auto}
nav li:last-child, nav li:nth-child(4) {border-bottom: none;}
nav a {color: #ddd; display: block; padding: 30px 20px; text-transform: uppercase; text-decoration: none;  font-size:11pt;transition: .3s ease-in-out}
nav a:hover, nav a:focus {color:#fff;  font-size:16pt; line-height:16pt; transition: .3s ease-in-out}
.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: #fff; font-weight:700;}
nav li:after {content: ''; display: block;height: 1px;width: 30px; margin: 0px auto; text-indent: -9999px; border-bottom: 1px solid #fff;}
nav li:last-child::after, nav li:nth-child(4)::after {content: ''; display: block;height: 0px;width: 0px; margin: 0px auto; text-indent: -9999px; border-bottom: none;}

@media (min-width: 480px) {
	.menu-toggle {top: 20px; right: 5%;}
	nav ul.opening {top:60px; height:calc(100vh - 60px)}
}
@media (min-width: 1024px) {
.menu-toggle {display: none;}
nav ul.opening {display: block;  width:100%; text-align:center}
nav ul {display: block; text-align:center; width:100%; margin:0 auto}
nav li {display:inline-block; vertical-align:middle; color: #ddd; text-transform:uppercase; margin:0; padding:0; border-bottom:none; letter-spacing:1px}
nav li:nth-child(1){width:13%}
nav li:nth-child(2){width:13%}
nav li:nth-child(3){width:8%}
nav li:nth-child(4){width:28%}
nav li:nth-child(5){width:17%}
nav li:nth-child(6){width:17%}
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:#fff}
.site-nav--icon {display: none;}
nav ul.opening {height:auto; background:transparent;}
.site-nav {position:absolute; top:30px; right:0; z-index:998; width:100%}
nav a:hover, nav a:focus {color:#fff;  font-size:12pt;transition: .3s ease-in-out}
nav li.active a{color: #fff; font-weight:700; font-size:13pt;}
nav li:after {content: ''; display: block;height: 1px;width: 30px; margin: 0px auto; text-indent: -9999px; border-bottom: none;}
nav li:last-child::after, nav li:nth-child(3)::after {content: ''; display: block;height: 0px;width: 0px; margin: 0px auto; text-indent: -9999px; border-bottom: none;}
}
@media (min-width: 1280px) {
nav ul {display: block; text-align:center; width:90%; margin:0 auto}
nav li {letter-spacing:2px}
nav a:hover, nav a:focus {color:#fff;  font-size:13pt; line-height:16pt;transition: .3s ease-in-out}
nav li.active a{color: #fff; font-weight:700;}
}

@media screen and (min-width: 1366px) {
}

@media screen and (min-width: 1400px) {

}

@media screen and (min-width: 1600px) {
nav ul {display: block; text-align:center; width:80%; margin:0 auto}

}

@media screen and (min-width: 1900px) {

	
}