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

:root {
  --red:var(--dark-blue);
  --dark-red:#AC0000;
  --blue:#58744b;
  --dark-blue:#80515d;
  --ws-gray: #434D55;
  --ws-gap: 1.5em;
}


html {-webkit-box-sizing:border-box;box-sizing:border-box;}
*, *:before, *:after {-webkit-box-sizing:inherit;box-sizing:inherit;}
body {margin:0;padding:0;-webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

img{border: 0; height: auto; max-width: 100%; }
ul{padding-left: 0}
ul li{list-style:none}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{font-family:inherit; font-size:inherit; font-style:inherit;font-weight:inherit}
table {border-collapse:collapse}
td, th {empty-cells:show;vertical-align:top;text-align:left}
body {background:#4B5257}
#skipNavigation{background:#fff;color:#000;padding:.5em;position:absolute;left:0;top:-1000px;z-index:10}
#skipNavigation:focus,#skipNavigation:active{top:0;}
/*page widths*/
body>header, #mainnav, main, body>footer, #alertApp{width:100%;float:left;clear:left;display:block;}
body>*>.wrap, body>footer>.fatFooter,footer .wrap, #alertApp>*,.home .wrap, #products .wrap{width:100%;max-width:75rem;margin-left:auto;margin-right:auto;position:relative;overflow:auto}

/* text */
body, .text, input, button, select, textarea{font-family:Roboto, sans-serif;line-height:1.5556; color:#2C2C2C;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.text{font-size: 1rem}
a, a *{color:var(--dark-blue);text-decoration:none}
a:hover, a:active, a:hover *, a:active *{color:var(--blue)}
p,h1,h2,h3,h4,hr,.content ul,.contentEditor ul,blockquote,dd,ol{margin-top:0;margin-bottom:1rem}
h1, h2, h3, h4, h5, h6, h7, h8, h9, th{font-weight:700; line-height: 120%;}
p + h2, p + h3, p + h4, p + h5, p + h6,
ul + h2, ul + h3, ul + h4, ul + h5, ul + h6,
ol + h2, ol + h3, ol + h4, ol + h5, ol + h6 {margin-top:2rem;}
.textColor, h1, h2, h3, h4, h5, h6, h7, h8, h9, th, dt{color: #000;}
em, i, q, cite, .italic{font-style:italic}
b, strong{font-weight:700}
u{text-decoration:none}
hr{border:0;border-top:2px solid #DCDCDC;padding-top:2px}
p{font-size:1em; margin-bottom: 1.25em}
#content p.intro {font-size: 1.25rem; line-height: 1.75rem; color: #2C2C2C; font-weight: 600}
h1, .heading-style1 {font-weight: 800}
h2, .heading-style2 {font-size:1.45em; font-weight: 700}
h3, .heading-style3 {font-size:1.3em}
h4, th{font-size:1.2em}
th {color: #000; font-weight: 600}
h5 {font-size:1.1em}
h6 {font-size:1.0em}

h2.red,
h3.red,
h4.red,
h5.red,
h6.red,
p.red {color:var(--red)}
h2.blue,
h3.blue,
h4.blue,
h5.blue,
h6.blue,
p.blue {color:var(--blue)}
h2.dark-grey,
h3.dark-grey,
h4.dark-grey,
h5.dark-grey,
h6.dark-grey,
p.dark-grey {color:#333}
h2.light-grey,
h3.light-grey,
h4.light-grey,
h5.light-grey,
h6.light-grey,
p.light-grey {color:#666}
h2.light-grey-bg,
h3.light-grey-bg,
h4.light-grey-bg,
h5.light-grey-bg,
h6.light-grey-bg,
p.light-grey-bg {background:#ececec; padding-left: 0.35rem; padding-right:0.35rem}
h2.underlined,
h3.underlined,
h4.underlined,
h5.underlined,
h6.underlined,
p.underlined {border-bottom: 1px solid currentColor}
h2.underlined-grey,
h3.underlined-grey,
h4.underlined-grey,
h5.underlined-grey,
h6.underlined-grey,
p.underlined-grey {border-bottom: 1px solid #ccc}

sup, sub { font-size:.6em; line-height:.6em;vertical-align:baseline;position:relative}
sup {bottom:1ex}
sub {top:.5ex}
.styled-heading-1 {color: var(--blue); font-weight: 700;}

.mt-1 { margin-top: 1rem; }
.mt-1-5 { margin-top: 1.5rem; }

.sr-only {
  border: 0;
  clip: rect(0,0,0,0);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute;
  width: 1px;
}


/* FLEXBOX COLUMNS ------------------------------ */
.ws-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-gap);
}

.ws-flex>:is(article,div,li) {
  width: calc( 99.9% / var(--ws-column-count) - ( var(--ws-gap) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}


/* MAIN ------------------------------ */
.menu{cursor: pointer}
main, .mceContentBody{background:#fff}
main>.wrap{padding-top:3em}
.contentEditor{background:#fff;min-width:100%;}
/* t1 */
#sidenav{width:100%; overflow:hidden;margin:0 0 3rem}
#sidenav ul{padding: 0}
#sidenav li{height:1%; border-top: 1px solid #fff; overflow:hidden}
#sidenav li a,
main>.wrap > aside .crumbs li a {padding:0.7em 1.19em 0.7em 1.63em; font-size: 1rem; font-weight:700; line-height:1.1em; color:#fff; background: var(--blue); display:block}
#sidenav li a:before,
main>.wrap > aside .crumbs li a:before {content: ""; width: 1em; height: 1em; display: block; float: right; background: url(/images/sidenav-downarrow-white.svg) no-repeat center}
#sidenav li a:hover, #sidenav li a:active{background:#e5e5e5}
#sidenav li.on>a{color:#fff}
#sidenav li.on>a:hover {background: var(--dark-blue)}
/* t2 */
#sidenav li.on ul{}
#sidenav li.on ul li{}
#sidenav li.on ul li a{background: none; padding-left: 2.25em; color: var(--blue)}
#sidenav li.on ul li a:before {background:  url(/images/sidenav-downarrow-blue.svg) no-repeat center}
#sidenav li ul li a:hover, #sidenav li ul li a:active,#sidenav li ul li.on>a:hover{background:#fff}
#sidenav li ul li.on>a{color:var(--dark-blue); background:none;}
#sidenav li ul li.on>a:before {background: url(/images/sidenav-downarrow-red.svg) no-repeat center}
/* t3 */
#sidenav li ul li.on ul{padding-bottom:.5em;border:0}
#sidenav li ul li.on ul li{border:0}
#sidenav li ul li.on ul li a{padding-left:3rem;font-size:.8em;color:#666}
#sidenav li ul li.on ul li a:before{display: none;}
#sidenav li ul li ul li a:hover, #sidenav li ul li ul li a:active{background:#f5f5f5}
#sidenav li ul li ul li.on>a{color:#000; background:#e5e5e5;}
/* t4 */
#sidenav li ul li ul li.on ul li a{padding-left:1.5rem;font-size:.7em;color:#666}
#sidenav li ul li ul li ul li a:hover, #sidenav li ul li ul li a:active{background:#fff}
#sidenav li ul li ul li ul li.on>a{color:#000; background:#f5f5f5;}
/*section callouts*/
main>div>aside section{margin:0 0 20px;padding:10px}
main>div>aside section:hover{background:#FFC}
main>div>aside section h1{margin:0;font-size:1.2em}
main>div>aside section p{margin:0}

main>.wrap>aside .crumbs {margin: 0}
main>.wrap>aside .crumbs li + li {border-top: 1px solid #fff}
main>.wrap>aside .crumbs li a {background: #4B5257; padding: 0.7em 1.19em}
main>.wrap>aside .crumbs li a:hover {background: var(--blue)}

/* content */
/* this was breaking titles on mobile .content {word-wrap:break-word}  */
.content .photoright img,.content .photoleft img {max-width:100%;height:auto;margin: 0;float: none}
.content img.phototreatment{max-width:50%;height:auto}
.content figure:not(.photoright, .photoleft) {
        margin-left: auto;
        margin-right: auto;
        width: 100%;
}
.content figure.phototreatment{width: 100%;text-align: center}
.content figure.phototreatment img{max-width: 100%;width: auto;height: auto}
.content .twoUp {margin: 1em 0; width: 100%;}
img.phototreatment,img.photoright,img.photoleft,.photoright img,.photoleft img {max-width: 100%;height: auto}
.photoright{float:right;clear:right}
.photoleft{float:left;clear:left}
.muted {opacity:0.5;filter:alpha(opacity=50)}
.highlight, .content .highlight{background:#EFEFEF;padding:1em;margin:1em 0}
small, .textSm{font-size:.8em}
.content table{width:100%}

.shareIcons{display:inline-block;position:relative;overflow:auto}
.shareIcons a{display:block;float:left;margin:0 .5em 1em 0;height:20px;width:20px;background-position:center center; background-repeat:no-repeat;background-size:contain;border-radius:.2em;-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2);box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2)}
.shareIcons a:hover{background-color:#F03C5E}
	.shareFacebook{background-color:#3b5998; background-image:url(../../images/icons/64x64/facebook.png)}
	.shareTwitter{background-color:#00aced; background-image:url(../../images/icons/64x64/twitter.png)}
	.shareLinkedin{background-color:#007bb6; background-image:url(../../images/icons/64x64/linkedin.png)}
	.shareGoogle{background-color:#dd4b39; background-image:url(../../images/icons/64x64/google-plus.png)}

/* list */
.content ol{margin-left:2em}
.content ol ol li {list-style: lower-alpha}
.content ul li{position: relative; padding-left: 2em}
.content ul li+li{margin-top: 0.5em}
.content ul li:before{content: "";display: block; z-index:1; width: 1em;height: 1em;background: url(/images/bullet.svg) no-repeat center;left:0.75rem;position: absolute;top: 0.1875rem;}
.content ul li ul li:before{opacity: .5}

/* addon classes */
.clearFloats{clear:both}
.nobr{white-space: nowrap}
.twoCol, .threeCol, .resCol{
-webkit-column-gap:2em;
        column-gap:2em;
}
.req{color:#c00}
.textIcon{background:#999; background-color:rgba(0,0,0,.2);font-size:.8em;line-height:1em;display:inline-block;padding:.2em .4em;border-radius: .5em;color:#fff}
.textIcon:hover{background:#666; background-color:rgba(0,0,0,.4);color:#fff}
.clearfix:after{content: "";display: table;clear: both;}

.videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer .videoContainer {position: absolute; top:0; left:0; width: 100%; height: 100%;}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe,
.videoContainer video {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}
.videoContainer video {object-fit: contain; object-position: center;}

.content * > video {
        border: 1px solid #e1dcd7;
        height: auto;
        width:100%;
}

.product-table th,
.product-table td {padding: 0.25rem 1rem}
.product-table tr:nth-child(even) {background: #ececec}

/* forms */
input, button, select, textarea{font-size:1rem;line-height: 1.2em}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select, input[type="button"], input[type="submit"], input[type="reset"]{border-radius:0; outline: none; -webkit-appearance:none;font-size: 1rem}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select{border:1px solid rgba(0,0,0,0.12);background-color:#EFEFEF;padding:0.5em; transition: ease all 200ms}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus, select:focus{border-color:var(--blue)}
textarea{display:block;font-size: 1rem; width: 100%}
@media screen and (-webkit-min-device-pixel-ratio:0) {
    select{background-image:url(/images/icons/16x16/select.png);background-repeat:no-repeat;background-position:right center;padding-right: 18px}
	input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}
	input[type="search"]{padding-right:0}
}
table select {width: 100%}
select option{padding:0 .2em}
button,.button,input[type="button"], input[type="submit"], input[type="reset"]{background:var(--blue); font-weight:600; color:#fff;border:0;padding:1em 1.75em; font-size: 1.06rem; line-height:1em;cursor:pointer; display: inline-block}
input::-moz-focus-inner {border:0;padding:0;}
button:hover,.button.hover,input[type="button"]:hover,input[type="submit"]:hover,input[type="reset"]:hover,.button:hover,.button:focus,input[type="button"]:focus,input[type="submit"]:focus,input[type="reset"]:focus{background-color:var(--dark-blue);color:#fff}
.button{display: inline-block}
.button-2, input[type="submit"].button-2 {background: #EFEFEF; font-size: 1rem; color: var(--blue); border: 0; padding: 0.75em 1em; font-weight: 700; line-height: 1em; cursor: pointer; display: inline-block; border: 1px solid var(--blue);}
.button-2:hover, input[type="submit"].button-2:hover {background: var(--blue); color: #fff}
button img{height:1em;width:auto;vertical-align:top}
.button.grey {color: #4B5257; background: #e1dcd7}
.button.grey:hover {color: #fff; background: var(--blue)}
.button.red {background: var(--dark-blue)}
.button.red:hover {background: var(--blue)}
.button.icon, button.icon {position: relative; padding: 1em 1.25em 1em 4.5em;}
.button.icon:before, button.icon:before {content: ""; position: absolute; width: 3.13em; display: block; left:0; top: 0; height: 100%; background-color: rgba(0,0,0,0.2)}

input.bulky, .bulky {padding:.4em .6em;font-size:1.2em}
.formTable, .formTable table{width:100%}
.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 input[type="search"], .formTable textarea{width:100%}
.formTable table td,.formTable table td:first-child{padding-bottom:0}
.formTable.right td:first-child{text-align:right;width:1%}
.formTable.right td{width:auto}
.subjClass{display:none !important;}
#Captcha label{padding-left:0}
td.right, th.right{text-align:right}
.wsNew{display:inline-block;font-size:.7em;line-height:1.5em;height:1.5em;padding:0 .3em;margin:.3em 0;background-color:#FFC700;overflow:visible;vertical-align:top;color:#fff;font-style:italic}
.formEdit select, .formBuilder select { width:40%; }

/* pagination */
.pagination{font-size:.95em;text-align:right}

/* page header */
.pageHeader {width:100%; background: url(/images/DefaultPageBanner.jpg) no-repeat center / cover; display: block; width: 100%; float: left; clear: both}
.landing .pageHeader {position:relative; background-size: cover; background-position: center;}
.landing .pageHeader:before {content:""; display: block; width:100%; height:100%; position: absolute; top:0; left:0; background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 50%, rgba(0,0,0,0.10) 100%);}

/* alert */
#alertApp, #alertApp.alertStatic:hover{width:100%; background:#990000;padding-left: 1rem;padding-right: 1rem}
#alertApp h1{margin-bottom:0;font-size:1.1em;padding:5px;color:#fff;text-align:center}
#alertTitle span{float:right; opacity:.5}
#alertApp:hover #alertTitle span{opacity:1}
#alertTitle a{color:#fff;text-decoration:underline}
#alertDesc{overflow:hidden}
.alertClosed #alertDesc{height:auto;max-height:0}
.alertOpen #alertDesc{height:auto;min-height:0;max-height:250px;}
#alertDesc p{color: rgba(255,255,255,.8);}
#alertApp {cursor:pointer;}
#alertApp.alertStatic{cursor:auto}
#alertApp:hover { background:#660000;}

.home #products .wrap {max-width:78.125rem}
.home #products .product-categories {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;}
.home #products .product-categories li a {padding-bottom: 5.5rem; height:100%; position: relative; background:#fff; text-align:center; display: block; border:1px solid var(--blue)}
.home #products .product-categories li a:hover {border-color:var(--dark-blue)}
.home #products .product-categories li a .product-image {margin-bottom:1.5em; position:relative; padding-bottom:97%; background-size: cover; background-position:center}
.home #products .product-categories li a .product-image:before {content:""; display: block ;width: 100%; height:33%; bottom: 0; left:0; position:absolute; opacity: 0.4; background-image: linear-gradient(180deg, rgba(0,0,0,0.00) 0%, #000000 99%); transition: ease all 200ms}
.home #products .product-categories li a:hover .product-image:before {opacity:0}

.home #products .product-categories li a h2 {transition:ease all 200ms; font-weight: 900; margin:0 auto 0.75rem; max-width:13.75rem; text-transform: uppercase; font-size: 1.375rem;color: var(--blue);letter-spacing: 0;text-align: center;line-height: 1.5625rem;}
.home #products .product-categories li a:hover h2 {color:var(--dark-blue)}
.home #products .product-categories li a p {text-align:center; margin:0 auto; max-width: 14.625rem;  font-size: 1rem; color: #5D5D5D; letter-spacing: 0; text-align: center; line-height: 1.25rem;}
.home #products .product-categories li a .learn-more {transition:ease all 200ms; line-height: 3.75rem; position:absolute; bottom:0; left:0; width:100%;  font-weight: 900; font-size: 1.0625rem; color: #FFFFFF; text-align: center; background:var(--blue)}
.home #products .product-categories li a:hover .learn-more {background:var(--dark-blue)}


.product-list {clear: both}
.product-list a, .product-list .product-box {display: block; background: #fff; font-size: 0.875em; margin-bottom: 2.25rem; padding: 0 1rem 3.75rem; position: relative; border: 1px solid var(--blue); color: #5D5D5D; line-height: 1.25rem; color: #5D5D5D}
        .home .product-list a {padding: 0 1rem 4.5rem}
        .product-list.engineered-solutions a {padding: 1.5rem 1rem 4.5rem}
        .home #products .product-list a {text-align: center; margin-bottom: 0}
.product-list a .product-image,
.product-list .product-box .product-image {width: calc(100% + 2rem); margin-bottom: 1rem; overflow: hidden; margin-left: -1rem; height: auto; aspect-ratio: 1/1 ;position: relative; background-size: cover; background-position:center}
        .landing #products .product-list a .product-image {aspect-ratio: 1/1}
        .product-list.taller a .product-image {padding-bottom: 135%}
.product-list a .product-image img,
.product-list .product-box .product-image img {position: absolute; left: 0; top: 0; width: 100%; height:100%; object-fit: cover; object-position: center;}
.product-list .product-box .product-image img,
.product-list a h2,
.product-list .product-box h2,
.product-list.engineered-solutions a .product-name {display: block; font-size: 1.38rem; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--blue); font-weight: 800}
.product-list a p,
.product-list .product-box p,
.product-list.engineered-solutions a .product-brief,
        #content .product-list a p,
        #content .product-list.engineered-solutions a .product-brief {font-weight: 400; display: block; font-size: 1rem; margin-bottom: 0.25rem; color: #5D5D5D}
#product-finder .product-list li .product-box li:before {top:-1px}
#product-finder .product-list li .product-box li,
#product-finder .product-list li .product-box p {font-size:1rem}

.product-list a ul,
.product-list .product-box ul,
.product-list.engineered-solutions a .list-style {display: block; margin: 0.5em 0}
.product-list a li * {color: #5D5D5D}
.product-list .product-box li * {color: #5D5D5D}
.product-list a li {display: block; text-indent: 0; position: relative; font-size: 0.875rem; font-weight: 400; padding: 0 0 0 1em; color: #5D5D5D}
.product-list .product-box li {display: block; text-indent: 0; position: relative; font-size: 0.875rem; font-weight: 400; padding: 0 0 0 1em; color: #5D5D5D}
.product-list a li:before {content: "-"; margin:0; background: none; position: absolute; left: 0.25em; top: 0}
.product-list .product-box li:before {content: "-"; margin:0; background: none; position: absolute; left: 0.25em; top: 0}
.product-list a span {color: #5D5D5D; font-size: 0.875rem; font-weight: 400; padding: 0;}
.product-list .product-box span {color: #5D5D5D; font-size: 0.875rem; font-weight: 400; padding: 0;}
.product-list a p strong {color: #5D5D5D;}
.product-list .product-box p strong {color: #5D5D5D;}
.product-list a li+li {margin: 0}
.product-list .product-box li+li {margin: 0}
.product-list a .learn-more {position: absolute; font-weight: 700; bottom: 0; left: 0; width: 100%; line-height: 50px; display: block; text-align: center; color:#EFEFEF; background: var(--blue); font-size: 17px;}
.product-list .product-box .learn-more {position: absolute; font-weight: 700; bottom: 0; left: 0; width: 100%; line-height: 50px; display: block; text-align: center; color:#EFEFEF; background: var(--blue); font-size: 17px;}
.product-list.engineered-solutions a .product-name {margin-bottom: 0.5em}
.product-list.engineered-solutions a .list-style span {position: relative; display: block; padding-left: 1em}
.product-list.engineered-solutions a .list-style span:before {content: "-"; position: absolute; left: 0.25em}
        .product-list a:hover {border-color: var(--dark-blue)}
        .product-list a:hover h2,
        .product-list a:hover .product-name {color: var(--dark-blue)}
        .product-list a:hover .learn-more {background: var(--dark-blue)}

#content .uses {display: block; padding: 1em 1.5em; background: #EFEFEF;}
#content .uses h2,
#content .uses h3,
#content .uses h4 {font-size: 1rem; margin-bottom: 0; line-height: 1.5556; font-weight:700; color: #2C2C2C}
#content .uses ul {margin-bottom: 0}
#content .uses ul li+li {margin: 0}

#products {width: 100%; clear: both; float: left; background: #e1dcd7; padding: 2.5em 1em}
        .home #products {padding: 3.75em 1em}
        #content #products {padding:0; background:none; margin: 2rem 0 1rem}
        #content p + #products {margin-top:1rem}
#products .wrap > h2 {text-align: center; font-weight: 700; font-size: 1.25rem; color: #2C2C2C;}
#content #products .wrap > h2 {text-align: left; color:#000}
#description {width: 100%; clear: both; float: left; padding: 3.13em 1em}

.callout {position: relative; display: inline-block; background: #EFEFEF; padding: 1em 2em 1em 6.5em; overflow: hidden; border-radius:4px}
        .landing .callout {margin-top:2em}
        .landing hr+.callout {margin-top:0}
.callout:before {content: ""; position: absolute; top:0; left:0; width:5em; display: block; height: 100%; background: var(--blue) url(/images/large-check.svg) no-repeat center}
.callout h2 {color:#000; font-size: 1.56em; margin-bottom: 0}
.callout p {color:#2C2C2C; font-size: 1.125em; margin-bottom: 0}
.callout strong {color:var(--dark-blue); font-size: 1.125rem; margin-bottom: 0}

#hero {position: relative;overflow: hidden;width: 100%}
#hero .first-segment,
#hero .intro-container {z-index: 3; overflow:hidden}

#hero :is(.slide, #video-container)::before {
  bottom: 0;
	content: '';
	display: block;
  left: 0;
  pointer-events: none;
	position: absolute;
	width: 100%;
  z-index: 2;
}

#hero .wrap {z-index:3;}
#hero .wrap h1,
#hero .wrap .title {color: #fff;line-height: 1.1;display: block;font-weight: 700;}
#hero .wrap span.brief {
	color: rgba(255,255,255,0.9);
	display: block;
	margin: .5em 0 0;
	line-height: 1.2;
	text-wrap: pretty;
}

#hero .intro-container {opacity:0; transition: ease all .5s;}
#hero .intro-container.show {opacity: 1;}


#hero button.play-pause {
  background-color: #000;
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path fill="%23FFFFFF" d="M272 63.1l-32 0c-26.51 0-48 21.49-48 47.1v288c0 26.51 21.49 48 48 48L272 448c26.51 0 48-21.49 48-48v-288C320 85.49 298.5 63.1 272 63.1zM80 63.1l-32 0c-26.51 0-48 21.49-48 48v288C0 426.5 21.49 448 48 448l32 0c26.51 0 48-21.49 48-48v-288C128 85.49 106.5 63.1 80 63.1z"/></svg>');
  background-position: center;
  background-repeat: no-repeat;
  background-size: .5625em auto;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.4);
  cursor: pointer;
  display: table;
  margin: 0 0 0 1em;
  padding: .9em;
  z-index: 3;
}

#hero button.play-pause.paused {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 384 512"><path fill="%23FFFFFF" d="M361 215C375.3 223.8 384 239.3 384 256C384 272.7 375.3 288.2 361 296.1L73.03 472.1C58.21 482 39.66 482.4 24.52 473.9C9.377 465.4 0 449.4 0 432V80C0 62.64 9.377 46.63 24.52 38.13C39.66 29.64 58.21 29.99 73.03 39.04L361 215z"/></svg>');
}


#hero #video-container {
  background: no-repeat center / cover;
  height: 100%;
  overflow: hidden;
  width: 100%;
}

#video-container iframe {
	left: 50%;
	min-height: calc(100% + 4px);
	min-width: calc(100% + 4px);
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
}


#hero-callouts {background: #888;border-lefT: 1px solid #FFF;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;-webkit-box-orient: vertical;-webkit-box-direction: normal;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;height: 100%;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;position: absolute;right: 0;width: 28.5%;z-index: 3;}
#hero-callouts section {background-position: left bottom;background-repeat: no-repeat;background-size: cover;height: 50%;position: relative;}
#hero-callouts section:first-of-type { border-bottom: 1px solid #FFF; }
#hero-callouts section>a {-webkit-box-align: end;-webkit-align-items: flex-end;-ms-flex-align: end;align-items: flex-end;display: -webkit-box;display: -webkit-flex;display: -ms-flexbox;display: flex;font-size: 1.025rem;height: 100%;-webkit-box-pack: justify;-webkit-justify-content: space-between;-ms-flex-pack: justify;justify-content: space-between;left: 0;position: absolute;top: 0;width: 100%;z-index: 1111;}
#hero-callouts section .textbox {background: rgba(0, 0, 0, .75);mix-blend-mode: multiply;padding: 1rem 1.375rem;width: 100%;}

#hero-callouts h2 {color: #FFF;font-size: 1.625rem;margin: 0;text-transform: uppercase;}
#hero-callouts p { color: #FFF; font-size: 1.025rem; margin:0; }
#hero-callouts span { color: #3398CC; font-size: 1.025rem; }
#hero-callouts section>a:hover .textbox { background: rgba(0, 0, 0, .85); }
#hero-callouts section>a:hover span { color: var(--dark-blue); }

#product-finder-callout {font-weight:700; background:#4B5257; color:#fff; float:left;clear:both; width:100%; text-align: center; padding: 3.25rem 1rem}
#product-finder-callout:before {content: "";display: inline-block;width: 2.5rem;height: 2.5rem;margin-right: 1rem;background: url(/images/icon-product-finder.svg) no-repeat center / contain;vertical-align: text-bottom;opacity: 0.25;}
#product-finder-callout .button {background:var(--red); box-shadow:inset 0 0 0 1px #979797}
#product-finder-callout .button:hover {background:var(--dark-red)}

#support {float: left; width: 100%; background: #4B5257; clear:both; padding: 3.75em 1em}
#support h2 {color: #fff}
#support select,
#support button {height: 3.13em; font-size: 1rem; border: 0}
#support select {padding: 0 1em; background: url(/images/select-arrow.svg) no-repeat #fff; background-position: calc(100% - 1em) center; cursor: pointer;  -moz-appearance:none}
#support button {box-shadow: inset 0 0 0 1px #979797}
#support button:before {left: 1px;top: 1px; height: calc(100% - 2px); background-image: url(/images/icon-representative.svg); background-repeat: no-repeat; background-position: center}
        .interior #support {padding: 0; margin-bottom: 2em; background: none}
        .interior #support form {float: none;}
        .interior #support h2 {color: #333}
        .interior #support select {border: 1px solid #ccc}

.downloads-search input {padding: 0 1em; height: 2.75rem}
section.pages {padding: 1.5em 0}
section.pages:first-of-type {padding-top: 0}
section.pages+section.pages {border-top: 1px dashed #ccc}
section.pages h2 {margin: 0}

/* Sales Rep Finder */
#sales-rep-finder .rep-search :is(input, select):not([type=radio], [type=checkbox])  {
    background-color:#fff;
    height: 2.6875rem;
    width: 100%;
}

#sales-rep-finder .rep-search [type=submit] {
    height: 2.6875rem;
    padding: 0 2em;
	font-weight: 700;
}

#sales-rep-finder .rep-search select  {
    background-image: url(/images/select-arrow-down.svg);
    background-position: calc(100% - 1em) 50%;
    background-repeat: no-repeat;
    padding-right:2.5rem;
}

#sales-rep-finder label  {
    display: block;
}

#sales-rep-finder .option-group  {
    align-items: flex-end;
    display: flex;
}

#sales-rep-finder .rep-search > * {
    margin-top: 1.5em;
}

#sales-rep-finder .rep-search .option-group  {
    gap:2.375rem;
}

#sales-rep-finder .rep-search .option-group + .option-group  {
    gap:0.75em 1.25rem;
}

#sales-rep-finder .distributor-results  {
    margin-top: 3.125rem;
}

#sales-rep-finder .distributor-results h2  {
    border-bottom: 2px solid #DCDCDC;
    font-size: 1em;
    font-weight: 700;
    margin-bottom: clamp(1rem, 0.364rem + 3.18vw, 2.75rem);
    padding-bottom: 0.25em;
}
#sales-rep-finder .rep-list  {
    display: flex;
    flex-direction: column;
    gap: clamp(1rem, 0.364rem + 3.18vw, 2.75rem);
}

#sales-rep-finder .rep-list > li  {
	padding: clamp(1.875rem, 1.261rem + 3.07vw, 3.563rem) clamp(1rem, 0.455rem + 2.73vw, 2.5rem);
	background: #F3F3F3;
	border-radius: 8px;
	line-height: 1.125em;
}

#sales-rep-finder .rep-list > li.with-image  {
	margin-left: clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem);    
	padding-left: clamp(2.813rem, 1.835rem + 4.89vw, 5.5rem);
}

#sales-rep-finder .distributor-results .rep-list > li:before {
    display: none;
}

#sales-rep-finder .rep-image  {
    border: 1px solid #DCDCDC;
    border-radius: 0.5rem;
    left: calc(clamp(1.875rem, 1.42rem + 2.27vw, 3.125rem) * -1);
    overflow: hidden;
    position: absolute;
    top: 1.625rem;
    width: clamp(3.75rem, 2.841rem + 4.55vw, 6.25rem);
}

#sales-rep-finder .rep-image img {
    aspect-ratio: 99/122;
    display: block;
    object-fit: cover;
    object-position: center;
}

#sales-rep-finder .rep-list span {
    display: block;
}

#sales-rep-finder .rep-list .rep-details {
	margin-bottom: 1.25em;
}

#sales-rep-finder .rep-list .rep-name {
    font-size: clamp(1.25rem, 1.068rem + 0.91vw, 1.75rem);
	font-weight:900;
	margin-bottom: 0.3125rem;
}

#sales-rep-finder .rep-list .rep-title {
    font-size: 0.875em;
	font-style: italic;
}

#sales-rep-finder .rep-list .rep-company {
    margin: 0.875em 0 0;
	font-weight: 700;
}

#sales-rep-finder .rep-list .rep-contact span {
    margin-bottom: 0.875em;
}

#sales-rep-finder .rep-list .rep-products {
    border-top: 1px solid #DCDCDC;
	padding-top: 1.25em;
}

#sales-rep-finder .rep-list .rep-products ul {
	margin: 0.5em 0 0;
}

#sales-rep-finder .rep-list .rep-products li {
	line-height: 1.5556;
}

#sales-rep-finder .rep-list .rep-products li:before {
    opacity: 1;
}






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

#CAD360 {
  background: #FFF;
  clear: both;
  padding-block: 2.5em 3em;
  text-align: center;
}

#CAD360 .wrap {
  display: flex;
  justify-content: space-between;
  max-width: 81.125rem;
  padding-inline: 1.5em;
}

#CAD360 img.cad-360 {
  display: block;
  margin: 0 auto 2em;
  max-width: 8.4375em;
}

#CAD360 h2 {
  font-size: clamp(1.5em, 1.068em + 2.16vw, 2.6875em);
  line-height: 1.1;
}

#CAD360 p {
  font-size: clamp(1.0625em, 1.04em + 0.11vw, 1.125em);
}

#CAD360 .button {
  margin: .5em 0 0;
}

#CAD360 figure {
  margin: 0;
}




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

#welcome {
  background: #e1dcd7;
  clear: both;
  position: relative;
}

#welcome .wrap {
  max-width: 81.125rem;
  padding-inline: 1.5em;
}

#welcome h1 {
  font-size: clamp(1.5em, 1.068em + 2.16vw, 2.6875em);
  line-height: 1.1;
}

