#top-nav {
	position: fixed;
	top: 0.6rem;
	left: 50%;
	-moz-transform: translateX(-50%);
	-webkit-transform: translateX(-50%);
	-ms-transform: translateX(-50%);
	transform: translateX(-50%);
	z-index: 4;
}

#top-nav ul {
	display: -moz-flex;
	display: -webkit-flex;
	display: -ms-flex;
	display: flex;
	margin-bottom: 0;
	list-style: none;
	padding-left: 0;
	border: solid 1px #ffffff;
	border-radius: 4px;
	background-color: rgba(19, 21, 25, 0.35);
	-moz-backdrop-filter: blur(0.35rem);
	-webkit-backdrop-filter: blur(0.35rem);
	-ms-backdrop-filter: blur(0.35rem);
	backdrop-filter: blur(0.35rem);
	-moz-transition: background-color 0.2s ease, box-shadow 0.2s ease;
	-webkit-transition: background-color 0.2s ease, box-shadow 0.2s ease;
	-ms-transition: background-color 0.2s ease, box-shadow 0.2s ease;
	transition: background-color 0.2s ease, box-shadow 0.2s ease;
}

#top-nav ul li {
	padding-left: 0;
}

#top-nav ul li a {
	display: block;
	min-width: 12rem;
	height: 2.75rem;
	line-height: 2.75rem;
	padding: 0 1.4rem 0 1.6rem;
	text-transform: uppercase;
	letter-spacing: 0.2rem;
	font-size: 0.8rem;
	border-bottom: 0;
}

#top-nav ul li a:hover {
	background-color: rgba(255, 255, 255, 0.075);
}

#top-nav ul li a:active {
	background-color: rgba(255, 255, 255, 0.175);
}

#top-nav.is-docked ul {
	background-color: rgba(0, 0, 0, 0.94);
	box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.35);
	-moz-backdrop-filter: none;
	-webkit-backdrop-filter: none;
	-ms-backdrop-filter: none;
	backdrop-filter: none;
}

.mastering-route-pill {
	position: fixed;
	display: flex;
	align-items: center;
	justify-content: center;
	height: 2.75rem;
	padding: 0 1.4rem 0 1.6rem;
	border: solid 1px #ffffff;
	border-radius: 4px;
	background-color: rgba(19, 21, 25, 0.92);
	box-shadow: 0 0 1.25rem rgba(0, 0, 0, 0.35);
	color: #ffffff;
	font-size: 0.8rem;
	letter-spacing: 0.2rem;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
	pointer-events: none;
	z-index: 10000;
	box-sizing: border-box;
	transition:
		top 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		left 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		width 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		padding 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		letter-spacing 0.9s cubic-bezier(0.2, 0.8, 0.2, 1),
		border-color 0.2s ease,
		opacity 0.2s ease;
}

body.is-routing-mastering #top-nav {
	opacity: 0.18;
}

@media screen and (max-width: 736px) {

	#top-nav {
		top: 1rem;
		width: calc(100% - 2rem);
		max-width: 18rem;
	}

	#top-nav ul {
		width: 100%;
	}

	#top-nav ul li,
	#top-nav ul li a {
		width: 100%;
	}

	#top-nav ul li a {
		min-width: 0;
		text-align: center;
		padding-left: 1.6rem;
		padding-right: 1.4rem;
	}

	#top-nav.is-docked {
		top: 1rem;
	}

}