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

#alertApp{position: fixed;top: 0;left: 0;z-index: 4;}
.management #alertApp { top: 34px;}
#alertApp + header {top: 2rem;}
.management #alertApp + header {top: calc(34px + 3.5rem);}



/* 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(--denim);
  color: #FFF;
}

.credit-box-top button:is(:hover,:focus-visible) {
  background-color: var(--aqua);
  color: var(--indigo);
}

.credit-box-top button:is(:hover,:focus-visible) > span {
  color: var(--indigo);
}

.credit-box-top button:is(:hover,:focus-visible)::before,
.credit-box-top button:is(:hover,:focus-visible)::after {
  background: var(--indigo);
}


#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons .button.blue:is(:hover,:focus-visible) {
  color: var(--storm-grey)
}



/* Sticky Footer ----------------------- */
body:not(#tinymce) {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto 1fr;
  min-height: 100vh;
}

body.management:not(#tinymce) {
  min-height: calc(100vh - 35px);
}

body>footer {
  align-self: end;
}




/* HEADER ------------------------------*/

body>header{
	align-items: start;
	background: var(--cloud-white);
	display: flex;
	justify-content: space-between;
	padding-inline: 1em 0;
	position: sticky;
	top:0;
	width: 100%;
	z-index: 3;
}

body>header.scrolled {
	box-shadow: 0 1px 1px rgba(0,0,0,.015), 0 2px 2px rgba(0,0,0,.015), 0 4px 4px rgba(0,0,0,.015), 0 8px 8px rgba(0,0,0,.015), 0 16px 16px rgba(0,0,0,.015);
}

body.management>header {
	top: 35px;
}

body.management.management2>header {
	top: 70px;
}

.translated-ltr body > header, .translated-rtl body > header {top: 38px}

#brand {
	display: block;
	max-width: 11.25em;
	padding-block: .875em .625em;
	width: 100%;
	z-index: 3;
}

#brand img {
	height: auto;
	width: 100%;
}

/* NAV ------------------------------ */
nav ul{margin: 0}

#mainnav {
	margin: 0 0 1.1875em;
	overflow:visible;
	position: relative;
}

#mainnav ul {
  margin: 0;
  overflow: visible;
  position: relative;
  text-align: right;
}

#mainnav li {display:inline-block;}
#mainnav > ul > li:not(:first-child) {margin-left: 43px;}
#mainnav a {
	background: rgba(255,255,255,.7);
	color: #000;
	display:inline-block;
	font-size: .75em;
	padding: .5em 1.0625em;
	text-decoration:none;
}

#mainnav>ul>li:focus-within>a,
#mainnav>ul>li:hover>a,
#mainnav>ul>li:active>a,
#mainnav>ul>li.on>a{background:var(--storm-grey); color: #fff}
/*dhtml*/
#mainnav li ul {border-radius: 0 0 2px 2px; z-index:1;width:250px;padding:1em .5em; background:var(--storm-grey);position:absolute;overflow:auto;height:auto}
#mainnav>ul>li:last-child ul{right:0; left:auto}
#mainnav li ul li{width:100%; display:block; float:left}
#mainnav ul li ul li a {background:none; font-weight:400; border-radius: 2px; color:#fff; font-size:1em; line-height:1.1em; margin-top: 0; padding:.3em .5em; display:block; width:100%; text-align:left; float:left;}
#mainnav li ul li a:focus,
#mainnav li ul li a:hover,
.t1 li ul li a:active {color:var(--denim); background:#fff}
/* Accessible dropdowns */
#mainnav>ul>li:not(:first-child) {
  position: relative;
}
#mainnav>ul>li>button {
	background: transparent;
	bottom: 0;
	border: 0;
	height: .5rem;
	opacity: 0;
	padding: 0;
	pointer-events: none;
	position: absolute;
	right: 50%;
	transform: translate(50%,-50%);
	width: .75rem;
}

#mainnav>ul>li>button:focus-visible {
	opacity: 1;
}

#mainnav>ul>li>button:before {
	background: url('/images/arrow-down.svg') no-repeat center / contain;
	content: '';
	height: .75rem;
	left: 0;
	position: absolute;
	right: 0;
	top: calc(50% - 6px);
}

/* new css drop downs */
#mainnav>ul>li>ul {top: -200vh;opacity: 0;z-index: -1; visibility: hidden; -webkit-transition: ease 200ms opacity 0.35s; transition: ease 200ms opacity 0.35s;}
#mainnav li:hover ul,
#mainnav>ul>li.tapped > ul,
#mainnav>ul>li>a:focus + ul,
#mainnav>ul>li.expand>ul {top: 100%;opacity: 1;z-index: 1;visibility: visible;}


/* ancillary */
#ancillary {
	align-items: center;
	display: flex;
	font-size:.875em;
	justify-content: flex-end;
	width: 100%;
}

#ancillary .gtranslate_wrapper {
	font-size: 0.875rem;
}

#ancillary .gtranslate_wrapper * {
    font-size: 0.875rem;
}

#ancillary .gtranslate_wrapper .gt_option {
    background: #FFF;
    border: 1px solid var(--storm-grey);
    border-top: 0;
    position: absolute;
    top: calc(100% - 1px);
}

#ancillary .gtranslate_wrapper .gt_option a:is(:hover, :focus-visible) {
    background: var(--cloud-white);
    color: var(--storm-grey);
}

#ancillary .gtranslate_wrapper .gt_selected a {
    background: #fff;
    border: 1px solid var(--mist-grey);
}

#ancillary .gtranslate_wrapper .gt_selected a:is(:hover, :focus-visible, .open) {
    border-color: var(--storm-grey);
    color: var(--storm-grey);
}

#ancillary form {order:2}
#ancillary .account-links {order:3}
#ancillary ul{display: inline;}
#ancillary li{display: inline; position: relative;}
#ancillary ul.account-links {display: flex;margin: 0 0 0 1.125rem;}
#ancillary ul.account-links > li > a > img {
	width: 1.0625rem;
	position: relative;
	top: -.0625em;
	margin-right:.125rem
}
#ancillary ul.account-links > li > a, #ancillary ul.account-links > li > a > span {color: var(--storm-grey);}
#ancillary ul.account-links > li > a {align-items: center;display: flex;font-size: .875rem;height: 47px;line-height: 1;padding: .75rem 1rem;}


#ancillary ul.account-links > li > a > span {font-weight: 700;margin-left: .1875em;}
#ancillary form {height:2.9375rem; position:relative; display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-content: center;align-items: center;}
#ancillary form label {line-height:2.1875rem; margin-right:5px}
#ancillary form .search {top:auto; height:2.1875rem; padding: 0 2.1875rem 0 0.5em; transition: ease all 200ms; width: 12.5rem;}
#ancillary form .search:is(:hover, :focus) {background:#fff; border-color:var(--storm-grey)}
#ancillary form input[type="submit"] {border:0; position:absolute; right:0; height: 2.1875rem; padding:0; width:2.1875rem}


