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

/* addon classes */
.twoCol, .threeCol, .resCol{
-webkit-columns: auto;
   -moz-columns: auto;
        columns: auto;
-webkit-column-width: 13em;
   -moz-column-width: 13em;
        column-width: 13em;}

h1 {font-size: 1.75em}
h2 {font-size: 1.6em}
h3, fieldset.contact-form-fieldset legend {font-size: 1.5em}
h4 {font-size: 1.4em}


/* list */
.content ul li {padding-left: 1.5em;}
/* forms */
.formTable, .formTable table{width:100%;display: block}
.formTable tbody{display: block}
.formTable tr{display: block}
.formTable td{display: block;width:100%;padding: 0}
.formTable input[type="text"], .formTable input[type="password"], .formTable input[type="tel"], .formTable input[type="number"], .formTable input[type="email"], .formTable input[type="url"], .formTable textarea{margin-bottom:1em}

/* Header */
#brand {display: inline-block; margin: 0 0.75em; padding: 0.5em 0.25em; width: 7em;}
#tagline {margin-right: auto;}
body > header {display: contents;position: relative}

header .header-links {padding:0.5em 0;color: #fff20a;font-size: 14px;font-weight: 600;display: flex;-webkit-flex-direction: column;flex-direction: column;}




header .header-link a {-webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
  header .phone:before {content:"\f095"; font-family: FontAwesome; margin-right: .5em;}
  header .quote:before {content:"\f044"; font-family: FontAwesome; margin-right: .5em;}

header .search.toggle-search.mobileOnly {padding:0;background:none;font-weight:400;width: 3rem;line-height: 3rem;font-size: 1.5em;margin-left: auto;}

header .search.toggle-search.mobileOnly:before {content: "\f002";font-family: FontAwesome;}

#alertApp #alertTitle{font-size:1em; font-weight: 600;}

/* nav */
#navContainer{position:fixed;left:100%;top:0;bottom:0;width:75%;height: 100vh;padding-bottom: 4em;overflow: auto;background-color:#2d2c2c;z-index: 11;-webkit-transition: left 200ms ease;transition: left 200ms ease;}
.slideNav #navContainer{left: 25%; box-shadow: 0 0 100px 40px #000}
#navContainer nav {display: inline}
#navContainer ul{display: block;float: left;width: 100%;margin: 0;padding-left: 0}
#navContainer li{display:block; border-bottom: 1px solid rgba(255,255,255,0.1); float: left;width: 100%; position: relative}
#navContainer a, #navContainer .menu{color:#ccc;line-height:2.5em;padding:0 1rem;display:block;float: left;width: 100%}
#navContainer .menu {background: #d72000; color: #fff; font-weight: 600;}
#navContainer .menu:before {content: "\2039\00A0"}
#navContainer a:hover,#navContainer .menu:hover,
#navContainer li.on a {background-color:#fff20a; color:#2d2c2c}
#navContainer li.open {background-color: #000}

#navContainer li>span{color: #000;background-color:rgba(255,255,255,0.5); border-radius: 4px; display: block;position: absolute;right: .25em;top: .25em;line-height: 2em;width:2em;height: 2em;}
#navContainer li.on>span{background: rgba(0,0,0,0.125)}
#navContainer li>span:after{content: ""; transform: translate(50%, -50%) rotate(90deg); position: absolute; right: 50%; top: 50%; transition-duration: .25s; width: 1em; height: 3px; display: block; background: #000;}
#navContainer li.open>span:after{transform: translate(50%, -50%) rotate(0deg);}
#navContainer li>span:before{content: ""; position: absolute; right: 50%; top: 50%; transform: translate(50%, -50%); display: block; width: 1em; height: 3px; background: #000; border-radius: 3px;}
#navContainer li.open>span:before{opacity: 0}

#navContainer ul ul {font-size: .8em;}
#navContainer ul ul a {padding: 0.5em 1em 0.5em 2em; line-height: 120%}
#ancillary ul {margin-bottom: 1rem;}

#ancillary .mobile-search {
  clear: both;
  padding: 0 1rem;
  position: relative;
  width: 100%;
}

#ancillary .mobile-search input[type="text"] {
  border: 0;
  height: 2.5rem;
  padding: .75rem 5.5rem .75rem .5rem;
  width: 100%;
}

