@charset "UTF-8";
/* Web Solutions 4.0 Compatible */

:root {
	--ws-grid: minmax(.5em,1fr) [wrap-start] repeat(2,minmax(0,var(--ws-column-width))) [wrap-end] minmax(.5em,1fr);
}

body {
	background: #FFF;
}

body.slideNav {
	overflow: hidden;
}

/* HEADINGS ------------------------------ */
h1,
.product-detail h1,
.pageHeader h1 {
	font-size: 1.75rem;
}

h2 {
	font-size: 1.45em
}

h3 {
	font-size: 1.3em
}

h4, th {
	font-size: 1.2em
}

h5 {
	font-size: 1.1em
}

h6 {
	font-size: 1.0em
}

.intro {
	font-size: 1.25em;
}

.content > h1 {
	text-align: center;
}
/* HEADER ------------------------------ */
body>header {
  background: #FFF;
  display: contents;
  position: relative;
  z-index: 1;
}

body>header:before {
  background-color: #000;
	content: '';
	display: block;
  height: 100vh;
	left: 100vw;
  opacity: 0;
  position: fixed;
	top: 0;
	transition: left 0ms ease 200ms, opacity 200ms ease;
  width: 100vw;
  z-index: 3;
}

body.slideNav>header:before {
	left: 0;
  opacity: .5;
  transition: left 0ms ease 0ms, opacity 200ms ease;
}

#brand {
	display: block;
	margin: 0 auto;
	max-width: 15em;
	padding: 1em 0;
}
#brand img {
	display: block;
	margin: 0 auto;
}

#navContainer {
  background-color: #333;
  bottom: 0;
  left: 100%;
  max-height: 100vh;
  overflow: auto;
  position: fixed;
  top: 0;
  transition: left 200ms ease;
  width: 75%;
  z-index: 11;
  -webkit-overflow-scrolling: touch;
}

body.slideNav #navContainer {
	left: 25%;
}

#navContainer nav {
	display: inline;
}

#navContainer ul {
	display: block;
	margin: 0;
	padding-left: 0;
	width: 100%;
}

#navContainer li {
  border-top: 1px solid rgba(255,255,255,0.125);
	display: block;
	position: relative;
  width: 100%;
}

#navContainer li li {
	border: 0;
}

#navContainer :is(a, .menu) {
	color: #FFF;
  display: block;
	line-height: 2.75em;
  padding: 0 1rem;
	width: 100%;
	text-transform: uppercase;
	font-weight: 700;
}

#navContainer li.on a {
  color: #FFF;
	background-color: var(--ws-red);
}

#navContainer li.open {
	background-color: #000
}

#navContainer li>span {
	display: block;
  height: 2.75em;
	position: absolute;
	right: 0;
	top: 0;
  width: 2.75em;
}

#navContainer ul ul {
  font-size: .8em;
  height: 0;
  overflow: hidden;
  transition: var(--ws-transition);
}

#navContainer :is(#mainnav, #ancillary) ul ul a {
	padding-left: 2rem;
}

#navContainer ul ul li.on a {
	background-color: var(--link-color-hover);
}

#navContainer li>span::before,
#navContainer li>span::after {
  background-color: #fff;
	content: '';
	display: block;
	height: 0.0625rem;
	left: 50%;
	position: absolute;
	top: 50%;
	transform-origin: center center;
	transition: transform .2s ease;
	width: 50%;
}

#navContainer li>span::before {
	transform: translate(-50%, -50%) rotate(90deg);
}

#navContainer li>span::after,
#navContainer li.open > span:before {
	transform: translate(-50%, -50%) rotate(0deg);
}


/* ANCILLARY ------------------------------ */
#ancillary {
	display: block;
}

#ancillary .search {
  border-top: 1px solid rgba(255,255,255,0.125);
	display: block;
	overflow: auto;
	padding: 1rem;
}

#ancillary .search input[type="text"] {
	width: calc(100% - 2.1875rem);
}

#ancillary .search input[type="submit"] {
	padding-inline: .5em;
	width: 6.5rem;
}
#ancillary .search label {
	left: 2rem;
}
#ancillary .made-in-usa {
	position: absolute;
	color: #FFF;
	left: 1rem;
	bottom: 1rem;
}

/* MOBILE NAV ------------------------------ */
#mobilenav {
  align-items: center;
  background-color: var(--ws-red);
  display: flex;
  justify-content: center;
  position: sticky;
  text-align: center;
  top: 0;
  width: 100%;
  z-index: 10;
}

#mobilenav :is(a, span) {
  color: #FFF;
  flex: 1 1 auto;
  line-height: 2.25;
  text-transform: uppercase;
  font-weight: 700;
}

#mobilenav a {
	border-right: 1px solid #fff;
}

#mobilenav span svg {
	fill: #FFF;
	pointer-events: none;
	position: relative;
	top: .25em;
	width: 1em;
}



/* MAIN ------------------------------ */
.pageHeader {
	padding: 2rem 1rem;
}

.pageHeader .triangles:before {
	bottom: -14px;
	clip-path: polygon(0 calc(100% - 15px), 100% calc(100% - 15px), 100% 100%, 0% 100%);
}

.pageHeader .triangle-down {
	display: none;
}

.twoCol, .threeCol, .resCol {
	columns: auto;
  column-rule: 1px outset rgba(0,0,0,.15);
	column-width: 13em;
}

.content ul li {
	padding-left: 1.5em;
}