#ancillary ul.account-links > li:hover > a,
#ancillary ul.account-links > li:focus-within > a {
	background: #FFF;
}

#ancillary .no-items { padding: 1rem .5rem; text-align: center; }

#ancillary .no-items a.button { margin: .5rem auto; }
#ancillary .no-items a.button:hover { color: #FFF; }

/* small cart */
#ancillary li .cart-popover {opacity: 0; font-size: 1rem; z-index: 1; pointer-events: none; position: absolute; width: 17rem; height: auto; background: #fff; box-shadow: 0 10px 40px rgba(0,0,0,0.5); right: 0.5rem; top: 100%; display: block; transition: ease all 200ms; border-radius: 5px; transform: translateY(-10px)}
#ancillary li:hover .cart-popover,
#ancillary li:focus-within .cart-popover,
#ancillary li .cart-popover.on {opacity: 1; pointer-events: auto; transform: none}
#ancillary li .cart-popover:before {content: ""; position: relative; float: right; transform: translate(-1.875rem, -0.5rem); display: block; width: 0; height: 0; border-style: solid; border-width: 0 10px 8px 10px; border-color: transparent transparent #fff transparent;}
#ancillary li .cart-popover .product {background: #fff; width:100%; border-radius: 5px; display: block; overflow: auto; position: relative; text-transform: none; line-height: 1.25em; padding: 1.75em 1em 1em}
#ancillary li .cart-popover .product .product-name {color: var(--denim)}

#ancillary li .cart-popover .product .product-image {
  float: left;
  margin: 0 .5rem 0 0;
  padding: 0 0 30%;
  position: relative;
  width: 5rem;
}


#ancillary li .cart-popover .product .product-image img {
  height: auto;
  left: 50%;
  max-height: 100%;
  max-width: 100%;
  position: absolute;
  top: 50%;
  -webkit-transform: translate(-50%,-50%);
  -moz-transform: translate(-50%,-50%);
  transform: translate(-50%,-50%);
  width: auto;
}

#ancillary li .cart-popover .product .product-details {float: right;width: calc(100% - 6rem);}
#ancillary li .cart-popover .product .product-details > *:not(.product-name) {font-size: 0.875em; line-height:1.25em; color: #666}
#ancillary li .cart-popover .product .product-details > .product-name {
  font-size: 0.875em;
  line-height: 1em;
  margin-bottom: 0.25em;
  font-weight: 700;
}
#ancillary li .cart-popover .products p {text-align: center; font-weight: 300; color: #c2c2c2}
#ancillary li .cart-popover .cart-bottom {border-radius: 0 0 5px 5px; text-align: center; padding: 0 1em 1.5em}
#ancillary li .cart-popover .cart-bottom .cart-total {margin: 0 auto 0.75rem; font-size: 1.125em; font-weight:400; color:var(--denim);}
#ancillary li .cart-popover .cart-bottom .alerts {font-size: 0.75em; font-weight: 400; color: #e40000; line-height: 1.25em; margin-bottom: 1rem}
#ancillary li .cart-popover .cart-bottom .alerts .alert+.alert {margin-top: 0.5em}
#ancillary li .cart-popover .cart-bottom .alerts .alert.shipping {color: green;}
#ancillary li .cart-popover .cart-bottom .alerts .alert.no-items {font-size: 0.875rem; color: #467d9d;}
#ancillary li .cart-popover .cart-bottom .checkout {margin: 0 auto}
#ancillary li .cart-popover .cart-bottom .checkout .button {text-transform: none; margin:0; padding: .625em 1em; font-size: 1rem;}
#ancillary li .cart-popover .cart-bottom .checkout .button:hover {color:#fff}
#ancillary li .cart-popover .cart-bottom .continue-shopping {display: none}
#ancillary li .cart-popover-mask {display: none}

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

/* Megamenu */
#mainnav > ul > li > button:has(~ .megaMenu) {
  right: 62%
}
#mainnav .megaMenu {background: #fff; border-radius: 0 0 2px 2px; display: none; position: absolute; right:3%; top:100%; overflow:hidden; line-height: 1.2; width: 885px;}
#mainnav li:hover .megaMenu,
#mainnav>ul>li.tapped > .megaMenu,
#mainnav>ul>li.expand>.megaMenu,
#mainnav li:hover>.megaMenu {display:block; z-index: 2}
.scroll #mainnav .megaMenu {top:3.1em}
#mainnav .megaMenu ul {background-color: var(--storm-grey); border-radius: 0; float: left; left:0; overflow: visible; padding: 1.5em 0 1.5em 1.5em; position: relative; width: 270px;}
#mainnav .megaMenu li {display: block; float: left; width:100%;}
#mainnav .megaMenu li a {border-radius: 2px 0 0 2px; padding: .5em 1em .5em .5em;}
#mainnav .megaMenu li:focus-within>a,
#mainnav .megaMenu li:hover>a,
#mainnav .megaMenu li a.on {background-color: #fff; color: var(--denim);}
#mainnav .megaMenu li a:before {content: "\00A0\203A"; float: right; opacity: 0;}
#mainnav .megaMenu li:focus-within a:before,
#mainnav .megaMenu li:hover a:before,
#mainnav .megaMenu li a.on:before {opacity: 1;}
#mainnav .megaMenu li ul {background: #fff; float: none; left: 100%; height: 100%; padding: 1.5em 0; position: absolute; top: 0; opacity: 0; z-index: -1; visibility: hidden; -webkit-transition: ease 200ms opacity 0; transition: ease 200ms opacity 0;}
#mainnav .megaMenu li:focus-within>ul,
#mainnav .megaMenu li:hover>ul,
#mainnav .megaMenu li a.on + ul {opacity: 1;z-index: 1; visibility: visible}
#mainnav .megaMenu li ul li a {padding-left:1.5em;}
#mainnav .megaMenu li ul li a {color: var(--denim);}
#mainnav .megaMenu li ul li a:before {content: none;}
#mainnav .megaMenu li ul li:focus-within a,
#mainnav .megaMenu li ul li:hover a,
#mainnav .megaMenu li ul li a.on {background: var(--cloud-white); color: var(--denim);}
#mainnav .megaMenu .megaProduct {background-position: center; background-repeat: no-repeat; background-size:contain; height: 100%; position: absolute; left:100%; top:0; width: 345px;}
#mainnav .megaMenu .megaProduct.catImage {background-position: center; background-repeat: no-repeat; background-size:cover; height: 100%; position: absolute; left:100%; top:0; width: 345px;}
#mainnav li .megaMenu + span {display: block;pointer-events: none;z-index: -999;visibility: hidden;opacity: 0;top: -100vh;width: 100vw;height: calc(100vh - 5.5em);position: fixed;left: 0;background: rgba(0,0,0,0.75);-webkit-transition: ease 200ms opacity;transition: ease 200ms opacity;}
#mainnav li:focus-within .megaMenu + span,
#mainnav li:hover .megaMenu + span {opacity: 1;top: 118px;visibility: visible;}



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

