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

#content h1 {margin-bottom: 1rem;}

h1, .home h2 {font-size:1.75em; line-height: 1em}
h2{font-size:1.65em}
h3{font-size:1.55em}
h4, th{font-size:1.4em}
.styled-heading-1,
#content > .styled-heading-1 {font-size: 1.5em}
        h1+.styled-heading-1 {margin-top: -0.5em}
hr {margin: 1em 0}



/* HEADER */
body{overflow-x:hidden;}
body>header {background: #fff; position: relative; z-index: 9}
#brand {display: block; padding: 0.5em 1em; max-width:50%}
#brand img {width: 5rem; height: auto; display:block;}
body>header .tagline {display:none}
header > .tel {position: absolute; font-weight: 800; top: 1.5em; right: 4.38em}

/* NAV ------------------------------ */
.slideNav{overflow: hidden;}
body>header:before{content: "";opacity: 0; z-index: 3;background-color: #fff;display: block;position: fixed;left:100vw;top:0;width:100vw;height:100vh;transition:left 0ms ease 200ms, opacity 200ms ease}
body.slideNav>header:before{left:0;opacity: .75;transition:left 0ms ease 0ms, opacity 200ms ease}
#navContainer{position: fixed;left: 100%;top:0;bottom:0;width: 85%;max-height: 100vh;background-color:#333;z-index:10;-webkit-transition: left 200ms ease;transition: left 200ms ease;overflow:auto;-webkit-overflow-scrolling: touch;}
body.slideNav {overflow: hidden;}
.slideNav #navContainer{left: 15%;}
#navContainer nav{display: inline}
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li{display:block;float: left;width: 100%; position: relative}
#navContainer nav>ul>li{border-top: 1px solid rgba(0,0,0,0.125)}
#navContainer a, #navContainer .menu{color:#fff; font-weight: 500; line-height:2.5em;padding:0 1rem;display:block;float: left;width: 100%}
#navContainer li.on>a{background-color:var(--blue);color: #fff}
#navContainer li.open{background-color: var(--dark-blue)}
#navContainer li>span{color: #000;opacity: 1; border-radius: 50%; display: block;position: absolute;right: 0;top: 0;line-height: 2.5em;width:2.5em;height: 2.5em;}
#navContainer li>a+span{display: none}
#navContainer li.on>span{opacity: 1}
#navContainer li>span:before{content: ""; display: block; width: 50%; height: 2px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) rotate(90deg); transform-origin: center center;}
#navContainer li>span:after{content: ""; display: block; width: 50%; height: 2px; background-color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); transform-origin: center center;}
#navContainer li.open > span:before { transform: translate(-50%, -50%)rotate(0deg);}
#navContainer li > span::before { -webkit-transition: -webkit-transform .2s ease; transition: -webkit-transform .2s ease; transition: transform .2s ease; transition: transform .2s ease, -webkit-transform .2s ease;}
/*#navContainer li.open>span{-webkit-transform: rotate(90deg);transform: rotate(90deg)}*/
#navContainer #ancillary {clear:both; width:100%; display: flex; flex-direction: column;}
#navContainer #ancillary > * {width:100%}
#navContainer #ancillary > .contact {order:1}
#navContainer #ancillary > .tel {order:2}
#navContainer #ancillary > .tel:before {content:"Call: "}
#navContainer #ancillary > a {border-top:1px solid rgba(0,0,0,0.125); border-top: 1px solid rgba(0,0,0,0.125);}
#navContainer #ancillary > a.button span {display: none;}
#navContainer ul ul {font-size: .8em;display: none}
#navContainer ul .megamenu {width:100%; float:left; clear: both; display: none}
#navContainer ul .megamenu ul {display: block}
#navContainer ul ul a {padding-left: 2rem; font-size:0.875rem}
#navContainer ul ul ul a {padding-left: 3rem; font-size: 0.75rem}
#navContainer .search {order:3; border-top:1px solid rgba(0,0,0,0.125); clear: both; padding: 1em; overflow: auto; position: relative}
#navContainer .search input {border: 0; float: left; width: 100%; height: 2.5rem; font-size: 0.875em; padding: 0 3rem 0 0.5rem}
#navContainer .search input[type="submit"] {position: absolute; width:2.5rem; padding:0; background: url(/images/search.svg) no-repeat center #000; top: 1rem; right: 1rem}
#mobilenav{background-color: #333;float: left;width: 100%;text-align: center; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: center; align-content: center; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
#mobilenav a, #mobilenav span{color: #ccc;line-height: 2em; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
.hamburger{height: 1.5em;width: 1.5em;display: block;position: fixed;right: 1.44em;top:1.38em;z-index:2;}
.hamburger path {fill:#2C2C2C;font-size: 1.75em;}
.hamburger svg {pointer-events: none;}
.hamburger.on{top: 3px; right: 8px}

body>header.hide-small-cart .small-cart {display: none}
body>header .small-cart .quote {display: block; border:1px solid rgba(0,0,0,0.25); font-weight:600; position: fixed; right: 1.1875rem; top: 5.875rem; z-index: 2; color: #fff; background: #CD3737; padding: 0 0.75em; border-radius: 3px; line-height: 2em; box-shadow: 0 0 17px 6px #fff;}
body>header .small-cart.on .quote {top: 2.5rem; right: 0.5rem; box-shadow: 0 0 27px 0 rgba(0,0,0,0.5)}
body>header .small-cart .added {position: fixed; pointer-events: none;  transition: ease all 200ms; top: 8.6875rem; right: 1.25rem; opacity: 0;}
        body>header .small-cart.highlighted .added {opacity: 1;}
        body>header .small-cart.on .added {top:5.5rem; right:0.5rem}
        .slideNav body>header .small-cart .added {top: 43px; right: 0.25em}
body>header .small-cart .added span {font-weight: 700; transition: ease all 200ms; transform: translateY(-10px); display: block; background: #fff; white-space: nowrap; padding: 0.5em 1.5em; position: relative; z-index: 1; box-shadow: 0 0 10px 0 rgba(0,0,0,0.5); font-size: 0.85em; border-radius: 5px;}
body>header .small-cart .added span:before {content: ""; display: block; width: 0; height: 0; border-style: solid; border-width: 0 10px 10px 10px; border-color: transparent transparent #ffffff transparent; position: absolute; top:0; right: 2.125rem; transform: translateY(-100%)}
        .slideNav body>header .small-cart .added span:before {right: 0.4em}
body>header .small-cart.highlighted .added span {transform: none}
body>header .small-cart .added div {position: fixed; top:0; left:0; width: 100%; height: 100%; background: rgba(0,0,0,0.5)}


main > .wrap {padding-top: 0}
main > .wrap #content {padding: 2em 1em}
#content+aside {padding: 0 1em}
#content+aside ul {margin: 0}
#content .uses {margin-bottom: 1em}

.content ul li::before {top: 3px; left:8px}
.callout {padding: 1em 2em 1em 3em}
.callout h2 {font-size: 1.25em; margin-bottom: 0.25em}
.callout p {font-size: 1em; line-height: 1.25em}
.callout::before {width: 2em;background: #3399CC url(/images/large-check.svg) no-repeat center 1.25em;background-size: 60% auto;}

.logo-header {
        flex-direction: column;
}

.logo-header .logo-container {
        width: 10rem;
}

#cad-filters .filter-buttons,
#cad-filters .filter-buttons button {display: block; width: 100%;}
#cad-filters .filter-buttons button {margin: 3px 0 0}


/* MAIN ------------------------------ */

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


.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}
.formTable table td + td {padding-left: 0 !important;}
main > .wrap #content {overflow: auto}
#printOrder {display: none}
.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}
.twoUp {
        display: block;
}
.twoUp img {margin-bottom: 1em; height: auto; width: 100%;}

.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}

.content .photoleft,
.content .photoright {
        max-width: 100%;
        height: auto;
}

.button {font-size: 1rem}

.product-list a {max-width: 20em; margin: 0 auto 2em}

.home > * {float: left; width: 100%; clear: both}


#hero :is(.slide, #video-container)::before {
  background: linear-gradient(0deg, rgba(0,0,0,0.65) 7em, rgba(0,0,0,0) 100%);
  height: 100%;
}


#hero #photoRotator {height: 75vh;min-height: 18.75rem;overflow: hidden;position: relative;text-align: left;}
#hero .hero-wrap { height: 100%; overflow: hidden; position: absolute; left: 0; top: 0; width: 100%; }
#hero .wrap {align-items: center;display: flex;flex-direction: column;justify-content: end;position: absolute;max-width: 100%;top: 0;left:0;right:0;bottom: 0;width:100%;padding: 0 1.5em 3.5em;height: 100%;z-index: 3;}
#hero:before {}
#hero .wrap > * {max-width:75rem;width:100%;z-index:2;overflow: visible;}
#hero .wrap h1,
#hero .wrap .title {display: block;font-size: clamp(1.25em, 0.692em + 2.79vw, 2em);color:#fff;text-wrap: pretty;}
#hero .wrap .title span {display: block;}
#hero p {margin: 0; font-size: clamp(0.875em, 0.782em + 0.47vw, 1em); line-height: 1.25em}

#hero .wrap span.brief {
  font-size: clamp(0.9375em, 0.891em + 0.23vw, 1em);
}

#hero :is(#video-container, .video, iframe) {
  aspect-ratio: 850 / 680;
}

#hero-callouts {border-left: 0;border-top: 1px solid #FFF;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: horizontal;-webkit-box-direction: normal;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;height: 30%;left: 0;top: 100%;width: 100%;z-index: 6;}

#hero-callouts section { height: 100%; position: relative; width: 50%; }
#hero-callouts section:first-of-type { border: 0;border-right: 1px solid #FFF; }
#hero-callouts section .textbox { padding: .75rem 1rem; }
#hero-callouts h2 { font-size: 1.25rem; margin: 0 0 .125rem; }

#product-finder-callout .button {display: block; margin-top:0.5rem}
#product-finder-callout .button:before {width: 2rem;height: 2rem;margin-right: 0.5rem;}

.home #products {padding: 2.75em 1em}
.home #products .product-list a+a {margin-top: 2em}
#support {padding: 2.75em 1em; text-align: center}
#support select {width: 100%; margin-bottom: 0.5em}
#support button {width: 100%;}




/* CAD360 RIBBON ------------------------------ */

#CAD360 .wrap {
  flex-wrap: wrap;
}

