/*

Page Header Component

	The page header is the bar at the top of every DreamHost application
	that contains the logo and navigation

	Basic guidelines:
	- Logo:
		- For internal sites (employees & customers), the moon symbol is enough
		- For external sites (non-customers), use the full DreamHost logo
	- Colors:
		- Default state is dark blue/black
		- There is `.PageHeader--overlay` that makes the bar transparent and overlap
			any other content on the page. E.g. overlapping a nice big marketing photo
	- Page header content can vary. Use `.Fluid-Row` classes to space content.
	- `.PageHeader__nav` should contain the primary navigation
	- `.PageHeader__subnav` is for all the secondary links we may need to provide
	- Both nav and subnav supports Lists within a `.Popover` as a dropdown
	- The header was built around the idea of a single breakpoint. Below that breakpoint,
		the header will show a hamburger menu link with the header taking over the screen
		when shown. Larger than that breakpoint will display the header inline.
	- There are some built-in responsive classes.
	- Add `.PageHeader__logo--internal` to `.PageHeader__logo` to show correct logo on internal only facing properties & logged in page states.


	Usage:
	<div class="PageHeader">
		<div class="PageHeader__container">
			<a class="PageHeader__logo" href="//www.dreamhost.com"></a>
			<ul class="PageHeader__nav">
				<li><a class="PageHeader__nav-link is-active" href="#">Link</a></li>
			</ul>
			<ul class="PageHeader__subnav">
				<li><div class="Menu-toggle js-menu-toggle"><span class="Menu-toggle__inner"></span></div></li>
			</ul>
		</div>
	</div>

*/

.PageHeader {
	position: relative;
	padding: 1.75rem 1.75rem 3.5rem 1.75rem;
	background: $c-b700;
	color: #fff;

	&.PageHeader--transparent{
		background: transparent;
	}

}

.Menu-toggle {
	margin: 0.25rem 0 0 0;
	display: inline-block;
	height: 15px;
	width: 20px;
	vertical-align: middle;
	position: relative;

	&:hover {
		cursor: pointer;
	}

	.Menu-toggle__inner {
		background: $c-w100;
		height: 2px;
		border-radius: 3px;
		width: 20px;
		margin:0;
		display: block;
		position: absolute;
		opacity: 1;
		left: 0;
		top: 4px;
		-webkit-transform: rotate(0deg);
		-moz-transform: rotate(0deg);
		-o-transform: rotate(0deg);
		transform: rotate(0deg);
		-webkit-transition: .3s ease-in-out;
		-moz-transition: .3s ease-in-out;
		-o-transition: .3s ease-in-out;
		transition: .3s ease-in-out;


		&:before {
			background: $c-w100;
			height: 2px;
			border-radius: 3px;
			width: 20px;
			margin: 0;
			position: absolute;
			left: 0;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .3s ease-in-out;
			-moz-transition: .3s ease-in-out;
			-o-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
			content: '';
			display: block;
			top: -5px;
			opacity: 1;
		}

		&:after {
			background: $c-w100;
			height: 2px;
			border-radius: 3px;
			width: 20px;
			margin: 0;
			display: block;
			position: absolute;
			opacity: 1;
			left: 0;
			-webkit-transform: rotate(0deg);
			-moz-transform: rotate(0deg);
			-o-transform: rotate(0deg);
			transform: rotate(0deg);
			-webkit-transition: .3s ease-in-out;
			-moz-transition: .3s ease-in-out;
			-o-transition: .3s ease-in-out;
			transition: .3s ease-in-out;
			content: '';
			top: 5px;
		}
	}
}

.PageHeader--overlay {
	background: transparent;
	position: absolute;
	width: 100%;
	z-index: $z-3;
}

.PageHeader__container {
	@include clearfix;
	display: block;
	max-width: 1280px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;

	> * {
		flex: 1 100%;
	}

	.Popover__section {
		font-weight: $t-bold;
		text-align: left;

		ul {
			&:not(:first-child) {
				border-top: solid 1px $c-g100;
			}
		}

		.List li a {
			display: block;
			@include fontsize($t-0);
			color: $c-g500;
			transition: all 0.1s ease-in-out;

			&:hover {
				text-decoration: none;
				color: $c-b300;
			}
		}
	}
}

