/* Theme base styles */

/* Tools
Any animations, or functions used throughout the project.
Note: _macros.css needs to be imported into each stylesheet where macros are used and not included here
*/

/* Generic
This is where reset, normalize & box-sizing styles go.
*/

@layer reset {
  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }
}
@layer reset {
  /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

  /* Document
     ========================================================================== */

  /**
   * 1. Correct the line height in all browsers.
   * 2. Prevent adjustments of font size after orientation changes in iOS.
   */

  html {
    line-height: 1.15; /* 1 */
    -webkit-text-size-adjust: 100%; /* 2 */
  }

  /* Sections
     ========================================================================== */

  /**
   * Remove the margin in all browsers.
   */

  body {
    margin: 0;
  }

  /**
   * Correct the font size and margin on `h1` elements within `section` and
   * `article` contexts in Chrome, Firefox, and Safari.
   */

  h1 {
    font-size: 2em;
    margin: 0.67em 0;
  }

  /* Grouping content
     ========================================================================== */

  /**
   * Add the correct box sizing in Firefox.
   */

  hr {
    box-sizing: content-box;
    height: 0;
  }

  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

  pre {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  /* Text-level semantics
     ========================================================================== */

  /**
   * 1. Remove the bottom border in Chrome 57-
   * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari.
   */

  abbr[title] {
    border-bottom: none; /* 1 */
    text-decoration: underline; /* 2 */
    text-decoration: underline dotted; /* 2 */
  }

  /**
   * Add the correct font weight in Chrome, Edge, and Safari.
   */

  b,
  strong {
    font-weight: bolder;
  }

  /**
   * 1. Correct the inheritance and scaling of font size in all browsers.
   * 2. Correct the odd `em` font sizing in all browsers.
   */

  code,
  kbd,
  samp {
    font-family: monospace, monospace; /* 1 */
    font-size: 1em; /* 2 */
  }

  /**
   * Add the correct font size in all browsers.
   */

  small {
    font-size: 80%;
  }

  /**
   * Prevent `sub` and `sup` elements from affecting the line height in
   * all browsers.
   */

  sub,
  sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
  }

  sub {
    bottom: -0.25em;
  }

  sup {
    top: -0.5em;
  }

  /* Forms
     ========================================================================== */

  /**
   * 1. Change the font styles in all browsers.
   * 2. Remove the margin in Firefox and Safari.
   */

  button,
  input,
  optgroup,
  select,
  textarea {
    font-family: inherit; /* 1 */
    font-size: 100%; /* 1 */
    line-height: 1.15; /* 1 */
    margin: 0; /* 2 */
  }

  /**
   * Remove the inheritance of text transform in Edge and Firefox.
   * 1. Remove the inheritance of text transform in Firefox.
   */

  button,
  select { /* 1 */
    text-transform: none;
  }

  /**
   * Correct the inability to style clickable types in iOS and Safari.
   */

  button,
  [type="button"],
  [type="reset"],
  [type="submit"] {
    -webkit-appearance: button;
  }

  /**
   * Remove the inner border and padding in Firefox.
   */

  button::-moz-focus-inner,
  [type="button"]::-moz-focus-inner,
  [type="reset"]::-moz-focus-inner,
  [type="submit"]::-moz-focus-inner {
    border-style: none;
    padding: 0;
  }

  /**
   * Restore the focus styles unset by the previous rule.
   */

  button:-moz-focusring,
  [type="button"]:-moz-focusring,
  [type="reset"]:-moz-focusring,
  [type="submit"]:-moz-focusring {
    outline: 1px dotted ButtonText;
  }

  /**
   * Correct the padding in Firefox.
   */

  fieldset {
    padding: 0.35em 0.75em 0.625em;
  }

  /**
   * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers.
   */

  legend {
    padding: 0;
  }

  /**
   * Add the correct vertical alignment in Chrome, Firefox, and Opera.
   */

  progress {
    vertical-align: baseline;
  }

  /**
   * Correct the cursor style of increment and decrement buttons in Chrome.
   */

  [type="number"]::-webkit-inner-spin-button,
  [type="number"]::-webkit-outer-spin-button {
    height: auto;
  }

  /**
   * 1. Correct the odd appearance in Chrome and Safari.
   * 2. Correct the outline style in Safari.
   */

  [type="search"] {
    -webkit-appearance: textfield; /* 1 */
    outline-offset: -2px; /* 2 */
  }

  /**
   * Remove the inner padding in Chrome and Safari on macOS.
   */

  [type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
  }

  /**
   * 1. Correct the inability to style clickable types in iOS and Safari.
   * 2. Change font properties to `inherit` in Safari.
   */

  ::-webkit-file-upload-button {
    -webkit-appearance: button; /* 1 */
    font: inherit; /* 2 */
  }

  /* Interactive
     ========================================================================== */

  /*
   * Add the correct display in Edge and Firefox.
   */

  details {
    display: block;
  }

  /*
   * Add the correct display in all browsers.
   */

  summary {
    display: list-item;
  }
}
@layer theme {
  :root {
    --sp-rem-base: 0.0625rem;
    --sp-layout-spacing: 1rem;
    --sp-content-spacing: 1rem;
    --sp-vertical-spacing: calc(var(--sp-layout-spacing) * 4);

    --sp-transition-speed-fast: 40ms;
    --sp-transition-speed-normal: 80ms;
    --sp-transition-speed-slow: 120ms;

    --sp-body-font-color: #000;
    --sp-body-font-family: sans-serif;
    --sp-body-font-size: calc(16 * var(--sp-rem-base));

    --sp-border-radius-normal: calc(6 * var(--sp-rem-base));

    --sp-max-content-width: 1240px;

    --sp-dnd-section-padding: var(--sp-vertical-spacing) var(--sp-layout-spacing);

    --sp-anchor-font-color: #0270E0;
    --sp-anchor-font-color-hover: #0270E0;
    --sp-anchor-font-color-active: #0270E0;
    --sp-anchor-font-family: inherit;
    --sp-anchor-font-weight: inherit;
    --sp-anchor-font-style: inherit;
    --sp-anchor-text-decoration: underline;

    --sp-h1-font-color: inherit;
    --sp-h1-font-family: inherit;
    --sp-h1-font-size: 3.125rem;
    --sp-h1-font-weight: 700;
    --sp-h1-font-style: inherit;
    --sp-h1-text-decoration: inherit;
    --sp-h1-text-transform: inherit;

    --sp-h2-font-color: inherit;
    --sp-h2-font-family: inherit;
    --sp-h2-font-size: 2.375rem;
    --sp-h2-font-weight: 700;
    --sp-h2-font-style: inherit;
    --sp-h2-text-decoration: inherit;
    --sp-h2-text-transform: inherit;

    --sp-h3-font-color: inherit;
    --sp-h3-font-family: inherit;
    --sp-h3-font-size: 1.875rem;
    --sp-h3-font-weight: 700;
    --sp-h3-font-style: inherit;
    --sp-h3-text-decoration: inherit;
    --sp-h3-text-transform: inherit;

    --sp-h4-font-color: inherit;
    --sp-h4-font-family: inherit;
    --sp-h4-font-size: 1.5rem;
    --sp-h4-font-weight: 400;
    --sp-h4-font-style: inherit;
    --sp-h4-text-decoration: inherit;
    --sp-h4-text-transform: inherit;

    --sp-h5-font-color: inherit;
    --sp-h5-font-family: inherit;
    --sp-h5-font-size: 1rem;
    --sp-h5-font-weight: 400;
    --sp-h5-font-style: inherit;
    --sp-h5-text-decoration: inherit;
    --sp-h5-text-transform: inherit;

    --sp-h6-font-color: inherit;
    --sp-h6-font-family: inherit;
    --sp-h6-font-size: 0.875rem;
    --sp-h6-font-weight: 400;
    --sp-h6-font-style: inherit;
    --sp-h6-text-decoration: inherit;
    --sp-h6-text-transform: inherit;

    --sp-blockquote-border-color: #000;

    --sp-button-border: calc(1 * var(--sp-rem-base)) solid #000;
    --sp-button-border-hover: var(--sp-button-border);
    --sp-button-border-active: var(--sp-button-border-hover);
    --sp-button-padding: 1em;
    --sp-button-background-color: #000;
    --sp-button-background-color-hover: #222;
    --sp-button-background-color-active: var(--sp-button-background-color-hover);
    --sp-button-border-radius: 0;
    --sp-button-border-radius-hover: var(--sp-button-border-radius);
    --sp-button-font-color: #fff;
    --sp-button-font-color-hover: var(--sp-button-font-color);
    --sp-button-font-family: sans-serif;
    --sp-button-font-size: inherit;
    --sp-button-font-weight: inherit;
    --sp-button-font-style: inherit;
    --sp-button-text-decoration: inherit;
    --sp-button-text-decoration-hover: var(--sp-button-text-decoration);
    --sp-button-text-transform: inherit;
    --sp-button-letter-spacing: inherit;

    --sp-form-font-color: inherit;
    --sp-form-font-family: inherit;
    --sp-form-font-size: inherit;
    --sp-form-input-padding: 0.7em;
    --sp-form-border-top: 0;
    --sp-form-border-right: 0;
    --sp-form-border-bottom: 0;
    --sp-form-border-left: 0;
    --sp-form-border-top-left-radius: 0;
    --sp-form-border-top-right-radius: 0;
    --sp-form-border-bottom-left-radius: 0;
    --sp-form-border-bottom-right-radius: 0;
    --sp-form-background-color: transparent;
    --sp-form-padding: 0;

    --sp-form-title-border-top: 0;
    --sp-form-title-border-right: 0;
    --sp-form-title-border-bottom: 0;
    --sp-form-title-border-left: 0;
    --sp-form-title-border-top-left-radius: 0;
    --sp-form-title-border-top-right-radius: 0;
    --sp-form-title-border-bottom-left-radius: 0;
    --sp-form-title-border-bottom-right-radius: 0;
    --sp-form-title-background-color: transparent;
    --sp-form-title-padding: 0 0 var(--sp-layout-spacing);
    --sp-form-title-font-color: inherit;
    --sp-form-title-font-family: inherit;
    --sp-form-title-font-size: 1.5em;
    --sp-form-title-font-weight: 700;
    --sp-form-title-font-style: inherit;
    --sp-form-title-text-decoration: inherit;

    --sp-form-label-font-color: inherit;

    --sp-form-legend-font-color: inherit;

    --sp-form-input-border: 0.0625rem solid #000;
    --sp-form-input-border-radius: 0;
    --sp-form-input-background-color: #fff;
    --sp-form-input-font-color: #000;
    --sp-form-input-placeholder-font-color: var(--sp-form-input-font-color);
    --sp-form-input-date-picker-primary-color: var(--sp-form-input-font-color);

    --sp-form-button-border: 0.0625rem solid #000;
    --sp-form-button-border-hover: var(--sp-form-button-border);
    --sp-form-button-border-active: var(--sp-form-button-border-hover);
    --sp-form-button-border-radius: 0;
    --sp-form-button-padding: 1em;
    --sp-form-button-font-color: #fff;
    --sp-form-button-font-color-hover: var(--sp-form-button-font-color);
    --sp-form-button-font-family: sans-serif;
    --sp-form-button-font-size: inherit;
    --sp-form-button-font-weight: inherit;
    --sp-form-button-font-style: inherit;
    --sp-form-button-text-decoration: inherit;
    --sp-form-button-text-transform: inherit;
    --sp-form-button-letter-spacing: inherit;
    --sp-form-button-background-color: #000;
    --sp-form-button-background-color-hover: #222;
    --sp-form-button-background-color-active: var(--sp-form-button-background-color-hover);

    --sp-table-border: 0.0625rem solid #000;
    --sp-table-padding: 1em;
    --sp-table-background-color: #fff;
    --sp-table-font-color: #000;
    --sp-table-header-background-color: var(--sp-table-background-color);
    --sp-table-header-font-color: var(--sp-table-font-color);
    --sp-table-footer-background-color: var(--sp-table-background-color);
    --sp-table-footer-font-color: var(--sp-table-font-color);

    --sp-header-background-color: #fff;
    --sp-header-font-family: sans-serif;
    --sp-header-font-color: #000;
    --sp-header-font-color-hover: #222;
    --sp-header-font-color-active: var(--sp-header-font-color-hover);

    --sp-header-dropdown-border-color: #000;
    --sp-header-dropdown-border: 0.0625rem solid var(--sp-header-dropdown-border-color);
    --sp-header-dropdown-background-color: #fff;
    --sp-header-dropdown-background-color-hover: var(--sp-header-background-color);

    --sp-footer-background-color: #fff;
    --sp-footer-font-color: #000;
  }
}