#CAD360 .textbox {
  margin: 0 0 1em;
  width: 100%;
}

#CAD360 figure {
  width: calc(50% - .5em);
}




/* WELCOME RIBBON ------------------------------ */

#welcome .textbox {
  padding-block: clamp(2.5em, 1.756em + 3.72vw, 3.5em);
  text-align: center;
}





/* HOMEPAGE BLOG RIBBON ------------------------------ */

.home-blog ul.ws-flex {
  --ws-column-count: 2;
  --ws-gap: 1.5em;
}




/* ------------------------------ */

main #trigger-popover.help-button + h1{padding-right:4rem}
main #trigger-popover.help-button {top: 2rem; right: 2rem; font-size: 0.75rem;padding: 0.5em 0.75em;}

.popover .container .popover-wrap,
.popover.cad-model-popover .container .popover-wrap {max-width: 100%;}
.popover.cad-model-popover .container .popover-wrap {padding:1em}
.popover .container .popover-wrap img {max-width: 100%; height: auto}

.bg-ribbon {padding: 5em 1em; text-align: center; position: relative;}
        #versaflex.bg-ribbon {background: url(/images/home/versaflex-mobile-bg.jpg) no-repeat center / cover}
        #engineered-solutions.bg-ribbon {background: url(/images/home/engineered-solutions-mobile-bg.jpg) no-repeat center / cover}
