/* Navbar (from Telemetry by Pixelarity) */

	#navbar {
		display: -moz-flex;
		display: -webkit-flex;
		display: -ms-flex;
		display: flex;
		-moz-align-items: center;
		-webkit-align-items: center;
		-ms-align-items: center;
		align-items: center;
		-moz-transition-duration: 0.2s;
		-webkit-transition-duration: 0.2s;
		-ms-transition-duration: 0.2s;
		transition-duration: 0.2s;
		-moz-transition-property: background-color padding;
		-webkit-transition-property: background-color padding;
		-ms-transition-property: background-color padding;
		transition-property: background-color padding;
		-moz-transition-timing-function: ease-in-out;
		-webkit-transition-timing-function: ease-in-out;
		-ms-transition-timing-function: ease-in-out;
		transition-timing-function: ease-in-out;
		background: #00487d;
		color: #ffffff;
		font-family: "Roboto", Helvetica, sans-serif;
		font-size: 13pt;
		font-weight: 300;
		line-height: 1.75;
		left: 0;
		margin: 0;
		padding: 1em 1.5em;
		position: fixed;
		top: 0;
		width: 100%;
		z-index: 10001;
	}

		#navbar a {
			border: 0;
			color: inherit;
			text-decoration: none;
		}

			#navbar a:hover {
				color: #ffffff;
			}

		#navbar > .logo {
			-moz-flex-grow: 1;
			-webkit-flex-grow: 1;
			-ms-flex-grow: 1;
			flex-grow: 1;
			-moz-flex-shrink: 1;
			-webkit-flex-shrink: 1;
			-ms-flex-shrink: 1;
			flex-shrink: 1;
			cursor: default;
		}

			#navbar > .logo > a {
				display: inline-block;
				font-size: 1.75em;
				vertical-align: middle;
			}

				#navbar > .logo img {
					height: 1.5em;
					margin-right: 0.5em;
					vertical-align: middle;
				}

		#navbar > nav {
			-moz-flex-grow: 0;
			-webkit-flex-grow: 0;
			-ms-flex-grow: 0;
			flex-grow: 0;
			-moz-flex-shrink: 0;
			-webkit-flex-shrink: 0;
			-ms-flex-shrink: 0;
			flex-shrink: 0;
			margin-right: 0.5em;
		}

			#navbar > nav > ul {
				-moz-align-items: center;
				-webkit-align-items: center;
				-ms-align-items: center;
				align-items: center;
				display: -moz-flex;
				display: -webkit-flex;
				display: -ms-flex;
				display: flex;
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

				#navbar > nav > ul > li {
					margin: 0 0 0 0.75em;
					padding: 0;
				}

					#navbar > nav > ul > li > a {
						-moz-transition: background-color 0.2s ease-in-out;
						-webkit-transition: background-color 0.2s ease-in-out;
						-ms-transition: background-color 0.2s ease-in-out;
						transition: background-color 0.2s ease-in-out;
						/* border-radius: 4px; */
						display: block;
						padding: 0.5em 0.75em;
					}

						#navbar > nav > ul > li > a:hover {
							background-color: rgba(255, 255, 255, 0.2);
						}

		#navbar > .navPanelToggle {
			-moz-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, top 0.2s ease-in-out, right 0.2s ease-in-out;
			-webkit-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, top 0.2s ease-in-out, right 0.2s ease-in-out;
			-ms-transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, top 0.2s ease-in-out, right 0.2s ease-in-out;
			transition: background-color 0.2s ease-in-out, color 0.2s ease-in-out, top 0.2s ease-in-out, right 0.2s ease-in-out;
			text-decoration: none;
			display: none;
			height: 3em;
			line-height: 3em;
			margin-right: -0.5em;
			padding: 0 1.5em;
		}

			#navbar > .navPanelToggle:before {
				content: '\2630';
				margin: 0 0.5em 0 0;
			}

		#navbar.alt {
			background-color: transparent;
			padding: 2em 2.5em;
		}

			#navbar.alt > .logo span {
				display: none;
			}

			#navbar.alt > nav {
				margin-right: 0;
			}

			#navbar.alt > .navPanelToggle {
				margin-right: -1em;
			}

		/* Collapsed: full links over the banner, toggle + panel after it. */

			#navbar.collapsed > nav {
				display: none;
			}

			#navbar.collapsed > .navPanelToggle {
				display: block;
			}

		/* Transparent: no background, even after scrolling past the banner. */

			#navbar.transparent {
				background-color: transparent;
			}

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

			#navbar, #navPanel {
				font-size: 11pt;
			}

		}

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

			#navbar > .logo > a {
				font-size: 1.25em;
			}

		}

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

			#navbar {
				padding: 0.75em 1.25em;
			}

				#navbar > nav {
					display: none;
				}

				#navbar > .navPanelToggle {
					display: block;
				}

				#navbar.alt {
					padding: 2em 2em;
				}

		}

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

			#navbar {
				padding: 0.5em 0.825em;
			}

				#navbar > .logo > a {
					font-size: 1em;
				}

					#navbar > .logo img {
						height: 2em;
					}

					/* #navbar > .logo span {
						display: none;
					} */

				#navbar > .navPanelToggle {
					height: 2.5em;
					line-height: 2.5em;
					padding: 0 1em;
				}

				#navbar.alt {
					padding: 1.5em 1.5em;
				}

		}