.PageHeader__logo {
	width: 160px;
	height: 30px;
	position: absolute;
	top: 0;
	left: 0;
	margin: 1.75rem;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 471.3 89.3'%3E%3Cg fill='%23FFF'%3E%3Cpath d='M95.4 23.3h15.8c15.3 0 28.2 6.5 28.2 24 0 15.4-12.6 23.7-26.8 23.7H95.4V23.3zm10.5 37.9h5.5c9.8 0 17.1-3.7 17.1-14.5 0-9.4-7.5-13.7-16.4-13.7h-6.2v28.2zM144.8 38.2h10.1v5.3h.1c2.2-4 5-6.1 9.4-6.1 1.1 0 2.4.1 3.4.3v9.2c-1.4-.4-2.8-.7-4.3-.7-7.7 0-8.6 4.4-8.6 11v13.7h-10.1V38.2zM202.1 65.3c-3.2 4.1-8.5 6.5-13.8 6.5-10.1 0-18.2-6.7-18.2-17.2 0-10.4 8.1-17.2 18.2-17.2 9.4 0 15.3 6.7 15.3 17.2v3.2h-23.4c.8 3.8 3.7 6.3 7.6 6.3 3.3 0 5.5-1.7 7.2-4l7.1 5.2zm-8.6-14.5c.1-3.4-2.6-6.2-6.2-6.2-4.4 0-6.9 3-7.1 6.2h13.3zM229.1 66.8h-.1c-2.2 3.5-6.3 4.9-10.4 4.9-6.1 0-11.6-3.5-11.6-10.1 0-11.3 13.7-11.5 22.1-11.5 0-3.6-3-5.9-6.5-5.9-3.3 0-6.1 1.5-8.2 3.9l-5.4-5.5c3.7-3.5 9.1-5.3 14.4-5.3 11.8 0 14.9 6 14.9 16.9v16.6H229v-4zm-2.5-10.2c-3.1 0-10 .3-10 4.7 0 2.4 2.6 3.6 4.8 3.6 4 0 7.7-2.1 7.7-6.1v-2.2h-2.5zM244.7 38.2h9.7v4.4h.1c1.3-2.6 4.6-5.3 9.6-5.3 4.6 0 8.3 1.9 10.1 5.9 2.4-4.2 5.5-5.9 10.4-5.9 8.9 0 11.6 6.3 11.6 14.2v19.3H286v-19c0-3-1.1-5.6-4.4-5.6-4.6 0-6.1 3.3-6.1 7.3v17.3h-10.1V53.6c0-2.4.1-7.3-4.5-7.3-5.3 0-6.1 4.1-6.1 8.3v16.3h-10.1V38.2zM302.5 23.3H313V41h20.4V23.3h10.5V71h-10.5V50.3H313v20.6h-10.5V23.3zM366.6 37.4c10.1 0 18.2 6.7 18.2 17.2 0 10.4-8.1 17.2-18.2 17.2s-18.2-6.7-18.2-17.2 8.1-17.2 18.2-17.2zm0 25.4c5 0 8.1-3.4 8.1-8.3s-3-8.3-8.1-8.3c-5 0-8.1 3.4-8.1 8.3 0 5 3.1 8.3 8.1 8.3zM407.9 47.8c-1.5-1.8-3.4-2.8-5.9-2.8-1.7 0-3.7.7-3.7 2.7 0 4.8 17 .7 17 13.2 0 8.3-8.1 10.8-15.1 10.8-4.6 0-9.6-1.1-12.9-4.4l6.1-6.8c1.9 2.3 4.1 3.6 7.1 3.6 2.3 0 4.6-.6 4.6-2.4 0-5.3-17-.8-17-13.3 0-7.7 6.9-11 13.7-11 4.3 0 9.1 1.1 12.1 4.3l-6 6.1zM442.5 46.3h-8.9v10.9c0 3.5.4 6.1 4.8 6.1 1.1 0 3.2-.1 4.1-.9v8.4c-2.2.8-4.7 1-7.1 1-6.7 0-11.9-2.8-11.9-9.9V46.3H417v-8.1h6.5v-9.7h10.1v9.7h8.9v8.1z'/%3E%3C/g%3E%3Cpath fill='%23FFF' d='M77.3 60c-4.9 2.7-10.5 4.2-16.5 4.1C43 63.7 29 49.4 29.3 32c.1-5.9 1.9-11.4 4.9-16-9.5 5.3-16 15.2-16.2 26.7-.4 17.3 13.7 31.7 31.4 32.1 11.8.2 22.1-5.7 27.9-14.8'/%3E%3Cpath fill='%230073EC' d='M51.3 14.6c-4.8 0-9.3 1.2-13.3 3.4-2.5 4.1-3.9 8.8-4.1 13.6-.3 15.1 12 27.6 27.3 27.9 4.6 0 9.8-1.1 13.8-3.3 2.4-4.1 3.8-8.9 3.8-14C79 27 66.6 14.6 51.3 14.6z'/%3E%3Cg%3E%3Cpath fill='%23FFF' d='M446 23.5c0-.5.1-1 .3-1.5.2-.5.5-.8.8-1.2.3-.3.7-.6 1.2-.8.4-.2.9-.3 1.4-.3.5 0 1 .1 1.4.3.4.2.8.4 1.2.8.3.3.6.7.8 1.2.2.5.3.9.3 1.5 0 .5-.1 1-.3 1.5-.2.4-.5.8-.8 1.2-.3.3-.7.6-1.2.8-.4.2-.9.3-1.4.3-.5 0-1-.1-1.4-.3-.4-.2-.8-.4-1.2-.8-.3-.3-.6-.7-.8-1.2-.2-.5-.3-1-.3-1.5zm.7 0c0 .4.1.9.2 1.2.2.4.4.7.6 1 .3.3.6.5 1 .7.4.2.8.2 1.2.2.4 0 .8-.1 1.2-.2.4-.2.7-.4 1-.7.3-.3.5-.6.6-1 .2-.4.2-.8.2-1.2 0-.4-.1-.9-.2-1.2-.2-.4-.4-.7-.6-1-.3-.3-.6-.5-1-.7-.4-.2-.8-.2-1.2-.2-.4 0-.8.1-1.2.2-.4.2-.7.4-1 .7-.3.3-.5.6-.6 1-.2.3-.2.7-.2 1.2zm1.6-2.2h1.6c1 0 1.5.4 1.5 1.2 0 .4-.1.7-.3.9-.2.2-.5.3-.8.3l1.2 1.9h-.7l-1.2-1.9h-.7v1.9h-.7l.1-4.3zm.6 1.9h1.1c.1 0 .3 0 .4-.1.1 0 .2-.1.3-.2.1-.1.1-.2.1-.4 0-.1 0-.3-.1-.4-.1-.1-.1-.2-.2-.2s-.2-.1-.3-.1H449l-.1 1.4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;

	&.PageHeader__logo--internal {
		flex-basis: 30px;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath fill='%23FFF' d='M73.9 60.3C69 63 63.3 64.5 57.3 64.4 39.6 64 25.5 49.7 25.8 32.3c.1-5.9 1.9-11.4 4.9-16-9.5 5.3-16 15.2-16.2 26.7-.4 17.4 13.8 31.7 31.5 32.1 11.7.2 22.1-5.7 27.9-14.8'/%3E%3Cpath fill='%230073EC' d='M47.9 14.9c-4.8 0-9.3 1.2-13.3 3.4-2.5 4.1-3.9 8.8-4.1 13.6-.3 15.1 12 27.6 27.3 27.9 4.6 0 9.8-1.1 13.8-3.3 2.4-4.1 3.8-8.9 3.8-14 .1-15.2-12.3-27.6-27.5-27.6z'/%3E%3C/svg%3E") no-repeat;
	}
}

