/* 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
*/
/*****************************************/
/* These Definitions are Root CSS Variables / Custom Fields for all other assets to leverage theme variables and settings. 
* To learn how to use css custom variables visit https://www.sitepoint.com/how-to-use-variables-in-css/    */
/*****************************************/

:root {
  --primary_color     :#052465 ;
  --secondary_color   :#90abc5 ;
  --tertiary_color    :#e03642 ;
  --accent_color      :#e9803d ;
  --dark_color        :#0E0E1D ;
  --light_color       :#FEF8F1 ; 
  --black_color        :#000000 ;
  --white_color       :#FFFFFF ; 
  --transparent_color :transparent;

  --primary_color-rgb     :5, 36, 101 ;
  --secondary_color-rgb   :144, 171, 197 ;
  --tertiary_color-rgb    :224, 54, 66 ;
  --accent_color-rgb      :233, 128, 61 ;
  --dark_color-rgb       :14, 14, 29 ;
  --light_color-rgb      :254, 248, 241 ;
  --black_color-rgb       :0, 0, 0 ;
  --white_color-rgb      :255, 255, 255 ;

  --primary_color-subtle       :#2d4c8d ;
  --secondary_color-subtle     :#b8d3ed ;
  --tertiary_color-subtle      :#ff5e6a ;
  --accent_color-subtle        :#ffa865 ;
  --dark_color-subtle         :#363645 ;
  --light_color-subtle        :#ffffff ;

  --primary_color-hover     :#90abc5 ;
  --secondary_color-hover   :#2d5f99 ;
  --tertiary_color-hover    :#331133 ;
  --accent_color-hover      :#8C2622 ;
  --dark_color-hover       :#14151E ;
  --light_color-hover      :#fff ;

  --text-color--dark            :#0E0E1D ;
  --text-color--light           :#FEF8F1 ;
  --hyperlink_color             :#e9803d;
  --hyperlink_color-subtle      :#ffa865;

  --success_color    :#5C806E ;
  --warning_color    :#E6DC24 ;
  --error_color      :#E03131 ;
  --focus_color      :#00B0B3 ;

  --success_color-rgb    :92, 128, 110 ;
  --warning_color-rgb   :230, 220, 36 ;
  --error_color-rgb   :224, 49, 49 ;
  --focus_color-rgb    :0, 176, 179 ;

  --base_font_size      :16px;
  --min_base_font_size  :14px;
  --base_font_size_value      :16;
  --min_base_font_size_value  :14;
  --site-container      :1140px;
  --site-container-num  :1140;
  --content-container   :px;
  --small-container     :px;
  --border-radius       :0px;
  --image-radius        :0px;
  --default_padding     :15px;
  
  --h1_size             :3rem ;
  --h2_size             :2.5rem ;
  --h3_size             :2rem ;
  --h4_size             :1.5rem ;
  --h5_size             :1.25rem ;
  --h6_size             :1rem ;
  --large_title_size    :4.5rem ;
  --medium_title_size   :3.25rem ;
  --small_title_size    :1rem ;
  

  --gradient-bg--1: linear-gradient(to right, #052465, #90abc5);
  --gradient-bg--2: linear-gradient(to right, #FEF8F1, #FFFFFF);

  /* Menu Variables ---- needs set on theme settings */
  --menu-text-color: #0e0e1d;
  --menu-text-weight: normal;
  --menu-link-color: #0e0e1d;
  --menu-sub-text-title-weight: 600;
  --menu-sub-text-color: #FFFFFF;
  --menu-sub-text-weight: normal;
  --menu-dropdown-bg-color: #fff;
  --menu-feat-img-border-radius:0px;
  --header-cta-border-radius:2px;
  --header-cta-padding:16px 19px;
  --menu-font-color: #0e0e1d;
  --menu-font-sub-text-color: #0e0e1d;
  --menu-icon-color: pink;
  --menu-link-hover-bg-color: #fff;
  --menu-link-hover-color: #EAEBF1;
  --menu-submenu-bg-color: #fff;
  --menu-top-level-underline-color: #A72D29;


}





.ts__bg-primary_color     { background: var( --primary_color); }
.ts__bg-secondary_color   { background: var( --secondary_color); }
.ts__bg-tertiary_color    { background:var( --tertiary_color); }
.ts__bg-accent_color      { background:var( --accent_color) }
.ts__bg-light_color    { background:var( --light_color) }
.ts__bg-dark_color      { background:var( --dark_color) }

.ts__bg-primary_color-subtle       { background:#2d4c8d }
.ts__bg-secondary_color-subtle     { background:#b8d3ed }
.ts__bg-tertiary_color-subtle      { background:#ff5e6a }
.ts__bg-accent_color-subtle        { background:#ffa865 }

.ts__text--dark      { color:#0E0E1D }
.ts__text--light     { color:#FEF8F1 }

.ts__bg-system_success    { background:#5C806E }
.ts__bg-system_warning    { background:#E6DC24 }
.ts__bg-system_error      { background:#E03131 }
.ts__bg-system_focus      { background:#00B0B3 }

.button.ts__bg-accent_color:hover {background:var(--accent_color-subtle)}
/* Generic
This is where reset, normalize & box-sizing styles go.
*/

*, *:before, *:after {
  box-sizing: border-box;
}
/*! 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;
}

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



/* CSS variables */

:root {
  --column-gap: 2.33%;
  --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));
    }
  
}


.body-container .dnd-section {position:relative; } 
.dnd-section {
  padding: 72px 0px;
}

.dnd-section > .row-fluid {
  max-width: 1140px;
}


.content-wrapper {
  margin: 0 auto;
  padding: 0 1rem;
  max-width: var(--site-container)
}

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

.dnd-section > .row-fluid {
  margin: 0 auto;
}

.dnd-section .dnd-column {
  padding: 0 1rem;
}

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

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

html {
  color: #0e0e1d;font-size: 16px;font-family: Poppins, sans-serif;
  font-size: var(--base_font_size);
  /*font-size: calc([minimum size] + ([maximum size] - [minimum size]) * ((100vw - [minimum viewport width]) / ([maximum viewport width] - [minimum viewport width]))); */
  font-size: calc(var(--min_base_font_size) + (var(--base_font_size_value) - var(--min_base_font_size_value) ) * ((100vw - 320px) / (1024 - 320)));

}
@media screen and (max-width: 767px) {
  html {
    font-size: var(--min_base_font_size);
  }
}

@media screen and (min-width: 1024px) {
  html {
    font-size: var(--base_font_size);
  }
}

body {
  line-height: 1.75;
  font-weight: 400;
  overflow-wrap: break-word;
}

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

/* Paragraphs */

p {
  font-size: 1rem;
  margin: 0 0 1rem;
  font-weight: 400;
  line-height: 1.75;
}

/* Anchors */

a {
  cursor: pointer;
  color: var(--hyperlink_color);
}
a:hover {
  cursor: pointer;
  color: var(--hyperlink_color-subtle);
}

/* Headings */

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1rem;
  line-height: 1.25;
}
h1 { 
  font-size: 3rem;
  line-height: 3.5rem;
  color: #052465;font-size: 3rem;font-family: 'Bebas Neue'; 
}
h2 { 
  font-size: 2.5rem;
  line-height: 3rem;
  color: #052465;font-size: 2.5rem;font-family: 'Bebas Neue'; 
}
h3 { 
  font-size: 2rem;
  line-height: 2.5rem;
  color: #052465;font-size: 2rem;font-family: 'Bebas Neue'; 
}
h4 { 
  font-size: 1.5rem;
  line-height: 2rem;
  color: #052465;font-size: 1.5rem;font-family: 'Bebas Neue'; 
}
h5 { 
  font-size: 1.25rem;
  line-height: 1.75rem;
  color: #052465;font-size: 1.25rem;font-family: 'Bebas Neue'; 
}
h6 { 
  font-size: 1rem;
  line-height: 1.5rem;
  color: #052465;font-size: 1rem;font-family: 'Bebas Neue';
  margin: 0 0 1rem;
}

.large-title {
  font-size: 4.5rem;
  line-height: 5.125rem;
  color: #052465;font-size: 4.5rem;font-family: 'Bebas Neue';
}

.medium-title {
  font-size: 3.25rem;
  line-height: 3.875rem;
  color: #052465;font-size: 3.25rem;font-family: 'Bebas Neue';
}

.small-title {
  font-size: 1rem;
  line-height: 1.75rem;
  text-transform: uppercase;
  color: #052465;font-size: 1rem;font-family: 'Bebas Neue';
}

@media(max-width: 767px) {
  h1 { 
    font-size: 2.375rem;
    line-height: 2.875rem;
  }
  h2 { 
    font-size: 2.25rem;
    line-height: 2.625rem;
  }
  h3 { 
    font-size: 1.75rem;
    line-height: 2.25rem;
  }
  h4 { 
    font-size: 1.25rem;
    line-height: 1.875rem;
  }
  h5 { 
    font-size: 1.125rem;
    line-height: 1.75rem;
  }
  h6 { 
    font-size: 0.875rem;
    line-height: 1.5rem;
  }

  .large-title {
    font-size: 3.875rem;
    line-height: 4.5rem;
  }

  .medium-title {
    font-size: 2.75rem;
    line-height: 3.375rem;
  }

  .small-title {
    font-size: 0.875rem;
    line-height: 1.5rem;
  }
}



/* Lists */

ul,
ol {
  margin: 0 0 1rem;
  padding: 0 0 0 15px;
}

ol {
  padding: 0 0 0 18px
}

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

ul li,
ol li {
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.75;
}

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

/* Code blocks */

pre {
  overflow: auto;
}

code {
  vertical-align: bottom;
}

/* Blockquotes */

blockquote {
  font-size: 1.25rem;
  line-height: 2rem;
  padding-left: 24px;
  border-left: 3px solid #F3961F;
  font-style: italic;
  margin: 0;
}

/* Horizontal rules */

hr,
.underline-element {
  width: 53px;
  height: 4px;
  display: block;
  margin: 0 0 16px;
  border: none;
}

/* Image alt text */

img {
  font-size: 0.583rem;
  word-break: normal;
  max-width:100%;
  height:auto;
}

/* Icon list styles */

ul.icon-list {
  list-style: none;
  padding: 0;
}
ul.icon-list > li {
  display: flex;
  align-items: flex-start;
  margin: 0 0 1rem;
}
ul.icon-list > li:last-of-type {
  margin: 0;
}
ul.icon-list > li > i.fa {
  margin: 6px 8px 0 0;
  color: var(--tertiary_color);
}
button,
.button,
.hs-button {
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled,
.hs-button:disabled {
  background-color: #D0D0D0;
  border-color: #D0D0D0;
  color: #E6E6E6;
}

/* 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;
}
button,
.button,
.hs-button,
.hs-blog-post-listing__post-button {
  background-color: var(--primary_color);
  border-radius: 2px;
  color: var(--light_color);
  text-transform: none;
  text-decoration:none;
  font-weight:700;
  padding: 16px 27px;
  line-height: 1.2;
  font-size: 1.25rem;
  border: 0;
}

button > .ts__iconset,
.button > .ts__iconset,
.hs-button > .ts__iconset,
.hs-blog-post-listing__post-button > .ts__iconset {
  vertical-align: top;
  display: inline-block;
}
button > .ts__iconset > svg,
.button > .ts__iconset > svg,
.hs-button > .ts__iconset > svg,
.hs-blog-post-listing__post-button > .ts__iconset > svg {
  display: block;
}

button.btn_text,
.button.btn_text,
.hs-button.btn_text,
.hs-blog-post-listing__post-button.btn_text {
  font-size: 1.125rem;
  line-height: 1.78;
}
button.btn_text > .ts__iconset,
.button.btn_text > .ts__iconset,
.hs-button.btn_text > .ts__iconset,
.hs-blog-post-listing__post-button.btn_text > .ts__iconset {
  font-size: 20px;
}
button.btn_text > .ts__iconset > svg,
.button.btn_text > .ts__iconset > svg,
.hs-button.btn_text > .ts__iconset > svg,
.hs-blog-post-listing__post-button.btn_text > .ts__iconset > svg {
  vertical-align: middle;
}

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 {
  transform: translate(0,0.1rem);
  color: var(--light_color);
  background-color: var(--primary_color-subtle);
}

button:active,
.button:active,
.hs-button:active,
.hs-blog-post-listing__post-button:active {
  background-color: var(--primary_color);
  border-radius: 2px;
  color: var(--light_color);
  text-transform: none;
  text-decoration:none;
  font-weight:700;
  padding: 16px 27px;
}
.button:hover.ts__text--dark,.button.ts__text--dark {color: var(--dark_color);}
.button:hover.ts__text--light,.button.ts__text--light {color: var(--light_color);}

/* Fill Button */
.button.ts__btn-fill--primary_color {background-color: var(--primary_color);}
.button.ts__btn-fill--primary_color:hover {background-color: var(--primary_color-hover);}
.button.ts__btn-fill--secondary_color {background-color: var(--secondary_color);}
.button.ts__btn-fill--secondary_color:hover {background-color: var(--secondary_color-hover);}
.button.ts__btn-fill--tertiary_color {background-color: var(--tertiary_color);}
.button.ts__btn-fill--tertiary_color:hover {background-color: var(--tertiary_color-hover);}
.button.ts__btn-fill--accent_color {background-color: var(--accent_color);}
.button.ts__btn-fill--accent_color:hover {background-color: var(--accent_color-hover);}
.button.ts__btn-fill--dark_color {background-color: var(--dark_color);fill: var(--dark_color);}
.button.ts__btn-fill--dark_color:hover {background-color: var(--light_color);color:var(--dark_color);fill: var(--dark_color);}
.button.ts__btn-fill--light_color {background-color: var(--light_color);fill: var(--dark_color);}
.button.ts__btn-fill--light_color:hover {background-color: var(--dark_color);color:var(--light_color);fill: var(--light_color);}

/* Ghost Button */
.button.ts__btn-ghost--primary_color {border: var(--primary_color) solid 3px;background-color:transparent;color: var(--primary_color);}
.button.ts__btn-ghost--primary_color .ts__iconset svg{fill: var(--primary_color);}
.button.ts__btn-ghost--primary_color:hover {border-color: var(--primary_color);background-color: var(--primary_color);color: var(--light_color);}
.button.ts__btn-ghost--primary_color:hover .ts__iconset svg{fill: var(--light_color);}
.button.ts__btn-ghost--secondary_color {border: var(--secondary_color) solid 3px;background-color:transparent;color: var(--secondary_color);}
.button.ts__btn-ghost--secondary_color .ts__iconset svg{fill: var(--secondary_color);}
.button.ts__btn-ghost--secondary_color:hover {border-color: var(--secondary_color);background-color: var(--secondary_color);color: var(--light_color);}
.button.ts__btn-ghost--secondary_color:hover .ts__iconset svg{fill: var(--light_color);}
.button.ts__btn-ghost--tertiary_color {border: var(--tertiary_color) solid 3px;background-color:transparent;color: var(--tertiary_color);}
.button.ts__btn-ghost--tertiary_color .ts__iconset svg{fill: var(--tertiary_color);}
.button.ts__btn-ghost--tertiary_color:hover {border-color: var(--tertiary_color);background-color: var(--tertiary_color);color: var(--light_color);}
.button.ts__btn-ghost--tertiary_color:hover .ts__iconset svg{fill: var(--light_color);}
.button.ts__btn-ghost--accent_color {border: var(--accent_color) solid 3px;background-color:transparent;color: var(--accent_color);}
.button.ts__btn-ghost--accent_color .ts__iconset svg{fill: var(--accent_color);}
.button.ts__btn-ghost--accent_color:hover {border-color: var(--accent_color);background-color: var(--accent_color);color: var(--light_color);}
.button.ts__btn-ghost--accent_color:hover .ts__iconset svg{fill: var(--light_color);}
.button.ts__btn-ghost--light_color {border: var(--light_color) solid 3px;background-color:transparent;color: var(--light_color);}
.button.ts__btn-ghost--light_color .ts__iconset svg{fill: var(--light_color);}
.button.ts__btn-ghost--light_color:hover {border-color: var(--light_color);background-color: var(--light_color);color: var(--dark_color);}
.button.ts__btn-ghost--light_color:hover .ts__iconset svg{fill: var(--dark_color);}
.button.ts__btn-ghost--dark_color {border: var(--dark_color) solid 3px;background-color:transparent;color: var(--dark_color);}
.button.ts__btn-ghost--dark_color .ts__iconset svg{fill: var(--dark_color);}
.button.ts__btn-ghost--dark_color:hover {border-color: var(--dark_color);background-color: var(--dark_color);color: var(--light_color);}
.button.ts__btn-ghost--dark_color:hover .ts__iconset svg{fill: var(--light_color);}

/* Text Button */
.button.btn-text, 
.button.btn-text:hover,
.button.btn_text,
.button.btn_text:hover {border:0px transparent;padding:0px;}

.button.ts__btn-text--primary_color  {color: var(--primary_color);background-color:transparent; fill: var(--primary_color);}
.button.ts__btn-text--primary_color:hover {color: var(--primary_color-hover);background-color:transparent;fill: var(--primary_color-hover);}
.button.ts__btn-text--secondary_color {color: var(--secondary_color);background-color:transparent;fill: var(--secondary_color);}
.button.ts__btn-text--secondary_color:hover {color: var(--secondary_color-hover);background-color:transparent;fill: var(--secondary_color-hover);}
.button.ts__btn-text--tertiary_color {color: var(--tertiary_color);background-color:transparent;fill: var(--tertiary_color);}
.button.ts__btn-text--tertiary_color:hover {color: var(--tertiary_color-hover);background-color:transparent;fill: var(--tertiary_color-hover);}
.button.ts__btn-text--accent_color {color: var(--accent_color);background-color:transparent;fill: var(--accent_color);}
.button.ts__btn-text--accent_color:hover {color: var(--accent_color-hover);background-color:transparent;fill: var(--accent_color-hover);}
.button.ts__btn-text--light_color {color: var(--light_color);background-color:transparent;fill: var(--light_color);}
.button.ts__btn-text--light_color:hover {color: var(--light_color-hover);background-color:transparent;fill: var(--light_color-hover);}
.button.ts__btn-text--dark_color {color: var(--dark_color);background-color:transparent;fill: var(--dark_color);}
.button.ts__btn-text--dark_color:hover {color: var(--dark_color-hover);background-color:transparent;fill: var(--dark_color-hover);}
.button.ts__btn-text--custom {background-color:transparent;}
.button.ts__btn-text--custom:hover {background-color:transparent;}

.ts__iconset svg {
  height: 1.1rem;
  width: 1.1rem;
  line-height: 1.1rem;
  vertical-align: middle;
  transition: .15s linear all;
}
.ts__iconset i {
  transition: .15s linear all;
}

.button:hover .ts__iconset--left svg {transform: translate(-0.1rem,0);}
.button:hover .ts__iconset--right  svg {transform: translate(0.1rem,0);}

.button.ts__text--light .ts__iconset svg {fill: var(--light_color);}
.button.ts__text--dark .ts__iconset svg {fill: var(--dark_color);}
:root {
  --form_border_radius: var(--border-radius);
  --form_input_background: var(--light_color, white);
  --form_input_border:  1px solid var(--dark_color);;
  --form_input_color:var(--dark_color);
  --form_input_background__active: var(--light_color, white);
  --form_input_border__active: 2px solid var(--focus_color);
  --form_input_color__active:var(--dark_color);
  --form_input_background__error: var(--light_color, white);
  --form_input_border__error: 2px solid var(--error_color);
  --form_input_color__error:var(--error_color);
  --form_label_color:var(--dark_color);
  --form_legend_color:var(--dark_color);
  --form_error_background_color:rgba(var(--error_color-rgb),.1);
  --form_error_text_color:var(--error_color) ;

}

/* pink if --my-var and --my-background are not defined */
/* background-color: var(--my-var, var(--my-background, pink)); */

/* Fields */

.hs-form-field {
  margin-bottom: 1.4rem;
}

/* Labels */

form label {
  display: block;
  font-size: 1rem;
  margin-bottom: 0.35rem;
}

form label#hs-register-widget-checkbox-consent {
  flex: calc(100% - 23px) 1 1;
  margin: -6px 0 25px 10px;
  align-self: flex-start;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.5rem;
}

/* Form Title */
.form-title {
  margin-bottom: 0;
}

/* Help text */

form legend {
  font-size: 0.875rem;
}

/* 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: 0.875rem;
  padding: 0.7rem;
  width: 100%;
}

form textarea {
  resize: vertical;
}

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

:focus,:focus-visible  {
  outline-color:var(--focus_color)!important;
  outline-style: auto;
  outline-width: 2px;
}

form input#hs-register-widget-explicit-consent {
  line-height: normal;
  margin: 0 0 25px;
  flex: 13px 0 0;
  align-self: flex-start;
}

/* Inputs - select */
select:not(.disable-nice-select) {
  display: none !important;
}
.nice-select {
  float: none;
  height: auto;
  line-height: normal;
  background-color: var(--form_input_background);
  border: 1px solid var(--form_input_border);
  border-radius: var(--form_border_radius);
  color: var(--form_input_color);
  padding-left: 0;
}
.nice-select .current {
    font-size: .875rem;
    padding: .7rem;
    display: inline-block;
}
.nice-select:focus, 
.nice-select:hover {
  border-color: var(--form_input_border);
}
.nice-select:after {
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  border: none;
  content: "\f078";
  display: var(--fa-display,inline-block);
  font-family: var(--fa-style-family,"Font Awesome 6 Free");
  font-style: normal;
  font-variant: normal;
  font-weight: var(--fa-style,900);
  line-height: 1;
  text-rendering: auto;
  transform: translateY(-50%);
  right: 22px;
  transform-origin: 125% 100%;
}
.nice-select.open:after {
  transform: rotate(-180deg) translateY(-50%);
}
.nice-select .nice-select-dropdown {
  width: 100%;
  max-height: 210px;
  overflow-x: hidden;
  overflow-y: auto;
}
.nice-select .list {
  height: 100%;
  margin: 0;
  max-height: 100%;
  overflow: auto;
}
.nice-select .option {
  position: relative;
  padding-left: 40px;
  padding-right: 20px;
  text-wrap: wrap;
  padding-top: 10px;
  padding-bottom: 10px;
  line-height: 24px;
}
.nice-select .option:not(.disabled)::before {
  border: 2px solid var(--dark_color);
  border-radius: 50%;
  content: "";
  height: 16px;
  left: 16px;
  position: absolute;
  width: 16px;
  top: 13px;
}
.nice-select .option.focus, 
.nice-select .option.selected.focus {
  background: none;
  font-weight: normal;
}
.nice-select .option.selected::after {
  background: var(--dark_color);
  border-radius: 50%;
  content: "";
  height: 6px;
  left: 21px;
  position: absolute;
  top: 18px;
  width: 6px;
}


/* Inputs - checkbox/radio */

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

form .inputs-list > li {
  display: block;
  margin: 0.7rem 0;
}

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

form input[type=checkbox],
form input[type=radio] {
  cursor: pointer;
  margin-right: 0.35rem;
}
fieldset.form-columns-1 .hs-input {width:100%!important;}
/* 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 {
  border-radius: 0;
  box-shadow: none;
}

.fn-date-picker td .pika-button:hover,
.fn-date-picker td .pika-button:focus {
  border-radius: 0 !important;
  color: #FFF;
}

/* Inputs - file picker */

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

/* Headings and text */

form .hs-richtext,
form .hs-richtext p {
  font-size: 0.875rem;
  margin: 0 0 1.4rem;
}

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: 1rem !important;
}

/* Validation */

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

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

.hs-error-msg {
  color: var(--form_error_text_color);
  background:var(--form_error_background_color);
  margin-top: 0.35rem;
  padding: 0.15rem;
  border-radius:var(--border-radius);
  margin-right: 8px;
}

/* Submit button */

form input[type=submit],
form .hs-button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

/* Captcha */

.grecaptcha-badge {
  margin: 0 auto;
}


/* Search button input field and suggestions */
.lity .hs-search-field__button,
.body-container-wrapper .hs-search-field__button {
  padding: 15px;
}

.lity .hs-search-field__bar--button-inline .hs-search-field__button,
.body-container-wrapper .hs-search-field__bar--button-inline .hs-search-field__button {
  margin-left: 6px;
  margin-bottom: 0;
}

.lity .hs-search-field__button svg,
.body-container-wrapper .hs-search-field__button svg {
  height: 15px;
  fill: #fff;
}

.lity .hs-search-field__bar > form > .hs-search-field__input,
.body-container-wrapper .hs-search-field__bar > form > .hs-search-field__input {
  padding: 10px;
}

.lity .hs-search-field__suggestions li a,
.body-container-wrapper .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.5rem 0rem;
  margin: 0;
  text-decoration: none;
  transition: background-color 0.3s;
}


form,
.submitted-message {
  ;
  ;
  border-top-left-radius: ;
  border-top-right-radius: ;
  border-bottom-left-radius: ;
  border-bottom-right-radius: ;
  background-color: ;
  ;
}

/* Form title */

.form-title {
  ;
  ;
  ;
  border-top-left-radius: ;
  border-top-right-radius: ;
  border-bottom-left-radius: ;
  border-bottom-right-radius: ;
  font-size: ;
  color: ;
  background-color: ;
}


/* Labels */

form label {
  color: var(--form_label_color);
}

/* Help text */

form legend {
  color: var(--form_legend_color);
}

/* 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 .nice-select,
form textarea {
  border:var(--form_input_border);
  background-color: var(--form_input_background);
  color:  var(--form_input_color);
  border-radius:var(--form_border_radius);
}

/* Form placeholder text */

::-webkit-input-placeholder {
  color: var(--dark_color-subtle);
}

::-moz-placeholder {
  color: var(--dark_color-subtle);
}

:-ms-input-placeholder {
  color: var(--dark_color-subtle);
}

::placeholder {
  color: var(--dark_color-subtle);
}

/* Inputs - date picker */

.hs-fieldtype-date .input .hs-dateinput:before {
  color: var(--dark_color-subtle);
}

.fn-date-picker td.is-selected .pika-button {
  background: var(--primary_color);
}

.fn-date-picker td .pika-button:hover {
  background-color: var(--primary_color-subtle)!important;
}

.fn-date-picker td.is-today .pika-button {
  color: var(--primary_color);
}


/* Form column structure */

.hs-form fieldset {
  max-width: inherit!important
}

.hs-form fieldset.form-columns-1 .hs-form-field,.hs-form fieldset.form-columns-2 .hs-form-field,.hs-form fieldset.form-columns-3 .hs-form-field {
  width: 100%!important
}

.hs-form fieldset.form-columns-1 .hs-form-field .input,.hs-form fieldset.form-columns-2 .hs-form-field .input,.hs-form fieldset.form-columns-3 .hs-form-field .input {
  margin-right: 0!important
}

.hs-form fieldset.form-columns-1 .hs-form-field .hs-input:not([type=checkbox]):not([type=radio]),.hs-form fieldset.form-columns-2 .hs-form-field .hs-input:not([type=checkbox]):not([type=radio]),.hs-form fieldset.form-columns-3 .hs-form-field .hs-input:not([type=checkbox]):not([type=radio]) {
  width: 100%!important
}

fieldset.form-columns-1 input[type=checkbox].hs-input {
  width: auto !important;
}
.hs-form-booleancheckbox-display input[type=checkbox].hs-input {
  margin-top: 8px;
}

@media (min-width: 992px) {
  .hs-form fieldset.form-columns-1 .hs-form-field {
    width:100%!important
  }

  .hs-form fieldset.form-columns-2 .hs-form-field {
    width: 50%!important
  }

  .hs-form fieldset.form-columns-2 .hs-form-field:first-of-type {
    padding-right: .75rem
  }

  .hs-form fieldset.form-columns-2 .hs-form-field:nth-of-type(2) {
    padding-left: .75rem
  }

  .hs-form fieldset.form-columns-3 .hs-form-field {
    width: 33.333%!important
  }

  .hs-form fieldset.form-columns-3 .hs-form-field:first-of-type {
    padding-right: .75rem
  }

  .hs-form fieldset.form-columns-3 .hs-form-field:nth-of-type(2) {
    padding-left: .75rem;
    padding-right: .75rem
  }

  .hs-form fieldset.form-columns-3 .hs-form-field:nth-of-type(3) {
    padding-left: .75rem
  }
}
/* Table */

table {
  border-collapse: collapse;
  margin-bottom: 1.4rem;
  overflow-wrap: break-word;
}

/* Table cells */

td,
th {
  vertical-align: top;
}

/* Table header */

thead th {
  vertical-align: bottom;
}

.styleguide-grid {
  display: grid; 
  grid-template-columns: 1fr 210px; 
  gap: 32px 34px; 
  align-items: center;
}

@media(max-width: 767px) {
  .styleguide-grid {
    align-items: center;
    display: grid;
    gap: 15px;
    grid-template-columns: 1fr;
  }
}

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

/* Header DND sections */

.header .dnd-section {
  padding: 0;
}

.header__top {
  background: #FEF8F1;
}

/* Header container */
header .content-wrapper {max-width:unset;}
.header-container {
  background: #FFFFFF;
  position: relative;
  transition: background .3s;
}

.header-container > div {
  transition: background .3s;
}

.sticky-logo.sticky-logo--show-below-threshold {
  display: none;
}
.sticky-logo:not(.sticky-logo--show-below-threshold) {
  display: block;
}

.header-container.header-container--sticky {
  background: none;
}

.header__row-1 {
  padding-top: 1rem;
}

.header__row-1,
.header__row-2 {
  align-items: center;
  display: flex;
  justify-content: flex-end;
  width: 100%;
}
  .header-container--sticky > div {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
  }
@media(min-width:992px) {

  .header-container--sticky > div {
    background: #052465;
  }

  .header-container--sticky .sticky-logo.sticky-logo--show-below-threshold {
    display: block;
  }
  .header-container--sticky .sticky-logo:not(.sticky-logo--show-below-threshold) {
    display: none;
  }

  
  
}
@media (max-width: 1170px) and (min-width: 992px) {
  .header__column {
    width: 100%;
  }
  .header .button {
    font-size: 1rem; 
  }
}

@media (max-width: 991px) {
  .header-container--sticky > div {
    background: #FFFFFF;
  }
  .header-container, 
  .header-container > div {
    overflow-x: clip;
  }
  .header__container {
    flex-direction: column;
    padding: 1rem 0 0;
  }

  .header__column {
    position: relative;
  }

  .header__row-1 {
    padding-top: 0;
  }

  .header__row-2 {
    justify-content: center;
    padding: 1.05rem;
  }
  .header .button-wrapper {
    display: none;
    text-align: center !important;
  }
  .body-wrapper--mobile-menu-open .header .button-wrapper {
    display: block;
  }
}

/* Navigation skipper */

.header__skip {
  height: 1px;
  left: -1000px;
  overflow: hidden;
  position: absolute;
  text-align: left;
  top: -1000px;
  width: 1px;
}

.header__skip:hover,
.header__skip:focus,
.header__skip:active {
  height: auto;
  left: 0;
  overflow: visible;
  top: 0;
  width: auto;
}

/* Logo */

.header__logo {
  align-items: center;
  display: flex;
  height: auto;
  margin-right: auto;
  max-width: 200px;
  overflow: hidden;
}

@media (max-width: 991px) {
  .header__logo {
    margin: 0 auto;
    width: 100%;
  }
}

.header__logo img {
  max-width: 100%;
}

.header__logo .logo-company-name {
  font-size: 1.167rem;
  margin-top: 0.7rem;
}

.header__logo--main {
  padding-top: 1rem;
}

/* Search bar */

.header__search {
  padding: 0 1rem;
  width: auto;
}



.hs-search-field__form {
  position: relative;
}

.header__search .hs-search-field__label {
  flex-basis: auto;
}



.header__search .hs-search-field__input {
  
  height: 45px;
  padding: 0 0.7rem;
}



.header__search .hs-search-field__button {
  padding: 0;
  fill: #000;
  background-color: transparent;
  border: none;
  padding: 10px;
  position: absolute;
  top: 0;
  right: 0;
}

.header__search .hs-search-field__button svg {
  height: 25px;
}


.header__search .hs-search-field--open .hs-search-field__input {
  border-bottom: none;
  border-radius: 6px 6px 0 0;
  max-width: 100%;
}

.header__search .hs-search-field--open .hs-search-field__suggestions {
  background-color: #FFF;
  border: 2px solid #D1D6DC;
  border-radius: 0 0 6px 6px;
  border-top-width: 1px;
  position: absolute;
  width: 100%;
  z-index: 10;
}

.header__search .hs-search-field__suggestions li {
  border-top: 1px solid #D1D6DC;
  font-size: 0.875rem;
}

.header__search .hs-search-field__suggestions li a {
  color: #494A52;
  padding: 0.35rem 0.7rem;
  text-decoration: none;
  transition: background-color 0.3s;
}

.header__search .hs-search-field__suggestions #results-for {
  display: none;
}

.header .hs-module-editor-placeholder {
  display: none;
}

@media (min-width: 992px) {
  .header__search form {
    align-items: center;
    display: flex;
    flex-direction: row;
  }

  .header__search label {
    margin: 0 1rem 0 0;
  }

  .header__search .hs-search-field__input {
    width: auto;
  }
}

@media (max-width: 991px) {
  .header__search {
    border-top: 2px solid #CED4DB;
    order: 1;
    padding: 1.05rem;
  }
}

/* Language switcher */
button.hs-language-switcher__button {
  transform: none;
}
.header__language-switcher {
  cursor: pointer;
  padding-right: 1.4rem;
}

.header__language-switcher .lang_switcher_class {
  position: static;
}

.header__language-switcher .lang_list_class {
  border: 2px solid;
  border-radius: 3px;
  box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2);
  display: block;
  left: calc(100% - 24px);
  opacity: 0;
  min-width: 100px;
  padding-top: 0;
  text-align: left;
  top: 100%;
  transition: opacity 0.3s;
  visibility: hidden;
}

.header__language-switcher:hover .lang_list_class,
.header__language-switcher:focus .lang_list_class {
  opacity: 1;
  transition: opacity 0.3s;
  visibility: visible;
}

.header__language-switcher .lang_list_class:before {
  left: 70%;
  top: -25px;
}

.header__language-switcher .lang_list_class:after {
  left: 70%;
  top: -22px;
}

.header__language-switcher .lang_list_class.first-active::after {
  top: -22px;
  transition: 0.3s;
}

.header__language-switcher .lang_list_class li {
  border: none;
  font-size: 18px;
  padding: 0.35rem 0.7rem;
}

.header__language-switcher .lang_list_class li:first-child {
  border-radius: 6px 6px 0 0;
  border-top: none;
}

.header__language-switcher .lang_list_class li:last-child {
  border-bottom: none;
  border-radius: 0 0 6px 6px;
}

.header__language-switcher .lang_list_class li:hover {
  transition: background-color 0.3s;
}

.header__language-switcher--label {
  display: flex;
  position: relative;
}

.header__language-switcher--label-current {
  align-items: center;
  display: flex;
  font-size: 0.75rem;
  margin-bottom: 0.175rem;
  margin-left: 0.7rem;
}

.header__language-switcher--label-current:after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 6px solid #494A52;
  content: "";
  display: block;
  height: 0px;
  margin-left: 0.7rem;
  margin-top: 0.175rem;
  width: 0px;
}

@media (max-width: 991px) {
  .header__language-switcher {
    border-top: 2px solid #CED4DB;
    padding-left: 1.05rem;
    padding-right: 0;
  }

  .header__language-switcher .lang_list_class {
    border: none;
    box-shadow: unset;
    display: block;
    left: 30px;
    opacity: 1;
    padding: 0 1.05rem;
    top: 0;
    visibility: visible;
  }

  .header__language-switcher .lang_list_class li {
    background-color: inherit;
    font-size: 0.917rem;
  }

  .header__language-switcher--label-current {
    display: none;
  }

  .header__language-switcher .globe_class {
    background-image: none;
  }

  .header__language-switcher .lang_list_class li:hover{
    background-color: inherit;
  }

  .header__language-switcher .lang_list_class:before,
  .header__language-switcher .lang_list_class:after {
    content: none;
  }
}

/* Navigation */

#nav-toggle {
  display: none;
}

/* Mobile toggles */

@media (max-width: 991px) {
  .header__navigation,
  .header__search,
  .header__language-switcher {
    display: none;
    width: 100%;
  }

  .header__navigation.open,
  .header__search.open,
  .header__language-switcher.open {
    background-color: #F8FAFC;
    display: block;
    left: 0;
    min-height: calc(100vh - 115px);
    position: absolute;
    right: 0;
    top: 75px;
    z-index: 2;
  }

  .header__navigation--toggle,
  .header__search--toggle,
  .header__language-switcher--toggle,
  .header__close--toggle {
    cursor: pointer;
    margin: 0 5vw;
    position: relative;
  }

  .header__navigation--toggle.hide,
  .header__search--toggle.hide,
  .header__language-switcher--toggle.hide {
    display: none;
  }

  .header__navigation--toggle.open,
  .header__search--toggle.open,
  .header__language-switcher--toggle.open {
    display: block;
    margin-left: 0;
    margin-right: auto;
  }

  .header__navigation--toggle:after,
  .header__search--toggle:after,
  .header__language-switcher--toggle:after {
    display: none;
    font-size: 1.083rem;
    font-weight: 600;
    position: absolute;
    left: 40px;
    text-transform: uppercase;
    top: -10px;
  }

  .header__navigation--toggle.open:after,
  .header__search--toggle.open:after,
  .header__language-switcher--toggle.open:after {
    display: block;
    word-break: normal;
  }

  .header__navigation--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__navigation--toggle:after {
    content: "Menu";
  }

  .header__language-switcher--toggle {
    background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__language-switcher--toggle:after {
    content: "Language";
  }

  .header__search--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
    background-size: cover;
    height: 25px;
    width: 25px;
  }

  .header__search--toggle:after {
    content: "Search";
  }

  .header__close--toggle {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=);
    background-repeat: no-repeat;
    background-size: 110%;
    display: none;
    height: 25px;
    margin-right: 0;
    width: 25px;
  }

  .header__close--toggle.show {
    display: block;
  }

  /* Logo and hamburger share one line - CJ, 17/09/2026, task 50743404.

     This block used to wrap the header cells and give each 100% width, so on a
     phone the logo sat on one row and the menu module on the next. The design
     compensated for that by absolutely positioning #menu__toggle at top:0
     right:0 so it floated back up beside the logo.

     That only works if something above it is positioned, and on this build
     NOTHING is - every ancestor from the module wrapper to the body computes
     position:static - so the toggle anchored to the page instead and landed in
     the top-right corner of the viewport, detached from the menu and under the
     site notice bar. That is what Sue reported on the CPD quiz page.

     Fixed at the layout level instead of with positioning: the header row stays
     a single non-wrapping flex line and the cells size to content, so the
     hamburger sits beside the logo because it IS beside it. The toggle is now
     in normal flow (see .main-menu-toggle in menu.module/module.css).

     Scoped to header .header-container, so the notice bar row above it and
     every dnd row on the page are untouched. */
  header .header-container .row-fluid {
    flex-wrap: nowrap;
    align-items: center;
  }
  header .header-container div[class^='span']{
    width: auto;
  }
  /* The menu cell takes the slack so margin-left:auto on the toggle has room to
     push it to the right edge. */
  header .header-container .row-fluid > div[class*='span1'] {
    flex: 1 1 auto;
  }

  /* OPEN state: the header row keeps its single line, and the menu drops below
     it as a full-width panel - CJ, 17/09/2026.

     The logo and the close X stay on one line, which is the whole point. The
     mobile nav lives in the same cell as the toggle, so left in flow it renders
     BESIDE the logo in whatever width is left over - about 190px on a real
     phone once the logo has taken its 163px. Unusable. Taking just the panel
     out of flow is the conventional dropdown pattern and the only thing here
     that can span the full header width.

     The ICON is still in normal flow - that was the ask, and it has not
     changed. This positions the PANEL.

     `position: relative` goes on .header-container, NOT on .row-fluid: there
     are two nested .row-fluid elements, and the inner one (inside the menu
     cell) would win as nearest positioned ancestor and clip the panel to 402px
     starting at x=183. Measured.

     module.js:75 puts body-wrapper--mobile-menu-open on .body-wrapper while the
     menu is open, so both states are expressible without touching the JS. */
  header .header-container {
    position: relative;
  }
  .body-wrapper--mobile-menu-open header .header-container nav.menu--mobile {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    width: auto;
    z-index: 50;
    /* An absolutely positioned box paints nothing of its parent, and the panel
       now hangs below the header band over page content. Without this the menu
       items sit on top of the page text. Matches the band. */
    background: var(--primary_color);
  }
  header .header-container a#menu__toggle {
    display: block !important;
  }
}