.bg-ribbon h2 {text-transform: uppercase; font-weight:800}
.bg-ribbon p {line-height: 1.25em}
.bg-ribbon:before {content: ""; z-index: 1; display: block; width: 100%; height: 100%; background: rgba(0,0,0,0.5); position: absolute; top:0; left:0}
.bg-ribbon .wrap {z-index: 2}
.bg-ribbon .wrap p:last-child {margin-bottom: 0}
#featured-video h2,
#featured-video .button {margin-top: 1em}
#featured-video p {font-size: 1em; line-height: 1.25em}



#content > .image-links li + li {margin: 1em 0 0}

.pageHeader {height:auto; padding-bottom: 20%; background: url(/images/DefaultPageBanner-mobile.jpg) no-repeat center / cover}
        .landing .pageHeader {padding: 2.5em 1em; height:auto}
        header:not(.hide-small-cart) + .landing .pageHeader {padding-top: 5em}
.landing .pageHeader p {margin: 0; line-height: 1.25em}
.blogPost img {max-width: 100%; height: auto}
#cad-filters .filter-buttons button + button {margin-left: 0}
#cad-filters .filter-buttons button.on::after {display: none}
#cad-filters .filters {margin-top: 2em}
#cad-filters .filters > ul > li {width:100%}
#CAD-drawings li.no-models {display: block}

#content .search-bar {
        flex-wrap: wrap;
}