.PageHeader__nav {
	@include fontsize($t-1, $t-h-1);
	display: none;
	margin: 2rem 0 0 0;

	li {
		margin: 0;
	}

	li:last-of-type {
		border-bottom: solid 1px $c-g200;
	}
}

.PageHeader__nav-link {
	text-decoration: none;
	font-weight: $t-bold;
	color: $c-g200;
	@include fontsize($t-1, $t-h-1);
	display: inline-block;
	outline: none;
	position: relative;
	border: solid 1px $c-g200;
	border-bottom: none;

	&:hover,
	&.is-open {
		color: $c-w100;
		text-decoration: none;

		&:after {
			color: $c-b300;
		}
	}
}

.PageHeader__nav-link.is-active,
.PageHeader__nav-link--active {
	color: $c-w100;

	&:hover,
	&.is-open {
		color: $c-w100;
	}
}

.PageHeader__subnav {
	text-align: right;
	margin: 1.75rem;
	padding-left: 0;
	position: absolute;
	top: 0;
	right: 0;

	li{
		display: inline-block;
		margin-right: 2rem;
	}

	li:last-of-type{
			margin: 0;
	}

	a {
		text-decoration: none;

		svg {
			height: 100%;
			width: 100%;
		}
	}
}

.PageHeader__subnav-link {
	text-decoration: none;
	color: $c-g200;
	display: inline-block;

	.Icon {
		margin-right: 0;
		width: 1.5rem;
		height: 1.5rem;
	}

	&:hover,
	&.is-open {
		color: $c-w100;

		.Icon {
			fill: $c-w100;
		}

		&:after{
			color: $c-b300;
		}
	}
}

