@charset "UTF-8";
/* Web Solutions 4.0 Compatible */
/* Management Bar */
.management>header{top: 34px}
/* Management Bar+Alert */
.management #alertApp {top:34px}
.management #alertApp+header{top:calc(34px + 2.5rem)}
/* Management Bar2+Alert */
.management2 #alertApp {top:80px}
.management2 #alertApp+header{top:calc(80px + 2.5rem)}
     .skiptranslate+header{top: 39px}

iframe[src="/management/login/persistSession.aspx"] {display: none}
#alertApp + header {top: 2.5rem;}
#alertApp + header + main {
    margin-top: 2.5rem;
}

#alertApp {z-index: 1001;cursor: pointer;position: fixed;width: 100%;top: 0}

#alertApp #alertTitle {
    line-height: 2.5rem;
    margin-bottom: 0;
    display: block;
    padding: 0 1em;
    color: #fff;
    text-align: center;
    font-size:1.1em;
    font-weight: 800;
}
body:not(#tinymce) {padding-top: 6.69em}

.twoCol {-webkit-columns:2;columns:2;}
.threeCol {-webkit-columns:3;columns:3;}
.resCol {
	-webkit-columns: auto;columns: auto;
	-webkit-column-width: 13em;column-width: 13em;
}
/* forms */
.formTable td{width:50%}
.formTable td{padding:0 0 .5em .5em}
.formTable td:first-child{padding:0 .5em .5em 0}
.formTable td[colspan="2"]{padding-right:0}
.formTable.formLoose,.formTable.formLoose td{width:auto}

/* content */
.photoright{margin:0 0 3em 4em;}
.photoleft{margin:0 4em 3em 0;}
.photoright+.photoright {margin-top: -2.75em}
.photoright.video, .photoleft.video {width: 50%;}

.clearBoth {clear:both}

/* HEADER ------------------------------*/
body>header{position: fixed; top:0; left:0; margin:0; padding: 0 1em; z-index: 1000}
body>header>.wrap {height:107px;}
.management>header {top: 34px; margin:0}
.management2>header {top: 80px; margin:0}
#brand {
    display: block;
    left: 1em;
    height: 5.375rem;
    position: absolute;
    top: 0.625rem;
    width: 10rem;
    z-index: 2;    
}
#tagline {font-size:.875em; position: absolute; left: 195px; top: 3.25em;}

/* NAV ------------------------------ */
nav ul {margin: 0}
#mainnav {bottom: 0; position: absolute; overflow:visible; right: 1em; width: auto;}
#mainnav>* {float: left;}
#mainnav>ul:not(.megamenu1) {height: 60px; margin:0; padding:0; overflow:visible; text-align:right;}
#mainnav>ul>li {display:inline-block; position:relative}
#mainnav>ul>li>a {color:#fff; font-size: 0.9em; display:inline-block; font-weight: 800; line-height:60px; padding:0 1em; text-decoration:none; text-transform:uppercase;}
#mainnav>ul>li:hover>a, #mainnav>ul>li:active>a{color:#fff20a;}
#mainnav>ul>li:not(:first-child).on>a{background:#fff20a; color:#2d2c2c}
#mainnav .search {color:#fff; background:none; font-size: 1.3125em; line-height: 60px; padding: 0 0 0 1em;}
#mainnav .search:before {content:"\f002"; font-family:FontAwesome;}
#mainnav .search:hover:before {color: #fff20a;}

/*dhtml*/
#mainnav>li ul {z-index:1; width:200px; padding:10px 0; background:rgba(0,0,0,.8); position:absolute; overflow:auto; height:auto}
#mainnav>ul>li:last-child ul {right:0}
#mainnav>ul>li>ul>li {width:100%;display:block;float:left}
#mainnav>ul>li>ul>li>a{background:none;color:#fff}
#mainnav>ul>li>ul>li>a {font-size:.9em;line-height:1.1em;padding:.3em .5em; display:block;width:100%;text-align:left;float:left}
#mainnav>ul>li>ul>li>a:hover, .t1 li ul:not(.megamenu1) li a:active{color:#000;background:#fff}
/* ancillary */
#ancillary {position:absolute;right:20rem;top:4px;padding: 0 1rem; color:#747474;font-size:.8125em; font-weight:300;}
#ancillary>* {float: left; line-height: 2.125em;}
#ancillary ul{display: inline}
#ancillary li {display: inline; border-left: 1px solid #747474;}
#ancillary li:first-child {border-left:none;}
#ancillary a {color:#efefff; display:inline-block; font-weight: 400; line-height: 2.125rem; padding: .15em .8em; text-decoration:none;}
#ancillary a:hover, #ancillary a:active,#ancillary li.on a {color:#fff20a}
#ancillary li.on a {text-decoration:none;color:#fff20a;}
#ancillary .search{display: inline;}
#ancillary .search input{display: inline-block}
#ancillary .mobile-search { display: none; }