#welcome p {
  font-size: clamp(1.0625em, 1.04em + 0.11vw, 1.125em);
}

#welcome p:last-child {
  margin: 0;
}

#welcome figure {
  line-height: 0;
  margin: 0;
}



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

.home-blog {
  background: no-repeat center / cover;
  padding-block: 3.5em;
  position: relative;
  z-index: 0;
  display:inline-block;
  width: 100%
}

.home-blog::before {
  background: #000;
  content: '';
  inset: 0;
  opacity: .7;
  position: absolute;
  z-index: -1;
}

.home-blog .wrap {
  max-width: 81.125rem;
  padding-inline: 1.5em;
}

.home .home-blog h2 {
  color: #FFF;
  font-size: 1.125em;
}

.home-blog ul.ws-flex {
  margin: 0;
}

.home-blog li>a {
  background: rgba(255,255,255,.94);
  border: 1px solid #FFF;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.home-blog figure {
  aspect-ratio: 294 / 196;
  line-height: 0;
  margin: 0;
}

.home-blog figure img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

.home-blog li>a>div {
  display: flex;
  flex: 1 0 auto;
  flex-direction: column;
  padding: 1.25em clamp(1em, 0.821em + 0.57vw, 1.25em) 1.5em; /* 500 - 1200 */
}