#ancillary .mobile-search button {
  border-radius: 0 2px 2px 0;
  padding: .8125rem .875rem;
  position: absolute;
  right: .875rem;
  top: -.125rem;
}

#mobilenav {
  background-color:#fff20a;
  width: 100%;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
}

#mobilenav a, #mobilenav span {
  display: block;
  padding: 0 1em;
  color: #000;
  font-weight:800;
  line-height: 2.5em;
  order: 0;
  flex: 1 1 auto;
  align-self: auto;
}

#mobilenav *+* {border-left: 1px solid rgba(0,0,0,0.25)}
#mobilenav a:hover, #mobilenav span:hover{color: #2d2c2c; background-color:#fff20a}
#mobilenav span:before{content: "";width: 1em;height: 2.5em;display: inline-block;vertical-align: middle;background: url(/images/m/hamburger.svg) no-repeat center / contain;margin-right: 0.25em;position: relative;top: -.1em;}
.hamburger{height: 2em;width: 2em;display: block;position: fixed;right: 0;top:0;opacity: .5;background: url(/images/m/hamburger.svg) #fff;background-size: cover;z-index:1;opacity: 0}
.hamburger.on{opacity: .5}

header #search {position: absolute;opacity:0;pointer-events:none;transform: translateY(-100%);transition:ease all 200ms;right: 0;width: 100%;z-index: 5;}
    .search-active header #search {opacity:1; pointer-events: all;}
header #search .wrap {background: #000;max-width: 100%;z-index:1;}
header #search .wrap form {width:100%; padding:0; border-top: 1px solid #333; display: -ms-flexbox; display: -webkit-box; display: flex; -ms-flex-direction: row; -webkit-box-orient: horizontal; -webkit-box-direction: normal; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -ms-flex-pack: center; -webkit-box-pack: center; justify-content: center; -ms-flex-line-pack: stretch; align-content: stretch; -ms-flex-align: center; -webkit-box-align: center; align-items: center;}
header #search .wrap form input {background: none;width: 100%;background: rgba(255,255,255,0.125);outline:0;border:0;font-weight: 100;height: 2.6875rem;color:#fff;border-radius:0;font-size: 0.875rem;padding: 0 1rem}
header #search .wrap form button {border-radius: 0; font-size: 0.875rem; padding: 0 1rem; line-height:2.5rem; font-weight: 600; text-transform: uppercase}
header #search .wrap form .cancel {display: none}
header #search .wrap #product-suggestions {position: absolute;box-shadow: 0 1px 0 0 rgba(0,0,0,0.1), 0 0 44px 0 rgba(0,0,0,0.25);top: 100%;padding: 0 1em 0;left: 0;width: 100%;background:#fff}
header #search .wrap #product-suggestions .wrap { background: #FFF; max-width:48.5rem; margin:0 auto}

header #search .wrap #product-suggestions .wrap>*:first-child {
  display: table;
  margin-top: 1rem;
}

header #search .wrap #product-suggestions .wrap>*:last-child {
  display: table;
  margin-bottom: 2rem;
}

