@keyframes menu_show {
	from {
		display: none;
		opacity: 0.0;
	}
	0% {
		display: block;
	}
	to {
		display: block;
		opacity: 1.0;
	}
}
@keyframes menu_hide {
	from {
		display: none;
		opacity: 0.0;
	}
	0% {
		display: block;
	}
	to {
		display: block;
		opacity: 1.0;
	}
}

body > .header {
	padding: 5px;
	background: $theme-header-background;
	color: $theme-header-color;
}

body > .header > .content {
	display: grid;
	grid-template-columns: auto 1fr;
	max-width: $theme-width;
	margin-left: auto;
	margin-right: auto;
}

body > .header > .content .logo {
	display: grid;
	grid-template-columns: auto 1fr;
	margin: 0 2em 0 0;
	padding: 0;
}

body > .header > .content .logo > .icon {
	justify-self: stretch;
	align-self: stretch;
	height: 90px;
	margin: 0 10px 0 0;
	padding: 0;
}

body > .header > .content .logo > figcaption {
	justify-self: left;
	align-self: center;
	margin: 0;
	padding: 0;
	font-family: "Oswald";
	font-size: 1.75rem;
	font-weight: bold;
	text-transform: uppercase;
	letter-spacing: .25ch;
}

body > .header > .content .navigation {
	justify-self: left;
	align-self: center;
	font-size: 0.9rem;
	color: $theme-menu-color;
}

body > .header > .content .navigation > .menu {
	list-style: none inside;
	text-transform: uppercase;
	padding: 0px;
	margin: 0;
}

body > .header > .content .navigation > .menu > li {
	display: inline-block;
	padding: 0px .5em 0px 0px;
	margin: 0;
}

body > .header > .content .navigation > .menu > li > .menu {
	display: block;
	position: absolute;
	padding: 0px .5em;
	margin: 0;
	cursor: auto;
	list-style: none inside;
	background: $theme-menu-background;
	box-shadow: 2px 2px 5px 0px black;
}

body > .header > .content .navigation > .menu > li > .menu > li {
	display: block;
	padding: 0 .5em;
	margin: 0;
}

body > .header > .content .navigation .menu > li > a {
	display: block;
	padding: .5em 0;
}

body > .header > .content .navigation .menu li {
	color: hsl(0, 0%, 75%);
}

body > .header > .content .navigation .menu li.has-menu {
	cursor: pointer;
}

body > .header > .content .navigation .menu li.has-menu > .menu {
	position: absolute;
	pointer-events: none;
	display: block;
	animation-name: menu_hide;
	animation-duration: 100ms;
	animation-fill-mode: both;
	animation-direction: reverse;
}

body > .header > .content .navigation .menu li.has-menu:hover > .menu,
body > .header > .content .navigation .menu li.has-menu > .menu:hover,
body > .header > .content .navigation .menu li.has-menu:focus > .menu,
body > .header > .content .navigation .menu li.has-menu > .menu:focus,
body > .header > .content .navigation .menu li.has-menu:active > .menu,
body > .header > .content .navigation .menu li.has-menu > .menu:active {
	display: block;
	pointer-events: auto;
	animation-name: menu_show;
	animation-duration: 100ms;
	animation-fill-mode: both;
	animation-direction: normal;
}

body > .header > .content .navigation .menu li:hover,
body > .header > .content .navigation .menu li:active,
body > .header > .content .navigation .menu li:focus {
	color: $theme-menu-color-active;
}