@media only screen {
	.panel-header {
		z-index: 10;
		/* do not set overflow hidden here or the dropdowns won't work */
	}

	.panel-header .logo-wrapper a {
		position: relative;
		display: block;
		background-repeat: no-repeat;
		background-size: 100%;
		background-position: top left;
		z-index: 1;
	}
	
	.panel-header .header-nav {
		position: relative;
		width: 100%;
	}
}

@media only screen and (max-width: 64em) {
	.panel-header {
		position: fixed;
		top: 0;
		width: 100%;
		height: 120px;
		background-color: black;
		overflow: hidden;
		/*transition: height 500ms linear;*/
	}
	
	body.menu-open {
		overflow: hidden;
	}

	body.menu-open .panel-header {
		height: 100vh;
		background-color: #2a2a2a;
		overflow-y: scroll;
		z-index: 999;
	}

	.panel-header .header-top {
		display: none;
	}

	.panel-header .header-bottom {
		position: relative;
		display: flex;
		flex-direction: column;
		width: 100%;
	}
	
	.panel-header .mobile-wrapper {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 120px;
	}

	/* menu icon */
	.panel-header .mobile-menu {
		position: relative;
		display: flex;
		justify-content: center;
		flex-basis: 80px;
		z-index: 1;
	}
	.panel-header .mobile-menu .mobile-toggle {
		position: relative;
		display: flex;
		justify-content: flex-end;
		align-items: flex-start;
		padding: 10px;
	}
	.panel-header .mobile-menu .menu-bar-wrapper {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
	}
	.panel-header .mobile-menu .menu-bar-wrapper span {
		background-color: white;
	}
	.panel-header .mobile-menu .menu-bar-wrapper:hover span,
	.panel-header .mobile-menu .menu-bar-wrapper:focus span {
		background-color: #b6a578;
	}
	.panel-header .mobile-menu .menu-bar {
		width: 28px;
	}
	.panel-header .mobile-menu .bar-thick {
		height: 3px;
	}
	.panel-header .mobile-menu .bar-thin {
		height: 1px;
		margin: 7px 0;
	}

	.panel-header .header-bottom .logo-wrapper {
		position: relative;
		display: flex;
		flex-basis: calc(100% - 160px);
		justify-content: center;
		align-items: flex-start;
		margin: 0;
		padding: 0.5em;
		z-index: 2;
	}
	.panel-header .header-bottom .logo-wrapper a {
		width: 159px;
		height: 75px;
		background-image: url(/includes/public/assets/images/logo-tagline-white.png);
	}

	/* search icon */
	.panel-header .mobile-search {
		display: flex;
		justify-content: center;
		flex-basis: 80px;
		position: relative;
		z-index: 1;
	}
	.panel-header .mobile-search a {
		display: block;
		padding: 10px;
		font-size: 1.6em;
		color: white;
	}
	.panel-header .mobile-search a:hover {
		color: #b6a578;
	}

	.panel-header .header-nav {
		position: relative;
		padding: 1em 0.5em 2.5em;
	}
	body.alert-open.menu-open .panel-header .header-nav {
		padding-bottom: 150px;
	}

	body .panel-header .search-box {
		display: none;
	}
}

@media only screen and (min-width: 64.063em) {
	/* the header has a black background when there's no header slideshow or hero image */
	.panel-header {
		position: fixed;
		width: 100%;
		background-color: black;
		transition: opacity 500ms linear;
		opacity: 0;
	}

	.panel-header.loaded {
		opacity: 1;
	}

	body.has-hero .panel-header {
		background-color: transparent;
	}

	.panel-header .header-top {
		position: relative;
		display: flex;
		justify-content: center;
		background-color: black;
		border-bottom: 1px solid white;
	}

	.panel-header .nav-wrapper {
		display: flex;
		flex-direction: row;
		align-items: center;
		flex-basis: 42%;
		justify-content: flex-end;
		height: 40px;
		overflow: hidden;
	}

	.panel-header .sites-nav,
	.panel-header .search-box {
		width: 100%;
		padding: 0 1em;
	}

	.panel-header .header-top .logo-wrapper {
		position: relative;
		height: 0; /* this allows the logo to still be displayed without pushing the main nav down */
	}

	/* this covers the underline behind the logo */
	.panel-header .header-top .logo-wrapper .logo-background {
		position: absolute;
		top: 0;
		left: -15px;
		width: 216px;
		height: 41px;
		background-color: black;
	}

	.panel-header .header-top .logo-wrapper a {
		top: 12px;
		width: 208px;
		height: 88px;
		background-image: url(/includes/public/assets/images/logo-shadow.png);
	}

	.panel-header .sites-nav ul {
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
		height: 40px;
		padding: 0;
		overflow: hidden;
	}

	.panel-header .header-bottom {
		position: relative;
	}

	.panel-header .header-bottom:after {
		content: '';
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 114px;
		background-color: black;
		z-index: 0;
		pointer-events: none;
	}

	body.has-hero .panel-header .header-bottom:after {
		height: 200px;
		background: linear-gradient(to bottom, black 30px, rgba(0,0,0,0.1) 158px, transparent 100%);
		opacity: 0.8;
		transition: height 250ms linear, opacity 1000ms linear;
	}

	body.has-hero.scroll-down .panel-header .header-bottom:after {
		height: 114px;
		background: black;
		opacity: 1;
		transition: none; 
	}

	.panel-header .header-bottom .logo-wrapper a {
		display: none;
	}

	.panel-header .nav-top {
		display: flex;
		justify-content: center;
		top: 58px;
	}

	/* search icon */
	.panel-header .mobile-search {
		display: none;
	}

	.panel-header .search-box {
		display: block;
		position: relative;
	}

	.panel-header .mobile-menu {
		display: none;
	}

	.panel-header .header-logo .controls-wrapper {
		display: none;
	}

	.panel-header .mobile-menu {
		display: none;
	}
}

@media only screen and (min-width: 90em) {
	.panel-header .nav-wrapper.right-wrapper {
		justify-content: flex-start;
	}
	.panel-header .sites-nav,
	.panel-header .search-box {
		padding: 0;
	}
	.panel-header .nav-wrapper {
		flex-basis: 592px;
	}
	.panel-header .sites-nav ul {
		justify-content: flex-start;
	}
	/* this covers the underline behind the logo */
	.panel-header .header-top .logo-wrapper .logo-background {
		top: 39px;
		left: -67px;
		width: 268px;
		height: 2px;
	}
}

/* internet explorer rules */
@media screen and (min-width: 64.063em) and (-ms-high-contrast: none) {
	.panel-header .sites-nav ul {
		top: -17px;
	}
}
@media screen and (min-width: 75em) and (-ms-high-contrast: none) {
	.panel-header .sites-nav ul {
		top: 0;
	}
}

/* edge rules */
@supports (-ms-ime-align: auto) {
	@media screen and (min-width: 64.063em) {
		.panel-header .sites-nav ul {
			top: -17px;
		}
	}
}
@supports (-ms-ime-align: auto) {
	@media screen and (min-width: 75em) {
		.panel-header .sites-nav ul {
			top: 0;
		}
	}
}