#content .search-bar input,
#content .search-bar .toggleButtons button {padding: 0 1em; height: 2.81em;}


#content .search-bar .toggleButtons button {
        font-size: 0.875rem;
}



.cleanMove-table thead {display: none}
.cleanMove-table tr {display: block; width: 100%; float: left;margin-bottom: 1em; border: 1px solid #ccc;}
.cleanMove-table td {display: block; width: 100%; float: left; padding: 0.75rem;}
.cleanMove-table td:before {content: attr(data-attribute); font-weight:700; display: block;}
.cleanMove-table td:nth-child(2):before {color: #4B5257;}
.cleanMove-table td:nth-child(3):before {color: #74ad00;}
.cleanMove-table td:nth-child(4):before {color: #39c;}
.cleanMove-table td {border-top: 1px solid #ccc; line-height: 1.25em}
.cleanMove-table td:first-child {background: #efefef; border: 0; font-weight:600}

.cleanMoveIndustries-table tbody > tr > th {font-size: 1.125em}
.cleanMoveIndustries-table tbody > tr > td {font-size: 0.875em}
.cleanMoveIndustries-table tbody > tr > td.background {display: none}

.palletConveyor-table td {font-size: 0.75em; line-height: 1.25em}
.landing .pageHeader .intro-text h1 {margin-bottom: 0;}
.landing .pageHeader .intro-text .subheading {display: block; text-transform: none; font-size: 1.5rem; font-weight: 700; line-height: 1em; margin: 0.125em 0 0.75em;}

.pageHeader {height:4.625rem; padding-bottom: 0}
.landing.type-2 .pageHeader {height:auto; padding:2em 1em}
.landing.type-2 .pageHeader .intro-text p {margin-bottom: 1.5em;}
.landing.type-2 .pageHeader .product {max-width:20em; width:100%; box-shadow: 0 5px 30px rgba(0,0,0,0.5); margin:0 auto; text-align: left;}
.landing.type-2 .pageHeader .product .product-image {padding-bottom: 100%;}
.landing.type-2 .pageHeader .product .product-image img {width:auto}
.landing .featured-product {padding:1.5em; background:#efefef; margin: 1em 0 2em;}
.landing .featured-product .product-list .product img {width:auto}

#content .floated-video {max-width:100%; width:100%; margin: 0 0 2em}
#content .floated-video .videoContainer {max-width: 100%; width:100%}
#content .floated-video figcaption {text-align:center; font-size: 0.87rem; line-height: 1.25em; margin-top: 0.5em}

#content .mobileTable td {display: block !important; width:100% !important}
#content .mobileTable td:empty,
#content .mobileTable td.desktopOnly {display: none !important;}

.product-list {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
.product-list a {display: block; max-width: 100%; width:calc(50% - 0.5rem); margin: 0 1rem 2rem 0; padding-bottom: 3.5rem}
.product-list a:nth-child(even) {margin-right:0}
.product-list a p,
.product-list a ul,
.product-list a ul li,
#content .product-list a p,
#content .product-list a ul,
#content .product-list a ul li,
.product-list a p,
.product-list.engineered-solutions a .product-brief,
#content .product-list a p,
#content .product-list.engineered-solutions a .product-brief,
.product-list a span {font-size:0.875rem; line-height:1.25em}
.product-list a ul li,
#content .product-list a ul li {padding-left: 0.75em;}
.product-list a h2,
.product-list.engineered-solutions a .product-name {font-size: 1.125rem; line-height: 1.125em;}
.product-list a .learn-more {font-size:0.875rem; line-height: 2.5rem}
.product-list a .product-image img {width: calc(100% + 2px);object-fit: contain; object-position: top left;}
.product-list.short a .product-image {padding-bottom: 94%}

#content #products .wrap > h2 {font-size:1.65em; margin-bottom:1rem}

#products-landing-page #landing-top {padding:3rem 1rem}
#products-landing-page #landing-top .wrap h1:before {content: "";width: 1em;height: 1em;display: inline-block;background: url(/images/red-triangle.svg) no-repeat center bottom / contain;margin-right: 0.35em;vertical-align: baseline;}
#products-landing-page #landing-top .wrap .product-categories {margin: 2em 0 0; display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#products-landing-page #landing-top .wrap .product-categories li {width:calc(50% - 0.5rem); margin: 0 1rem 1rem 0}
#products-landing-page #landing-top .wrap .product-categories li:nth-child(even) {margin-right:0}
#products-landing-page #landing-top .wrap .product-categories li a {height:100%; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;}
#products-landing-page #landing-top .wrap .product-categories li a .product-name {background:#3399CC; padding: 1rem 0.5rem; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
#products-landing-page #landing-top .wrap .product-categories li a .product-name h2 {margin: 0; max-width:10rem; text-transform: uppercase;font-weight: 900;font-size: 1rem;color: #FFFFFF;letter-spacing: 0;text-align: center;line-height: 1.125em;}
#products-landing-page #landing-bottom {padding: 4.375rem 1em 5rem}
#products-landing-page #landing-bottom .wrap {max-width:46.75rem; margin:0 auto; text-align: center;}
#products-landing-page #landing-bottom .wrap h2 {line-height: 1.125em;}
#products-landing-page #landing-bottom .wrap p {color: #000000;letter-spacing: 0;text-align: center;}
#products-landing-page #landing-bottom .wrap .help-callout {max-width:35.5625rem; padding: 2em; margin:3em auto 0}
#products-landing-page #landing-bottom .wrap .help-callout p {text-align: center; margin:0;}

.home #products .product-categories li {width:calc(50% - 0.5rem); margin: 0 1rem 1rem 0}
.home #products .product-categories li:nth-child(even) {margin-right:0}
.home #products .product-categories li a {padding-bottom:3.5rem}
.home #products .product-categories li a h2 {font-size: 1rem;max-width:100%; line-height:1.125rem; padding:0 1rem}
.home #products .product-categories li a p {font-size: 0.75rem; line-height:1.125em; max-width:100%; padding:0 1rem}
.home #products .product-categories li a .learn-more {font-size: 0.875rem;line-height: 2.5rem;}

.landing #products .top {margin-bottom: 2em;}
.landing #products .top .wrap {text-align:center}
.landing #products .top .wrap h1 {margin-bottom: 1rem;}
.landing #products .top .wrap h1:before {content: "";width: 1em;height: 1em;display: inline-block;background: url(/images/red-triangle.svg) no-repeat center bottom / contain;margin-right: 0.35em;vertical-align: baseline;}

body.full-screen-container-active {overflow:hidden}
body.full-screen-container-active main {position:relative; z-index:10}
#product-finder #finder-top {padding:3rem 1rem; text-align:center; background:#e8e8e8}
#product-finder #finder-top .wrap h1 {font-size: 1.75em;}
#product-finder #finder-top .wrap h1:before {content: "";width: 1em;height: 1em;display: inline-block;background: url(/images/red-triangle.svg) no-repeat center bottom / contain;margin-right: 0.35em;vertical-align: baseline;}
#product-finder #finder-top .wrap p {margin:0 auto}
#product-finder #finder-bottom {padding:2rem 1rem;}
#product-finder #finder-bottom form {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#product-finder #finder-bottom .filters {order:2; position:sticky; bottom:0; left:0; width:100%; z-index:1; padding:0.5rem 0 1rem; background:#fff}
#product-finder #finder-bottom .filters:before {content:""; display: block; width:100%; height:30px; pointer-events:none; position:absolute; top:-30px; left:0; background:linear-gradient(0deg, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%)}
#product-finder #finder-bottom .filters .filter-container {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#product-finder #finder-bottom .filters .filter-container > .mobileOnly {padding: 0 0.5rem; font-size:0.875rem; display: inline-block; line-height: 2.5rem; width:50%; flex: 1 1 auto; font-weight: 500;color: var(--red);background: #fff;border: 1px solid var(--red);}
#product-finder #finder-bottom .filters .filter-container > .mobileOnly:nth-of-type(2) {border-left: 0}
#product-finder #finder-bottom .filters .filter-container > .trigger-compare-products:before {content: ""; padding-left: 0.875rem; margin-right: 0.5em; background: url(/images/compare-icon.svg) no-repeat center;}
#product-finder #finder-bottom .filters .filter-container > .trigger-filter-products:before {content: ""; padding-left: 0.8125rem; margin-right: 0.5em; background: url(/images/filter-products-red.svg) no-repeat center;}
#product-finder #finder-bottom .filters .filter-container .fixedMobileContainer {position: fixed;z-index: 4;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;}
#product-finder #finder-bottom .filters .filter-container .fixedMobileContainer.show {top:0; pointer-events: all;}
#product-finder #finder-bottom .filters .title {font-size:1.25rem; font-weight: 700; color:#000; text-transform: uppercase; line-height:2.5rem; margin-bottom:0.625rem; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: nowrap; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-align-content: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
#product-finder #finder-bottom .filters .title button {padding:0; display: inline-block; padding:0; background:none; font-weight: 500; font-size: 0.875rem; color: #333333; text-align: right; line-height: 2.5rem;}
#product-finder #finder-bottom .filters .title button:hover {color:var(--red)}
#product-finder #finder-bottom .filters .title button.reset:before {content:""; margin-right:0.125em; padding-left: 1em; background: url(/images/product-finder-refresh.svg) no-repeat center}
#product-finder #finder-bottom .filters .title button.remove-all:before {content:""; margin-right:0.125em; padding-left: 1em; background: url(/images/product-finder-refresh.svg) no-repeat center}
#product-finder #finder-bottom .filters .filter {position: relative; margin-top: 0.4375rem}
#product-finder #finder-bottom .filters .filter:before {content:""; pointer-events: none; position:absolute; top:0; right:0; height:100%; width:1.5rem; background: url(/images/product-finder-select-arrow.svg) no-repeat center left; filter:invert(89%) sepia(10%) saturate(48%) hue-rotate(315deg) brightness(84%) contrast(92%);}
#product-finder #finder-bottom .filters .filter:after {opacity:0; transition: ease all 200ms; content:""; pointer-events: none; position:absolute; top:0; right:0; height:100%; width:1.5rem; background: url(/images/product-finder-select-arrow.svg) no-repeat center left; filter:invert(43%) sepia(29%) saturate(4929%) hue-rotate(336deg) brightness(79%) contrast(101%);}
#product-finder #finder-bottom .filters .filter:hover:after {opacity:1}
#product-finder #finder-bottom .filters .selected-products {margin-bottom: 2.1875rem;}
#product-finder #finder-bottom .filters .selected-products .selected-product {position:relative; border-radius: 2px; border:1px solid #D8D8D8; font-weight: 500;font-size: 1rem;color: #333333; line-height:1.25em; padding:0.625rem 1.5625rem 0.625rem 0.65rem;}
#product-finder #finder-bottom .filters .selected-products .selected-product + .selected-product {margin-top:5px}
#product-finder #finder-bottom .filters .selected-products .selected-product button {position:absolute; top:0; right:0; width:2.5rem; height:2.5rem; background: url(/images/product-finder-remove.svg) no-repeat center; padding:0;}
#product-finder #finder-bottom .filters select {width:100%; cursor:pointer; height:2.5rem; border:1px solid #D8D8D8;  border-radius:2px; padding:0 1.5625rem 0 0.5em; font-weight: 600; font-size: 1rem; color: #333333; background:#fff}
#product-finder #finder-bottom .filters select:hover {border-color: var(--red);}
#product-finder #finder-bottom .filters label.flex {width:100%; white-space:nowrap; cursor:pointer; position:relative; z-index:1; padding:0; font-weight: 600; font-size: 1rem; color: #333333; background:#fff; display: flex; align-items: center; align-content: center;}
#product-finder #finder-bottom .filters label.flex span {line-height:2.25rem; padding:0 0.65em 0 0.65em; display: block; border-radius: 2px 0 0 2px; border:1px solid #D8D8D8; border-right:0}
#product-finder #finder-bottom .filters label.flex input {height:2.375rem; width: 100%; text-align:center; flex: 1 1 auto; border:1px solid #D8D8D8; border-radius: 0 2px 2px 0; font-size: 1rem; color: #333333;}
#product-finder #finder-bottom .filters label.flex input:focus {border-color:var(--red)}
        #product-finder #finder-bottom .filters label.flex ::-webkit-input-placeholder {color: #333; font-style: italic; font-size:0.875rem; text-align:center}
        #product-finder #finder-bottom .filters label.flex :-ms-input-placeholder {color: #333; font-style: italic; font-size:0.875rem; text-align:center}
        #product-finder #finder-bottom .filters label.flex ::placeholder {color: #333; font-style: italic; font-size:0.875rem; text-align:center}
        #product-finder #finder-bottom .filters label.flex input::-webkit-outer-spin-button,
        #product-finder #finder-bottom .filters label.flex input::-webkit-inner-spin-button {-webkit-appearance: none;margin: 0;}
        #product-finder #finder-bottom .filters label.flex input[type=number] {-moz-appearance: textfield;}
#product-finder #finder-bottom .filters .sticky {position: sticky;bottom: 0;left: 0;margin-top: 2em;width: 100%;background: #fff;padding: 1em 0;}
#product-finder #finder-bottom .filters .sticky:before {pointer-events: none;content: "";display: block;position: absolute;top: -1.875rem;height: 1.875rem;width: 100%;background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,1) 100%);}
#product-finder #finder-bottom .filters .sticky button {display: block; width: 100%;text-align: center; background: var(--red)}
#product-finder #finder-bottom .filters .sticky .cancel {background: none; color:#666;}
#product-finder #finder-bottom .products-container {order:1; width:100%;margin-bottom: 2rem; padding-bottom:2rem; border-bottom:2px solid #EDEDED}
#product-finder #finder-bottom .product-list {margin:0; width:100%; padding:0; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-align-content: stretch; -ms-flex-line-pack: stretch; align-content: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch;}
#product-finder #finder-bottom .product-list > li {width:calc(50% - 0.25rem); margin:0 0.5rem 1rem 0; position:relative;}
#product-finder #finder-bottom .product-list > li:nth-child(even) {margin-right:0}
#product-finder #finder-bottom .product-list li .product-box {margin:0; height:100%; padding-bottom:7.125rem; border-color:#E8E8E8}
#product-finder #finder-bottom .product-list li .compare {position: absolute;bottom: 3.875rem;left: 0;width: 100%;}
#product-finder #finder-bottom .product-list li .compare label {cursor: pointer; text-align: center;display: block;padding: 0 1rem;line-height: 3.125rem;text-transform: uppercase;font-weight: 600;font-size: 0.875rem;}
#product-finder #finder-bottom .product-list li .compare :checked + label {color:var(--red);}
#product-finder #finder-bottom .product-list li .compare label:before {content:""; transition:ease all 200ms; display: inline-block; margin-right:0.25em; width:1.0625rem; height:1.0625rem; vertical-align: text-bottom; border: 1px solid #5D5D5D; background: #fff url(/images/compare-check.svg) no-repeat center}
#product-finder #finder-bottom .product-list li .compare :checked + label:before {border-color: var(--red); background-color:var(--red)}
#product-finder #finder-bottom .product-list li input {display: none}
#product-finder #finder-bottom .product-list li .learn-more {position:absolute; height:auto; bottom:0; left:0; margin:0; width:100%; padding:0}
#product-finder #finder-bottom #compare-products .top {text-align:center;margin-bottom: 2rem}
#product-finder #finder-bottom #compare-products .top h2 {text-align:center; font-size:1.25rem; font-weight: 700; color:#000; text-transform: uppercase; margin:0 0 1rem}
#product-finder #finder-bottom #compare-products .top .button {padding:0 1.5em; line-height:1.875rem; display: inline-block; font-size:0.875rem; font-weight:500; background:var(--red)}
#product-finder #finder-bottom #compare-products .top .button:before {content:""; padding-left: 0.875rem; margin-right:0.5em; background: url(/images/left-white-arrow.svg) no-repeat center;}
#product-finder #finder-bottom #compare-products .top .button.start-over {background: var(--blue)}
#product-finder #finder-bottom #compare-products .top .button.start-over:before {display: none; background: var(--blue)}
#product-finder #finder-bottom #compare-products .overflow-table {width:100%; overflow:auto; border:1px solid #D8D8D8}
#product-finder #finder-bottom #compare-products table {table-layout: fixed;}
#product-finder #finder-bottom #compare-products table th {position:relative; min-width: 6.25rem; padding:0; border-right: 1px solid #D8D8D8}
#product-finder #finder-bottom #compare-products table th:last-child {border-right: 0}
#product-finder #finder-bottom #compare-products table th .remove-product {position:absolute; top:0; right:0; width:3rem; height:3rem; background: url(/images/product-finder-remove.svg) no-repeat center / 0.8125rem auto; padding:0; filter: grayscale(1); opacity:0.5}
#product-finder #finder-bottom #compare-products table th .remove-product:hover {filter: grayscale(0); opacity:1}
#product-finder #finder-bottom #compare-products table th a {background:#F1F8FB; padding:0; display: block; height: 100%}
#product-finder #finder-bottom #compare-products table th a:hover {background:#fff}
#product-finder #finder-bottom #compare-products table th a .product-image {padding-right: 2.625rem}
#product-finder #finder-bottom #compare-products table th a .product-image img {max-width: 350px;height: auto;width: 100%;}
#product-finder #finder-bottom #compare-products table th a .product-name {padding: 0.5rem 1rem; display: block; text-transform: uppercase; font-weight: 800; font-size: 1.125rem; color: var(--blue); line-height: 1.125em;}
#product-finder #finder-bottom #compare-products table td {border-right: 1px solid #D8D8D8; padding: 0.5rem 1rem; border-top:1px dashed #D8D8D8; font-weight:500; color:#333;}
#product-finder #finder-bottom #compare-products table td:last-child {border-right: 0}
#product-finder #finder-bottom #compare-products table td .small-title {white-space: nowrap; display: block;font-style: italic;font-size: 0.8125rem;color: #848484;line-height: 1rem;}
#product-finder #finder-bottom #compare-products table td .button {display: block; white-space:nowrap; text-align: center;}
#product-finder #finder-bottom #compare-products table tr:not(:last-child):hover td {background:#FFFAC8}
#product-finder #finder-bottom #compare-products .extra-info {margin-top:2rem}

/* Scanned Project (from QR code)*/
#scanned-project h2 {
        font-size: 1em;
}

#scanned-project #details-top {
        padding: 2em 1em 1.5em;
}

#scanned-project #details-top .project-details {
        flex-wrap: wrap;
}

#scanned-project #details-top .project-info table td:first-child {
        width: 4rem;
}

#scanned-project #details-top .help-text {
        margin-top:1.5rem;
        font-size:0.875em;
}

#scanned-project #details-top .help-text br {
        display: none;
}

#scanned-project #details-top .mk-logo {
        display: none;
}

#scanned-project #details-top .project-info {
        font-size: 0.75em;
}