@media(max-width: 767px) {
  .container-fluid.header__top .row-fluid {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    align-items: center;
    justify-content: space-between;
  }
  
    .container-fluid.header__top .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  
    .container-fluid.header__top .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
      display: inline-flex;
    }
  

}

@media(max-width: 450px) {
  
    .container-fluid.header__top .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 2% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 2% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 2% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 2% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 2% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 2% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 2% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 2% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 2% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 2% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .container-fluid.header__top .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 2% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  

}
footer.footer{
  background-color: var(--light_color);
}

footer.footer .footer__connect{
  margin-bottom: 1rem;
}

footer.footer .footer__connect h5{
  color: var(--dark_color);
  margin-bottom: 1rem;
}

footer.footer .footer__connect > div{
  display: flex;
  flex-direction: row;
  gap: 1rem;
  margin-bottom: 0.75rem;
  color: var(--dark_color);
}

footer.footer .footer__connect > div a{
  color: var(--primary_color);
}

footer.footer .footer__connect > div svg path{
  fill: var(--tertiary_color);
}

footer.footer .hs-menu-wrapper.no-flyouts > ul{
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

footer.footer .hs-menu-wrapper.hs-menu-flow-vertical ul {
   grid-template-columns: repeat(1, 1fr);
  gap: 0
}

footer.footer .hs-menu-wrapper.no-flyouts > ul:not(.hs-menu-children-wrapper) > li > a{
  display: inline-block;
  font-weight: bold;
  color: var(--tertiary_color);
  text-decoration: none;
  margin-bottom: 1rem;
}

footer.footer .hs-menu-wrapper.no-flyouts ul.hs-menu-children-wrapper > li a{
  display: inline-block;
  color: var(--dark_color);
  text-decoration: none;
  transition: all 0.3s ease-out;
}

footer.footer .hs-menu-wrapper.no-flyouts ul.hs-menu-children-wrapper > li a:hover{
  opacity: 0.75;
  transition: all 0.3s ease-out;
}

footer.footer .hs-menu-wrapper.active-branch.flyouts ul{
  gap: 1rem;
}

footer.footer .hs-menu-wrapper.active-branch.flyouts ul a{
  color: var(--dark_color);
  text-decoration: none;
  transition: all 0.3s ease-out;
}

footer.footer .hs-menu-wrapper.active-branch.flyouts ul a:hover{
  opacity: 0.75;
  transition: all 0.3s ease-out;
}

footer.footer .footer__copyright{
  text-align: right;
  font-size: 1rem; 
  color: var(--dark_color);
}

@media screen and (max-width: 767px){
  
  footer.footer p{
    font-size: 0.875rem;
  }
  
  footer.footer .footer__connect > div{
    font-size: 0.875rem;
  }
  
  footer.footer .hs-menu-wrapper.no-flyouts > ul{
    margin: 1.5rem 0;
    font-size: 0.875rem;
  }
  
  footer.footer .hs-menu-wrapper.active-branch.flyouts ul{
    flex-direction: row;
    margin-bottom: 1rem;
    font-size: 0.875rem;
  }
  
  footer.footer .footer__copyright{
    text-align: left;
    margin: 0.5rem 0;
    font-size: 0.875rem;
  }
}
/* 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: -9999px;
  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%;
}

@media (max-width: 991px) {
  .hs_cos_wrapper_type_logo img {
    max-width: 275px;
  }
}

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


.noscroll {
  overflow: hidden;
}

.ts__bg-primary_color     { background: var( --primary_color); }
.ts__bg-secondary_color   { background: var( --secondary_color); }
.ts__bg-tertiary_color    { background:var( --tertiary_color); }
.ts__bg-accent_color      { background:var( --accent_color) }
.ts__bg-light_color    { background:var( --light_color) }
.ts__bg-dark_color      { background:var( --dark_color) }
.ts__bg-white      { background: #fff }
.ts__bg-black      { background: #000 }
.ts__bg-transparent      { background:var( --transparent_color) }

.ts__border-primary_color     { border-color: var( --primary_color);}
.ts__border-secondary_color   { border-color: var( --secondary_color); }
.ts__border-tertiary_color    { border-color:var( --tertiary_color); }
.ts__border-accent_color      { border-color:var( --accent_color) }
.ts__border-light_color       { border-color:var( --light_color) }
.ts__border-dark_color        { border-color:var( --dark_color) }

.ts__bg-primary_color-subtle       { background:#2d4c8d }
.ts__bg-secondary_color-subtle     { background:#b8d3ed }
.ts__bg-tertiary_color-subtle      { background:#ff5e6a }
.ts__bg-accent_color-subtle        { background:#ffa865 }

.ts__text--dark      { color:#0E0E1D }
.ts__text--light     { color:#FEF8F1 }

.ts__bg-system_success    { background:#5C806E }
.ts__bg-system_warning    { background:#E6DC24 }
.ts__bg-system_error      { background:#E03131 }
.ts__bg-system_focus      { background:#00B0B3 }

.button.ts__bg-primary_color:hover {background:var(--primary_color-hover)}
.button.ts__bg-secondary_color:hover {background:var(--secondary_color-hover)}
.button.ts__bg-tertiary_color:hover {background:var(--tertiary_color-hover)}
.button.ts__bg-accent_color:hover {background:var(--accent_color-hover)}
/* 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;
  }
}
.h-hide-mobile {
  display: none;
}
@media screen and (min-width:768px) {
  .h-hide-mobile {
    display: initial;
  }
}
.h-hide-desktop {
  display: initial;
}
@media screen and (min-width:768px) {
  .h-hide-desktop {
    display: none;
  }
}

/* Custom work
Client CSS lives in custom_work/css so core stays upgradeable. Keep this include through Omega upgrades.
*/
/* Kattsafe custom styles
   Included at the end of Omega/css/main.css, so rules here override the theme.
   Client CSS goes here, not in Omega/css, so core stays upgradeable. */

/* Header logo - moved here from the bottom of Omega/css/main.css (was added in Design Manager) */
header a img {
  max-width: 163px !important;
  display: block;
}

/* PeerFold module colour overrides
   Sue's status colours, 14/10/2026 - Task https://clients.impulsecreative.com/app/tasks/51194551, CJH

   PeerFold's documented override is --peerfold-* on :root. Its own peerfold.css
   also sets them on :root and loads AFTER main.css, so a plain :root here loses.
   :root:root is the same element with higher specificity, so it wins regardless
   of load order. */

/* Double :root on purpose - not a typo. Specificity bump to beat peerfold.css's :root. Don't collapse it. */
:root:root {
  /* Progress bar fill + Valid certificate badge. Note: every progress bar
     uses this, so in-progress bars are green too until PeerFold splits them. */
  --peerfold-success: #1c7a3e;
  /* Expired / revoked certificate badge */
  --peerfold-warning: #ae3428;
}

/* Headings and buttons - Sue, 10/24/2026 - Task https://clients.impulsecreative.com/app/tasks/51233013, CJH

   Bebas Neue ships ONE weight (400). The theme sets no weight on h1-h6, so they
   took the browser's default bold and the browser faked a bolder Bebas - that
   is the "too bold" Sue saw. 400 is the real face. Heading colour (navy,
   #052465) is set in Theme settings > Typography, not here. */
h1, h2, h3, h4, h5, h6 {
  font-weight: 400;
}

/* The theme only loads Poppins 400 and 700, so the 600 the form modules ask
   for on their buttons was rendering as 700. HubSpot serves the 600 file from
   the same path as the theme's own @font-face. */
@font-face {
  font-family: "Poppins";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url("/_hcms/googlefonts/Poppins/600.woff2") format("woff2"),
       url("/_hcms/googlefonts/Poppins/600.woff") format("woff");
}

/* Core _buttons.css hardcodes 700 / 1.25rem, and restates the weight on
   :active. Same selectors, loaded later, so these win. */
button,
.button,
.hs-button,
.hs-blog-post-listing__post-button,
button:active,
.button:active,
.hs-button:active,
.hs-blog-post-listing__post-button:active {
  font-weight: 600;
}
button,
.button,
.hs-button,
.hs-blog-post-listing__post-button {
  font-size: 1.125rem;
}

/* Footer - match the PeerFold academy footer (academy2.kattsafe.com.au)
   Task https://clients.impulsecreative.com/app/tasks/51233013, CJH, 10/26/2026
   Values read off PeerFold's .pt-footer: grey band with a hairline top border,
   small uppercase heading, grey 14px links, square outlined social icons, and
   a hairline rule above the logo row in place of Omega's short red bar.
   Row backgrounds and padding are set in the footer's drag-and-drop editor
   (they print as !important), so they are changed there, not here.
   footer.footer to beat the theme's footer.footer background. */
footer.footer {
  --ks-footer-bg: #f4f4f5;
  --ks-footer-line: #d1d3d6;
  --ks-footer-text: #1b2733;
  --ks-footer-muted: #4c565f;
  background-color: var(--ks-footer-bg);
  border-top: 1px solid var(--ks-footer-line);
  color: var(--ks-footer-text);
  font-size: 14px;
  line-height: 1.5;
}
.footer h5 {
  font-family: Poppins, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ks-footer-text);
  margin: 0 0 12px;
}
.footer li + li {
  margin-top: 9px;
}
.footer .footer__container li a {
  color: var(--ks-footer-muted);
  font-size: 14px;
  text-decoration: none;
}
.footer .footer__container li a:hover,
.footer .footer__container li a:focus {
  color: var(--ks-footer-text);
  text-decoration: underline;
}
.footer .social-links {
  display: flex;
  gap: 10px;
  margin-top: 28px;
}
.footer .footer__container .social-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  margin: 0;
  padding: 0;
  border: 1px solid var(--ks-footer-line);
  border-radius: 0;
  color: var(--ks-footer-muted);
}
.footer .footer__container .social-links a:hover,
.footer .footer__container .social-links a:focus {
  border-color: var(--ks-footer-muted);
  color: var(--ks-footer-text);
}
/* The icon span takes a background, padding and corner radius from the
   module's style settings (scoped to #hs_cos_wrapper_<id>), which covered the
   link's border. !important because the scope is an ID that changes per
   instance, so no class selector can outrank it. */
