.management #skipNavigation:focus,
.management #skipNavigation:active{top:35px;}
.management2 #skipNavigation:focus,
.management2 #skipNavigation:active{top:70px;}

body>header {
    background:#fff;
	box-shadow: 0 4px 0 0 var(--navy);
    margin:0 auto;
    padding: 0;
    position: sticky;
    top: 0;
    width:100%;
    z-index: 10;
}

body.management>header {
    top: 35px;
}

body.management2>header {
    top: 70px;
}

body>header .wrap {
	display: flex;
	justify-content: space-between;
	max-width: 100%;
}

body>header>.wrap {
	align-items: center;
	padding: 0.75em 3vw;
	transition: ease all 200ms;
}

body>header #mainnav>.wrap {
	padding: 0 3vw;
}

body>header #product-matches .wrap {
	padding: 0.625em 3vw;
}

body>header #brand {
	border-radius: 8px;
	max-width: 22.3125em;
}

body>header #brand:focus {
	outline: 2px solid var(--bright-blue);
	outline-offset: 0.5em;
}

body.scroll>header #brand {
	max-width: 18.3125em;
}

body>header #brand img {
    display: block;
    height: auto;
	transition: var(--transition);
    width: 100%;
}

body>header #brand:is(:hover, :focus-visible) img {
	filter: grayscale(1);
	opacity: 0.75;
}


.search-autocomplete-window .wrap {
	display: flex;
	justify-content: flex-end;
}


#mainnav {
	background: #12477b;
	overflow: visible;
	position: relative;
}

#mainnav ul {
  margin: 0;
  padding: 0;
  text-align: center;
}

#mainnav li {
	display: inline-block;
	position: relative;
}

#mainnav a {
  color: #FFF;
  display: inline-block;
	line-height: 1;
	padding: 1em;
	text-decoration: none;
}

#mainnav .wrap>ul {
	border-left: 1px solid var(--navy);
	display: flex;
}

#mainnav .wrap>ul>li {
	align-items: center;
    border-right: 1px solid var(--navy);
    display: grid;
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
	justify-items: center;
    position: relative;
}

#mainnav .wrap>ul>li.has-megamenu {
    position: static;
}

#mainnav .wrap>ul>li>a{
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
    line-height: 2.813em;
    padding: 0 1.25em;
	width:100%;
}

#mainnav .wrap>ul>li:is(:hover, :focus-within)>a {
	background: var(--navy);
	color: #FFF;
}

#mainnav .wrap>ul>li.on>a {
	background: #FFF;
	color: #c0151b;
}

/* Accessible dropdowns */
#mainnav .wrap>ul>li>button {
	background: transparent;
	border: 0;
	grid-column: 1 / span 1;
	grid-row: 1 / span 1;
	height: 2rem;
	padding: 0;
	pointer-events: none;
	position: relative;
	top: 0.75em;
	width: 2rem;
}

#mainnav .wrap>ul>li>button:before {
	background: url('/images/icons/misc/chevron-down.svg') no-repeat center / contain;
	content: '';
	height: .75rem;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
	opacity: 0.5;
}

#mainnav .wrap>ul>li>button:focus:before {
	outline: 2px solid var(--bright-blue);
	outline-offset: -2px;
}

#mainnav .wrap>ul>li:is(:hover, :focus-within)>button:before {
	opacity: 1;
}

#mainnav .wrap>ul>li.on>button::before {
	filter: brightness(0);
}

/* Drop-down menu */
#mainnav li > div {
  background: var(--navy);
  border-radius: 0 0 0.25em 0.25em;
  left:0;
  opacity: 0;
  padding: 1em 0.25em;
  position: absolute;
  top: -200vh;
  width: 14em;
  visibility: hidden;
}

/* fade out */
#mainnav li:not(.expand) > div {
	transition:
		opacity .2s ease-out 0.25s,
		visibility .2s ease-out 0.25s,
		top 0s linear 0.7s;
}

#mainnav li:hover > div,
#mainnav .wrap>ul>li.tapped > div,
#mainnav .wrap>ul>li>a:focus + div,
#mainnav .wrap>ul>li.expand>div {
    opacity: 1;
    top: 100%;
	visibility: visible;
}

/* fade in */
#mainnav .wrap>ul>li:is(:hover, .expand)>div {
    transition:
		opacity .2s ease-in .3s,
		visibility .2s ease-in 0s,
        top 0s linear .3s;
}

#mainnav li ul li {
    display: block;
    width: 100%;
}

#mainnav ul li ul li a {
    background: none;
    border-radius: 0.1em;
    color: #fff;
    display: block;
    font-size: 0.9em;
    font-weight: 400;
    line-height: 1.1em;
    line-height: 1.1em;
    padding: 0.5em;
    padding: .3em .5em;
    text-align: left;
    width: 100%;
}