#scanned-project #details-bottom {
        padding: 2em 1em 4em;
}

#scanned-project #details-bottom .wrap {
        gap: 2em 1em;
}

#scanned-project #details-bottom .wrap + .wrap {
        margin-top: 2em;
}

#scanned-project #details-bottom .half {
        width: calc(50% - 1em);
}

#scanned-project #details-bottom li a {
        background-position: 0.3125rem 0.4375rem;
        font-size: 0.875em;
        padding: 0.5rem 0.5rem 0.5rem 1.5rem;
}

#scanned-project #details-bottom .help-callout {
        padding: 2em 1.5em;
}

#scanned-project #details-bottom .help-callout h2 span {
        display: inline-block;
}

#scanned-project #details-bottom .videos {
        gap:1em;
}

#scanned-project #details-bottom .products {
        --ws-columns: 2;
        --ws-gap: 1em;
}

#scanned-project #details-bottom .products a h2 {
        font-size: 1rem;
}


/* Sales Rep Finder */
#sales-rep-finder .rep-search > :last-child {
        flex-direction: column;
}

#sales-rep-finder .rep-search > :last-child  > * {
        width: 100%;
}

#sales-rep-finder .rep-list .rep-contact a {
        display: block;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
}



/* FOOTER ------------------------------ */
body>footer {text-align: center}
body>footer .wrap{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: stretch;
}
body>footer .logos {margin-bottom: 3em}
body > footer .email-form {margin: 0 auto; max-width:100%;}
body > footer .email-form .recaptcha {display: flex; justify-content: center;}
body > footer .email-form input,
body > footer .email-form button {max-width:13.13rem; margin: 0 auto 0.35em}
body > footer .email-form button {margin-top: 0.35em}
#web-solutions{
 -ms-flex-order: 1;
 -webkit-box-ordinal-group: 2;
         order: 1;
}
body>footer .wrap nav a+span:before {content: "|"; margin: 0 0.5em}




/* 550px */
@media (max-width: 34.375em) {
  #hero-callouts { flex-direction: column; height: 20rem;}
  #hero-callouts section { height: 50%; width: 100%; }
  #hero-callouts section:first-of-type {border:  0; }
  #hero-callouts p { display: inline-block; margin: 0 .5rem 0 0; }
}



/* 500px */
@media (max-width: 31.25em) {
  .home-blog {
    text-align: center;
  }

  .home-blog ul.ws-flex {
    --ws-column-count: 1;
    margin-inline: auto;
    max-width: 20em;
    row-gap: 2em;
  }

  body>footer .fatFooter {
    flex-wrap: wrap;
    justify-content: space-around;
    margin-bottom: 2.5em;
  }

  body>footer .col {
    margin: 0 0 3em;
    order: 1;
    width: 100%;
  }

  body>footer figure.logo {
    max-width: 5rem;
    width: 50%;
  }

  body>footer figure.logo:first-of-type { order: 2; }
  body>footer figure.logo:last-of-type { order: 3; }

}
