.header {
	position:fixed;
	background-color:var(--header-bg);
	color: var(--header-content);
	z-index: 10;
	width:100%;
}
.banner {
	max-width: var(--header-width);
	padding: 20px var(--header-padding);
	margin: auto;
	display:grid;
	column-gap:60px;
	grid-template-areas:
		"logo topright";
	grid-template-columns:max-content 1fr;
}
.logo {
	grid-area:logo;
	align-self:center;
}
.logo img {
	display:block;
	max-width:100%;
	transition: max-width 1s ease;
}
.topRight {
	grid-area:topright;
	text-align:right;
	position:relative;
	transition: all 1s ease;
	display: grid;
	grid-template-columns: 1fr 240px;
	align-items: center;
	gap: 32px;
}

.user {
	display: flex;
	gap: 45px;
}
.topRight a {
	text-decoration: none;	
}
.topRight a:not(.dynMinicartSummary a) {
	color: var(--white);
	display: inline-block;
	width: 50px;
	font-size: 0.813rem;
	text-align: center;
}

.user div p {
	margin-top: 6px;
	margin-bottom: 0;
}

.user div {
	text-align:center;
}

.topRight .headerPhone {display:none;}


.topRight .linkButton {
	background-color:var(--topRight-button);
	color:var(--topRight-buttonText);
	border:var(--topRight-buttonBorder);
}
.topRight .linkButton:hover {
	background-color:var(--topRight-buttonHover);
	color:var(--topRight-buttonHoverText);
}

#miniCart {
	display:inline-block;
	color:#ffffff;
	position:relative;
}
@media (min-width:861px) {
	#miniCart span {display:none;}
	#miniCart a:nth-of-type(2){
		text-decoration:none;
		color: var(--black);
		position: absolute;
		right: -5px;
		top: -10px;
		font-size: 0.75rem;
		z-index: 10;
		background-color: var(--yellow);
		width: 25px;
		line-height: 25px;
		border-radius:50%;
		text-align:center;
	}
	#miniCart:hover a:nth-of-type(2) {}
}

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:284px;}



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

.header-barContain {
	background-color:var(--black);
	color: var(--white);
	font-weight: 700;
	padding: 13px 0;
	transition: all ease 1s;
}
.shrink .header-barContain {
	font-size: 0px;
	padding:0;
}

.headerBar {
	max-width: 1632px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	text-align: center;
	padding: 0 16px;
}
.headerContent {grid-column: 2;}
.headerPhone {text-align: right;grid-column: 3;}

.headerBar a {color:var(--white);text-decoration:none;font-weight:400;}

#Layer_2 {
	width: 32px;
	height: 28px;
}

.headerCol {
	padding: 6px 0;
}

.headerCol img {
	position: relative;
	top: 4px;
	margin-right: 16px;
}

.search {
	width:100%;
	display:inline-block;
	text-align:right;
	max-width: 580px;
	top: 4px;
}
.search .keyword{
	width:calc(100% - 55px);
	line-height:45px;
	padding:0 0 0 20px;
	font-family: 'Source Sans Pro', sans-serif;
	font-size:0.875em;
	color:var(--mid-grey);
	border-left: 1px solid var(--light-grey);
	border-top: 1px solid var(--light-grey);
	border-bottom: 1px solid var(--light-grey);
	border-right: none;
	border-radius: 5px 0 0 5px;
	max-height: 45px;
}
.search input[type=image]{
	vertical-align:top;
	height:45px;	
	background-color:var(--white);
	padding:12px 14px 13px 14px;
	border-top-right-radius:5px;
	border-bottom-right-radius:5px;
	-webkit-appearance:none;
	border-right: 1px solid var(--light-grey);
	border-top: 1px solid var(--light-grey);
	border-bottom: 1px solid var(--light-grey);
}	

/** offset for targets to allow for header **/

html {
    scroll-behavior: smooth;
}



:target::before {
  content: "";
  display: block;
  height: 110px; /* fixed header height*/
  margin: -110px 0 0; /* negative fixed header height */
}