@charset "UTF-8";
/**
* Main stylesheet for the theme.
*
* Theme styles follow http://cssguidelin.es/ and are organized according to
* Inverted Triangle CSS (ITCSS) principles put forth by Harry Roberts. In
* short, each layer of CSS gets more specific as you move down this page.
*/
/*--------------------------------------------------------------
# Settings - Global variables, config switches.
--------------------------------------------------------------*/
:root {
/* colors.
*
* All colors related variables.
*
* */
--color-primary: #357B44;
--color-yellow: #FAE64C;
--color-dark-green: #1B4332;
--color-light-green: #6EBE5F;
--color-ivory: #FFF5EB;
--color-grey: #FBFBFB;
--color-black: #000;
--color-white: #fff;
--color-success: #219653;
--color-error: #e73232;
--color-text: var(--color-black);
--color-link: var(--color-primary);
--color-border: var(--color-grey);
--color-background: #fff;
--color-form-text: var(--color-text);
--color-form-border: #D9D9D9;
--color-form-background: var(--color-grey);
--color-form-focus: var(--color-green-alt);
--color-form-error: var(--color-error);
/* Font sizes. */
--heading-700: clamp(2.4375rem, 1.59765625rem + 3.359375vw, 5.125rem);
--heading-600: clamp(2.4375rem, 1.9296875rem + 2.03125vw, 4.0625rem);
--heading-500: clamp(1.9375rem, 1.56640625rem + 1.484375vw, 3.125rem);
--heading-400: clamp(1.5625rem, 1.46484375rem + 0.390625vw, 1.875rem);
--heading-300: clamp(1.5625rem, 1.46484375rem + 0.390625vw, 1.875rem);
--heading-200: clamp(1.5625rem, 1.46484375rem + 0.390625vw, 1.875rem);
--text-600: clamp(1.25rem, 1.171875rem + 0.3125vw, 1.5rem);
--text-500: clamp(1rem, 0.8828125rem + 0.46875vw, 1.375rem);
--text-400: clamp(0.875rem, 0.7578125rem + 0.46875vw, 1.25rem);
--text-300: clamp(0.875rem, 0.796875rem + 0.3125vw, 1.125rem);
--font-family-title: 'Momo Trust Display', sans-serif;
--font-family-base: 'Momo Trust Sans', sans-serif;
--line-height-heading: 1.2;
--line-height-body: 1.5;
/* @link https://utopia.fyi/space/calculator?c=320,16,1.2,1920,32,1.25,5,2,1512&s=0.75|0.6|0.5|0.4|0.25|0.1,1.25|1.5|1.75|2|2.25|2.5|3|4|5|6|7|8,s-l|s-2xl|s-xs|s-6xl&g=s,l,xl,NaN */
--space-6xs: clamp(0.125rem, 0.1125rem + 0.0625vw, 0.1875rem);
--space-5xs: clamp(0.25rem, 0.2rem + 0.25vw, 0.5rem);
--space-4xs: clamp(0.375rem, 0.2875rem + 0.4375vw, 0.8125rem);
--space-3xs: clamp(0.5rem, 0.4rem + 0.5vw, 1rem);
--space-2xs: clamp(0.625rem, 0.5125rem + 0.5625vw, 1.1875rem);
--space-xs: clamp(0.75rem, 0.6rem + 0.75vw, 1.5rem);
--space-s: clamp(1rem, 0.8rem + 1vw, 2rem);
--space-m: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
--space-l: clamp(1.5rem, 1.2rem + 1.5vw, 3rem);
--space-xl: clamp(1.75rem, 1.4rem + 1.75vw, 3.5rem);
--space-2xl: clamp(2rem, 1.6rem + 2vw, 4rem);
--space-3xl: clamp(2.25rem, 1.8rem + 2.25vw, 4.5rem);
--space-4xl: clamp(2.5rem, 2rem + 2.5vw, 5rem);
--space-5xl: clamp(3rem, 2.4rem + 3vw, 6rem);
--space-6xl: clamp(4rem, 3.2rem + 4vw, 8rem);
--space-7xl: clamp(5rem, 4rem + 5vw, 10rem);
--space-8xl: clamp(6rem, 4.8rem + 6vw, 12rem);
--space-9xl: clamp(7rem, 5.6rem + 7vw, 14rem);
--space-10xl: clamp(8rem, 6.4rem + 8vw, 16rem);
/* One-up pairs */
--space-6xs-5xs: clamp(0.125rem, 0.05rem + 0.375vw, 0.5rem);
--space-5xs-4xs: clamp(0.25rem, 0.1375rem + 0.5625vw, 0.8125rem);
--space-4xs-3xs: clamp(0.375rem, 0.25rem + 0.625vw, 1rem);
--space-3xs-2xs: clamp(0.5rem, 0.3625rem + 0.6875vw, 1.1875rem);
--space-2xs-xs: clamp(0.625rem, 0.45rem + 0.875vw, 1.5rem);
--space-xs-s: clamp(0.75rem, 0.5rem + 1.25vw, 2rem);
--space-s-m: clamp(1rem, 0.7rem + 1.5vw, 2.5rem);
--space-m-l: clamp(1.25rem, 0.9rem + 1.75vw, 3rem);
--space-l-xl: clamp(1.5rem, 1.1rem + 2vw, 3.5rem);
--space-xl-2xl: clamp(1.75rem, 1.3rem + 2.25vw, 4rem);
--space-2xl-3xl: clamp(2rem, 1.5rem + 2.5vw, 4.5rem);
--space-3xl-4xl: clamp(2.25rem, 1.7rem + 2.75vw, 5rem);
--space-4xl-5xl: clamp(2.5rem, 1.8rem + 3.5vw, 6rem);
--space-5xl-6xl: clamp(3rem, 2rem + 5vw, 8rem);
--space-6xl-7xl: clamp(4rem, 2.8rem + 6vw, 10rem);
--space-7xl-8xl: clamp(5rem, 3.6rem + 7vw, 12rem);
--space-8xl-9xl: clamp(6rem, 4.4rem + 8vw, 14rem);
--space-9xl-10xl: clamp(7rem, 5.2rem + 9vw, 16rem);
/* Custom pairs */
--space-s-l: clamp(1rem, 0.6rem + 2vw, 3rem);
--space-s-2xl: clamp(1rem, 0.4rem + 3vw, 4rem);
--space-s-xs: clamp(1rem, 0.9rem + 0.5vw, 1.5rem);
--space-s-6xl: clamp(1rem, -0.4rem + 7vw, 8rem);
--side-padding: var(--space-s-2xl);
--space-default: var(--space-4xl);
--gutter: var(--space-s);
--text-margin: 1.3em;
/* Widths.
*
* All widths related variables.
*
* */
--max-width-site: 120rem;
--max-width-container: 105rem;
--max-width-large: calc(var(--max-width-container) * 0.9);
--max-width-medium: calc(var(--max-width-container) * 0.666666666);
--max-width-regular: calc(var(--max-width-container) * 0.5);
--width-wide: clamp(min(50rem, 100%), 100%, var(--max-width-container));
--width-large: clamp(min(40rem, 100%), 90%, var(--max-width-large));
--width-medium: clamp(min(40rem, 100%), 66.666666666%, var(--max-width-medium));
--width-regular: clamp(min(40rem, 100%), 50%, var(--max-width-regular));
--button-border-radius: 0.4375rem;
--button-font: var(--font-family-title);
--button-padding: 0.648em 1.224em;
--button-font-size: var(--text-400);
--button-font-weight: 400;
--button-line-height: 1;
--button-background: var(--color-primary);
--button-border-color: var(--color-primary);
--button-text-color: var(--color-white);
--hsf-heading__font-family: var(--font-family-title);
--hsf-heading__color: var(--color-primary);
--hsf-richtext__font-family: var(--font-family-base);
--hsf-richtext__font-size: var(--text-500);
--hsf-richtext__color: var(--color-text);
--hsf-button__font-family: var(--button-font);
--hsf-button__font-size: var(--button-font-size);
--hsf-button__color: var(--button-text-color);
--hsf-button__background-color: var(--button-background);
--hsf-button__border-radius: var(--button-border-radius);
--hsf-button__padding: var(--button-padding);
--hsf-button__font-weight: var(--button-font-weight);
--hsf-button--hover__background-color: var(--color-light-green);
--hsf-field-label__font-family: var(--font-family-title);
--hsf-field-label__font-size: var(--text-400);
--hsf-field-label__color: var(--color-text);
--hsf-field-input__placeholder-color: #737373;
--hsf-field-description__font-family: var(--font-family-base);
--hsf-field-description__color: #737373;
--hsf-erroralert__font-family: var(--font-family-base);
--hsf-erroralert__color: rgba(229, 21, 32, 1.0);
--hsf-infoalert__font-family: var(--font-family-base);
--hsf-background__background-color: rgba(255, 255, 255, 1.0);
--hsf-background__border-color: rgba(255, 255, 255, 1.0);
--hsf-background__border-radius: 0.0px 0.0px 0.0px 0.0px;
--hsf-background-banner__border-bottom-left-radius: 0px;
--hsf-background-banner__border-bottom-right-radius: 0px;
--hsf-background-banner__border-top-left-radius: 0px;
--hsf-background-banner__border-top-right-radius: 0px;
--hsf-background__padding: 0;
--hsf-field-input__font-family: var(--font-family-base);
--hsf-field-input__font-size: 1rem;
--hsf-field-input__color: var(--color-text);
--hsf-field-input__background-color: var(--color-white);
--hsf-field-input__border-color: var(--color-form-border);
--hsf-field-input__border-style: solid;
--hsf-field-input__border-width: 0.0625rem;
--hsf-field-input__border-radius: 0.25rem;
--hsf-field-input__padding: 1em;
--hsf-field-textarea__font-family: var(--font-family-base);
--hsf-field-textarea__color: var(--color-text);
--hsf-field-textarea__background-color: var(--color-white);
--hsf-field-textarea__border-color: var(--color-form-border);
--hsf-field-textarea__border-style: solid;
--hsf-field-textarea__border-width: 0.0625rem;
--hsf-field-textarea__border-radius: 0.25rem;
--hsf-field-textarea__padding: 1em;
--hsf-field-textarea__placeholder-color: rgba(102, 102, 102, 0.64);
--hsf-field-checkbox__color: rgba(50, 50, 50, 1.0);
--hsf-field-checkbox__background-color: var(--color-white);
--hsf-field-checkbox__border-color: #737373;
--hsf-field-checkbox__border-style: solid;
--hsf-field-checkbox__border-width: 0.125rem;
--hsf-field-checkbox__padding: 0;
--hsf-field-radio__color: rgba(50, 50, 50, 1.0);
--hsf-field-radio__background-color: var(--color-white);
--hsf-field-radio__border-color: #737373;
--hsf-field-radio__border-style: none;
--hsf-field-radio__border-width: 1.0px 1.0px 1.0px 1.0px;
--hsf-field-dropdown-options__border-radius: 10px 10px 10px 10px;
--hsf-field-radio__padding: 0;
--hsf-progressbar-text__font-family: Helvetica;
--hsf-progressbar-text__color: rgba(37, 51, 66, 1.0);
--hsf-progressbar-text__font-size: 1.0em;
--hsf-progressbar-progressLine__background-color: var(--color-primary);
--hsf-progressbar-trackLine__background-color: rgba(53, 123, 68, 0.30);
--hsf-row__vertical-spacing: var(--space-xl);
/* Miscellanious.
*
* All miscellanious variables.
*
* */
--transition-2: 0.2s;
--underline-box-shadow: inset 0 -0.25rem 0 var(--color-green-alt);
--radius-minimal: 0.25rem;
--lemon-radius: clamp(2.5rem, 4.9vw, 5rem) 0.9375rem;
}
/*
Example how to add a font-face.
Other than woff2 and woff are not necessary.
@font-face {
font-display: swap;
font-family: font-name;
font-style: normal;
font-weight: 400;
src:
url(../fonts/font-name.woff2) format("woff2"),
url(../fonts/font-name.woff) format("woff"), // Modern Browsers
}
*/
/*--------------------------------------------------------------
# Generic - Ground-zero styles (resets, box-sizing, etc.).
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 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 */
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* 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 */
line-height: 1.15; /* 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;
}
html, body {
height: 100%;
}
html {
box-sizing: border-box;
background: var(--color-background);
}
@media (max-width: 70rem) {
html.is-site-nav-opened {
overflow: hidden;
}
}
*,
*:before,
*:after {
box-sizing: inherit;
}
body {
margin: 0;
padding: 0;
}
img {
height: auto;
max-width: 100%;
}
.full-width {
position: relative;
width: 100vw;
left: 50%;
right: 50%;
margin-left: -50vw;
margin-right: -50vw;
}
.absolute-link::after {
content: "";
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
/*--------------------------------------------------------------
# Elements - Unclassed HTML elements (type selectors).
--------------------------------------------------------------*/
html {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
overflow-x: hidden;
overflow-y: scroll;
font-size: 16px;
}
body {
font-size: var(--text-500);
line-height: var(--line-height-body);
font-family: var(--font-family-base);
color: var(--color-text);
}
a {
color: var(--color-link);
text-decoration: underline;
transition: all 0.2s ease-in-out;
}
a:hover, a:active, a:focus {
text-decoration: none;
}
b,
strong {
font-weight: 700;
}
ul,
ol,
table,
p {
margin: var(--text-margin) 0 0;
}
ul:first-child,
ol:first-child,
table:first-child,
p:first-child {
margin-top: 0;
}
h1,
h2,
h3,
h4,
h5,
.h1,
.h2,
.h3,
.h4,
.h5 {
margin: var(--text-margin) 0 0;
color: var(--color-primary);
}
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
.h1:first-child,
.h2:first-child,
.h3:first-child,
.h4:first-child,
.h5:first-child {
margin-top: 0;
}
h1,
.h1 {
font-size: var(--heading-600);
line-height: 1;
font-family: var(--font-family-title);
font-weight: 400;
}
h2,
.h2 {
font-size: var(--heading-500);
line-height: var(--line-height-heading);
font-family: var(--font-family-title);
font-weight: 400;
}
h2 + p,
.h2 + p {
margin-top: 1em;
}
h3,
.h3 {
font-size: var(--heading-400);
line-height: var(--line-height-heading);
font-family: var(--font-family-title);
font-weight: 400;
}
h4,
.h4 {
font-size: var(--heading-300);
line-height: 1.3;
font-family: var(--font-family-title);
font-weight: 400;
}
h5,
.h5,
h6,
.h6 {
font-size: var(--heading-200);
line-height: 1.3;
font-family: var(--font-family-title);
font-weight: 400;
}
blockquote {
font-size: var(--heading-300);
line-height: 1.3;
font-family: var(--font-family-title);
font-weight: 400;
}
.btn,
.hs-button,
button,
input[type=button],
input[type=reset],
input[type=submit] {
display: inline-flex;
align-items: center;
gap: 0.95em;
cursor: pointer;
padding: var(--button-padding);
text-decoration: none;
text-align: center;
font-family: var(--button-font);
font-size: var(--button-font-size);
line-height: var(--button-line-height);
font-weight: var(--button-font-weight);
color: var(--button-text-color);
background: var(--button-background);
border-radius: var(--button-border-radius);
border: 0.125rem solid var(--button-border-color);
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
}
.btn:hover, .btn:focus-visible,
.hs-button:hover,
.hs-button:focus-visible,
button:hover,
button:focus-visible,
input[type=button]:hover,
input[type=button]:focus-visible,
input[type=reset]:hover,
input[type=reset]:focus-visible,
input[type=submit]:hover,
input[type=submit]:focus-visible {
--button-text-color: var(--color-white);
--button-background: var(--color-light-green);
--button-border-color: var(--color-light-green);
color: var(--button-text-color);
text-decoration: none;
}
.btn:focus,
.hs-button:focus,
button:focus,
input[type=button]:focus,
input[type=reset]:focus,
input[type=submit]:focus {
outline: 0;
}
.btn:focus-visible,
.hs-button:focus-visible,
button:focus-visible,
input[type=button]:focus-visible,
input[type=reset]:focus-visible,
input[type=submit]:focus-visible {
outline: 0.0625rem solid var(--color-black);
outline-offset: 0.125rem;
}
.btn::after {
content: "";
display: inline-block;
width: 1.403904em;
height: 1.052904em;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
background: currentColor;
transition: transform 200ms ease-in;
}
.btn:hover::after, .btn:focus-visible::after {
transform: translateX(0.25rem);
}
.btn--secondary {
--button-border-color: var(--color-light-green);
--button-background: var(--color-light-green);
}
.btn--secondary:hover, .btn--secondary:focus-visible {
--button-background: var(--color-primary);
--button-border-color: var(--color-primary);
}
.btn--white {
--button-border-color: var(--color-white);
--button-background: var(--color-white);
--button-text-color: var(--color-primary);
}
.btn--outline {
--button-background: rgba(255, 255, 255, 0);
--button-text-color: var(--button-border-color);
}
.btn--outline:hover, .btn--outline:focus-visible {
--button-background: var(--color-primary);
--button-border-color: var(--color-primary);
}
.btn--outline.btn--secondary:hover, .btn--outline.btn--secondary:focus-visible {
--button-background: var(--color-light-green);
--button-border-color: var(--color-light-green);
}
.btn--top::after {
transform: rotate(-90deg);
}
.btn--top:hover::after, .btn--top:focus-visible::after {
transform: rotate(-90deg) translateX(0.25rem);
}
.btn--lemonaid {
--button-padding: 0 1.224em 0 0;
gap: 0;
}
.btn--lemonaid::before {
content: "";
display: inline-block;
aspect-ratio: 8.15/2.5;
width: 8.15em;
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
background-color: currentColor;
}
@media (min-width: 70.001rem) {
.btn--lemonaid::before {
width: clamp(6.14em, 9.31vw, 8.15em);
}
}
.cta-module-btn {
display: inline-flex;
align-items: center;
gap: var(--space-l);
cursor: pointer;
padding: 0;
font-family: var(--button-font);
font-size: var(--heading-500);
text-decoration: none;
text-align: left;
line-height: 1;
font-weight: 400;
color: var(--color-white);
background: rgba(255, 255, 255, 0);
border: 0;
}
.cta-module-btn::after {
content: "";
flex: 0 0 1.19em;
width: 1.19em;
height: 1.19em;
border-radius: 0.1875rem;
background: url('data:image/svg+xml,') no-repeat center var(--color-white);
background-size: 0.56em auto;
transition: transform 200ms ease-in;
}
.cta-module-btn:hover::after, .cta-module-btn:focus-visible::after {
transform: translateX(0.25rem);
}
.reset-button {
min-width: 1px;
padding: 0;
border-radius: 0;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
border: 0;
background: rgba(255, 255, 255, 0);
}
input[type=text],
input[type=email],
input[type=url],
input[type=password],
input[type=search],
input[type=number],
input[type=tel],
input[type=range],
input[type=date],
input[type=month],
input[type=week],
input[type=time],
input[type=datetime],
input[type=datetime-local],
input[type=color],
textarea,
select {
display: block;
width: 100%;
height: auto;
margin: 0;
padding: var(--space-2xs) var(--space-xs);
border-radius: 0.25rem;
border: 0.0625rem solid var(--color-form-border);
background: var(--color-white);
box-shadow: unset;
color: var(--color-text);
font-size: 1rem;
}
input[type=text]:focus,
input[type=email]:focus,
input[type=url]:focus,
input[type=password]:focus,
input[type=search]:focus,
input[type=number]:focus,
input[type=tel]:focus,
input[type=range]:focus,
input[type=date]:focus,
input[type=month]:focus,
input[type=week]:focus,
input[type=time]:focus,
input[type=datetime]:focus,
input[type=datetime-local]:focus,
input[type=color]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--color-form-border);
box-shadow: unset;
}
input[type=text]::-moz-placeholder, input[type=email]::-moz-placeholder, input[type=url]::-moz-placeholder, input[type=password]::-moz-placeholder, input[type=search]::-moz-placeholder, input[type=number]::-moz-placeholder, input[type=tel]::-moz-placeholder, input[type=range]::-moz-placeholder, input[type=date]::-moz-placeholder, input[type=month]::-moz-placeholder, input[type=week]::-moz-placeholder, input[type=time]::-moz-placeholder, input[type=datetime]::-moz-placeholder, input[type=datetime-local]::-moz-placeholder, input[type=color]::-moz-placeholder, textarea::-moz-placeholder, select::-moz-placeholder {
opacity: 0.5;
}
input[type=text]::placeholder,
input[type=email]::placeholder,
input[type=url]::placeholder,
input[type=password]::placeholder,
input[type=search]::placeholder,
input[type=number]::placeholder,
input[type=tel]::placeholder,
input[type=range]::placeholder,
input[type=date]::placeholder,
input[type=month]::placeholder,
input[type=week]::placeholder,
input[type=time]::placeholder,
input[type=datetime]::placeholder,
input[type=datetime-local]::placeholder,
input[type=color]::placeholder,
textarea::placeholder,
select::placeholder {
opacity: 0.5;
}
select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding-right: calc(var(--space-3xs) * 2 + 1.5rem);
background-repeat: no-repeat;
background-position: right var(--space-3xs) center;
/* stylelint-disable-next-line */
background-image: url('data:image/svg+xml,');
}
textarea {
resize: vertical;
min-height: 5rem;
}
.form-title:not(:empty) {
margin-bottom: var(--space-l);
}
input[type=checkbox],
input[type=radio] {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
display: block;
content: "";
width: calc(1em + 0.125rem);
height: calc(1em + 0.125rem);
margin: 0 0 0 0.0625rem;
padding: 0;
background: var(--color-form-background);
border: 0;
border-radius: 0.125rem;
box-shadow: 0 0 0 0.0625rem var(--color-form-border);
transition: box-shadow var(--transition-2);
}
input[type=checkbox]:checked,
input[type=radio]:checked {
box-shadow: 0 0 0 0.0625rem var(--color-form-border);
}
input[type=checkbox]:focus,
input[type=radio]:focus {
box-shadow: 0 0 0 0.0625rem var(--color-form-focus);
outline: none;
}
input[type=checkbox]:checked {
background: var(--color-form-background) no-repeat center;
/* stylelint-disable-next-line */
background-image: url('data:image/svg+xml,');
background-size: 0.59em;
}
input[type=radio] {
border-radius: 50%;
}
input[type=radio]:checked {
background: var(--color-form-text);
border: 0.1875rem solid var(--color-form-background);
}
.hs-fieldtype-checkbox .input,
.hs-fieldtype-booleancheckbox .input {
margin-top: 0.3rem;
}
.hs-fieldtype-checkbox span:not(.hs-form-required)::after,
.hs-fieldtype-booleancheckbox span:not(.hs-form-required)::after {
border-radius: 0;
}
.hs-form, .systems-page .form-container {
font-size: var(--text-400);
line-height: var(--line-height-body);
font-family: var(--font-family-base);
}
.hs-form .hs-form-field, .systems-page .form-container .hs-form-field {
margin: 0 0 var(--space-3xs) 0;
}
.hs-form .hs-form-field label, .systems-page .form-container .hs-form-field label {
margin-bottom: var(--space-3xs);
display: block;
font-size: var(--text-500);
line-height: var(--line-height-body);
font-family: var(--font-family-base);
}
.hs-form .hs-form-field textarea, .systems-page .form-container .hs-form-field textarea {
vertical-align: top;
}
.hs-form .hs-form-field .input ul.inputs-list, .systems-page .form-container .hs-form-field .input ul.inputs-list {
margin: 0;
padding: 0;
list-style: none;
margin: 0 0 0.6rem 0;
}
.hs-form .hs-form-field .input ul.inputs-list li, .systems-page .form-container .hs-form-field .input ul.inputs-list li {
margin-right: 2rem;
margin-bottom: 0.5rem;
}
.hs-form .hs-form-field .input ul.inputs-list li label, .systems-page .form-container .hs-form-field .input ul.inputs-list li label {
cursor: pointer;
display: inline-flex;
align-items: center;
margin: 0;
gap: var(--space-3xs);
}
.hs-form .hs-form-field .input ul.inputs-list span, .systems-page .form-container .hs-form-field .input ul.inputs-list span {
font-size: 1em;
}
.hs-form .legal-consent-container, .systems-page .form-container .legal-consent-container {
margin-bottom: var(--space-m);
}
.hs-form .hs-error-msgs, .systems-page .form-container .hs-error-msgs {
margin: 0;
padding: 0;
list-style: none;
margin: 0.25rem 0 0;
}
.hs-form .hs-error-msgs label, .systems-page .form-container .hs-error-msgs label {
color: var(--color-text-error);
font-size: var(--text-300);
line-height: var(--line-height-body);
font-family: var(--font-family-base);
}
.hs-form .legal-consent-container .hs-form-booleancheckbox-display > span, .systems-page .form-container .legal-consent-container .hs-form-booleancheckbox-display > span {
margin: 0;
}
body .body-wrapper .hs-form fieldset, body .body-wrapper .systems-page .form-container fieldset, .systems-page body .body-wrapper .form-container fieldset {
width: 100%;
max-width: 100%;
}
body .body-wrapper .hs-form fieldset .input, body .body-wrapper .systems-page .form-container fieldset .input, .systems-page body .body-wrapper .form-container fieldset .input {
margin-right: 0;
}
body .body-wrapper .hs-form fieldset .hs-form-field, body .body-wrapper .systems-page .form-container fieldset .hs-form-field, .systems-page body .body-wrapper .form-container fieldset .hs-form-field {
width: 100%;
}
@media (min-width: 37.501rem) {
body .body-wrapper .hs-form fieldset.form-columns-2 .hs-form-field, body .body-wrapper .systems-page .form-container fieldset.form-columns-2 .hs-form-field, .systems-page body .body-wrapper .form-container fieldset.form-columns-2 .hs-form-field {
width: calc(50% - 0.75rem);
margin-right: 1.5rem;
}
body .body-wrapper .hs-form fieldset.form-columns-2 .hs-form-field:last-child, body .body-wrapper .systems-page .form-container fieldset.form-columns-2 .hs-form-field:last-child, .systems-page body .body-wrapper .form-container fieldset.form-columns-2 .hs-form-field:last-child {
margin-right: 0;
}
body .body-wrapper .hs-form fieldset.form-columns-3 .hs-form-field, body .body-wrapper .systems-page .form-container fieldset.form-columns-3 .hs-form-field, .systems-page body .body-wrapper .form-container fieldset.form-columns-3 .hs-form-field {
width: calc(33.3% - 0.35rem);
margin-right: 0.5rem;
}
body .body-wrapper .hs-form fieldset.form-columns-3 .hs-form-field:last-child, body .body-wrapper .systems-page .form-container fieldset.form-columns-3 .hs-form-field:last-child, .systems-page body .body-wrapper .form-container fieldset.form-columns-3 .hs-form-field:last-child {
margin-right: 0;
}
}
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid #aaa;
border-width: 0 0 1px;
padding: 0.5rem;
}
th {
border-width: 0 0 2px;
text-align: left;
font-weight: 400;
padding: 0.5rem;
}
/*--------------------------------------------------------------
# Layout - Undecorated design patterns.
--------------------------------------------------------------*/
.content-wrapper,
.container,
.dnd-section > .row-fluid {
width: var(--width-wide);
margin-left: auto;
margin-right: auto;
}
.width-wide {
width: var(--width-wide);
}
.width-large {
width: var(--width-large);
}
.width-medium {
width: var(--width-medium);
}
.width-regular {
width: var(--width-regular);
}
.mx-auto {
margin-left: auto;
margin-right: auto;
}
.content-row,
.dnd-section {
margin-top: var(--space-default);
}
.dnd-section .dnd-row:not(:first-child) {
margin-top: var(--gutter);
}
.dnd-section .dnd-row:not(:first-child) .reset-multiple-row-top {
margin-top: calc(var(--gutter) * -1);
}
@media (max-width: 48rem) {
.dnd-section .dnd-column:not(:first-child) {
margin-top: var(--gutter);
}
}
.dnd-section:first-child:has(.reset-multiple-row-top.has-background), .main-dnd-area--contact .dnd-section:first-child {
margin-top: 0;
}
.dnd-section:last-child:not(:has(.reset-multiple-row-top.has-background)) {
margin-bottom: var(--space-default);
}
div[class*=background-color].dnd-section {
padding-top: var(--space-default);
padding-bottom: var(--space-default);
}
div[class*=background-color].dnd-section:first-child {
margin-top: 0;
}
div[class*=background-color].dnd-section:last-child {
margin-bottom: 0;
}
div[class*=background-color].dnd-section + div[class*=background-color].dnd-section {
margin-top: 0;
}
div[class*=background-color].dnd-column {
padding: var(--gutter);
}
@media (min-width: 48.001rem) {
div[class*=background-color].dnd-column {
padding: var(--gutter);
}
}
.side-padding {
padding-left: var(--side-padding);
padding-right: var(--side-padding);
}
.has-background {
padding-top: var(--space-default);
padding-bottom: var(--space-default);
}
/* Responsive Grid */
@media (min-width: 48.001rem) {
.row-fluid-wrapper > .row-fluid {
display: flex;
gap: var(--gutter);
}
}
.row-fluid {
width: 100%;
*zoom: 1;
}
@media (min-width: 48.001rem) {
.row-fluid [class*=span] {
display: block;
width: 100%;
min-height: 1px;
box-sizing: border-box;
}
.row-fluid .span12 {
width: 100%;
}
.row-fluid .span11 {
width: calc(91.6666666667% - var(--gutter) * (12 / 11 - 1) / (12 / 11));
}
.row-fluid .span10 {
width: calc(83.3333333333% - var(--gutter) * (12 / 10 - 1) / (12 / 10));
}
.row-fluid .span9 {
width: calc(75% - var(--gutter) * (12 / 9 - 1) / (12 / 9));
}
.row-fluid .span8 {
width: calc(66.6666666667% - var(--gutter) * (12 / 8 - 1) / (12 / 8));
}
.row-fluid .span7 {
width: calc(58.3333333333% - var(--gutter) * (12 / 7 - 1) / (12 / 7));
}
.row-fluid .span6 {
width: calc(50% - var(--gutter) * (12 / 6 - 1) / (12 / 6));
}
.row-fluid .span5 {
width: calc(41.6666666667% - var(--gutter) * (12 / 5 - 1) / (12 / 5));
}
.row-fluid .span4 {
width: calc(33.3333333333% - var(--gutter) * (12 / 4 - 1) / (12 / 4));
}
.row-fluid .span3 {
width: calc(25% - var(--gutter) * (12 / 3 - 1) / (12 / 3));
}
.row-fluid .span2 {
width: calc(16.6666666667% - var(--gutter) * (12 / 2 - 1) / (12 / 2));
}
.row-fluid .span1 {
width: calc(8.3333333333% - var(--gutter) * (12 / 1 - 1) / (12 / 1));
}
}
.container-fluid {
*zoom: 1;
}
.container-fluid:before, .container-fluid:after {
display: table;
content: "";
}
.container-fluid:after {
clear: both;
}
/* Clearfix */
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
/* Visibilty Classes */
.hide {
display: none;
}
.show {
display: block;
}
.invisible {
visibility: hidden;
}
.hidden {
display: none;
visibility: hidden;
}
/* Responsive Visibilty Classes */
.visible-phone {
display: none !important;
}
.visible-tablet {
display: none !important;
}
.hidden-desktop {
display: none !important;
}
@media (max-width: 48rem) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
}
@media (min-width: 48rem) and (max-width: 65rem) {
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
}
.error-page {
margin-top: var(--space-default);
margin-bottom: var(--space-default);
}
.error-page img {
vertical-align: top;
}
.error-page__paragraph {
margin: 2em 0 2.1em;
}
.error-page__paragraph:last-child {
margin-bottom: 0;
}
.error-page {
text-align: center;
}
.blog-post__featured-image {
margin-top: 0;
margin-bottom: var(--space-m);
}
.blog-post__featured-image img {
aspect-ratio: 120/18;
vertical-align: top;
-o-object-fit: cover;
object-fit: cover;
width: 100%;
}
.all-posts-top {
text-align: right;
margin-bottom: var(--space-m);
}
#hs_cos_wrapper_post_body {
display: block;
margin-top: var(--space-4xl);
}
.blog-post__bottom-links {
display: flex;
flex-flow: wrap;
-moz-column-gap: var(--space-xs);
column-gap: var(--space-xs);
row-gap: var(--space-4xs);
margin-bottom: var(--space-4xl);
}
.archive-filters {
margin: 0;
padding: 0;
list-style: none;
margin-bottom: var(--gutter);
display: flex;
flex-flow: wrap;
}
.archive-filters li {
margin: 0.5rem 0.5rem 0 0;
}
.posts-pagination {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: wrap;
gap: 1rem;
margin-top: var(--space-default);
margin-bottom: var(--space-default);
justify-content: center;
}
.posts-pagination li {
margin: 0;
}
.posts-pagination__link {
display: inline-flex;
vertical-align: top;
padding: var(--space-3xs) var(--space-2xs);
font-family: var(--button-font);
font-size: var(--button-font-size);
line-height: var(--button-line-height);
font-weight: var(--button-font-weight);
color: var(--color-primary);
text-decoration: none;
border-radius: var(--button-border-radius);
border: 0.125rem solid var(--color-primary);
transition: all 150ms ease-in;
}
.posts-pagination__link:hover {
color: var(--color-white);
background-color: var(--color-light-green);
border-color: var(--color-light-green);
}
.posts-pagination__link--active {
color: var(--color-white);
background: var(--color-primary);
}
.posts-pagination__prev-link, .posts-pagination__next-link {
color: var(--color-white);
}
@media (max-width: 48rem) {
.posts-pagination__prev-item, .posts-pagination__next-item {
flex: 0 0 100%;
text-align: center;
}
}
.posts-pagination__prev-link {
flex-direction: row-reverse;
}
.posts-pagination__prev-link::after {
transform: rotate(180deg);
}
.posts-pagination__prev-link:hover::after, .posts-pagination__prev-link:focus-visible::after {
transform: rotate(180deg) translateX(0.25rem);
}
.posts-pagination__disabled-item {
display: none;
}
.systems-page {
margin-top: var(--space-default);
margin-bottom: var(--space-default);
}
.systems-page .form-container {
max-width: none;
}
.systems-page.container {
width: var(--width-medium);
}
.systems-page .subscribe-options {
margin-bottom: var(--text-margin);
}
.systems-page .item,
.systems-page .subscribe-options {
margin-top: var(--text-margin);
}
.systems-page .item p,
.systems-page .subscribe-options p {
margin: 0;
}
.systems-page .backup-unsubscribe #email-prefs-form {
margin: var(--text-margin) auto;
}
.systems-page .backup-unsubscribe #email-prefs-form .email-edit.hs-input {
margin: 1rem 0;
}
/*--------------------------------------------------------------
# Modules - specific UI components.
--------------------------------------------------------------*/
.span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module.widget-type-rich_text, .span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module.widget-type-header,
.span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module > .normal-text-width {
margin: auto;
width: var(--width-regular);
}
.span12.dnd-column > div > div > .span12.dnd-module > .hs_cos_wrapper_type_module > hr {
width: 100% !important;
border-color: var(--color-primary) !important;
}
.js-site-header {
position: relative;
z-index: 300;
top: 0;
transition: all 250ms cubic-bezier(0.4, 0, 1, 1);
}
.js-site-header.headroom--start-from-top {
transition: none;
}
.js-site-header.headroom--not-top {
position: sticky;
transform: translateY(0);
}
.js-site-header.headroom--not-top.headroom--unpinned {
transform: translateY(-100%);
}
@media (min-width: 70.001rem) {
.js-site-header.headroom--not-top {
transform: translateY(-2.5rem);
}
}
@media (max-width: 70rem) {
.is-site-nav-opened .js-site-header.headroom--not-top.headroom--unpinned {
transform: translateY(0);
}
}
.site-header {
width: 100%;
background: var(--color-white);
}
@media (max-width: 70rem) {
.is-site-nav-opened .site-header {
height: 100svh;
overflow: auto;
}
}
.site-header__container {
position: relative;
display: grid;
align-items: center;
grid-template-columns: 12.5vw 1fr;
gap: var(--gutter);
}
@media (max-width: 70rem) {
.site-header__container {
display: flex;
padding-top: 1rem;
padding-bottom: 1rem;
flex-flow: wrap;
justify-content: space-between;
}
.is-site-nav-opened .site-header__container {
padding-bottom: 4rem;
}
}
@media (min-width: 70.001rem) {
.site-header__container {
padding-top: 2.5rem;
}
}
.site-header__logo a {
display: inline-flex;
}
.site-header__logo svg {
vertical-align: top;
width: clamp(8rem, 12vw, 14.69963rem);
height: auto;
}
.site-nav__toggle {
background-color: inherit;
border: none;
display: flex;
justify-content: center;
align-items: center;
padding: 0;
color: var(--color-primary);
}
.site-nav__toggle:hover, .site-nav__toggle:focus-visible {
background-position: 0 0;
color: var(--color-primary);
}
.site-nav__toggle-inner span {
display: block;
height: 0.1875rem;
border-radius: 999rem;
background: currentColor;
margin: 0.25rem 0;
transition: all 0.55s cubic-bezier(0.075, 0.82, 0.165, 1);
width: 1.25rem;
}
.site-nav__toggle[aria-expanded=true] {
box-shadow: none;
}
.site-nav__toggle[aria-expanded=true] .site-nav__toggle-inner span:first-child {
transform: translateY(0.4375rem) rotate(0deg);
}
.site-nav__toggle[aria-expanded=true] .site-nav__toggle-inner span:nth-child(2) {
opacity: 0;
}
.site-nav__toggle[aria-expanded=true] .site-nav__toggle-inner span:last-child {
transform: translateY(-0.4375rem) rotate(90deg);
}
.site-nav__toggle[aria-expanded=true] .site-nav__toggle-inner {
transform: rotate(45deg);
transition: all 0.25s ease 0.05s;
}
@media (min-width: 70.001rem) {
.site-nav__toggle {
display: none;
}
}
.site-footer {
padding-top: var(--space-4xl);
font-size: 1rem;
color: var(--color-white);
background: #3C7448;
}
.site-footer a {
color: inherit;
text-decoration: none;
}
.site-footer a:hover {
text-decoration: underline;
}
.site-footer__container {
display: flex;
flex-flow: wrap;
-moz-column-gap: var(--space-4xl);
column-gap: var(--space-4xl);
row-gap: var(--space-2xl);
}
.site-footer__logo {
flex: 0 0 100%;
}
.site-footer__logo svg {
width: 26.5rem;
max-width: 100%;
height: auto;
vertical-align: top;
}
.site-footer__col--info {
flex: 0 0 calc(57% - var(--space-4xl) * 2);
}
@media (max-width: 65rem) {
.site-footer__col--info {
flex: 0 0 100%;
}
}
.site-footer__col--info, .site-footer__col--navigation {
display: flex;
flex-direction: column;
gap: var(--space-m);
justify-content: space-between;
}
@media (max-width: 65rem) {
.site-footer__col--info, .site-footer__col--navigation {
gap: var(--space-2xl);
}
}
.site-footer__col--contacts, .site-footer__col--navigation {
flex: 0 0 21.5%;
}
@media (max-width: 65rem) {
.site-footer__col--contacts, .site-footer__col--navigation {
flex: 0 0 40%;
}
}
@media (max-width: 37.5rem) {
.site-footer__col--contacts, .site-footer__col--navigation {
flex: 0 0 100%;
}
}
.site-footer__col--contacts a {
text-decoration: underline;
}
.site-footer__col--contacts a:hover {
text-decoration: none;
}
.site-footer__col--navigation ul {
margin: 0;
padding: 0;
list-style: none;
}
.site-footer__col--navigation ul li + li {
margin-top: 0.5em;
}
.site-footer__col--navigation * + ul {
margin-top: var(--text-margin);
}
.site-footer__lemons {
height: auto;
vertical-align: top;
}
.site-footer #hs_cos_wrapper_footer_slogan {
display: block;
max-width: 26.5rem;
}
.site-footer #hs_cos_wrapper_footer_some ul {
margin: 0;
padding: 0;
list-style: none;
margin-top: var(--space-2xs);
display: flex;
gap: var(--space-4xs);
align-items: center;
}
.site-footer #hs_cos_wrapper_footer_some img {
vertical-align: top;
}
.site-footer #hs_cos_wrapper_footer_some p:first-child,
.site-footer #hs_cos_wrapper_footer_contacts p:first-child,
.site-footer #hs_cos_wrapper_footer_navigation p:first-child {
color: #A8D5BA;
}
@media (min-width: 70.001rem) {
.site-nav {
display: grid;
grid-template-columns: 1fr 12.5vw;
align-items: center;
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
}
.site-nav #hs_cos_wrapper_header_primary_cta {
grid-column: 2;
grid-row: 1;
text-align: right;
}
}
@media (max-width: 70rem) {
.site-nav {
display: none;
position: relative;
}
.is-site-nav-opened .site-nav {
display: block;
flex: 0 0 100%;
}
}
.site-nav #hs_cos_wrapper_header_primary_cta .btn {
vertical-align: top;
}
.site-nav ul {
margin: 0;
padding: 0;
list-style: none;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
}
.site-nav .hs-menu-item a {
position: relative;
display: inline-block;
vertical-align: top;
text-decoration: none;
}
.site-nav .hs-menu-item a[hidden] {
display: none !important;
}
.site-nav .hs-menu-depth-1 > .hs-item__sub-toggle:not(.btn),
.site-nav .hs-menu-depth-1 > a {
min-width: 1px;
padding: 0;
border-radius: 0;
font-size: inherit;
font-family: inherit;
font-weight: inherit;
line-height: inherit;
border: 0;
background: rgba(255, 255, 255, 0);
display: inline-flex;
align-items: center;
gap: var(--space-5xs);
cursor: pointer;
padding: var(--space-5xs) 0;
font-family: var(--font-family-title);
font-size: clamp(0.87rem, 1vw, 0.9375rem);
font-size: 0.9375rem;
color: var(--color-primary);
transition: none;
}
.site-nav .hs-menu-depth-1 > .hs-item__sub-toggle:not(.btn) svg,
.site-nav .hs-menu-depth-1 > a svg {
pointer-events: none;
transition: transform 200ms ease-in;
}
.site-nav .hs-menu-depth-1 > .hs-item__sub-toggle:not(.btn) span,
.site-nav .hs-menu-depth-1 > a span {
pointer-events: none;
}
@media (min-width: 70.001rem) {
.site-nav .hs-menu-depth-1 > .hs-item__sub-toggle:not(.btn):hover, .site-nav .hs-menu-depth-1 > .hs-item__sub-toggle:not(.btn)[aria-expanded=true],
.site-nav .hs-menu-depth-1 > a:hover,
.site-nav .hs-menu-depth-1 > a[aria-expanded=true] {
text-decoration: underline;
}
}
.site-nav .hs-menu-depth-1 > .hs-item__sub-toggle.btn > * {
pointer-events: none;
}
.site-nav .hs-item__sub-toggle[aria-expanded=true] svg {
transform: rotate(180deg);
}
.site-nav .hs-menu-children-wrapper {
flex: 0 0 100%;
order: 3;
height: 0;
display: block;
overflow: hidden;
visibility: hidden;
opacity: 0;
}
@media (max-width: 70rem) {
.site-nav .hs-menu-children-wrapper.is-opened {
height: auto;
visibility: visible;
opacity: 1;
}
}
.site-nav .hs-menu-children-wrapper a {
color: var(--color-primary);
}
.site-nav .hs-menu-children-wrapper a::after {
content: "";
display: inline-block;
margin-left: 0.25rem;
width: 1.19638rem;
height: 0.89731rem;
background: url('data:image/svg+xml,');
}
@media (min-width: 70.001rem) {
.site-nav .hs-menu-depth-1 {
padding-top: 1.5rem;
padding-bottom: 1.5rem;
}
.site-nav .hs-menu-depth-1:hover > .hs-menu-children-wrapper,
.site-nav .hs-menu-depth-1 .hs-menu-children-wrapper.open-menu-list {
display: flex !important;
height: auto;
visibility: visible;
opacity: 1;
}
.site-nav .hs-menu-wrapper > ul {
display: flex;
gap: var(--space-s);
}
.site-nav .hs-menu-wrapper > ul > li {
display: flex;
height: 100%;
white-space: nowrap;
}
.site-nav .hs-menu-item {
margin: 0;
}
.site-nav .hs-menu-children-wrapper {
position: absolute;
z-index: 10;
top: 100%;
left: 0;
display: flex;
justify-content: center;
gap: var(--space-2xl);
width: var(--width-wide);
padding: var(--space-s) 0;
margin-left: auto;
margin-right: auto;
font-size: 1.5625rem;
font-family: var(--font-family-title);
background: var(--color-grey);
box-shadow: 0 0 0 100vmax var(--color-grey);
clip-path: inset(0 -100vmax);
}
.site-nav .hs-menu-children-wrapper a {
display: inline-block;
}
.site-nav .hs-menu-children-wrapper a::after {
transition: transform 200ms ease-in;
}
.site-nav .hs-menu-children-wrapper a:hover::after {
transform: translateX(0.25rem);
}
.site-nav #hs_menu_wrapper_main_menu_ > ul {
justify-content: center;
}
.site-nav #hs_menu_wrapper_top_menu_ {
position: absolute;
top: 0;
left: 0;
width: var(--width-wide);
height: 2.5rem;
background: var(--color-yellow);
box-shadow: 0 0 0 100vmax var(--color-yellow);
clip-path: inset(0 -100vmax);
}
.site-nav #hs_menu_wrapper_top_menu_ > ul {
height: 2.5rem;
gap: var(--space-s);
justify-content: flex-end;
align-items: center;
}
.site-nav #hs_menu_wrapper_top_menu_ .hs-menu-depth-1 > a {
padding: 0;
font-size: 0.9375rem;
font-family: var(--font-family-base);
}
.site-nav #hs_menu_wrapper_top_menu_ .hs-menu-depth-1:first-child > a::before {
content: "";
display: inline-block;
width: 0.76356rem;
height: 0.76356rem;
background: url('data:image/svg+xml,');
}
}
@media (min-width: 105.001rem) {
.site-nav .hs-menu-wrapper > ul {
gap: var(--space-xl);
}
}
@media (max-width: 70rem) {
.site-nav #hs_menu_wrapper_main_menu_ {
margin-top: 1rem;
margin-bottom: var(--space-s);
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 {
margin: 0 calc(var(--side-padding) * -1);
border-top: 0.0625rem solid var(--color-grey);
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1:not(.hs-item-has-children) > a,
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > .hs-item__sub-toggle.hs-item__sub-toggle, .site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children {
justify-content: space-between;
width: 100%;
padding: var(--space-s) var(--side-padding);
border-bottom: 0.0625rem solid var(--color-grey);
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1:not(.hs-item-has-children) > a::after,
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > .hs-item__sub-toggle.hs-item__sub-toggle::after, .site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children::after {
content: "";
display: block;
width: 1.36em;
height: 1.36em;
background: currentColor;
transition: transform 200ms ease-in;
-webkit-mask-size: contain;
mask-size: contain;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children {
position: relative;
display: flex;
flex-flow: wrap;
width: auto;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children > a {
position: relative;
z-index: 2;
padding: 0;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children::after {
display: none;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children .hs-item__sub-toggle {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1.36em;
width: auto;
box-sizing: content-box;
border-bottom: 0;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1.hs-item-has-children .hs-item__sub-toggle::after {
margin-left: auto;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > .hs-item__sub-toggle.hs-item__sub-toggle[aria-expanded=true] {
border-bottom: 0;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > .hs-item__sub-toggle.hs-item__sub-toggle[aria-expanded=true]::after {
transform: rotate(180deg);
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > .hs-item__sub-toggle.hs-item__sub-toggle::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > .hs-item__sub-toggle.hs-item__sub-toggle svg {
display: none;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 > a::after {
-webkit-mask-image: url('data:image/svg+xml,');
mask-image: url('data:image/svg+xml,');
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 .hs-menu-children-wrapper a {
font-size: var(--heading-200);
line-height: 1.3;
font-family: var(--font-family-title);
font-weight: 400;
color: var(--color-text-secondary);
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 .hs-menu-children-wrapper .hs-menu-item__description {
display: none;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 .hs-menu-children-wrapper.is-opened {
padding: var(--space-s) calc(var(--side-padding) + var(--space-s)) 0;
}
.site-nav #hs_menu_wrapper_main_menu_ .hs-menu-depth-1 .hs-menu-children-wrapper.is-opened li + li {
margin-top: var(--space-s);
}
.site-nav #hs_cos_wrapper_header_primary_cta {
display: block;
margin-top: var(--space-s);
}
.site-nav #hs_cos_wrapper_header_primary_cta .btn {
width: 100%;
justify-content: space-between;
}
}
.home-hero-title span {
display: block;
font-size: var(--heading-500);
line-height: var(--line-height-heading);
font-family: var(--font-family-title);
font-weight: 400;
}
.site-hero {
background: var(--color-ivory);
overflow: hidden;
}
.site-hero--text-justify-center #hs_cos_wrapper_hero_content {
justify-content: center;
text-align: center;
}
.site-hero--text-justify-center #hs_cos_wrapper_hero_content > *:not(h1):not(.hs-web-interactive-inline):not(p:empty) {
margin-left: auto;
margin-right: auto;
}
@media (min-width: 48.001rem) {
.site-hero--text-justify-center #hs_cos_wrapper_hero_content > *:not(h1):not(.hs-web-interactive-inline):not(p:empty) {
flex: 0 1 66%;
}
}
.site-hero--images-crop .site-hero__image-left,
.site-hero--images-crop .site-hero__image-right {
position: relative;
align-self: stretch;
}
.site-hero--images-crop .site-hero__image-left img,
.site-hero--images-crop .site-hero__image-right img {
position: absolute;
bottom: 0;
max-width: none;
height: 95%;
width: auto;
}
@media (max-width: 48rem) {
.site-hero--images-crop .site-hero__image-left img,
.site-hero--images-crop .site-hero__image-right img {
height: auto;
max-width: 100%;
position: static;
width: 100%;
}
}
.site-hero--images-crop .site-hero__image-left img {
right: 0;
}
.site-hero--images-crop .site-hero__image-right img {
left: 0;
}
.site-hero--images-show-full .site-hero__image-right {
text-align: right;
}
@media (max-width: 48rem) {
.site-hero--images-show-full .site-hero__image-right {
padding-bottom: var(--space-m);
}
}
@media (min-width: 48.001rem) {
.site-hero--overlap .site-hero__content {
padding-bottom: calc(7.27em + var(--space-5xl));
}
}
.site-hero--overlap + .main-dnd-area {
margin-top: -7.27em;
}
.site-hero--overlap + .main-dnd-area .dnd-section:first-child {
position: relative;
margin-top: 0;
}
.site-hero__wrapper {
display: grid;
align-items: center;
}
.site-hero--images-right .site-hero__wrapper {
gap: var(--space-5xl);
grid-template-columns: 50.6% 1fr;
}
@media (max-width: 48rem) {
.site-hero--images-right .site-hero__wrapper {
grid-template-columns: 1fr;
gap: 0;
}
}
.site-hero--images-left .site-hero__wrapper {
gap: var(--space-5xl);
grid-template-columns: 1fr 50.6%;
}
@media (max-width: 48rem) {
.site-hero--images-left .site-hero__wrapper {
grid-template-columns: 1fr;
gap: 0;
}
}
.site-hero--images-left-right .site-hero__wrapper {
grid-template-columns: 1fr 51% 1fr;
}
@media (max-width: 48rem) {
.site-hero--images-left-right .site-hero__wrapper {
grid-template-columns: 1fr;
gap: 0;
}
}
.site-hero--images-left-right.site-hero--images-show-full .site-hero__wrapper {
gap: var(--gutter);
}
.site-hero__content {
padding-top: var(--space-5xl);
padding-bottom: var(--space-5xl);
}
.site-hero__image-left, .site-hero__image-right {
margin: 0;
}
.site-hero__image-left img, .site-hero__image-right img {
vertical-align: top;
}
@media (max-width: 48rem) {
.site-hero__image-left {
display: none;
}
}
.site-hero #hs_cos_wrapper_hero_content {
display: flex;
flex-wrap: wrap;
-moz-column-gap: var(--space-xs);
column-gap: var(--space-xs);
}
.site-hero #hs_cos_wrapper_hero_content > div:not(.hs-web-interactive-inline) {
margin-top: 1.5rem;
}
.site-hero #hs_cos_wrapper_hero_content > .hs-web-interactive-inline {
display: inline-flex;
margin-bottom: var(--space-5xs);
}
.site-hero #hs_cos_wrapper_hero_content > *:not(h1):not(.hs-web-interactive-inline):not(p:empty) {
flex: 0 1 100%;
}
.site-hero #hs_cos_wrapper_hero_content p:empty {
flex: 0 1 100%;
}
.site-hero #hs_cos_wrapper_hero_content + p:empty {
display: none;
}
.posts-list {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(min(100%, max(15rem, 25%)), 1fr));
-moz-column-gap: var(--gutter);
column-gap: var(--gutter);
row-gap: var(--space-l);
}
@media (min-width: 105.001rem) {
.posts-list {
grid-template-columns: repeat(3, 1fr);
}
}
* + .posts-list,
.posts-list + * {
margin-top: var(--space-l);
}
.post-item {
position: relative;
font-size: var(--text-300);
line-height: var(--line-height-body);
font-family: var(--font-family-base);
}
.post-item__image {
margin: 0 0 var(--space-xs);
}
.post-item__image img {
aspect-ratio: 28.5/19;
vertical-align: top;
-o-object-fit: cover;
object-fit: cover;
}
.post-item__title {
font-size: var(--heading-200);
line-height: 1.3;
font-family: var(--font-family-title);
font-weight: 400;
color: var(--color-primary);
}
.post-item__title a {
text-decoration: none;
}
.post-item__title + * {
margin-top: var(--space-5xs);
}
.post-item a:hover {
color: var(--color-text);
}
.social-share {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-flow: wrap;
}
.social-share__item {
margin: 0 1.3rem 0 0;
}
.social-share__item:last-child {
margin-right: 0;
}
.social-share__item--label {
flex: 0 0 100%;
margin: 0 0 1rem;
font-size: var(--heading-300);
line-height: 1.3;
font-family: var(--font-family-title);
font-weight: 400;
}
.social-share a {
color: var(--color-primary);
}
.social-share a:hover, .social-share a:focus {
text-decoration: none;
}
/*--------------------------------------------------------------
# Utilities - Helpers and overrides.
--------------------------------------------------------------*/
:focus {
outline: thin dotted;
}
.screen-reader-text {
clip: rect(1px, 1px, 1px, 1px);
position: absolute !important;
overflow: hidden;
}
.screen-reader-text:focus {
background-color: var(--color-link);
clip: auto !important;
color: white;
display: block;
font-size: 0.8em;
font-weight: bold;
height: auto;
padding: 0.75rem;
left: 0.5rem;
top: 0.5rem;
text-decoration: none;
width: auto;
z-index: 100000;
}
/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
outline: 0;
}
.hs-inline-edit script[type="mce-no/type"] {
display: block;
background: red;
color: #fff;
font-size: 1rem;
font-family: "Lucida Console";
padding: 1rem;
}
.hs-inline-edit script[type="mce-no/type"]:before {
content: "JS koodi, muokkaa lähdekoodin kautta";
display: block;
margin: 0 0 1rem;
font-family: sans-serif;
font-size: 0.8rem;
font-weight: bold;
text-transform: uppercase;
}