.formTable, .formTable table {
  display: block;
	width: 100%;
}

.formTable tbody {
	display: block;
}

.formTable tr {
	display: block;
}

.formTable td {
	display: block;
	padding: 0;
  width: 100%;
}

.formTable :is(input:is([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"]), textarea) {
	margin-bottom: 1em
}

.formTable table td + td {
	padding-left: 0 !important;
}

.photoright {
	margin: 0 0 .75em 1em;
}

.photoleft {
	margin: 0 1em .75em 0;
}

/* HOME -------------------------------- */
.hero h1 {
	font-size: clamp(2.5rem, 1.8023rem + 3.4884vw, 3.4375rem);
	width: calc(100% - 3rem);
}

.home .hero button.pause {
	bottom: clamp(4em, 3.538em + 2.05vw, 4.5em);
	right: clamp(0.5em, 0.038em + 2.05vw, 1em);
}

.home h2:not(.featured-products-heading) {
	font-size: clamp(1.75rem, 1.3779rem + 1.8605vw, 2.25rem);
}
.home p {
	font-size: 1em;
}
main .tools-by-trade li .learn-more {
	clip-path:polygon(0px 30px, 100% 61%, 100% 100%, 0% 100%)
}
.featured-products ul, .tools-by-trade .wrap, :is(.product-detail, .product-category) .products {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 1em;
}
main :is(.products, .featured-products) li a {
	padding:0 0.75em 3em;
}
main :is(.featured-products) li a {
	padding-top:1em;
}
main :is(.products, .featured-products) li a img {
	aspect-ratio: 1/1;
	object-fit: contain;
	object-position: center;
}
main :is(.products, .featured-products) li a .title {
	font-size: 0.875rem;
	display:  block;
	line-height: 1.25em;
}
:is(.products, .featured-products) li .learn-more {
	padding: 0.5em 0.75rem;
	font-size: 0.875rem;
	clip-path:none;
}
.tools-callout:before {
	height: 9rem;
	width: 45%;
}
.tools-callout:after {
	height: 8.125rem;
	width: 45%;
}
.tools-by-trade li .learn-more {
	padding: 4.625em 1.25em 1.0625em;
}
.tools-by-trade.tools-flex li {
	width: calc(50% - 0.9063em);
}
.featured-tool {overflow: hidden;}
.featured-tool img {
	right: 0;
	bottom: -36%;
	transform: scaleX(-1);
}
.custom-tool .button-logo {
	align-items: center;
	justify-content: center;
}
.custom-tool .wrap {
	padding-bottom: 4.5rem;
}
.custom-tool .split-callout-left img {
	margin-top: 2rem;
}
.custom-tool .hexagon-background {
	position: absolute;
	width: 90%;
	height: 73vw;
	bottom: 4rem;
}
.custom-tool .hexagon-right:before, .custom-tool .hexagon-right:after {
	content: none;
}
.split-callout .wrap {
	display: block;
}
.welcome-ribbon .wrap {
	padding: 3.25rem 2rem;
}
.welcome-ribbon-images img.bottom {
	opacity: .2;
}

.product-category main {padding-top:2rem;}

aside .filters, .product-category main aside .filters  {
	position: fixed;
    z-index: 11;
    top: 100vh;
    pointer-events: none;
    transition: cubic-bezier(.86,0,.07,1) all 0.5s;
    left: 0;
    padding: 1rem 1.5rem 0;
    width: 100%;
    background: #fff;
    height: 100%;
    overflow: auto;
}
aside .filters.show, .product-category main aside .filters.show {
	top: 0;
	pointer-events: initial;
}
.product-category button.clear-all {
	display: none;
}
.filters #apply-filters {
	display: table;
	margin-top: 2rem;
}
button#show-filters {
	display: table;
	margin: 0 auto 2rem;
}
main > div > aside {
	margin: 2rem 0 4rem;
}
.categories ul {
	margin: 0;
}


/* PRODUCT DETAIL ---------------------- */
.product-detail main > .wrap {
	padding-top: 3rem;
}
.product-detail .product-top {
	display: grid;
	grid-template-areas:
		"first"
		"second"
		"third"
		"fourth";
}

.product-detail .main-image img:not(.zoomImg) {
	padding:1em;
}

.product-right, .product-left {
	display: contents;
}
.product-images {
	grid-area: first;
	margin: 0 0 2rem;
}
.product-heading {
	grid-area: second;
}
.product-description-list {
	grid-area: third;
	margin: 0 0 2em;
}
.product-features-instructions {
	grid-area: fourth;
}
.related-products {
	margin-top: 2.5em;
}

/* CTA --------------------------------- */
.contact-cta.two-col-cta .one-col + .one-col {
	margin-top: 4em;
}
.contact-cta.two-col-cta .button {
	margin-top: 1em;
}


/* FOOTER ------------------------------ */
body>footer .wrap {
  align-items: stretch;
  align-content: stretch;
	display: flex;
	flex-direction: column;
}

#web-solutions {
	order: 1;
}

body>footer .wrap nav a+span:before {
	content: "|";
	margin: 0 0.5em;
}




/* RESPONSIVE TABLES ------------------------------ */

.table-wrap {
	margin-inline: calc(-1 * var(--ws-gutter));
}

.table-wrap::before {
	left: var(--ws-gutter);
}

.table-wrap::after {
	right: var(--ws-gutter);
}

.table-wrap table {
	margin-inline: var(--ws-gutter);
}