/* @import url(/includes/css/grid-flex.css); */ @charset "UTF-8"; /* Web Solutions 4.0 Compatible */ 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} 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:#000} #skipNavigation{background:#fff;color:#000;padding:.5em;position:absolute;left:0;top:-1000px;z-index:10} #skipNavigation:focus,#skipNavigation:active{top:0;} iframe[src="/management/login/persistSession.aspx"] {display: none} /*page widths*/ body>header, #mainnav, main, body>footer, #alertApp{width:100%;clear:left;display:block;} #alertApp>*, .wrap{width:100%;max-width:44.375rem;margin-left:auto;margin-right:auto;position:relative;} .wrap.full { max-width: 100%; } /* text */ body, .text, input, button, select, textarea {font-family: 'Roboto Condensed', sans-serif;line-height:1.4375;color:#101820;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;} .text{font-size: 1rem} a{color: #50884b;text-decoration:none;} a:hover, a:active {color:#2B4229} 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, th{font-weight:400; 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, .highlight + h2, .highlight + h3, .highlight + h4, .highlight + h5, .highlight + h6, table + :where(h2,h3,h4,h5,h6) { margin-top:2rem; } .textColor, h1, h2, h3, h4, h5, h6, h7, h8, h9, th, dt{color: #50884b;} em, i, q, cite, .italic{font-style:italic} b, strong{font-weight:700} u{text-decoration:none} hr{border:0;border-top:3px solid #ECECED;margin:2em 0;padding-top:1px} p {font-size:1em} h1 {color:#101820; font-size: 1.8125rem;font-family: 'Roboto Slab', serif; font-weight: 700; margin-bottom:1.5rem} h2 {color:#101820; font-size: 1.375rem; font-weight:700} h3 {color:#101820; font-size: 1.3125rem; font-weight:700} h4, th{color:#101820; font-size: 1.1875rem; font-weight:700} p.intro {font-size: 1.125rem; line-height: 1.5625rem} sup, sub {font-size:.6em; line-height:.6em;vertical-align:baseline;position:relative} sup {bottom:1ex} sub {top:.5ex} /* MAIN ------------------------------ */ .menu{cursor: pointer} main, .mceContentBody{background:#fff} .contentEditor{background:#fff;min-width:100%;} /* sidenav */ #sidenav{width:100%;overflow:hidden;margin:0 0 3rem} #sidenav ul {padding: 0} #sidenav li {height:1%; position:relative; overflow:hidden} #sidenav li a {line-height:1.1em;display:block} /* t1 */ #sidenav > ul > li > a {font-family: 'Roboto Slab', serif; color:#000; font-size: 1rem; padding:0.5em 0 0.875em;line-height:1.1em;display:block; border-bottom:3px solid #ECECED} #sidenav > ul > li > a:hover, #sidenav > ul > li > a:active, #sidenav > ul > li.on > a:hover {color:#50884B} #sidenav > ul > li.on > a {color:#2B4229;} /* t2 */ #sidenav > ul > li > ul {} #sidenav > ul > li > ul > li{margin-bottom:1px} #sidenav > ul > li > ul > li > a{padding:0.6563em 1rem 0.6563em 1.125em;font-size:1em;color:#50884B; font-weight:700} #sidenav > ul > li > ul > li > a:hover, #sidenav > ul > li > ul > li > a:active, #sidenav > ul > li > ul > li.on > a{color:#fff; background:#2B4229;} /* t3 */ #sidenav > ul > li > ul > li > ul {padding:1em 0;border:0; background: rgba(0,0,0,0.08)} #sidenav > ul > li > ul > li > ul:before {content:""; display: block; position: absolute; top:0.4375rem; right:0.6875rem; width: 1.5rem; height: 1.5rem; pointer-events:none; background: url(/images/sidenav-white-arrow-down.svg) no-repeat center} #sidenav > ul > li > ul > li > ul > li{border:0} #sidenav > ul > li > ul > li > ul > li a {padding:0.25rem 1rem 0.25rem 1.75rem; font-size:0.9375rem;color:#1E2F1C} #sidenav > ul > li > ul > li > ul > li a:hover, #sidenav > ul > li > ul > li > ul > li a:active, #sidenav > ul > li > ul > li > ul > li.on > a {color:#50884B;} #sidenav > ul > li > ul > li > ul > li.on > a {font-weight:700} /* t4 */ #sidenav > ul > li > ul > li > ul > li > ul {padding: 0.25em 0} #sidenav > ul > li > ul > li > ul > li > ul li a {padding:0.25em 1rem 0.25em 2.8125rem;font-size:0.8125rem;color:#1E2F1C; position:relative} #sidenav > ul > li > ul > li > ul > li > ul li a:before {content:"-"; font-weight:400; position:absolute; left:2.3125rem; top:0.1875rem} #sidenav > ul > li > ul > li > ul > li > ul li a:hover, #sidenav > ul > li > ul > li > ul > li > ul li a:active {color:#50884B} #sidenav > ul > li > ul > li > ul > li > ul li.on > a {color:#1E2F1C; font-weight: 700} /*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} /* content */ .content{word-wrap:break-word} .content .photoright, .content .photoleft{max-width:50%;height:auto} .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.phototreatment{width: 100%;text-align: center} .content figure.phototreatment img{max-width: 100%;width: auto;height: auto} 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)} .content .highlight{border: 2px solid #ffc400; padding:2em;margin:2em 0} .content .highlight h2 {color:#2B4229} 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{padding-left:2em; position:relative} .content ul li:before{content: "";position:absolute; top:0.1875em; left:0.875em; display: block;width: 1em; height:1em; background: url(/images/bullet.svg) no-repeat center} .content ul li ul li:before{opacity: .5} /* addon classes */ .clearFloats{clear:both} .nobr{white-space: nowrap} .twoCol, .threeCol, .resCol{ -webkit-column-rule:1px outset rgba(0,0,0,.15); column-rule:1px outset rgba(0,0,0,.15); -webkit-column-gap:2em; column-gap:2em; } .twoCol > *, .threeCol > *, .resCol > *{break-inside: avoid; width:100%; display: inline-block} .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.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */} .videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0} /* 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 #CCCCCC;background-color: rgba(0,0,0,.05);padding: 0.5em;box-shadow: none;} 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:#50884B; background:#fff} textarea{display:block;} @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} } select option{padding:0 .2em} button,.button,input[type="button"], input[type="submit"], input[type="reset"]{background:#FFC400;display: inline-block; color:#2B4229; border-radius: 4px; border:0;padding:0.75em 1.6em;line-height:1em;cursor:pointer} 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:#000;color:#FFC400} .button{display: inline-block} .button.clear {background:none} button img{height:1em;width:auto;vertical-align:top} input.bulky, .bulky {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%; } /* Forms - without tables ----- */ form.narrow .form-flex, .narrow.form-flex { /*max-width: 18.75em;*/ } .form-flex { display: flex; flex-wrap: wrap; justify-content: space-between; } .form-flex fieldset { border: 0; margin: 0; padding: 0; width: 100%; } .form-flex fieldset legend { float: left; width: 100%; } .form-flex>div { margin: 0 0 .75em; } .form-flex .full { width: 100%; } .form-flex>div>label:first-of-type { display: block; } .formTable, :where(.formTable, .form-flex) :where(input:where([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) { width: 100%; } fieldset .product-items { clear: both; display: grid; gap: 0.5em; grid-template-columns: repeat(auto-fill, minmax(18.75em, 1fr)); padding: 0.75em 0; width: 100%; } fieldset .product-item { margin: 0; position: relative; } fieldset .product-item:has(input[type=checkbox]:checked) { background: #FDF8E3; border: 1px solid #F0EBD9; } fieldset .product-item input[type=checkbox] { left: 0.5em; position: absolute; top: 0; } fieldset .product-item input[type=checkbox]:checked { top: 0.5em; } fieldset .product-item > label { cursor: pointer; display: block; padding-left: 2em; } fieldset .product-item :checked + label { padding: 0.5em 0.5em 0.5em 2em; } fieldset .product-item > label:before { background: #FDF8E3; border: 1px solid #F0EBD9; content: ""; display: block; height: 100%; left: 0; opacity: 0; pointer-events: none; position: absolute; top: 0; width: 100%; z-index: -1; } fieldset .product-item :checked + label:before { opacity: 1; } fieldset .product-item .options { display: none; gap: 0.5em; padding: 0 0.5em 0.5em 2em; position: relative; } fieldset .product-item :checked + label + .options { display: flex; } fieldset .product-item .options :is(input, select) { background-color:#fff; } /* FORM ERRORS ------------------------------ */ .form-error { color: #C90000; font-size: 0.9375em; } .reverse .form-error { background: #C90000; color: #FFF; } fieldset label:first-of-type input:focus { outline: 1px solid #FF0000; } .formError { background-color: #000; border: 0; border-radius: 10px; box-shadow: 0 2px 2px #333; color: #FFF; display: none; margin: 0 0 2px; padding: .3125em .625em; z-index: 5; } .formError p { font-size: .9em; margin: 0; } .formError em { border: 10px solid; border-color: #000 transparent transparent; bottom: -1.0625em; display: block; height: 0; left: 2.5em; position: absolute; width: 0; } figcaption {font-style: italic;font-size: 13px;color: #1e2f1c;} .photoright figcaption {text-align:right} .photoleft figcaption {text-align:left} blockquote {padding: 2em 0} blockquote p {font-style: italic; margin-bottom:0.625rem; font-size: 1.125rem;line-height: 1.625rem;color: #2b4229;} blockquote footer {font-style: italic;font-size: 0.875rem;font-weight:700;color: #2b4229;} .bg-waves {background: #fff url(/images/bg-waves.svg) repeat; background-attachment: fixed} #hero {text-align:center; padding:4.875rem 1rem 0; background: url(/images/home/hero-bg.jpg) no-repeat center / cover} #hero p {font-size: 1.25rem;font-weight:400; text-align: center;color: #fff;text-shadow: 0px 4px 16px #000;} #hero p strong {color:#FFC400} #value-points {width:100%; float:left; clear:both} #value-points .wrap {max-width: 68.75rem} #value-points li {font-size: 1.125rem; line-height:1.5625rem;padding: 0 0.5rem; margin-bottom:2rem; text-align: center; color: #2b4229;} #value-points li:before {content:""; display: block; border-radius: 50%; margin:0 auto 0.25em; width: 6.875rem; height: 6.875rem; border: 1px solid #e9e9e9;} #value-points li.certified:before {background:#fff url(/images/value-points/certified.svg) no-repeat center} #value-points li.high-performance:before {background:#fff url(/images/value-points/high-performance.svg) no-repeat center} #value-points li.value-added:before {background:#fff url(/images/value-points/value-added.svg) no-repeat center} #value-points li.in-business:before {background:#fff url(/images/value-points/in-business.svg) no-repeat center} #value-points li.custom-cable:before {background:#fff url(/images/value-points/custom-cable.svg) no-repeat center} #value-points li.shipping:before {background:#fff url(/images/value-points/shipping.svg) no-repeat center} #value-points li.low-minimums:before {background:#fff url(/images/value-points/low-minimums.svg) no-repeat center} #industries {width:100%; padding: 3.125rem 1rem; float:left; clear:both; background:rgba(0,0,0,0.08); text-align: center;} #industries h2 {color:#50884B; font-size: 1.5rem; margin-bottom:1.875rem; font-family:'Roboto Slab', serif} #industries .image {padding-bottom: 50%; margin-bottom:0.625rem; background-size:cover; background-position:center;} #industries a {color:#707070; padding-bottom:0.625rem; font-size:1.125rem; line-height: 1.3125rem} #industries a:after {content:""; padding-left: 0.875rem; margin-left:0.5rem; background: url(/images/right-yellow-arrow.svg) no-repeat center} #industries a:hover {color:#50884B; border-color: #50884B;} #content #industries {background:none; border-top:2px solid rgba(0,0,0,0.08); border-bottom:2px solid rgba(0,0,0,0.08); padding:2em 0; margin: 2em 0;} #content #industries ul {margin:0} #content #industries ul li {padding:0} #content #industries ul li:before {display: none} #customers {width:100%; text-align: center; padding: 3.125rem 1rem; float:left; clear:both} #customers h2 {color:#50884B; font-size: 1.5rem; margin-bottom:1.875rem; font-family:'Roboto Slab', serif} #intro {text-align:center; padding:4.875rem 1rem 8.875rem; background: url(/images/home/hero-bg.jpg) no-repeat center / cover} #intro p {font-size: 1.25rem;font-weight:400; text-align: center;color: #fff;text-shadow: 0px 4px 16px #000;} #intro p a, #intro p strong {color:#FFC400} #intro p a:hover {color:#FFE799} #product-categories {width:100%; float:left; clear:both; background: rgba(0,0,0,0.08)} #product-categories .description { margin: 3em 0 0; text-align: center; } #product-categories .description p { font-size: clamp(1em, 0.955em + 0.23vw, 1.125em); } .breadcrumb {margin-bottom:1rem; font-size: 0.8125rem; color:rgba(0,0,0,0.7)} .breadcrumb a {color:rgba(0,0,0,0.7)} #content .breadcrumb a {text-decoration: none;} .breadcrumb a:hover {color:#50884B} .breadcrumb span:after{content: "\203A"; margin: 0 0.5em} #content .product-links {margin: 3em 0} #content .product-links li {padding:0; margin-bottom: 0.875rem} #content .product-links li:before {display: none} #content .product-links li a {display: block; text-decoration:none; position:relative; padding:0.625rem 2.875rem 0.625rem 1.375rem; color:#2B4229; border-radius: 4px; background: #fff; box-shadow: 0px 5px 16px rgba(0, 0, 0, 0.16);} #content .product-links li a:hover {background:#50884B; color:#fff} #content .product-links li a:after {content:""; transition:ease all 200ms; display: block; width: 1.5rem; height:1.5rem; position:absolute; top:0.6875rem; right:1.375rem; background: url(/images/product-arrow.svg) no-repeat center} #content .product-links li a:hover:after {filter: brightness(100)} .product-page #content {padding-bottom:0; min-height:0} .product-page .product-skus {clear:both; float:left; width:100%; padding: 0 1.25rem 1.25rem; margin-top:2.375rem;} .product-page .product-skus .wrap {max-width:100%; border-top: 3px solid #ECECED; padding-top:2.375rem} .product-page.with-images .product-top {padding-bottom: 3rem;} .product-page.with-images .product-top h1 {margin-bottom:0} .product-page.with-images .product-top .product-images .main-image {position:relative; overflow:hidden; border:1px solid #efefef} .product-page.with-images .product-top .product-images .main-image:after {content:""; z-index:2; pointer-events: none; position:absolute; bottom:0; right:0; display: block; width:2.25rem; height: 2.25rem; background: rgba(255,255,255,0.75) url(/images/search-plus.svg) no-repeat center} .product-page.with-images .product-top .product-images .main-image a {display: block; cursor:zoom-in; transition:none; padding-bottom:100%; position:relative; overflow:hidden;} .product-page.with-images .product-top .product-images .main-image a img {position:absolute; top:0; left:0; height: 100%; width:100%; object-fit: cover; object-position: center;} .product-page.with-images .product-top .subheading {display: block; font-weight:700} .product-page.with-images .product-top .logo {margin:2rem 0} .product-page.with-images .product-top .logo img {display: block; max-width: 100px; height:auto} .product-page.with-images .product-top .flex-image-gallery {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: flex-start;-ms-flex-line-pack: start;align-content: flex-start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;} .product-page.with-images .product-top .flex-image-gallery img {max-width: 70px; height:auto; margin: 5px 10px 5px 0} .product-page.with-images .product-top .shop-now {background: #50884B; font-weight:700; padding: 1em 2em; font-size:1.125rem; color: #fff;} .product-page.with-images .product-top .shop-now:hover {background: #2B4229} .product-page.with-images .product-top .add-to-cart {margin-top:3rem; background: #E8E8E8;padding: 1rem;} .product-page.with-images .product-top .add-to-cart .price span {font-size:1.375rem; display: block; font-weight:700; color:#1e2f1c; line-height:2.5rem} .product-page.with-images .product-top .add-to-cart label input {width:100%; background: #fff;height: 2.5rem;border: 1px solid #918C76;} .product-page.with-images .thumbnails {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: flex-start;-ms-flex-line-pack: start;align-content: flex-start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;} .product-page.with-images .thumb {width: 2.5rem; opacity:0.75; background-size:cover; background-position:center; height: 2.5rem;cursor: pointer;transition: ease all 200ms;opacity: .75;border: 1px solid #c1c6c8;margin: 10px 5px 0;} .product-page.with-images .thumb:hover, .product-page.with-images .thumb.on {border-color:#4c585d; opacity:1} .product-page.with-images .scroll-links {margin:2rem 0; background: #000;text-align: center;padding: 0.3125rem 1rem; position:sticky; top:5rem; z-index:1; width: 100%; clear: both;} .product-page.with-images .scroll-links a {display: inline-block; padding: 0.5rem 1rem; font-weight:700; color:#fff} .product-page.with-images .scroll-links a:hover {color:#ccc} .product-page.with-images .product-ribbon:nth-of-type(odd) {background:#efefef} .product-page.with-images .product-ribbon .wrap {max-width:1000px} .product-page.with-images .product-ribbon h2 {margin-bottom:1em; padding-bottom:0.5rem} .product-page.with-images .product-ribbon > *:last-child {margin-bottom:0} .product-page.with-images .product-ribbon .icon-list li {margin-bottom:1rem; padding:0} .product-page.with-images .product-ribbon .icon-list li:before {display: none} .product-page.with-images .product-ribbon .icon-list li a {position:relative; cursor:pointer; color:#1e2f1c; display: block; padding:0.25rem 0.25rem 0.25rem 2rem} .product-page.with-images .product-ribbon .icon-list li a:hover {color:#50884B} .product-page.with-images .product-ribbon .icon-list li a:before {content:""; display: block; width: 1rem; height:1rem; position:absolute; top: 0.3125rem; left: 0.5rem; background: url(/images/file-download.svg) no-repeat center} .product-page.with-images .product-ribbon .icon-list li a[href$=".pdf"]:before {background: url(/images/file-pdf.svg) no-repeat center} .product-page.with-images .product-ribbon .icon-list li a[data-video]:before {background: url(/images/file-play.svg) no-repeat center} .product-page.with-images .product-ribbon .title-list li {margin-bottom:0.5rem} .product-page.with-images .product-ribbon .title-list strong {display: block} .product-page.with-images .product-ribbon table.table-striped {background:#fff} .product-page.with-images .product-ribbon table.table-striped tr+tr {border-top:1px dashed #efefef} .product-page.with-images .product-ribbon table.table-striped td {padding:0.5em 1rem} .product-page.with-images #buy-now.product-ribbon {position:relative; z-index:2; background:#fff; float:left; clear:both; width:100%} .product-page.with-images #buy-now.product-ribbon h2 {text-align: center; color:#50884b; border:0} .product-page.with-images #buy-now.product-ribbon .main-product-action .wrap {background: #E8E8E8; max-width:41.875rem; border-radius: 6px; padding: 1rem;} .product-page.with-images #buy-now.product-ribbon .product-name {display: block; color:#101820; font-weight:700; font-size:1.25rem} .product-page.with-images #buy-now.product-ribbon .product-name {display: block; color:#101820; font-weight:700; font-size:1.25rem} .product-page.with-images #buy-now.product-ribbon .add-to-cart {margin-top:1rem;} .product-page.with-images #buy-now.product-ribbon .add-to-cart .price span {font-size:1.125rem; display: block; font-weight:700; color:#1e2f1c; line-height:2.5rem} .product-page.with-images #buy-now.product-ribbon .add-to-cart label input {width:100%; background: #fff;height: 2.5rem;border: 1px solid #918C76;} .product-page.with-images #buy-now.product-ribbon #consumables-image img {max-width: 1000px; width:100%; margin:0 auto; display: block} #video {position: fixed; display: none; top:0; left:0; width:100%; height: 100%; z-index: 99; background: rgba(0,0,0,0.85);} #video .close {position: absolute; color: #fff; cursor: pointer; top: -2em; right: 0; width: 2em; line-height: 2em; text-align: center; font-weight: 600; -webkit-transition: ease all 200ms; transition: ease all 200ms; font-size: 2em; font-family: Arial, Helvetica, sans-serif;} #video .close:hover {opacity: 0.5} .management #video .close {top: 2.19rem;} #video .center {width:100%; max-width: 70.5em; position: absolute; top: 50%; left: 50%; padding: 0 1em; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%)} #video .center .videoWrapper {position: relative; border: 1px solid rgba(255,255,255,0.25); overflow: auto} #video .center .videoWrapper video {max-width: 100%; width:auto; height: auto; max-height: 80vh; float: left;} .wysiwyg-table th { background: #1A2918; vertical-align: middle; padding: .25em .25em; text-align: center; color: #FFF; } .wysiwyg-table thead tr:first-of-type th:not(:last-of-type) { border-right: 1px solid rgba(255,255,255,.25); } .wysiwyg-table thead tr:last-of-type th { border-right: 1px solid rgba(255,255,255,.25); } .wysiwyg-table thead tr:last-of-type:not(:first-of-type) th {background: #2B4229;} .wysiwyg-table td { padding: .125em; text-align: center; } .wysiwyg-table.left-align th:nth-of-type(2), .wysiwyg-table.left-align td:nth-of-type(2) { text-align: left; } #popover {opacity:0; pointer-events: none; transition: ease all 200ms; position: fixed; z-index: 10; top: 0; left:0; width:100%; height: 100%; padding: 1em; background:rgba(0,0,0,0.9); 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: 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.show {opacity:1; pointer-events: all} #popover .container {max-width: 46rem; position: relative} #popover.convert-to-quote .container {max-width: 30rem;} #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; text-align: left; background:#fff; border-radius: 4px; max-width: 40em} #popover.convert-to-quote .container .popover-wrap {text-align: center; padding:2.75rem;} #popover.convert-to-quote .container .popover-wrap p.intro {margin-bottom:1em; font-size:1.25rem} #popover.convert-to-quote .container .popover-wrap .cancel {margin-top:0.25em; background:none; color:#937100;} #popover.convert-to-quote .container .popover-wrap .cancel:hover {color:#000} .product-footer-text {padding:2em 0 4em} .login-options > * {padding: 2em; border-radius: 5px} .login-options > .login {background:#efefef;} .login-options > .login input {background:#fff;} /* pagination */ .pagination{text-align:center} /* page header */ .pageHeader {width:100%;float:left; clear:both; background: url(/images/pageHeader.svg) no-repeat center / cover} /* alert */ #alertApp {background: #990000;cursor: pointer;position: relative;width: 100%;padding: .5rem 2.5rem;z-index: 1;} #alertApp:hover { background:#660000;} #alertApp.alertStatic { cursor: default;} #alertApp h1 {color: #FFF;font-size: .9375rem;line-height: 1.25rem;margin: 0 auto;padding: .1875rem .3125rem;text-align: center;} #alertApp:hover h1,#alertApp.expand h1 {color: #FFF;} #alertApp #alertDesc {height: 0;overflow: hidden;} #alertApp p {color: #FFF;font-size: .9375rem;line-height: 1.5;margin: 0;padding: .5rem 0 .75rem;position: relative;text-align: center; z-index: 1;} /* 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:nth-child(2) {overflow-wrap: break-word;word-wrap: break-word;-ms-word-break: break-all;word-break: break-all;word-break: break-word;-ms-hyphens: auto;-webkit-hyphens: auto;hyphens: auto;} .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 select { max-width: 20em; } .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} .sr-only { border: 0; clip: rect(0, 0, 0, 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; } .responsive-table.scroll { padding-top: 2.25em; } .responsive-table.scroll { overflow:auto; padding-top: 2.25em; } .responsive-table.scroll::before, .responsive-table.scroll::after { position: absolute; transition: ease all 200ms; opacity: 0; top: .75rem } .responsive-table.scroll.hint-left::before, .responsive-table.scroll.hint-right::after { opacity: 1; } .responsive-table.scroll::after { right: 0; content:"scroll right \203a"; } .responsive-table.scroll::before { left: 0; content:"\2039\ scroll left"; } .responsive-table .scrollContainer.shadow-left::before, .responsive-table .scrollContainer.shadow-right::after { opacity:0.5; } .responsive-table .scrollContainer.shadow-left::before { left:0; background: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%); } .responsive-table .scrollContainer.shadow-right::after { right:0; background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); } .responsive-table .scrollContainer { position: absolute; pointer-events: none; z-index: 3; top: 3rem; bottom: 0.9375rem; left: 0; right: 0; } .responsive-table .scrollContainer::before, .responsive-table .scrollContainer::after { content:""; opacity:0; transition:ease all 200ms; display: block; position:absolute; top:0; height:100%; width: 4.5rem; } .responsive-table tbody tr:nth-child(even) td, .wysiwyg-table tbody tr:nth-child(even) td {background: #F2F2F2;} #product-categories button.show-more-button { background: transparent; padding: 0.3125rem 2.75rem 0.3125rem 1.75rem; line-height: 1.25em; border-radius: 0; display: block; width: 100%; text-align: center; color: #2b4229; font-weight: 700; } #product-categories button.show-more-button:hover { background: #2b4229; color: #FFF; } /* ACCORDIONS ------------------------------ */ .accordion { margin-top: 1.5em; } .accordion>div:first-child { margin-top: 2.5em; } .accordion>div[hidden]:first-child { height: 0; overflow: hidden; } #tinymce .accordion>div[hidden]:first-child { display: block; height: auto; } .accordion button.toggle { background: transparent; color: #000; } .accordion button.toggle::after { background: url('/images/icons/angle-down-black.svg') no-repeat center; content: ''; margin-left: 0.25em; padding-left: 1em; } .accordion button.toggle.expand::after { background-image: url('/images/icons/angle-up-black.svg'); } /* FOOTER ------------------------------ */ body>footer{padding:2.875rem 1rem 0;color:#CCCCCC; line-height:1.25em} body>footer .title {display: block;font-weight: bold;font-size: 1rem;line-height: 1.25rem;text-align: left;color: #ffc400;} body>footer p {margin-bottom:1.25rem} body>footer p:last-child {margin-bottom:0} body>footer a {display: block; color:#ccc} body>footer a:hover, footer a:active{color:#fff} body>footer nav a {margin-bottom: 0.625rem; padding-left: 0.75em; background: url(/images/footer-yellow-arrow.svg) no-repeat 0 5px} body>footer a.on, footer .on > a{text-decoration:none;color:#ccc} body>footer .fatFooter{margin-bottom:2em;} body>footer .wrap {margin:0 auto; max-width: 68.75rem; padding: 1em 0; border-top: 1px solid rgba(255,255,255,0.3)} /* 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; } /* desktop and mobile */ @media (max-width: 850px) { .responsive-table table { min-width: 53.125em; } }