main>div>aside{width:15.5rem; padding-right: 3em; overflow:hidden;float: left;}
body.fullWidth .content {width: 85%;margin: 0 auto;padding: 0 5% 50px;}
body.fullWidth main.online-training .content {min-height: 0;padding: 0 !important; width: 100% !important; }

.content:not(#tinymce) {
  min-height: 600px;
  overflow: hidden;
  padding: 2.5em 0 50px 0;
  position: relative;
  width: calc(100% - 15.5rem);
}


/* Webinar pages */
main.webinars-page {
  padding-inline: 1.5em;
}

main.webinars-page .content:not(#tinymce) {
  margin-inline: auto; width: 100%;
}

main.webinars-page>div>aside  {
  display: none;
}

.breadcrumb.green a:is(:hover,:focus-visible) {
  color: var(--aqua-accessible);
}


.content.fullWidth {float:none;margin: 0 auto}
.wsManagementLogin td:first-child {width:40%; text-align: right}

.twoCol, .threeCol, .resCol{
  -webkit-column-rule:0;
  column-rule:0;
}

.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;
}

.twoCol.flex {columns:1; -webkit-columns:1; column-gap:0;   display: flex;   flex-direction: row;   flex-wrap: nowrap;   justify-content: space-between;   align-content: stretch;   align-items: stretch;}
#content .twoCol.flex > * {width:50%; display: block; padding-right:2em; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
#content .twoCol.flex > .login-to-account {border-right: 1px solid #ccc; margin-right:2em}

.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}

.DistributorList .formTable td {width: 33%;}

/* Contact Form - table removed ----- */
.form-flex .half {
	width: calc(50% - .5em); /* Full on mobile */
}

.form-flex .third {
	width: calc(33.33% - .5em); /* Full on mobile */
}

.form-flex .quarter {
	width: calc(25% - .5em); /* Half on mobile */
}

#DistributorList .half.left-align {
  margin-right: auto;
  margin-left: .67em;
}



.photoright{margin:0 -5em 2em 2em;}
.videoContainer + .intro .photoright {margin-right: 0;}
#tinymce .photoright {margin-right: 0;}
.photoleft{margin:0 2em 2em 0;}

blockquote {float: right; margin: 2em -6em 2em 4em; text-align: right; width: 50%;}
.gallery.flex {margin: 2em auto;   display: flex;    flex-direction: row;  flex-wrap: wrap;  justify-content: flex-start;  align-content: stretch;}
.gallery.flex > a {display: block; width:25%; padding: 5px}
.gallery.flex > a img {max-width: 100%; height: auto}

.content .icon-links {  display: flex;    flex-direction: row;  flex-wrap: wrap;  justify-content: flex-start;  align-content: stretch;}
.content .icon-links > li {width: 25%;}

.back-to-top {right: calc(50% - 34rem)}
.back-to-top div {position: absolute;color: #003951;top: -1.5rem;left: 50%;white-space: nowrap;padding: 0 0.25em;line-height: 1.5rem;transform: translateX(-50%);}

#treatment-popover .popover-content {width:100%; float:none; padding:0; overflow:auto; min-height:0}


/* PRODUCT ANCHOR LINKS ---------------- */
.product-anchor-links {margin: 0 auto; max-width: 30em;}




/* HOME --------------------------------- */
/* HERO */
.heroMask {
  background: url(/images/video-bottom-bar.svg) no-repeat center bottom / cover;
  height: 59px;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}
.topTriangle {
  background: url(/images/video-top-left-triangle.svg) no-repeat left top / cover;
  height: 139px;;
  left: 0;
  position: absolute;
  top: 0;
  width: 214px;
}
.leftTriangle {
  background: url(/images/video-bottom-left-triangle.svg) no-repeat right bottom / cover;
  bottom: 59px;
  height: 100%;
  left: 0;
  position: absolute;
  width: calc(50% - 546px);
}
.rightTriangle {
  background: url(/images/video-bottom-right-triangle.svg) no-repeat left bottom / cover;
  bottom: 59px;
  height: 100%;
  position: absolute;
  right: 0;
  width: calc(50% + 375px);
}


/* Flexible Callouts */
.flexible-callouts.hover-text {padding:2.5em 5% 6em 5%;}
.gradientTriangle {
  background: url(/images/gradient-triangle.svg) no-repeat center top / cover;
  margin-top: -59px;
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  width: 100%;
  opacity: .7;
}

/* Application Callouts */
main .application-callouts h2 {position: absolute; top: -1em; left: 50%; transform: translateX(-50%); white-space: nowrap;}
main .application-callouts.interior-application-callouts h2 {
  position: relative;
  top: auto;
  left: auto;
  transform: translateX(0);
}

/* Split Ribbon */
.split .button {bottom: 5em; position: absolute; left: 50%; transform: translateX(-50%);}

/* Split List */
.split-list:before {content: ""; background: url(/images/home/IM-1530.jpg) no-repeat right bottom; height: 264px; position:absolute; left: -15%; top:50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: calc(50% - 375px); z-index: 0;}
.split-list:after {content: ""; background: url(/images/home/Arc1812.jpg) no-repeat left bottom; height: 243px; position:absolute; right: -15%; top:50%;  -webkit-transform: translateY(-50%);  transform: translateY(-50%); width: calc(50% - 357px); z-index: 0;}
.split-list > .wrap > section {float: left; padding: 1em 5%; width: 50%;}
.home .split-list > .wrap > section {float: left; padding: 1em 5%; width: 33%;}



/* PRODUCTS --------------------------------- */
ul.categories.ws-flex {
	--ws-column-count: 3;
	--ws-gutter: clamp(1em, -2.333em + 7.11vw, 3em);
}

.categories li>a:is(:hover,:focus-visible) {
  border-color: var(--aqua-accessible);
}

.categories li>a:is(:hover,:focus-visible) span.button {
  background-color: var(--denim);
  color: #FFF;
}

.productSeries li .wrap {
  align-content: center;
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: center;
  overflow: hidden;
}

.productSeries li .wrap div {float: left; padding-left: 3%; width: 50%; min-width: 50%}
.productSeries li .wrap div + div {padding-left: 5%;}

.seriesList {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-around;
  align-content: stretch;
  align-items: stretch;
}

.seriesList li {width: 30%;}
.seriesList .button {
  position: absolute;
  bottom: 2em;
  left: 50%;
  transform: translateX(-50%);
}

.fullWidth.products main > .wrap {max-width: 80rem}
.fullWidth.products main > .wrap .seriesList li {width:31%; margin-bottom: 2%}

.fullWidth.products main > .wrap #content.productPage {max-width:71.625rem; width:100%; padding-inline: 1.5em; }

.productPage .left {float: left; width: 48%;}
.productPage .right {float: right; width: 48%;}

.results li {float: left; width: 33.333%}

.styled-table.small {font-size: 0.875em; line-height: 1.25em}
.styled-table td,
.styled-table th {padding: 0.5rem}
.styled-table tr > *:first-child {padding-left: 1rem}
.styled-table tr > *:last-child {padding-right: 1rem}
.styled-table tr:first-child > * {padding-top: 1rem}
.styled-table tr:last-child > * {padding-bottom: 1rem}
.styled-table.borders tr:not(:last-child) > * {border-bottom: 1px dashed #ccc}

.landing #hero {padding: 5em 1em 12.5em}
  .landing .careers #hero {padding: 7em 1em}
.landing #hero h1 {max-width: 41.94rem; margin: 0 auto}
.landing #boxes .top {position: relative}
.landing #boxes .top .image {position: absolute; top: -5.56em; height: calc(100% + 5.56em); width: calc(50% - 25em)}
.landing #boxes .top .image.image-1 {left: 0}
.landing #boxes .top .image.image-2 {right: 0}
.landing #boxes .top .text {padding: 2.94em 1em; max-width: 50.88em; margin: 0 auto; text-align: center}
.landing #boxes .top .text p {max-width: 39.85rem; margin: 0 auto 1rem}

.landing #boxes .bottom {position: relative; padding:0; border-top: 2px solid #fff;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  align-content: stretch;
}
.landing #boxes .bottom:before {content: ""; width: 100%; display: block; position: absolute; top: -2px; left:0; height: 5.69rem; background: url(/images/landing/white-triangle.svg) no-repeat center}
.landing #boxes .bottom .image {height: 19.44em; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto;}
.landing #boxes .bottom .image+.image {border-left: 2px solid #fff}
.landing #boxes .bottom .image-3 {width: 18.357%}
.landing #boxes .bottom .image-4 {width: 31.5%}
.landing #boxes .bottom .image-5 {width: 26.428%}
.landing #boxes .bottom .image-6 {width: 23.428%}
.landing #initiatives {padding: 4.69em 1em 9.75em}
.landing #initiatives .wrap {max-width: 62.94em}
.landing #initiatives p {-webkit-column-count: 2;column-count: 2; -webkit-column-gap: 3.13rem; column-gap: 3.13rem}
.landing #logos {padding: 3em 1em}
.landing #logos ul {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content:
  flex-start;
  align-content: stretch;
  align-items: flex-start;
}