/* Objects
Non-cosmetic design patterns including grid and layout classes)
*/



@layer theme {
  /* CSS variables */

  :root {
    --column-gap: 2.13%;
    --column-width-multiplier: 8.333;
  }

  /* Mobile layout */

  .row-fluid {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
  }

  
    .row-fluid .span1,
    .row-fluid .span2,
    .row-fluid .span3,
    .row-fluid .span4,
    .row-fluid .span5,
    .row-fluid .span6,
    .row-fluid .span7,
    .row-fluid .span8,
    .row-fluid .span9,
    .row-fluid .span10,
    .row-fluid .span11,
    .row-fluid .span12{
    min-height: 1px;
    width: 100%;
  }

  /* Desktop layout */

  @media (min-width: 768px) {
    .row-fluid {
      flex-wrap: nowrap;
      justify-content: space-between;
    }

    
      .row-fluid .span1 {
        width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span2 {
        width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span3 {
        width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span4 {
        width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span5 {
        width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span6 {
        width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span7 {
        width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span8 {
        width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span9 {
        width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span10 {
        width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
      }
    
      .row-fluid .span11 {
        width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
      }
    
  }
}
@layer theme {
  .symetric-section-grid {
    --sp-grid-section-column-count: 1;
    --sp-grid-section-gap: var(--sp-layout-spacing);

    &.no-gap {
      --sp-grid-section-gap: 0;
    }

    @media (min-width: 768px) {
      &.columns-2 {
        --sp-grid-section-column-count: 2;
      }

      &.columns-3 {
        --sp-grid-section-column-count: 3;
      }

      &.columns-4 {
        --sp-grid-section-column-count: 4;
      }
    }

    > .row-fluid > .dnd-column {
      display: grid;
      grid-template-columns: repeat(var(--sp-grid-section-column-count, 1), 1fr);
      gap: var(--sp-grid-section-gap);

      .hs-inline-edit & {
        position: relative;
        outline: 2px dotted rgba(0, 0, 0, 0.25);

        &::before {
          pointer-events: none;
          content: "GRID";
          position: absolute;
          top: -1.5em;
          left: 0;
          font-size: 0.8rem;
          opacity: 0.5;
        }
      }

      .hs-dnd-cursor__grabbing & {
        --sp-grid-section-column-count: 1;
      }
    }
  }
}
@layer theme {
  .content-wrapper {
    max-width: var(--sp-max-content-width);
    margin: 0 auto;
    padding: 0 var(--sp-layout-spacing);
  }

  @media screen and (min-width: 1380px) {
    .content-wrapper {
      padding: 0;
    }
  }

  .dnd-section > .row-fluid {
    max-width: var(--sp-max-content-width);
    margin: 0 auto;
  }

  .dnd-section .dnd-column {
    padding: 0 var(--sp-layout-spacing);
  }

  @media (max-width: 767px) {
    .dnd-section .dnd-column {
      padding: 0;
    }
  }

  .dnd-section,
  .content-wrapper--vertical-spacing {
    padding: var(--sp-dnd-section-padding);
  }
}

/* Elements
Base HTML elements are styled in this section (<body>, <h1>, <a>, <p>, <button> etc.)
*/

@layer theme {
  :root {
    font-size: 100%;
  }

  /* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */

  body {
    color: var(--sp-body-font-color);
    font-family: var(--sp-body-font-family);
    font-size: var(--sp-body-font-size);
    line-height: 1.4;
    overflow-wrap: break-word;
  }

  /* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this.  */

  html[lang^="ja"] body,
  html[lang^="zh"] body,
  html[lang^="ko"] body {
    line-break: strict;
    overflow-wrap: normal;
    word-break: break-all;
  }

  /* Paragraphs */

  p {
    margin: 0 0 var(--sp-content-spacing);
    color: inherit;
    font-family: inherit;
    font-size: inherit;
    font-weight: lighter;
  }

  /* Anchors */

  a,
  a:hover,
  a:focus,
  a:active {
    font-family: var(--sp-anchor-font-family);
    font-weight: var(--sp-anchor-font-weight);
    font-style: var(--sp-anchor-font-style);
    color: var(--sp-anchor-font-color);
    text-decoration: var(--sp-anchor-text-decoration);
    cursor: pointer;
  }

  a:hover,
  a:focus {
    color: var(--sp-anchor-font-color-hover);
  }

  a:active {
    color: var(--sp-anchor-font-color-active);
  }

  /* Headings */

  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    margin: 0 0 var(--sp-content-spacing);
  }

  h1,
  .h1 {
    color: var(--sp-h1-font-color);
    font-family: var(--sp-h1-font-family);
    font-size: clamp(2rem, 8vw, var(--sp-h1-font-size));
    font-weight: var(--sp-h1-font-weight);
    font-style: var(--sp-h1-font-style);
    text-decoration: var(--sp-h1-text-decoration);
    text-transform: var(--sp-h1-text-transform);
  }

  h2,
  .h2 {
    color: var(--sp-h2-font-color);
    font-family: var(--sp-h2-font-family);
    font-size: clamp(2rem, 8vw, var(--sp-h2-font-size));
    font-weight: var(--sp-h2-font-weight);
    font-style: var(--sp-h2-font-style);
    text-decoration: var(--sp-h2-text-decoration);
    text-transform: var(--sp-h2-text-transform);
  }

  h3,
  .h3 {
    color: var(--sp-h3-font-color);
    font-family: var(--sp-h3-font-family);
    font-size: clamp(1.875rem, 10vw, var(--sp-h3-font-size));
    font-weight: var(--sp-h3-font-weight);
    font-style: var(--sp-h3-font-style);
    text-decoration: var(--sp-h3-text-decoration);
    text-transform: var(--sp-h3-text-transform);
  }

  h4,
  .h4 {
    color: var(--sp-h4-font-color);
    font-family: var(--sp-h4-font-family);
    font-size: clamp(1.5rem, 8vw, var(--sp-h4-font-size));
    font-weight: var(--sp-h4-font-weight);
    font-style: var(--sp-h4-font-style);
    text-decoration: var(--sp-h4-text-decoration);
    text-transform: var(--sp-h4-text-transform);
  }

  h5,
  .h5 {
    color: var(--sp-h5-font-color);
    font-family: var(--sp-h5-font-family);
    font-size: clamp(1rem, 6vw, var(--sp-h5-font-size));
    font-weight: var(--sp-h5-font-weight);
    font-style: var(--sp-h5-font-style);
    text-decoration: var(--sp-h5-text-decoration);
    text-transform: var(--sp-h5-text-transform);
  }

  h6,
  .h6 {
    color: var(--sp-h6-font-color);
    font-family: var(--sp-h6-font-family);
    font-size: clamp(0.875rem, 4vw, var(--sp-h6-font-size));
    font-weight: var(--sp-h6-font-weight);
    font-style: var(--sp-h6-font-style);
    text-decoration: var(--sp-h6-text-decoration);
    text-transform: var(--sp-h6-text-transform);
  }

  /* Lists */

  ul,
  ol {
    margin: 0 0 var(--sp-content-spacing);
  }

  ul ul,
  ol ul,
  ul ol,
  ol ol {
    margin: 0;
  }

  ul.no-list {
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  /* Code blocks */

  pre {
    overflow: auto;
  }

  code {
    vertical-align: bottom;
  }

  /* Blockquotes */

  blockquote {
    border-left: calc(2 * var(--sp-rem-base)) solid var(--sp-blockquote-border-color);
    margin: 0 0 var(--sp-content-spacing);
    padding-left: calc(var(--sp-content-spacing) * 0.7);
  }

  /* Horizontal rules */

  hr {
    border: none;
    border-bottom: calc(1 * var(--sp-rem-base)) solid #cccccc;
  }

  /* Image alt text */

  img,
  svg {
    max-width: 100%;
    height: auto;
    font-size: calc(14 * var(--sp-rem-base));
    word-break: normal;
  }

  h1, 
  .h1, 
  h2, 
  .h2, 
  h3, 
  .h3, 
  h4, 
  .h4, 
  h5, 
  .h5, 
  h6, 
  .h6, 
  p {
    &.after-underline {
      &::after {
        display: block;
        content: '';
        width: calc(150 * var(--sp-rem-base));
        border-bottom: calc(9 * var(--sp-rem-base)) solid var(--sp-color-secondary);
        margin: calc(4 * var(--sp-rem-base)) auto;
      }
    }
  }


}
@layer theme {
  button,
  .button,
  .hs-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all var(--sp-transition-speed-normal) ease-out;
    white-space: normal;
  }

  button,
  .button,
  .hs-button,
  .hs-blog-post-listing__post-button {
    border: var(--sp-button-border);
    padding: var(--sp-button-padding);
    background-color: var(--sp-button-background-color);
    border-radius: var(--sp-button-border-radius);
    color: var(--sp-button-font-color);
    font-family: var(--sp-button-font-family);
    font-size: var(--sp-button-font-size);
    font-weight: var(--sp-button-font-weight);
    font-style: var(--sp-button-font-style);
    text-decoration: var(--sp-button-text-decoration);
    text-transform: var(--sp-button-text-transform);
    letter-spacing: var(--sp-button-letter-spacing);

    &.button-secondary {
      --sp-button-background-color: var(--sp-color-secondary);
      --sp-button-background-color-hover: var(--sp-color-primary);
      --sp-button-background-color-active: var(--sp-color-primary);
      --sp-button-border: 1px solid var(--sp-color-secondary);
      --sp-button-border-hover: 1px solid var(--sp-color-primary);
      --sp-button-border-active: 1px solid var(--sp-color-primary);
      --sp-button-font-color-hover: var(--sp-button-font-color);
    }
  }

  button:hover,
  button:focus,
  .button:hover,
  .button:focus,
  .hs-button:hover,
  .hs-button:focus,
  .hs-blog-post-listing__post-button:hover,
  .hs-blog-post-listing__post-button:focus {
    border: var(--sp-button-border-hover);
    color: var(--sp-button-font-color-hover);
    font-family: var(--sp-button-font-family);
    background-color: var(--sp-button-background-color-hover);
    border-radius: var(--sp-button-border-radius-hover); 
    text-decoration: var(--sp-button-text-decoration-hover);
  }

  button:active,
  .button:active,
  .hs-button:active,
  .hs-blog-post-listing__post-button:active {
    background-color: var(--sp-button-background-color-active);
    border: var(--sp-button-border-active);
  }

  button:disabled,
  .button:disabled,
  .hs-button:disabled {
    opacity: 0.8;
    cursor: not-allowed;
  }

  /* No button */

  .no-button,
  .no-button:hover,
  .no-button:focus,
  .no-button:active {
    background: none;
    border: none;
    border-radius: 0;
    color: initial;
    font-family: inherit;
    font-size: inherit;
    font-style: inherit;
    font-weight: inherit;
    letter-spacing: inherit;
    line-height: inherit;
    margin-bottom: 0;
    padding: 0;
    text-align: left;
    text-decoration: none;
    transition: none;
  }
}
@layer theme {
  form,
  .submitted-message {
    color: var(--sp-form-font-color);
    font-family: var(--sp-form-font-family);
    font-size: var(--sp-form-font-size);
    border-top: var(--sp-form-border-top);
    border-right: var(--sp-form-border-right);
    border-bottom: var(--sp-form-border-bottom);
    border-left: var(--sp-form-border-left);
    border-radius: var(--sp-form-border-top-left-radius) var(--sp-form-border-top-right-radius) var(--sp-form-border-bottom-right-radius) var(--sp-form-border-bottom-left-radius);
    background-color: var(--sp-form-background-color);
    padding: var(--sp-form-padding);
  }

  /* Fields */

  .hs-form-field {
    margin-bottom: var(--sp-layout-spacing);
  }

  /* Labels */

  form label {
    display: block;
    margin-bottom: calc(var(--sp-content-spacing) * 0.35);
    color: var(--sp-form-label-font-color);
  }

  /* Help text */

  form legend {
    color: var(--sp-form-legend-font-color);
  }

  /* Form Title */
  .form-title {
    border-top: var(--sp-form-title-border-top);
    border-right: var(--sp-form-title-border-right);
    border-bottom: var(--sp-form-title-border-bottom);
    border-left: var(--sp-form-title-border-left);
    border-radius: var(--sp-form-title-border-top-left-radius) var(--sp-form-title-border-top-right-radius) var(--sp-form-title-border-bottom-right-radius) var(--sp-form-title-border-bottom-left-radius);
    background-color: var(--sp-form-title-background-color);
    padding: var(--sp-form-title-padding);
    color: var(--sp-form-title-font-color);
    font-family: var(--sp-form-title-font-family);
    font-size: var(--sp-form-title-font-size);
    font-weight: var(--sp-form-title-font-weight);
    font-style: var(--sp-form-title-font-style);
    text-decoration: var(--sp-form-title-text-decoration);
    margin-bottom: 0;
  }

  /* Inputs */

  form input[type=text],
  form input[type=search],
  form input[type=email],
  form input[type=password],
  form input[type=tel],
  form input[type=number],
  form input[type=file],
  form select,
  form textarea {
    display: inline-block;
    font-size: var(--sp-form-font-size);
    padding: var(--sp-form-input-padding);
    border: var(--sp-form-input-border);
    border-radius: var(--sp-form-input-border-radius);
    background-color: var(--sp-form-input-background-color);
    color: var(--sp-form-input-font-color);
    width: 100%;
  }

  ::-webkit-input-placeholder {
    color: var(--sp-form-input-placeholder-font-color);
  }

  ::-moz-placeholder {
    color: var(--sp-form-input-placeholder-font-color);
  }

  :-ms-input-placeholder {
    color: var(--sp-form-input-placeholder-font-color);
  }

  ::placeholder {
    color: var(--sp-form-input-placeholder-font-color);
  }

  .hs-fieldtype-date .input .hs-dateinput::before {
    color: var(--sp-form-input-placeholder-font-color);
  }

  form textarea {
    resize: vertical;
  }

  form fieldset {
    max-width: 100% !important;
  }

  /* Inputs - checkbox/radio */

  form .inputs-list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  form .inputs-list > li {
    display: block;
    margin: calc(var(--sp-content-spacing) * 0.7) 0;
  }

  form .inputs-list input,
  form .inputs-list span {
    vertical-align: middle;
  }

  form input[type=checkbox],
  form input[type=radio] {
    cursor: pointer;
    margin-bottom: calc(var(--sp-content-spacing) * 0.35);
  }

  /* Inputs - date picker */

  .hs-dateinput {
    position: relative;
  }

  .hs-dateinput::before {
    content:'\01F4C5';
    position: absolute;
    right: 10%;
    top: 50%;
    transform: translateY(-50%);
  }

  .fn-date-picker .pika-table thead th {
    color: #FFF;
  }

  .fn-date-picker td.is-selected .pika-button {
    background: var(--sp-form-input-date-picker-primary-color);
    border-radius: 0;
    box-shadow: none;
  }

  .fn-date-picker td .pika-button:hover,
  .fn-date-picker td .pika-button:focus {
    background-color: var(--sp-form-input-date-picker-primary-color) !important;
    border-radius: 0 !important;
    color: #FFF;
  }

  .fn-date-picker td.is-today .pika-button {
    color: var(--sp-form-input-date-picker-primary-color);
  }

  /* Inputs - file picker */

  form input[type=file] {
    background-color: transparent;
    border: initial;
    padding: initial;
  }

  /* Headings and text */

  form .hs-richtext,
  form .hs-richtext p {
    margin: 0 0 var(--sp-content-spacing);
  }

  form .hs-richtext img {
    max-width: 100% !important;
  }

  /* GDPR */

  .legal-consent-container .hs-form-booleancheckbox-display > span,
  .legal-consent-container .hs-form-booleancheckbox-display > span p {
    margin-left: var(--sp-content-spacing) !important;
  }

  /* Validation */

  .hs-form-required {
    color: #EF6B51;
  }

  .hs-input.invalid.error {
    border-color: #EF6B51;
  }

  .hs-error-msg {
    color: #EF6B51;
    margin-top: calc(var(--sp-content-spacing) * 0.35);
  }

  /* Submit button */

  form input[type=submit],
  form .hs-button {
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    transition: all var(--sp-transition-speed-normal) ease-out;
    white-space: normal;
    border: var(--sp-form-button-border);
    border-radius: var(--sp-form-button-border-radius);
    padding: var(--sp-form-button-padding);
    color: var(--sp-form-button-font-color);
    font-family: var(--sp-form-button-font-family);
    font-size: var(--sp-form-button-font-size);
    font-weight: var(--sp-form-button-font-weight);
    font-style: var(--sp-form-button-font-style);
    text-decoration: var(--sp-form-button-text-decoration);
    text-transform: var(--sp-form-button-text-transform);
    letter-spacing: var(--sp-form-button-letter-spacing);
    background-color: var(--sp-form-button-background-color);
  }

  form input[type=submit]:hover,
  form input[type=submit]:focus,
  form .hs-button:hover,
  form .hs-button:focus {
    background-color: var(--sp-form-button-background-color-hover);
    color: var(--sp-form-button-font-color-hover);
    border: var(--sp-form-button-border-hover);
  }

  form input[type=submit]:active,
  form .hs-button:active {
    background-color: var(--sp-form-button-background-color-active);
    border: var(--sp-form-button-border-active);
  }

  /* Captcha */

  .grecaptcha-badge {
    margin: 0 auto;
  }

  form.hs-form fieldset,
  form.hs-form fieldset.form-columns-1 .hs-input {
      max-width: 100%;
      width: 100%;
  }

  
    /* Search button input field and suggestions */
    .body-container-wrapper .hs-search-field__button {
      padding: calc(15 * var(--sp-rem-base));
    }

    .body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
      margin-left: 0.5em;
      margin-bottom: 0;
    }

    .body-container-wrapper .hs-search-field__button svg {
      height: calc(15 * var(--sp-rem-base));
      fill: #fff;
    }

    .body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
      padding: calc(10 * var(--sp-rem-base));
    }

    .body-container-wrapper .hs-search-field__suggestions li a {
      color: #494A52;
      padding: calc(var(--sp-content-spacing) * 0.35) calc(var(--sp-content-spacing) * 0.7);
      text-decoration: none;
      transition: background-color var(--sp-transition-speed-normal);
    }
  
}
@layer theme {
  /* Table */

  table {
    border-collapse: collapse;
    margin-bottom: var(--sp-content-spacing);
    overflow-wrap: break-word;
    border: var(--sp-table-border);
    background-color: var(--sp-table-background-color);
  }

  /* Table cells */

  td,
  th {
    vertical-align: top;
    border: var(--sp-table-border);
    padding: var(--sp-table-padding);
    color: var(--sp-table-font-color);
  }

  /* Table header */

  thead th {
    vertical-align: bottom;
    background-color: var(--sp-table-header-background-color);
    color: var(--sp-table-header-font-color);
  }

  /* Table footer */

  tfoot td {
    background-color: var(--sp-table-footer-background-color);
    color: var(--sp-table-footer-font-color);
  }
}

/* Components
Specific pieces of UI that are stylized. Typically used for global partial styling
*/

@layer theme {
  .footer {
    background-color: var(--sp-footer-background-color);
  }

  /* Footer content */

  .footer p,
  .footer h1,
  .footer h2,
  .footer h3,
  .footer h4,
  .footer h5,
  .footer h6,
  .footer label,
  .footer span,
  .footer li,
  .footer img {
    color: var(--sp-footer-font-color);
  }
}
@layer module {
  /* Menu and simple menu */

  .hs-menu-wrapper ul {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding-left: 0;
  }

  /* Horizontal menu */

  .hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper {
    flex-direction: column;
  }

  @media (max-width: 767px) {
    .hs-menu-wrapper.hs-menu-flow-horizontal ul {
      flex-direction: column;
    }
  }

  /* Vertical menu */

  .hs-menu-wrapper.hs-menu-flow-vertical ul {
    flex-direction: column;
  }

  /* Flyouts */

  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul {
    display: inline-flex;
  }

  @media (max-width: 767px) {
    .hs-menu-wrapper.hs-menu-flow-vertical ul {
      display: flex;
    }
  }

  .hs-menu-wrapper.flyouts .hs-item-has-children {
    position: relative;
  }

  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
    left: -99999px;
    opacity: 0;
    position: absolute;
  }

  .hs-menu-wrapper.flyouts .hs-menu-children-wrapper a {
    display: block;
    white-space: nowrap;
  }

  .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 0;
    opacity: 1;
    top: 100%;
  }

  .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
    left: 100%;
    opacity: 1;
    top: 0;
  }

  @media (max-width: 767px) {
    .hs-menu-wrapper.flyouts .hs-menu-children-wrapper,
    .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper,
    .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper {
      left: 0;
      opacity: 1;
      position: relative;
      top: auto;
    }
  }

  /* CTA, logo, and rich text images */

  .hs_cos_wrapper_type_cta img,
  .hs_cos_wrapper_type_logo img,
  .hs_cos_wrapper_type_rich_text img {
    height: auto;
    max-width: 100%;
  }
}

/* Utilities
Helper classes with ability to override anything that comes before it
*/

@layer utility {
  /* For content that needs to be visually hidden but stay visible for screenreaders */

  .show-for-sr {
    border: 0 !important;
    clip: rect(0, 0, 0, 0) !important;
    height: 1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    white-space: nowrap !important;
    width: 1px !important;
  }

  @media (max-width: 767px) {
    .show-for-sr--mobile {
      border: 0 !important;
      clip: rect(0, 0, 0, 0) !important;
      height: 1px !important;
      overflow: hidden !important;
      padding: 0 !important;
      position: absolute !important;
      white-space: nowrap !important;
      width: 1px !important;
    }
  }
}