.PageHeader__notification-amount {
	display: inline-block;
	background: $c-r300;
	border-radius: 50px;
	width: 1rem;
	height: 1rem;
	@include fontsize($t-0);
	font-weight: $t-bold;
	text-align: center;
	vertical-align: middle;
	color: $c-w100;
	transform: translate(18px, -4px);
}

button.PageHeader__subnav-link {
	background: transparent;
	border-width: 0;
	padding: 0;
	cursor: pointer;
	outline: none;

	&:after {
		vertical-align: top;
		margin-top: 11px;
		margin-left: 4px;

		&:hover:after {
			color: $c-b300;
		}
	}
}

.PageHeader.menu-is-open {

	padding: 1.75rem;

	.PageHeader__nav {
		display: block;
		margin: 4rem 0 0 0;

		li {
			text-align: center;
		}

		.PageHeader__nav-link {
			display: block;
			width: 100%;
			text-align: center;
			padding: 1rem;
		}

		.Popover-container {
			display: block;
		}
	}

	.Menu-toggle__inner{
			height:0;

			&:before {
				top: 0px;
				-webkit-transform: rotate(135deg);
				-moz-transform: rotate(135deg);
				-o-transform: rotate(135deg);
				transform: rotate(135deg);
			}

			&:after {
				top: 0px;
				-webkit-transform: rotate(-135deg);
				-moz-transform: rotate(-135deg);
				-o-transform: rotate(-135deg);
				transform: rotate(-135deg);
			}
	}
}

