html {
scroll-behavior: smooth;
}
:root {
}
:root {
/* Heading-specific font sizes for clamp (min, preferred, max) */
--h1-font-size-min: 2rem;
--h1-font-size-preferred: 5vw;
--h1-font-size-max: 3.5rem;
--h2-font-size-min: 1.75rem;
--h2-font-size-preferred: 4vw;
--h2-font-size-max: 2.5rem;
--h3-font-size-min: 1.5rem;
--h3-font-size-preferred: 3vw;
--h3-font-size-max: 2rem;
--h4-font-size-min: 1.25rem;
--h4-font-size-preferred: 2.5vw;
--h4-font-size-max: 1.5rem;
--h5-font-size-min: 1rem;
--h5-font-size-preferred: 2vw;
--h5-font-size-max: 1.25rem;
--h6-font-size-min: 0.875rem;
--h6-font-size-preferred: 1.5vw;
--h6-font-size-max: 1rem;
/* Heading-specific font weights */
--h1-font-weight: 700;
--h2-font-weight: 700;
--h3-font-weight: 600;
--h4-font-weight: 600;
--h5-font-weight: 500;
--h6-font-weight: 500;
/* Heading-specific line heights */
--h1-line-height: 1.2;
--h2-line-height: 1.25;
--h3-line-height: 1.3;
--h4-line-height: 1.35;
--h5-line-height: 1.4;
--h6-line-height: 1.4;
/* Heading-specific letter spacing */
--h1-letter-spacing: -0.01em;
--h2-letter-spacing: -0.015em;
--h3-letter-spacing: -0.02em;
--h4-letter-spacing: -0.025em;
--h5-letter-spacing: -0.03em;
--h6-letter-spacing: -0.035em;
/* Heading-specific margins */
--h1-margin-top: 1.5em;
--h1-margin-bottom: 0.75em;
--h2-margin-top: 1.25em;
--h2-margin-bottom: 0.65em;
--h3-margin-top: 1rem;
--h3-margin-bottom: 0.5em;
--h4-margin-top: 0.85em;
--h4-margin-bottom: 0.4em;
--h5-margin-top: 0.75em;
--h5-margin-bottom: 0.35em;
--h6-margin-top: 0.65em;
--h6-margin-bottom: 0.3em;
/* Heading-specific colors */
--h1-color: var(--heading-color);
--h2-color: var(--heading-color);
--h3-color: var(--heading-color);
--h4-color: var(--heading-color);
--h5-color: var(--heading-color);
--h6-color: var(--text-color-primary);
/* Font weight variables */
--font-weight-light: 300;
--font-weight-normal: 400;
--font-weight-medium: 500;
--font-weight-bold: 700;
/* Line height variables */
--line-height-base: 1.6;
--line-height-tight: 1.2;
/* Letter spacing */
--letter-spacing-base: -0.01em;
/* Margins for spacing */
--margin-base: 1rem;
}
/* Reset and base styles */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
/* Base body styles */
body {
font-family: var(--font-family-base);
font-size: var(--font-size-base);
font-weight: var(--font-weight-normal);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
color: var(--text-color-primary);
}
/* Headings with specific variables and clamp */
h1,
.h1 {
font-family: var(--font-family-heading);
font-size: clamp(var(--h1-font-size-min), var(--h1-font-size-preferred), var(--h1-font-size-max));
font-weight: var(--h1-font-weight);
line-height: var(--h1-line-height);
letter-spacing: var(--h1-letter-spacing);
margin-top: var(--h1-margin-top);
margin-bottom: var(--h1-margin-bottom);
color: var(--h1-color);
text-wrap-style: balance;
}
h2,
.h2 {
font-family: var(--font-family-heading);
font-size: clamp(var(--h2-font-size-min), var(--h2-font-size-preferred), var(--h2-font-size-max));
font-weight: var(--h2-font-weight);
line-height: var(--h2-line-height);
letter-spacing: var(--h2-letter-spacing);
margin-top: var(--h2-margin-top);
margin-bottom: var(--h2-margin-bottom);
color: var(--h2-color);
text-wrap-style: balance;
}
h3,
.h3 {
font-family: var(--font-family-heading);
font-size: clamp(var(--h3-font-size-min), var(--h3-font-size-preferred), var(--h3-font-size-max));
font-weight: var(--h3-font-weight);
line-height: var(--h3-line-height);
letter-spacing: var(--h3-letter-spacing);
margin-top: var(--h3-margin-top);
margin-bottom: var(--h3-margin-bottom);
color: var(--h3-color);
text-wrap-style: balance;
}
h4,
.h4 {
font-family: var(--font-family-heading);
font-size: clamp(var(--h4-font-size-min), var(--h4-font-size-preferred), var(--h4-font-size-max));
font-weight: var(--h4-font-weight);
line-height: var(--h4-line-height);
letter-spacing: var(--h4-letter-spacing);
margin-top: var(--h4-margin-top);
margin-bottom: var(--h4-margin-bottom);
color: var(--h4-color);
text-wrap-style: balance;
}
h5,
.h5 {
font-family: var(--font-family-heading);
font-size: clamp(var(--h5-font-size-min), var(--h5-font-size-preferred), var(--h5-font-size-max));
font-weight: var(--h5-font-weight);
line-height: var(--h5-line-height);
letter-spacing: var(--h5-letter-spacing);
margin-top: var(--h5-margin-top);
margin-bottom: var(--h5-margin-bottom);
color: var(--h5-color);
text-wrap-style: balance;
}
h6,
.h6 {
font-family: var(--font-family-heading);
font-size: clamp(var(--h6-font-size-min), var(--h6-font-size-preferred), var(--h6-font-size-max));
font-weight: var(--h6-font-weight);
line-height: var(--h6-line-height);
letter-spacing: var(--h6-letter-spacing);
margin-top: var(--h6-margin-top);
margin-bottom: var(--h6-margin-bottom);
color: var(--h6-color);
text-wrap-style: balance;
}
/* Paragraphs */
p {
margin-bottom: var(--margin-base);
color: var(--text-color-primary);
}
/* Links */
a {
color: var(--link-color);
text-decoration: none;
transition: color 0.2s ease;
}
a:hover {
color: var(--link-color-hover);
text-decoration: underline;
}
a:visited {
color: var(--link-color-visited);
}
/* Blockquote */
blockquote {
border-left: 4px solid var(--text-color-muted);
padding-left: 1rem;
margin: var(--margin-base) 0;
color: var(--text-color-secondary);
font-style: italic;
}
/* Code and preformatted text */
code {
font-family: var(--font-family-monospace);
font-size: var(--font-size-sm);
background-color: rgba(0, 0, 0, 0.05);
padding: 0.2em 0.4em;
border-radius: 3px;
color: var(--text-color-secondary);
}
pre {
font-family: var(--font-family-monospace);
font-size: var(--font-size-sm);
background-color: rgba(0, 0, 0, 0.05);
padding: 1rem;
border-radius: 5px;
overflow-x: auto;
margin: var(--margin-base) 0;
line-height: var(--line-height-tight);
color: var(--text-color-secondary);
}
/* Lists */
ul, ol {
margin: var(--margin-base) 0;
padding-left: 2rem;
}
li {
margin-bottom: 0.5rem;
color: var(--text-color-primary);
}
/* Inline elements */
strong {
font-weight: var(--font-weight-bold);
color: var(--text-color-primary);
}
em {
font-style: italic;
color: var(--text-color-primary);
}
small {
font-size: var(--font-size-sm);
color: var(--text-color-muted);
}
sub, sup {
font-size: var(--font-size-sm);
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Horizontal rule */
hr {
border: none;
border-top: 1px solid var(--text-color-muted);
margin: var(--margin-base) 0;
}
form,
form * {
all: revert;
}
[data-hsfc-id=Renderer] .hsfc-Row,
[data-hsfc-id=Renderer] .hsfc-DropdownField>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-EmailField>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-PhoneField>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-TextField>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-TextareaField>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-DateField>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-RadioFieldGroup>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup>*:not(:last-child),
[data-hsfc-id=Renderer] .hsfc-NumberField>*:not(:last-child)
{
margin-bottom: 0 !important;
}
[data-hsfc-id=Renderer] .hsfc-Heading {
margin-bottom: 0 !important;
padding-bottom: 1em;
border-bottom: 1px solid #ccc;
}
[data-hsfc-id=Renderer] .hsfc-RichText *:first-child {
margin-top: 0 !important;
}
[data-hsfc-id=Renderer] .hsfc-RichText *:last-child {
margin-bottom: 0 !important;
}
.hsfc-Step__Content { padding: 0 !important;}
/* FORMS * * * * * * * * * * * * * * * * * * * * * * * */
form,
.hsfc-Step__Content {
--font-color: #333;
--font-weight: 400;
--structure-column-gap: 1em;
--structure-row-gap: 1em;
--field-font-color: var(--font-color);
--field-font-family: sans-serif;
--field-background: rgba(245,248,250,1.0);
--field-border-size: 1px;
--field-border-type: solid;
--field-border-colour: #ccc;
--field-padding-inline: 0.5rem;
--field-padding-block: 1rem;
--field-border-radius: 0.25rem;
--field-min-height: 50px;
--label-font-size: 1rem;
--label-line-height: 1.1;
--label-font-family: sans-serif;
--label-font-weight: 600;
--label-color: var(--module-title-color);
--label-background: transparent;
--label-padding-inline: 0;
--label-padding-block: 0 0.5em;
--group-label-font-size: 1rem;
--group-label-line-height: var(--label-font-height);
--group-label-font-family: var(--label-font-family);
--group-label-font-weight: var(--label-font-weight);
--group-label-color: var(--label-color);
--group-label-background: var(--label-font-background);
--group-label-padding-inline: var(--label-padding-inline);
--group-label-padding-block: var(--label-padding-block);
--check-radio-column-gap: 0.5em;
--check-radio-row-gap: 0.5em;
--check-radio-font-size: 1rem;
--check-radio-font-color: #333;
--check-radio-font-family: sans-serif;
--check-radio-font-weight: 400;
--alert-text-colour: #F00;
--alert-text-size: 0.75rem;
--hsf-default-button__background-color: var(--hs-primary) !important;
container-type: inline-size;
display: grid;
row-gap: var(--structure-row-gap);
width: 100% !important;
padding: 0 !important;
margin: 0 !important;
}
form fieldset {
all: unset;
display: grid;
gap: var(--structure-column-gap);
align-items: flex-start;
}
form fieldset div.input /* OLD */
{
display: grid;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
form fieldset div:has( > label) /* BOTH */
{
display: grid;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
}
form ul, /* OLD */
.hsfc-CheckboxFieldGroup__Options, /* NEW */
.hsfc-RadioFieldGroup__Options, /* NEW */
.hsfc-CheckboxFieldGroup, /* NEW */
.hsfc-RadioFieldGroup /* NEW */
{
padding: 0 !important;
margin: 0 !important;
list-style-type: none !important;
display: grid !important;
row-gap: var(--check-radio-row-gap) !important;
}
.hsfc-CheckboxFieldGroup, /* NEW */
.hsfc-RadioFieldGroup /* NEW */
{
row-gap: 0 !important;
}
/* Elements */
form fieldset textarea,
form fieldset select,
form fieldset input[type="text"],
form fieldset input[type="email"],
form fieldset input[type="tel"] {
display: grid;
width: 100% !important;
box-sizing: border-box !important;
font-family: var(--field-font-family) !important;
font-size: var(--field-font-size) !important;
font-weight: var(--field-font-weight) !important;
padding-inline: var(--field-padding-inline) !important;
padding-block: var(--field-padding-inline) !important;
border-radius: var(--field-border-radius) !important;
color: var(--field-font-color) !important;
background-color: var(--field-background) !important;
border: var(--field-border-size) var(--field-border-type) var(--field-border-colour) !important;
min-height: var(--field-min-height) !important;
}
form fieldset input[type="radio"],
form fieldset input[type="checkbox"] {
margin: 0 !important;
width: auto !important;
}
/* Labels */
form fieldset label
{
display: block;
width: 100% !important;
font-size: var(--label-font-size) !important;
color: var(--label-color) !important;
font-family: var(--label-font-family) !important;
font-weight: var(--label-font-weight) !important;
padding-block: var(--label-padding-block) !important;
padding-inline: var(--label-padding-inline) !important;
line-height: var(--label-line-height) !important;
}
.hs-fieldtype-radio > label, /* OLD */
.hs-fieldtype-checkbox > label, /* OLD */
.hsfc-CheckboxFieldGroup > label, /* NEW */
.hsfc-RadioFieldGroup > label { /* NEW */
font-size: var(--group-label-font-size) !important;
font-weight: var(--group-label-font-weight) !important;
color: var(--group-label-color) !important;
font-family: var(--group-label-font-family) !important;
padding-block: var(--group-label-padding-block) !important;
padding-inline: var(--group-label-padding-inline) !important;
line-height: var(--group-label-line-height) !important;
}
/* Radio and checkboxes */
.hs-form-booleancheckbox-display, /* OLD */
.hs-form-radio-display, /* OLD */
.hs-form-checkbox-display, /* OLD */
.hsfc-CheckboxField .hsfc-FieldLabel, /* NEW */
.hsfc-RadioField .hsfc-FieldLabel, /* NEW */
.hsfc-CheckboxFieldGroup__Options label, /* NEW */
.hsfc-RadioFieldGroup__Options label /* NEW */
{
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center !important;
line-height: 1.1 !important;
padding: 0 !important;
gap: var(--check-radio-column-gap) !important;
font-size: var(--check-radio-font-size) !important;
color: var(--check-radio-font-color) !important;
font-family: var(--check-radio-font-family) !important;
font-weight: var(--check-radio-font-weight) !important;
}
/* For the AU part on the phone numbers */
.hsfc-PhoneInput /* NEW */
{
display: grid !important;
grid-template-columns: auto 1fr !important;
align-items: center !important;
}
.hsfc-PhoneInput input[type="tel"] /* NEW */
{
border-radius: 0 var(--field-border-radius) var(--field-border-radius) 0 !important;
}
.hsfc-PhoneInput__FlagAndCaret /* NEW */
{
box-sizing: border-box !important;
height: 100% !important;
padding: 0.5em !important;
display: grid !important;
place-content: center !important;
background: var(--field-border-colour) !important;
color: #fff !important;
line-height: 1 !important;
border-radius: var(--field-border-radius) 0 0 var(--field-border-radius) !important;
border: none !important;
}
/* Recaptchas */
.hsfc-ReCaptchaV2 iframe{
max-height: 60px;
border: 0 none;
max-width: 256px;
}
/* Errors - This will need work way more added to it for the old styles */
.hs-error-msgs,
.hsfc-ErrorAlert /* NEW */
{
color: var(--alert-text-colour) !important;
font-size: var(--alert-text-size) !important;
padding-top: 0.5em !important;
}
/* Main Structure ******************************************************************/
fieldset.form-columns-1, /* OLD */
.hsfc-Row /* NEW */
{
display: grid;
grid-template-columns: 1fr !important;
gap: var(--structure-column-gap) !important;
align-items: flex-start !important;
}
@container (width > 460px) {
fieldset.form-columns-2, /* OLD */
.hsfc-Row:has(> div:nth-child(2)) /* NEW */
{
grid-template-columns: 1fr 1fr !important;
}
}
@container (width > 800px) {
fieldset.form-columns-3, /* OLD */
.hsfc-Row:has(> div:nth-child(3)) /* NEW */
{
grid-template-columns: 1fr 1fr 1fr !important;
}
}
.button-group {
display: flex;
flex-wrap: wrap;
gap: var(--button-group-gap);
}
/* Base button styles */
.button,
.dummy-button {
display: inline-flex;
justify-content: space-between;
gap: 0.5em;
align-items: center;
padding: var(--button-padding);
font-size: var(--button-font-size);
font-weight: var(--button-font-weight);
line-height: var(--button-line-height);
border-radius: var(--button-border-radius);
text-align: center;
text-decoration: none;
cursor: pointer;
transition: var(--button-transition);
box-sizing: border-box;
text-decoration: none;
}
.button:hover {
text-decoration: none;
}
.dummy-button,
.button--no-link{
cursor: default;
}
.button i,
.dummy-button i {
font-size: 0.875em;
transition: transform var(--global-trans);
}
.button:hover i {
transform: translateX(0.25em);
}
.button--no-bg {
padding-inline: 0px;
padding-block: 0px;
color: var(--button-primary-bg);
font-weight: 600;
}
/* Primary button */
.button-primary.button-default,
.button-primary.button-default:visited,
.button-primary.button-default.button--no-link {
background-color: var(--button-primary-bg);
color: var(--button-primary-text);
border: none;
}
.button-primary.button-default:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-primary-bg-hover);
color: var(--button-primary-text-hover);
border: none;
}
/* Primary hollow button */
.button-primary.button-hollow,
.button-primary.button-hollow:visited,
.button-primary.button-hollow.button--no-link {
background-color: transparent;
color: var(--button-primary-bg);
border: var(--button-hollow-border-width) solid var(--button-primary-border);
}
.button-primary.button-hollow:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-primary-bg-hover);
color: var(--button-primary-text-hover);
border-color: var(--button-primary-bg-hover);
}
/* Primary text button */
.button-primary.button-text,
.button-primary.button-text:visited,
.button-primary.button-text.button--no-link {
background-color: transparent;
color: var(--button-primary-bg);
border: none;
padding-block: 0;
padding-inline: 0;
}
.button-primary.button-text:hover:not(:disabled):not(.button--no-link) {
background-color: transparent;
color: var(--button-primary-bg-hover);
border: none;
padding-inline: 0;
padding-block: 0;
}
/* Primary border button */
.button-primary-border,
.button-primary-border:visited,
.button-primary-border.button--no-link {
border-color: var(--button-primary-text);
}
/* Secondary button */
.button-secondary.button-default,
.button-secondary.button-default:visited,
.button-secondary.button-default.button--no-link {
background-color: var(--button-secondary-bg);
color: var(--button-secondary-text);
border: none;
}
.button-secondary.button-default:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-secondary-bg-hover);
color: var(--button-secondary-text-hover);
border: none;
}
/* Secondary hollow button */
.button-secondary.button-hollow,
.button-secondary.button-hollow:visited,
.button-secondary.button-hollow.button--no-link {
background-color: transparent;
color: var(--button-secondary-bg);
border: var(--button-hollow-border-width) solid var(--button-secondary-border);
}
.button-secondary.button-hollow:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-secondary-bg-hover);
color: var(--button-secondary-text-hover);
border-color: var(--button-secondary-bg-hover);
}
/* Secondary text button */
.button-secondary.button-text,
.button-secondary.button-text:visited,
.button-secondary.button-text.button--no-link {
background-color: transparent;
color: var(--button-secondary-bg);
border: none;
padding-block: 0;
padding-inline: 0;
}
.button-secondary.button-text:hover:not(:disabled):not(.button--no-link) {
background-color: transparent;
color: var(--button-secondary-bg-hover);
border: none;
padding-block: 0;
padding-inline: 0;
}
/* Secondary border button */
.button-secondary-border,
.button-secondary-border:visited,
.button-secondary-border.button--no-link {
border-color: var(--button-secondary-text);
}
/* Tertiary button */
.button-tertiary.button-default,
.button-tertiary.button-default:visited,
.button-tertiary.button-default.button--no-link {
background-color: var(--button-tertiary-bg);
color: var(--button-tertiary-text);
border: none;
}
.button-tertiary.button-default:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-tertiary-bg-hover);
color: var(--button-tertiary-text-hover);
border: none;
}
/* Tertiary hollow button */
.button-tertiary.button-hollow,
.button-tertiary.button-hollow:visited,
.button-tertiary.button-hollow.button--no-link {
background-color: transparent;
color: var(--button-tertiary-bg);
border: var(--button-hollow-border-width) solid var(--button-tertiary-border);
}
.button-tertiary.button-hollow:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-tertiary-bg-hover);
color: var(--button-tertiary-text-hover);
border-color: var(--button-tertiary-bg-hover);
}
/* Tertiary text button */
.button-tertiary.button-text,
.button-tertiary.button-text:visited,
.button-tertiary.button-text.button--no-link {
background-color: transparent;
color: var(--button-tertiary-bg);
border: none;
padding-block: 0;
padding-inline: 0;
}
.button-tertiary.button-text:hover:not(:disabled):not(.button--no-link) {
background-color: transparent;
color: var(--button-tertiary-bg-hover);
border: none;
padding-block: 0;
padding-inline: 0;
}
/* Tertiary border button */
.button-tertiary-border,
.button-tertiary-border:visited,
.button-tertiary-border.button--no-link {
border-color: var(--button-tertiary-text);
}
/* Light button */
.button-light.button-default,
.button-light.button-default:visited,
.button-light.button-default.button--no-link {
background-color: var(--button-light-bg);
color: var(--button-light-text);
border: var(--button-border-width) solid var(--button-light-border);
}
.button-light.button-default:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-light-bg-hover);
color: var(--button-light-text-hover);
border-color: var(--button-light-bg-hover);
}
/* Light hollow button */
.button-light.button-hollow,
.button-light.button-hollow:visited,
.button-light.button-hollow.button--no-link {
background-color: transparent;
color: var(--button-light-bg);
border: var(--button-hollow-border-width) solid var(--button-light-border);
}
.button-light.button-hollow:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-light-bg-hover);
color: var(--button-light-text-hover);
border-color: var(--button-light-bg-hover);
}
/* Light text button */
.button-light.button-text,
.button-light.button-text:visited,
.button-light.button-text.button--no-link {
background-color: transparent;
color: var(--button-light-bg);
border: none;
padding-inline: 0;
transition: 300ms;
}
.button-light.button-text:hover:not(:disabled):not(.button--no-link) {
background-color: transparent;
color: var(--button-light-bg);
border: none;
padding-inline: 0;
opacity: 0.75;
}
/* Light border button */
.button-light-border,
.button-light-border:visited,
.button-light-border.button--no-link {
border-color: var(--button-light-text);
}
/* Dark button */
.button-dark.button-default,
.button-dark.button-default:visited,
.button-dark.button-default.button--no-link {
background-color: var(--button-dark-bg);
color: var(--button-dark-text);
border: none;
}
.button-dark.button-default:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-dark-bg-hover);
color: var(--button-dark-text-hover);
border: none;
}
/* Dark hollow button */
.button-dark.button-hollow,
.button-dark.button-hollow:visited,
.button-dark.button-hollow.button--no-link {
background-color: transparent;
color: var(--button-dark-bg);
border: var(--button-hollow-border-width) solid var(--button-dark-border);
}
.button-dark.button-hollow:hover:not(:disabled):not(.button--no-link) {
background-color: var(--button-dark-bg-hover);
color: var(--button-dark-text-hover);
border-color: var(--button-dark-bg-hover);
}
/* Dark text button */
.button-dark.button-text,
.button-dark.button-text:visited,
.button-dark.button-text.button--no-link {
background-color: transparent;
color: var(--button-dark-bg);
border: none;
padding-inline: 0;
}
.button-dark.button-text:hover:not(:disabled):not(.button--no-link) {
background-color: transparent;
color: var(--button-dark-bg-hover);
border: none;
padding-inline: 0;
}
/* Dark border button */
.button-dark-border,
.button-dark-border:visited,
.button-dark-border.button--no-link {
border-color: var(--button-dark-text);
}
/* Disabled states */
.button:disabled,
.button-primary:disabled,
.button-secondary:disabled,
.button-tertiary:disabled{
opacity: var(--button-disabled-opacity);
cursor: not-allowed;
background: var(--button-disabled-background);
border-color: var(--button-disabled-background);
color: var(--button-disabled-text);
}
.button-primary-hollow:disabled,
.button-primary-border:disabled,
.button-secondary-hollow:disabled,
.button-secondary-border:disabled,
.button-tertiary-hollow:disabled,
.button-tertiary-border:disabled{
opacity: var(--button-disabled-opacity);
cursor: not-allowed;
border-color: var(--button-disabled-background);
color: var(--button-disabled-text);
}
.line-separator {
content: '';
display: block;
width: 200px;
height: 3px;
border-radius: 10px;
background: var(--heading-color);
}
.line-separator--faded {
opacity: 0.25;
}
.line-separator--left {
margin-right: auto;
}
.line-separator--center {
margin-inline: auto;
}
.line-separator--right {
margin-left: auto;
}
.module {
padding-inline: var(--window-padding--inline);
width: 100%;
text-align: center;
overflow: clip;
}
.module__inner {
display: grid;
grid-template-columns: 1fr;
place-content: center;
width: 100%;
gap: var(--organism-standard-gap);
max-width: var(--max-width);
padding-block: var(--module-padding--block);
margin-inline: auto;
}
.module-header {
display: grid;
gap: var(--molecule-standard-gap);
text-align: left;
}
.mv-title__wrapper,
.module-header__wrapper {
display: grid;
gap: var(--molecule-tiny-gap);
}
.mv-title__pre-title,
.module-header__pre-title {
color: var(--module-pretitle-color);
}
.mv-title__wrapper{
display: grid;
gap: 0;
}
.mv-title__title,
h1.module-header__title,
h2.module-header__title,
h3.module-header__title,
h4.module-header__title,
h5.module-header__title,
h6.module-header__title{
margin-top: 0;
margin-bottom: 0;
color: var(--module-title-color);
}
.mv-title__sub-title,
.module-header__sub-title {
color: var(--module-subtitle-color);
}
.module-header__intro {
font-size: 1.125em;
}
.module--text-left .module-header .line-separator--center{
margin-left: 0;
margin-right: auto;
}
.module--text-right .module-header .line-separator--center{
margin-left: auto;
margin-right: 0;
}
.scheme--light {
}
.scheme--dark {
}
.module--block-left .module__inner {
justify-content: flex-start;
}
.module--md-block-left .module__inner {
justify-content: flex-start;
}
.module--md-block-center {
}
.module--md-block-right {
justify-content: flex-end;
}
.module--text-left {
text-align: left;
}
.module--text-center {
text-align: center;
}
.module--text-right {
text-align: right;
}
.scheme--dark .module-header__title{
color: var(--module-title-color--dark);
}
.scheme--dark .module-header__pre-title{
color: var(--module-pretitle-color--dark);
}
.scheme--dark .module-header__sub-title{
color: var(--module-subtitle-color--dark);
}
.scheme--dark .module-header__intro {
color: var(--hs-primary--text-over);
}
.service-content {
font-size: 1.25em;
}
.mv-2-col {
padding-inline: var(--window-padding--inline);
}
.mv-2-col--person {
margin-top: var(--molecule-standard-gap);
margin-bottom: var(--organism-large-gap);
}
.mv-2-col__inner {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: var(--organism-standard-gap);
}
@media all and (min-width: 940px) {
.mv-2-col__inner {
grid-template-columns: 3fr 1fr;
}
}
.mv-2-col--person .mv-2-col__inner {
gap: var(--organism-large-gap);
}
.mv-2-col__main {
}
.mv-2-col--person .mv-2-col__main {
display: grid;
gap: var(--molecule-standard-gap);
}
.mv-2-col__aside {
}
.mv-2-col--person .mv-2-col__aside {
display: flex;
flex-direction: column;
align-items: stretch;
gap: var(--organism-large-gap);
}
.mv-1-col {
padding-inline: var(--window-padding--inline);
}
.mv-1-col__inner {
width: 100%;
max-width: var(--max-width);
margin-inline: auto;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
gap: var(--organism-standard-gap);
}
.mv-1-col__main {
}
.mv-1-col--person {
margin-top: var(--organism-large-gap);
}
.mv-1-col--person .mv-1-col__main {
display: grid;
gap: var(--molecule-standard-gap);
}
.hs-menu-wrapper {
padding: var(--molecule-standard-gap);
}
.hs-menu-wrapper ul {
padding: 0;
margin: 0;
list-style-type: none;
}
.hs-menu-wrapper ul li {
padding: 0;
margin: 0;
}
.hs-menu-wrapper ul li a {
color: inherit;
display: block;
padding-block: 0.375em;
}
.hs-menu-wrapper ul ul.hs-menu-children-wrapper {
padding-left: var(--atom-standard-gap);
border-left: 3px solid rgba(255,255,255,0.25);
}
ul.mv-menu{
padding: 0;
margin: 0;
list-style-type: none;
}
ul.mv-menu li {
padding: 0;
margin: 0;
position: relative;
}
ul.mv-menu li .mv-menu__link {
color: inherit;
display: block;
padding-block: 0.375em;
}
ul.mv-menu ul.hs-menu-children-wrapper {
padding-left: var(--atom-standard-gap);
border-left: 3px solid rgba(255,255,255,0.25);
}
ul.mv-menu.menu--drop-down li.menu-open > ul.mv-menu,
ul.mv-menu.menu--drop-down li:hover > ul.mv-menu {
background-color: blue;
border-radius: 0;
}
ul.mv-menu.menu--drop-down li ul li {
padding: 0;
margin: 0;
}
ul.mv-menu.menu--drop-down li ul li .mv-menu__link{
background-color: var(--hs-white);
}
ul.mv-menu.menu--drop-down li ul li .mv-menu__link:hover {
color: var(--hs-primary--text-over);
background-color: var(--hs-primary);
}
.member-menu__item .mv-menu {
overflow: hidden;
}
.mv-menu.menu--js-accordion .mv-menu {
overflow: hidden;
}
.main-menu__item.has-children.menu-open > .mv-menu {
}
.mv-menu__link > .mv-menu__link-body {
overflow: clip;
}
.mv-menu__link > .mv-menu__link-body i.fa-plus {
transition: transform var(--global-trans);
}
.menu-open > .mv-menu__link > .mv-menu__link-body i.fa-plus {
transform: rotate(45deg);
}
@media (max-width: 1040px){
ul.main-menu:not([data-depth="0"]) {
border-top: 3px solid var(--hs-accent-3);;
border-left: 4px solid var(--hs-accent-3);;
}
ul.main-menu .mv-menu__link > .mv-menu__link-body {
padding-inline: 0;
}
ul.main-menu:not([data-depth="0"]) .mv-menu__link > .mv-menu__link-body {
padding-inline: 1em 0;
}
}
@media (min-width: 1040px){
.mv-menu__link > .mv-menu__link-body .menu-icon {
/* display: none; */
font-size: 14px !important;
border-left: none !important;
}
ul.mv-menu.menu--drop-down li:hover > ul.mv-menu {
z-index: 11;
position: absolute;
left: -0.75em;
overflow: clip;
background-color: blue;
box-shadow: var(--box-shadow);
border-radius: 0 0 var(--global-radius-md) var(--global-radius-md);
height: auto;
}
.main-menu .mv-menu__level-1 > a > .mv-menu__link-body > .mv-menu__link-title {
padding-block: 0.75em;
}
.mv-menu__level-2 .mv-menu__link-title {
padding-inline: 0.75em;
}
ul.mv-menu.menu--drop-down li ul {
display: none;
}
ul.mv-menu.menu--drop-down li.menu-open > ul,
ul.mv-menu.menu--drop-down li:hover > ul {
width: max-content;
}
ul.mv-menu.menu--drop-down li.menu-open > ul,
ul.mv-menu.menu--drop-down li:hover > ul {
gap: 0;
display: grid;
grid-template-columns: 1fr;
}
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
.mv-image {
border-radius: var(--global-image-radius);
width: 100%;
display: block;
height: auto;
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
.mv-tag,
a.mv-tag {
border-radius: var(--global-image-radius);
display: block;
font-size: var(--font-size-xxsm);
padding-block: 0.5em;
padding-inline: 1em;
background: var(--hs-primary--light);
color: var(--hs-primary--text-over);
text-decoration: none;
transition: background-color var(--global-trans);
}
a.mv-tag:hover {
background: var(--hs-primary);
}
.mv-pill{
display: block;
width: 100%;
text-align: center;
border: 0 none;
border-radius: var(--global-radius-md);
padding: var(--atom-small-gap) var(--atom-large-gap);
}
.mv-pill.type-full{
border-radius: var(--global-radius);
}
.mv-pill.type-inline{
width: max-content;
display: inline-block;
}
.mv-pill.theme-primary{
color: var(--hs-primary--text-over);
background-color: var(--hs-primary);
}
.mv-pill.theme-secondary{
color: var(--hs-secondary--text-over);
background-color: var(--hs-secondary);
}
.mv-pill.theme-tertiary{
color: var(--hs-tertiary--text-over);
background-color: var(--hs-tertiary);
}
.mv-pill.style-outline{
border: 1px solid;
background-color: transparent;
}
.mv-pill.style-outline.theme-primary{
color: var(--hs-primary);
}
.mv-pill.style-outline.theme-secondary{
color: var(--hs-secondary);
}
.mv-pill.style-outline.theme-tertiary{
color: var(--hs-tertiary);
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
a.person-detail {
display: grid;
grid-template-columns: auto 1fr;
gap: var(--atom-standard-gap);
color: inherit;
}
.person-detail__icon {
}
.person-detail__label {
}
ul.fancy-list,
.fancy-list > ul{
list-style: none;
padding-left: 0;
display: grid;
gap: var(--molecule-small-gap);
}
ul.fancy-list > li,
.fancy-list > ul > li{
border-left: 3px solid var(--hs-primary);
margin-left: 0;
padding-left: var(--margin-base);
}
.mv-accordion {
text-align: left;
display: grid;
grid-template-columns: 1fr;
gap: var(--molecule-tiny-gap);
}
.mv-accordion__title {
margin: 0;
}
.mv-accordion__body {
display: grid;
gap: 1px;
grid-template-columns: 1fr;
overflow: hidden;
}
.mv-accordion__item {
background: var(--accent-4);
display: grid;
grid-template-columns: 1fr;
}
.mv-accordion__item-header {
gap: 1rem;
border: none;
display: grid;
cursor: pointer;
border-radius: 0;
font-weight: 700;
text-align: left;
align-items: center;
transition: var(--global-trans);
grid-template-columns: 1fr auto;
padding: var(--atom-standard-gap);
font-family: var(--font-family-base);
font-size: var(--font-size-base);
line-height: var(--line-height-base);
letter-spacing: var(--letter-spacing-base);
}
/* OPEN */
.mv-accordion__item-header {
color: var(--hs-primary);
background: var(--hs-accent-4--dark);
}
/* OPEN HOVER */
.mv-accordion__item-header:hover{
color: var(--hs-primary--text-over);
background: var(--hs-primary);
}
/* CLOSED */
.mv-accordion__item-header.closed {
color: var(--hs-primary);
background: var(--hs-accent-4);
}
/* CLOSED HOVER */
.mv-accordion__item-header.closed:hover {
color: var(--hs-primary);
background: var(--hs-accent-4--dark);
}
.mv-accordion__item-header > i {
transition: var(--global-trans);
}
.mv-accordion__item-header.closed > i {
transform: rotate(180deg);
}
.mv-accordion__item-body {
overflow: hidden;
background: var(--hs-accent-4);
}
.mv-accordion__item-body-padding {
display: grid;
grid-template-columns: 1fr;
gap: 1px;
padding: var(--molecule-standard-gap);
}
.mv-single-quote{
position: relative;
display: grid;
gap: 0;
}
.mv-single-quote .icon svg{
fill: var(--hs-primary);
width: 4em;
height: 4em;
}
.scheme--light .mv-single-quote .icon svg{
fill: var(--hs-secondary);
}
.icon.mv-single-quote--before,
.icon.mv-single-quote--after{
padding: 0;
font-size: 1em;
position: absolute;
color: var(--hs-primary);
}
.mv-single-quote--before{
left: calc(var(--molecule-standard-gap) * -1);
top: calc(var(--molecule-standard-gap) * -1);
}
.mv-single-quote--after{
right: calc(var(--molecule-standard-gap) * -1);
bottom: calc(var(--molecule-standard-gap) * -1);
}
.mv-single-quote > .button + .mv-single-quote--after{
bottom: 0;
}
.mv-single-quote > .button{
border-top-left-radius: 0;
border-top-right-radius: 0;
padding: var(--molecule-tiny-gap) var(--molecule-small-gap);
margin-right: auto;
}
.mv-single-quote.has-link .style--mv-card{
border-bottom-left-radius: 0;
}
ul.mv-socials{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: row;
gap: 0.75em;
align-items: center;
align-content: center;
}
.mv-socials__item{
margin: 0;
padding: 0;
}
.mv-socials__item > a{
}
.mv-socials__item > a svg{
display: block;
font-size: var(--font-size-base);
width: 1em;
}
.mv-breadcrumbs {
display: flex;
align-items: center;
justify-content: center;
padding-top: var(--molecule-standard-padding);
padding-inline: var(--window-padding--inline);
}
.mv-breadcrumbs__content {
display: flex;
gap: 0.5em;
padding-block: var(--molecule-standard-gap);
align-items: center;
width: 100%;
max-width: var(--max-width);
}
.mv-breadcrumbs i {
font-size: 0.5em;
}
.style--mv-card{
overflow: hidden;
box-shadow: var(--box-shadow);
border-radius: var(--global-radius-md);
transition: box-shadow var(--global-trans);
background-color: var(--hs-white);
}
.style--mv-card-padding{
padding: var(--molecule-standard-gap);
}
.mv-card {
display: grid;
align-items: flex-start;
overflow: hidden;
text-align: left;
box-shadow: var(--box-shadow);
border-radius: var(--global-radius-md);
transition: box-shadow var(--global-trans);
background-color: var(--hs-white);
grid-template-rows: auto auto 1fr auto;
}
.mv-card__header {
overflow: hidden;
position: relative;
}
.mv-card__body {
padding: 0 var(--molecule-standard-gap) var(--molecule-standard-gap) var(--molecule-standard-gap);
align-items: flex-start;
}
.mv-card__body ul {
padding-left: 0;
list-style-type: none;
}
.mv-card__body ul li {
padding-left: 0.75em;
border-left: 3px solid var(--hs-primary);
color: var(--hs-primary);
font-weight: 700;
}
.mv-card__image {
}
.mv-card__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-radius: 0;
object-fit: cover;
}
.mv-card__title-wrapper{
display: block;
padding: var(--molecule-standard-gap);
}
.mv-card__actions {
display: flex;
padding: 0 var(--molecule-standard-gap) var(--molecule-standard-gap) var(--molecule-standard-gap);
}
.mv-card .mv-card__title,
.mv-card .mv-card__pre-title,
.mv-card .mv-card__sub-title{
color: var(--hs-primary);
}
.mv-card a.mv-card__title-link,
.mv-card a.mv-card__title-link:hover {
text-decoration: none;
}
.mv-card a.mv-card__title-link .mv-card__title-wrapper,
.mv-card a.mv-card__title-link .mv-card__title {
color: var(--button-primary-bg);
transition: color var(--global-trans);
}
.mv-card a.mv-card__title-link:hover .mv-card__title-wrapper,
.mv-card a.mv-card__title-link:hover .mv-card__title {
color: var(--button-primary-bg-hover);
}
.mv-card__pre-title,
.mv-card__sub-title{
opacity: 0.5;
}
.mv-card__pre-title{
}
.with-link .mv-card__title-item-wrapper{
display: flex;
align-items: center;
justify-content: space-between;
}
.mv-card__title{
}
.mv-card__sub-title{
}
.mv-card__copy{
}
.mv-card:hover {
text-decoration: none;
box-shadow: var(--box-shadow);
}
.mv-card.with-header-image .mv-card__title-wrapper{
width: 100%;
color: var(--hs-primary);
}
.mv-card.people-card {
background-color: transparent;
box-shadow: unset;
overflow: visible;
border-radius: 0;
}
.people-card .mv-card__header {
overflow: visible;
}
.people-card .mv-card__body {
}
.people-card .mv-card__image {
display: block;
box-shadow: var(--box-shadow);
border-radius: var(--global-image-radius);
overflow: clip;
}
.people-card .mv-card__img {
aspect-ratio: 1 / 1;
object-fit: cover;
}
.people-card.with-header-image .mv-card__title-wrapper{
text-align: center;
position: static !important;
background: transparent none;
color: var(--text-color-primary);
padding: var(--molecule-small-gap);
}
.people-card .mv-card__title {
color: var(--hs-primary);
margin-bottom: var(--atom-standard-gap);
}
.people-card .mv-card__sub-title{
text-align: center;
color: var(--text-color-primary);
}
.people-card .mv-card__sub-title{
}
.people-card .mv-card__title-item-wrapper{
}
.people-card .mv-card__title{
}
.people-card .mv-card__sub-title{
}
.people-card .mv-card__copy{
}
.mv-card:hover {
}
.news-card {
/* display: grid; */
gap: var(--molecule-standard-gap);
border-radius: var(--global-radius);
text-align: left;
transition: box-shadow var(--global-trans);
width: 100%;
box-shadow: none;
display: grid;
grid-template-rows: auto 1fr;
grid-template-columns: 1fr;
}
.news-card__image {
overflow: clip;
}
.news-card__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 16/9;
border-radius: 0;
object-fit: cover;
transition: transform 300ms;
}
.news-card__body {
display: grid;
grid-template-rows: auto auto 1fr auto;
grid-template-columns: 1fr;
gap: var(--atom-standard-gap);
text-align: left;
padding: var(--molecule-standard-gap);
height: 100%;
align-items: flex-start;
}
.news-card.with-featured .news-card__body{
padding-top: 0;
}
.news-card__title.h4 {
margin-block: 0;
}
.news-card__intro {
font-size: var(--font-size-sm);
height: 100%;
}
.news-card__date {
font-size: var(--font-size-xsm);
opacity: 0.5;
}
.news-card__button {
color: var(--hs-primary);
display: flex;
gap: 1em;
align-items: center;
justify-content: space-between;
font-weight: bold;
align-self: flex-end;
}
.news-card__tags {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: flex-start;
gap: 0.25em;
padding-top: 0.5em;
}
.news-card:hover {
text-decoration: none;
box-shadow: var(--box-shadow);
}
.news-card:hover .news-card__img {
transform: scale(1.05);
}
.blog-filters {
display: flex;
padding-block: var(--molecule-standard-gap);
font-size: 1em;
color: var(--hs-primary);
gap: var(--molecule-tiny-gap);
}
.blog-filters--label{
}
.blog-filters--form{
}
.blog-filters--form .filter-input {
}
.blog-filters--form input.filter-input{
border: 1px solid #ccc !important;
}
.blog-filters--form input.filter-input.checkbox{
}
.blog-filters--form select.filter-input{
}
.mv-pagination{
display: flex;
padding-inline: 0;
padding-block: var(--organism-standard-gap);
align-items: center;
justify-content: center;
gap: clamp(0, 1vw, 10px);
}
.mv-pagination__link{
padding: var(--atom-tiny-gap);
border-radius: var(--global-radius-sm);
min-width: 32px;
text-align: center;
display: block;
}
.mv-pagination__link:hover,
.mv-pagination__link.active,
.mv-pagination__current{
text-decoration: none;
background-color: var(--hs-accent-4--dark);
}
.membership-card {
text-align: left;
--gutter-inline: 2rem;
--gutter-block: 1.5rem;
--module-columns: [full-start] var(--gutter-inline) [content-start] 1fr [content-end] var(--gutter-inline) [full-end];
background: white;
border-radius: 1em;
overflow: clip;
display: flex;
flex-direction: column;
align-items: flex-start;
box-shadow: 0px 0px 20px -10px rgba(0,0,0,0.5);
}
.membership-card__header {
background: var(--hs-secondary);
color: var(--hs-secondary--text-over);
display: grid;
grid-template-columns: var(--module-columns);
grid-template-rows: var(--gutter-block) [title-start] auto [title-end sub-title-start] auto [sub-title-end] var(--gutter-block) [image-start] auto [image-end costs-start] auto [costs-end];
}
.membership-card__title {
margin: 0;
grid-column: content;
grid-row: title;
color: inherit !important;
text-wrap: balance;
display: grid;
gap: 1em;
grid-template-columns: auto 1fr auto;
grid-template-rows: 1fr;
}
.membership-card__sub-title {
margin: 0;
grid-column: content;
grid-row: sub-title;
color: inherit !important;
text-wrap: balance
}
figure.membership-card__image {
grid-column: full;
grid-row: image;
}
figure.membership-card__image img.mv-image {
border-radius: 0 !important;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.membership-card__costs {
grid-column: content;
grid-row: costs;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
padding-block: var(--gutter-block);
align-items: center;
}
@media (min-width: 475px) {
.membership-card__costs {
grid-template-columns: 1fr 1fr;
}
}
.membership-card__price-group {
display: flex;
justify-content: space-between;
grid-template-columns: 1fr 1fr;
grid-template-rows: 1fr;
column-gap: var(--gutter-inline);
align-items: center;
}
.membership-card__price {
line-height: 1.2;
text-align: center;
}
.membership-card__value {
font-weight: bold;
font-size: clamp(var(--h2-font-size-min), var(--h2-font-size-preferred), var(--h2-font-size-max));
}
.membership-card__value span {
}
.membership-card__frequency {
}
.membership-card__price-action {
display: grid;
align-items: center;
justify-content: center;
padding-top: 1em;
}
@media (min-width: 475px) {
.membership-card__price-action {
justify-content: flex-end;
padding-top: 0;
}
}
.membership-card.dark .membership-card__header {
background: var(--hs-primary);
color: var(--hs-primary--text-over);
}
.membership-card__body {
color: var(--text-color-primary);
display: grid;
row-gap: 1em;
grid-template-columns: var(--module-columns);
padding-block: var(--gutter-block);
align-items: flex-start;
}
.membership-card__body-title {
grid-column: content;
font-size: clamp(20px, 4vw, 26px);
font-weight: bold;
line-height: 1.1;
text-wrap: balance;
color: var(--hs-primary);
}
.membership-card__body-description {
grid-column: content;
text-wrap: balance
}
.membership-card__body-groups {
grid-column: content;
display: grid;
gap: 0.5em;
}
.membership-card__feature-group {
}
.membership-card__feature-group-title {
display: grid;
gap: 1em;
grid-template-columns: auto 1fr 70px;
grid-template-rows: 1fr;
align-items: center;
}
.membership-card__feature-group-title:has( + .membership-card__feature-group-items) {
cursor: pointer;
}
.membership-card__feature-group-check {
font-size: 40px;
opacity: 0.5;
color: #465778;
line-height: 1;
transition: opacity 300ms;
}
.active .membership-card__feature-group-check {
opacity: 1;
}
.membership-card__feature-group-label {
font-weight: bold;
font-size: clamp(16px, 2vw, 20px);
color: var(--hs-primary);
line-height: 1.1;
}
.membership-card__feature-group-icon {
background: var(--hs-secondary);
color: var(--hs-primary);
border-radius: 50vw;
text-align: center;
font-weight: bold;
line-height: 1;
height: 34px;
display: grid;
place-content: center;
line-height: 1;
transition: opacity 300ms;
}
.active .membership-card__feature-group-icon {
opacity: 0;
}
.membership-card__feature-group-items {
border-left: 2px solid var(--hs-secondary);
padding-left: 0.5em;
max-height: 0px;
overflow: clip;
transition: max-height 300ms, margin 300ms;
}
.active .membership-card__feature-group-items {
margin-top: 0.5em;
max-height: var(--items-height, 200vw);
}
.membership-card__feature {
display: grid;
gap: 1em;
grid-template-columns: 1fr 70px;
grid-template-rows: 1fr;
font-size: min(0.875em, 16px);
}
.membership-card__feature-label {}
.membership-card__feature-icon {
text-align: center;
}
.membership-card__feature-icon span {
font-weight: bold;
color: var(--hs-secondary);
}
.membership-card__footer {
width: 100%;
display: grid;
row-gap: 1em;
grid-template-columns: var(--module-columns);
margin-top: auto;
}
.membership-card__footer-body {
padding-block: var(--gutter-block);
border-top: 1px solid var(--hs-primary);
grid-column: content;
}
.membership-card__button {
grid-column: content;
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
.mv-card-slider {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--organism-standard-gap);
}
.mv-card-slider--service {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
.mv-card-slider--people {
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}
.mv-card-slider .flickity-viewport {
overflow: visible;
overflow-x: clip;
}
.mv-card-slider__item {
width: 100%;
max-width: 100%;
min-height: 100%;
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
margin-right: var(--organism-standard-gap);
}
.mv-card-slider {
position: relative;
}
.mv-card-slider.soft-edges:before {
content: '';
position: absolute;
left: 0;
top: 0;
width: 20%;
height: 100%;
background: linear-gradient(90deg,rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0) 100%);
z-index: 100;
}
.mv-card-slider.soft-edges:after {
content: '';
position: absolute;
right: 0;
top: 0;
width: 20%;
height: 100%;
background: linear-gradient(90deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
z-index: 100;
}
.mv-card-slider--people .mv-card-slider__item{
max-width: 192px;
}
.mv-card-slider--news .mv-card-slider__item {
max-width: 400px;
}
.mv-card-slider--service .mv-card-slider__item {
max-width: 350px;
}
.mv-card-slider__actions {
display: flex;
align-items: center;
justify-content: center;
gap: 1em;
margin-top: var(--organism-standard-gap);
}
.mv-card-slider__button {
color: var(--hs-primary);
}
.mv-card-slider__action {
aspect-ratio: 1/1;
border-radius: 100vw;
border: 2px solid;
color: black;
width: 3em;
height: 3em;
background: none;
padding: 0;
display: grid;
place-content: center;
transition: background 300ms;
}
.mv-card-slider__action:hover {
color: black;
border-color: black;
background: #f5f6f9;
}
.mv-card-slider__action:disabled {
pointer-events: none;
opacity: 0.25;
}
/* .mv-card-slider__item > * {
outline: 1px solid rgba(0,0,0,0);
transition: outline var(--global-trans), box-shadow var(--global-trans);
}
.mv-card-slider__item.is-selected > * {
outline: 1px solid rgba(0,0,0,0.15);
}
.mv-card-slider__item.is-selected:hover > * {
outline: 1px solid rgba(0,0,0,0);
} */
@media all and (min-width: 740px) {
.mv-card-slider__item {
max-width: calc(50% - (var(--organism-standard-gap) / 2));
}
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
.mv-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--organism-standard-gap);
}
.mv-grid--people {
grid-template-columns: repeat(auto-fit, 12rem);
}
@media all and (min-width: 760px) {
.mv-grid.mv-grid-cols--2,
.mv-grid.mv-grid-cols--3,
.mv-grid.mv-grid-cols--4 {
grid-template-columns: 1fr 1fr;
}
.mv-grid--people {
grid-template-columns: repeat(auto-fit, 12rem);
}
}
@media all and (min-width: 960px) {
.mv-grid.mv-grid-cols--3,
.mv-grid.mv-grid-cols--4 {
grid-template-columns: 1fr 1fr 1fr;
}
}
@media all and (min-width: 1200px) {
.mv-grid.mv-grid-cols--4 {
grid-template-columns: 1fr 1fr 1fr 1fr;
column-gap: var(--molecule-standard-gap);
}
}
body.modal-open{
overflow: hidden;
}
.mv-modal{
opacity: 0;
display: none;
padding: 0;
position: fixed;
inset: 0;
z-index: 999;
background-color: var(--modal-backdrop-bg);
padding: var(--molecule-standard-gap);
--modal-padding: var(--molecule-standard-gap);
}
.mv-modal.open{
opacity: 1;
display: block;
backdrop-filter: blur(10px);
}
.mv-modal__inner{
display: block;
padding: 0;
height: 100vh;
width: 100%;
overflow-x: hidden;
overflow-y: auto;
max-height: calc(100vh - var(--molecule-standard-gap) - var(--molecule-standard-gap));
}
.mv-modal-wrapper{
}
.mv-modal-wrapper__inner{
position: relative;
}
.mv-modal-close{
position: absolute;
top: 1rem;
right: 1rem;
font-size: var(--h3-font-size-min);
border-radius: 100%;
line-height: 1;
color: white;
background-color: var(--hs-primary);
opacity: 0.5;
display: grid;
place-content: center;
padding-top: 2px;
height: 1em;
width: 1em;
border: 0 none;
cursor: pointer;
transition: all 300ms;
}
.mv-modal-close:hover{
color: white;
background-color: var(--hs-primary);
opacity: 1;
}
.mv-modal-body{
display: grid;
gap: var(--modal-padding);
color: var(--modal-body-color);
background-color: var(--modal-body-bg);
border-radius: var(--global-radius);
padding: var(--molecule-standard-gap);
}
.mv-modal-wrapper h2 {
margin-top: 0;
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
body {
--module-gutter-inline: var(--window-padding--inline);
--module-gutter-block: var(--module-padding--block);
--module-margin-block: clamp(20px, 3vw, 40px);
--module-margin-inline: clamp(20px, 3vw, 40px);
--content-max-width: 1200px;
--breakout-max-width: 1300px;
--breakout-size: minmax(0, calc((var(--breakout-max-width) - var(--content-max-width)) / 2));
--content-size: min(100vw - (var(--module-gutter-inline) * 2.5), var(--content-max-width));
--content-size--half: calc(var(--content-size) / 2);
--content-size--third: calc(var(--content-size) / 3);
--content-size--quarter: calc(var(--content-size) / 4);
--content-col: 1fr;
--mv-grid--module__columns--mobile: [full-start] var(--module-gutter-inline) [gutter-start breakout-start content-start content-col-1-start content-col-2-start content-col-3-start] 1fr [content-col-1-end content-col-2-end content-col-3-end content-end breakout-end gutter-end] var(--module-gutter-inline) [full-end];
--mv-grid--module__columns--half: [full-start] var(--module-gutter-inline) [gutter-start] 1fr [breakout-start] var(--breakout-size) [content-start content-col-1-start] var(--content-size--half) [content-col-1-end content-col-2-start] var(--content-size--half) [content-col-2-end content-end] var(--breakout-size) [breakout-end] 1fr [gutter-end] var(--module-gutter-inline) [full-end];
--mv-grid--module__rows--half: [full-start] var(--module-gutter-block) [gutter-start breakout-start content-start content-col-1-start content-col-2-start] 1fr [content-col-1-end content-col-2-end content-end breakout-end gutter-end] var(--module-gutter-block) [full-end];
--mv-grid--module__columns--thirds: [full-start] var(--module-gutter-inline) [gutter-start] 1fr [breakout-start] var(--breakout-size) [content-start content-col-1-start] var(--content-size--third) [content-col-1-end content-col-2-start] var(--content-size--third) [content-col-2-end content-col-3-start] var(--content-size--third) [content-col-3-end content-end] var(--breakout-size) [breakout-end] 1fr [gutter-end] var(--module-gutter-inline) [full-end];
--mv-grid--module__rows--thirds: [full-start] var(--module-gutter-block) [gutter-start breakout-start content-start content-col-1-start] auto [content-col-1-end content-col-2-start] auto [content-col-2-end content-col-3-start] auto [content-col-3-end content-end breakout-end gutter-end] var(--module-gutter-block) [full-end];
--container-col-sml: [full-start] var(--module-gutter-block) [gutter-start breakout-start content-start content-col-1-start content-col-2-start] 1fr [content-col-1-end content-col-2-end content-end breakout-end gutter-end] var(--module-gutter-block) [full-end];
--container-row-sml: [full-start] var(--module-gutter-inline) [gutter-start breakout-start content-start content-col-1-start] auto [content-col-1-end content-col-2-start] auto [content-col-2-end content-end breakout-end gutter-end] var(--module-gutter-inline) [full-end];
--container-col-lrg: [full-start] var(--module-gutter-inline) [gutter-start] 1fr [breakout-start] var(--breakout-size) [content-start content-col-1-start] var(--content-size--half) [content-col-1-end content-col-2-start] var(--content-size--half) [content-col-2-end content-end] var(--breakout-size) [breakout-end] 1fr [gutter-end] var(--module-gutter-inline) [full-end];
--container-row-lrg: [full-start] var(--module-gutter-block) [gutter-start breakout-start content-start content-col-1-start content-col-2-start] 1fr [content-col-1-end content-col-2-end content-end breakout-end gutter-end] var(--module-gutter-block) [full-end];
}
.mv-grid--module {
grid-column: main;
display: grid;
grid-template-columns: var(--mv-grid--module__columns--mobile);
grid-template-rows: var(--mv-grid--module__rows--half);
min-height: 200px;
overflow: clip;
}
.content-grid-half:has(.mv-super-module__content:nth-of-type(2)),
.content-grid-thirds:has(.mv-super-module__content:nth-of-type(2)) {
grid-template-rows: var(--mv-grid--module__rows--half);
}
.content-grid-thirds:has(.mv-super-module__content:nth-of-type(3)) {
grid-template-rows: var(--mv-grid--module__rows--thirds);
}
.col-full-start { grid-column-start: full; }
.col-full-end { grid-column-end: full; }
.col-gutter-start { grid-column-start: gutter; }
.col-gutter-end { grid-column-end: gutter; }
.col-breakout-start { grid-column-start: breakout; }
.col-breakout-end { grid-column-end: breakout; }
.col-content-start { grid-column-start: content; }
.col-content-end { grid-column-end: content; }
.col-content-col-1-start { grid-column-start: content-col-1; }
.col-content-col-1-end { grid-column-end: content-col-1; }
.col-content-col-2-start { grid-column-start: content-col-2; }
.col-content-col-2-end { grid-column-end: content-col-2; }
.row-full-start { grid-row-start: full; }
.row-full-end { grid-row-end: full; }
.row-gutter-start { grid-row-start: gutter; }
.row-gutter-end { grid-row-end: gutter; }
.row-breakout-start { grid-row-start: breakout; }
.row-breakout-end { grid-row-end: breakout; }
.row-content-start { grid-row-start: content; }
.row-content-end { grid-row-end: content; }
.row-content-col-1-start { grid-row-start: content-col-1; }
.row-content-col-1-end { grid-row-end: content-col-1; }
.row-content-col-2-start { grid-row-start: content-col-2; }
.row-content-col-2-end { grid-row-end: content-col-2; }
.grid-area-full {
grid-area: full;
}
.grid-area-gutter {
grid-area: gutter;
}
.grid-area-breakout {
grid-area: breakout;
}
.grid-area-content {
grid-row: 1;
grid-area: content;
}
.grid-area-content-col-1 {
grid-area: content-col-1;
}
.grid-area-content-col-2 {
grid-area: content-col-2;
}
.grid-area-content-col-3 {
grid-area: content-col-3;
}
@media all and (min-width: 600px) {
.mv-grid--module {
grid-template-columns: var(--mv-grid--module__columns--half);
}
.content-grid-half {
grid-template-columns: var(--mv-grid--module__columns--half);
}
.content-grid-thirds {
grid-template-columns: var(--mv-grid--module__columns--thirds);
grid-template-rows: var(--mv-grid--module__rows--thirds);
}
.content-grid-half:has(.mv-super-module__content:nth-of-type(2)),
.content-grid-thirds:has(.mv-super-module__content:nth-of-type(2)),
.content-grid-thirds:has(.mv-super-module__content:nth-of-type(3)) {
grid-template-rows: 1fr;
}
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
.mv-super-module {
grid-column: main;
min-height: 200px;
overflow: clip;
}
.mv-super-module__content {
z-index: 10;
color: white;
display: grid;
place-content: center;
text-align: center;
}
.mv-super-module__content-media {
z-index: 10;
min-height: 100%;
}
.mv-super-module {
position: relative;
}
.height-full.mv-super-module {
height: 100vh !important;
}
/* @import url('http://example.com/example_style.css'); */
/***********************************************/
/* CSS @imports must be at the top of the file */
/* Add them above this section */
/***********************************************/
/*****************************************/
/* Start your style declarations here */
/*****************************************/
.mv-super-module__background {
z-index: 1;
display: grid;
place-content: center;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.height-full .mv-background-img,
.height-content .mv-background-img {
max-height: 100%;
}
.mv-background-image {
display: block;
min-height: 100%;
border-radius: 0;
width: 100%;
}
.mv-background-img {
width: 100%;
height: auto;
min-height: 100%;
object-fit: cover;
border-radius: 0 !important;
display: block;
border-radius: 0;
z-index: 1;
}
.mv-background-img.current {
z-index: 10 !important;
}
.mv-super-module__background--image {
z-index: 1;
display: grid;
width: 100%;
height: auto;
object-fit: cover;
max-height: 100dvh;
min-height: 100%;
border-radius: 0 !important;
}
.height-full .mv-super-module__background--image,
.height-content .mv-super-module__background--image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mv-super-module__background--image-slider {
display: grid;
grid-template-columns: [full-start] 1fr [full-end];
grid-template-rows: [full-start] 1fr [full-end];
position: relative;
z-index: 1;
}
.height-full .mv-super-module__background--image-slider,
.height-content .mv-super-module__background--image-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.mv-super-module__background--image-slider .mv-background-img {
position: relative;
z-index: 1;
grid-area: full;
}
.mv-super-module__background--image-slider .mv-background-img.active {
z-index: 10;
}
::selection {
color: var(--hs-accent-1);
background-color: var(--hs-primary);
}
.bg--hs-primary{ background-color: var(--hs-primary); }
.bg--hs-primary--light{ background-color: var(--hs-primary--light); }
.bg--hs-primary--dark{ background-color: var(--hs-primary--dark); }
.bg--hs-secondary{ background-color: var(--hs-secondary); }
.bg--hs-secondary--light{ background-color: var(--hs-secondary--light); }
.bg--hs-secondary--dark{ background-color: var(--hs-secondary--dark); }
.bg--hs-accent-1{ background-color: var(--hs-accent-1); }
.bg--hs-accent-2{ background-color: var(--hs-accent-2); }
.bg--hs-accent-3{ background-color: var(--hs-accent-3); }
.bg--hs-accent-4{ background-color: var(--hs-accent-4); }
.bg--hs-accent-4--dark{ background-color: var(--hs-accent-4--dark); }
.bg--hs-black{ background-color: var(--hs-black); }
.bg--hs-white{ background-color: var(--hs-white); }
.property-card__CTA-list {
display: grid;
gap: var(--atom-standard-gap);
position: relative;
z-index: 100;
}
.property-card__CTA {
display: grid;
gap: var(--atom-standard-gap);
grid-template-columns: 1.5em 1fr;
}
.property-card__CTA:hover {
text-decoration: none;
color: var(--hs-primary);
}
.property-card__CTA__icon {
font-size: 1.5em;
color: var(--hs-primary);
}
.property-card__CTA__label {
}
.property-service-icons {
display: flex;
flex-wrap: wrap;
gap: 15px;
position: relative;
z-index: 200;
}
.property-service-icon {
display: grid;
align-items: center;
justify-content: center;
font-size: 11px;
position: relative;
cursor: help;
width: 60px;
height: 60px;
}
.property-service-icon__img {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1 / 1;
padding: 25%;
background: var(--hs-accent-4);
border-radius: 1em;
grid-row: 1 / span 1;
grid-column: 1;
}
.property-service-icon__tooltip {
display: block;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%) translateY(10px);
transition: transform 150ms, opacity 150ms;
opacity: 0;
white-space: nowrap;
background: var(--hs-primary);
color: white;
padding: 6px 8px;
border-radius: 4px;
line-height: 1;
font-size: 12px;
pointer-events: none;
grid-row: 1;
grid-column: 1;
}
.property-service-icon:hover .property-service-icon__tooltip {
transform: translateX(-50%) translateY(-100%);
opacity: 1;
}
.people-card .mv-card__title-item-wrapper i {
display: none;
}
.people-card .mv-card__title-item-wrapper {
justify-content: center;
}
.people-card .module-header__sub-title {
opacity: 1 !important;
color: var(--text-color-primary) !important;
}
.module--text-center .module-header .module-header__pre-title,
.module--text-center .module-header .module-header__title,
.module--text-center .module-header .module-header__sub-title {
text-align: center;
}
.people-card .module-header__title {
text-align: center !important;
}
.module {
scroll-margin-top: var(--dynamic-header-height);
}
.mv-card * {
text-align: left;
}
@media (min-width: 1040px) {
.main-menu .mv-menu__level-1 > a:hover {
color: var(--hs-primary);
}
}
.hs-blog-post .offset-content-for-header .page-header__body,
.hs-blog-listing .offset-content-for-header .page-header__body {
padding-top: var(--dynamic-header-height) !important;
}
.modal-open .site-header {
display: none;
}