.home-blog strong.title {
  color: #000;
  display: block;
  font-size: clamp(1.125em, 1.078em + 0.23vw, 1.1875em);
  line-height: 1.158;
  margin: 0 0 .5em;
}

.home-blog p {
  color: #000;
  line-height: 1.25;
}

.home-blog span.link {
  margin-top: auto;
  font-weight: 700;
}

.home-blog .button {
  display: table;
  margin: 3em auto 0;
}



/* ------------------------------ */
.bg-ribbon {clear: both; float: left; width:100%; color: #fff; position: relative; border-top: 1px solid #fff}
.bg-ribbon .wrap {overflow: visible}
.bg-ribbon h2 {color: #fff}
.bg-ribbon p {font-size: 1.125rem;color: #FFFFFF;text-shadow: 0 1px 5px rgba(0,0,0,0.80);}
.bg-ribbon .button {text-shadow: none}

#featured-video {clear: both; float: left; width:100%; background: #e1dcd7; padding: 3.75em 1em}
#featured-video .video {border: 1px solid #999999}
#featured-video h2 {font-weight: 800; text-transform: uppercase; font-size: 1.75em; color: #4B5257;}
#featured-video p {font-size: 1.125rem; color: #2C2C2C;}
#featured-video .button {margin-top: 2em}
#featured-video .button:before {background-image: url(/images/icon-play.svg); background-position: center; background-position: center; background-repeat: no-repeat}


.logo-header {
        display: flex;
        gap:0.5rem;
        margin-bottom: 2em;
        text-align: center;
}

.logo-header .logo-container {
        margin: 0 auto;
}

.logo-header .logo-container img {
        height: auto;
        max-width: 100%;
}

.logo-header h1 {
        margin:0;
}

.logo-header p {
        width: 100%;
}

.logo-header :is(ul, ol) {
        margin-left: 0;
        text-align: left;
}

.logo-header ol {
        padding-left:1.75rem;
}

.logo-header ol li {
        margin-bottom: 0.75rem;
}

.content .logo-header .videoContainer {
        border: 2px solid #ececec;
        aspect-ratio: 315/249;
        padding: 0;
        height: auto;
}

#cad-filters {border-bottom: 2px solid #E4E5E7; padding-bottom: 1.56em; margin-bottom: 1.56em;}
#cad-filters .filter-buttons {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;}
#cad-filters .filter-buttons button {position: relative; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
#cad-filters .filter-buttons button::after {display: block; transition: ease all 200ms; content: ""; width: 100%; height: 3px; position: absolute; bottom: -3px; left: 0;}
#cad-filters .filter-buttons button.on::after {background: #00739B;}
#cad-filters .filter-buttons button.on,
#cad-filters .filter-buttons button:hover {background: #00739B}
#cad-filters .filter-buttons button+button {margin-left: 2px}
#cad-filters .filters > ul {margin-top: 2px; display: none; padding: 1em; width: 100%; background: #EFEFEF; border: 2px solid #00739B;flex-wrap: wrap; justify-content: flex-start; align-content: stretch; align-items: flex-start;}
#cad-filters .filters > ul:last-child {justify-content: flex-end;}
#cad-filters .filters > ul > li {position: relative;text-indent:0; padding: 0 1em;background: none;}
#cad-filters .filters > ul li+li {margin: 0}
#cad-filters .filters > ul > li:before,
#cad-filters .filters > ul > li li:before {display: none}
#cad-filters .filters > ul > li li {padding-left: 0.6em}
#cad-filters .filters > ul > li input {display: none;}
#cad-filters .filters > ul > li label {width: 100%;font-size: 0.875rem;z-index: 1;transition: ease all 200ms;position: relative;cursor: pointer;padding: 2px 5px 2px 18px;display: block;}
#cad-filters .filters > ul > li label::before {content: "";transition: ease all 200ms;width: 12px;height: 12px;display: block;position: absolute;top: 0.5em;left: 0;background: url(/images/icons/misc/white-check-mark.svg) no-repeat center #fff;box-shadow: inset 0 0 0 1px #acacac;border-radius: 2px;}
#cad-filters .filters > ul > li :checked + label::before {background-color: #00A6E0;box-shadow: inset 0 0 0 1px #00A6E0;}
#cad-filters .filters > ul > li span {position: absolute;width: 100%;pointer-events: none;opacity: 0;top: 0;left: 0.38rem;background: #000;color: #fff;z-index: 2;transform: translateY(calc(-100% - 4px));padding: 10px;line-height: 120%;font-size: 11px;border-radius: 3px;}
#cad-filters .filters > ul > li li span {left: 0}
#cad-filters .filters > ul > li span::before {top: 100%; left: 1.4em; border: solid transparent; border-top-width: medium; border-right-width: medium; border-bottom-width: medium; border-left-width: medium; border-top-color: transparent; border-right-color: transparent; border-bottom-color: transparent; border-left-color: transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none; border-color: rgba(0, 0, 0, 0); border-top-color: rgba(0, 0, 0, 0); border-top-color: #000000; border-width: 4px; margin-left: -4px;}
#cad-filters .filters > ul > li span.on {opacity: 1;}
#cad-filters .filters > ul > li a {font-size: 0.875rem; display: block; padding: 0.13rem 0.31rem 0.13rem 1rem; background: url(/images/icon-link.svg) no-repeat center left / 0.63rem 0.63rem;}

#CAD-drawings li {display: block; text-indent:0; background: #fff; font-size: 0.875em; margin-bottom: 2.25rem; padding: 0 1rem 3.75rem; position: relative; border: 1px solid #ccc; color: #5D5D5D; line-height: 1.25rem; color: #5D5D5D}
#CAD-drawings li .product-image {width: calc(100% + 2rem); margin-bottom: 1rem; overflow: hidden; margin-left: -1rem; height: auto; padding-bottom: 88%; position: relative}
#CAD-drawings li .product-image img {position: absolute; left: -2px; top: 0; max-width: calc(100% + 2px); max-height: 100%; width: auto; height: auto;}
#CAD-drawings li h2 {display: block; font-size: 1.38rem; text-transform: uppercase; margin-bottom: 0.5rem; color: var(--blue); font-weight: 800}
#CAD-drawings li p {font-weight: 400; display: block; font-size: 0.875rem; line-height: 1.25em; margin: 0.75em 0 0; color: #5D5D5D}
#CAD-drawings li ul {display: block; margin: 1em 0 0}
#CAD-drawings li li * {color: #5D5D5D}
#CAD-drawings li li {display: block; font-size: 0.875rem; font-weight: 400; padding: 0; color: #5D5D5D}
#CAD-drawings li span {color: #5D5D5D; font-weight:700}
#CAD-drawings li li+li {margin: 0}
#CAD-drawings li li:before {display: none}
#CAD-drawings li .learn-more {position: absolute; font-weight: 700; bottom: 0; left: 0; width: 100%; line-height: 50px; display: block; text-align: center; color:#EFEFEF; background: var(--blue); font-size: 17px;}
#CAD-drawings ul li .cad-image { cursor: pointer; display: block; padding-bottom: 60%; background-position: center; background-size: contain; background-repeat: no-repeat; width: 100%; margin: 1em 0 0.75em }
#CAD-drawings li {padding: 0 1rem 5.75rem}
#CAD-drawings li:before {display: none}
#CAD-drawings li .product-links {display: flex; font-size:0.875rem; margin:0.75em 0 0;}
#CAD-drawings li .product-links p {margin-top:0; flex-shrink: 0; margin-right: 0.3125rem}
#CAD-drawings li .product-links div a {font-weight: 700}
#CAD-drawings li .product-link {display: block;}
#CAD-drawings li .button {position: absolute; bottom: 1rem; left: 1rem; width: calc(100% - 2rem); display: block; text-align: center; color:#EFEFEF; background: var(--blue); font-size: 17px;}
#CAD-drawings li .button:hover {background: var(--dark-blue)}
#CAD-drawings li.no-models {all: unset; padding: 1em 1.5em; background: #efefef;}
#CAD-drawings li.no-models a {font-weight: 700}

#content .icon-links li {padding: 0; text-indent:0; margin: 0.5em;}
#content .icon-links li:before {display: none}
#content .icon-links li,
#content .icon-links li a {display: block; text-align: center; font-weight:600}
#content .icon-links li a {padding:0.5em 1em 1em; line-height: 1.2em; border-radius: 5px; border: 1px solid #ccc; color: var(--blue);}
#content .icon-links li a:hover {border-color: var(--dark-blue); color: var(--dark-blue)}
#content .icon-links li a:before {content: ""; display: block; height: 6em}
        #content .icon-links .brochures a:before {background: url(/images/icon-documents.svg) no-repeat center}
        #content .icon-links .cad-models a:before {background: url(/images/icon-conveyor-belt.svg) no-repeat center}
        #content .icon-links .aluminum-profile a:before {background: url(/images/icon-cad-models-aluminum.svg) no-repeat center}
        #content .icon-links .quickdesigner a:before {background: url(/images/icon-guarding.svg) no-repeat center}
        #content .icon-links .case-studies a:before {background: url(/images/icon-briefcase.svg) no-repeat center}
        #content .icon-links .manuals a:before {background: url(/images/icon-operating-manuals.svg) no-repeat center}
        #content .icon-links .videos a:before {background: url(/images/icon-videos.svg) no-repeat center}
        #content .icon-links .galleries a:before {background: url(/images/icon-photogallery.svg) no-repeat center}
        #content .icon-links .support a:before {background: url(/images/icon-sales-and-support.svg) no-repeat center}
        #content .icon-links .white-papers a:before {background: url(/images/icon-white-papers.svg) no-repeat center}

#content ul.operating-manuals li {padding-left: 0}
#content ul.operating-manuals li:before {display: none}
#content ul.operating-manuals li a {padding: 0.25rem 0.25rem 0.25rem 3rem; position: relative}
#content ul.operating-manuals li a:before {content: ""; display: block; position: absolute; width: 1.25em; height: 1.25em; top: 0.19em; left: 1.25em; background: url(/images/icon-operating-manuals-grey.svg) no-repeat center / contain;}

#content .search-bar {
        align-items: center;
        display: flex;
        gap: 1em;
        justify-content: space-between;
        margin-bottom:2em;
        position: relative;
}
#content .search-bar form {display: flex; flex: 1 1 auto}
#content .search-bar form input[type="text"] {width: calc(100% - 5.25em)}
#content .search-bar form input[type="submit"] {padding: 0; width: 5em; text-align: center}

#content .search-bar .toggleButtons {
        display: flex;
        gap: 5px;
        justify-content: center;
}

#content .search-bar .toggleButtons button {
        background: #fff;
        color: #000;
        box-shadow: inset 0 0 0 1px #D8D8D8;
        border-radius: 4px;
        font-size: 0.875rem;
        display: inline-flex;
        align-items: center;
        gap: 0.35em;
        padding: 0 1em;
}
#content .search-bar .toggleButtons button:is(:hover, :focus-visible),
#content .search-bar .toggleButtons button.on {
        box-shadow: inset 0 0 0 1px #666;
}

