/* Header */
header {
	z-index: 9999;
}
.header-container {
	border-bottom: 2px solid var(--black);
	background-color: var(--white);
	display: grid;
	gap: 0;
	pointer-events: all;
}
header.sticky {
	position: sticky;
	top: 0;
	pointer-events: none;
}
.dnnEditState header.sticky {
	position: relative;
	z-index: auto;
}
.skip-link {
    position: absolute;
    left: 0;
    top: 0;
    border: 1px solid var(--black);
    padding: .5rem;
    transform: translateY(-100%);
    transition: transform 0.3s;
    background-color: var(--TNW-Yellow);
	color: var(--black);
	text-decoration: none;
}
.skip-link:hover, .skip-link:active {
	background-color: var(--TNW-Yellow);
}
.skip-link:focus {
    transform: translateY(0%);
}

/* Header Extra 0 */
#headerExtra0 {
	grid-column-start: 1;
	grid-column-end: 3;
	grid-row-start: 1;
	grid-row-end: 2;
	padding: 2rem 1rem 0 2rem;
	background-color: var(--white);
}

/* Header Logo */
#logo {
	grid-column-start: 1;
	grid-column-end: 2;
	grid-row-start: 2;
	grid-row-end: 3;
	padding: 2rem 1rem 2rem 2rem;
	background-color: var(--white);
}
#logo a {
    display: block;
	max-width: 120px;
}
#logo a:hover,
#logo a:active {
	background-color: transparent;
}
#logo a img {
	width: 100%;
}

#headerTopBar {
	grid-column-start: 2;
	grid-column-end: 3;
	grid-row-start: 2;
	grid-row-end: 3;
	justify-self: end;
	display: flex;
	align-items: center;
	padding: 2rem 2rem 2rem 1rem;
}

@media (min-width: 992px) {
	.header-container {
		border-bottom-width: 6px;
		padding: 0;
	}
	#headerExtra0 {
		grid-column-end: 2;
		background-color: var(--LightGray);
		padding: 1.25rem 2rem;
	}
	#logo {
		padding: 1.25rem 2rem;
		grid-column-end: 3;
		grid-row-start: 2;
		grid-row-end: 3;
		justify-self: stretch;
		align-self: center;
	}
	#logo a {
		max-width: 200px;
		margin: 0 auto;
	}
	#headerTopBar {
		background-color: var(--LightGray);
		padding: 1.25rem 2rem;
		grid-column-start: 2;
		grid-column-end: 3;
		grid-row-start: 1;
		grid-row-end: 2;
		justify-self: stretch;
		display: flex;
		justify-content: flex-end;
	}
}

@media (min-width: 1200px) {
	#logo {
		padding: 4rem;
		transition: var(--stickyHeaderTransition);
	}
	#logo a {
		max-width: 283px;
		transition: var(--stickyHeaderTransition);
	}
	#headerExtra0,
	#headerTopBar {
		padding: 2rem 4rem;
		transition: all .2s ease-in-out;
		transition: var(--stickyHeaderTransition);
	}
	header.sticky #headerExtra0,
	header.sticky #headerTopBar {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
	}
	header.sticky #logo {
		grid-column-end: 2;
		justify-self: start;
		padding: 2rem 2rem 2rem 4rem;
		display: inline;
	}
	header.sticky #logo a {
		max-width: 200px;
		max-width: 120px;
		margin: 0;
	}
}