/* Nav Panel */

	#navPanel {
		-moz-transform: translateX(100%);
		-webkit-transform: translateX(100%);
		-ms-transform: translateX(100%);
		transform: translateX(100%);
		-moz-transition: -moz-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-transition: -webkit-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-ms-transition: -ms-transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		transition: transform 0.5s ease, box-shadow 0.5s ease, visibility 0.5s;
		-webkit-overflow-scrolling: touch;
		background: #000e18;
		background: linear-gradient(to bottom, #000e18 0%, #000000 100%);
		box-shadow: none;
		color: rgba(255, 255, 255, 0.75);
		font-family: "Roboto", Helvetica, sans-serif;
		font-size: 13pt;
		font-weight: 300;
		line-height: 1.75;
		height: 100%;
		max-width: 80%;
		overflow-y: auto;
		position: fixed;
		right: 0;
		top: 0;
		visibility: hidden;
		width: 20em;
		z-index: 10002;
	}

		#navPanel.visible {
			-moz-transform: translateX(0);
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
			box-shadow: 0 0 1.5em 0 rgba(0, 0, 0, 0.2);
			visibility: visible;
		}

		#navPanel .logo {
			display: block;
			margin: 0 auto;
			padding-top: 2.5em;
			width: 6em;
		}

		#navPanel nav {
			padding: 1.5em 2em 3em 2em;
		}

		#navPanel .link {
			-moz-transition: color 0.2s;
			-webkit-transition: color 0.2s;
			-ms-transition: color 0.2s;
			transition: color 0.2s;
			border: 0;
			border-top: solid 1px rgba(255, 255, 255, 0.15);
			color: #ffffff !important;
			display: block;
			font-weight: 400;
			padding: 0.75em 0;
			text-decoration: none;
		}

			#navPanel .link:first-child {
				border-top: 0;
			}

			#navPanel .link:active, #navPanel .link:focus, #navPanel .link:hover {
				color: rgba(255, 255, 255, 0.6) !important;
			}

		#navPanel .close {
			text-decoration: none;
			-moz-transition: color 0.2s ease-in-out;
			-webkit-transition: color 0.2s ease-in-out;
			-ms-transition: color 0.2s ease-in-out;
			transition: color 0.2s ease-in-out;
			-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
			border: 0;
			color: rgba(255, 255, 255, 0.5);
			cursor: pointer;
			display: block;
			height: 3.25em;
			line-height: 3.25em;
			padding-right: 1.25em;
			position: absolute;
			right: 0;
			text-align: right;
			top: 0;
			vertical-align: middle;
			width: 7em;
		}

			#navPanel .close:before {
				content: '\2715';
				font-size: 1.25em;
			}

			#navPanel .close:hover {
				color: #ffffff;
			}