.PageHeader--light {
	background: $c-w100;
	border-bottom: solid 1px #E0E4E8;

	.Menu-toggle__inner, .Menu-toggle__inner:before, .Menu-toggle__inner:after{
		background: $c-g400;
	}

	.PageHeader__nav-link {
		color: $c-g400;

		&:hover, &.is-active, &.is-open {
			color: $c-b700;
			text-decoration: none;
		}
	}

	.PageHeader__subnav-link {

		.Icon {
			color: $c-g400;
		}

		&:hover{
			color: $c-b700;
		}

		&:after {
			border-top-color: $c-g400;
		}

		&:hover:after {
				border-top-color: $c-b300;
		}
	}

	.PageHeader__logo {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 471.3 89.3'%3E%3Cg fill='%23071C26'%3E%3Cpath d='M95.4 23.3h15.8c15.3 0 28.2 6.5 28.2 24 0 15.4-12.6 23.7-26.8 23.7H95.4V23.3zm10.5 37.9h5.5c9.8 0 17.1-3.7 17.1-14.5 0-9.4-7.5-13.7-16.4-13.7h-6.2v28.2zM144.8 38.2h10.1v5.3h.1c2.2-4 5-6.1 9.4-6.1 1.1 0 2.4.1 3.4.3v9.2c-1.4-.4-2.8-.7-4.3-.7-7.7 0-8.6 4.4-8.6 11v13.7h-10.1V38.2zM202.1 65.3c-3.2 4.1-8.5 6.5-13.8 6.5-10.1 0-18.2-6.7-18.2-17.2 0-10.4 8.1-17.2 18.2-17.2 9.4 0 15.3 6.7 15.3 17.2v3.2h-23.4c.8 3.8 3.7 6.3 7.6 6.3 3.3 0 5.5-1.7 7.2-4l7.1 5.2zm-8.6-14.5c.1-3.4-2.6-6.2-6.2-6.2-4.4 0-6.9 3-7.1 6.2h13.3zM229.1 66.8h-.1c-2.2 3.5-6.3 4.9-10.4 4.9-6.1 0-11.6-3.5-11.6-10.1 0-11.3 13.7-11.5 22.1-11.5 0-3.6-3-5.9-6.5-5.9-3.3 0-6.1 1.5-8.2 3.9l-5.4-5.5c3.7-3.5 9.1-5.3 14.4-5.3 11.8 0 14.9 6 14.9 16.9v16.6H229v-4zm-2.5-10.2c-3.1 0-10 .3-10 4.7 0 2.4 2.6 3.6 4.8 3.6 4 0 7.7-2.1 7.7-6.1v-2.2h-2.5zM244.7 38.2h9.7v4.4h.1c1.3-2.6 4.6-5.3 9.6-5.3 4.6 0 8.3 1.9 10.1 5.9 2.4-4.2 5.5-5.9 10.4-5.9 8.9 0 11.6 6.3 11.6 14.2v19.3H286v-19c0-3-1.1-5.6-4.4-5.6-4.6 0-6.1 3.3-6.1 7.3v17.3h-10.1V53.6c0-2.4.1-7.3-4.5-7.3-5.3 0-6.1 4.1-6.1 8.3v16.3h-10.1V38.2zM302.5 23.3H313V41h20.4V23.3h10.5V71h-10.5V50.3H313v20.6h-10.5V23.3zM366.6 37.4c10.1 0 18.2 6.7 18.2 17.2 0 10.4-8.1 17.2-18.2 17.2s-18.2-6.7-18.2-17.2 8.1-17.2 18.2-17.2zm0 25.4c5 0 8.1-3.4 8.1-8.3s-3-8.3-8.1-8.3c-5 0-8.1 3.4-8.1 8.3 0 5 3.1 8.3 8.1 8.3zM407.9 47.8c-1.5-1.8-3.4-2.8-5.9-2.8-1.7 0-3.7.7-3.7 2.7 0 4.8 17 .7 17 13.2 0 8.3-8.1 10.8-15.1 10.8-4.6 0-9.6-1.1-12.9-4.4l6.1-6.8c1.9 2.3 4.1 3.6 7.1 3.6 2.3 0 4.6-.6 4.6-2.4 0-5.3-17-.8-17-13.3 0-7.7 6.9-11 13.7-11 4.3 0 9.1 1.1 12.1 4.3l-6 6.1zM442.5 46.3h-8.9v10.9c0 3.5.4 6.1 4.8 6.1 1.1 0 3.2-.1 4.1-.9v8.4c-2.2.8-4.7 1-7.1 1-6.7 0-11.9-2.8-11.9-9.9V46.3H417v-8.1h6.5v-9.7h10.1v9.7h8.9v8.1z'/%3E%3C/g%3E%3Cpath fill='%23071C26' d='M77.3 60c-4.9 2.7-10.5 4.2-16.5 4.1C43 63.7 29 49.4 29.3 32c.1-5.9 1.9-11.4 4.9-16-9.5 5.3-16 15.2-16.2 26.7-.4 17.3 13.7 31.7 31.4 32.1 11.8.2 22.1-5.7 27.9-14.8'/%3E%3Cpath fill='%230073EC' d='M51.3 14.6c-4.8 0-9.3 1.2-13.3 3.4-2.5 4.1-3.9 8.8-4.1 13.6-.3 15.1 12 27.6 27.3 27.9 4.6 0 9.8-1.1 13.8-3.3 2.4-4.1 3.8-8.9 3.8-14C79 27 66.6 14.6 51.3 14.6z'/%3E%3Cg%3E%3Cpath fill='%23071C26' d='M446 23.5c0-.5.1-1 .3-1.5.2-.5.5-.8.8-1.2.3-.3.7-.6 1.2-.8.4-.2.9-.3 1.4-.3.5 0 1 .1 1.4.3.4.2.8.4 1.2.8.3.3.6.7.8 1.2.2.5.3.9.3 1.5 0 .5-.1 1-.3 1.5-.2.4-.5.8-.8 1.2-.3.3-.7.6-1.2.8-.4.2-.9.3-1.4.3-.5 0-1-.1-1.4-.3-.4-.2-.8-.4-1.2-.8-.3-.3-.6-.7-.8-1.2-.2-.5-.3-1-.3-1.5zm.7 0c0 .4.1.9.2 1.2.2.4.4.7.6 1 .3.3.6.5 1 .7.4.2.8.2 1.2.2.4 0 .8-.1 1.2-.2.4-.2.7-.4 1-.7.3-.3.5-.6.6-1 .2-.4.2-.8.2-1.2 0-.4-.1-.9-.2-1.2-.2-.4-.4-.7-.6-1-.3-.3-.6-.5-1-.7-.4-.2-.8-.2-1.2-.2-.4 0-.8.1-1.2.2-.4.2-.7.4-1 .7-.3.3-.5.6-.6 1-.2.3-.2.7-.2 1.2zm1.6-2.2h1.6c1 0 1.5.4 1.5 1.2 0 .4-.1.7-.3.9-.2.2-.5.3-.8.3l1.2 1.9h-.7l-1.2-1.9h-.7v1.9h-.7l.1-4.3zm.6 1.9h1.1c.1 0 .3 0 .4-.1.1 0 .2-.1.3-.2.1-.1.1-.2.1-.4 0-.1 0-.3-.1-.4-.1-.1-.1-.2-.2-.2s-.2-.1-.3-.1H449l-.1 1.4z'/%3E%3C/g%3E%3C/svg%3E") no-repeat;

		&.PageHeader__logo--internal {
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 90 90'%3E%3Cpath fill='%23071C26' d='M73.9 60.3C69 63 63.3 64.5 57.3 64.4 39.6 64 25.5 49.7 25.8 32.3c.1-5.9 1.9-11.4 4.9-16-9.5 5.3-16 15.2-16.2 26.7-.4 17.4 13.8 31.7 31.5 32.1 11.7.2 22.1-5.7 27.9-14.8'/%3E%3Cpath fill='%230073EC' d='M47.9 14.9c-4.8 0-9.3 1.2-13.3 3.4-2.5 4.1-3.9 8.8-4.1 13.6-.3 15.1 12 27.6 27.3 27.9 4.6 0 9.8-1.1 13.8-3.3 2.4-4.1 3.8-8.9 3.8-14 .1-15.2-12.3-27.6-27.5-27.6z'/%3E%3C/svg%3E") no-repeat;
		}
	}
}

