@charset "UTF-8";

/* Rainwater Harvesting System diagram ------------------------------ /
* - /store/rainwater-harvesting-system/
*/

.rainwater-harvesting-diagram {
  background: #FFF;
  padding-block: clamp(2em, 1.273em + 3.64vw, 4em) clamp(1em, 0.455em + 2.73vw, 2.5em);
  text-align: center;
  --ws-gap: 1.5em;
}

.rainwater-harvesting-diagram .wrap {
  max-width: calc(61em + 2 * var(--ws-gap));
  overflow: visible;
  padding-inline: var(--ws-gap);
}

.rainwater-harvesting-diagram h2 {
  font-size: clamp(1.25em, 0.886em + 1.82vw, 2.25em);
  margin: 0 0 1.25em;
}


/* Diagram */
.rainwater-harvesting-diagram .diagram {
  position: relative;
}

.rainwater-harvesting-diagram figure {
  margin: 0;
}

.rainwater-harvesting-diagram figure img {
  max-width: 100%;
}



/* Drops */
.rainwater-harvesting-diagram li {
  position: absolute;
}


.rainwater-harvesting-diagram li:nth-child(1) { left: 12%; top: 0;}
.rainwater-harvesting-diagram li:nth-child(2) { left: 22.5%; bottom: 0;}
.rainwater-harvesting-diagram li:nth-child(3) { left: 57%; bottom: 15%;}
.rainwater-harvesting-diagram li:nth-child(4) { left: 73%; bottom: 20%;}
.rainwater-harvesting-diagram li:nth-child(5) { right: 0.5%; top: 2%;}

.rainwater-harvesting-diagram li>button {
  aspect-ratio: 58 / 79;
  background: #0065A4;
  border: 0;
  font-size: clamp(1.25em, 0.841em + 2.05vw, 2.375em);
  mask-image: url('/images/drop.svg');
  mask-repeat: no-repeat;
  mask-size: 100% auto;
  padding: 0;
  text-align: center;
  width: 1.526em;
}

.rainwater-harvesting-diagram li>button>span {
  position: relative;
  top: .125em;
}

.rainwater-harvesting-diagram li:first-child>button>span {
  left: -.0625em;
}


/* Popup bubbles */
.rainwater-harvesting-diagram li>button+div {
  background: #E9F3F9;
  right: 94%;
  opacity: 0;
  padding: var(--ws-gap) var(--ws-gap) 2em;
  position: absolute;
  text-align: center;
  top: 1em;
  visibility: hidden;
  width: clamp(16em, 7.25em + 18.67vw, 21.25em);
  z-index: 1;
}


/* Arrows */
.rainwater-harvesting-diagram li>button+div::before,
.rainwater-harvesting-diagram li>button+div::after {
  border-style: solid;
  content: '';
  font-size: clamp(0.75em, 0.333em + 0.89vw, 1em);
  pointer-events: none;
  position: absolute;
  top: 1.0625em;
}

.rainwater-harvesting-diagram li>button+div::before {
  border-width: .875em .8125em .875em 0;
  border-color: transparent var(--indigo) transparent transparent;
  display: none;
  right: 100%;
}

.rainwater-harvesting-diagram li>button+div::after {
  border-width: .875em 0em .875em .8125em;
  border-color: transparent transparent transparent var(--indigo);
  left: 100%;
}


.rainwater-harvesting-diagram li>button+div>strong {
  color: var(--indigo);
  display: block;
  font-size: clamp(1em, 0.818em + 0.91vw, 1.5em);
  line-height: 1;!;
  margin: 0 0 .875em;
}

.rainwater-harvesting-diagram li>button+div>.button {
  margin: 0
}





/* Background for wrap below rainwater-harveseting-diagram */
.bg-wrap {
  background-color: var(--cloud-white);
}

.bg-wrap {
  overflow: hidden;
}

.bg-wrap .wrap {
  overflow: visible;
}




/* Grid  ------------------------------ */

