header.header {

}

header.header.fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	background: #fff;
	z-index: 100;
}

header.header.fixed ~ main {
	padding-top: var(--fixed-header-spacing);
}

header.header .header-shortcuts {
	position: absolute;
	top: 0;
	z-index: 9999;
}

header.header .header-shortcuts a {
	position: absolute;
	display: inline-block;
	top: -500px;
	left: 0;
	width: 1px;
	height: 1px;
	overflow: hidden;
	overflow: clip;
	padding: 1em;
	margin: 0.5em;
	color: #00f;
	background: #fff;
	border: solid 1px #000;
	transition: 0s;
}

header.header .header-shortcuts a:focus {
	position: static;
	width: auto;
	height: auto;
}

header.header .header-main {
	transition: .2s ease;
	padding: 1em 0 0.5em;
}

header.header.fixed .header-main {
	box-shadow: 0px 25px 50px -12px rgba(0, 0, 0, 0.14);
}

header.header .header-main .container {
	display: grid;
	grid-template-columns: 200px auto;
	max-width: var(--layout-content-width);
	margin: 0 auto;
	padding: 0 1.5em;
	justify-content: space-between;
}

header.header .header-logo {
	display: flex;
	align-items: center;
}

header.header .header-logo img {
	display: block;
	width: 100%;
}

header.header .header-utility {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	padding-left: 0;
	margin-bottom: 1em;
}

header.header .site-title {
	pointer-events: none;
	clip: rect(1px, 1px, 1px, 1px);
	position: absolute;
	font-size: 1rem;
	margin: 0;
}

@media (pointer: coarse) and (hover: none) {
	header.header button.header-menu {
		display: block;
	}
}