header nav a {
	display: inline-block;
	text-decoration: none;
	text-transform: uppercase;
	color: #000;
	line-height: 26px;
}

body.top header nav { padding: 10px; }

body:not(.top) header nav a { padding: 10px; }

body:not(.top) header nav a:hover { color: var(--magenta); }

body.top header nav a:hover { color: #000; }

@media (max-width: 859.999px) {
	body {
		position: relative;
		left: 0;
		transition: left .5s ease;
		padding-top: 60px;
	}

	body.left { left: -260px; }

	body.left nav,
	header { right: 0; }

	header {
		position: fixed;
		top: 0;
		left: 0;
	}

	header nav {
		overflow: hidden;
		box-sizing: border-box;
		padding: 10px 20px;
		overflow-y: auto;
		overflow-x: hidden;
		position: absolute;
		right: -260px;
		width: 260px;
		top: 62px;
		transition: right .5s ease;
		background-color: var(--lgray);
	}

	header nav a {
		display: block;
		text-align: left;
		padding: 10px;
		text-decoration: none;
	}
}

@media (min-width: 860px) {
	body.top { padding: 140px 0 0; }

	body.top header nav a {
		color: #FFF;
		padding: 2px 7px;
	}

	body.top header {
		position: fixed;
		top: -140px;
		left: 0;
		right: 0;
		transition: top .5s ease;
	}

	body.top header nav {
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		margin: 4px 200px;
		background-color: transparent;
	}

	header .mgE { display: none; }

	header nav {
		text-align: center;
		background-color: #FFF;
	}

	body.top header nav > div:first-child {
		position: absolute;
		inset: 0;
		background-color: var(--blue);
		z-index: -1;
		left: -200px;
		right: -200px;
		top: 0;
		bottom: 0;
	}
}

@media (min-width: 1279.999px) {
	body.top header nav { margin: 16px 200px; }
}