#content .search-bar .toggleButtons button:before {
        content:"";
        width: 1em;
        height: 1em;
        display: block;
        border-radius: 50%;
        box-shadow: inset 0 0 0 1px #ccc;
}

#content .search-bar .toggleButtons button.on:before {
        background: green url(/images/compare-check.svg) no-repeat center / 60% auto;
        box-shadow: none;
}

#content .project-list {
        display: grid;
        gap:0.5em;
        grid-auto-rows: 1fr;
}

#content .project-list li {
        margin:0;
        padding:0;
}

#content .project-list li:before {
        display: none;
}

#content .project-list li a {
        border: 1px solid #D8D8D8;
        border-radius: 4px;
        display: block;
        display: flex;
        flex-direction: column;
        height: 100%;
        line-height: 1.25em;
        padding: 1em;
}

#content .project-list li a:is(:hover, :focus-visible) {
        border-color: var(--blue);
}

#content .project-list li a h2 {
        color:#000;
        margin: 0 0 0.25em;
}

#content .project-list li a span {
        font-size: 0.875em;
        color:#666;
}

#content .project-list li a span:last-of-type {
        margin-bottom: 1em;
}

#content .project-list li a strong {
        margin-top: auto;
        font-size: 0.875em;
}


#content > .image-links {text-align: center; margin: 2em 0; font-weight: 700;}
#content > .image-links li {padding: 0;}
#content > .image-links li:before {display: none}
#content > .image-links li a {display: block; position: relative; background: var(--blue); border: 1px solid var(--blue); color: #fff; line-height: 50px}
#content > .image-links li a:hover {background: var(--dark-blue); border-color: var(--dark-blue)}
#content > .image-links li a:before {content: ""; transition: ease all 200ms; display: block; position: relative; z-index: 1; padding-bottom: 80%; opacity: 0.75; mix-blend-mode: multiply;}
#content > .image-links li a:hover:before {opacity: 1}
#content > .image-links li a:after {content: ""; transition: ease all 200ms; display: block; width: 100%; padding-bottom: 80%; background:  #e1dcd7; position:absolute; top:0; left:0;}
#content > .image-links li a:hover:after {background: #fff}
        #content > .image-links li a.system-comparisons:before {background: url(/images/products/image-link-pallet-conveyor-comparison.jpg) no-repeat center / cover}
        #content > .image-links li a.configurations:before {background: url(/images/products/image-link-configurations.jpg) no-repeat center / cover}
        #content > .image-links li a.modules:before {background: url(/images/products/image-link-modules.jpg) no-repeat center / cover}
        #content > .image-links li a.industries:before {background: url(/images/products/image-link-industries.jpg) no-repeat center / cover}
        #content > .image-links li a.sanitary-levels:before {background: url(/images/products/image-link-sanitary-levels.jpg) no-repeat center / cover}

