@font-face {
  font-family: 'Sink';
  src: url('/page/assets/SinkRegular.woff2') format('woff2'),
      url('/page/assets/SinkRegular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

:root {
  --color-blue: rgba(42,91,170,1); /* #2a5baa */
  --heading-shadow: .5rem .5rem .75rem rgba(0,0,0,.5);
}

/* RESET */

  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

/* ELEMENTS */

  header .main_menu { display:none; }
  body { font-family:Arial, sans-serif!important; font-size:16px; color: #fff; }
  h1 {
    display:inline-block;
    margin-bottom:0; font-family:Sink, sans-serif!important; font-size:7.5rem; line-height:0.8; letter-spacing:.35rem; font-weight:normal!important; margin-bottom:20px; text-transform:uppercase;
    transform: scaleX(1.25);
    transform-origin: left center;
    /*zoom:1.25;*/
    letter-spacing:.01em;
  }
  h2 { font-size: 1.5rem; color:var(--color-blue); }
  /*h3 { font-size: 3rem; }*/
  section { background-size:cover; background-position:center; background-repeat:no-repeat; background-color:white; }
  ul { margin:0 0 1em 0; }

  section.stackable { position:relative; }
  section.stackable .background { position:absolute; top:0; left:0; width:100%; height:100%; }
  section.stackable .background img { width:100%; height:100%; object-fit:cover; object-position:right; }
  section.stackable .content {  }
  section.stackable .content .content-column.big {  }
  section.stackable .content .content-column.small {  }


/* GENERAL CLASSES */

  .content { box-sizing:border-box; display:flex; width:100%; }
  .content .content-column.big { width:52.5%; }
  .content .content-column.small { width:47.5%; }
  .content .content-column:first-of-type { padding-left:8vw; }
  .content .content-column:last-of-type { padding-right:8vw; }

  button {
    padding: .75em 2em!important; border-radius:.25em!important; border: 1px solid white!important;
    font-size:inherit; font-weight:bold; background-color: #2a5baa; color: white; }
  .text-box {
    position:relative; padding:2rem; height:100%;
    background-color: rgba(255, 255, 255, 0.75); color: #333; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2); text-align:left!important;
  }
  .text-box::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2rem; background: var(--color-blue); }
  .content .content-column:first-of-type .text-box { padding-left:4rem; }
  .content .content-column:first-of-type .text-box::before { left:0; right:unset; }
  .content .content-column:last-of-type .text-box { padding-right:4rem; }
  .content .content-column:last-of-type .text-box::before { left:unset; right:0; }

  .link-list { list-style:inside; padding: 15px; text-align: left; }

/* HUBSPOT */

  .quick-quote { background-color:rgba(42,91,170,.8); }
  .quick-quote .hs-form-html h1 { font-size:2em; color:white!important; }
  .quick-quote .hs-form-html h3 { color:white!important; }
  .quick-quote .hs-form-html button { border:1px solid white; background-color:var(--color-blue); font-size:inherit; font-weight:bold; text-transform:uppercase!important; }
  .quick-quote .hsfc-Renderer .hsfc-Step__Content { padding:2rem; }
  .quick-quote .hsfc-Renderer .hsfc-Step__Content > .hsfc-Row .hsfc-CheckboxField { margin-top:0; }
  .quick-quote .hsfc-Renderer .hsfc-ErrorAlert { font-size:.7em!important; color:yellow!important;  }
  .quick-quote .hsfc-Renderer .hsfc-CheckboxField { margin-top:1rem; }
  .quick-quote .hsfc-Renderer .hsfc-CheckboxField span { margin-top:2rem; color:white!important; }
  .quick-quote .hsfc-Renderer .hsfc-CheckboxField span a { color:white!important; text-decoration:underline; }
  .quick-quote .hsfc-Renderer .hsfc-PhoneInput .hsfc-PhoneInput__FlagAndCaret { display:none; }
  .quick-quote .hsfc-Renderer .hsfc-NavigationRow__Buttons button { margin-left:0!important; margin-right:auto!important; }
  .quick-quote .hsfc-Renderer .hsfc-RichText { color:white!important; }
  #freshwater-footer .quick-quote { background-color:unset; zoom:80%; transform-origin:top right; }
  #freshwater-footer .quick-quote .hsfc-Renderer .hsfc-Step__Content { padding:1rem; }

  #freshwater-footer .quick-quote .hsfc-Renderer .hsfc-CheckboxField span { margin-top:0; }
  #freshwater-footer .quick-quote .hs-form-html button { background-color:rgb(42,61,122);  }
  #freshwater-footer .hsfc-Renderer .hsfc-Step__Content  {
    display: grid; grid-template-columns: 1fr 1.5fr; grid-auto-flow: row dense !important;
    column-gap: 3rem; row-gap: 1rem;
   }
  #freshwater-footer .hsfc-Renderer .hsfc-Step__Content > .hsfc-Row { grid-column: 1; }
  #freshwater-footer .hsfc-Renderer .hsfc-Step__Content > .hsfc-Row:nth-of-type(n+6) { grid-column: 2; }
  #freshwater-footer .hsfc-Renderer .hsfc-Step__Content > .hsfc-NavigationRow { margin-top:0; }
  #freshwater-footer .hsfc-Renderer .hsfc-Step__Content > .hsfc-NavigationRow .hsfc-NavigationRow__Alerts { margin:0; }
  .hsfc-DropdownInput input { margin-bottom:0!important; }

/* IDS */

  #hero {
    height: 55vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  #hero h1 { text-shadow:var(--heading-shadow); }
  #hero p { font-family:sans-serif!important; margin-top:.5em; font-size:3rem; line-height:1; font-weight:bold; text-transform:uppercase; text-shadow:var(--heading-shadow); }
  #hero .content .content-column.big { width:57.5%; display:flex; flex-direction:column; justify-content:center; }
  #hero .content .content-column.big p { margin-bottom:0; }
  #hero .content .content-column.small { width:42.5%; }

  #intro { min-height:40vw; }

  #solutions { min-height:40vw; }
  #solutions .text-box { background-color:unset; }
  #solutions .text-box::before { content:none; display:none; }
  #solutions .text-box h2 { font-family:sans-serif!important; font-size:2.5rem; text-transform:uppercase; color:white; }
  #solutions .text-box p { color:white; }

  #products { position:relative; min-height:40vw; }
  #products .background { position:absolute; top:0; left:0; width:100%; height:100%; }
  #products .background img { object-fit:cover; object-position:center center; width:100%; height:100%; }
  #products li { line-height:1.2; }
  #products li.active { font-weight:bold; }
  #products li a { color:blue; }
  #products li a:hover { cursor:pointer; }
  #products #text-box { background-color:rgba(255,255,255,1); }

  #why { color:white; }
  #why .content { padding:0 4vw; }
  #why .content.top p { font-family:sans-serif!important; font-size:1.5rem; line-height:1; font-weight:bold; text-shadow:var(--heading-shadow); }
  #why .content.top h2 { text-shadow:var(--heading-shadow); font-size:6rem; line-height:0.8; margin-bottom:20px; text-transform:uppercase; color:white; }
  #why .content.top h2 span { font-family:sans-serif!important; font-weight:bold; letter-spacing:0; display:inline-block; margin-bottom:.75em; font-size:2rem; }
  #why .content.top h2 {
    display:inline-block;
    margin-bottom:0; font-family:Sink, sans-serif!important; font-size:7.5rem; line-height:0.8; letter-spacing:.35rem; font-weight:normal!important; margin-bottom:20px; text-transform:uppercase;
    transform: scaleX(1.25);
    transform-origin: left center;
    letter-spacing:.01em;
  }
  #why .content.middle p { font-family:sans-serif!important; margin-top:0; margin-left:2em; font-size:1rem; line-height:1; }
  #why .content.bottom { margin-top:4vw; }
  #why .content-column { padding:0 4vw; width:50%; }
  #why .text-box { background-color:white; }
  #why .text-box::before { content:none; display:none; }

  #warranty { color:white; }
  #warranty .content { padding:0 4vw; }
  #warranty .content.top p { font-family:sans-serif!important; font-size:1.5rem; line-height:1; font-weight:bold; text-shadow:var(--heading-shadow); }
  #warranty .content.top h2 { text-shadow:var(--heading-shadow); font-size:6rem; line-height:0.8; margin-bottom:20px; text-transform:uppercase; color:white; }
  #warranty .content.top h2 span { font-family:sans-serif!important; font-weight:bold; letter-spacing:0; display:inline-block; margin-bottom:.75em; font-size:2rem; }
  #warranty .content.top h2 {
    display:inline-block;
    margin-bottom:0; font-family:Sink, sans-serif!important; font-size:7.5rem; line-height:0.8; letter-spacing:.35rem; font-weight:normal!important; margin-bottom:20px; text-transform:uppercase;
    transform: scaleX(1.25);
    transform-origin: left center;
    letter-spacing:.01em;
  }
  #warranty .content.middle p { font-family:sans-serif!important; margin-top:0; margin-left:2em; font-size:1rem; line-height:1; }
  #warranty .content.bottom { margin-top:4vw; }
  #warranty .content-column { padding:0 4vw; width:50%; }
  #warranty .text-box { background-color:white; }
  #warranty .text-box::before { content:none; display:none; }
  #warranty ul { list-style:disc; padding-left:1em; }
  #warranty .content-wide { padding:2vw 8vw; }

  #footer-page #av_section_1 { display:none; }
  #freshwater-footer { background-color:var(--color-blue); }
  #freshwater-footer .content { align-items:center; }
  #freshwater-footer .content-column { width:10%; }
  #freshwater-footer .content-column:first-of-type { width:30%; }
  #freshwater-footer .content-column:last-of-type { width:60%; }

  #icons-roi { background-color:var(--color-blue); }

