/* beautify ignore:start */
/* 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.
*/

/* RESET DECLARATIONS */
*,
*: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 {
  /* We set line-height using fields.json 
  line-height: 1.15; */
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

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

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

body {
  margin: 0;
}

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
figure,
blockquote,
dl,
dd {
  margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */

main {
  display: block;
}

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

h1 {
  font-size: 2em;
}



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

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */

hr {
  box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 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
   ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, 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: 700;
}

/**
 * 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;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */

img {
  border-style: none;
}

/* 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 */
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */

button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 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;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *    `fieldset` elements in all browsers.
 */

legend {
  box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

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

progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */

textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */

[type="checkbox"],
[type="radio"] {
  box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * 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, IE 10+, and Firefox.
 */

details {
  display: block;
}

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

summary {
  display: list-item;
}

/* Misc
   ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */

template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */

[hidden] {
  display: none;
}

/* TABLE FILE RULES */
/* Table */

table {
  max-width: 100% !important;
  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;
}

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


.content-wrapper {
  padding: 0px 12px;
  width: 100%;
  margin: 0 auto;
  max-width: 1440px;
}

.inner-wrapper {
  padding: 0px 24px;
  margin: 0 auto;
}

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

.dnd-section .dnd-column .content-wrapper {
  /* padding-left: 20px; */
  /* padding-right: 20px; */
}

@media (min-width: 560px) {
  .dnd-section .dnd-column .content-wrapper {
    /* padding-left: 16px; */
    /* padding-right: 16px; */
  }

  .content-wrapper {
    padding: 0 24px;
  }

  .inner-wrapper {
    padding-left: 48px;
    padding-right: 48px;
  }
}

@media screen and (min-width: 1280px) {
  .content-wrapper {
    /* padding-left: 24px; */
    /* padding-right: 24px; */
  }
}

@media screen and (min-width: 1940px) {
  .content-wrapper {
    /* padding-left: 40px; */
    /* padding-right: 40px; */
  }
}

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

/* body {
  line-height: 1.4;
  word-break: break-word;
} */

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

/* Paragraphs */

/* p {
  font-size: 1rem;
  margin: 0 0 1.4rem;
} */

/* Anchors */

a {
  cursor: pointer;
  overflow-wrap: break-word;
  word-wrap: break-word;

  word-break: break-word;

  /* Adds a hyphen where the word breaks, if supported (No Blink) */
  hyphens: auto;
}

/* Headings */

/* h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0 0 1.4rem;
} */

/* Lists */

/* ul,
ol {
  margin: 0 0 1.4rem;
}

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: 2px solid;
  margin: 0 0 1.4rem;
  padding-left: 15px;
} */

/* Horizontal rules */

/* hr {
  border: none;
  border-bottom: 1px solid #CCC;
} */

/* Image alt text */

img {
  font-size: 1rem;
  word-break: normal;
}

legend {
  line-height: 1.4;
}

.heading {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

/* Standard section headings are regular font weight */
.section-heading {
  font-size: 24px;
  letter-spacing: 0.4px;
  font-weight: 400;
}

@media screen and (max-width: 560px) {
  .section-heading {
    text-align: center;
    margin-top: 24px;
  }
}

.heading__h1 {
  font-size: 34px;
}

.title-border {
  box-sizing: content-box;
  height: 0;
  overflow: visible;
  border: var(--p-navy-blue) solid 1px;
  background-color: var(--p-navy-blue);
  width: 112px;
  margin: 16px auto 32px;
}

@media screen and (max-width: 560px) {
  .title-border {
    margin-bottom: 16px;
  }
}

/* Section headings on sections with a background colour are bold, -- denotes a modifer to the base class, so both classes are used */
.section-heading--bg-bold {}

.text {
  width: auto;
  max-width: 800px;
  max-width: 80ch;
  list-style-position: inside;
}

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

.text-sm-md {
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.text-h5 {
  font-weight: 700;
  font-size: 20px;
  line-height: 1.4;
  margin-top: 8px;
}

.text-h6 {
  font-weight: 700;
  font-size: 18px;
  line-height: 1.4;
  margin-top: 8px;
}

.text-bold {
  font-weight: 700;
}

.text-center {
  text-align: center;
  margin: 0 auto;
}

.text-eyebrow {
  display: inline-block;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 400;
}

.text-white {
  color: var(--grey-000);
}

.text-navy {
  color: var(--p-navy-blue);
}

.text-black {
  color: var(--grey-900);
}

.bullet-tick {
  list-style: url("https://14568786.fs1.hubspotusercontent-na1.net/hubfs/14568786/website-assets-2021/icons/icon-tick.svg");
  fill: inherit;
  list-style-position: inside;
}

.fw-bg-aqua.bullet-tick {
  list-style: url("https://14568786.fs1.hubspotusercontent-na1.net/hubfs/14568786/website-assets-2021/icons/navy-bullet-tick.svg");
}

.bullet-tick ::marker {
  font-size: 28px;
  height: 16px;
  line-height: 1;
}
/* beautify ignore:start */
/* eslint-disable */
/* 1d. Buttons */








button,
.button {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  transition: all 0.15s linear;
  white-space: normal;
}

button:disabled,
.button:disabled {
  background-color: #666f80;
  border-color: #666f80;
  color: #FFFFFF;
  background-color: var(--g_grey_700);
  border-color: var(---g_grey_700);
  color: var(---g_grey_000);
}

/* 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,
.btn {
  border: 1px solid #102b4e;

  padding-top: 16px;
padding-right: 48px;
padding-bottom: 16px;
padding-left: 48px;

  font-family: Montserrat, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  background-color: #102b4e;
  border-radius: 0px;
  color: #FFFFFF;
  text-transform: none;
  letter-spacing: 0.3px;
  line-height: 22px;
  border: none;
  border-width: 0px;
  display: flex;
  flex-direction: row;
  align-items: center;
  align-content: center;
  justify-content: center;
  width: fit-content;
  max-width: 560px;
}

@media screen and (max-width: 480px) {
  button,
  .button,
  .btn {
    padding: 16px 32px;
    width: 100%;
  }
}

/* button:hover,
button:focus,
.button:hover,
.button:focus {
  font-family: Montserrat, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
 background-color: rgba(#000326, 1.0);
  border-color: #000326;
} */

button:active,
.button:active {
  font-family: Montserrat, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  background-color: rgba(#385376, 1.0);
  border-color: ;
}


.btn--secondary {
  background-color: var(--p-navy-blue);
  color: var(--grey-000);
}


.fw-bg-ghost,
.btn--ghost {
  color: var(--p-navy-blue);
  background-color: transparent;
  background-color: var(--grey-000);
  border: 1px solid var(--grey-400);
}

/* beautify ignore:end */
/* beautify ignore:start */

/* 1e. Forms */













/* eslint-disable */
/* Fields */
/* .hs-form-field {
  margin-bottom: 1.4rem;
} */
/* Labels */
/* form label {
  display: block;
  font-size: 0.875rem;
  margin-bottom: 0.35rem;
} */
/* Help text */
/* form legend {
  font-size: 0.875rem;
} */

/* Inputs */
/* form input[type=text],
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 fieldset {
  max-width: 100% !important;
} */






/* form, */
.submitted-message {
  ;
}

/* Form title */
.form-title {
  color: #102b4e;
}

/* Labels */
label {
  color: #000000;
}

/* Help text */
legend {
  color: #000000;
}

/* Inputs */
input[type=text],
input[type=email],
input[type=password],
input[type=tel],
input[type=number],
input[type=file],
select,
textarea {
  
  background-color: var(--grey-000);
  color: #000000;
  border-radius: 0px;
  border: 1px solid var(--grey-400);
  margin: 8px 0px;
  padding: 16px;
  line-height: 20px;
  width: 100%;
}

input[type=checkbox] {
    margin-right: 4px;
    width: 16px !important;
    height: 16px;
    font-size: 16px;
}

/* Form placeholder text */

::-webkit-input-placeholder, ::-moz-placeholder, :-ms-input-placeholder, ::placeholder {
  color: #000000;
}

/* Inputs - date picker */

.hs-dateinput:before {
  color: #000000;
}

.fn-date-picker td.is-selected .pika-button {
  background: ;
}

.fn-date-picker td .pika-button:hover {
  background-color:  !important;
}

.fn-date-picker td.is-today .pika-button {
  color: ;
}

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

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

/* Submit button */
form input[type=submit],
form .hs-button {
    cursor: pointer;
  border: 1px solid #102b4e;

  padding-top: 16px;
padding-right: 48px;
padding-bottom: 16px;
padding-left: 48px;

  font-family: Montserrat, sans-serif; font-style: normal; font-weight: 700; text-decoration: none;
  background-color: #102b4e;
  border-radius: 0px;
  color: #FFFFFF;
  font-size: 18px;
  text-transform: none;
  line-height: 20px;
  border: none;
}

form input[type=submit]:hover,
form input[type=submit]:focus,
form .hs-button:hover,
form .hs-button:focus {
  background-color: rgba(#000326, 1.0);
  border-color: #000326;
}

form input[type=submit]:active,
form .hs-button:active {
  background-color: rgba(#385376, 1.0);
  border-color: ;
}

form {
  position: relative;
}


/* 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;
} */

/* 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;
} */

.hs-form__styles-wrapper {
  position: relative;
}

.hs-form__styles-wrapper input {
  padding: 16px;
  text-align: center;
  border: none;
}

/* 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;
  color: var(--s-orange);
}

.hs-error-msg {
  color: #EF6B51;
  margin-top: 0px;
  font-size: 14px;
  position: absolute;
  color: var(--s-orange);
  margin-top: 2px;
  margin-bottom: 2px;
  margin-left: 0px;
  left: 0px;
  white-space: nowrap;
}

/* JTC: HS Forms provide an error rollup to combine all form errors. 
  In cases where we we only have one input, which has it's own form validation, we can safely hide (visually and SR) the error in this specific use-case. */
.hs_error_rollup *,
.full-w-cta__parent .full-width-cta__hs-form-parent--layout .hs_error_rollup * {
  display: none;
}


.submitted-message {
  margin: 16px 0px;
  padding: 8px 16px;
  border-radius: 5px;
  background: var(--light-grey-bg);
  width: fit-content;
}


/* 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;
} */

/* beautify ignore:end */

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

/* 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%;
}
/* Blog listing */
/* 
.blog-index {
  display: flex;
  flex-wrap: wrap;
}

.blog-index__post {
  flex: 0 0 100%;
  padding: 1.4rem 1rem;
}

@media screen and (min-width: 768px) {
  .blog-index__post--small {
    flex: 0 0 calc(100% / 2);
  }
}

@media screen and (min-width: 1280px) {
  .blog-index__post--small {
    flex: 0 0 calc(100% / 3);
  }
}

@media screen and (min-width: 768px) {
  .blog-index__post--large {
    display: flex;
    flex: 1 0 100%;
  }
}

.blog-index__post-image {
  height: auto;
  max-width: 100%;
}

@media screen and (min-width: 768px) {
  .blog-index__post-image-wrapper--large {
    flex: 1 1 48%;
  }

  .blog-index__post-content--large {
    flex: 1 1 48%;
    padding-left: 2rem;
  }

  .blog-index__post-content--full-width {
    flex: 1 1 100%;
    padding-left: 0;
  }
}

.blog-index__post-title {
  font-size: 1.25rem;
}

.blog-index__post-timestamp {
  display: block;
}

.blog-index__post-author {
  align-items: center;
  display: flex;
}

.blog-index__post-author-image {
  border-radius: 50%;
  height: auto;
  margin-right: 0.35rem;
  width: 30px;
}

.blog-index__post-tags,
.blog-index__post-title,
.blog-index__post-timestamp,
.blog-index__post-author,
.blog-index__post-image--small {
  margin: 0 0 0.7rem;
} */

/* Blog pagination */
/* 
.blog-pagination {
  display: flex;
  justify-content: center;
}

.blog-pagination__link {
  border: 2px solid transparent;
  border-radius: 7px;
  line-height: 1;
  margin: 0 0.1rem;
  padding: 0.25rem 0.4rem;
  text-decoration: none;
}

.blog-pagination__link--active {
  border-color: #B0C1D4;
}

.blog-pagination__link:hover,
.blog-pagination__link:focus {
  text-decoration: none;
}

.blog-pagination__prev-link {
  margin-right: 0.25rem;
}

.blog-pagination__next-link {
  margin-left: 0.25rem;
}

.blog-pagination__link.blog-pagination__prev-link--disabled,
.blog-pagination__link.blog-pagination__next-link--disabled {
  color: #B0C1D4;
  cursor: default;
  pointer-events: none;
}

.blog-pagination__prev-link svg,
.blog-pagination__next-link svg {
  margin: 0 0.3rem;
}

.blog-pagination__prev-link--disabled svg,
.blog-pagination__next-link--disabled svg {
  fill: #B0C1D4;
}

.blog-pagination__number-link:hover,
.blog-pagination__number-link:focus {
  border: 2px solid #B0C1D4;
}

@media (max-width: 767px) {
  .blog-pagination__number-link {
    display: none;
  }
} */

/* Blog post */
/* 
.blog-post {
  margin: 0 auto;
  max-width: 960px;
}

.blog-post__meta {
  margin-bottom: 1.4rem;
}

.blog-post__meta a {
  text-decoration: underline;
}

.blog-post__timestamp {
  display: block;
}

.blog-post__tags svg {
  height: auto;
  margin-right: 10px;
  width: 15px;
}
 */

/* Blog related posts */
/* 
.blog-related-posts {
  background-color: #e1e3e6;
}

.blog-related-posts h2 {
  text-align: center;
}

.blog-related-posts__list {
  display: flex;
  flex-wrap: wrap;
}

.blog-related-posts__post {
  flex: 0 0 100%;
  padding: 1rem;
}

@media screen and (min-width: 768px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 2);
  }
}

@media screen and (min-width: 1280px) {
  .blog-related-posts__post {
    flex: 0 0 calc(100% / 3);
  }
}

.blog-related-posts__image {
  height: auto;
  max-width: 100%;
}

.blog-related-posts__title {
  margin: 0.7rem 0;
} */

/* Blog comments */
/* 
.blog-comments {
  margin: 0 auto;
  max-width: 680px;
}

.blog-comments .hs-submit {
  text-align: center;
}

.blog-comments .comment-reply-to {
  border: 0 none;
}

.blog-comments .comment-reply-to:hover,
.blog-comments .comment-reply-to:focus {
  background-color: transparent;
  text-decoration: underline;
} */

.blog-post__content-post-wrapper>span>*+* {
  margin-top: 8px;
}

.blog-post__tags {
  display: flex;
  flex-direction: row;
  gap: 8px 16px;
  gap: clamp(4px, 25%, 8px);
  margin: 16px 0px;
  justify-content: flex-start;
}

.blog-post__tag-link {
  white-space: nowrap;
  background-color: var(--grey-200);
  padding: 8px 32px;
  border-radius: 50px;
}

.blog-post__topics-share-wrapper .blog-post__tags {
  flex-wrap: wrap;
}

.blog-post__tag-link--small {
  padding: 8px;
  width: fit-content;
  white-space: nowrap;
}

.blog-post__tag-link--card {
  margin-top: auto;
  margin-bottom: 0px;
}

.blog-post__latest-news-tag {
  text-decoration: underline;
  font-size: 16px;
  color: var(--grey-600);
  padding: 0px;
  background-color: initial;
}

.blog-post__breadcrumb-nav {
  list-style: none;
  padding: 0px;
  padding-inline-start: 0px;
  display: flex;
  flex-direction: row;
  grid-row: 1 / 2;
  gap: 4px;
  flex-wrap: wrap;
}

.blog-post__breadcrumb-link-item {
  color: var(--p-navy-blue);
  font-size: 14px;
  font-weight: 500;
}

.blog-post__breadcrumb-link-item:hover {
  color: var(--p-navy-blue);
}

.blog-post__meta-user-icon {
  width: 24px;
  height: 24px;
}

.blog-post__topics-share-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
  margin-top: 24px;
}

@media screen and (min-width: 480px) {
  .blog-post__tags {
    margin: 32px 0px;
  }

  .blog-post__tag-link--card {
    margin-top: auto;
    margin-bottom: 0px;
  }

  .blog-post__breadcrumb-nav {
    flex-wrap: nowrap;
  }

  .blog-post__topics-share-wrapper {
    flex-direction: row;
  }
}

@media screen and (max-width: 360px) {
  .blog-post__tags {
    flex-wrap: wrap;
  }
}
/* Shared CSS Styles used on different modules, that don't fit into buttons, forms, typography, help or utilities
* 
*
 */



/* 
 - Headings
 - Text
 - Backgroudn wrappers
 - Alignment patterns
 - Layout patterns
 - Module vertical spacing
  */

/* SVG Background Images / Icons */
:root {


  --upcoming-date-bg: url(https://14568786.fs1.hubspotusercontent-na1.net/hubfs/14568786/website-assets-2021/icons/icon-date-wrapper-bg.svg);
  --icon-header-search-toggle: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+);
  --icon-header-close-toggle: url(https://14568786.fs1.hubspotusercontent-na1.net/hubfs/14568786/website-assets-2021/icons/icon-nav-close.svg);
  --icon-header-navigation-toggle: url(https://14568786.fs1.hubspotusercontent-na1.net/hubfs/14568786/website-assets-2021/icons/icon-nav-hamburger.svg);
  --icon-menu-child-toggle: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTkiIGhlaWdodD0iMTkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGcgc3Ryb2tlPSIjOTc5ODlGIiBzdHJva2Utd2lkdGg9IjIuNCIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj48cmVjdCB4PSIxLjIiIHk9IjkuNiIgd2lkdGg9IjE2LjgiIGhlaWdodD0iMSIgcng9Ii41Ii8+PHJlY3QgdHJhbnNmb3JtPSJyb3RhdGUoOTAgOS42IDkuNikiIHg9IjEuMiIgeT0iOS42IiB3aWR0aD0iMTYuOCIgaGVpZ2h0PSIxIiByeD0iLjUiLz48L2c+PC9zdmc+);
}

/* BG Styles Logic */

/* Ozwater Theme Colours */

.fw-ozwater-blue {
  background-color: #009ad7;
}

.fw-ozwater-navy {
  background-color: #102b4e;
}

.fw-ozwater-orange {
  background-color: #f58220;
}

.fw-ozwater-green {
  background-color: #27baa6;
}

/* Ozwater Theme Colours end */

.fw-bg-grey-200 {
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  background-color: var(--grey-200);
}

.fw-bg-grey-300 {
  width: 100%;
  margin-left: 0px;
  margin-right: 0px;
  background-color: var(--grey-300);
}

.fw-bg-white {
  background-color: #FFFFFF;
  background-color: var(--grey-000);
}

.fw-bg-light-sandstone {
  background-color: #edeae4;
}

.fw-bg-sandstone {
  background-color: #e3e0da;

}

.fw-bg-light-blue {
  background-color: #b3e1f3;
}

.fw-bg-light_grey {
  background-color: #FFFFFF;
  background-color: var(--grey-200);
}

.fw-bg-light_grey2 {
  background-color: #eff2f5;

}
.fw-bg-aqua,
.fw-bg-primary {
  background-color: #86d1d6;
  background-color: var(--p-aqua);
}


.fw-bg-blue,
.fw-bg-true_blue {
  background-color: #009ad7;
  background-color: var(--s-true-blue);
}

.fw-bg-electric-blue,
.fw-bg-electric_blue {
  background-color: #5481c1;
  background-color: var(--p-electric-blue);
}

.fw-bg-navy-blue,
.fw-bg-navy_blue,
.fw-bg-secondary,
.button.fw-bg-secondary {
  background-color: #15294F;
  background-color: var(--p-navy-blue);
  color: var(--grey-000);
}

.ozwater-main-event {
  background-color: #15294F;
  background-color: #27baa6;
  color: var(--grey-000);
}

.fw-bg-peach {
  background-color: #fbbd97;
  background-color: var(--p-peach);
}

.fw-bg-sand-stone,
.fw-bg-sand_stone {
  background-color: #e3e0da;
  background-color: var(--p-sand-stone);
}

.fw-bg-dark-sand-stone {
  background-color: #C5C1BA;
}

.fw-bg-purple {
  background-color: #89549D;
  background-color: var(--s-purple);
}

.fw-bg-orange {
  background-color: #DF7A0D;
  background-color: var(--s-orange);
}

.fw-bg-green {
  background-color: #009640;
  background-color: var(--s-green);
}

.fw-bg-gradient {
  background: transparent linear-gradient(116deg, #86D1D6 0%, #356EB6 100%) 0% 0% no-repeat padding-box;
  background: linear-gradient(277.98deg, #CDE1ED 19.45%, #DAF1F2 63.89%);
}


.soft_blue_radial {
  background: rgb(234, 247, 252);
  background: radial-gradient(circle, rgba(234, 247, 252, 1) 0%, rgba(135, 208, 236, 1) 100%);
}


.true_blue_radial {
  background: rgb(229, 245, 251);
  background: radial-gradient(circle, rgba(229, 245, 251, 1) 0%, rgba(0, 155, 215, 1) 100%);
}


.orange_radial {
  background: rgb(255, 239, 225);
  background: radial-gradient(circle, rgba(255, 239, 225, 1) 0%, rgba(248, 152, 72, 1) 100%);
}


.true_blue_linear {
  background: rgb(229, 245, 251);
  background: linear-gradient(90deg, rgba(229, 245, 251, 1) 0%, rgba(0, 155, 215, 1) 100%);
}

.aqua_to_sandstone {
  background: linear-gradient(90.46deg, #9EDADE 41.82%, #E5CEB8 98.38%);
  background: linear-gradient(117.96deg, #C2E7EA 30.61%, #F6ECE3 73.84%);
}

.sandstone_to_aqua {
  background: linear-gradient(280.32deg, #C2E7EA 49.09%, #F6ECE3 79.27%)
}

.aqua_to_navy {
  background: linear-gradient(275.73deg, #0A3458 26.39%, #87D2D7 93.17%);
}

.navy_to_aqua {
  /* ff 3.6+ */
  background: -moz-radial-gradient(ellipse at 50% 50%, rgba(37, 187, 233, 1) 50%, rgba(21, 41, 79, 0.8) 100%);

  /* safari 5.1+,chrome 10+ */
  background: -webkit-radial-gradient(ellipse at 50% 50%, rgba(37, 187, 233, 1) 50%, rgba(21, 41, 79, 0.8) 100%);

  /* opera 11.10+ */
  background: -o-radial-gradient(ellipse at 50% 50%, rgba(37, 187, 233, 1) 50%, rgba(21, 41, 79, 0.8) 100%);

  /* ie 10+ */
  background: -ms-radial-gradient(ellipse at 50% 50%, rgba(37, 187, 233, 1) 50%, rgba(21, 41, 79, 0.8) 100%);

  /* global 92%+ browsers support */
  background: radial-gradient(ellipse at 50% 50%, rgba(37, 187, 233, 1) 50%, rgba(21, 41, 79, 0.8) 100%);

  background: linear-gradient(68.82deg, #0A3458 13.32%, #18749E 32.12%, #1F9FC9 60.14%, #0F4B71 80.18%);
}

.navy_to_aqua_2 {
  background: linear-gradient(91.07deg, #04183A 20.23%, #23ABD9 88.73%);

}

.blue_to_aqua {
  background: linear-gradient(90.26deg, #25BCEA 21.88%, #86D1D6 75.92%);
  background: linear-gradient(90.26deg, #25BCEA 21.88%, var(--p-aqua) 75.92%);
}

.aqua_to_blue {
  background: transparent linear-gradient(116deg, #86D1D6 0%, #356EB6 100%) 0% 0% no-repeat padding-box;
  background: linear-gradient(277.98deg, #CDE1ED 19.45%, #DAF1F2 63.89%);
}

.blue_to_orange {
  background: linear-gradient(91.59deg, #7599CD 38.07%, #F1C6AE 88.43%);
}

.aqua_to_purple {
  background: linear-gradient(98.09deg, #D1EEF0 0%, #CCB3D6 100%);
}

/* CSS VARIABLE GRADIENTS  */
.fw-bg-gradient {
  background: linear-gradient(277.98deg, var(--gradient-blue-white-300), var(--gradient-blue-white-200));
}

.soft_blue_radial {
  background: radial-gradient(circle, var(--gradient-light-white-blue-100), var(--gradient-true-blue-300));
}

.true_blue_radial {
  background: radial-gradient(circle, var(--gradient-light-white-blue-100), var(--gradient-true-blue-600));
}

.orange_radial {
  background: radial-gradient(circle, var(--gradient-light-peach-100), var(--gradient-orange-500));
}

.true_blue_linear {
  background: linear-gradient(90deg, var(--gradient-light-white-blue-100), var(--gradient-true-blue-600));
}

.aqua_to_sandstone {
  background: linear-gradient(117.96deg, var(--gradient-light-blue-400), var(--gradient-light-peach-200));
}

.sandstone_to_aqua {
  background: linear-gradient(280.32deg, var(--gradient-light-blue-400), var(--gradient-light-peach-200))
}

.aqua_to_navy {
  background: linear-gradient(275.73deg, var(--gradient-light-navy-blue-600), var(--gradient-aqua-500));
}

.navy_to_aqua {
  background: linear-gradient(68.82deg, var(--gradient-light-navy-blue-600), var(--gradient-true-blue-800), var(--gradient-true-blue-500), var(--gradient-light-navy-blue-400));
}

.navy_to_aqua_2 {
  background: linear-gradient(91.07deg, var(--gradient-navy-blue-700), var(--gradient-true-blue-400));
}

.blue_to_aqua {
  background: linear-gradient(90.26deg, var(--gradient-true-blue-300), var(--gradient-aqua-500));

}

.aqua_to_blue {
  background: linear-gradient(277.98deg, var(--gradient-blue-white-300), var(--gradient-blue-white-200));
}

.blue_to_orange {
  background: linear-gradient(91.59deg, var(--gradient-electric-blue-500), var(--gradient-peach-500));
}

.aqua_to_purple {
  background: linear-gradient(98.09deg, var(--gradient-blue-white-100), var(--gradient-light-purple-500));
}

/* END CSS VARIABLE GRADIENTS  */

/* End BG Colour Options */

/* BG Colour Text Colour Options */

.fw-bg-gradient h1,
.fw-bg-gradient h2,
.fw-bg-gradient h3 {
  font-weight: 700;
}

/* White Text */
.fw-bg-gradient.navy_to_aqua h1,
.fw-bg-blue h1,
.fw-bg-gradient.aqua_to_navy h1,
.fw-bg-gradient.navy_to_aqua_2 h1,
.fw-bg-gradient.blue_to_aqua h1,
.fw-bg-gradient.blue_to_orange h1,

.fw-bg-gradient.blue_to_orange .text-h5 {
  color: #FFFFFF;
  color: var(--grey-000);
}


/* Navy Text */
.fw-bg-gradient.aqua_to_sandstone h1,
.fw-bg-gradient.sandstone_to_aqua h1,
.fw-bg-gradient.aqua_to_blue h1,
.fw-bg-gradient h2 {
  color: #15294f;
  color: var(--p-navy-blue);
}

.fw-bg-blue,
.fw-bg-purple,
.fw-bg-navy-blue,
.fw-bg-navy_blue,
.fw-bg-blue,
.fw-bg-true_blue,
.fw-bg-electric-blue,
.fw-bg-electric_blue,
.fw-bg-gradient.navy_to_aqua,
.fw-bg-gradient.aqua_to_navy,
.fw-bg-gradient.navy_to_aqua_2,
.fw-bg-gradient.blue_to_aqua {
  color: var(--grey-000);
}

.fw-bg-blue .section-heading,
.fw-bg-navy-blue .section-heading,
.fw-bg-gradient .section-heading {
  font-weight: 700;
  color: var(--grey-000);
}

.fw-bg-gradient .section-heading.text-white,
.fw-bg-gradient.navy_to_aqua .section-heading {
  color: #ffffff;
  color: var(--grey-000);
}

/* Navy Text */
.fw-bg-aqua,
.fw-bg-grey-200,
.fw-bg-grey-300,
.fw-bg-peach,
.fw-bg-gradient.sandstone_to_aqua,
.fw-bg-gradient.blue_to_orange,
.fw-bg-gradient.aqua_to_sandstone,
.fw-bg-gradient.aqua_to_blue {
  color: #15294f;
  color: var(--p-navy-blue);
}

/* End BG Colour Text Colour Options */

/* Section Title Border Logic */

.fw-bg-blue .title-border--bg-logic,
.fw-bg-navy-blue .title-border--bg-logic,
.fw-bg-electric-blue .title-border--bg-logic,
.fw-bg-electric_blue .title-border--bg-logic,
.navy_to_aqua .title-border--bg-logic,
.fw-bg-gradient.blue_to_aqua .title-border--bg-logic {
  border-color: #FFFFFF;
  border-color: var(--grey-000);
  background-color: var(--grey-000);
}

.soft_blue_radial .title-border--bg-logic,
.true_blue_radial .title-border--bg-logic,
.orange_radial .title-border--bg-logic,
.true_blue_linear .title-border--bg-logic,
.fw-bg-aqua .title-border--bg-logic,
.fw-bg-peach .title-border--bg-logic,
.fw-bg-grey-200 .title-border--bg-logic,
.fw-bg-grey-300 .title-border--bg-logic,
.fw-bg-gradient.sandstone_to_aqua .title-border--bg-logic,
.fw-bg-gradient.aqua_to_sandstone .title-border--bg-logic,
.fw-bg-gradient.aqua_to_blue .title-border--bg-logic {
  background-color: var(--p-navy-blue);
  color: var(--p-navy-blue);
  border-color: #15294f;
  border-color: var(--p-navy-blue);
}

.fw-bg-light_grey .title-border--bg-logic {
  background-color: #a2a2a2;
  color: #a2a2a2;
  border-color: #a2a2a2;
  border-color: #a2a2a2;
}

.fw-bg-light-blue .title-border--bg-logic, {
  background-color: #009ad7;
  color: #009ad7;
  border-color: #009ad7;
  border-color: #009ad7;

}


.fw-bg-gradient.blue_to_orange .title-border--bg-logic {
  background-color: var(--grey-000);
  border-color: #FFFFFF;
  border-color: var(--grey-000);

}

.fw-bg-gradient.navy_to_aqua {
  color: var(--grey-000);
}

/* End Section Title Border Logic */

.full-width {
  width: 100%;
  max-width: 100vw;
}

.v-small {
  margin-top: 16px;
  margin-bottom: 16px;
}

.v-medium {
  margin-top: 20px;
  margin-bottom: 20px;
}

.v-large {
  margin-top: 32px;
  margin-bottom: 32px;
}

.v-xl {
  margin-top: 64px;
  margin-bottom: 64px;
}

@media screen and (min-width: 560px) {
  .v-small {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .v-medium {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .v-large {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .v-xl {
    margin-top: 112px;
    margin-bottom: 112px;
  }
}

@media screen and (min-width: 1280px) {
  .v-small {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .v-medium {
    margin-top: 48px;
    margin-bottom: 48px;
  }

  .v-large {
    margin-top: 72px;
    margin-bottom: 72px;
  }

  .v-xl {
    margin-top: 96px;
    margin-bottom: 96px;
  }

}

@media screen and (min-width: 1940px) {
  .v-small {
    margin-top: 32px;
    margin-bottom: 32px;
  }

  .v-medium {
    margin-top: 64px;
    margin-bottom: 64px;
  }

  .v-large {
    margin-top: 96px;
    margin-bottom: 96px;
  }

  .v-xl {
    margin-top: 144px;
    margin-bottom: 144px;
  }

}

/* This was not implemented, but may have some legacy code, so dont' want to delete. Original intention in the base file was to add reverse options to all modules, complexity was not appropriate for the project. */
.bg-wrapper *.reverse-content {
  display: flex;
  flex-direction: column-reverse;
}

/* This was not implemented, but may have some legacy code, so dont' want to delete. Original intention in the base file was to add reverse options to all modules, complexity was not appropriate for the project. */
@media screen and (max-width: 480px) {
  *.reverse-content {
    display: flex;
    flex-direction: column-reverse;
    /* flex-direction: row-reverse; */
  }

  *.reverse-mobile-content {
    display: flex;
    flex-direction: column-reverse;
    /* flex-direction: row-reverse; */
  }
}

.fa-icon {
  width: 24px;
  height: 24px;
  color: var(--grey-400);
  color: var(--p-navy-blue);
  fill: var(--p-navy-blue);
}

.fa-icon--lg {
  width: 40px;
  height: 40px;
}

/* Mobile sizing for icons, resized on desktop */
.icon--72 {
  width: 32px;
  height: 32px;
}

.icon--96 {
  width: 48px;
  height: 48px;
}

/* Icon resizing on screens 480px and up */
@media screen and (min-width: 560px) {
  .icon--72 {
    width: 72px;
    height: 72px;
  }

  .icon--96 {
    width: 96px;
    height: 96px;
  }
}

.dev,
.dev *,
.dev * {
  outline: 1px solid hotpink;
  color: hotpink !important;
}

.swiper {
  width: 100%;
  height: 100%;
}

.place-center {
  display: flex;
  justify-content: center;
  align-items: center;
}

.cta-wrapper {
  min-height: 54px;
}

.section__cta-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  margin-top: 48px;
}

.gradient-overlay {
  position: relative;
}

.navy-gradient-overlay::after {
  content: '';
  position: absolute;
  /* since this is an overlay you need z-index below it to place elements, not 0 as you cannot put things under it */
  z-index: 10;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background: #081f3e00 linear-gradient(360deg, #081f3e -30%, #5A697E00 100%) 0% 0% no-repeat padding-box;
}

.bg-color-padding {
  padding-top: clamp(16px, 25vw, 32px);
  padding-bottom: clamp(16px, 25vw, 32px);
}

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

/* Utility Classes used across many different modules
* These are basic building blocks of components that are commonly used
*
 */

.p-0 {
    padding: 0px;
}

.m-0,
.m-0>p {
    margin: 0px;
}

.mx-auto {
    margin-left: auto;
    margin-right: auto;
}

.ml-0 {
    margin-left: 0px;
}

.z-10 {
    z-index: 11;
    position: relative;
}

.p-rel {
    position: relative;
}

.u-case,
.text-uppercase {
    text-transform: uppercase;
}

.c-text,
.text-center {
    text-align: center;
}

.font-bold {
    font-weight: bold;
}

.t-normal {
    font-weight: normal;
}

.f-size-28 {
    font-size: 28px;
}
/* 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;
  }
}

/* beautify ignore:end */