.color-legend span {display: inline-block; vertical-align: middle; font-weight:700; margin-right: 2em}
.color-legend span:before {content: ""; margin-right: 0.5em; display: inline-block; vertical-align: text-bottom; border-radius: 50%; width: 1.5em; height: 1.5em;}
.color-legend span:first-child:before {background: #4B5257}
.color-legend span:nth-child(2):before {background: #74ad00}
.color-legend span:nth-child(3):before {background: #39c}

.cleanMoveIndustries-table {border: 1px solid #ccc; margin-top: 2em}
.cleanMoveIndustries-table tbody > tr > th {background: #ccc; padding: 0.75rem}
.cleanMoveIndustries-table tbody > tr > td {text-align: center}
.cleanMoveIndustries-table tbody > tr > td td td {width: 33%; line-height: 2em; padding: 0.25em 1em; background: #efefef}
.cleanMoveIndustries-table tbody > tr > td td {height: 3em; vertical-align: middle; position: relative}
.cleanMoveIndustries-table tbody > tr > td td.dot+.dot {border-left: 1px solid #ccc;}
.cleanMoveIndustries-table tbody > tr > td td.dot:before {content: ""; display: block; border-radius: 50%; width: 1.5em; height: 1.5em; position: absolute; top:50%; left:50%; transform: translate(-50%, -50%)}
.cleanMoveIndustries-table tbody > tr > td td.standard:before {background: #4B5257}
.cleanMoveIndustries-table tbody > tr > td td.plus:before {background: #74ad00}
.cleanMoveIndustries-table tbody > tr > td td.ultra:before {background: #39c}
.cleanMoveIndustries-table tbody > tr > td.background {width: 35%}
.cleanMoveIndustries-table tbody > tr.pharmaceutical > td.background {background: url(/images/products/cleanMoveIndustries-1.png) no-repeat center / cover}
.cleanMoveIndustries-table tbody > tr.baking > td.background {background: url(/images/products/cleanMoveIndustries-2.png) no-repeat center / cover}
.cleanMoveIndustries-table tbody > tr.fruit > td.background {background: url(/images/products/cleanMoveIndustries-3.png) no-repeat center / cover}
.cleanMoveIndustries-table tbody > tr.meat > td.background {background: url(/images/products/cleanMoveIndustries-4.png) no-repeat center / cover}
.cleanMoveIndustries-table tbody > tr.dairy > td.background {background: url(/images/products/cleanMoveIndustries-5.png) no-repeat center / cover}
.cleanMoveIndustries-table tbody > tr > td td td+td {box-shadow: inset 1px 0 0 0 #ccc}
.cleanMoveIndustries-table tbody > tr.pharmaceutical > td td td {width: 50%}
.cleanMoveIndustries-table tbody > tr.pharmaceutical > td td.standard {width: 40%}
.cleanMoveIndustries-table tbody > tr.pharmaceutical > td td.plus {width: 40%}
.cleanMoveIndustries-table tbody > tr.pharmaceutical > td td.ultra {width: 15%}
.cleanMoveIndustries-table tbody > tr.baking > td td.standard {width: 40%}
.cleanMoveIndustries-table tbody > tr.baking > td td.plus {width: 40%}
.cleanMoveIndustries-table tbody > tr.baking > td td.ultra {width: 15%}
.cleanMoveIndustries-table tbody > tr.fruit > td td.standard {width: 33%}
.cleanMoveIndustries-table tbody > tr.fruit > td td.plus {width: 66%}
.cleanMoveIndustries-table tbody > tr.meat > td td.plus,
.cleanMoveIndustries-table tbody > tr.meat > td td.ultra {width: 50%}
.cleanMoveIndustries-table tbody > tr.dairy > td td.standard {width: 15%}
.cleanMoveIndustries-table tbody > tr.dairy > td td.plus {width: 40%}
.cleanMoveIndustries-table tbody > tr.dairy > td td.ultra {width: 40%}

.palletConveyor-table img {max-width: 100%; float: left; height: auto;}
.palletConveyor-table td {border: 2px solid #ccc; padding: 0.75rem}
.palletConveyor-table td.logo {padding: 1em}
.palletConveyor-table td.image {padding: 0}
.palletConveyor-table td.title {background: #efefef; font-weight: 700}

.clearFix:before {content: ""; display: block; clear: both}

#leaving-popover{display:none}
.popover {position: fixed; z-index: 10; top: 0; left:0; width:100%; height: 100%; padding: 1em; background:rgba(0,0,0,0.9); -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: 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;}
.popover .container {max-width: 40em; position: relative}
.popover .container .close {position: absolute; cursor: pointer; transition: ease all 200ms; right: 0; top: -1.5em; width: 1.5em; height: 1.5em; font-size: 2.25em; line-height: 1.5em; text-align: right; color: #fff;}
.popover .container .close:hover {opacity: 0.5}
.popover .container .popover-wrap {padding: 2em; max-height:calc(100vh - 6.9375rem); overflow:auto; text-align: left; background:#fff; border-radius: 4px; max-width: 40em}
.popover .container .popover-wrap p.center {text-align: center}
.popover .container .popover-wrap .button {padding: 1em 2.75em;}
        .popover.cad-model-popover .container,
        .popover.cad-model-popover .container .popover-wrap {max-width: 54rem}
        #content .popover.cad-model-popover .container .popover-wrap p,
        #content .popover.cad-model-popover .container .popover-wrap ol,
        #content .popover.cad-model-popover .container .popover-wrap ul {font-size:1rem}
        #content .popover.cad-model-popover .container .popover-wrap img {max-width:100%; height:auto}

main #trigger-popover.help-button {background:var(--dark-blue); font-size:1rem;}
main #trigger-popover.help-button:hover {background:#333333}
main #trigger-popover.help-button:before {content:""; padding-left: 1em; margin-right:0.25em; background:url(/images/alert-box-icon-exclamation-point.svg) no-repeat center / contain}

#content .callout.alert {margin-top:1em; padding:1em 2em 1em 5.25em}
#content .callout.alert:before {width:4em; background: var(--blue) url(/images/alert-box-icon-exclamation-point.svg) no-repeat center}
#content .callout.white-paper {width:100%}
#content .callout.white-paper:before {background: var(--blue) url(/images/white-paper-icon.svg) no-repeat center}
.landing #content .callout.white-paper {margin:0 0 1em}

.landing .pageHeader .wrap .alert-callout-box {display: block; font-weight:400; color:#fff; padding: 1em; background: rgba(0,0,0,0.5); font-weight:500; border-radius: 8px;}
.landing .pageHeader .wrap .alert-callout-box:hover {background: var(--blue); color:rgba(255,255,255,0.65)}
.landing .pageHeader .wrap .alert-callout-box span {font-weight: 900; color:var(--dark-blue)}
.landing .pageHeader .wrap .alert-callout-box:hover span {color:#fff}
.landing .pageHeader .wrap .alert-callout-box .icon {display: inline-block; vertical-align: middle; margin-right: 0.5em; width:2em; height: 2em; background: url(/images/alert-box-icon-exclamation-point.svg) no-repeat center / contain}
.landing .pageHeader .wrap .alert-callout-box {margin-top: 2em;}
.landing #products .top .wrap > *:last-child {margin-bottom: 0;}

.pay-button {display: flex;}
.pay-button button + a {line-height: 0;}
.pay-button img {height: 3.4375rem; width: auto; margin-left: 1.5rem;}
.pay-button a:hover img {opacity: .7;}

#products-landing-page #landing-top {text-align:center; background:#e1dcd7}

/* Scanned Project (from QR code)*/
#scanned-project #details-top {
        background: #e1dcd7;
        text-align: center;
}

#scanned-project #details-top .project-details {
        border:2px solid #fff;
        border-radius: 20px;
        box-shadow: 0 10px 20px rgba(0,0,0,0.125);
        display: flex;
        margin: 0 auto;
        max-width: 44.375em;
        overflow:hidden;
}

#scanned-project #details-top .mk-logo {
        align-content: center;
        align-items: center;
        background:#fff;
        display: flex;
        justify-content: center;
        padding:1em;
}

#scanned-project #details-top .mk-logo img {
        height: auto;
        max-width: 5.75rem;
}

#scanned-project #details-top .project-info {
        flex: 1 1 auto;
        font-size: 0.875em;
        padding: 1em;
        text-align: left;
        width:100%;
}

#scanned-project #details-top .project-info table {
        width:100%;
}

#scanned-project #details-top .project-info table td {
        padding: 2px;
        vertical-align: middle;
}

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

#scanned-project #details-top .project-info table td:nth-child(3) {
        max-width:2.625rem;
        padding-left: 0.625rem;
}

#scanned-project #details-top .project-info .white-box {
        background:#fff;
        font-weight:600;
        line-height: 1.5rem;
        padding: 0 0.3125rem;
}

#scanned-project #details-top .help-text *:last-child {
        margin-bottom: 0;
}

#scanned-project #details-bottom {
        clear:both;
}

#scanned-project #details-bottom .wrap {
        display: flex;
        flex-wrap: wrap;
        margin: 0 auto;
        max-width: 75rem;
}

#scanned-project #details-bottom .ribbon{
        width: 100%;
}

#scanned-project #details-bottom ul {
        margin: 0;
}

#scanned-project #details-bottom li + li{
        margin-top: 3px
}

#scanned-project #details-bottom li a{
        background: #EFEFEF url(/images/icons/32x32/mime-pdf.png) no-repeat 0.625rem 0.625rem / auto 1rem;
        border-radius: 0.25rem;
        color: #333;
        display: block;
        line-height: 1.25em;
        padding: 0.5rem 1em 0.5rem 2em;
}

#scanned-project #details-bottom li a:is(:hover,:focus) {
        box-shadow: inset 0 0 0 1px var(--blue)
}

