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


:root {

  /* Primary Palette */
  --aqua: #009CDE;
  --aqua-accessible: #32AADD;
  --aqua-rgb: 0, 156, 222;
  --storm-grey: #25282A;
  --storm-grey-rgb: 37,40,42;
  --mist-grey: #D9D9D6;
  --mist-grey-rgb: 217,217,214;
  --cloud-white: #EAEAE8;
  --cloud-white-rgb: 234,234,232;

  /* Secondary Palette */
  --indigo: #03257E;
  --indigo-rgb: 3, 37, 126;
  --denim: #02638A;
  --denim-rgb: 2,99,138;
  --ice-blue: #A1C6D6;
  --ice-blue-rgb: 161,198,214;

  --ws-gap: 1.5em;

  interpolate-size: allow-keywords;

}

/* Aeonik - Light */
@font-face {
  font-family: 'Aeonik';
  src: url('/includes/fonts/Aeonik-Light.woff2') format('woff2'), url('/includes/fonts/Aeonik-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
/* Aeonik - Light Italic */
@font-face {
  font-family: 'Aeonik';
  src: url('/includes/fonts/Aeonik-LightItalic.woff2') format('woff2'), url('/includes/fonts/Aeonik-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
/* Aeonik - Regular */
@font-face {
  font-family: 'Aeonik';
  src: url('/includes/fonts/Aeonik-Regular.woff2') format('woff2'), url('/includes/fonts/Aeonik-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
/* Aeonik - Regular Italic */
@font-face {
  font-family: 'Aeonik';
  src: url('/includes/fonts/Aeonik-RegularItalic.woff2') format('woff2'), url('/includes/fonts/Aeonik-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
/* Aeonik - Bold */
@font-face {
  font-family: 'Aeonik';
  src: url('/includes/fonts/Aeonik-Bold.woff2') format('woff2'), url('/includes/fonts/Aeonik-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* Aeonik - Bold Italic */
@font-face {
  font-family: 'Aeonik';
  src: url('/includes/fonts/Aeonik-BoldItalic.woff2') format('woff2'), url('/includes/fonts/Aeonik-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}


.sr-only {
	border: 0;
	clip: rect(0, 0, 0, 0);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
	width: 1px;
}

html {-webkit-box-sizing:border-box;box-sizing:border-box;}
*, *:before, *:after {-webkit-box-sizing:inherit;box-sizing:inherit;}
body{margin:0;padding:0;-webkit-text-size-adjust:none; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}

img{border: 0}
ul{padding-left: 0}
ul li{list-style:none}
html, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, hr{font-family:inherit; font-size:inherit; font-style:inherit;font-weight:inherit}
table {border-collapse:collapse}
td, th {empty-cells:show;vertical-align:top;text-align:left}

#skipNavigation{background:#fff;color:#000;padding:.5em;position:absolute;left:0;top:-1000px;z-index:10}
#skipNavigation:focus,#skipNavigation:active{top:0;}
/*page widths*/

body>header, #mainnav, main, body>footer, #alertApp{width:100%; display:block;}


body>*>.wrap, body>footer>.fatFooter,#alertApp>*,.home .wrap, .wrap, #callouts-delta .wrap, #categoryContent .wrap {width:100%;max-width:75rem;margin-left:auto;margin-right:auto;position:relative;overflow:auto}
.home .wrap{overflow: hidden}

/* text */
body, .text, input, button, select, textarea {font-family:'Aeonik', Helvetica, Arial, sans-serif;line-height:1.5;color:#4a4a4a;letter-spacing: 0.001rem;-webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;}
.content {font-size: 1.125em;}
.text{font-size: 1rem}
.text{font-size: 1rem}
a {color:var(--denim);text-decoration:none}
a:is(:hover, :focus-visible){color:var(--storm-grey)}
p,h1,h2,h3,h4,hr,.content ul,.contentEditor ul,blockquote,dd,ol{margin-top:0;margin-bottom:1rem}
h1, h2, h3, h4, h5, h6, th{font-weight:400; line-height: 120%;}
p + h2, p + h3, p + h4, p + h5, p + h6, ul + h2, ul + h3, ul + h4, ul + h5, ul + h6 {margin-top:2.5rem;}
.content p + ul {margin-top: 1em;}
.textColor, h1, h2, h3, h4, h5, h6, th, dt {color:var(--storm-grey); font-weight: 700;}
em, i, q, cite, .italic{font-style:italic}
b, strong{font-weight:700}
u{text-decoration:none}
hr{border:0;clear: both; border-top:1px solid rgba(39, 118, 167, 0.2);margin:2.5em 0;padding-top:1px}
p{font-size:1em}
h1, h2.h1-style {color: var(--storm-grey); font-size:2.8125em; font-weight: 700;}
h2, .content * h1, .content * h2.h1-style {color:var(--storm-grey); font-size:2em;}
h3, .content * h2 {color:var(--storm-grey); font-size:1.5em;}
h4, th {color: var(--storm-grey); font-size:1.4375em;}
h4 span {font-style:italic;font-weight: 400;}
th {color: var(--storm-grey); font-size: 1.125em;}
.ui-datepicker th {font-size:1em;}
h5 {font-size:1.3em}
h6 {font-size:1.2em}
sup, sub { font-size:.6em; line-height:.6em;vertical-align:baseline;position:relative}
sup {bottom:1ex}
sub {top:.5ex}


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

  body>header>.wrap {height:124px}

  #ancillary a {display: inline-block;padding: .75rem .8em;text-decoration:none;}

  #ancillary li.on a {text-decoration:none;color:#666}
  #ancillary .search {border:1px solid var(--mist-grey);display: inline;float: right;position: relative;top: .5rem;}
  #ancillary .search input {background-color: rgba(255,255,255,0); border: none; display: inline-block; float: left;line-height: 2em; height: 2em; padding: 3px 6px;}
  #ancillary input[type="submit"] {background: url(/images/icons/search.svg) no-repeat center center / .875em .875em; width: 2em;}
  #ancillary input[type="submit"]:hover {background-color: var(--storm-grey); background-image: url(/images/icons/search-ko.svg);}

#ancillary .gtranslate_wrapper {
    position: relative;
}

#ancillary .gtranslate_wrapper * {
    box-sizing: border-box;
    color: var(--storm-grey);
    font-family: 'Aeonik', Helvetica, Arial, sans-serif;
}

#ancillary .gtranslate_wrapper img {
    height: 0.875rem;
    width: 1.25rem;
}

#ancillary .gtranslate_wrapper .gt_option {
    background: #fff;
    width: 100%;
}

#ancillary .gtranslate_wrapper .gt_option a {
    align-items: center;
    display: flex;
    gap: 0.35em;
    height: 2.1875rem;
    padding: 0 .8em;
    width: 100%;
}

#ancillary .gtranslate_wrapper .gt_selected {
    overflow: hidden;
}

#ancillary .gtranslate_wrapper .gt_selected a {
    align-items: center;
    display: flex;
    gap: 0.35em;
    height: 2.1875rem;
    padding: 0 .8em;
    width: 100%;
}

#ancillary .gtranslate_wrapper .gt_selected a::after {
    height: 100%;
    top: 0;
}


  /* MAIN ------------------------------ */
  .menu{ cursor: pointer; }

  main, .mceContentBody {
    background-color: #FFF;
  }



  main.online-training {background-image: none;}

  main>.wrap {overflow: visible; padding:0 0 3em;}
  main.online-training>.wrap {max-width: none;padding: 0;}
  .contentEditor{background:#fff;min-width:100%;}
  /* t1 */
  #sidenav{width:100%;overflow:hidden;margin:.8em 0 3rem}
  #sidenav ul{padding: 0}
  #sidenav li{height:1%;overflow:hidden}
  #sidenav li a{display: none; padding:.5em .25rem; line-height:1.1em;display:block}
    #sidenav ul>li.on>a{color:#000; display: none;}
    /* t2 */
    #sidenav li.on ul {border-top:1px solid rgba(0,0,0,.11)}
    #sidenav li.on ul li {border-bottom:1px solid rgba(0,0,0,.11)}
    #sidenav li.on ul li a{color:var(--denim); display: block; font-size:1em; font-weight: 700; padding:.4em .75rem;}
    #sidenav li ul li a:hover, #sidenav li ul li a:active,
    #sidenav li ul li.on>a {color:var(--denim); background:var(--cloud-white)}
    /* t3 */
    #sidenav li ul li.on ul {padding-bottom:.5em; border:0}
    #sidenav li ul li.on ul li {border:0}
    #sidenav li ul li.on ul li a {color:var(--denim); font-size:.875em; font-weight: 400; padding:.3em .75rem .3em 2rem; text-indent:-1em;}
    #sidenav li ul li.on ul li a:before {content: "-"; margin-right: 5px; text-indent: 0; width: 1em;}
    #sidenav li ul li ul li a:hover, #sidenav li ul li ul li a:active,
    #sidenav li ul li ul li.on>a {color:var(--denim);}
    /* t4 */
    #sidenav li ul li ul li.on ul li a {padding-left:2.5rem; font-size:.7em; color:#666; text-indent: 0;}
    #sidenav li ul li ul li.on ul li a:before {content: none; display: none;}
    #sidenav li ul li ul li ul li a:hover, #sidenav li ul li ul li a:active {color:#aaa;}
    #sidenav li ul li ul li ul li.on>a {color:#000;}
    /*section callouts*/
    main>div>aside section{margin:0 0 20px;padding:10px}
    main>div>aside section:hover{background:#FFC}
    main>div>aside section h1{margin:0;font-size:1.2em}
    main>div>aside section p{margin:0}
    /* breadcrumb */
    .breadcrumb {font-size: .75em; margin-bottom: .5em;}
    .breadcrumb a {color: rgba(255,255,255,.8); font-weight: 600;}
    .breadcrumb a:after {content: "\00A0\00A0\203A\00A0"}
    .breadcrumb a:hover {color: #fff;}


    .breadcrumb.green {
      margin-bottom: 1em;
    }

    .breadcrumb.green a {
      color: var(--denim);
    }


    .productPage .breadcrumb a {color: rgba(var(--storm-grey-rgb), .65); font-weight: 600;}
    .productPage .breadcrumb a:hover {color: var(--denim);}

    /* content */
    .content{word-wrap:break-word}

	.content .photoright,
	.content .photoleft {
		height: auto;
		max-width: min(18em, 50%);
	}

    .content .photoright img,.content .photoleft img {max-width:100%;height:auto;margin: 0;float: none}
    .content img.phototreatment{max-width:50%;height:auto}
    .content figure.phototreatment{width: 100%;text-align: center}
    .content figure.phototreatment img{max-width: 100%;width: auto;height: auto}
    img.phototreatment,img.photoright,img.photoleft,.photoright img,.photoleft img {max-width: 100%;width: auto;height: auto}
    .photoright{float:right;clear:right}
    .photoleft{float:left;clear:left}
    .muted {opacity:0.5;filter:alpha(opacity=50)}

    .highlight, .content .highlight {
        background: #fff;
        border: 2px solid var(--cloud-white);
        margin: 2em 0;
        padding: 2em;
    }
    .highlight h1,
	.highlight h2 {font-size: 1.25em;}

    small, .textSm, .small{font-size:.8em}
    .content table{width:100%}
    figcaption {font-size: .75em; font-style: italic;}

    .shareIcons{display:inline-block;position:relative;overflow:auto}
    .shareIcons a{display:block;float:left;margin:0 .5em 1em 0;height:20px;width:20px;background-position:center center; background-repeat:no-repeat;-webkit-background-size:contain;background-size:contain;-webkit-border-radius:.2em;border-radius:.2em;-webkit-box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2);box-shadow: inset 0px -2px 0px 0px rgba(0, 0, 0, .2)}
    .shareIcons a:hover{background-color:var(--storm-grey)}
    .shareFacebook{background-color:#3b5998; background-image:url(../../images/icons/64x64/facebook.png)}
    .shareIcons .shareTwitter{background-color:#00aced; background-size: 75% auto; background-image:url(/images/icons/social/x-twitter.svg)}
    .shareLinkedin{background-color:#007bb6; background-image:url(../../images/icons/64x64/linkedin.png)}
    .shareGoogle{background-color:#dd4b39; background-image:url(../../images/icons/64x64/google-plus.png)}

    .intro {color: var(--storm-grey); font-size: 1.25em;}
    blockquote {color: var(--indigo); font-size: .888em; font-style: italic;}
    blockquote span {color: #4a4a4a; display: block; font-size: .8125em; font-style: normal; font-weight: 700; margin-top:.75em;}
    blockquote span:before {content: "-"; margin-right: 3px; width: 1em;}
    .author h4 {margin-bottom: .25em;}
    .author h4 span {display: block;font-size: .8em; color:#4a4a4a}
    .author .photoright {margin: 0 0 1em 2em;}
    .author .social {margin-bottom: 1em;}
    .author .social a {margin: 0 .5em 0 0;}
    /* list */
    .content ol {margin-left: 2em}
    .content ol ol li {list-style: lower-alpha}
    .content ul li, #productArea #categoryContent ul li {background:url(/images/icons/misc/arrow-circle-right.svg) no-repeat 13px 7px / .75em .75em; margin-top: .75em; padding-left:2em; position: relative;}
    .content #wsMainManagement ul li, .content #wsMainManagementNotices ul li {background:none;}
    .content ul li:first-child {margin-top: 0;}
    .content ul li ul li {background:url(/images/icons/misc/arrow-circle-right.svg) no-repeat 13px 6px / .75em .75em; font-size: .875em;}
    .content .icon-links li {padding: 0.5em; background: none}
    .content .icon-links li+li {margin: 0}
    .content .icon-links li a {display: block; background:#fff; font-weight: 700; line-height: 1.25em; border: 1px solid rgba(0,0,0,.11); -webkit-border-radius: 3px; border-radius: 3px; padding:1em; height: 100%; text-align: center}
    .content .icon-links li a:hover {border-color: var(--indigo)}
    .content .icon-links li a:before {
		background: var(--aqua);
		content: "";
		display: block;
		height: 2.5em;
		width: 2.5em;
		margin:0 auto 0.5em;
		mask-position: center;
		mask-repeat: no-repeat;
	}
    .content .icon-links li.locations a:before {mask-image: url(/images/icons/icon-links/map-and-marker.svg); mask-size: 1.5em auto}
    .content .icon-links li.manuals a:before {mask-image: url(/images/icons/icon-links/manuals.svg); mask-size: auto 1.5em}
    .content .icon-links li.videos a:before {mask-image: url(/images/icons/icon-links/videos.svg); mask-size:1.5em auto}
    .content .icon-links li.case-studies a:before {mask-image: url(/images/icons/icon-links/case-studies.svg); mask-size: auto 1.5em}
    .content .icon-links li.white-papers a:before {mask-image: url(/images/icons/icon-links/white-papers.svg); mask-size:auto 1.5em}
    .content .icon-links li.septic-basics a:before {mask-image: url(/images/icons/icon-links/chart.svg); mask-size: 1.5em auto}
    .content .icon-links li.news a:before {mask-image: url(/images/icons/icon-links/news.svg); mask-size: 1.5em auto}
    .content .icon-links li.faqs a:before {mask-image: url(/images/icons/icon-links/faqs.svg); mask-size:auto 1.5em}
    .content .icon-links li.webinars a:before {mask-image: url(/images/icons/icon-links/webinars.svg); mask-size:auto 1.5em}
    .content .icon-links li.catalogs a:before {mask-image: url(/images/icons/icon-links/catalog.svg); mask-size:auto 1.5em}
    .content .icon-links li.warranties a:before {mask-image: url(/images/icons/icon-links/shield.svg); mask-size:1.5em auto}
    .content .icon-links li.asset-library a:before {mask-image: url(/images/icons/icon-links/download.svg); mask-size:auto 1.5em}
    .content .icon-links li.online-training a:before {mask-image: url(/images/icons/icon-links/teach.svg); mask-size:auto 1.5em}
    .content .icon-links li.blog a:before {mask-image: url(/images/icons/icon-links/blog.svg); mask-size:auto 1.35em}
    .content .icon-links li.events a:before {mask-image: url(/images/icons/icon-links/calendar-alt.svg); mask-size:1.5em auto}
    /* addon classes */
    .clearFloats{clear:both}
    .nobr{white-space: nowrap}
    .twoCol, .threeCol, .resCol{
      column-rule:0;
      column-gap:2em;
    }
    .req{color:#c00}
    .textIcon{background:#999; background-color:rgba(0,0,0,.2);font-size:.8em;line-height:1em;display:inline-block;padding:.2em .4em;-webkit-border-radius: .5em;border-radius: .5em;color:#fff}
    .textIcon:hover{background:#666; background-color:rgba(0,0,0,.4);color:#fff}
    .clearfix:after{content: "";display: table;clear: both;}

  .videoContainer {width: 100%;height:0;line-height:0;position: relative;padding-top:56.25%; /* 16:9 */}
.videoContainer.ratio-4-3 {padding-top:75%; /* 4:3 full-frame */}
.videoContainer iframe {position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%;border:0}


/* WS FLEX ------------------------------ */
ul.ws-flex {
  display: flex;
  flex-wrap: wrap;
  gap: var(--ws-gutter);
  --ws-gutter: 1em;
}

ul.ws-flex>li {
  width: calc( 99.9% / var(--ws-column-count) - ( var(--ws-gutter) * ( var(--ws-column-count) - 1 ) / var(--ws-column-count) ) );
}


/* Forms ------------------------------ */
input, button, select, textarea {font-size:1rem;line-height: 1.2em}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select, input[type="button"], input[type="submit"], input[type="reset"]{-webkit-border-radius:0;border-radius:0; outline: none; -webkit-appearance:none;}
input[type="text"], input[type="password"], input[type="tel"], input[type="number"], input[type="email"], input[type="url"], input[type="search"], textarea, select{border:1px solid var(--mist-grey); padding:0.5em;}
input[type="text"]:focus, input[type="password"]:focus, input[type="tel"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, textarea:focus {background-color:#fff; border-color: var(--aqua);}
footer input[type="email"]:focus {background-color: #fff;}
textarea{display:block;font-size: .9rem}
@media screen and (-webkit-min-device-pixel-ratio:0) {
  select{background-image:url(/images/icons/16x16/select.png);background-repeat:no-repeat;background-position:right center;padding-right: 18px}
  input[type="search"]::-webkit-search-decoration {-webkit-appearance:none}
  input[type="search"]{padding-right:0}
}
select {background-color:#fff;}
select option{background-color:#fff; padding:0 .2em}
select:focus-visible {outline: 2px solid #000; outline-offset: -2px;}
input[type="radio"] {margin-right: .5em;}
button,.button,input[type="button"], input[type="submit"], input[type="reset"], .anchor-link-button, .productPage .bottom .button.orange{background:#fff; border:2px solid var(--aqua); -webkit-border-radius: 2px; border-radius: 2px; color:var(--storm-grey); font-weight: 700; padding:.625em 1em; line-height:1em; cursor:pointer;}
input::-moz-focus-inner {border:0;padding:0;}

.button.hover {
  background-color:var(--denim);
  color: #FFF;
}

.button{display: inline-block; margin: 0 1em 1em 0;}
.delta .button+.button+.button{margin-right: 0;}

button img{height:1em;width:auto;vertical-align:top}
input.bulky, .bulky {padding:.4em .6em;font-size:1.2em}
.formTable, .formTable table{width:100%}
.formTable,
:where(.formTable, .form-flex) :where(input:where([type="text"], [type="password"], [type="tel"], [type="number"], [type="email"], [type="url"], [type="search"]), table, textarea, select) {
	width: 100%;
}

#ContactForm fieldset {
	margin: .5em 0 0;
	border: 0;
	padding: 0;
}

#ContactForm fieldset legend {
	padding: 0;
}

#ContactForm fieldset table {
	margin-left: 2em;
}

.formTable table td,.formTable table td:first-child{padding-bottom:0}
.formTable.right td:first-child{text-align:right;width:1%}
.formTable.right td{width:auto}

/* Forms - without tables ----- */
form.narrow .form-flex,
.narrow.form-flex {
	max-width: 18.75em;
}

.form-flex {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.form-flex fieldset {
	border: 0;
	margin: 0;
	padding: 0;
	width: 100%;
}

.form-flex fieldset legend {
	float: left;
	width: 100%;
}

.form-flex>div {
	margin: 0 0 .75em;
}

.form-flex .full {
	width: 100%;
}

.form-flex>div>label:first-of-type {
	display: block;
}

/* Checkboxes, radios */
.form-flex>div>fieldset>label {
	display: inline-block;
}

label.checkbox,
#DistributorList label.checkbox {
    align-items: flex-start;
    display: flex;
    gap:0.25em;
    line-height: 1.35em;
}


.subjClass{display:none !important;}
#Captcha label{padding-left:0}
td.right, th.right{text-align:right}
.wsNew{display:inline-block;font-size:.7em;line-height:1.5em;height:1.5em;padding:0 .3em;margin:.3em 0;background-color:#FFC700;overflow:visible;vertical-align:top;color:#fff;font-style:italic}
.formEdit select, .formBuilder select { width:40%; }

.styled-table {margin: 1em 0; background: #fff; border: 1px solid #ccc}

.DistributorList .required {font-size: .875em; margin-bottom: 1em;}
.DistributorList .formTable select {margin-bottom: 1em; width: 100%;}
.DistributorList .formTable {margin-bottom: 1em;}

.button.pdf,
.button.image,
.button.video {display:  inline-flex; gap:0.35em; align-items: center;}

.button.pdf:before,
.button.image:before,
.button.video:before {
	content: "";
	display: block;
	width: 1em;
	height: 1em;
	background:var(--aqua);
	mask-repeat: no-repeat;
	mask-position: center;
}
.button.pdf:before {mask-image: url(/images/icons/misc/pdf.svg); mask-size: auto 1em;}
.button.image:before {mask-image: url(/images/icons/misc/image.svg); mask-size: auto 1em;}
.button.video:before {mask-image: url(/images/icons/misc/video.svg);  mask-size: 1em auto;}

.button.pdf:is(:hover, :focus-visible):before,
.button.image:is(:hover, :focus-visible):before,
.button.video:is(:hover, :focus-visible):before {background: #fff}

/* pagination */
.pagination{font-size:.95em;text-align:right}

/* page header */
.pageHeader{background-position: center top; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; height:auto; margin-bottom:2em; padding-bottom: 10%; width:100%;filter: grayscale(0.5);}

.downArrow {display: inline-block; margin: 2em auto 0;}
.downArrow:before {
	background: var(--aqua);
	content: "";
	mask-image: url(/images/arrow-down.svg);
	mask-repeat: no-repeat;
	mask-size: 100% auto;
	display:block;
	height: 1.5em;
	width:1.5em;
}

/* alert */
#alertApp, #alertApp.alertStatic:hover{width:100%; background:var(--indigo);padding-left: 1rem;padding-right: 1rem}
#alertApp h1{margin-bottom:0;font-size:1.1em;padding:5px;color:#fff;text-align:center;min-height: 2rem;}
#alertTitle span{float:right; opacity:.5}
#alertApp:hover #alertTitle span{opacity:1}
#alertTitle a{color:#fff;text-decoration:underline}
#alertDesc{overflow:hidden}
.alertClosed #alertDesc{height:auto;max-height:0}
.alertOpen #alertDesc{height:auto;min-height:0;max-height:250px;}
#alertDesc p{color: rgba(255,255,255,.8);}
#alertApp {cursor:pointer;}
#alertApp.alertStatic{cursor:auto}
#alertApp:hover { background:var(--storm-grey)}

/* management overrides */
#wysiwygBody{background:#fff}
#wsDashboardButtons > ul > li + li {margin-top: 0}
/* management table */
hr+.manage{margin-top:-1em}
.manage{border-bottom:1px solid rgba(0,0,0,.2);width:100%;line-height:1.3em}
.manage th{border-bottom:1px solid rgba(0,0,0,.2);text-align:left}
.manage th.right{text-align:right}
.manage th.sort{cursor:pointer}
.manage th.sort img{margin-left:5px}
.manage th img {position:relative;bottom:-2px}
.manage td,.manage th{padding:5px 5px 5px 0}
.manage td:first-child{padding-left:.8em}
.manage img.preload{display:none;position:absolute;z-index:9900;top:0;border:solid 1px #fff}
.manage td.icons img{margin-left:5px;position:relative;bottom:-2px}
.manage td:first-child.icons img{margin-left:0}
.manage td:first-child.icons{padding-left:3px;padding-right:3px}
.manage td.icons a:first-child img{margin-left:0}
.manage td.icons input{position:relative;bottom:2px;margin-left:5px}
.manage .hidden{font-style:italic;color:#900}
.manageButton{text-align:right;padding:10px 0}
.alternate tbody tr:nth-child(even), .even{background:#fff}
.alternate tbody tr:nth-child(odd), .odd {}
  .manage+hr, .manage+.manageLinks+hr{margin-top:50px}
  .manageLinks {margin-top:10px;}
  .manageLinks a{white-space:nowrap}
  .manageLinks a img{position:relative;bottom:-2px}
  .manageLinks button{margin-left:5px}
  .manageButtons{text-align: right;padding:10px 0}
  .wsReturnToButton {float:right;margin-top:-3.5em}
  .manage.rightFirstChild td:first-child{text-align:right}
  .sortRow th{cursor:pointer}
  .manageEllipsis{width:200px;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;white-space:nowrap;display:inline-block}

  .dateSearch {margin-bottom: 2em;}
  .dateSearch .DatePicker {margin-left: .5em;}

  /* LANDING PAGES ------------------------------ */
  .landing main {background: #fff}
  .landing #hero {text-align: center}
  .landing .champion #hero {background:url(/images/landing/white-mask-overlay.svg) no-repeat center bottom, url(/images/landing/hero-bg-Champion.jpg) no-repeat center; -webkit-background-size: auto, cover; background-size: auto, cover}
  .landing .delta #hero {background:url(/images/landing/white-mask-overlay.svg) no-repeat center bottom, url(/images/landing/hero-bg-Delta.jpg) no-repeat center; -webkit-background-size: auto, cover; background-size: auto, cover}
  .landing .careers #hero {background:url(/images/landing/hero-bg-careers.jpg) no-repeat center / cover ;}
  .landing #hero:after {background: url(/images/landing/hero-bg-Delta.jpg) no-repeat center / cover}
  .landing #hero .line {width: 250px; height: 4px; margin: 3em auto; background: rgba(6,34,52,.3)}
  .landing .delta #hero .line {margin: 2em auto;}
  .landing #hero h1 {font-weight:600; font-size: 1.38em; color: #062234; text-align: center; line-height: 1.94rem;}
  .landing .delta #hero img {max-width: 17.06em; height: auto}
  .landing .delta #hero .button {margin-top: 2em; font-size: 1.125em}
  .landing .champion #boxes .image-1 {background: url(/images/landing/champion-image-1.jpg) no-repeat center / cover}
  .landing .champion #boxes .image-2 {background: url(/images/landing/champion-image-2.jpg) no-repeat center / cover}
  .landing .champion #boxes .image-3 {background: url(/images/landing/champion-image-3.jpg) no-repeat center / cover}
  .landing .champion #boxes .image-4 {background: url(/images/landing/champion-image-4.jpg) no-repeat center / cover}
  .landing .champion #boxes .image-5 {background: url(/images/landing/champion-image-5.jpg) no-repeat center / cover}
  .landing .champion #boxes .image-6 {background: url(/images/landing/champion-image-6.jpg) no-repeat center / cover}
  .landing .delta #boxes .image-1 {background: url(/images/landing/delta-image-1.jpg) no-repeat center / cover}
  .landing .delta #boxes .image-2 {background: url(/images/landing/delta-image-2.jpg) no-repeat center / cover}
  .landing .delta #boxes .image-3 {background: url(/images/landing/delta-image-3.jpg) no-repeat center / cover}
  .landing .delta #boxes .image-4 {background: url(/images/landing/delta-image-4.jpg) no-repeat center / cover}
  .landing .delta #boxes .image-5 {background: url(/images/landing/delta-image-5.jpg) no-repeat center / cover}
  .landing .delta #boxes .image-6 {background: url(/images/landing/delta-image-6.jpg) no-repeat center / cover}
  .landing #boxes .text {background: #fff; font-size: 1.25em; color: #062234; text-align: center; line-height: 1.94rem;}
  .landing #boxes .text .recycle {height: 6.5rem; margin-bottom: 1.5rem;  background: url(/images/landing/recycle.svg) no-repeat center}
  .landing #boxes .text h2 {font-size: 2.06rem; max-width: 41.06rem; margin: 0 auto 1em; color: var(--indigo); text-align: center; line-height: 2.5rem;}
  .landing #boxes .text > ul {font-size: 1.125rem; max-width: 39.06rem; margin: 0 auto; text-align: left; color: #4A4A4A; line-height: 1.75rem;}
  .landing #boxes .text > ul li {position: relative; padding-left: 1.5em}
  .landing #boxes .text > ul li:before {content: ""; display: block; width: 1em; height: 1em; position: absolute; top:0.16em; left:0; background: url(/images/landing/arrow-circle.svg) no-repeat center}
  .landing #boxes .text > ul li+li {margin-top: 0.75em}
  .landing #boxes .text > ul li ul {margin: 1em 0 0}
  .landing #boxes .text > ul li li {font-size: 0.88rem; color: #4A4A4A; line-height: 1.13rem;}
  .landing #boxes .text > ul li li:before {background: url(/images/landing/arrow.svg) no-repeat center}
  .landing #boxes .text li span {display: inline-block}
  .landing #initiatives {background: url(/images/landing/white-mask-overlay.svg) no-repeat center bottom, url(/images/landing/sustainability.jpg) no-repeat center top; -webkit-background-size: auto, cover; background-size: auto, cover}
  .landing #initiatives h2 {font-size: 2.06em; margin: 0; color: #FFFFFF; text-align: center;}
  .landing #initiatives h2:after {content: ""; display: block; width: 250px; height: 4px; background: var(--indigo); margin: 1em auto}
  .landing #initiatives p {font-size: 1.13em;color: #FFFFFF;line-height: 1.75rem;}
  .landing #initiatives .center {text-align: center; margin-top: 2em}
  .landing #initiatives .center .button {padding: .65em 1.25em}
  .landing #logos h2 {font-size: 1.3em; margin-bottom: 1em; color: #062234; text-align: center;}
  .landing #logos a {display: block; position: relative; padding-top: 7.25em}
  .landing #logos img {-webkit-transform: scale(0.5) translate(-100%, -50%);-ms-transform: scale(0.5) translate(-100%, -50%);transform: scale(0.5) translate(-100%, -50%); position: absolute; top: 10%; left:50%;}
  .landing #logos a:hover img {opacity: 0.5; -webkit-filter: grayscale(1); filter: grayscale(1)}
  .landing #logos span {display: block; color: #4A4A4A; text-align: center; padding: 0 1em}
  .landing #logos a:hover span {color: #FF4818}
  .landing #recycle-with-us {background: url(/images/landing/white-triangle.svg) no-repeat center top, url(/images/landing/recycle-with-us.jpg) no-repeat center top; -webkit-background-size: auto, cover; background-size: auto, cover}
  .landing #recycle-with-us .wrap h2 {font-size: 2.69em; color: #062234; line-height: 2.5rem;}
  .landing #recycle-with-us .wrap p {font-size: 1.25em;color: #4A4A4A;line-height: 1.75rem;}
  .landing #recycle-with-us .wrap address {margin-top: 2em; font-size: 1.06em; color: #4A4A4A; line-height: 1.69rem;}
  .landing #recycle-with-us .wrap form {background: rgba(6,34,52,0.9); padding: 2em; border: 1px solid #fff; -webkit-border-radius: 2px; border-radius: 2px}
  .landing #recycle-with-us .wrap form label {color: #DAEAF4; line-height: 1.75em}
  .landing #recycle-with-us .wrap form label span {color: #FF0000}
  .landing #recycle-with-us .wrap form input[type="submit"] {font-size: 1.125em; margin: 1em auto 0; display: block; padding: 0.65em 2em;}
  .landing #recycle-with-us .wrap form :is(input, textarea):focus {background: rgba(255,255,255,.9);}
  .landing #products {position: relative}
  .landing #products .wrap {position: relative; z-index: 1}
  .landing #products:before {content: ""; display: block; width: 100%; height: 100%; position: absolute; top:0; lefT:0; opacity: 0.7; background-image: -webkit-linear-gradient(272deg, rgba(234,244,250,0.00) 0%, #D0E5F3 20%); background-image: -o-linear-gradient(272deg, rgba(234,244,250,0.00) 0%, #D0E5F3 20%); background-image: linear-gradient(-182deg, rgba(234,244,250,0.00) 0%, #D0E5F3 20%);}
  .landing #products ul li a {text-align: center; height: 100%; display: block; background: #FFFFFF; border: 1px solid #062234; -webkit-border-radius: 2px; border-radius: 2px;}
  .landing #products ul li a:hover {border-color: #FF4818}
  .landing #products ul li a .product-image {position: relative; margin-bottom: 1em; padding-bottom: 76%}
  .landing #products ul li a .product-image img {position: absolute; top:50%; left:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-width: 100%; max-height: 100%; width: auto; height: auto}
  .landing #products ul li a .product-name {margin-bottom: 1em; display: block; font-weight: 700; font-size: 1.31em; color: var(--indigo); text-align: center; line-height: 1.25em;}
  .landing #callouts, .landing #callouts-delta {position: relative; overflow: auto}
  .landing #callouts a {position: relative; background: #062234; display: block; padding-bottom: 38%;}
  .landing #callouts-delta {background-color: background-color: #fff;
    background-image: linear-gradient(-180deg,rgba(234,244,250,0.00) 12%,#D0E5F3 100%);
    position: relative;
    padding:2em 0
  }


  .landing #callouts a:before {content: ""; opacity: 0.3; -webkit-transition: ease all 200ms; -o-transition: ease all 200ms; transition: ease all 200ms; position: absolute; top:-2px; left:0; width:100%; height: 100%;}
    /* .landing #callouts a.residential:before {background: url(/images/landing/callout-residential.jpg) no-repeat center / cover}
  .landing #callouts a.commercial:before {background: url(/images/landing/callout-commercial.jpg) no-repeat center / cover} */
  .landing #callouts a span {position: absolute; left:50%; top:50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}

  .landing #callouts-delta .residential, .landing #callouts-delta .commercial { background-color: #fff;
    border: 1px solid var(--indigo);
    -webkit-border-radius: 2px;
    border-radius: 2px;
    float: left;
    padding: 1rem;
    position: relative;
    text-align: center;
  }
  .landing #callouts-delta .residential img , .landing #callouts-delta .commercial img {max-width: 100%;vertical-align: top;margin-bottom: 1rem;}
  .landing #callouts-delta .residential p, .landing #callouts-delta .commercial p {color: #4a4a4a;}
  .landing #callouts-delta .residential:hover span, .landing #callouts-delta .commercial:hover span {color: #fff;}
.landing #callouts-delta .residential h2, .landing #callouts-delta .commercial h2 {color: var(--indigo);}

  .landing #current-openings {
    padding:0 1em 3em;
    background-image: linear-gradient(-180deg, #E5F1F8 0%, #D4E8F4 100%)
  }

  .landing .careers > * {width: 100%; float: left; clear: both}
  .landing .submit-resume {padding: 2em 1em; color:#fff; background: var(--indigo); border-bottom: 2px solid #fff}
  .landing #why-infiltrator {text-align: center; background:url(/images/landing/white-mask-overlay.svg) no-repeat center bottom, url(/images/landing/why-infiltrator-bg.jpg) no-repeat center; -webkit-background-size: auto, cover; background-size: auto, cover}
  .landing .bottom {text-align: center; background-image: -webkit-linear-gradient(top, #FFFFFF 0%, var(--cloud-white) 100%); background-image: -o-linear-gradient(top, #FFFFFF 0%, #DFEDF6 100%); background-image: linear-gradient(-180deg, #FFFFFF 0%, #DFEDF6 100%);}
  .landing .bottom #testimonials {margin-top: 2em}
  .landing .bottom #testimonials h2 {text-align: center; margin-bottom: 1em; font-weight: 700; font-size: 1.56em; color: var(--indigo); text-align: center;}
  .landing .bottom #testimonials .slick-slider .slick-arrow {position: absolute; background: none; border: 0; top:0; height: 100%; width: 11em}
  .landing .bottom #testimonials .slick-slider .slick-arrow:hover {background-color: #fff}
  .landing .bottom #testimonials .slick-slider .slick-arrow.slick-prev {left:0; background-image: url(/images/landing/slider-arrow-left.svg); background-repeat: no-repeat; background-position: center}
  .landing .bottom #testimonials .slick-slider .slick-arrow.slick-next {right:0; background-image: url(/images/landing/slider-arrow-right.svg); background-repeat: no-repeat; background-position: center}
  .landing .bottom #testimonials .button {font-size: 1.125em; margin: 0}


/* Solutions Callouts */
.flexible-callouts.hover-text {position: relative; text-align: center; background:#fff;}
.flexible-callouts.hover-text h2 {font-size: clamp(1.875rem, 1.739rem + 0.68vw, 2.25rem); margin-top: 2em; color:var(--storm-grey); font-weight: 700;}
.flexible-callouts.hover-text h2 span {text-decoration: underline; text-decoration-color:var(--aqua)}
.flexible-callouts.hover-text ul {
  margin: 2em 0;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-content: stretch;
  align-items: flex-start;
}

.flexible-callouts.hover-text ul li {background:#ccc; margin:1%; width: 28%; z-index: 0;}
.flexible-callouts.hover-text ul li a {position: relative; display:block; color: #fff; padding-top: 100%;}
.flexible-callouts.hover-text ul li a div {position: absolute; top:0; left:0; width: 100%; height: 100%;}
.flexible-callouts.hover-text ul li a .front {background-position: center; background-repeat: no-repeat; -webkit-background-size:cover; background-size:cover; height: 100%; position: absolute; top:0; left:0; z-index: 1;}
.flexible-callouts.hover-text ul li a .front h3 {
	background: rgba(var(--storm-grey-rgb), 0.75);
	border-radius:2px;
	bottom: 5%;
	color: #fff;
	font-size: 1.2em;
	left: 5%;
	margin-bottom: 0;
	padding:.5em 1em;
	position: absolute;
	width: 90%;
}
.flexible-callouts.hover-text ul li a .back {z-index: 2; background: #fff; border-radius: 2px; color: var(--storm-grey); opacity: 0; height: 90%; left: 5%; top: 5%; width: 90%;}
.flexible-callouts.hover-text ul li a .back > div {position: absolute; top:50%; left:0; height: auto; width: 100%; -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%); margin: 0; padding:.5625em 1.125em;}
.flexible-callouts.hover-text ul li a:hover .back {opacity: 1;}
.flexible-callouts.hover-text ul li a .back h3 {color: var(--storm-grey); 	font-size: 1.2em; margin-bottom: .75em; text-decoration: underline; text-decoration-color: var(--aqua);}
.flexible-callouts.hover-text ul li a .back p {color: var(--storm-grey); line-height: 1.3;}
.flexible-callouts.hover-text ul li a .back span {display: block;}
.flexible-callouts.hover-text ul li a .back span:before {
  background: var(--aqua);
  content: "";
  mask-image: url(/images/icons/misc/circle-arrow.svg);
  mask-repeat:no-repeat;
  mask-position:center;
  mask-size:100% auto;
  display: block;
  height: 1.625em;
  margin: 0 auto;
  width: 1.625em;}

@media screen and (any-hover: none) {
  .flexible-callouts.hover-text ul li a .front h3 {opacity: 0;}
  .flexible-callouts.hover-text ul li a .back {background: rgba(255,72,24,.9); opacity: 1;}
}


/* Application Callouts */
.application-callouts {position: relative; text-align: center; background:#fff;}
#content .application-callouts {background: none}
main .application-callouts h2 {background-color: #fff; border: 2px solid var(--aqua); display: inline-block; font-size: 1.9375em; font-weight: 700; margin-bottom: 0; padding: .5em 1em; text-transform: none; z-index: 1;}
main .application-callouts.interior-application-callouts h2 {
  background-color: transparent;
  padding: 0;
  margin-bottom: 1rem;
}
.application-callouts ul {margin: 0;    display: flex;     flex-direction: row;   flex-wrap: nowrap;  -webkit-box-pack: center;  justify-content: center;   align-content: stretch;    align-items: stretch;}
.application-callouts ul li {padding-bottom: 6em; padding-left: 0; position: relative; width: 33.333%;}
#content .application-callouts ul li+li {margin:0 0 0 1px}
.application-callouts ul li div {background-position: center top; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; height: 0; margin-bottom: 2em; padding-top:100%; width: 100%;}
.application-callouts ul li :is(h2,h3) {font-size: 1.625em; font-weight: 700; width: 100%;}
#content .application-callouts ul li :is(h2,h3) {font-size: 1.25em;}
.application-callouts ul li p {font-size: 1.125em; padding: 0 5%;}
.application-callouts ul li a {white-space: nowrap; position: absolute; display:inline-block; bottom: 3em; left: 50%; padding: .625em 1.75em; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%);}

/* Split Ribbon */
.split {background: url(/images/home/background-water-ribbon.jpg) no-repeat center center / cover; text-align: center;    display: flex;     flex-direction: row;   flex-wrap: nowrap;  -webkit-box-pack: center;  justify-content: center;   align-content: stretch;    align-items: stretch;}
.split > * {padding: 5.125em 5% 8.625em; position: relative; width: 50%;}
.split img {height: 6.25em; margin-bottom: 2em; width: auto;}
.split h2 {color: #4a4a4a; font-size: 1.25em; font-weight: 700;}
.split p {font-size:1.125em; padding: 0 10%;}

/* Split List */
.split-list {background: #fff; padding: 6em 5%; position: relative;}
.split-list .wrap {max-width: 45rem; z-index: 1;}
.home .split-list .wrap {max-width: 75rem;z-index: 1;}
.split-list h2 {font-size: 2em; font-weight: 700; text-align: center;}
.split-list a {z-index: 1;}
.split-list a h3 {font-size: 1.25em;}
.split-list a time, .split-list a p {color:#4a4a4a;}
.split-list a span:last-child {color:var(--storm-grey); text-decoration: underline; text-decoration-color: var(--aqua)}
.split-list a:is(:hover, :focus-visible) span:last-child {text-decoration-color: var(--ice-blue)}
.split-list > .wrap > section {text-align: center;}
.split-list > .wrap > section time {display: block; font-size: 0.875em; font-style: italic}
.split-list section:before {content: ""; display: block; margin: 0 auto; height: 2em; margin-bottom: 1em; width: 100%;}

.split-list .news:before {
    background: url(/images/icons/misc/newspaper.svg) no-repeat left top/32px 21px;
    content: 'News';
    font-size: 1rem;
    font-weight: 600;
    height: 2em;
    left: 1.125rem;
    position: relative;
    width: 7.5rem
}

.split-list .events:before {
    background: url(/images/icons/misc/calendar.svg) no-repeat left top/21px 25px;
    content: 'Events';
    font-size: 1rem;
    font-weight: 600;
    height: 2em;
    left: .625rem;
    position: relative;
    width: 6.5rem
}

.split-list .blog:before {
    background: url(/images/icons/misc/edit-solid.svg) no-repeat left top/26px 23px;
    content: 'Blog';
    font-size: 1rem;
    font-weight: 600;
    height: 2em;
    left: .625rem;
    position: relative;
    width: 6.25rem
}

.login-to-account input,
.create-an-account a {font-size: 1rem}

.accordian + .accordian {margin-top: 0.125em}
.accordian {background: #FFFFFF; border: 1px solid var(--mist-grey); transition: ease all 200ms;}
.accordian h3 {margin:0; font-size: 1.25rem; cursor: pointer; padding:1rem 1.5rem 1rem 1rem; font-weight:600}
.accordian h3:before {content: "+"; font-size:1.5em; float: right; transition: ease all 500ms;}
.accordian.on {border-color: var(--indigo)}
.accordian:hover {border-color: var(--aqua)}
.accordian.on h3 {color: var(--indigo)}
.accordian h3.on:before {transform: rotate(135deg); color: var(--indigo)}
.accordian ul,
.accordian p {display: none; padding:0 1rem}
#tinymce .accordian ul,
#tinymce .accordian p {display: block;}


/* PRODUCTS ------------------------------ */
.products .pageHeader {background-color: #0D202D; padding-bottom: 0; margin-bottom: 0; padding: 4em 5% 2em; position: relative;}
.products .pageHeader .headerBackground {background-position: center center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; height: 100%; opacity:.25; position: absolute; top: 0; left:0; right: 0; bottom: 0; width: 100%; z-index: 0;}
.products .pageHeader .header-content {color:#fff; margin: 0 auto; max-width: 50em; position: relative; text-align: center; z-index: 1;}
.products .pageHeader h1 {color: #fff; margin-bottom: .75em;}
.products .pageHeader h1:after {content: ""; border-top: 4px solid var(--aqua); display: block; margin: .3em auto; width: 5.875rem;}
.products .pageHeader .breadcrumb {color: #DAEAF4;}
.products .pageHeader p {color: #DAEAF4; font-size: 1.25em;}

#productArea {
	background: var(--cloud-white);
	padding-block: clamp(3rem, 2.273rem + 3.64vw, 5rem);
	width: 100%;
}

#productArea .wrap {
	overflow: visible;
	padding-inline: var(--ws-gap);
}

#productArea h2 {font-size: 1.375em; color: var(--storm-grey); margin: 1rem 0;}
#productArea a:hover h2 {color: var(--denim);}

.products .calloutFooter, .products #relatedProducts {background-color: #0D202D; float: left; padding: 6em 5% 5em; position: relative; width: 100%;}
.products #relatedProducts {background-color: #0D202D;border-bottom: 1px solid #FFF;float: left;padding: 6em 1em 5em;position: relative;width: 100%;}
.products #relatedProducts .wrap {overflow: visible}
.products #relatedProducts .wrap .seriesList .categoryImage {background-position: center; -webkit-background-size: contain; background-size: contain}
.products .footerBackground {background-position: center center; background-repeat: no-repeat; -webkit-background-size:cover; background-size:cover; height: 100%; opacity: .15; position: absolute; top: 0; bottom: 0; left: 0; right: 0; width: 100%; z-index: 0;}
.products .calloutFooter .footerBackground {background-image: url(/images/productFooter-background.jpg);}
.products #relatedProducts .footerBackground {background-image: url(/images/relatedProducts-background.jpg);}
.products .calloutFooter .footerLinks {position: relative; text-align: center; z-index: 1;}
.products .calloutFooter .button {background: none; border-color: var(--aqua); color:#fff; font-size: 1.125em; margin: 0 1em 1em; padding: 1em 1em; width: 16.0625rem;}
.products .calloutFooter .button:hover {background: #fff; color: var(--denim);}

ul.categories.ws-flex {
  align-content: stretch;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  margin: 0;
}

.categories li>a {
	background: #FFF;
	border: 2px solid var(--mist-grey);
	display: flex;
	flex-direction: column;
	height: 100%;
	padding: 1em 1.5em 2em;
	text-align: center;
}

.categoryImage {
	aspect-ratio: 268 / 178;
	background: no-repeat center / contain;
	border-radius: 2px;
	display: block;
	margin: 0 auto 2em;
	width: 90%;
}

.categories li>a .textbox {
	display: flex;
	flex-direction: column;
	flex: 1 0 auto;
}

.categories p {
	color: #4a4a4a;
	font-size: 1em;
	margin: 0 0 1.5em;
}

.categories span.button {
	align-self: center;
	margin: auto 0 0;
	padding-inline: 1.75em;
}

#content .title-links {
  display: grid;
  gap: 1em;
  grid-template-columns: repeat(auto-fill, minmax(14.25em, 1fr));
  text-align: center;
}

#content .title-links li {
  background: none;
  margin: 0;
  padding: 0;
}

#content .title-links li:before {
  display: none;
}

#content .title-links li a {
  align-items: center;
  background: #fff;
  border: 1px solid var(--mist-grey);
  border-radius: 4px;
  display: flex;
  font-size: clamp(1.125em, 0.989em + 0.68vw, 1.5em);
  font-weight: 700;
  height: 100%;
  justify-content: center;
  line-height: 1em;
  min-height: 150px;
  padding: 1em;
}

#content .title-links li a:is(:hover, :focus-visible) {
  border-color: var(--aqua);
}


.productSeries { clear: both; margin: 0; }
.productSeries li {background: var(--cloud-white); padding: 3em 5%; width: 100%;}
.productSeries li:nth-child(even) {background-color: #fff;}
.productSeries li h2 a {color: var(--storm-grey); font-size: 1.5rem;}
.productSeries li h2 a:hover {color: var(--denim); font-size: 1.5rem;}
.productSeries li p {font-size: 1.125em;}

#productArea .seriesList li :is(h3 a, a h3),
#productArea .productSeries li :is(h3 a, a h3) {color: var(--storm-grey); margin-top: 0; margin-bottom: .25em;}
#productArea .seriesList li :is(h3 a:hover, a:hover h3),
#productArea .productSeries li :is(h3 a:hover, a:hover h3) {color: var(--denim); margin-top: 0; margin-bottom: .25em;}
#productArea .seriesList li a p, #productArea .productSeries li a p {color: #4a4a4a;}
.seriesList a:is(:hover,:focus) span.button {background-color: var(--denim); color: #FFF;}
.productSeries li .button {font-size: 1.125em; margin-top: 1em;}
#productArea .productSeries .categoryImage {-webkit-background-size: contain;background-size: contain; border: none; display: block; mix-blend-mode: multiply; padding-bottom: 20%; position: relative;}
#productArea .productSeries .categoryImage img {position: absolute; top:50%; left:50%; max-width: 100%; width:auto; max-height: 100%; height: auto; transform: translate(-50%, -50%)}

#productArea .wrap.overflow-visible {
  overflow: visible;
}

#categoryContent .wrap {
  font-size: 1.125em;
  padding:3rem 5%;
}

#categoryContent .hide-overflow {
  height: 18.75rem;
  overflow: hidden;
  transition: all .5s ease;
}

#categoryContent .hide-overflow.expand {
  height: auto;
}
#categoryContent .show-more-button {
  margin-top: 2rem;
}

/* Microsoft Edge Browser 12+ (All) - @supports method */
@supports (-ms-ime-align:auto) {
  #productArea .productSeries .categoryImage {height: 14em}
}
/* Microsoft Edge Browser 15+ - @supports method */
@supports (-ms-ime-align:auto)
and (-webkit-text-stroke:initial) {
  #productArea .productSeries .categoryImage {height: 14em}
}
.seriesList {float: left; margin: 3em 0; width: 100%;}
.seriesList:empty {display: none;}
.seriesList li {background-color:#fff; border:2px solid var(--mist-grey); -webkit-border-radius: 2px; border-radius: 2px; float: left; margin-bottom: 2em; position: relative; text-align: center;}
.seriesList .categoryImage {border: none; -webkit-border-radius: 0; border-radius: 0; padding-bottom: 68%; background-position: center left; -webkit-background-size: 150% auto; background-size: 150% auto}
.seriesList .information {line-height: 1.4; padding: 1em 5% 5.25em;}
.seriesList .button {margin-right: 0;padding: .5em 2em;white-space: nowrap;}

body.fullWidth #content.productPage {padding-top: 4em;}
.productPage .breadcrumb {float: left; margin-bottom: 1em; text-align: center; width: 100%;}
.productPage h1 {font-size: 2.625em;text-align: center;width: 100%;}

#product-logos img {
  display: inline-block;
  vertical-align: middle;
  margin: 0 3em 1em 0;
  max-width: 10em;
  height: auto;
}

.generalInfo {margin-top: 1em;padding: 0 1.5rem;width: 100%;}
.productPage .left, .productPage .right {width: 100%;}
.productPage .right .button {margin: 0 1em 1em 0;}
.productPage .left figure {background: #fff; -webkit-border-radius: 2px; border-radius: 2px; margin-bottom: 1em; padding: 1em}

#product-3d {
  clear: both;
  margin-block: 2em .5em;
  position: relative;
  z-index: 0;
}

#productInfo {margin-top: 1em;width: 100%;}

.galleryMain {margin: 0; position:relative; text-align: center; padding-bottom:70%;}
.galleryMain > a {display: block; position:absolute; width:100%; height:100%; top:0; left:0;}
.galleryMain.product-photos a {
  display: none;
}
.galleryMain.product-photos a:not(:first-child) {
  display: none;
}
.galleryMain.product-photos > a.on {
  display: block;
}
.galleryMain.multiple-images > a {transition: ease all 200ms; opacity: 0; pointer-events:none;}
.galleryMain.multiple-images > a:first-child,
.galleryMain.multiple-images > a.on {opacity: 1; pointer-events:all; z-index: 1;}
.galleryMain.multiple-images > a.off {opacity: 0; pointer-events:none; z-index: 0;}
.galleryMain > a img {mix-blend-mode: multiply; max-height: 100%; height: auto; max-width: 100%; width:auto; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%)}
.gallerySelection {



  display: flex;




  flex-direction: row;


  flex-wrap: wrap;

  -webkit-box-pack: center;

  justify-content: center;


  align-content: center;



  align-items: center;
}
.gallerySelection div,
.gallerySelection .thumbnail {background-position: center center; background-repeat: no-repeat; -webkit-background-size: contain; background-size: contain; cursor: pointer; float: left; height: 5.625em; margin: .125em; mix-blend-mode: multiply; width: 5.625em;}
.gallerySelection div:hover,
.gallerySelection .thumbnail:hover {opacity: .6;}

.divider {border-bottom:1px solid #4a4a4a; clear: both; padding-bottom: 2em;text-align: center;width: 100%;}

#schematic {float: left; margin: 3em 0; width: 100%;}
#schematic img {height: auto; mix-blend-mode: multiply; width: 100%;}

#relatedProducts h2 {color: #DAEAF4; font-size: 1.75em; font-weight: 700; margin-bottom: 0; opacity: 1; position: relative; text-align: center; z-index: 1;}

.content .results li {background: none; margin-bottom: 1em; margin-top: 0; padding-left: 0; padding-right: 3%;}
.results .title {display: block; font-weight: 700;}

#Popover { position: fixed; padding: 1em; display: none; top: 0; left: 0; height: 100%; width: 100%; background: rgba(0,0,0,0.9); z-index: 10; }
#Popover {    display: flex;   flex-direction: column;flex-wrap: nowrap;-webkit-box-pack: center;justify-content: center;align-content: center;align-items: center;}
#Popover .wrap {overflow: auto;}
#Popover .wrap:first-child {margin: 0 auto;max-width: 30rem;text-align: right;}
#Popover .wrap:not(:first-child) {max-width: 30rem;font-size: 0.875em;padding: 2em;background: #fff;-webkit-border-radius: 5px;border-radius: 5px;color: #000;}
#Popover .wrap:first-child a {color: #fff; cursor: pointer; font-size: 3em; font-weight: 600;}
#Popover .wrap:first-child a:hover {color: #ff4818;}
#Popover p:not(.intro) {margin-bottom: 0;}
#Popover .g-recaptcha {margin-bottom: 1em;}

#map_canvas h5 {font-size: 1em; margin-bottom: .5em; margin-top: 2em; margin-bottom: .5em;}
#map_canvas input[type="submit"] {padding: 0.5em 1em; border-width: 1px;}
#saddr {padding: .5em; width: -webkit-calc(100% - 24px) !important; width: calc(100% - 24px) !important;}

.content .logo-links li:before {display: none}
.content .logo-links li+li {margin-top: 0}
.content .logo-links li > .logo {margin-bottom: 1em;}
.content .logo-links li > .logo a {display: block; padding-bottom: 50%; position: relative; margin-bottom: 1em;}
.content .logo-links li > .logo img {position: absolute; mix-blend-mode: multiply; top:50%; left: 50%; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%); max-height: 100%; max-width: 100%; width:auto; height: auto}

.asset-library-login {display:block; max-width: 32.75rem; margin: 2em auto; background: #FFFFFF; -webkit-border-radius: 8px; border-radius: 8px; text-align: center; padding: 2.5rem 4.8125rem 3rem; border: 4px solid #E8E8E8;}
.asset-library-login h2 {color:var(--denim); margin-bottom: 1.25rem}
.asset-library-login input[type="email"],
.asset-library-login input[type="password"] {width:100%; font-style: italic; text-align:center; padding: 0 1em; height:2.375rem; font-size: 1rem}
.asset-library-login input[type="password"] {margin-top: 0.5em}
.asset-library-login label {display: block; font-size: 1rem; margin: 1rem 0 2rem}
.asset-library-login input[type="submit"] {font-size: 1.125rem; height: 2.9375rem; width: 11.625rem; padding:0}

.asset-section {margin-top: 2.1875rem; position: relative; padding-top: 2.1875rem; border-top: 2px dotted #A7C5D8}
.asset-section+.asset-section {margin-top: 1.1875rem;}
.asset-section h2 {font-size: 1.75rem;color: var(--denim);}

.content ul.assets {margin: 0; padding:0}
.content ul.assets .asset {background: none; padding: 0; margin:0;}
.content ul.assets .asset a {-webkit-transition: none;-o-transition: none;transition: none}
.content ul.assets.grid .asset {font-size: 0.75rem}
.content ul.assets.grid .asset .image {position: relative; -webkit-transition:none; -o-transition:none; transition:none; background:#fff; display: block; overflow: hidden; margin:0 auto 0.25rem; width:100%; padding-bottom: 99%; border: 1px solid var(--denim)}
.content ul.assets.grid .asset .image img {position: absolute; top:50%; left:50%; max-height: 100%; max-width: 100%; height: auto; width:auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}
.content ul.assets.grid .asset .image:before {content: ""; z-index:2; position: absolute; top:0; left:0; opacity:0; display: block; width:100%; height: 100%; pointer-events: none; background: url(/images/asset-library/enlarge.svg) no-repeat center}
.content ul.assets.grid .asset .image:after {content: ""; z-index:1; position: absolute; top:0; left:0; opacity:0; display: block; width:100%; height: 100%; pointer-events: none; background:var(--aqua);}
.content ul.assets.grid .asset .image:hover:before {opacity: 1;}
.content ul.assets.grid .asset .image:hover:after {opacity: 0.5;}
.content ul.assets.grid .asset span {display: block; text-align:center; color:#000; font-size: 0.75rem; line-break: 0.9375rem}
.content ul.assets.grid .asset span a {font-weight: 600; padding: 0.125em;}
.content ul.assets.list .asset {font-size: 0.875em; margin-bottom: 1em;overflow:auto; clear:both}
.content ul.assets.list .asset .image {display: block; float: left; position: relative; width: 3em; height: 3em}
.content ul.assets.list .asset .image img {position: absolute; top:50%; left:50%; max-height: 100%; max-width: 100%; height: auto; width:auto; -webkit-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); transform: translate(-50%, -50%)}
.content ul.assets.list .asset .image:before {content: ""; z-index:2; -webkit-transition: ease all 200ms; -o-transition: ease all 200ms; transition: ease all 200ms; position: absolute; top:0; left:0; opacity:0; display: block; width:100%; height: 100%; pointer-events: none; background: url(/images/asset-library/enlarge.svg) no-repeat center; -webkit-background-size:  1.25em auto; background-size:  1.25em auto}
.content ul.assets.list .asset .image:after {content: ""; z-index:1; -webkit-transition: ease all 200ms; -o-transition: ease all 200ms; transition: ease all 200ms; position: absolute; top:0; left:0; opacity:0; display: block; width:100%; height: 100%; pointer-events: none; background:#062234;}
.content ul.assets.list .asset .image:hover:before {opacity: 1;}
.content ul.assets.list .asset .image:hover:after {opacity: 0.8;}
.content ul.assets.list .asset span {display: block; float: right; width:-webkit-calc(100% - 4rem); width:calc(100% - 4rem);}
.content ul.assets.list .asset span:first-of-type {color:var(--denim); font-weight:600;}
.content ul.assets.list .asset span + span {font-size: 0.875em}
.content ul.assets.list .asset span a {font-weight: 600; padding: 0.125em 0.125em 0.125em 1.35em; background: url(/images/asset-library/download.svg) no-repeat center left}

.content .addresses {
	display: flex;
	flex-wrap:  wrap;
	gap: 0 3em;
}

.toggle-view {text-align:right; margin: 0 auto 1em}
.toggle-view strong {color:var(--denim); font-size: 0.8125rem; margin-right: 0.5em}
.toggle-view span {display: inline-block; -webkit-transition: ease all 200ms; -o-transition: ease all 200ms; transition: ease all 200ms; -webkit-border-radius: 3px; border-radius: 3px; border: 1px solid rgba(0,0,0,0.125); cursor: pointer; vertical-align: top; width:1.5em; height:1.5em; background-repeat: no-repeat; background-position: center; background-color: var(--denim)}
.toggle-view span:hover,
.toggle-view span.on {background-color: #0085D0}
.toggle-view span.grid {background-image: url(/images/asset-library/view-thumbnails.svg)}
.toggle-view span.list {background-image: url(/images/asset-library/view-list.svg)}

.terms-of-use-overflow {font-size: 0.75em; overflow: auto; border: 2px solid rgba(0,0,0,0.08); background:rgba(255,255,255,0.68); padding:1.5rem 1rem; max-height: 300px}
.terms-of-use-overflow h2 {margin-bottom: 0.25em}
.terms-of-use-overflow h3 {color:var(--denim); font-size:1.25em; margin:0 0 0.25em}

.back-to-top {opacity: 0; pointer-events: none; transition: ease all 200ms; background: #003951 url(/images/back-to-top.svg) no-repeat center;border: 1px solid #fff;border-radius: 2px;width: 2.5rem;height: 2.5rem;position: fixed; z-index:99999; bottom: 1.5em;right: 1.5em;font-size: 0.625rem; box-shadow: 0 0 40px rgba(255, 255, 255, 0.75); text-shadow: 0 1px 0 #fff}
.back-to-top.show {opacity: 1; pointer-events: all}
.back-to-top:hover {background-color: #168ED2}


.treatment-solution {padding: 1.5em; position:relative; background: #fff;border-radius: 3px;}
.treatment-solution + .treatment-solution {margin-top:1em}
.treatment-solution h3 {font-weight: 700;font-size: 1.25rem;color: #062234; padding-right:5rem;}
.treatment-solution .title {display: block; font-weight: 0700; font-size: 1rem; color: var(--denim);}
.treatment-solution .date {font-size:0.875rem}
.treatment-solution .actions {margin-top:1em}
.treatment-solution a {display: inline-block;border: 1px solid #b1d1e3;font-size: 1rem;margin-right: 0.5rem;position: relative;line-height: 1em;padding: 0.35em 0.75em;color: #062234;border-radius: 3px;}
.treatment-solution a:before {content:""; margin-right:0.5em; filter: brightness(0) saturate(100%) invert(38%) sepia(82%) saturate(2059%) hue-rotate(171deg) brightness(100%) contrast(101%);}
.treatment-solution a:hover {background:#edf8ff}
  .treatment-solution a.view:before {padding-left: 1.125rem; background: url(/images/view-solution.svg) no-repeat center}
  .treatment-solution a.download:before {padding-left: 1rem; background: url(/images/download-solution.svg) no-repeat center}
  .treatment-solution a.contact:before {padding-left: 1rem; background: url(/images/contact-solution.svg) no-repeat center}
  .treatment-solution a.delete:before {width: 1rem; height:1rem; margin:0; background: url(/images/delete-solution.svg) no-repeat center}
.treatment-solution a.delete {border:0; margin:0; font-size:0.875rem; position:absolute; top:1.5rem; right:1.5rem;   display: flex;   flex-direction: row;   flex-wrap: nowrap;   justify-content: flex-end;   align-content: center;   align-items: center;}
.treatment-solution a.delete span {white-space:nowrap; color: var(--storm-grey); opacity:0; pointer-events: none; transition:ease all 200ms; font-size:12px; padding:0.25em; display: block; position:absolute; top:50%; right:100%; transform: translateY(-50%)}
.treatment-solution a.delete:hover {background:none}
.treatment-solution a.delete:hover span {opacity:1; right:calc(100% - 0.75em);}

.account-dashboard #wastewater-treatment-plant-designs {position:relative}
.account-dashboard #wastewater-treatment-plant-designs .anchored {position:relative}
.account-dashboard #wastewater-treatment-plant-designs .anchored form {
  position: absolute;
  opacity: 0;
  transition: ease all 200ms;
  pointer-events: none;
  background: #FFF;
  padding: 1em;
  width:100%;
  top:calc(100% + 5px);
  right:0;
  z-index:2;
  box-shadow:0 5px 15px 0 rgba(0,0,0,0.125);
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  align-content: center;
  align-items: flex-end;
}

.account-dashboard #wastewater-treatment-plant-designs .anchored form.on {opacity:1; top:100%; pointer-events: all;}
.account-dashboard #wastewater-treatment-plant-designs .anchored form label {width:100%; margin-right:0.25em}
.account-dashboard #wastewater-treatment-plant-designs .anchored form input {width:100%; font-size:1rem}
.account-dashboard #wastewater-treatment-plant-designs .anchored form button {background:#00A3FF}

#solution-tool .pageHeader {margin:0; background: url(/images/solution-tool-header.jpg) no-repeat center / cover}
#solution-tool .pageHeader h1 {text-align: center; color:#fff; }
#solution-tool .pageHeader p {text-align: center;}
#solution-tool .pageHeader .steps {max-width:33.0625rem; position:relative; margin:0 auto;    display: flex;   flex-direction: row;   flex-wrap: nowrap;   justify-content: space-between;   align-content: center;   align-items: center;}
#solution-tool .pageHeader .steps:before {content:""; display: block; position:absolute; left: 0.625rem; right:0.625rem; top:1.0625rem; height:0.25rem; background:#57707F}
#solution-tool .pageHeader .steps .step {position: relative; color:#fff; line-height:1.5em; font-weight:500; z-index:1;}
#solution-tool .pageHeader .steps .step:before {content:""; margin-bottom:0.625rem; border-radius: 50%; width: 2.375rem; height:2.375rem; display:block; background: #FFFFFF; border: 2px solid #B1CDDF;}
#solution-tool .pageHeader .steps .step.on:before {background: var(--aqua);border: 2px solid var(--aqua);box-shadow: inset 0 0 0 8px #FFFFFF;}
#solution-tool .ribbon {width:100%; clear:both}
#solution-tool .ribbon.blue {background:#F0F5F7}
#solution-tool .ribbon.white {background:#fff}
#solution-tool .ribbon.blue-gradient {background-color:#fff; background-image: linear-gradient(180deg, #F0F5F7 12%, rgba(255,255,255,0.00) 50%);}
#solution-tool input[type="text"]:focus,
#solution-tool input[type="password"]:focus,
#solution-tool input[type="email"]:focus,
#solution-tool input[type="tel"]:focus,
#solution-tool input[type="number"]:focus,
#solution-tool select:focus,
#solution-tool textarea:focus {background:#fff; border-color:var(--denim)}
#solution-tool #select-plant-type {text-align: center;}
#solution-tool #select-plant-type h2 {color: var(--denim); text-align: center;}
#solution-tool #select-plant-type input {display: none}
#solution-tool #select-plant-type label {cursor:pointer; display: block; margin-bottom:0.25em}
#solution-tool #select-plant-type .plant-image {width: 8.625rem; transition:ease all 200ms; margin:0 auto 1.125rem; cursor:pointer; height:auto; overflow:hidden; background: #FFFFFF; border: 1px solid #DAEAF4; border-radius: 6px;}
#solution-tool #select-plant-type label:focus .plant-image,
#solution-tool #select-plant-type label:hover .plant-image {border-color:#4BA6D9}
#solution-tool #select-plant-type input:checked + label .plant-image {border-color: #4BA6D9; box-shadow: 0 0 0 2px #4BA6D9, 0 4px 8px 0 rgba(6,34,52,0.03), 0 -5px 54px 0 rgba(6,34,52,0.20);}
#solution-tool #select-plant-type .plant-image img {width:100%; height:auto; display: block}
#solution-tool #select-plant-type .title {display:block; font-weight: 700; transition:ease all 200ms; font-size: 1.25rem; color: var(--denim); text-align: center;}
#solution-tool #select-plant-type input:checked + label .title {color: #062234;}
#solution-tool #select-plant-type .brief {display:block; font-size: 13px; color: #0D202D; text-align: center;}
#solution-tool #select-plant-type button {background: none; border:0; color:var(--denim); font-weight: 400; font-size: 0.8125rem; }
#solution-tool #select-plant-type button:before {content:""; filter: grayscale(1); padding-right: 1em; margin-right:0.25em; background: url(/images/solution-tool-more-info-icon.svg) no-repeat center}
#solution-tool #select-plant-type button:focus,
#solution-tool #select-plant-type button:hover {text-decoration:underline}
#solution-tool #plant-specs .wrap {max-width:43.75rem}
#solution-tool #plant-specs .wrap .anchored {position:absolute; top:0; right:0}
#solution-tool #plant-specs .wrap .specs-table {color:#0D202D}
#solution-tool #plant-specs .wrap .specs-table .group {background: #F0F5F7; border-radius: 5px; margin-bottom:1.875rem}
#solution-tool #plant-specs .wrap .specs-table .group .row {padding:1em; line-height:2.25rem;}
#solution-tool #plant-specs .wrap .specs-table .group .row + .row {border-top: 1px dashed #CECECE;}
#solution-tool #plant-specs .wrap .specs-table .group .row input[type="text"] {width:100%}
#solution-tool #plant-specs .wrap .specs-table .group .row input[type="number"] {max-width:7.5625rem; margin-right:0.5rem}
#solution-tool #plant-specs .wrap .specs-table .group .row .radio-group label {display: block; cursor:pointer}
#solution-tool #plant-specs .wrap .specs-table .group .row .radio-group .other label {display: inline-block}
#solution-tool #plant-specs .wrap .specs-table .group .row .radio-group .other label:first-child {margin-right: 0.75rem}
#solution-tool #plant-specs .g-recaptcha {display: flex; justify-content: center;}
#solution-tool #plant-specs .submit .reset-form {background: none; font-weight: 400; box-shadow:none; border:0; text-decoration: underline; margin-bottom: 1rem; box-shadow:none;  color:#0D202D}
#solution-tool #plant-specs .submit .reset-form:hover {color: var(denim)}
#solution-tool.step-3 #your-solution .wrap .downloads .download-buttons .button.blue::before {filter: brightness(0) saturate(100%) invert(38%) sepia(82%) saturate(2059%) hue-rotate(171deg) brightness(100%) contrast(101%);}
#solution-tool #custom-solution {padding: 3rem 1rem}
#solution-tool #custom-solution .wrap {max-width:600px; text-align: center; background:#fff; padding:1.5rem; border-radius: 8px}
#solution-tool #custom-solution .wrap h2 {font-size:1.35rem}
#solution-tool #custom-solution .wrap p:last-child {margin:0}
#solution-tool #we-have-a-solution .download-options input,
#solution-tool #we-have-a-solution .download-options select {width:100%; height: 35px; padding: 0 0.5em; background:#fff}
#solution-tool #we-have-a-solution .download-options input[type="radio"],
#solution-tool #we-have-a-solution .download-options input[type="checkbox"] {width:auto; height:auto; padding:0}
#solution-tool #we-have-a-solution .download-options select {appearance: auto;}
#solution-tool #your-solution .solution-tabs {text-align:center; margin-bottom:2rem}
#solution-tool #your-solution .solution-tabs .tabs button {position: relative;background:var(--denim);color: #FFF;}
#solution-tool #your-solution .solution-tabs .tabs button:hover,
#solution-tool #your-solution .solution-tabs .tabs .on {border-color: var(--storm-grey);background:var(--storm-grey);color: #FFF;}
#solution-tool #your-solution .solution-tabs .tabs .on:after {content:""; display: block; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); width: 0; height: 0; border-width: 10px 10px 0 10px; border-color: var(--storm-grey) transparent transparent transparent; border-style: solid;}
#solution-tool #your-solution .contact-a-rep button {margin:0}
#solution-tool #popover {display: none; position: fixed; z-index: 10; top: 0; left:0; width:100%; height: 100%; padding: 1em; background:rgba(0,0,0,0.9);   flex-direction: row;   flex-wrap: nowrap;   justify-content: center;   align-content: center;   align-items: center;}
#solution-tool #popover .container {max-width: 40em; position: relative}
#solution-tool #popover .container .close {position: absolute; cursor: pointer; transition: ease all 200ms; right: 0; top: -1.5em; width: 1.5em; height: 1.5em; font-size: 2.25em; line-height: 1.5em; text-align: right; color: #fff;}
#solution-tool #popover .container .close:hover {opacity: 0.5}
#solution-tool #popover .container .popover-wrap {padding: 2em; text-align: left; background:#fff; border-radius: 4px; max-width: 40em}
#solution-tool #popover h2 a {font-size: 1.125rem}
#solution-tool #popover table {width:100%}
#solution-tool #popover table td input,
#solution-tool #popover table td textarea {width:100%}
#solution-tool #popover table td textarea {min-height:80px}

#solution-tool .description {
  padding-block: 2em 5em;
}

#solution-tool .description .wrap {
  max-width: 78rem;
  padding-inline: 1.5rem;
}

#solution-tool .description p {
  font-size: clamp(1em, 0.955em + 0.23vw, 1.125em);
}

#treatment-popover {display: none; position: fixed; z-index: 10; top: 0; left:0; width:100%; height: 100%; padding: 1em; background:rgba(0,0,0,0.9);   flex-direction: row;   flex-wrap: nowrap;   justify-content: center;   align-content: center;   align-items: center;}
#treatment-popover .container {max-width: 40em; position: relative}
#treatment-popover .container .close {position: absolute; cursor: pointer; transition: ease all 200ms; right: 0; top: -1.5em; width: 1.5em; height: 1.5em; font-size: 2.25em; line-height: 1.5em; text-align: right; color: #fff;}
#treatment-popover .container .close:hover {opacity: 0.5}
#treatment-popover .container .popover-wrap {padding: 2em; text-align: left; background:#fff; border-radius: 4px; max-width: 40em}
#treatment-popover .popover-content {max-height: 75vh; overflow:auto}
#treatment-popover .popover-content .plant-header {margin-bottom:1rem; display: flex;flex-direction: row;flex-wrap: nowrap;-webkit-justify-content: flex-start;-ms-flex-pack: start;justify-content: flex-start;align-content: center;align-items: center;}
#treatment-popover .popover-content .plant-header .plant-image {width: 130px; margin:0 1rem 0 0}
#treatment-popover .popover-content .plant-header .plant-image img {width: 100%; height:auto;}
#treatment-popover .popover-content .plant-header h2 {color:var(--denim); font-size:1.75rem; margin-bottom:0}
#treatment-popover .popover-content .plant-header .brief {display: block; font-weight: 600; font-size: 1.25rem; color: #062234; line-height: 1.25rem;}


.landing .icon-cards .wrap .cardContainer .card .play-video {padding:0 1em; margin:20px auto 0;  background:none; border:1px solid #FF4818; box-shadow:none; line-height:1.875rem;}
.landing .icon-cards .wrap .cardContainer .card .play-video:hover {background: #FF4818;}
.landing .icon-cards .wrap .cardContainer .card .play-video:before {content:""; padding-left: 0.6875rem; margin-right:5px;background: url(/images/play-video-white.svg) no-repeat center}

#video-popover {position: fixed; display: none; top:0; left:0; width:100%; height: 100%; z-index: 99; background: rgba(0,0,0,0.85);}
#video-popover .close {position: absolute; color: #fff; cursor: pointer; top: -2em; right: 0; width: 2em; line-height: 2em; text-align: center; font-weight: 600; transition: ease all 200ms; font-size: 2em}
  #video-popover .close:hover {opacity: 0.5}
  .management #video-popover .close {top: 2.19rem}
#video-popover .center {width:100%; max-width: 70.5em; position: absolute; top: 50%; left: 50%; padding: 0 1em; transform: translate(-50%, -50%); -webkit-transform: translate(-50%, -50%)}
#video-popover .center .videoWrapper {position: relative; border: 1px solid rgba(255,255,255,0.25); overflow: auto}
#video-popover .center .videoWrapper video {max-width: 100%; width:auto; height: auto; max-height: 80vh; float: left;}


/* PRODUCT ANCHOR LINKS -------------- */
.product-anchor-links {
  text-align: center;
  padding: .5rem 0 2rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.product-anchor-links a {font-size: 0.875rem; width: calc(50% - 1rem); margin-left: 1rem;}
.product-anchor-links a:nth-of-type(2n+1) {margin-left: 0;}
.product-anchor-links a:nth-of-type(n+3) {margin-top: 1rem;}

.product-anchor-links a:after {
  content: "";
  background: url(/images/arrow-down.svg) no-repeat center center;
  display: inline-block;
  margin-left: .5rem;
  height: .75em;
  width: .75em;
  margin-bottom: -.125rem;
}
.product-anchor-links a:hover {
  background-color: var(--denim);
  color: #fff;
}

/* FADE ------------------------------ */
.play .fadeInUp, .fadeInUp.play {opacity: 1;  transform: none;}
.ribbon.play .button.fadeInUp { transition-delay: 0}
.slideInRight { transform: translate(-100%, -50%, 0);}
.play .slideInRight, .slideInRight.play { transform: translate(-100%, -50%, 0);}
.fadeIn {opacity: 0}
.play .fadeIn, .fadeIn.play {opacity: 1}




/* FOOTER ------------------------------ */

body>footer {
  background: #FFF;
  border-top: 2px solid var(--aqua-accessible);
  color: var(--storm-grey);
  padding: 3em 1.5em 2em;
  text-align: center;
}

body>footer :is(a, .copyright) {
  color:var(--storm-grey);
  font-size: 1.125em;
}

body>footer nav {
  display:block;
  margin-bottom: 1em;
}

body>footer nav a + span:before{
  content:"|";
  padding: 0 .8em;
}

body>footer .on>a,
body>footer a:is(:hover,:focus-visible) {
  text-decoration: underline;
}


#mc-embedded-subscribe-form {text-align: center;}
.mc-field-group input {display: block; margin-bottom: .5em; width: 100%;}
#mce-EMAIL {-webkit-border-radius: 2px;border-radius: 2px;}
#mc-embedded-subscribe {width: 100%;}

#email_signup {text-align: center;}
#email_signup input[type="email"]{border: 1px solid #abd0e4;padding: .4em .8em;border-radius: 2px;margin-bottom: .5rem;}
#email_signup input[type="submit"] {width: 100%;}



/* TRANSITIONS ------------------------------ */
a, a *,button,.button,input[type="button"],input[type="submit"],.rsFullscreenBtn,#alertApp,#alertApp span,#alertDesc,#navContainer li,.hamburger, .credit-box-content, .credit-box-top button::after {-webkit-transition: all 200ms ease;-o-transition: all 200ms ease;transition: all 200ms ease}
input:focus, select:focus, textarea:focus{-webkit-transition: background-color 150ms ease;-o-transition: background-color 150ms ease;transition: background-color 150ms ease}


/* FORM ERROR ------------------------------ */
.form-error {
	color: #EE0000;
	font-size: 0.9375em;
}

.reverse .form-error {
	background: #EE0000;
	color: #FFF;
}

fieldset label:first-of-type input:focus {
	outline: 1px solid #FF0000;
}

.formError {background-color:black; border:0; padding: 5px 10px; color:#fff; display:none; margin:0 0 2px; z-index:9999; -webkit-border-radius: 10px; border-radius: 10px; -moz-box-shadow:0 2px 2px #333; -webkit-box-shadow:0 2px 2px #333;}
.formError p {margin:0; font-size:.9em; }
.formError em { border:10px solid;  border-color:Black transparent transparent; bottom:-17px; display:block; height:0; left:40px; position:absolute; width:0; }

@import url(/includes/css/grid-flex.css);

/* 08/19 REVISED PRODUCT PAGE ------------------------------ */

.productPage .divider { padding-bottom: 1em; }
.productPage.productPage .breadcrumb { margin-bottom: .5em; }
.productPage.productPage .left { width: 50%; }
.productPage.productPage .right { width: 48%; }

.productPage.productPage .gallerySelection > * {position:relative; border: 1px solid #DAE9F2;height: 3.3125em; aspect-ratio:1/1; transition: all .2s ease;width: auto; background-color:#fff;}
.productPage.productPage .gallerySelection > *:hover {border-color: #E02D00; opacity: 1;}
.productPage.productPage .gallerySelection > .on {border-color: #106FA5; opacity:1;}
.productPage.productPage .gallerySelection > .video:before {
  content: "";
  display: block;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,17,47,0.50) url(/images/thumbnail-play.svg) no-repeat center / 34% auto;
  position: absolute;
  transition: ease all 200ms;
}

.productPage h1 { font-size: 2.625rem; }
.productPage .gallerySelection { margin: 1rem 0 0; }
.productPage .gallerySelection div.active-thumb { border: 1px solid var(--indigo); }

.productPage .right .top > form {align-items: center;border-bottom: 1px dashed #D8D8D8;display: flex;flex-direction: row;margin: 0 0 2.5rem;}

.productPage .right .top-left,
.productPage .right .top-right {align-items: center;display: flex;flex-direction: column;width: 50%;}
.productPage .right .top-left {border-right: 1px dashed #D8D8D8;padding: 0 1.5rem 1.5rem 0;}
.productPage .right .top-right {padding: 0 1.625rem 1.5rem;position: relative;top: -.75rem;}

.productPage .right .top .row,
.productPage .right .top .row select,
.productPage .right .top .row textarea {color: #343434;display: block;width: 100%;}

.productPage .right .top .row {color: var(--indigo);font-size: .875rem;margin: 0 0 .35rem;}
.productPage .right .top .row input,
.productPage .right .top .row select,
.productPage .right .top .row textarea {background-color: #f0f0f0;-webkit-border-radius: .125rem;border-radius: .125rem; max-width: 100%;}
.productPage .right .top .row input[type="text"],
.productPage .right .top .row select {width:100%; padding: 0 0.8em; height: 2.1875em}
.productPage .right .top .row textarea {padding: .5em .8em .4em;}
.productPage .right .top .row select {padding-right: 2em; background-image: url("/images/icon-caret-down.svg");background-repeat: no-repeat;background-position: -webkit-calc(100% - .875em) center;background-position: calc(100% - .875em) center;-webkit-background-size: .625rem 1rem;background-size: .625rem 1rem;margin: .0625rem 0 0;-webkit-appearance: none;-moz-appearance: none;-o-appearance: none;appearance: none;}
.productPage .right .top .row select::-ms-expand {display: none;}
.productPage .right .top .row .radio {display: block;}
.productPage .right .top .row .radio input {margin-right: 0.25em}


.productPage .right .top-right span.product-price {color: var(--denim);font-size: 1.75rem;font-weight: 700;margin: 0 0 .5rem;}
.productPage .right .top-right .add-to-cart {font-size: 1.0625rem;height: 3.125rem;margin: 0;padding: 0 1em;text-align: center;width: 100%;}

.productPage .bottom #product-logos { float: left; }
.productPage #product-logos img { margin: 0 1em 1em 0; }

#specifications {padding: 1.25rem 1.5rem 1.5rem;}
#specifications h2, #faqs h2 { text-align: left; }
#specifications .spec-table { background: #FFF; border: 1px solid #ABD0E4; font-size: 1.125rem; }
#specifications .spec-table tr:nth-of-type(even) { background: rgba(97, 97, 97, .07); }
#specifications .spec-table tr>td:first-of-type { font-weight: 700; width: 10.625rem; }
#specifications .spec-table td { padding: .5625rem .75rem; }

.styledTable {
    background: #fff;
    line-height: 1.25em;
    border: 1px solid var(--mist-grey);
}


.styledTable th {
    background: var(--storm-grey);
    color: #fff;
    padding: 0.5rem;
}

.styledTable .tick {
    color: green;
    font-weight: 700;
}

#faqs { clear:both; padding: 2rem 1.5rem; text-align: center;}


#faqs .faq {background: #FFF;border: 1px solid var(--mist-grey); transition: ease all 200ms; cursor: pointer;margin: 0 0 .25rem;padding: .8125rem 3.5rem .8125rem 3rem;position: relative;text-align: left;}

#faqs .faq :is(p.question, button.question) {
  font-weight: 700;
  margin: 0;
  padding: 0;
  background: transparent;
  border: 0; color: #4a4a4a;
  font-size: 1.125em;
  line-height: 1.5;
  text-align: left;
}

#faqs.products .faq :is(p.question, button.question) {
  font-size: 1.25em;
}

#faqs .faq .answer {
  height: 0;
  overflow: hidden;
  position: relative;
  top: 0;
  transition: all .3s ease;
}

#faqs .faq .answer p {margin : .75rem 0;}
#faqs .faq .answer p:last-of-type { margin: .75rem 0 0; }

#faqs .faq:is(:hover, :focus-visible) {
	border-color: var(--aqua);
}

#faqs .faq::before {
	background: var(--aqua);
	content:"";
	mask: url('/images/icon-caret-right.svg') no-repeat center / .5em auto;
	display: block;
	height: 1.25rem;
	left: 1.5rem;
	position: absolute;
	top: .95rem;
	width: .5rem;
}

#faqs .faq::after {
	background: var(--aqua);
	content:"";
	mask-image: url(/images/icon-chevron-down.svg);
	mask-size: 100% auto;
	mask-repeat: no-repeat;
	mask-position: center;
	display: block;
	height: 1.5625rem;
	right: 1rem;
	position: absolute;
	top: .95rem;
	width: 1rem;
	transition: all .3s ease;
}

#faqs .faq.expanded::after {
  background-color: var(--indigo);
  transform: rotate(180deg);
}

#faqs .faq.expanded {
	border-color: var(--indigo);
}

#faqs .faq.expanded button {
  color: var(--indigo);
}

#faqs .button {
  background: var(--indigo);
  border: 0;
  margin: 1.5rem 0 0;
}

#faqs .button:hover { background: #FF4818; }
#relatedProducts.productPage {padding: 3.5rem 1.5rem 6rem;}
#relatedProducts.productPage .seriesList {-webkit-box-pack: center;justify-content: center;margin: 1.75em auto 0;max-width: 100%;width: 68rem;float: none;}
#relatedProducts.productPage .seriesList li {margin: 0 .625rem;  width: calc(33% - 1.25rem);}
#relatedProducts.productPage .seriesList .categoryImage { margin: 1.75rem 0 0; padding: 0 0 50%; }
#relatedProducts.productPage .information { padding: 1em 1.5rem 5.5em; }
#relatedProducts.productPage .information h3 { color: var(--indigo); font-size: 1.25rem; }
#relatedProducts.productPage .information h4.price { color: rgba(0, 67, 105, .8); font-size: 1.125rem; }
#relatedProducts.productPage .seriesList .button { bottom: 2.75em; margin: 0; }


/* ONLINE TRAINING PROGRAMS - INTRO ------------------------------ */

.wrapper {margin: 0 auto;max-width: 100%;width: 56.25rem;}

.dashed-line {
  background-image: linear-gradient(to right, #A7C5D8 50%, rgba(255,255,255,0) 0%);
  background-position: 0 bottom;
  background-size: 6px 1px;
  background-repeat: repeat-x;
  display: block;
  height: 1px;
  margin: 0 0 1rem;
  width: 100%;
}

#ot-intro {
  background-color: var(--cloud-white);
  padding: 3em 1.5rem;
}

#ot-intro h1 {
  font-size: 2.8125rem;
  margin: 0 0 1.5rem;
  text-align: center;

}

#ot-intro p { font-size: 1.125rem; }
#ot-intro p.intro { font-size: 1.3125rem; }
#ot-intro .buttons { margin: 2.25rem 0 0; text-align: center; }
#ot-intro .buttons .button { margin: 0; }



/* ONLINE TRAINING PROGRAMS - INSTRUCTIONS ------------------------------ */

#ot-instructions {padding: 3rem 1.5rem 5rem;}
#ot-instructions h2 {color: var(--aqua-accessible);font-size: 1.75rem;}

#ot-instructions .flowchart {
  align-items: stretch;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 2rem 0 1rem;
}

#ot-instructions .step {
  align-items: center;
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  text-align: center;
  width: 33.3333%;
}

#ot-instructions .arrow {
  height: auto;
  max-width: 2.125rem;
  min-width: 1.5rem;
  position: relative;
  top: -1.75rem;
  width: 2.75vw;
}

#ot-instructions .icon {
  align-items:center;
  background: var(--aqua-accessible);
  border-radius: 50%;
  display: flex;
  height: 10vw;
  max-height: 8.875rem;
  max-width: 8.875rem;
  min-height: 4rem;
  min-width: 4rem;
  width: 10vw;
}

#ot-instructions .icon img {max-width: 3vw; margin: 0 auto; filter: invert(1)}

#ot-instructions .step h3 {
  font-size: 1.1875rem;
  font-weight: 600;
  margin: 1rem 0;
}

#ot-instructions .step h3>span {color: var(--denim); font-weight: 700; }
#ot-instructions ul ul span { color: var(--indigo); font-weight: 700; }
#ot-instructions ul { margin: 2.125rem 0 0; }
#ot-instructions ul ul { margin: 1rem 0 0; }
#ot-instructions ul li { background: url(/images/icons/misc/arrow-circle-right.svg) no-repeat 13px 5px / .875rem .875rem; font-size: 18px; }
#ot-instructions ul ul li { background: url(/images/icon-arrow-right-circle.svg) no-repeat 12px 6px / .875rem .875rem; }



/* ONLINE TRAINING PROGRAMS - CLASS OUTLINE ------------------------------ */

#ot-outline {
  background-color: var(--cloud-white);
  padding: 3rem 1.5rem;
}

#ot-outline h2 {color: var(--aqua-accessible);font-size: 1.75rem;}
#ot-outline .line { margin: 0 0 2rem; }
#ot-outline ol { margin: 2.5rem 0 0;  padding: 0 0 0 2rem; }

#ot-outline ol>li {
  font-size: 1.0625rem;
  font-weight: 400;
  line-height: 1.5;
  list-style: none;
  margin: 0 0 .625rem;
}

#ot-outline .wrapper>ol>li::before {
  content: counter(li)".";
  color: var(--denim);
  font-size: 1.1875rem;
  margin: 0 .5rem 0 -1rem;
  width: 1rem;
}

#ot-outline .wrapper>ol>li {
  counter-increment: li;
  font-weight: 700;
}

#ot-outline ol ol {
  list-style: none;
  margin: .625rem 0 .75rem;
  padding: 0 0 0 2rem;
}

#ot-outline ol ol span {
  color: var(--denim);
  font-size: 1rem;
}


/* ONLINE TRAINING PROGRAMS - STATE / GENERAL TRAINING ------------------------------ */

#ot-training {background: #FFF;padding: 3rem 1.5rem 5rem;}
#ot-training  h2 {
  color: var(--aqua-accessible);
  font-size: 1.75rem;
  margin-bottom: .625rem;
}
#ot-training #state-training { padding: 0 0 4rem; }

#ot-training #state-training select {
  border-width: 2px;
  color: var(--aqua-accessible);
  font-size: 1.125rem;
  font-weight: 700;
  height: 2.9375rem;
  width: 21rem;
}

#ot-training #state-training button {
  height: 2.9375rem;
  position: relative;
  top: -.0625rem;
}

#ot-training #state-training p.states { margin: 0 0 1.75rem; }
#ot-training #state-training p.states span { color: #005C8F; font-weight: 700; }

#ot-training .flex-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  margin: 1.25rem 0 0;
}

#state-training .flex-row .column:first-of-type { padding: 0 1.5rem 0 0; }
#ot-training #state-training img {height: 225px; width: 300px;}

#ot-training p.intro { font-size: 1.125rem; }
#ot-training p.intro span.underlined {border-bottom: 2px solid #005C8F;}
#ot-training p span:not(.underlined) { font-weight: 700; }
#ot-training #general-training ul.links { margin: 2rem 0 0; }
#ot-training #general-training ul.links li { background: none; margin: 0 0 .625rem; padding: 0; }
#ot-training #general-training ul.links li a { font-weight: 700; }



/* ONLINE TRAINING PROGRAMS - STATE TEST PAGES ------------------------------ */

#state-tests {
  background-color: #FFF;
  background-image: linear-gradient(180deg, rgba(234,244,250,0.00) 50%, #D0E5F3 100%);
  padding: 2em 1.5rem clamp(3em, 2.273em + 3.64vw, 5em);
}


#state-tests .small-text {
  color: var(--aqua-accessible);
  display: block;
  font-size: .9375rem;
  font-style: italic;
  margin: 0 0 -.125rem;
}

#state-tests h1 {font-size: 2.8125rem;}
#state-tests h2 {color: var(--aqua-accessible);font-size: 1.75rem;}
#state-tests h4 { color: #4A4A4A; font-size: 1.125rem; margin: 2.25rem 0 .25rem; }
#state-tests section { padding: 2rem 1.5rem 2rem 3.5rem; position: relative; }
#state-tests .wrapper section:first-of-type {padding: 1rem 0 2rem;}
#state-tests a { font-weight: 700; }

#state-tests .icon {
  background: #DAEAF4;
  -webkit-border-radius: 50%;
  border-radius: 50%;
  display: table-cell;
  height: 2.375rem;
  left: 0;
  position: absolute;
  text-align: center;
  top: 1.875rem;
  vertical-align: middle;
  width: 2.375rem;
}

#state-tests .icon img {
  position: relative;
  top: .5625rem;
  width: 60%;
}

/* ONLINE TRAINING PROGRAMS - RESOURCE MAP ------------------------------ */

#resource-map {
  padding: 3rem 1.5rem;
}

#resource-map  h1 {
  font-size: 2.8125rem;
  margin: 0 0 1.5rem;
  text-align: center;

}

#resource-map svg .cls-1 { cursor: pointer; transition: all .3s ease; }
#resource-map svg .cls-1:hover { fill: var(--denim); }
#resource-map svg .cls-2 {pointer-events: none}


#resource-map .location {
  border: 4px solid transparent;
  margin: 1rem 0;
  padding: 1.75rem 0 2.5rem;
  -webkit-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

#resource-map .location.selected-location {
  background: #FFF;
  border-color: #A7C5D8;
  padding: 1.75rem 2.5rem;
}

#resource-map .location .button {
  background: #168ED2;
  -webkit-border-radius: 2px;
  border-radius: 2px;
  border-width: 1px;
  font-size: 1rem;
  margin: 0 .125rem 0 0;
  padding: .625em 1em;
}

#resource-map .location h2 { color: var(--aqua-accessible); }
#resource-map .location ul { margin: 0 0 2rem; }
#resource-map .location ul li { margin-top: .5em; }
#resource-map .location a { font-weight: 700;}
#resource-map .location .button:hover { background: #FF4818; }

#resource-map #location-select {
  box-shadow: 0 25px 25px 0px #FFF;
  display: flex;
  margin: 0 0 0rem;
  text-align: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

#resource-map #location-select .selects {
  display: flex;
}

#resource-map hr {margin: 1rem 0;}
#resource-map #location-select .button.active { background:  var(--indigo); color:#fff}

#ot-training #state-training select,
#resource-map #location-select select {
  background-image: url("/images/icon-angle-down.svg");
  background-repeat: no-repeat;
  background-position: 98% 50%;
  padding: .125rem 3em .125rem .75rem;
  -moz-appearance: none;
  -webkit-background-size: 16px 26px;
  background-size: 2.5rem;
}

#resource-map #location-select select {
  border-width: 2px;
  color: var(--indigo);
  font-size: 1.125rem;
  font-weight: 700;
  height: 2.9375rem;
  left: 0;
  position: absolute;
  width: 100%;
}

#ot-training #state-training select::-ms-expand,
#resource-map #location-select select::-ms-expand,
#resource-map #location-select select::-ms-expand { display: none; }

#resource-map #location-select button { height: 2.9375rem; }

#resource-map #location-select .select-toggle {
  display: inline-block;
  height: 2.9375rem;
  margin: 0 .375rem 0 2rem;
  overflow: hidden;
  position: relative;
  width: 21rem;
}

#resource-map .location .tab-button.active {background-color: var(--indigo); color: #fff;}
#resource-map .location .content-box {display: none; margin-top:1em}
#resource-map .location .content-box.active {display: block}

.single-location .title-tag {color: var(--indigo);display: block;font-size: .875rem;}
.single-location .tab-button.active {background-color: var(--indigo); color: #fff;}
.single-location .content-box {background:#fff; padding: 1.5rem 1.25rem; margin-top:0.25em}

#map-wrap { overflow: hidden; position: relative; padding: 0 0 75%; }
#map-usa, #map-canada, #resource-map select { -webkit-transition: all .65s ease; -o-transition: all .65s ease; transition: all .65s ease; }

#map-wrap #map-usa {opacity: 1;padding: 2.5rem 0 0;top: 0;z-index: 2;}
#map-wrap.shift #map-usa {opacity: 0;top: 100%;}

#map-wrap #map-canada {opacity: 0;padding: 2.5rem 0 0;top: -100%;}
#map-wrap.shift #map-canada { top: 0; opacity: 1;}

#location-select #state-select { top: 0; opacity: 1; z-index: 2; }
#location-select.shift #state-select { z-index: 1; }

#location-select #province-select {opacity: 0; top: 0; z-index: 1;}
#location-select.shift #province-select { top: 0; opacity: 1; z-index: 2;}

#map-wrap .map {height: 100%;left: 0;position: absolute;top: 0;width: 100%;}

#map-wrap .map svg { height: 100%; width: 100%; }

/*  RESOURCE MAP - OTHER COUNTRIES ------------------------------ */

#other-countries { padding: 2rem 1.5rem; }
#resource-map #other-countries h3 { color: #4A4A4A; font-size: 1rem; font-style: italic; font-weight: 400; margin: 0 0 1rem; text-align: center; }
#other-countries .wrapper { display: flex; justify-content: center;}
#other-countries ul { column-rule: 0; max-width: 100%; width: 42rem; }
#other-countries li {background: none; padding: 0; }
#other-countries li>a { color: var(--indigo); display: table; font-size: 1.125rem; font-weight: 700; margin: 0 0 .625rem; }
#other-countries li>a:hover { color: #FF4818; }
#other-countries li>a img { height: auto; margin: -.125rem .5rem 0 0; vertical-align: middle; width: 2.1875rem; }

#resource-map h2+h3{margin: 1rem 0 1rem;}
#resource-map h3 { font-size: 1.375rem; margin: 3rem 0 1rem; text-align: left; }
#resource-map h4 { font-size: 1.125rem;}
#resource-map .location.country {padding: 1.75rem 1.75rem 2.5rem 3.5rem; position: relative;}
#resource-map .location.country.selected-location {padding: 1.75rem 1.75rem 2.5rem 5.25rem; position: relative;}
#resource-map  h3.other + .country { margin-top: 0; }
#resource-map .location.country img {height: auto;left: 0;position: absolute;top: 1.9375rem;-webkit-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;width: 2.1875rem;}
#resource-map .location.country.selected-location img {left: 1.5625rem;}
#resource-map .location.country ul li {background-image: none;margin: .3125rem 0 0;padding: 0;}
#resource-map .location.country span {margin: 0 .375rem 0 0; position: relative; top: .125rem;}
#resource-map .location.country span.phone::before { content: url('/images/icon-phone.svg'); }
#resource-map .location.country span.fax::before { content: url('/images/icon-fax.svg'); }
#resource-map .location.country span.email::before { content: url('/images/icon-email.svg'); }
#resource-map .location.country span.website::before { content: url('/images/icon-website.svg'); }

/* UPCOMING WEBINARS ------------------------------------ */
.webinar-list {display: flex; flex-wrap: wrap; justify-content: center; padding-bottom: 3.75rem;}
.webinar-list li a {display: block; height: 100%; background: #FFF; padding: 1.0625rem 1.0625rem 2rem; position: relative; border-radius: 3px; border: 3px solid var(--cloud-white)}
.webinar-list li a:before {content: ""; top: 0; right: 0; bottom:0; left: 0; position: absolute; border-radius: 3px;}
.webinar-list li .button {position: absolute;bottom: -16px;right: 50%;transform: translateX(50%);margin: 0;white-space: nowrap;}
.webinar-list li a:hover .button {background-color: #fff; color: var(--indigo); box-shadow: 0 0 0 2px var(--aqua);}

#upcoming-webinars {padding-bottom: 5rem; position: relative; background:rgba(var(--ice-blue), .25);}
#upcoming-webinars h2, #past-webinars h2 {text-align:center; font-size: 2.5rem; font-weight: 900; }
#upcoming-webinars ul li a {
	display: flex;
	flex-direction: column;
}
#upcoming-webinars ul li h3 {font-size: 1.25rem; margin-bottom:1em; max-width: 19.9375rem; margin-left: auto; margin-right: auto;text-align: center;}

#upcoming-webinars ul li h3:before {
	background: var(--aqua);
	content: "";
	display: block;
	margin: 0.5em auto 1em;
	mask: url('/images/icons/misc/play-circle.svg') no-repeat center / 100% auto;
	height: 2.5rem;
	width: 2.5rem;
}
#upcoming-webinars ul li time {font-size: 1.125rem; margin-top: auto; position: relative; display: block; padding-bottom: 1.25rem; margin-bottom: 1.25rem; text-align: center;}
#upcoming-webinars ul li time span { color: #062234; display: block;}
#upcoming-webinars ul li p {color: #4A4A4A; text-align: center;}
#upcoming-webinars .view-all.button {background: #FFF; display: table; margin: 0 auto; color: var(--indigo); font-weight: 900; border: 2px solid var(--cloud-white); font-size: 1.125rem; padding: .625em 1.4em;}
#upcoming-webinars .view-all.button span {color:var(--denim);text-decoration: underline; text-decoration-color: var(--aqua);}
#upcoming-webinars .view-all.button:hover {background: var(--denim); color: #fff}
#upcoming-webinars .view-all.button:hover span {color: #FFF;}
#state-accredited-webinars {padding-top: 5.3125rem; padding-bottom: 8.75rem;background-color: var(--indigo); background-image: url(/images/usa.svg); background-size: contain; background-position: center; background-repeat: no-repeat;}
#state-accredited-webinars .wrap {max-width: 56.875rem; overflow: visible;}
#state-accredited-webinars h2 {color: #FFF;  font-size: 2.5rem; font-weight: 900; text-align: center; margin-bottom: 2rem;}
#state-accredited-webinars h2 span {display: block; font-size: 1.75rem; font-weight: 500; text-transform: capitalize; opacity: .7; line-height: 1.125}
#state-accredited-webinars ul li a {padding: 1rem .5rem; height: 12.5rem; display: flex; align-items: center; justify-content: center;}
#state-accredited-webinars ul li a:is(:hover, :focus-visible) {border-color: var(--aqua);}
#state-accredited-webinars ul li h3 {color: var(--indigo); font-weight: 900; text-align: center; position: relative; z-index: 2;}
#state-accredited-webinars ul li a:after {content: ""; background-size: contain; background-position: center; background-repeat: no-repeat; position: absolute; height: 9.375rem; width: 9.375rem; top: 50%; right: 50%; transform: translate(50%, -50%); opacity: .6; transition: opacity .2s;}
#state-accredited-webinars ul li.massachusetts a:after {background-image: url(/images/massachusetts.svg);}
#state-accredited-webinars ul li.new-hampshire a:after {background-image: url(/images/new-hampshire.svg);}
#state-accredited-webinars ul li.new-york a:after {background-image: url(/images/new-york.svg);}
#state-accredited-webinars ul li.ohio a:after {background-image: url(/images/ohio.svg); height: 5.75rem; width: 5rem;}
#state-accredited-webinars ul li .button {text-align: center; box-shadow:none; min-width: 6.625rem; padding: calc(.625em - 2px) calc(1em - 2px);}
#state-accredited-webinars ul li a:hover .button {background: var(--cloud-white); color: var(--indigo)}
#state-accredited-webinars ul li a:hover:after {opacity: 1;}

#past-webinars {padding-top: 5rem; padding-bottom: 6.5625rem; background: #FFF;}
#past-webinars .wrap, #upcoming-webinars .wrap {overflow: visible;}
#past-webinars .button.blue {background: var(--indigo); color:#fff; border: 0; position: absolute; right: 0; top: 0;}
#past-webinars .button.blue:hover {background: #fff; color: var(--indigo); box-shadow: 0 0 0 2px var(--aqua)}
ul.blue-webinars-list {display: flex; flex-wrap: wrap;}
ul.blue-webinars-list li a {background: rgba(var(--ice-blue-rgb), .25); border-radius: 3px; position: relative; height: 100%; padding: 2rem 1.125rem; display: flex; align-items: center; justify-content: center; flex-direction: column; text-align: center;}
ul.blue-webinars-list li a:hover:before {border-color: var(--aqua);}
ul.blue-webinars-list li a:before {content: ""; top: 2px; right: 2px; bottom: 2px; left: 2px; border: 2px solid #FFF; border-radius: 3px; position: absolute; transition: ease all 200ms}
ul.blue-webinars-list li h3 {font-size: 1.125rem; font-weight: 700; color: var(--indigo); max-width: 100%;}
#past-webinars ul li:nth-of-type(n+5) {margin-top: 2.9375rem;}
ul.blue-webinars-list li a:hover .button {color: #FFF; background: var(--indigo);}

.state-page h1 { font-size: 2.8125rem;}
.state-webinars {position: relative; margin-top: 2rem;}
.state-webinars + .state-webinars {border-top: 1px solid #DAEAF4; padding-top: 1.5rem;}
.state-webinars .blue-webinars-list li {padding-left: 0; margin-top: 0; background: none;}
.state-webinars h2 {font-size: 1.75rem; color: var(--indigo);padding-right: 7rem;}
.state-webinars .blue-webinars-list {margin-top: 3rem;}
.state-webinars .blue-webinars-list li a {padding-top: 3.125rem; position: relative; justify-content: flex-start;}
.state-webinars .blue-webinars-list li a:after {content: ""; background-color: var(--indigo); border: 2px solid #FFF; border-radius: 50%; width: 3.125rem; height: 3.125rem; top: -14px; right: 50%; transform: translateX(50%); position: absolute; background-size: 20px 20px; background-repeat: no-repeat; background-position: center;}
.state-webinars .blue-webinars-list li.register a:after {background-image: url(/images/pen.svg);}
.state-webinars .blue-webinars-list li.watch a:after {background-image: url(/images/play.svg);}
.state-webinars .blue-webinars-list li .button {margin: 0; border: 0; font-size: 1rem;}
.state-webinars .button.white {background: #FFF; margin: 0; color: var(--indigo); border:2px solid #DAEAF4; font-size: 1rem; position: absolute; right: 0; top: 0;}
.state-webinars .button.white:hover {background: var(--indigo); color: #FFF; border: 2px solid var(--indigo);}
.state-webinars + .state-webinars .button.white {top: 1.5rem;}


.webinar-page h1 {font-size: 2rem; line-height: 1.0625em}
.webinar-page hr {margin: 1.5em 0;}
.credit-box {margin: 2rem 0;}
.credit-box-top button {
  background: var(--indigo);
  border: 0;
  color: rgba(255,255,255,.8);
  font-size: 1.125rem;
  font-weight: 500;
  line-height: 1.5;

  padding: 0.375rem 3rem 0.375rem 0.8125rem;
  position: relative;
  letter-spacing: 1px;
  text-align: left;
  width: 100%;
}

.credit-box-top button::before,
.credit-box-top button::after {
  background: #FFF;
  content: '';
  display: block;
  height: 1.25em;
  position: absolute;
  right: 1.375em;
  top: 50%;
  transition: all .3s ease;
  width: 0.125em;
}

.credit-box-top button::before,
.expand .credit-box-top button::after {
  transform: translateY(-50%) rotate(90deg);
}

.credit-box-top button::after {
  transform: translateY(-50%) rotate(0deg);
}

.credit-box-top button > span {color: #FFF; font-weight: 900; transition: all .3s ease;}

.credit-box-content { height: 0; overflow: hidden; }
.credit-box-content>div {border: 1px solid #DAEAF4; background: #FFF; padding: 1.25rem 0.375rem 0.625rem;}
.credit-box-content ul li {margin-top: .5em;}

.webinar-header, .content * .webinar-header {font-size: 1.5rem; color: var(--indigo);}
.speaker-biography h3 {color: #FF4818; font-size: 1.25rem; margin-bottom: 0;}
.speaker-biography .subtitle {font-style: italic; font-size: 1rem; margin-bottom: 1rem;}
.speaker-biography img {float: right; max-width: 12.5rem;}
.speaker-biography .speaker-name {float: left;}
.speaker-biography .speaker-name ~ *:not(img) {clear: left;}



/*  PRODUCT PAGE OVERRIDES ------------------------------ */

.seriesList .categoryImage {
  height: auto;
  padding-bottom: 0;
}

.product-image {
  margin: 1rem;
  padding: 0 0 50%;
  position: relative;
}

.product-image img {
  height: auto;
  left: 50%;
  max-width: 100%;
  max-height: 100%;
  position: absolute;
  top: 50%;
  transform: translate(-50%,-50%);
  width: auto;
}





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

.home-callouts {
  overflow: hidden;
  padding-block: clamp(2em, 1.682em + 1.59vw, 2.875em) clamp(3.5em, 2.955em + 2.73vw, 5em);
  position: relative;
  text-align: center;
}

.home-callouts .wrap {
  max-width: calc(69.75em + 2 * var(--ws-gap));
  padding-inline: var(--ws-gap);
}

.home-callouts .textbox {
  margin: 0 auto 2em;
}

.home-callouts h1 {
  font-size: clamp(1.5em, 1.136em + 1.82vw, 2.5em);
  margin: 0 0 .25em;
}

.home-callouts .textbox p {
  font-size: clamp(1.125em, 1.08em + 0.23vw, 1.25em);
}

.home-callouts ul {
  justify-content: center;
  --ws-gutter: 1em;
}

.home-callouts ul>li {
  background: #FFF;
}

.home-callouts ul>li>a {
  background: #FFF;
  border: 2px solid var(--cloud-white);
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 2em clamp(1em, 0.682em + 1.59vw, 1.875em) 1.875em;
}

.home-callouts strong.title {
  color: #000;
  font-size: clamp(1.25em, 1.205em + 0.23vw, 1.375em);
}

.home-callouts strong.title::before {
  aspect-ratio: 45 / 40;
  background: var(--aqua);
  content: '';
  display: block;
  height: 1.9em;
  margin: 0 auto .75em;
  mask: no-repeat center bottom / contain;
}

.home-callouts ul>li:nth-child(1) strong.title::before { mask-image: url('/images/icons/callout-1.svg'); }
.home-callouts ul>li:nth-child(2) strong.title::before { mask-image: url('/images/icons/callout-2.svg'); }
.home-callouts ul>li:nth-child(3) strong.title::before { mask-image: url('/images/icons/callout-3.svg'); }
.home-callouts ul>li:nth-child(4) strong.title::before { mask-image: url('/images/icons/callout-4.svg'); }
.home-callouts ul>li:nth-child(5) strong.title::before { mask-image: url('/images/icons/callout-5.svg'); }
.home-callouts ul>li:nth-child(6) strong.title::before { mask-image: url('/images/icons/callout-6.svg'); }

.home-callouts ul p {
  color: #000;
  font-size: clamp(1.0625em, 1.04em + 0.11vw, 1.125em);
  text-wrap: pretty;
}

.home-callouts span.link {
  align-self: center;
  border-bottom: 3px solid var(--denim);
  color: #000;
  display: inline-block;
  font-weight: 700;
  margin-top: auto;
  padding-block: .25em;
}

.osano-cm-widget { display: none; }

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