.grid {width:100%; clear: both;display: block}
.grid .col{float:left;}
.gridInline .col{display: inline-block; float: none}
.grid .col10{width:10%}
.grid .col20{width:20%}
.grid .col25{width:25%}
.grid .col30{width:30%}
.grid .col33{width:33.333%}
.grid .col35{width:35%}
.grid .col40{width:40%}
.grid .col50{width:50%}
.grid .col60{width:60%}
.grid .col60{width:60%}
.grid .col66{width:66.666%}
.grid .col70{width:70%}
.grid .col75{width:75%}
.grid .col80{width:80%}
.grid .col90{width:90%}
.grid .colInside{width:100%;background-color:#efefef}

#content .checkout > form,
#content .checkout {width:100%; padding-right:0}
#content .checkout h1 {margin-bottom: 1.25em; float:none; text-align:left; line-height: 120%}
#content .checkout li {text-indent: 0}
#content .checkout li:before {display: none}
#content .checkout .print {float:right; padding:0.5em 1em; display: inline-block; margin-top: -6em}
#content .checkout .print:before {content: "\f02f"; font-family: FontAwesome; margin-right:0.5em; display:inline-block; font-weight:100}
#content .checkout .print+p {margin: -2em 0 2em; display: block}
#content .checkout .grid {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 .checkout .creditcard.grid {display: block}
#content .checkout .col .grid {display: block}
#content .checkout img {max-width:100%; height: auto}
#content .checkout .back, #content .checkout .edit {float: right; font-size: 0.8em}
#content .checkout section h1 {font-size: 1.35rem; text-align: left; margin-bottom: 0.5em}
#content .checkout section h2 {font-size: 1.15rem;}
#content .checkout section.items a h2 {margin: 0.4em 0}
#content .checkout section a:hover h2 { color: var(--indigo); }
#content .checkout .left {padding-right:5%; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
#content .checkout .left > section {width:100%; float: left; clear:both}
#content .checkout .left .bulky {float: right}
#content .checkout .left [value="Place Order"] {float: right;}
#content .checkout .left .items {width:100%; float: left; clear:both}
#content .checkout .left .items li {overflow: auto; width:100%; border-bottom: 1px solid rgba(39, 118, 167, 0.2); padding: 1.5em 0; background:none}
#content .checkout .left .items li .col {text-align: right}
#content .checkout .left .items li .col.product-image {margin:0; padding: 0 1.5rem 1rem 0;min-height: 1px;}
#content .checkout .left .items li .col.product-image a {display: block; padding-right: 1em; margin: 0; padding: 0 0 80%; position: relative; }
#content .checkout .left .items li .col.product-image a 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; }

#content .checkout .left .items li .col40 {text-align: left}
#content .checkout .left .items li .col40+.col20 label {line-height: 2.3rem}
#content .checkout .left .items li .price {text-align: right; line-height: 2.3rem}
#content .checkout .left .items span {display: block; font-size:1rem; line-height: 120%;}
#content .checkout .left .items span.cartRedText,
#content .checkout .left .items span.cartGreenText {color:#000; font-style: italic; display: inline-block}
#content .checkout .left .items .remove {cursor:pointer; font-size: 0.75em}
#content .checkout .left .items .remove:before {content: "\00D7\ "; font-weight:600}
#content .checkout .left .items input {width: 5em}
#content .checkout .left .items input[value="Update Cart"] {width: auto; float: right}
#content .checkout .left .items+form {display: none}
#content .checkout .left .productList {margin:3em 0 5em; padding:0}
#content .checkout .left .productList h1 {text-align: left}
#content .checkout .left .productList h1:before,
#content .checkout .left .productList h1:after {content: ''}
#content .checkout .left .productList .subCat {border:0}
#content .checkout .left .callout {background: #ececec; padding: 3em; margin-top:3em; text-align: center; border-radius: 0.35em}
#content .checkout .left .callout p:first-child {font-style: italic}
#content .checkout .left .callout h1 {font-size: 2em; color:#0085c3; margin: 0.75em 0 1em}
#content .checkout .left .callout p:nth-child(3) {line-height: 150%; color:#666; margin-bottom:2em}
#content .checkout .left .fields {border-bottom: 1px solid rgba(39, 118, 167, 0.2)}
#content .checkout .left .fields.closed h1 {margin-bottom: 0}
#content .checkout .left .fields div {margin-bottom: 0.25em}
#content .checkout .left .fields form > div, #content .checkout .left .fields .paypal {margin: 1em 0}
#content .checkout .left .fields.billing form > label {display: inline-block;  border: 1px solid rgba(0,0,0,.2);padding: 0 1em;box-shadow: none; cursor: pointer; line-height: 2.3rem;height: 2.3rem;background: #eee;border-radius: 0.25em;}
#content .checkout .left .fields [type="text"],
#content .checkout .left .fields [type="email"],
#content .checkout .left .fields [type="password"],
#content .checkout .left .fields select {width: 100%}
#content .checkout .left .shipping {padding-bottom: 3em}
#content .checkout .left .shipping.closed {padding: 0 0 1em}
#content .checkout .left .fields .shippingMethod div {margin-bottom: 0}
#content .checkout .left .fields .shippingMethod > .col30 {text-align: right; padding-right:5%; font-weight:600}
#content .checkout .left .fields .shippingMethod > .col70 {float: right; clear:right}
#content .checkout .left .fields .shippingMethod > .col70 .col70 {width:100%}
#content .checkout .left .fields .shippingMethod span {float: right}
#content .checkout .left .billing {padding: 2em 0 3em; margin-bottom:1.75em}
#content .checkout .left .billing.closed {padding: 1em 0}
#content .checkout .left .billing .billingAddress {padding-right:2%}
#content .checkout .left .billing #useAddress {margin-bottom: 2em}
#content .checkout .left .billing .billingAddress :checked ~ label + div,
/*#content .checkout .left .billing .cardInfo label + div {display: none}*/
#content .checkout .left .billing .cardInfo :checked ~ label + div {display: block}
#content .checkout .left .billing .cardInfo {margin-bottom: 1em}
#content .checkout .left .billing .cardInfo .cardOptions {width:200%; margin-top:0.5em}
#content .checkout .left .billing .cardInfo .payP .cardOptions {margin-left: -100%}
#content .checkout .left .billing .cardInfo [for="CreditCard"]:before {content: "\f09d"; font-family:FontAwesome; display:inline-block; margin-right:0.25em;}
#content .checkout .left .billing .cardInfo [for="PayPal"]:before {content: "\f1ed"; font-family:FontAwesome; display:inline-block; margin-right:0.25em;}
#content .checkout .left .billing .cardInfo :checked ~ [for="CreditCard"],
#content .checkout .left .billing .cardInfo :checked ~ [for="PayPal"] {color: #000}
#content .checkout .left .billing input + span {font-size: 0.8em; font-style: italic; color:#666; display:block; margin:0.25em 0 0.75em; line-height:120%;}
#content .checkout .left .billing .verNum {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: center; -ms-flex-line-pack: center; align-content: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center;}
#content .checkout .left .billing .verNum [type="text"] {width: calc(100% - 3rem)}
#content .checkout .left .billing .verNum #que {display: none; width:100%}
#content .checkout .left .billing .verNum label {cursor: pointer}
#content .checkout .left .billing .verNum label[for="que"] {width:1.25rem; height: 1.25rem; text-align: center; background:#333; line-height: 1.25rem; border-radius:50%; margin-left:0.25em; display:inline-block; vertical-align:middle; transition:all 200ms ease-out; cursor:pointer}
#content .checkout .left .billing .verNum label[for="que"]:before {content: "?"; display: block; color:#fff; font-size: 0.7em}
#content .checkout .left .billing .verNum label[for="que"]:hover,
#content .checkout .left .billing .verNum :checked ~ label[for="que"] {background: #ccc}
#content .checkout .left .billing .verNum aside {display: none;margin:1em 0; font-size: 0.8em; line-height: 120%;}
#content .checkout .left .billing .verNum aside strong {display: block}
#content .checkout .left .billing .verNum :checked ~ label[for="que"] + aside {display: block;}
#content .checkout .left .billing .expiration select {width:4em}
#content .checkout .left .billing .expiration select+select {width:5em}
#content .checkout .order-confirmation .left .items,
#content .checkout .order-confirmation .left .shipping,
#content .checkout .order-confirmation .left .billing {margin: 0; padding-bottom: 0; border-bottom: 0}
#content .checkout .order-confirmation .left .createAccount {margin: 1em 0; padding-bottom: 2em; border-bottom: 1px solid rgba(39, 118, 167, 0.2)}
#content .checkout .order-confirmation .left .createAccount h3 {margin: 0}
#content .checkout .order-confirmation .left .billing {padding-top: 1em}
#content .checkout .order-confirmation .left section > h1 {margin-bottom: 0}
#content .checkout .order-confirmation .left .items ul {margin-bottom: 0}
#content .checkout .order-confirmation .left .items li:last-child {border: 0}
#content .checkout .right {width: 16em; background: #fff; border: 2px solid #ccc; padding: 1em;}
#content .checkout .right .overview {font-size: 0.9em; padding:1em; background: #e4f2fa}
#content .checkout .right .overview.closed {border-radius: 0.35em; margin-bottom: 1em}
#content .checkout .right .overview.closed + .create {width: 100%; text-align: center}
#content .checkout .right .overview ul {margin:0}
#content .checkout .right .overview li {background:none; width:100%; overflow: auto; text-indent: 0; padding: 0}
#content .checkout .right .overview li+li {margin-top: 0.25em}
#content .checkout .right .overview li:last-child {font-size: 1.1em; border-top: 1px solid rgba(39, 118, 167, 0.2);margin-top: 1.25em; padding: 0.75em 0 0}
#content .checkout .right .overview li span {background:none; padding: 0; float: right}
#content .checkout .right .overview li:last-child span {font-weight:600}
#content .checkout .right .overview li input {max-width: 6.75em;}

#content .checkout .right .overview li.calculateShipping form {
  align-items: center;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: space-between;
  width: 100%;
}