#scanned-project #details-bottom .videos {
        display: grid;
}

#scanned-project #details-bottom .help-callout {
        background: #efefef;
        border-radius: 8px;
        text-align: center;
        width: 100%;
}

#scanned-project #details-bottom .help-callout p {
        align-content: center;
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 1em 0.5em;
        justify-content: center;
        margin:0;
}

#scanned-project #details-bottom .help-callout .button {
        padding:11px 1em;
}

#scanned-project #details-bottom .products {
        display: flex;
        flex-wrap: wrap;
        gap: var(--ws-gap);
}

#scanned-project #details-bottom .products a {
        align-content: stretch;
        align-items: stretch;
        border: 1px solid var(--blue);
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        width: calc( 100% / var(--ws-columns) - ( var(--ws-gap) * ( var(--ws-columns) - 1 ) / var(--ws-columns) ) );
}

#scanned-project #details-bottom .products .product-image {
        aspect-ratio: 1/1;
        margin-bottom: 1.5em;
        overflow: hidden;
        padding-bottom: 100%;
        position: relative;
}

#scanned-project #details-bottom .products .product-image img {
        height: 100%;
        left:0;
        object-fit: cover;
        object-position: center;
        position: absolute;
        top:0;
        width:100%;
}
#scanned-project #details-bottom .products a h2{
        background: var(--blue);
        color:#fff;
        flex: 1 1 auto;
        padding: 0.5rem 1rem;
        margin:0;
        font-size: 1.125rem;
        line-height: 1.25em;
}