header #search .wrap #product-suggestions .wrap:empty { display: none; }
header #search .wrap #product-suggestions .wrap > em {font-size: 0.75rem;}
header #search .wrap #product-suggestions ul {margin:0.5em 0 1.5em}
header #search .wrap #product-suggestions .search-results-container ul li {padding:0; margin:0 0 0.5em}
header #search .wrap #product-suggestions .search-results-container ul li:before {display: none}
header #search .wrap #product-suggestions .search-results-container ul li a {display: block; font-size:1.2em; font-weight:700; color:#000; padding:1em; border: 1px solid #ececec}
header #search .wrap #product-suggestions .search-results-container ul li a:hover {border-color:#d72000}
header #search .wrap #product-suggestions .search-results-container ul li a:hover h2,
header #search .wrap #product-suggestions .search-results-container ul li a:hover p * {color:#d72000}
header #search .wrap #product-suggestions .search-results-container ul li a h2 {font-size:1.2rem; color:#000; margin-bottom:0.25rem}
header #search .wrap #product-suggestions .search-results-container ul li a h2:after {content:""; padding-left: 0.3125rem; margin-left:0.5rem; background: url(/images/red-arrow.svg) no-repeat center right}
header #search .wrap #product-suggestions .search-results-container ul li a p {color:#666; font-weight:400; font-size:0.875rem; line-height:1.35em; margin:0}
header #search .wrap #product-suggestions .search-results-container ul li a p br {display: none}
header #search .wrap #product-suggestions .wrap .button {font-size: 0.75rem}
header #search .search-mask {position: fixed; width: 100%; height: calc(100% - 147px); bottom: 0; left: 0;}


main .wrap #content + aside {margin: 3em 0;}

.megamenu {display: none;}

body>header>.wrap {align-items: center;display: flex;}

/* photoHeader */
#photoHeader {padding-bottom: 30%;}

/* content */
.photoright{margin:0 0 .75em 1em;}
.photoleft{margin:0 1em .75em 0;}
blockquote {border-bottom:1px solid #c2cdcd; border-top:1px solid #c2cdcd; float: left; margin: 1em 0 2em; padding: 1em; width: 100%;}
#callout {padding: 2em 1em}
#callout div>* {margin-right: 0}
#content .featuredProduct img {float: none; max-width: 100%; width:100%}

/* main */
main{padding-left: 1rem;padding-right: 1rem}
main > .wrap {padding-top:1.5em}
/* Products */
.calculator form .container div {margin-right: 0; width: 100%;}
.categories li a {font-size:.9em; line-height:1.35em; margin: 0 0 2em; width: 100%; text-align: center}
.content .categories li, .home .categories li {display: inline-block; width: 48%; margin: 0 0 2em 2%; vertical-align: top;}
.home .categories {padding: 0; margin: 0; border-top: 0;}
.home .categories ul {margin: 0;}
.homepage-products {padding: 2em 1em 1em;}
.content .categories li:nth-child(2n+1), .home .categories li:nth-child(2n+1) {margin-left: 0}

.topRequest {float: none; width: 100%; display: block; text-align: center; margin:0 0 2em}
#content .filter {margin: 1em 0 0}

#product-logos img {max-width: 19%; height: auto; margin: 0; padding:0 1em;}

.contact-form-fieldset label {padding: 0;}
#ContactForm p input[type="submit"] {width: 100%; font-size: 1rem; padding: 1em 2em;}

.quote-section, #photoHeader.desktopOnly, .desktopOnly {display: none;}
.mobileOnly a span.button {display: block; padding: .75em 0; text-align: center; clear: both;}

.productTiles ul.resCol {
  -webkit-column: 4em;column-width: 4em;
}

/* Home */
#rotatorContainer {
  overflow: hidden;
}
#locations {padding: 2em 1em 1em}
#locations li a {margin: 0 0 2em; background-size: cover; width: 100%; padding:0}
#locations li:nth-child(odd) a {margin-left: 0;}
#locations li a .title, #locations li a .info, #locations li a .info .center,
#locations li a:hover .title, #locations li a:hover .info, #locations li a:hover .info .center {top: auto; left: auto; transform: none; height: auto; position: relative;}
#locations li a .info {padding: 2em 1em}
#locations li a .title, #locations li a .title * {bottom: auto;top: 0;background: #d72000;color: #fff;}
#news>.wrap {padding: 2em 1em 3em}
.home .welcome {padding: 2em 1em 3em}