#mainnav li ul li a:is(:hover, :focus) {
	background: #FFF;
	color: var(--navy);
}

#mainnav li:not(.has-megamenu) ul ul {
	display: none;
}

/* Megamenu: Products */
#mainnav .wrap>ul>li.has-megamenu div.megamenu {
	background: #efefef;
	border-radius: 0;
	box-shadow: 0 100vh 0 100vh rgba(7, 34, 64, 0.86);
	max-height: calc(100vh - var(--header-offset) - 13.75em);
	overflow: auto;
	width: 100%;
}

#mainnav .wrap>ul>li.has-megamenu div.megamenu > ul {
    display: grid;
    gap: 1em 0.5em;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    padding: 0.5em 3vw;
}

#mainnav .wrap>ul>li.has-megamenu div.megamenu > ul > li {
	max-width: 240px;
}

#mainnav .wrap>ul>li.has-megamenu div.megamenu li a {
	color: var(--blue);
    font-size: 1em;
	font-weight: 700;
}

#mainnav .wrap>ul>li.has-megamenu div.megamenu li li a {
	color: var(--navy);
    font-size: 0.875em;
	font-weight: 400;
	padding-left: 1.75em;
	position: relative;
}

#mainnav .wrap>ul>li.has-megamenu div.megamenu li li a:before {
	color: #898989;
	content: "-";
	position: absolute;
	left: 1em;
}




/* ancillary */
#ancillary {
    align-items: flex-end;
    display: flex;
	flex-direction: column;
    gap: 0.5em 1em;
    position:relative;color:#ccc;
    text-align:right;
	transition: ease all 200ms;
}

.scroll #ancillary {
    gap: 0;
}


#ancillary nav, #ancillary .cartInfo {display: inline-block; vertical-align: middle; transition: ease all 200ms;}
#ancillary li{float:left; border-right:1px solid #9C9C9C; line-height: 100%}
#ancillary li:last-child{border:0}
#ancillary li a {font-size: 0.875em; font-weight:500; color:#666666; display: inline-block; margin: 0 0.75em}
#ancillary a {text-decoration:none;-webkit-text-size-adjust:none}
#ancillary a:is(:hover, :focus-visible) {color:#c0151b}
#ancillary li.on a {text-decoration:none;color:#c0151b}
#ancillary .cartInfo a {float: left; font-size: 1em; background: #efefef; position: relative; color:#000; display: inline-block; vertical-align: middle; line-height:2.813em; text-shadow: 0 1px 0 #fff; padding:0 1em; border-radius: 3px 0 0 3px}
#ancillary .cartInfo a:is(:hover, :focus-visible) {background:var(--light-blue); color:var(--navy); text-shadow:none}
#ancillary .cartInfo a+a {margin-left:1px;border-radius: 0 3px 3px 0; padding: 0 0.4em 0 2.5em}
#ancillary .cartInfo a+a:before {-webkit-transition:ease all 150ms;transition:ease all 150ms; content: ""; opacity:0.8; -webkit-filter: grayscale(1);filter: grayscale(1); position: absolute; top:0; left:1em; width:1em; height: 100%; background:  url(/images/navigation/cart.svg) no-repeat center; display:block;}
#ancillary .cartInfo a+a:is(:hover, :focus-visible):before {opacity:1; -webkit-filter: grayscale(0);filter: grayscale(0)}
#ancillary .cartInfo a span {margin-left:0.6em; position: relative; text-shadow:none;display: inline-block; background: #888888; border-radius: 3px; color:#fff; line-height:100%; padding:0.3em 0.55em}
#ancillary .cartInfo a:is(:hover, :focus-visible) span {background: var(--navy);}
#ancillary .cartInfo a span:after, #ancillary .cartInfo a span:before {-webkit-transition: ease all 150ms;transition: ease all 150ms;	right: 100%;top: 50%;	border: solid transparent;	content: " ";	height: 0;	width: 0;	position: absolute;	pointer-events: none;}
#ancillary .cartInfo a span:after {border-color: rgba(136, 183, 213, 0);border-right-color: #888888;	border-width: 5px;	margin-top: -5px;}
#ancillary .cartInfo a span:before {border-color: rgba(194, 225, 245, 0);border-right-color: #888888;border-width: 0.313em;	margin-top: -0.313em;}
#ancillary .cartInfo a:is(:hover, :focus-visible) span:after, #ancillary .cartInfo a:is(:hover, :focus-visible) span:before {border-right-color:var(--navy)}
#ancillary > a {font-size: 1.813em; cursor: text; position: relative; padding: 0.25em 0 0.25em 1em; color: #c0151b; font-weight: 700; display: inline-block; vertical-align:middle; background:url(/images/navigation/phone.svg) no-repeat center left;
	transition: ease all 200ms;
	max-height: 2.5rem;
	overflow: hidden;
}
#ancillary > a:focus-visible {text-decoration: underline;}
.scroll #ancillary > a {
	max-height: 0;
	padding-bottom: 0;
	padding-top: 0;
}