/* management overrides */
#wysiwygBody{background:#fff}

/* management table */
hr+.manage{margin-top:-1em}
.manage{border-bottom:1px solid rgba(0,0,0,.2);width:100%;line-height:1.3em}
.manage th{border-bottom:1px solid rgba(0,0,0,.2);text-align:left}
.manage th.right{text-align:right}
.manage th.sort{cursor:pointer}
.manage th.sort img{margin-left:5px}
.manage th img {position:relative;bottom:-2px}
.manage td,.manage th{padding:5px 5px 5px 0}
.manage td:first-child{padding-left:.8em}
.manage img.preload{display:none;position:absolute;z-index:9900;top:0;border:solid 1px #fff}
.manage td.icons img{margin-left:5px;position:relative;bottom:-2px}
.manage td:first-child.icons img{margin-left:0}
.manage td:first-child.icons{padding-left:3px;padding-right:3px}
.manage td.icons a:first-child img{margin-left:0}
.manage td.icons input{position:relative;bottom:2px;margin-left:5px}
.manage .hidden{font-style:italic;color:#900}
.manageButton{text-align:right;padding:10px 0}
.alternate tbody tr:nth-child(even), .even{background:#fff}
.alternate tbody tr:nth-child(odd), .odd {background:rgba(0,0,0,.06)}
.manage+hr, .manage+.manageLinks+hr{margin-top:50px}
.manageLinks{margin-top:10px}
.manageLinks a{white-space:nowrap}
.manageLinks a img{position:relative;bottom:-2px}
.manageLinks button{margin-left:5px}
.manageButtons{text-align: right;padding:10px 0}
.wsReturnToButton {float:right;margin-top:-3.5em}
.manage.rightFirstChild td:first-child{text-align:right}
.sortRow th{cursor:pointer}
.manageEllipsis{width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block}
#content .wsManagementLogin td {padding: 5px; vertical-align: middle}
#content .wsManagementLogin input[type="text"].wsFormBox,
#content .wsManagementLogin input[type="password"].wsFormBox {padding: 0.5em; font-size: 1em}
#wsDashboardLinks > ul > li:before,
#wsDashboardButtons > ul > li:before {display: none}
#wsDashboardLinks > ul > li {padding-left: 0}




/* FOOTER ------------------------------ */

body>footer {
  background: #e1dcd7;
  font-size: 1rem;
  line-height: 1.25rem;
  padding: 3.75rem 0 0;
  text-align: center;
}

body>footer .fatFooter {
  align-items: center;
  display: flex;
  justify-content: space-between;
  margin-bottom: 4.38rem;
  max-width: 42.5rem;
  overflow: visible;
  padding-inline: 1.5em;
}

body>footer .logo {
  aspect-ratio: 1;
  margin: 0;
  width: 4.875rem;
}

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

body>footer .logo img {
  height: 100%;
  object-fit: contain;
  width: 100%;
}

body>footer .title {
  font-weight: 800;
  color: var(--ws-gray);
  display: block;
  font-size: 1rem;
  margin-bottom: .75em;
  text-transform: uppercase;
}

body>footer .col {
  order: 2;
}

body>footer .col span {
  display: block;
}

body>footer .col span.mb {
  margin: 0 0 1em;
}


body>footer .social { margin: 1.25em 0 0; }
body>footer .social a { display: inline-block; vertical-align: middle; }
body>footer .social a img {filter: grayscale(1); transition:ease all 200ms}
body>footer .social a+a {margin-left: 1.25em}
body>footer .social a:hover img {filter: grayscale(0)}

body>footer a {
  color: var(--ws-gray);
}

body>footer a:hover,
footer a:active,
body>footer .col>ul>li>a:hover {color:var(--dark-blue)}

body>footer a.on, footer .on>a,
body>footer .col>ul>li>a.on {
  text-decoration:none;
  color:var(--dark-blue);
}

body>footer>.sub-footer {
  border-top: 1px solid rgba(0,0,0,0.05);
  font-size: 1rem;
  line-height: 1.25rem;
  padding: 1.25rem 1rem;
}

body>footer nav { display: inline; }
body>footer>div { min-height: 18px; }




/* TRANSITIONS ------------------------------ */
a, a *,button,.button,input[type="button"],input[type="submit"],.rsFullscreenBtn,#alertApp,#alertApp span,#alertDesc,#navContainer li,.hamburger{-webkit-transition: all 200ms ease;transition: all 200ms ease}
input:focus, select:focus, textarea:focus{-webkit-transition: background-color 150ms ease;transition: background-color 150ms ease}


/* FORM ERROR ------------------------------ */
.formError {background-color:Black; border:0; padding: 5px 10px; color:#fff; display:none; margin:0 0 2px; z-index:9999; border-radius: 10px; -moz-box-shadow:0 2px 2px #333; -webkit-box-shadow:0 2px 2px #333;}
.formError p {margin:0; font-size:.9em; }
.formError em { border:10px solid;  border-color:Black transparent transparent; bottom:-17px; display:block; height:0; left:40px; position:absolute; width:0; }

/* NEWS */
#content .article-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: 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;}
#content .article-list article {width: 32.5%; position: relative; margin: 0 1% 3em 0; border: 0; padding: 1em 1.5em 5em; border: 1px solid #ccc;}
#content .article-list article:nth-of-type(3n+3) {margin-right: 0}
#content .article-list article h2 {font-size: 1.5em; margin-bottom: 0.25em}
#content .article-list article h2+time,
#content .blogCredits,
#content .tags {font-size: 0.875rem; opacity: 0.5; font-style: italic; margin-bottom: 1em; display: block}
#content .blogCredits,
#content .tags {opacity: 1; margin: 0}
#content .blogCredits:not(footer) {opacity: 1; margin: -1em 0 1em}
#content .tags {margin-bottom: 2em}
#content .blogCredits:not(footer) .addthis_inline_share_toolbox {margin-top: 3em}
#content .article-list article p {font-size: 1em}
#content .article-list article img {max-width: 100%; height: auto}
#content .article-list article .button {position: absolute; margin: 0; text-align: center; bottom: 0; left: 0; width: 100%; color: #fff}


.blog article, .blog aside, .blog .tags, .blog .comments{border-top:1px solid #ccc;margin:2em 0;padding-top:2em}
#content article.blog>h1{margin-bottom:.3em}
.blogCredits{font-size:.8em;margin-bottom:2em}
.blogCredits>p{margin-bottom:.5em}
.blogContinue a{background-color:#00a6e0;color:#fff; padding: .5em .5em}
.blogContinue a:hover {background: #F3342F}


article#content>h1{margin-bottom:.5em}
/*official social media plugins should be wrapped in <div class="blogShare">*/
.blogShare{display:inline-block;position:relative;overflow:auto}
.blogShare>*{float:left;margin:0 .5em 0 0}
/*facebook override*/.fb-like, .fb-like *{line-height: 1.28}
/*linkedin override*/.blogShare, .blogShare *{box-sizing:content-box;-moz-box-sizing:content-box; transition:none}

.blogPost .automate-widget {float: left; margin: 1em 3em 1em 0}


@media screen and (max-width: 1060px) {
#content .article-list article,
#content .article-list article:nth-of-type(3n+3) {width:49%; margin-right: 2%}
#content .article-list article:nth-of-type(even) {margin-right: 0}
}
@media screen and (max-width: 800px) {
#content .article-list article,
#content .article-list article:nth-of-type(3n+3),
#content .article-list article:nth-of-type(even) {width: 100%; margin: 1em 0}
.blogPost .automate-widget {float: none; margin: 1em auto 2em}
}