#content>div {margin-bottom: 2em;}
#ContactForm .half+.half {margin-top: 2em}
#content .photoright, #content .photoleft {max-width: 100%; width: 100%; margin: 0 0 1em}
#content ul li:before {left: 0.75em}
.welcome #content ul li:before {left: 2.25em}

.gallery.interior-gallery a {display: block; width:50%; padding: 3px; float: left}
.gallery.interior-gallery a img {width: 100%;height: 7em;object-fit: cover;object-position: center;float: left;}
.sl-wrapper .sl-navigation button.sl-prev {left:0}
.sl-wrapper .sl-navigation button.sl-next {right: 0}

main>div>aside div img {display: none}

.imageRow img {height: auto; margin-bottom: 1em; width: 100%;}

.quote-section {margin: 0 0 2em; text-align: center; border: 1px solid rgba(227,226,226,1); padding: 1em; background: #F9F9F9}
.quote-section .button {display: block; border-radius: 5px; font-weight:700; padding: 1em}
.quote-section span {display: block; font-size: 0.8em; font-style: italic; line-height: 1.25em; margin-top: 1em}
.quote-section span strong {display: block; color: #333; text-transform: uppercase; font-style: normal}
#content .request-a-quote-button {position: sticky; position: -webkit-sticky; float:left; opacity:0; pointer-events: none; transition: ease all 200ms; bottom:40px; margin:0 -1em 1em; width: calc(100% + 2em);  border-top: 1px solid rgba(227,226,226,1); border-bottom: 1px solid rgba(227,226,226,1); padding: 1em; background: #F9F9F9}
#content .request-a-quote-button.on {opacity: 1; pointer-events: all}
#content .request-a-quote-button .button {display: block; text-align: center; border-radius: 5px; font-weight:700; padding: 1em}

.home .welcome #content {padding: 0}
.home .welcome #content > div {margin-bottom: 0}

#content .callout {padding: 1.5rem 1.5rem 1.5rem 3.125rem; margin: 2em 0; width:100%; clear: both}
#content .callout:before {content: ""; display: block; position: absolute; top:1.4375rem; left:0.8125rem; width: 1.75rem; height:1.75rem; background: url(/images/callout-question-mark.svg) no-repeat center / contain}
#content .callout h2 {font-size: 1.5rem; margin-bottom: 0.35em; font-weight:900; color: #121C28;}
#content .callout p {margin: 0; font-size: 1.125rem; font-weight: 500}
#content .callout + hr.clearBoth {margin-top: 5em}

.content .mapLocations li span { display: block; }

input + label.error {
    margin-top: -1em;
    display: block;
    margin-bottom: .75em;
}

.productList .threeCol {columns: 1; column-width: 100%; display: flex; flex-wrap: wrap;}
.productList .threeCol li {width: calc(50% - 1rem);}
.threeCol li.product:nth-of-type(n+7) {display: none;}

#callouts-and-value-points .value-points {margin-bottom:4em; 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: space-between;-ms-flex-pack: justify;justify-content: space-between;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
#callouts-and-value-points .value-points > div {width:50%; padding: 1em 0; font-size:0.875em}
#callouts-and-value-points .value-points > em {width:100%}
#callouts-and-value-points .callouts > div {padding:3em 2rem}
#callouts-and-value-points .callouts h2 {font-size:1.25em}
#callouts-and-value-points .callouts em {display: block}
#callouts-and-value-points .callouts .line-card {margin-top:1em}

.vendor-page main {padding:0}
.vendor-page main > * {padding: 3rem 1rem}
.vendor-page main #top .scroll-links {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;}
.vendor-page main #top .scroll-links a {width:48%; margin:1%; padding:0.5em; border-radius: 3px; background: #f1f1f1; text-align:center; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
.vendor-page main .wrap .breadcrumb {line-height: 1.25em;}
.vendor-page main .wrap .breadcrumb,
.vendor-page main .wrap h1 {text-align: center;}
.vendor-page main #top .vendor-header .vendor-logo {margin:0 auto}
.vendor-page main .wrap .anchored {margin-top:1em; text-align:center;}
.vendor-page main .ribbon {padding: 3em 1rem; overflow:auto}
.vendor-page main .ribbon h2 {overflow:hidden; font-size:1.5em; line-height:1.25em; text-align: center;}
.vendor-page main .ribbon h2:after {display: none}
.vendor-page main #content .productList {margin:0 0 1rem}
.vendor-page main .wrap .flex-3 li {padding: 0 1em; text-align: center;}
.vendor-page main .wrap .flex-3 li a {max-width: 250px; margin-left: auto; margin-right: auto;}
.vendor-page main .wrap #calcForm {text-align: center;}
.vendor-page main .wrap .calculator {text-align: center;}
.vendor-page main .wrap .calculator .container {display: block; text-align: center;}
.vendor-page main .wrap .calculator .container div,
.vendor-page main .wrap .calculator .container div:last-child {margin: 0 0 1em; width:100%; text-align: center;}
.vendor-page .vendor-scroll-links a {width:2.5rem; line-height: 2.5rem;}


#content #resources .resource-links li {width: 48%; margin:1%}
#content .search-results .top {margin-bottom: 1em; display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;-webkit-align-content: stretch;-ms-flex-line-pack: stretch;align-content: stretch;-webkit-align-items: stretch;-ms-flex-align: stretch;align-items: stretch;}
#content .search-results .top .search-again {order:1; margin-bottom:1.5em}
#content .search-results .top h1 {order:2; margin:0; font-size:1.75rem;}
#content .search-results .search-results-container .toggles {margin: 1.25em 0; text-align: center;}
#content .search-results .search-results-container .toggles .toggle-wrapper {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: 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 .search-results .search-results-container .toggles button {width: calc(50% - 0.25rem); padding:0.75em 0}
#content .search-results .search-results-container .toggles button + button {margin-left:0.5rem; float:right}
#content .search-results .search-results-container ul li a,
#content .search-results .search-results-container ul li a h2 {font-size:1em}


/* footer */
body > footer {
  padding-block: 4em 3em;
}

body>footer .wrap{
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
  align-items: stretch;
}

.locations > div, .locations > address {float: left; margin-top: 2em; width: 50%;}
footer .wrap nav {display: block;}

#web-solutions-exposure{
 -ms-flex-order: 1;
 -webkit-box-ordinal-group: 2;
         order: 1;
}
footer .footer-callout {padding-bottom: 1rem;}
.sl-wrapper .sl-navigation button {bottom: 1em}

/* POPOVER */
#popover input {
  display: block;
  font-size: 1.25rem;
  width: 100%;
}
#popover input + input {margin-top: 1rem;}

@media screen and (max-width:550px) {
#product-logos img {
    max-width: 32%;
}
}

@media screen and (max-width:450px) {
  #mobilenav a, #mobilenav span {padding: 0 .9em;}
    header .header-links, #tagline {font-size: 0.75rem;}
    .topRequest + h1 {clear: both; width: 100%;}
    p, .home #content {font-size: .9em;}
    .home main > section h1, .home #content h1, .home main section h2 {font-size: 1.5rem;}
    .news article > a h1 {font-size: 1em;}
    .locations > div, .locations > address {width: 100%;}
    #locations li a {margin-left: 0; width: 100%;}
    #callout em {display: block; margin: .5em 0;}
    .calculator form .container div {font-size: .9em;}
    .categories li a {margin: 0 0 2em 0; width: 100%;}
    .productList .threeCol li {width: 100%;}

    .play-pause-buttons {left: 0; top: auto; bottom: 3.25em;}
}