#content .checkout .right .overview li input {margin-right:0.25em;-webkit-flex: 1 1 auto;-ms-flex: 1 1 auto;flex: 1 1 auto;}
#content .checkout .right .overview li #btnCalcShipping {padding: 0 0.5em; text-align: center; line-height: 1.6rem}
#content .checkout .right .overview li hr {margin:1em 0}
#content .checkout .right .action {padding: 1.75em 0 1em;}
#content .checkout .right .action input {width:100%; margin-bottom: 0.25em}
#content .checkout .right .action [value="Login To Checkout"] { margin: 0 0 1em}
#content .checkout .right .action > a {width:100%; text-align: center; display: block; font-size: 1em; margin:0;}
#content .checkout .right .action >.small{font-size: .75em; font-style: italic; color:#666}
#content .checkout .right .action >.small:hover {color:#005c8f}
#content .checkout .right .action > form + a {width:100%; text-align: center; display: block; font-size: 1em; margin:0; background:none}
#content .checkout .right .action [value="Place Order"] {margin:0}
#content .checkout .right .discount {margin-top: 1em}
#content .checkout .right .discount form {display: -ms-flexbox;display: -webkit-flex;display: flex;-webkit-flex-direction: row;-ms-flex-direction: row;flex-direction: row;-webkit-flex-wrap: nowrap;-ms-flex-wrap: nowrap;flex-wrap: nowrap;-webkit-justify-content: center;-ms-flex-pack: center;justify-content: center;-webkit-align-content: center;-ms-flex-line-pack: center;align-content: center;-webkit-align-items: center;-ms-flex-align: center;align-items: center;}
#content .checkout .right .discount span {display: block; font-size:0.7em; font-style: italic}
#content .checkout .right .discount form span {float:right}
#content .checkout .right .discount input {width:100%; -webkit-flex: 1 1 auto; -ms-flex: 1 1 auto; flex: 1 1 auto;}
#content .checkout .right .discount [type="submit"] {width: 5em; height: 1.875rem; padding: 0 0.5em; font-size:.9em; float: right}
#content .checkout .right .discount [type="text"] {height: 1.875rem; margin-right:0.25em; padding:0 0.5em;}
#content .checkout .manageLinks {position: absolute; top: 0; right: 0;}
.paypal-button {width:26em !important; max-width:100% !important; height: calc(3rem + 2px) !important; border: 1px solid #0085c3 !important; position: relative !important; max-width:100% !important; background:#339dcf !important}
.paypal-button:hover {background: #0085c3 !important}
.paypal-button span img,
.paypal-button br + span,
.paypal-button span span,
.paypal-button span.paypal-button-content {display: none !important}
.paypal-button .paypal-button-logo {display: block !important}
.paypal-button .paypal-button-logo:before {content: ""; position: absolute; top:0; left:0; font-size: 1rem; background: url(/images/icons/misc/paypal-logo.svg) no-repeat center #fff; transition: ease all 200ms; width: 3.2rem;height: 100%;display: inline-block;background-size: 23px 27px}
.paypal-button:hover .paypal-button-logo:before {background: url(/images/icons/misc/paypal-logo.svg) no-repeat center #eee;background-size: 23px 27px}
.paypal-button .paypal-button-logo:after {content: "Check out with PayPal ›"; text-shadow: 0 2px 0 #0085c3; vertical-align: middle;font-size: 0.9rem;display: inline-block;padding-left: 3.75rem; line-height: 3rem; font-style: italic;}

.cartTable td{padding:.2em 0}
.cartTable input, .cartTable select, .cartTable textarea,.cartTable table{width:100%;max-width:400px;max-width:30rem}
.cartTable td:first-child{width:1%; white-space:nowrap;padding-right:.2em}
.cartTable table td{width:50%;padding-left:.2em}
.cartTable table td:first-child{width:50%;padding-right:.2em;padding-left:0}
#content .checkout .left50{float:left;width:50%;padding:0 2em 0 0;margin-bottom:1em}
#content .checkout .left50+.left50{padding:0 0 0 2em}
#content .checkout .left50+hr{clear:both}
.cartTabs{white-space:nowrap;float:left}
.cartTabs>*{margin-right:1em}
.cartTabs>*:before{content:"\203A";margin-right:1em;opacity:.5}
.cartTabs>*:first-child:before{content:"";margin-right:0}
.cartTabs .on{background:#ccc;padding:.5em .8em}

.checkout .twoCol{margin-top:4em}
#content .twoCol section, #content .threeCol section{display:inline-block;margin:0;width:100%;margin-top:0}
.twoCol section, .threeCol section{padding-bottom:2em;display:inline-block;}
.createAccountBtn{line-height:2em;padding-top:2em}
.cartTotal{font-size:1.5em;font-weight:bold}
table input{width:100%}
.checkout table input[type="submit"], .checkout table input[type="radio"], .checkout table input[type="checkbox"],table input[type="submit"], table input[type="radio"], table input[type="checkbox"]{width:auto}
.checkout hr{clear:both}
.threeCol td{width:50%}

.cartRedText  { color:#CC0000; }
.cartGreenText  { color:#006600; }
.wsProductsTable3 {border-collapse:collapse; margin:20px 0; width:100%}
.wsProductsTable { border-collapse:collapse;width:100%; margin:20px 0 20px;border-bottom:1px solid #dadada}
.wsProductsTable tr>*{text-align:right;padding:.5em 0 .5em 1em}
.wsProductsTable tr>*:first-child, .wsProductsTable tr>td:first-child+td{text-align:left;padding-left:0}
.wsProductsTable th {padding-bottom:5px}
.wsProductsTable td {border-top:1px solid #dadada}
.wsProductsTable em, .wsProductsTable td>span {line-height:1.3em;}
.wsProductsTable em, .wsProductsTable td>span, .wsProductsTable2 em, .wsProductsTable3 table tr>td:first-child, .wsProductsTable4 tr>td:first-child {font-size:.9em;opacity:.65;filter:alpha(opacity=65);}
.wsProductsTable3 table tr>td:first-child, .wsProductsTable4 tr>td:first-child  {font-style:italic}
strong.bulky {font-size:1.5em}
.discountCode{white-space:nowrap;float:left}
.updateTotal{float:right}
.products .threeCol section{display:inline-block}
.cartTabs img {position:relative;bottom:-3px}

.wsProductsTable3 table tr>td:first-child.text {opacity:1;filter:alpha(opacity=100); font-style:normal}
#content #wsDashboardChartTable tr+tr li {background:none; padding:0 0 0 25px; text-indent:-25px}
#content #wsDashboardChartTable tr+tr ul {background:none; margin-left:30px;}
#content #wsDashboardChartTable tr+tr strong {color:#000; font-size:1.6em}
#wsDashboardButtons, #wsDashboardLinks {position:relative}
#wsDashboardButtons>div, #wsDashboardLinks>div {float:right;position:relative;left:-50%;}
#wsDashboardButtons>div>ul, #wsDashboardLinks>div>div {position:relative;left:50%}
#wsDashboardButtons>div>ul>li, #wsDashboardLinks>div>div>ul {float:left;position:relative;background:none;}
#wsDashboardButtons>div>ul>li>a , #wsDashboardLinks>div>div>ul {padding:15px 0 10px;width:170px; margin:0 25px 20px;}
#wsDashboardButtons>div>ul>li {padding:0}
#wsDashboardButtons>div>ul>li>a {display:block;border:1px solid #e6e6e6; text-decoration:none;text-align:center;color:#999;
  -moz-border-radius: .5em;border-radius: .5em;
  background: #efefef; /* for non-css3 browsers */
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#f2f2f2', endColorstr='#e6e6e6'); /* for IE */
  background: -webkit-gradient(linear, left top, left bottom, from(#f2f2f2), to(#e6e6e6)); /* for webkit browsers */
  background: -moz-linear-gradient(top,  #f2f2f2,  #e6e6e6); /* for firefox 3.6+ */
  -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 0 rgba(49,101,155,0);-webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 0 rgba(49,101,155,0);box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 0 rgba(49,101,155,0);
  -webkit-transition: all 300ms ease-out;
  -moz-transition: all 300ms ease-out;
  -o-transition: all 100ms ease-out;
  transition: all 300ms ease-out;
}
#wsDashboardButtons>div>ul>li>a>strong { font-size:1.6em;color:#333}
#wsDashboardButtons>div>ul>li>a>img { margin:5px 0 0}
#wsDashboardButtons>div>ul>li>a:hover {color:#666;
  -webkit-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 45px rgba(49,101,155,0.15);
  -moz-box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 45px rgba(49,101,155,0.15);
  box-shadow: 0px 3px 8px rgba(0,0,0,0.25), inset 0 0 45px rgba(49,101,155,0.15);
}

#wsDashboardLinks>div>div>ul>li{ background:none}
#wsDashboardLinks>div>div>ul>li>a{text-decoration:none}
#wsDashboardLinks>div>div>ul>li img{position:relative;bottom:-3px;margin:0 5px 0 0}

.mobileOnly {display: none}



.button-flex {
  align-items: center;
  display: flex;
  flex-direction: row-reverse;
  justify-content: space-between;
}



/* MAX-WIDTH MEDIA QUERIES ------------------------------ */


/* 1200px */
@media (max-width: 75em) {
  .rainwater-harvesting-diagram li:is(:nth-child(1), :nth-child(2))>button+div {
    left: 94%;
    right: auto;
  }
  .rainwater-harvesting-diagram li:is(:nth-child(1), :nth-child(2))>button+div::before {
    display: block;
  }

  .rainwater-harvesting-diagram li:is(:nth-child(1), :nth-child(2))>button+div::after {
    display: none;
  }
}





@media screen and (max-width:750px) {
  .mobileOnly { display: block; }
  #content .checkout > .grid {margin-bottom: 4em}
  .checkout .twoCol, .checkout .threeCol {
    -webkit-columns:1;
    -moz-columns:1;
    columns:1;
    -webkit-column-gap:0;
    -moz-column-gap:0;
    column-gap:0;
    -webkit-column-rule:0;
    -moz-column-rule:0;
    column-rule:0;
  }
  #content .checkout section+section{margin-top:2em;padding-top:2em;border-top:1px solid rgba(39, 118, 167, 0.2)}
  #content .checkout .left50, #content .checkout .left50+.left50{float: none;width:100%;padding:0}

  #content .checkout .grid {-webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap;}
  #content .checkout .left,
  #content .checkout .right {width:100%}
  #content .checkout .left {border-right: 0; padding: 0 0 2em}
  #content .checkout .left .items li .col,
  #content .checkout .left .items li .price {width: 100%; text-align: left}
  #content .checkout .left .items li .amount {width: 60%; float:left}
  #content .checkout .left .items li .total-price {width: 40%; float:left; text-align: right}
  #content .checkout .left .items li .total-price span {text-align: right}
  #content .checkout .left .items li .col.product-image a {display: block; padding: 0 0 10em; max-width: 70%; margin:0 auto}
  #content .checkout .left .items li .col40 + .col20 label {font-size: 1rem}
  #content .checkout .left .items input[value="Update Cart"] {display: block;float: none;width: auto;margin: 0 auto;}
  #content .checkout .left .fields.shipping {padding-bottom: 1em}
  #content .checkout .left .fields.billing {margin-top: 0; padding:1em 0; border-bottom:0; border-top:0; margin-bottom:0}
  #content .checkout .left .items {margin-top: 1em; padding-top:1em}
  #content .checkout .left .bulky,
  #content .checkout .left .fields.shipping .col50,
  #content .checkout .left .fields.billing .col50 {width: 100%; display: block; float: none}
  #content .checkout .left .fields.billing .col50 {padding-right: 0}
  #content .checkout .left .fields.billing .cardInfo > .col {padding: 0.5em 0}
  #content .checkout .left .fields.billing #useAddress {margin-bottom: 1em}
  #content .checkout .left .fields.shipping .col60,
  #content .checkout .left .fields.billing .col60 {width:70%}
  #content .checkout .left .fields .shippingMethod > .col30 {text-align: left; font-weight: 400}
  #content .checkout .left .fields .shippingMethod > .col70 {font-size: 0.875em; width:100%;}
  #content .checkout .right .discount {margin-top: 0}
  #content .checkout .right .action > a.bulky {font-size: 1.2em}
  #content .checkout .right .create {display: none}
  #content .checkout .left .billing .cardInfo label + div .col {width: 100%}
  #content .checkout .left .billing .cardInfo :checked ~ label + div {display: block; overflow: auto; width: 100%; padding-left: 1.5em}
  #content .checkout .left .billing .cardInfo .cardOptions {width:100%; margin-top:0.5em}
  #content .checkout .left .billing .cardInfo .creditC .col {width:100%;}
  #content .checkout .left .billing .cardInfo .creditC .col40 {margin-bottom: 0}
  #content .checkout .left .billing .cardInfo .payP .cardOptions {margin-left: 0}
  #content .checkout .left .billing .expiration select,
  #content .checkout .left .billing .expiration select+select {width:49%}
  #content .checkout .order-confirmation .right {order: 1; border-top: 0}
  #content .checkout .order-confirmation .left {order: 2}
  #content .checkout .order-confirmation .left .shipping,
  #content .checkout .order-confirmation .left .billing {padding: 1.75em 0}
  #content .checkout .order-confirmation .left .createAccount {border: 0; padding-bottom: 1.75em}
  #content .checkout .left .fields [type="text"],
  #content .checkout .left .fields [type="email"],
  #content .checkout .left .fields [type="password"],
  #content .checkout .left .billing .expiration select {padding: .6em .8em; font-size: 1rem}

  .rainwater-harvesting-diagram li>button+div {
    content-visibility: hidden;
    display: none;
  }

}


@media screen and (max-width:450px) {
  .noMobile{display:none}
  .wsProductsTable th{font-size:1em}
  .wsProductsTable tr>*{text-align:right;padding:.2em 0 .2em .5em}
  .cartTabs>*{margin-right:.5em}
  .cartTabs>*:before{margin-right:.5em}
}






/* MIN-WIDTH MEDIA QUERIES ------------------------------ */

/* 750px */
@media (min-width: 46.875em) {

  .rainwater-harvesting-diagram li:is(:hover,:focus-within)>button,
  .rainwater-harvesting-diagram li>button:is(:hover,:focus-visible) {
    background: #FF4818;
  }

  .rainwater-harvesting-diagram li:is(:hover, :focus-within)>div,
  .rainwater-harvesting-diagram li>button:is(:hover, :focus-visible)+div {
    opacity: 1;
    visibility: visible;
  }

}



/* 500px */
@media (max-width: 31.25em) {
  .button-flex {
    flex-direction: column;
    row-gap: 1.5em;
  }
}