//Animation
@keyframes UnderlineEmphasis {
	0% {
	right: 100%;
	}

	100% {
	right: 0;
	}
}

@media screen and (min-width: $medium-breakpoint) {


	.PageHeader {
		padding: 1.75rem;
	}

	.PageHeader.menu-is-open .PageHeader__container, .PageHeader__container {
		display: flex;
		flex-flow: row nowrap;
	}

	.PageHeader__nav-link.is-active,.PageHeader__nav-link--active {

		&:before {
			content: "";
			position: absolute;
			left: 0;
			right: 0;
			bottom: 0;
			background: $c-b300;
			height: 2px;
			animation: UnderlineEmphasis 1s ease-in-out;
		}
	}

	.PageHeader.menu-is-open .PageHeader__nav, .PageHeader__nav {
		display: flex;
		margin: 0.5rem 0 0 0;

		li {
			margin-right: 2rem;
			margin-right: 2rem;
		}

		li:last-of-type {
			border: none;
		}

		.PageHeader__nav-link {
			display: inline-block;
			padding: 0;
			width: auto;
		}

	}

	.PageHeader__logo {
		position: static;
		flex-basis: 160px;
		margin: 0 2rem 0 0;
		flex-shrink: 0;
		order: unset;
		}

	.PageHeader__nav-link {
		border: none;
	}

	.Menu-toggle {
		display: none;
	}

	.PageHeader__subnav {
			margin: 0;
			position: static;
			flex-shrink: 2;

		li:nth-last-child(2) {
			margin-right: 0;
		}
	}
}