.header {
	position:fixed;
	background-color:var(--header-bg);
	color: var(--header-content);
	z-index: 10;
	width:100%;
	border-bottom: var(--header-underline);
}
.banner {
	max-width: var(--header-width);
	padding: 12px var(--header-padding);
	margin: auto;
	text-align: center;
}
.logo {
	display: inline-block;
	margin: auto;
}
.logo img {
	display:block;
	max-width:100%;
	transition: max-width 1s ease;
}


nav {
	background-color:var(--nav-bar);		
	width:100%;
	z-index: 100;
}
.topnav {
	max-width: var(--header-width);
	padding: 0 var(--header-padding);
	margin: auto;
}
.main {padding-top:139px;}

.header.shrink .banner {
	padding: 6px var(--header-padding);
}
	
.header.shrink .logo img {max-width:70%;}

/** offset for targets to allow for header **/
:target::before {
  content: "";
  display: block;
  height: 102px; /* fixed header height*/
  margin: -102px 0 0; /* negative fixed header height */
}