.landing #logos ul li {width: 16.666%}
.landing #recycle-with-us {padding: 9.25em 1em 5.94em}
.landing #recycle-with-us .wrap {max-width: 68.75em;   display: flex;    flex-direction: row;  flex-wrap: nowrap;  justify-content: flex-start;  align-content: stretch;  align-items: flex-start;}
.landing #recycle-with-us .wrap form {min-width: 39.75em; margin-left: 3em; -ms-flex: 1 1 auto; -webkit-box-flex: 1; flex: 1 1 auto;}
.landing #products {padding: 3em 1em}
.landing #products .wrap ul {  display: flex;    flex-direction: row;  flex-wrap: wrap;   justify-content: center;  align-content: stretch;   align-items: stretch;}
.landing #products .wrap li {width: 32%; margin-right: 2%;}
.landing #products .wrap li:nth-child(3n+3) {margin-right: 0;}
.landing #products .wrap li:nth-child(n+4) {margin-top: 2%;}
.landing #products .wrap li a {padding: 1.63em 1.5em 6.06em; position: relative}
.landing #products .wrap li a .button {position: absolute; bottom: 2em; left:50%; transform: translateX(-50%)}
.landing #products .wrap li a:hover .button {color:#fff; background: var(--denim)}
.landing #callouts:before {content: ""; z-index: 2; display: block; position: absolute; top: -2px; left:0; width:100%; height: 5.69em; background: url(/images/landing/blue-triangle.svg) no-repeat center top}
.landing #callouts a {width:50%; float: left}
.landing #callouts a:hover:before {opacity: 1}
.landing #callouts a span {width: 16.06rem; font-size: 1.125em; font-weight:700; padding: 0; border-color: #E02D00; line-height: 3.38rem; text-align: center; color:#fff; background:none}
.landing #callouts a:hover span {background: #E02D00;}
.landing .wrap {overflow: visible}