.footer .social-links a .social-links__icon {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0 !important;
  border-radius: 0 !important;
  background-color: transparent !important;
}
.footer .social-links svg,
.footer .social-links a:hover svg,
.footer .social-links a:focus svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
}
.footer hr {
  width: 100%;
  height: 1px;
  margin: 32px 0 0;
  border: 0;
  background-color: var(--ks-footer-line);
}

/* Resource Cards (resources + manuals pages) - Sue, 11/03/2026 - Task https://clients.impulsecreative.com/app/tasks/51323254, CJH
   Same-width buttons: each button fills its card, and the cards in a row share
   one width, so every button in the row matches regardless of its label.
   Square card corners are NOT here: they come from Theme settings > Spacing >
   Border Radius Diameter (0), which feeds --border-radius site-wide. */
.omega-resource-card__button .button-wrapper .button {
  width: 100%;
  justify-content: center;
}

/* Link Settings bridge - 11/03/2026 - Task https://clients.impulsecreative.com/app/tasks/51323254, CJH
   Theme settings > Link Settings toggle, passed to the Custom work block at the end of
   js/main.js. HubL does not run in theme JS files, but it does run here, so the
   settings travel as custom properties and the script reads them with
   getComputedStyle. */
:root {
  --ks-external-links-new-tab: 1;
}