header .phone,
header .quote {color:#fff20a; float: right; margin-top: 4px; line-height: 2.125em; font-size: 1rem; font-weight: 800; margin-left: 1.25em;}
    header .phone:before {content:"\f095"; font-family: FontAwesome; margin-right: .5em;}
    header .quote:before {content:"\f044"; font-family: FontAwesome; margin-right: .5em;}

/* Megamenu */
.megamenu {background-color: #d72000; border-bottom:6px solid #c2cdcd; position: fixed; width: 100%;left: 0; overflow: visible; z-index: 100;}
.megamenu a {display: block;}
.megamenu .megamenu1 {background-color:#c71313; bottom:0; display: block; float: left; height:100%; margin: 0 auto; overflow: visible; top: 0; width: 82em;}
.megamenu .megamenu1 li {display: block; float: left; position: static; width: 100%; }
.megamenu .megamenu1>li>a {border-bottom: 1px solid rgba(255,255,255,.4); color: #fff; display: block; float: left; font-size: .9375em; font-weight: 700; line-height: 1.4em; padding: 1em 4em 1em 2em; position: relative; text-align: left; width: 23.5rem;}
.megamenu .megamenu1>li:hover>a:before, .megamenu .megamenu1>li>a:focus:before {background: url(/images/megamenu/mega-arrow@2x.png) no-repeat 0 0 / 100% 100%; content: ""; display: block; height: 120%; right:-20px; position: absolute; top:-4px; width: 20px; z-index:100;}
.megamenu .megamenu1>li>a:after {color:rgba(255,255,255,.6); content:"\203A"; font-size: 1.5em; font-weight: 400; margin-top: -.55em; position: absolute; top: 50%; left: 21.25rem;}
.megamenu .megamenu1>li:hover>a, .megamenu .megamenu1>li>a:focus  {background: #FFF; color: #D72000;}
.megamenu .megamenu1>li:hover>a:after, .megamenu .megamenu1>li>a:focus:after {color: #D72000;}
.megamenu .megamenu1>li div {background-color: #EEF6F2; background-repeat: no-repeat; background-size: cover; background-position: bottom left; display: none; height: 100%; left:23.5em; padding: 4em; position: absolute; text-align: left; top: 0; width: calc(100vw - 23.5em);}
/* .megamenu .megamenu1>li:hover div {display: block;} */
.megamenu .megamenu1 li div a ul {float: left;}
.megamenu .megamenu1 li div a.title {color: #000; font-size: 3.25rem; font-weight: 800; line-height: 110%; max-width: 60%; display: block; margin-bottom: .3em; text-transform: uppercase;}
.megamenu .megamenu1 li div a.title span {color: #D72000;}
.megamenu .megamenu1 li div a.title:hover {color: #D72000;}
.megamenu .megamenu1 li div li {padding-left: .5em;}
.megamenu .megamenu1 li div li a {color: #D72000; font-weight: 700; line-height: 2.25em;}
.megamenu .megamenu1 li div li a:before {color: #000; content: "\2022"; margin-right: .5em;}
.megamenu .megamenu1 li div li a:hover {color: #666;}
.megamenu .megamenu1 li div a.button {display: inline-block; font-size: 1em; margin-top: 3em; padding: 1em 1.5em;}

#mainnav ul li:hover .megamenu {display: block}

#mainnav .megamenu {background-color: #c71313; border-bottom:6px solid #c2cdcd; position: fixed; width: 100%;left: 0; overflow: visible; z-index: 100;}
#mainnav .megamenu>a {display: block;}
#mainnav .megamenu .megamenu1 {background-color:#c71313; bottom:0; display: block; float: left; height:666px; margin: 0 auto; overflow: visible; top: 0; width: 100%;}
#mainnav .megamenu .megamenu1>li {display: block; float: left; position: static; width: 100%; }
#mainnav .megamenu .megamenu1>li:hover div {display: none;}
#mainnav .megamenu .megamenu1 li div li a {color: #d72000; font-weight: 700; line-height: 2.25em; padding: 0; width: auto}
#mainnav .megamenu .megamenu1 li div li a:before {color: #000; content: "\2022"; margin-right: .5em;}
#mainnav .megamenu .megamenu1 li div li a:hover {background-color: none; color: #666;}
#mainnav .megamenu .megamenu1 li div a.button {display: inline-block; font-size: .9em; margin-top: 3em; padding: 1em;}

/* Search */
header .search {cursor: pointer}
header #search {position: absolute; opacity:0; pointer-events:none; top: -20px; transition:ease all 200ms; background: #000;right: 0;width: 100%; height: 100%;}
    .search-active header #search {top:0; opacity:1; pointer-events: all;}
header #search .wrap {max-width: 100%; margin:0 auto; height:100%; z-index:1; }
header #search .wrap form {max-width:48.5rem; text-align: right; width:100%; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); 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; outline:0; border:0; font-weight: 100; border-bottom: 1px solid rgba(255,255,255,0.25); height:3.125rem; color:#fff; border-radius:0; font-size: 1.125rem; -ms-flex-order: 0; -webkit-box-ordinal-group: 1; order: 0; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto; -webkit-align-self: auto; -ms-flex-item-align: auto; align-self: auto;}
header #search .wrap form button {height: 3.125rem; margin-left: 3rem; font-size: 1rem; font-weight: 600; text-transform: uppercase}
header #search .wrap form .cancel {color:#fff; cursor:pointer; transition: ease all 200ms; opacity: 0.5; margin-left:1rem}
header #search .wrap form .cancel:hover {opacity:1}
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: 1em 0 2em; left: 0;width: 100%; background:#fff}
header #search .wrap #product-suggestions .wrap {max-width:48.5rem; margin:0 auto}
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 .search-mask {position: fixed; width: 100%; height: calc(100% - 147px); bottom: 0; left: 0;}


/* mobile */
#mobilenav,.menu, .mobileOnly {display: none}


/* MAIN ------------------------------ */
main>div>aside {width:15.625rem; padding-right: 3em; overflow:hidden;float: left;}

/* content */
#content{float:right; width:calc(100% - 17.625rem); padding:0 0 6em; min-height:600px; position:relative}
.interior #content.fullWidth {float: none; max-width: 60em;width: 100%; margin: 0 auto}
.vendor-page #content.fullWidth {min-height:0; padding-bottom: 0;}
#ContactForm .half {width: 50%; float:left}
.mobileOnly {display: none;}

.productTiles ul.resCol {
	-webkit-column: 2.5em;column-width: 2.5em;
    width: 100%;
}
.productTiles {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: flex-start;
    -ms-flex-align: start;
    align-items: flex-start;
}
.productTiles section {float: left; margin-left:2%; width: 32%;}
.productTiles section:nth-child(3n+1) {clear: left; margin-left: 0;}

/* Home */
#locations li a {margin-left: 2%; width: 18.4%;}
#locations li:first-child a {margin-left: 0;}
#news > .wrap {overflow: auto}
#news .news {width: 50%; float:left; margin-bottom: 0}
#news .news > article {padding-right: 1em}
#news .news > .button {margin-top:1em}
.home #content>div {float: left; padding-right: 3em; width: 50%;}
.home #content>div.videoWrapper {padding-right: 0;}

.quote-section {float: right; position: sticky;  position: -webkit-sticky;  z-index: 2; top:6.875rem; width: 15.63em; margin: 0 0 2em 2em; text-align: center; border: 1px solid rgba(227,226,226,1); padding: 1em; background: #F9F9F9}
    #alertApp+header+#photoHeader+main .quote-section, #alertApp+header~main .quote-section {top: 8.875rem}
.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}

.home #video {position: relative;}
.home #video .wrap > #content {max-width:50%; padding-right: 2em}
.home #video .wrap > #content > div {width: 100%}
.home #video>.background {background: url(/images/product-news-updated.jpg) no-repeat center center / cover; bottom: 0; position: absolute; right:0; top: 0; width: 50%;}

/* footer */
.fatFooter>nav{float: left;width: 80%}
.fatFooter>nav>ul{float: left;width:25%}
.locations > div, .locations > address {float: left; width: 20%;}

#web-solutions-exposure {}

#rotatorContainer {border-bottom: 6px solid #c2cdcd; position: relative;}
#rotatorContainer > div {
    float: left;
	position:relative;
}
#rotatorContainer .megamenu, #rotatorContainer .megamenu .megamenu1 {width: 23.5em;}
#rotatorContainer .megamenu {border-bottom: none;}
#rotatorContainer #photoRotator {bottom: 0; position: absolute; right:0; top:0;}

/* POPOVER */
#popover form {
    display: flex;
    justify-content: center;
    align-content: center;
    align-items: center;
}

/* Products */
.search-products {position: absolute; top:0.1875rem; right:0; width: 31.25rem;}

.calculator form .container div {margin-right: 3%;}
.calculator form .container div:nth-child(3) {margin-right: 0;}

.content .categories li {display: inline-block; vertical-align: top; width: 28%; margin: 0 0 3em 7%}
.content .categories li:nth-child(3n+1) {margin-left: 0}

.imageRow {float: left; margin-bottom: 2em; width: 100%;}
.imageRow img {height: auto; width: 33%;}

button.load-more-products {display: none;}

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

.home #rotatorContainer + .homepage-products {display: none;}

#callouts-and-value-points {max-width: 82rem; margin:0 auto}
#callouts-and-value-points .value-points {margin-bottom:4.5rem; padding-left: 5%; padding-right: 5%; 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-around;-ms-flex-pack: distribute;justify-content: space-around;-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 .callouts {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: flex-start;-ms-flex-line-pack: start;align-content: flex-start;-webkit-align-items: flex-start;-ms-flex-align: start;align-items: flex-start;}
#callouts-and-value-points .callouts > div {width:48.78%}
#callouts-and-value-points .callouts em {margin: 0 0.5em}

.vendor-page main .ribbon {padding: 2.875rem 1rem}
.vendor-page main .wrap {max-width:55.5rem; overflow:hidden; position:relative}
.vendor-page main .wrap .vendor-header {position: relative; padding:0 9.625rem 1rem 0}
.vendor-page main .wrap .anchored {position:absolute; top: 0; right:0}
.vendor-page main .wrap .anchored {position:absolute; top: 0; right:0}
.vendor-page main #top .wrap .anchored {top: 3rem}
.vendor-page main #top .wrap .no-logo .anchored {top: 1rem}
.vendor-page main .wrap .flex-3 {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;}
.vendor-page main .wrap .flex-3 li {width:28%; margin-right:8%}
.vendor-page main .wrap .flex-3 li:nth-child(3n+3) {margin-right:0}
.vendor-page main .wrap .flex-3 li a {font-weight: 700;font-size: 1rem;color: #2D2C2C;line-height: 1.25rem;}
.vendor-page.single-vendor #top .vendor-header {padding-right: 340px}
.vendor-page.single-vendor #top .vendor-header.no-logo {padding-top: 1rem}
.vendor-page.single-vendor .vendor-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;}
.vendor-page.single-vendor .vendor-list .vendor-block {width:calc(50% - 1.0625rem); margin: 0 2.125rem 2.125rem 0}
.vendor-page.single-vendor .vendor-list .vendor-block:nth-child(even) {margin-right: 0}
.vendor-page:not(.single-vendor) .vendor-block .vendor-links {position: absolute; top:1rem; right:1rem; font-size:0.875rem;}
.vendor-page .vendor-block .product-links {column-count: 2; column-gap: 2em}
.vendor-list .vendor-block[id] {scroll-margin-top: 10rem;}



#content #resources .resource-links li {width: 18%; margin:1%}
#content #resources .resource-links li a {font-size: 1.125rem;}

#content .search-results .top {position: relative; padding-right:15.625rem}
#content .search-results h1 {font-size:2.5rem;}
#content .search-results .search-again {position: absolute; width:15.625rem; top:1.6875rem; right:0;}
#content .search-results .search-again input {outline:0}
#content .search-results .search-results-container {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: 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 .sidebar {width: 12.5rem; min-width: 12.5rem; max-width:12.5rem; padding-right: 1.5em}
#content .search-results .search-results-container .sidebar button {width:100%; opacity:0.75; display: block; margin:0    0 0.25rem}
#content .search-results .search-results-container .sidebar button.on,
#content .search-results .search-results-container .sidebar button:hover {opacity:1}
#content .search-results .search-results-container .results-container {width:calc(100% - 12.5rem)}
#content .search-results .search-results-container h2 {font-size:1.2rem}


/* RESPONSIVE ------------------------------ */
@media screen and (min-width:921px) {
}

@media screen and (max-width:1210px) {
    header #search .wrap form {max-width:100%; padding: 0 5rem 0 17rem}
    header #search .wrap #product-suggestions .wrap {max-width:100%; padding: 0 5rem 0 17rem}
}
@media screen and (max-width:1150px) {
    #mainnav a {font-size: .8em;}
    #ancillary {font-size: .75em;}
    #tagline {font-size: .75em; top: 4em;}
    .megamenu .megamenu1 > li div {padding: 2.75em;}
    .megamenu .megamenu1 li.on div {background-color:#fff; background-image: none !important; background-repeat: no-repeat; background-size: 0; background-position: right;}
    .calculator form .container div {margin-right: 0; width: auto; clear: both}
    .megamenu .megamenu1 li div a.title {font-size: 2.5rem}
    #locations li a .title {font-size: 0.9em; top: calc(100% - 3.4rem)}
    #search {font-size: 0.9em}
}
@media screen and (max-width:1126px) {
    #tagline {display: none;}
    #callouts-and-value-points .value-points {padding-left:0; padding-right:0;-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
    #callouts-and-value-points .value-points div {font-size:1rem}
}
@media screen and (max-width:1024px) {
    #content {width: calc(100% - 15.625rem);}
}

@media screen and (max-width: 1000px) {
    .search-products {width:calc(100% - 200px)}
    #locations li a {width: 48%; padding-top: 40%; margin: 1% !important}
    #locations li a .title {font-size: 1em}
    #search {font-size: 0.875em}
    .content .categories li {width: 48%; margin: 0 0 2em 3%}
    .content .categories li:nth-child(3n+1) {margin-left: 3%}
    .content .categories li:nth-child(2n+1) {margin-left: 0}
    .vendor-page main .wrap .calculator .container {display: block}
    .vendor-page main .wrap .calculator .container div,
    .vendor-page main .wrap .calculator .container div:last-child {width:100%; margin: 0 0 1em}
    #content #resources .resource-links li {width:31%}
}

@media screen and (max-width:920px) {
    .calculator form .container div {margin-right: 0; width: 100%;}
    #brand {height: 54px;
        width: 100px;
        margin-top: -26px;
        top: 50%;}
    #mainnav > ul > li:first-child {display: none}
    #mainnav > ul > li > a {font-size: 0.8em}
    header #search .wrap form,
    header #search .wrap #product-suggestions .wrap {padding: 0 2rem 0 11rem}
    #callouts-and-value-points .value-points {padding:1.438rem 0}
    #callouts-and-value-points .value-points div {width: 50%; padding:1em 0}
    #callouts-and-value-points .callouts {-webkit-flex-wrap: wrap;-ms-flex-wrap: wrap;flex-wrap: wrap;}
    #callouts-and-value-points .callouts > div {width:100%}
    #callouts-and-value-points .callouts > div+div {margin-top:1em}
}

@media screen and (max-width:856px) {
    .productTiles ul.resCol {
        -webkit-column: 4em;
        column-width: 4em;
    }
}

@media screen and (max-width:820px) {
    #mainnav a {font-size: .8em;}
    .categories li a {font-size: .9em;}
}