.landing .careers #hero .line {margin: 2em auto}
.landing .careers #hero h1 {font-size: 3.13em; text-align: center; line-height: 1em; margin: 0 auto}
.landing .careers #hero p {font-weight: 600; max-width: 30.500em; font-size: 1.38em;color: var(--storm-grey);text-align: center;line-height: 1.409em; margin: 0 auto 2em}
.landing .careers #hero .anchor-links a {font-size: 1.125em; min-width: 10.333em}
.landing .careers .wrap.thin {max-width:56.25em}
.landing .careers .wrap.wide {max-width:80.31em}
.landing .submit-resume .wrap {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: center;align-content: center;align-items: center;}
.landing .submit-resume .button {font-size: 1.125em; margin: 0; white-space: nowrap}
.landing .submit-resume .button:hover {background: #005c91}
.landing .submit-resume p {font-size: 1.125em; line-height: 1.35em; margin: 0; width: 100%; -webkit-flex: 0 1 auto; -ms-flex: 0 1 auto; flex: 0 1 auto;}
.landing .submit-resume p strong {font-size: 1.125em; display: block}
.landing .careers .images {padding-bottom: 22.5%; position: relative; border-bottom: 2px solid #fff; border-top: 2px solid #fff}
.landing .careers .images:before,
.landing .careers .images:after {content: ""; height: 100%; display: block; position: absolute; top:0; width:50%;}
.landing .careers .images:before {border-right: 1px solid #fff;}
.landing .careers .images:after {border-left: 1px solid #fff; right:0;}
.landing #why-infiltrator {padding: 4.38em 1em 10.63em}
.landing #why-infiltrator h2 {font-weight: 700; font-size: 2.44em; color: var(--denim); text-align: center; margin: 0}
.landing #why-infiltrator h2:after {content: ""; display: block; width: 250px; background: rgba(0,67,105,.3); height: 4px; margin: 1.75rem auto;}
.landing #why-infiltrator p {font-size: 1.13em; max-width: 44.444em; margin: 0 auto; color: #4A4A4A; text-align: center; line-height: 1.556em;}
.landing .bottom {padding: 0 1em 7.5em}
.landing .icon-cards .wrap {overflow: auto; padding: 1.88em 0}
.landing .icon-cards .wrap .cardContainer {text-align: center; height: 16.63em; margin:0 1.5625% 1.5625% 0;  width: 18.75%; float: left; position: relative;  -webkit-perspective: 800px; perspective: 800px;}
.landing .icon-cards .wrap .cardContainer:nth-child(5),
.landing .icon-cards .wrap .cardContainer:nth-child(10) {margin-right: 0}
.landing .icon-cards .wrap .cardContainer .card {position: relative; }
.landing .icon-cards .wrap .cardContainer .card {display: block; width: 100%; height: 100%; position: absolute; top: 0; -webkit-perspective: 1400px; perspective: 1400px;}
.landing .icon-cards .wrap .cardContainer .card .front,
.landing .icon-cards .wrap .cardContainer .card .back {position: absolute; z-index: 1; width: 100%; max-width: 100%; height: 100%; -webkit-transform-style: preserve-3d; transform-style: preserve-3d; -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s,-webkit-transform 0.5s; -webkit-backface-visibility: hidden; backface-visibility: hidden; padding: 1em; -webkit-transform: rotateY( 0deg ); transform: rotateY( 0deg );   display: flex;   flex-direction: row;   flex-wrap: wrap;   justify-content: center;   align-content: center;   align-items: center;}
.landing .icon-cards .wrap .cardContainer .front {background: #fff; border: 2px solid var(--aqua)}
.landing .icon-cards .wrap .cardContainer .card:hover .front {-webkit-transform: rotateY( 180deg ); transform: rotateY( 180deg );}
.landing .icon-cards .wrap .cardContainer .card .back {background: #062234; border: 1px solid #062234; -webkit-transform: rotateY( -180deg ); transform: rotateY( -180deg );}
.landing .icon-cards .wrap .cardContainer .card:hover .back {-webkit-transform: rotateY( 0deg ); transform: rotateY( 0deg );}
.landing .icon-cards .wrap .cardContainer .card p {font-size: 1em; color: #FFFFFF; text-align: center; line-height: 1.19em}
.landing .icon-cards .wrap .cardContainer span,
.landing .icon-cards .wrap .cardContainer h2 {font-size: 1.38em; display: block; width:100%; font-weight:800; text-align: center; line-height: 1em; color: #062234;}
.landing .icon-cards .wrap .cardContainer span:before {content: ""; width: 100%; margin-bottom: 1.25em; height: 3rem; display: block;}
.landing .icon-cards .wrap .cardContainer.Growth span:before {background: url(/images/landing/icon-card-Growth.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Committed span:before {background: url(/images/landing/icon-card-Committed.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Innovative span:before {background: url(/images/landing/icon-card-Innovative.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Admired span:before {background: url(/images/landing/icon-card-Admired.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Supportive span:before {background: url(/images/landing/icon-card-Supportive.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Sustainable span:before {background: url(/images/landing/icon-card-Sustainable.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Dependable span:before {background: url(/images/landing/icon-card-Dependable.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Connected span:before {background: url(/images/landing/icon-card-Connected.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Values span:before {background: url(/images/landing/icon-card-Values.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer.Development span:before {background: url(/images/landing/icon-card-Development.svg) no-repeat center / contain}
.landing .icon-cards .wrap .cardContainer h2 {color: #fff; margin-bottom: 0.5em}
.landing .icon-cards .wrap .cardContainer h2:before {content: ""; display: block; width: 100%; height: 3.75rem; margin:-1em 0 0.5em}
.landing .icon-cards .wrap .cardContainer.Growth h2:before {background: url(/images/landing/icon-card-hover-Growth.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Committed h2:before {background: url(/images/landing/icon-card-hover-Committed.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Innovative h2:before {background: url(/images/landing/icon-card-hover-Innovative.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Admired h2:before {background: url(/images/landing/icon-card-hover-Admired.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Supportive h2:before {background: url(/images/landing/icon-card-hover-Supportive.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Sustainable h2:before {background: url(/images/landing/icon-card-hover-Sustainable.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Dependable h2:before {background: url(/images/landing/icon-card-hover-Dependable.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Connected h2:before {background: url(/images/landing/icon-card-hover-Connected.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Values h2:before {background: url(/images/landing/icon-card-hover-Values.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer.Development h2:before {background: url(/images/landing/icon-card-hover-Development.svg) no-repeat center}
.landing .icon-cards .wrap .cardContainer p {color: #4A4A4A; margin: 0}
.landing .bottom #testimonials .slick-slider {padding: 0 11em}

#resource-map .location {position: relative;}
#resource-map .location .action-items {position:absolute; top:1.6875rem; right:0; transition: all .3s ease}
#resource-map .location.selected-location .action-items {position:absolute; top:1.6875rem; right:1.5rem; transition: all .3s ease}
#resource-map .location .action-items .button {font-size:0.875rem;}
#resource-map .location .tabbed-nav {  display: flex;   flex-direction: row;   flex-wrap: nowrap; -webkit-justify-content: flex-start;  justify-content: flex-start;   align-content: stretch;}
#resource-map .location .tabbed-nav .tab-button {max-width: 14em; -webkit-flex: 1 1 auto;-ms-flex: 1 1 auto;flex: 1 1 auto;}
#resource-map .location .tabbed-nav .tab-button+.tab-button {margin-left: 0.25em}

.single-location h1 {padding-right: 25rem}
.single-location .action-items {position:absolute; top:1.625rem; right:0;}
.single-location .action-items .button {font-size:0.875rem;}
.single-location .tabbed-nav {  display: flex;   flex-direction: row;   flex-wrap: nowrap; -webkit-justify-content: flex-start;  justify-content: flex-start;   align-content: stretch;}
.single-location .tabbed-nav .tab-button {max-width: 14em; -webkit-flex: 1 1 auto;-ms-flex: 1 1 auto;flex: 1 1 auto;}
.single-location .tabbed-nav .tab-button+.tab-button {margin-left: 0.25em}

.content .logo-links > li {background: none; width: 32%; vertical-align: top; text-align: center; display: inline-block; margin: 0 0 1em; border: 1px solid #ccc; padding: 1em 2em; overflow: auto;}

.content .staffApp .photoright {margin-right:0;}

.asset-library-list {margin-bottom: 3em}
.asset-section > .button {position: absolute; margin:0; top:2.1875rem; right:0; font-size:.875rem; padding:.5em 0.75em;}
.assets.grid {display: flex;flex-direction: row;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;align-content: stretch;align-items: flex-start;}
.content ul.assets.grid .asset {width: 17.5%; margin: 0 3.125% 3.125% 0}
.content ul.assets.grid .asset:nth-child(5n+5) {margin-right: 0}
.content .categories {display: flex;flex-direction: row;flex-wrap: wrap;-webkit-justify-content: flex-start;justify-content: flex-start;align-content: stretch;align-items: stretch;}
.content .categories li {width:50%; font-size:0.875em; line-height: 1.25em; padding:0.25em; background:none; margin: 0 0 1em}
.content .categories.smaller li {width:33%}
.content .categories li .categoryImage {position: relative; margin-bottom: 0.25em; transition: ease all 200ms}
.content .categories li .categoryImage a {position: absolute; top:0; left:0; width: 100%; height: 100%;}


.styledTable td {
    border: 1px solid var(--mist-grey);
    padding: 0.5rem;
}

.styledTable .tick,
.styledTable .desktop-center {
    display: block;
    text-align: center;
}

.careers #portal #portal_inner {max-width: 52.75rem; margin: 0 auto}

.management #content table.manage td.nobr {min-width: 3em}
.management #content table.manage td.nobr:last-of-type {text-align: right}

#upcoming-webinars {padding-top: 3.6875rem;}
#upcoming-webinars .gradientTriangle {margin-top: 0;}
#upcoming-webinars ul li:nth-of-type(3n+1) {margin-left: 0;}
#upcoming-webinars ul li:nth-of-type(n+4) {margin-top: 2.5rem;}
#upcoming-webinars ul li {width: calc(33.33% - .67rem); margin-left: 1rem;}
#upcoming-webinars ul li:nth-of-type(even) a {background: rgba(255,255,255,.7);}

#state-accredited-webinars ul li, #past-webinars ul li {width: calc(25% - 1.32rem); margin-left: 1.75rem; position: relative;}
#state-accredited-webinars ul li:nth-of-type(4n+1), #past-webinars ul li:nth-of-type(4n+1) {margin-left: 0;}

.state-webinars .blue-webinars-list li {width: calc(33.33% - 1.25rem); margin-left: 1.875rem;}
.state-webinars .blue-webinars-list li:nth-of-type(3n+1) {margin-left: 0;}
.state-webinars .blue-webinars-list li:nth-of-type(n+4), #state-accredited-webinars ul li:nth-of-type(n+5) {margin-top: 2.5rem;}

.speaker-biography img {margin-left: 3.75rem; margin-bottom: 2rem;}

.account-dashboard #wastewater-treatment-plant-designs .anchored {position:absolute; top:0; right:0}

#solution-tool .pageHeader {padding:5.9375rem 1em 2.1875rem}
#solution-tool .pageHeader h1 {margin-bottom: 1.5rem}
#solution-tool #select-plant-type {padding: 2.75rem 1em 3.4375rem}
#solution-tool #select-plant-type h2 { font-size: 1.75rem; color: var(--denim); text-align: center; line-height: 2.9375rem;}
#solution-tool #select-plant-type ul {max-width:60rem; margin:0 auto;   display: flex;   flex-direction: row;   flex-wrap: nowrap;   justify-content: space-between; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;   align-items: flex-start;}
#solution-tool #select-plant-type ul li .brief{max-width:16rem}

#solution-tool #plant-specs {padding: 3.75rem 1em 5rem}

#solution-tool #plant-specs .wrap h2 {font-size: 1.75rem; margin-bottom: 1.5rem;}
#solution-tool #plant-specs .wrap .specs-table .group .row {  display: flex;   flex-direction: row;   flex-wrap: nowrap;   justify-content: space-between; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;   align-items: flex-start;}
#solution-tool #plant-specs .wrap .specs-table .group .row > * {width: 50%}
#solution-tool #plant-specs .wrap .specs-table .group .row.multiple-inputs .inputs {  display: flex;   flex-direction: row;   flex-wrap: nowrap;   justify-content: space-between; -webkit-align-content: flex-start; -ms-flex-line-pack: start; align-content: flex-start;   align-items: flex-start;}
#solution-tool #plant-specs .wrap .specs-table .group .row.multiple-inputs .inputs .radio input {margin-right:0; margin-left:0}
#solution-tool #plant-specs .submit {text-align: center;}
#solution-tool #plant-specs [type="submit"] {width: 100%; max-width:18.8125rem}
#solution-tool [type="submit"] {font-size: 1.125rem; line-height:2.8125rem; padding: 0 1.5em}
#solution-tool.step-2 #we-have-a-solution {padding: 2.875rem 1em  11.25rem}
#solution-tool.step-2 #we-have-a-solution .wrap {max-width:62.875rem}
#solution-tool.step-2 #we-have-a-solution .wrap h2 {font-size: 1.75rem; margin-bottom:1em; color: var(--denim); text-align: center; line-height: 2.9375rem;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex {display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;align-items: flex-start;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .solutions-container {width:38.767%; border-radius:5px; background:#fff; padding: 0 4.5% 2em}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .solutions-container .solution + .solution {margin-top:2em}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .solutions-container .solution img {width:100%; height:auto; display: block}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .solutions-container .solution img {width:100%; height:auto; display: block}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .solutions-container .solution .title {display:block; font-weight:700; font-size: 1.25rem; color: var(--denim); text-align: center; line-height: 1.25em;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .solutions-container .solution .brief {display: block; font-size: 0.8125rem; color: #0D202D; text-align: center;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options {width:53.876%;padding-top: 1.875rem;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options > * {padding-left: 3rem;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options > * + * {border-top:1px dashed #CECECE; margin-top:3.3125rem; padding-top:3.125rem}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options h3 {position: relative; font-size: 1.4375rem; color: #062234;}
  #solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options h3:before {content:""; width:3rem; height:1.6875rem; position:absolute; left:-3rem;}
  #solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options .sign-in h3:before {background:url(/images/solution-tool/sign-in.svg) no-repeat center}
  #solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options .create-an-account h3:before {background:url(/images/solution-tool/create-account.svg) no-repeat center}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options .create-an-account h3 {margin-bottom: 0;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options h3 span {display: block; font-size: 1.125rem; font-weight:400; color: #0D202D;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options p {font-size: 1.125rem;color: #0D202D;line-height:1.375rem;}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options td {padding-bottom:0.75em}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options td [type="submit"] {margin-top: 1rem}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options .newsletter {display: block; margin: 1em 0 0.5em}
#solution-tool.step-2 #we-have-a-solution .wrap .flex .download-options textarea {min-height:6.9375rem}
#solution-tool.step-2 #custom-solution {padding:3rem 1rem 8rem}
#solution-tool.step-3 #your-solution {padding: 3.4375rem 1em; color:#0D202D}
#solution-tool.step-3 #your-solution .wrap {padding:1.125rem 2.625rem;max-width:62.875rem; background:#fff; border-radius: 5px;}
#solution-tool.step-3 #your-solution .wrap .top {margin-bottom: 2.5rem; display: flex;flex-direction: row;flex-wrap: nowrap;justify-content: space-between;-webkit-align-content: flex-start;-ms-flex-line-pack: start;align-content: flex-start;align-items: flex-start;}
#solution-tool.step-3 #your-solution .wrap .top + .top {margin-top:-1rem; padding-top: 1rem; border-top: 1px dashed #ececec}
#solution-tool.step-3 #your-solution .wrap .top .solution-image {width:45.87%}
#solution-tool.step-3 #your-solution .wrap .top .solution-image img {display: block; max-width:18.75rem; width:100%; margin:0 auto}
#solution-tool.step-3 #your-solution .wrap .top .solution-content {width:52.6%; padding-top: 1.25rem;}
#solution-tool.step-3 #your-solution .wrap .top .solution-content .tag {display: block; margin-bottom:0.5rem; font-weight: 700; font-size: 1.0625rem; color: var(--denim);}
#solution-tool.step-3 #your-solution .wrap .top .solution-content h2 {font-size: 1.75rem; margin-bottom:0.75rem; color: #062234; line-height:2.125rem}
#solution-tool.step-3 #your-solution .wrap .top .solution-content .detail {display: block; font-weight:600;font-size: 1.25rem;color: #062234;line-height: 1.25rem;}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .top .solution-content .detail.model {color:red}
#solution-tool.step-3 #your-solution .wrap .top .solution-content .detail + .detail {margin-top:0.625rem}
#solution-tool.step-3 #your-solution .wrap .top .solution-content .detail + p {margin-top: 1.25rem;}
#solution-tool.step-3 #your-solution .wrap .top .solution-content p {font-size: 1rem;color: #0D202D;line-height: 1.3125rem;}
#solution-tool.step-3 #your-solution .wrap .overage {margin-bottom:2.5rem; border-radius:5px; padding: 1.5rem 1.5rem 1.5rem 3rem; position:relative; background: rgba(255, 155, 0, 0.06); border-radius: 5px}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .overage {background:rgba(255,0,0,0.03); color: #C12800}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .overage p { color: #d20000}
#solution-tool.step-3 #your-solution .wrap .overage p {margin-bottom:0; font-size: 1rem; line-height: 1.3125rem;}
#solution-tool.step-3 #your-solution .wrap .overage .icon:before {content:""; width:1.125rem; height: 1rem; display: inline-block; margin-right:0.5em; background: url(/images/solution-tool/alert-triangle-orange.svg) no-repeat center; position: absolute; top: 1.5625rem; left: 1.3125rem;}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .overage .icon:before {background: url(/images/solution-tool/alert-triangle.svg) no-repeat center; position: absolute; top: 1.5625rem; left: 1.3125rem;}
#solution-tool.step-3 #your-solution .wrap .form-answers {margin-bottom:2.5rem;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-content: stretch;
  align-items: flex-start;
}

#solution-tool.step-3 #your-solution .wrap .form-answers .half {flex:1 1 auto}
#solution-tool.step-3 #your-solution .wrap .form-answers .half + .half {margin-left:2em}
#solution-tool.step-3 #your-solution .wrap .form-answers .half table {width:100%}
#solution-tool.step-3 #your-solution .wrap .form-answers .half table td {padding:0.5em 1em; line-height:1em}
  #solution-tool.step-3 #your-solution .wrap .form-answers .half table .alert td:first-child {border-radius: 5px 0 0 5px; }
  #solution-tool.step-3 #your-solution .wrap .form-answers .half table .alert td:last-child {border-radius: 0 5px 5px 0; }
#solution-tool.step-3 #your-solution .wrap .form-answers .half table .alert td {background: rgba(255, 155, 0, 0.06);}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .form-answers .half table .alert td {background:rgba(255,0,0,0.03);}
#solution-tool.step-3 #your-solution .wrap .form-answers .half table .alert td.icon {font-weight:700; color:#E02D00}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .form-answers .half table .alert td.icon {color:red}
#solution-tool.step-3 #your-solution .wrap .form-answers .half table .alert td.icon:before {content:""; width:1.125rem; height: 1rem; display: inline-block; margin-right:0.5em; background: url(/images/solution-tool/alert-triangle-orange.svg) no-repeat center;}
  #solution-tool.step-3 #your-solution .custom-solution.wrap .form-answers .half table .alert td.icon:before {background: url(/images/solution-tool/alert-triangle.svg) no-repeat center;}
#solution-tool.step-3 #your-solution .wrap .budget-message {margin-bottom: 2.5rem; padding: 1.5em; border-top:1px dashed #CECECE; border-bottom:1px dashed #CECECE}
#solution-tool.step-3 #your-solution .wrap .budget-message p {margin:0 auto; max-width:44.125rem; font-weight: 600; font-size: 1rem; color: #062234; line-height:1.25rem; text-align: center;}
#solution-tool.step-3 #your-solution .wrap .budget-message .estimates {padding: 0 5%; font-weight: 600; font-size: 1rem; color: #062234; line-height:1.25rem; text-align: center;   display: flex;   flex-direction: row;   flex-wrap: nowrap; -webkit-justify-content: space-around;  justify-content: space-around;   align-content: center;   align-items: center;}
#solution-tool.step-3 #your-solution .wrap .downloads {text-align: center;}
#solution-tool.step-3 #your-solution .wrap .downloads h2{font-size: 1.75rem; margin-bottom:1em; color: #062234;text-align: center;}
#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons {margin-bottom:1rem}
#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons .button {font-size:1.125rem; margin-right:0}
#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons .button:before {content:""; margin-right:0.5em; padding-left: 1em; background: url(/images/solution-tool/download.svg) no-repeat center}
#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons .button.blue {background:none; color:var(--denim); border:0}
#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons .button.blue:before {background: url(/images/solution-tool/download-orange.svg) no-repeat center}

#solution-tool.step-3 #your-solution .wrap .downloads .disclaimer {max-width:40rem; margin:0 auto; font-size: 0.8125rem; color: #0D202D; line-height: 1.0625rem;}
#solution-tool.step-3 .contact-a-rep {text-align:center; padding: 0 1em 3em;}
#solution-tool.step-3 .contact-a-rep .button {font-size:1.125rem; margin-top:1.5em}
#solution-tool.step-3 .start-over {text-align: center;background: var(--cloud-white);padding: 4rem 1rem;font-size: 1.125rem;}
#solution-tool.step-3 .start-over .button {margin:0}

.content #specifications .twoCol .photoright {margin: 0;}


.landing #callouts-delta .wrap {display: flex}
.landing #callouts-delta .residential, .landing #callouts-delta .commercial {width: 50%;margin:0 1rem 1rem;}

/* FADE ------------------------------ */
.fadeInUp {-webkit-transition: ease all 1s;transition: ease all 1s; opacity: 0; -webkit-transform: translateY(100px); transform: translateY(100px);}
.fadeInDown {-webkit-transition: ease all 1s;transition: ease all 1s; opacity: 0; -webkit-transform: translateY(-100px); transform: translateY(-100px);}
#tinymce .fadeInUp {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}
.fadeInUp.play,
.fadeInDown.play {opacity: 1; -webkit-transform: translateY(0); transform: translateY(0);}



/* HOMEPAGE CALLOUTS RIBBON ------------------------------ */

.home-callouts::before {
  aspect-ratio: 335 / 275;
  background: url('/images/logo-swoosh.svg') no-repeat center / contain;
  content: '';
  height: 17.1875em;
  inset: -2.375em calc(50% - 46em) auto auto;
  position: absolute;
}

.home-callouts .textbox p {
	margin-inline: auto;
  max-width: 30em;
}

.home-callouts ul.ws-flex {
  --ws-column-count: 3;
}



.home-callouts ul>li>a:is(:hover,:focus-visible) {
  background: rgba(var(--denim-rgb), .03);
  border-color: var(--denim);
}

.home-callouts ul>li>a:is(:hover,:focus-visible) span.link {
  color: var(--denim);
}

.home-callouts ul>li>a:is(:hover,:focus-visible) strong.title::before {
	background: var(--denim);
}



/* RESPONSIVE --------------------------------- */
@media screen and (max-width:1245px) {
  #upcoming-webinars .wrap, #past-webinars .wrap, #state-accredited-webinars .wrap {padding-left: 3vw; padding-right: 3vw;}
  #past-webinars .button.blue {right: 3vw;}
}

@media screen and (max-width:1130px) {
  .back-to-top {right: 1.5rem}
}

@media screen and (max-width:1050px) {
  .flexible-callouts.hover-text ul li {width: 40%;}
  .content .icon-links > li {width: 50%}
  .landing #recycle-with-us .wrap form {min-width: 45%}
  .landing #logos span {font-size: 0.875em; line-height: 1.125em}
}

@media screen and (max-width:1024px) {
  h1 { font-size:2em; }
  h2, .content * h1 {font-size:1.625em;}
  h3, .content * h2 {font-size:1.25em;}
  h4, th {font-size:1.125em;}

  #content .twoCol.flex {display: block}
  #content .twoCol.flex > * {width:100%; margin-bottom:0}
  #content .twoCol.flex > .login-to-account {border-right:0; margin-bottom:2em;border-bottom: 1px solid #ccc}
}



@media screen and (max-width:1020px) {

  .seriesList li {width: 48%;}
  /* Application Callouts */
  main .application-callouts h2 {margin: 0; position: relative; top: auto; left: auto; -webkit-transform: translateX(0); transform: translateX(0); white-space: normal;}
  .split-list:before, .split-list:after {display: none;}

  .landing .icon-cards .wrap .cardContainer,
  .landing .icon-cards .wrap .cardContainer:nth-child(5),
  .landing .icon-cards .wrap .cardContainer:nth-child(10) {width: 49%; margin: 0 2% 2% 0}
  .landing .icon-cards .wrap .cardContainer:nth-child(even) {margin-right:0}

  #upcoming-webinars ul li, #upcoming-webinars ul li:nth-of-type(3n+1), #past-webinars ul li, #past-webinars ul li:nth-of-type(4n+1), #state-accredited-webinars ul li {width: calc(50% - 1rem); margin-left: 2rem;}
  #upcoming-webinars ul li:nth-of-type(odd), #past-webinars ul li:nth-of-type(odd), #state-accredited-webinars ul li:nth-of-type(odd) {margin-left: 0;}
  #upcoming-webinars ul li:nth-of-type(n+3), #state-accredited-webinars ul li:nth-of-type(n+3) {margin-top: 3.5rem;}
  #past-webinars ul li:nth-of-type(n+3) {margin-top: 2rem;}
  .state-webinars .blue-webinars-list li, .state-webinars .blue-webinars-list li:nth-of-type(3n+1) {width: calc(50% - 15px); margin-left: 1.875rem;}
  .state-webinars .blue-webinars-list li:nth-of-type(odd) {margin-left: 0;}
  .state-webinars .blue-webinars-list li:nth-of-type(n+3) {margin-top: 2rem;}

  .single-location .action-items {position:relative; top:auto; right:auto; margin-bottom:1.5rem}
  .account-dashboard #wastewater-treatment-plant-designs .anchored {position:relative; margin-bottom:1em}

  #solution-tool .pageHeader {padding: 3em 1em 2em;}
  #solution-tool .pageHeader .steps .step {font-size:0.875rem; line-height: 1em;}

  .content .application-callouts ul {
    flex-wrap: wrap;
  }

  .content .application-callouts ul li {
    background: none;
    width: 100%;
  }

  .content .application-callouts ul li div {
    max-width: 200px;
  aspect-ratio: 1/1;
  padding: 0;
  height: auto;
  margin: 0 auto 1em;
  }

}


@media screen and (max-width: 900px) {
  #relatedProducts.productPageRev .information { padding: 1em .75rem 5.5em; }
  .productPageRev .right .top {     flex-direction: column; }
  .productPageRev .right .top-left, .productPageRev .right .top-right { border: 0; padding: 0 0 1.5rem; width: 100%; }
  .content .categories li {width:100%}
  .content .categories.smaller li {width:50%}
  .home .split-list > .wrap > section {width: 100%;}

  #solution-tool.step-3 #your-solution .wrap .form-answers {flex-wrap: wrap;}
  #solution-tool.step-3 #your-solution .wrap .form-answers .half {width:100%}
  #solution-tool.step-3 #your-solution .wrap .form-answers .half + .half {margin:0}
  #solution-tool.step-3 #your-solution .wrap .form-answers .half td {width:50%}

  #productInfo > * {
    width: 100%;
  }

  #productInfo > .left {
    margin-bottom: 2em;
  }

}


@media screen and (max-width:800px) {
  .flexible-callouts.hover-text ul li a .back {font-size: .9em;}
  .flexible-callouts.hover-text ul li a .back h3 {font-size: 1em;}
  .flexible-callouts.hover-text ul li a .back p {font-size: .9em;}

  #content {padding-right: 0;}
  .photoright, blockquote {margin-right: 0;}

  .productPageRev h1, #ot-intro h1, #state-tests h1, #resource-map h1 { font-size: 2.25rem; }
  #resource-map #location-select .select-toggle { width: 14rem;}

  .state-webinars, .webinar-page #content {padding-right: 3vw;}
  .state-webinars .button.white {right: 3vw;}
  .speaker-biography img {margin-left: 2.5rem;}

  .home-callouts ul.ws-flex {
    --ws-column-count:2;
  }

  ul.categories.ws-flex {
    --ws-column-count: 2;
  }

}


/* ------------ STYLE-D.CSS ------------ */