/* Course outline chapter titles (e.g. INTRODUCTION) - Sue, 11/03/2026 - Task https://clients.impulsecreative.com/app/tasks/51326565, CJH
   PeerFold sets these to weight 600, but Bebas Neue only ships 400, so the
   browser faked a bold and they read thick. peerfold.css loads after main.css,
   so the selector carries the outline class to outrank its single-class rule. */
.peerfold-outline .peerfold-outline__chapter-title {
  font-weight: 400;
  font-size: 1.25rem;
}

/* Course page: outline to the right of the video, as in PeerFold - Sue, 11/03/2026 - Task https://clients.impulsecreative.com/app/tasks/51326553, CJH
   The PeerFold Course Page module puts the 300px outline rail on the LEFT above
   862px and has no setting to move it. Same breakpoint, columns and order
   swapped. Below 862px the module already stacks the video first. The extra
   parent class outranks the module's single-class rules. */
@media (min-width: 862px) {
  .peerfold-course-page .peerfold-course-page__main {
    grid-template-columns: minmax(0, 1fr) 300px;
  }
  .peerfold-course-page .peerfold-course-page__stage {
    order: 1;
  }
  .peerfold-course-page .peerfold-course-page__rail {
    order: 2;
  }
}

/* Course outline accordion - Sue, 11/03/2026 - Task https://clients.impulsecreative.com/app/tasks/51326554, CJH
   The toggle lives in the Custom work block at the end of js/main.js, which
   marks the outline with [data-ks-accordion]. Without the script nothing here
   applies and the outline stays fully open. */
[data-ks-accordion] .peerfold-outline__chapter-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  cursor: pointer;
  user-select: none;
}
[data-ks-accordion] .peerfold-outline__chapter-title::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform 0.2s;
}
[data-ks-accordion] .ks-chapter--open .peerfold-outline__chapter-title::after {
  transform: rotate(-135deg);
}
[data-ks-accordion] .peerfold-outline__chapter:not(.ks-chapter--open) .peerfold-outline__lessons {
  display: none;
}