header {
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	background-color: white;
	height: var(--header-height);
	padding: 1.5rem;
	box-shadow: none;
	z-index: 999;
}

header.scrolled {
	box-shadow: var(--shadow);
}

header > span.brand {
	flex: 1;
}

header > span.brand > a,
header > span.brand > a > img {
	height: 100%;
}

#menu-toggle {
	display: none;

	position: relative;
	right: 0;
	z-index: 1001;

	outline: none !important;
	box-shadow: none !important;

	color: var(--indigo);
	font-size: 2rem;

	transition: var(--transition);
}

#nav-main {
	background-color: white;
}

#nav-main > a,
#nav-main > span {
	margin-left: 1.5rem;
}

#nav-main a {
	border-bottom: 2px solid white;
}

#nav-main a.active {
	color: var(--aqua-dark) !important;
	border-color: var(--aqua-dark);
}

@media (max-width: 991.98px) {
	#menu-toggle {
		display: initial !important;
	}

	#menu-toggle.active {
		right: calc(var(--menu-width) - (2 * 1.5rem) - 55px);
	}

	#nav-main {
		position: fixed;
		top: 0;
		right: calc(-10px - var(--menu-width));

		z-index: 1000;

		height: 100vh;
		width: var(--menu-width);

		box-shadow: var(--shadow);
		margin: 0 !important;
		padding: var(--header-height) 2rem 2rem 2rem;

		flex-direction: column;
		align-items: start !important;
		justify-content: start !important;

		transition: var(--transition);
	}

	#nav-main.active {
		right: 0;
	}

	#nav-main > a {
		margin: 0 0 1rem 0 !important;
	}

	#nav-main > span {
		width: var(--menu-width);

		position: absolute;
		bottom: 1.5rem;
		right: 0;

		display: flex;
		justify-content: space-evenly;
	}
}