body>header .search {
	bottom: 0;
	height: 2.813em;
	line-height: 2.813em;
	position: absolute;
	right: 3vw;
	transition: ease all 200ms;
}

body.management>.search {
	top: calc(var(--header-offset) + 35px);
}

body.management2>.search {
	top: calc(var(--header-offset) + 70px);
}

.home h1 {
	border-top: 1px solid rgba(255,255,255,0.5);
}

.home .categoryList {
    gap: clamp(1em, 0.682em + 1.59vw, 1.875em);
	margin-bottom: 2.5em;
}

.home .categoryList li {
    width: calc(25% - 1.5em);
}

#CustomerEdit td:first-child {
	line-height: 2.1875em;
}


.fatFooter > div:first-of-type, .fatFooter > .badges {width: 15%;}
.fatFooter > div.middle {width: 40%;}
.fatFooter > div.reviews {width: 30%;}






@media screen and (max-width: 1350px) {
	body > header .search {
		right: 1em;
	}
	body > header #brand {
		max-width: 18em;
	}
	#mainnav {
		padding: 0;
	 }

	body > header .search {
		left: 21.063em;
		top: 3.6875em;
		width: calc(100vw - 37.875em);
	}

	body.scroll > header .search {
		top: 0.75rem;
    	width: calc(100vw - 51.875em);
	}

	body.management > .search {
		top: calc(var(--header-offset) - 3.5em + 35px);
	}
	body.management2 > .search {
		top: calc(var(--header-offset) - 3.5em + 70px);
	}

	body > header .search input {
		background: #efefef;
		color:#000;
		border-radius: 3px;
		width: 100%;
	}
	    body > header .search input::-webkit-input-placeholder {color: #666;}
        body > header .search input::-moz-placeholder {color:#666;}
        body > header .search input:-ms-input-placeholder {color: #666;}
        body > header .search input:-moz-placeholder {color: #666;}
	body > header .search input:focus {
		background: #efefef;
		color:#000;
		box-shadow: inset 0 0 0 1px var(--light-blue);
	}
	body > header .search button {
		filter: brightness(0);
	}
	.search-autocomplete-window {
		top: var(--header-offset);
	}
	body > header #product-matches .wrap {
		padding-right: 17em;
	}
	#mainnav .wrap > ul {
		display: flex;
		width: 100%;
	}
	#mainnav .wrap > ul > li {
		flex: 1 1 auto;
	}
	#mainnav .wrap > ul > li > a {
		display: block;
		font-size: 0.8em;
		padding: 0;
		text-align: center;
	}
	#mainnav .wrap > ul > li > button {
		top: 0.6em;
	}
	#mainnav .wrap > ul > li li a {
		font-size: 0.8em;
	}

	#mainnav .wrap>ul>li:last-child > div {
		left: auto;
		right: 0;
	}
	
	#mainnav .wrap > ul > li.has-megamenu div.megamenu {
		max-height: calc(100vh - var(--header-offset) - 8.75em);
	}

	#mainnav .wrap > ul > li.has-megamenu div.megamenu li a {
		font-size: 0.8em;
	}

	#mainnav .wrap > ul > li.has-megamenu div.megamenu li li a {
		font-size: 0.7em;
	}

     .twoCol.login .create-account .createAccountBtn {text-align: center}
     .twoCol.login .create-account .createAccountBtn .button {display: block}
}

@media screen and (max-width:1055px) {
     .categoryList a {width:30%; margin: 0 3.8% 3.8% 0}
     .categoryList a:nth-child(3n+3) {margin-right: 0}
     .categoryList a:nth-child(4n+4) {margin-right: 3.8%}
     .interior .categoryList a {width:50%; margin:0}
     main>div>aside {font-size: 0.9em}

	.home .categoryList li {
		width: calc(33% - 1.5em);
	}
	body.scroll #ancillary nav {
		opacity: 0;
		pointer-events: none;
	}
	body.scroll > header .search {
		width: calc(100vw - 37.875em);
	}

}

@media screen and (max-width:965px) {
     #mainnav div>ul {display: table-row}
     .product, .buy {width: 100%}
}

@media screen and (max-width:900px) {
	body > header #brand,
	body.scroll > header #brand {
		max-width: 14em;
	}
     body > header .search,
     body.scroll > header .search {
		left: 16em;
		width: calc(100% - 32.125em);
	 }
	.search-autocomplete-window .wrap {
    	justify-content: center;
    	padding: 0;
  	}
}