/* SANITY */

  /*#hero { display:none; }*/
  /*#intro { display:none; }*/
  /*#products { display:none; }*/
  /*#solutions { display:none; }*/
  /*#why { display:none; }*/
  /*#message { display:none; }*/
  /*#freshwater-footer { display:none; }*/

  @media (max-width:767px) {

    h1 { font-size:15vw; }

    section.stackable { background-size:200vw; background-position:top right; }
    section.stackable .background { height:80vw; }
    section.stackable .background img { mask-image: linear-gradient(to bottom, #000 0, #000 70vw, transparent 100%); }
    section.stackable .content { height:150vw; height:unset; flex-direction:column; }
    section.stackable .content .content-column.big { order:2; padding-left:6vw; padding-right:6vw; width:100%; }
    section.stackable .content .content-column.small { order:1; width:100%; height:50vw; }

    #hero { height:100vh; height:unset; }
    #hero p { font-size:7vw; }
    #hero .content { padding:0; flex-direction:column; }
    #hero .content .content-column.big { /*margin-top:8rem;*/ padding:12vw 8vw; padding-bottom:0; width:100%; }
    #hero .content .content-column.small { padding:8vw; padding-top:0; width:100%; }

    .quick-quote .hsfc-Renderer .hsfc-Step__Content > .hsfc-Row:nth-of-type(2) { gap:0; }

    #products .background { width:200vw; height:80vw; }

    #solutions .text-box { background-color: rgba(255, 255, 255, 0.75); }
    #solutions .text-box::before { content:''; display:unset; }
    #solutions .text-box h2 { font-family:sans-serif!important; font-size: 1.5rem; color:var(--color-blue); }
    #solutions .text-box p { color:black; }

    #why .content { padding-top:6vw; }
    #why .content.top h2 { font-size:15vw; }
    #why .content.middle { flex-direction:column; }
    #why .content.bottom { flex-direction:column; }
    #why .content-column { width:100%; }
    #why .text-box { margin-top:8vw; padding:2rem; }

    #warranty .content { padding-top:6vw; }
    #warranty .content.top h2 { font-size:15vw; }
    #warranty .content.middle { flex-direction:column; }
    #warranty .content.bottom { flex-direction:column; }
    #warranty .content-column { width:100%; }
    #warranty .text-box { margin-top:8vw; padding:2rem; }

    #message { padding:0 8vw; }
    #message h2 { font-size:2rem; }
    #message h2 br { display:none; }

    #freshwater-footer .quick-quote { zoom:unset; }
    #freshwater-footer .hsfc-Renderer .hsfc-Step__Content  {
      /*display: grid; grid-template-columns: 1fr 1.5fr; grid-auto-flow: row dense !important; column-gap: 3rem; row-gap: 1rem;*/
      display:unset;
    }
    #freshwater-footer .content { flex-direction:column; }
    #freshwater-footer .content-column:first-of-type { padding:0; }
    #freshwater-footer .content-column:last-of-type { margin-top:3vw; padding:0; width:80%; }
    #freshwater-footer .quick-quote .hsfc-Renderer .hsfc-CheckboxField { margin-top:4vw; margin-bottom:4vw; }

  }
