/* Settings */ :root { /* global text variables */ --hyphens: manual; /* transitions */ --transition: all ease-in-out 0.3s; /* box shadows */ --box-shadow-small: 0 5px 20px 0 rgba(105, 101, 115, 0.10); --box-shadow-big: 0 5px 20px 0 rgba(105, 101, 115, 0.30); /* border radius */ --border-radius-big: 0px; --border-radius-small: 0px; --border-radius-circle: 0%; } :root { /* Base colors */ --base-color--1: #4C0; --base-color--2: #BEA179; --base-color--3: #3D5057; --base-color--4: #E7E7E0; --base-color--5: #F4EFE8; --black: #2E3133; --white: #FFFFFF; /* base color naming based on figma naming */ --green: #4C0; --cinnamon: #BEA179; --cool-grey: #3D5057; --orange: #E7E7E0; --grey: #F4EFE8; /* base color naming base on figma RGB version */ --dark-blue-rgb: 68, 204, 0; --blue-rgb: 190, 161, 121; --electric-blue-rgb: 61, 80, 87; --orange-rgb: 231, 231, 224; --grey-rgb: ; /* base color naming base on figma RGBA version */ --dark-blue-rgba: rgba(68, 204, 0, 1); --blue-rgba: rgba(190, 161, 121, 1); --electric-blue-rgba: rgba(61, 80, 87, 1); --orange-rgba: rgba(231, 231, 224, 1); --grey-rgba: rgba(244, 239, 232, 1); /* general colors which arent set in the theme, but used throughout project */ /* --blueish-grey: #BACAD8; */ /* --clean-blueish-grey: #EBF6FF; */ } :root{ /* This is setting variables for evertyhing that is in font.css which contains font-weight, text decoration and font-family */ --paragraph-font-family: Roboto, sans-serif; --blockquote-font-family: 'Roboto Serif', serif; --link-font-family: Roboto, sans-serif; --h1-font-weight: 300; --h1-font-family: 'Roboto Serif', serif; --h2-font-family: 'Roboto Serif', serif; --h3-font-family: Roboto, sans-serif; --h4-font-family: Roboto, sans-serif; --h5-font-weight: 500; --h5-font-family: Roboto, sans-serif; --h6-font-family: Roboto, sans-serif; --paragraph-small-font-family: Roboto, sans-serif; --paragraph-large-font-family: 'Roboto Serif', serif; --subheading-font-weight: 600; --subheading-font-family: Montserrat; /* === Text colors === */ --heading-color: rgba(0, 0, 0, 1); --subheading-color: rgba(0, 0, 0, 1); --body-color: rgba(0, 0, 0, 1); --quote-color: rgba(0, 0, 0, 1); --link-color: rgba(0, 0, 0, 1); --link-color-hover: rgba(0, 0, 0, 1); --link-color-focus: rgba(0, 0, 0, 1); /* === H1 === */ --h1-font-size-desktop: 4.6875rem; --h1-font-size-mobile: 3.4375rem; --h1-transform: none; --h1-line-height: 1.1; --h1-letter-spacing-desktop: 0; --h1-letter-spacing-mobile: 0; /* === H2 === */ --h2-font-size-desktop: 3.4375rem; --h2-font-size-mobile: 2.375rem; --h2-transform: none; --h2-line-height: 1.1; --h2-letter-spacing-desktop: 0; --h2-letter-spacing-mobile: 0; /* === H3 === */ --h3-font-size-desktop: 2.375rem; --h3-font-size-mobile: 1.875rem; --h3-transform: none; --h3-line-height: 1.2; --h3-letter-spacing-desktop: 0; --h3-letter-spacing-mobile: 0; /* === H4 === */ --h4-font-size-desktop: 1.75rem; --h4-font-size-mobile: 1.5625rem; --h4-transform: none; --h4-line-height: 1.2; --h4-letter-spacing-desktop: 0; --h4-letter-spacing-mobile: 0; /* === H5 === */ --h5-font-size-desktop: 1.25rem; --h5-font-size-mobile: 1.25rem; --h5-transform: none; --h5-line-height: 1.4; --h5-letter-spacing-desktop: 0; --h5-letter-spacing-mobile: 0; /* === H6 === */ --h6-font-size-desktop: 1.0rem; --h6-font-size-mobile: 1.0rem; --h6-transform: none; --h6-line-height: 1.5; --h6-letter-spacing-desktop: 0; --h6-letter-spacing-mobile: 0; /* === Subheading === */ --subheading-font-size-desktop: 1.0rem; --subheading-font-size-mobile: 1.0rem; --subheading-transform: uppercase; --subheading-line-height: 1.5; --subheading-letter-spacing-desktop: 2; --subheading-letter-spacing-mobile: 2; /* === Paragraph === */ --paragraph-font-size-desktop: 16px; --paragraph-font-size-mobile: 15; --paragraph-transform: ; --paragraph-line-height: 1.4; --paragraph-letter-spacing-desktop: 0; --paragraph-letter-spacing-mobile: 0; /* === Paragraph (Large) === */ --paragraph-large-font-size-desktop: 1.875rem; --paragraph-large-font-size-mobile: 1.125rem; --paragraph-large-line-height: 1.4; --paragraph-large-letter-spacing-desktop: 0; --paragraph-large-letter-spacing-mobile: 0; /* === Paragraph (Small) === */ --paragraph-small-font-size-desktop: 0.8125rem; --paragraph-small-font-size-mobile: 0.8125rem; --paragraph-small-line-height: 1.4; --paragraph-small-letter-spacing-desktop: 0; --paragraph-small-letter-spacing-mobile: 0; /* === Links === */ --link-font-size-desktop: 1.0rem; --link-font-size-mobile: 0.9375rem; --link-transform: ; --link-line-height: 1.4; --link-letter-spacing-desktop: ; --link-letter-spacing-mobile: 0; /* === Blockquote === */ --blockquote-font-size-desktop: 2.3125rem; --blockquote-font-size-mobile: 1.5625rem; --blockquote-transform: ; --blockquote-line-height: 1.3; --blockquote-letter-spacing-desktop: 0; --blockquote-letter-spacing-mobile: 0; } a { {font=Roboto, font_set=GOOGLE, styles={font-weight=normal, text-decoration=none, font-family=Roboto, sans-serif, font-style=normal}, size=null, size_unit=null, color=null, variant=regular, fallback=sans-serif, line_height=null, letter_spacing=null, casing=null, style=font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal, css=font-family: Roboto, sans-serif;} } :root { /* Label text */ --form-label-color: #000000; --form-label-font-family: Roboto; --form-label-font-size-desktop: 0.8125rem; --form-label-font-size-mobile: 0.8125rem; --form-label-font-weight: regular; --form-label-transform: capitalize; --form-label-spacing-bottom: 0.375rem; /* Input text */ --form-input-color: #2E3133; --form-input-font-family: Roboto; --form-input-font-size-desktop: 1.0rem; --form-input-font-size-mobile: 1.0rem; --form-input-font-weight: regular; --form-input-transform: none; /* Placeholder text */ --form-placeholder-color: #2E3133; /* Error text */ --form-error-color: #FF0000; /* Input fields */ --form-input-background-color: #FFFFFF; --form-input-border-color: #2E3133; --form-input-border-focus-color: #44cc00; --form-input-border-size: 0.0625rem; --form-input-border-radius: 1.875rem; --form-input-padding-top: 1.0rem; --form-input-padding-bottom: 1.0rem; --form-input-padding-right: 1.25rem; --form-input-padding-left: 1.25rem; /* Misc text */ --form-misc-size-desktop: 0.875rem; --form-misc-size-mobile: 0.875rem; /* Form fields */ --form-field-spacing-top: 10px; --form-field-spacing-bottom: 40px; --form-field-gap: 32px; --placeholder-opacity: 1; --text-area-min-height: 120px; /* Multilists checkboxes and radio buttons */ --multi-list-gap: 7px; --multi-list-spacing-top: 10px; /* Checkboxes and Radio buttons general spacing to label */ --label-check-spacing: 16px; /* Date */ --form-date-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6.8076 0C7.03038 0 7.24404 0.0884998 7.40157 0.24603C7.5591 0.403561 7.6476 0.617218 7.6476 0.84V2.4108H16.668V0.8508C16.668 0.628018 16.7565 0.414361 16.914 0.25683C17.0716 0.0992998 17.2852 0.0108 17.508 0.0108C17.7308 0.0108 17.9444 0.0992998 18.102 0.25683C18.2595 0.414361 18.348 0.628018 18.348 0.8508V2.4108H21.6C22.2363 2.4108 22.8466 2.66349 23.2966 3.11332C23.7467 3.56315 23.9997 4.17329 24 4.8096V21.6012C23.9997 22.2375 23.7467 22.8477 23.2966 23.2975C22.8466 23.7473 22.2363 24 21.6 24H2.4C1.76369 24 1.15342 23.7473 0.703368 23.2975C0.253315 22.8477 0.000318156 22.2375 0 21.6012L0 4.8096C0.000318156 4.17329 0.253315 3.56315 0.703368 3.11332C1.15342 2.66349 1.76369 2.4108 2.4 2.4108H5.9676V0.8388C5.96792 0.616226 6.05656 0.402877 6.21405 0.245606C6.37155 0.0883348 6.58503 -2.27116e-07 6.8076 0ZM1.68 9.2904V21.6012C1.68 21.6958 1.69862 21.7894 1.73481 21.8767C1.77099 21.9641 1.82403 22.0435 1.89088 22.1103C1.95774 22.1772 2.03711 22.2302 2.12447 22.2664C2.21182 22.3026 2.30545 22.3212 2.4 22.3212H21.6C21.6946 22.3212 21.7882 22.3026 21.8755 22.2664C21.9629 22.2302 22.0423 22.1772 22.1091 22.1103C22.176 22.0435 22.229 21.9641 22.2652 21.8767C22.3014 21.7894 22.32 21.6958 22.32 21.6012V9.3072L1.68 9.2904ZM8.0004 17.5428V19.542H6V17.5428H8.0004ZM12.9996 17.5428V19.542H11.0004V17.5428H12.9996ZM18 17.5428V19.542H15.9996V17.5428H18ZM8.0004 12.7704V14.7696H6V12.7704H8.0004ZM12.9996 12.7704V14.7696H11.0004V12.7704H12.9996ZM18 12.7704V14.7696H15.9996V12.7704H18ZM5.9676 4.0896H2.4C2.30545 4.0896 2.21182 4.10822 2.12447 4.14441C2.03711 4.18059 1.95774 4.23362 1.89088 4.30048C1.82403 4.36734 1.77099 4.44671 1.73481 4.53407C1.69862 4.62142 1.68 4.71505 1.68 4.8096V7.6116L22.32 7.6284V4.8096C22.32 4.71505 22.3014 4.62142 22.2652 4.53407C22.229 4.44671 22.176 4.36734 22.1091 4.30048C22.0423 4.23362 21.9629 4.18059 21.8755 4.14441C21.7882 4.10822 21.6946 4.0896 21.6 4.0896H18.348V5.2044C18.348 5.42718 18.2595 5.64084 18.102 5.79837C17.9444 5.9559 17.7308 6.0444 17.508 6.0444C17.2852 6.0444 17.0716 5.9559 16.914 5.79837C16.7565 5.64084 16.668 5.42718 16.668 5.2044V4.0896H7.6476V5.1936C7.6476 5.41638 7.5591 5.63004 7.40157 5.78757C7.24404 5.9451 7.03038 6.0336 6.8076 6.0336C6.58482 6.0336 6.37116 5.9451 6.21363 5.78757C6.0561 5.63004 5.9676 5.41638 5.9676 5.1936V4.0896Z' fill='black'/%3E%3C/svg%3E"); /* Dropdown */ --form-dropdown-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M14.3535 0.353516L7.35352 7.35352L0.353516 0.353515' stroke='%2301273E'/%3E%3C/svg%3E"); --form-dropdown-icon-light: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='9' viewBox='0 0 15 9' fill='none'%3E%3Cpath d='M14.3535 0.353516L7.35352 7.35352L0.353516 0.353515' stroke='white'/%3E%3C/svg%3E"); /* Checkbox buttons */ --form-checkbox-bg-color: transparent; --form-checkbox-width: 20px; --form-checkbox-height: 20px; /* for the icon visit https://yoksel.github.io/url-encoder/ and paste your svg in and copy the ready for css part */ --form-checkbox-icon: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='2' stroke='%23BACAD8'/%3E%3C/svg%3E%0A"); --form-checkbox-checked-icon: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='2' stroke='%23BACAD8'/%3E%3Crect x='4.5' y='4.5' width='12' height='12' rx='1' fill='%23E57200'/%3E%3C/svg%3E"); --form-checkbox-icon--white: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='2' stroke='%23BACAD8'/%3E%3C/svg%3E%0A"); --form-checkbox-checked-icon--white: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='20' height='20' rx='2' stroke='%23BACAD8'/%3E%3Crect x='4.5' y='4.5' width='12' height='12' rx='1' fill='%23E57200'/%3E%3C/svg%3E"); /* Radio buttons */ --form-radio-bg-color: transparent; --form-radio-width: 20px; --form-radio-height: 20px; /* for the icon visit https://yoksel.github.io/url-encoder/ and paste your svg in and copy the ready for css part */ --form-radio-icon: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='10' stroke='%23BACAD8'/%3E%3C/svg%3E%0A"); --form-radio-checked-icon: url("data:image/svg+xml,%3Csvg width='21' height='21' viewBox='0 0 21 21' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='10.5' cy='10.5' r='10' stroke='%23BACAD8'/%3E%3Ccircle cx='10.5' cy='10.5' r='6' fill='%23E57200'/%3E%3C/svg%3E%0A"); } :root { --button-line-height: 1; --button-font-style: normal; --button-letter-spacing: normal; /* Global button settings */ --button-font-family: Roboto; --button-font-size-desktop: 1.0rem; --button-font-size-mobile: 0.875rem; --button-font-weight: regular; --button-transform: none; --button-padding-top: 1.0625rem; --button-padding-bottom: 1.0625rem; --button-padding-right: 2.5rem; --button-padding-left: 2.5rem; --button-padding-top-mobile: 0.625rem; --button-padding-bottom-mobile: 0.625rem; --button-padding-right-mobile: 1.25rem; --button-padding-left-mobile: 1.25rem; --button-border-size: 0.0rem; --button-border-radius: 0.0rem; --button-border-style: ; --button-border-color: ; --button-border-color-hover: ; --button-background-color: ; --button-background-color-hover: ; --button-text-color: ; --button-text-color-hover: ; /* Button 1 */ --button-one-font-family: Roboto; --button-one-font-size-desktop: 1.0rem; --button-one-font-size-mobile: 0.875rem; --button-one-font-weight: regular; --button-one-transform: none; --button-one-padding-top: 1.0625rem; --button-one-padding-bottom: 1.0625rem; --button-one-padding-right: 2.5rem; --button-one-padding-left: 2.5rem; --button-one-padding-top-mobile: 0.625rem; --button-one-padding-bottom-mobile: 0.625rem; --button-one-padding-right-mobile: 1.25rem; --button-one-padding-left-mobile: 1.25rem; --button-one-border-size: 0.0rem; --button-one-border-radius: 3.125rem; --button-one-border-style: none; --button-one-border-color: #2E3133; --button-one-border-color-hover: #2E3133; --button-one-background-color: #2E3133; --button-one-background-color-hover: #FFFFFF; --button-one-text-color: #FFFFFF; --button-one-text-color-hover: #2E3133; /* Button 2 */ --button-two-font-family: Roboto; --button-two-font-size-desktop: 1.0rem; --button-two-font-size-mobile: 0.875rem; --button-two-font-weight: regular; --button-two-transform: none; --button-two-padding-top: 1.0625rem; --button-two-padding-bottom: 1.0625rem; --button-two-padding-right: 2.5rem; --button-two-padding-left: 2.5rem; --button-two-padding-top-mobile: 0.625rem; --button-two-padding-bottom-mobile: 0.625rem; --button-two-padding-right-mobile: 1.25rem; --button-two-padding-left-mobile: 1.25rem; --button-two-border-size: 0.0625rem; --button-two-border-radius: 1.875rem; --button-two-border-style: solid; --button-two-border-color: #44CC00; --button-two-border-color-hover: #2E3133; --button-two-background-color: rgba(46, 49, 51, 0%); --button-two-background-color-hover: #2E3133; --button-two-text-color: #2E3133; --button-two-text-color-hover: #ffffff; /* Button 3 */ --button-three-font-family: Roboto; --button-three-font-size-desktop: 1.0rem; --button-three-font-size-mobile: 0.875rem; --button-three-font-weight: regular; --button-three-transform: none; --button-three-padding-top: 1.0625rem; --button-three-padding-bottom: 1.0625rem; --button-three-padding-right: 2.5rem; --button-three-padding-left: 2.5rem; --button-three-padding-top-mobile: 0.625rem; --button-three-padding-bottom-mobile: 0.625rem; --button-three-padding-right-mobile: 1.25rem; --button-three-padding-left-mobile: 1.25rem; --button-three-border-size: 0.0625rem; --button-three-border-radius: 1.875rem; --button-three-border-style: solid; --button-three-border-color: #44CC00; --button-three-border-color-hover: #FFFFFF; --button-three-background-color: rgba(0, 0, 0, 0%); --button-three-background-color-hover: #FFFFFF; --button-three-text-color: #FFFFFF; --button-three-text-color-hover: #2E3133; /* Button 4 */ --button-four-font-family: Roboto; --button-four-font-size-desktop: 1.0rem; --button-four-font-size-mobile: 0.875rem; --button-four-font-weight: regular; --button-four-transform: none; --button-four-padding-top: 1.0625rem; --button-four-padding-bottom: 1.0625rem; --button-four-padding-right: 2.5rem; --button-four-padding-left: 2.5rem; --button-four-padding-top-mobile: 0.625rem; --button-four-padding-bottom-mobile: 0.625rem; --button-four-padding-right-mobile: 1.25rem; --button-four-padding-left-mobile: 1.25rem; --button-four-border-size: 0.0625rem; --button-four-border-radius: 1.875rem; --button-four-border-style: none; --button-four-border-color: #ffffff; --button-four-border-color-hover: #ffffff; --button-four-background-color: #ffffff; --button-four-background-color-hover: #44CC00; --button-four-text-color: #2E3133; --button-four-text-color-hover: #FFFFFF; /* Button 5 */ --button-five-font-family: Roboto; --button-five-font-size-desktop: 1.0rem; --button-five-font-size-mobile: 0.875rem; --button-five-font-weight: regular; --button-five-transform: none; --button-five-padding-top: 1.0625rem; --button-five-padding-bottom: 1.0625rem; --button-five-padding-right: 2.5rem; --button-five-padding-left: 2.5rem; --button-five-padding-top-mobile: 0.625rem; --button-five-padding-bottom-mobile: 0.625rem; --button-five-padding-right-mobile: 1.25rem; --button-five-padding-left-mobile: 1.25rem; --button-five-border-size: 0.0625rem; --button-five-border-radius: 1.875rem; --button-five-border-style: solid; --button-five-border-color: #2E3133; --button-five-border-color-hover: #2E3133; --button-five-background-color: rgba(255, 255, 255, 0%); --button-five-background-color-hover: #2E3133; --button-five-text-color: #2E3133; --button-five-text-color-hover: #ffffff; } :root { --tags-font-size-desktop: 1.0rem; --tags-font-size-mobile: 0.9375rem; --tags-font-weight: 600; --tags-transform: none; --tag-background: rgba(0, 0, 0, 0%); --tag-border-color: #000000; --tag-text-color: #000000; --tag-hover-background: #000000; --tag-hover-border-color: #000000; --tag-hover-text-color: #ffffff; --tag-border-width: 0.0625rem; --tag-border-radius: 3.125rem; --form-tag-padding-top: 0.625rem; --form-tag-padding-bottom: 0.625rem; --form-tag-padding-right: 1.875rem; --form-tag-padding-left: 1.875rem; } :root { --base-padding: 37px; --max-width: 1590px; --max-width-sm: calc(var(--max-width)/12 * 6); --max-width-md: calc(var(--max-width)/12 * 8); --max-width-lg: calc(var(--max-width)/12 * 10); --grid-gap: 32px; --flex-gap: 35px; } /* Generic */ html { line-height: 1.15; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; overflow-x: clip; } h1 { font-size: 2em; margin: 0.67em 0; } hr { box-sizing: content-box; height: 0; } pre { font-family: monospace, monospace; font-size: 1em; } abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; } b, strong { font-weight: bolder; } code, kbd, samp { font-family: monospace, monospace; font-size: 1em; } small { font-size: 80%; } sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; } button, select { text-transform: none; } button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } fieldset { padding: 0.35em 0.75em 0.625em; } legend { padding: 0; } progress { vertical-align: baseline; } [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } [type='search'] { -webkit-appearance: textfield; outline-offset: -2px; } [type='search']::-webkit-search-decoration { -webkit-appearance: none; } ::-webkit-file-upload-button { -webkit-appearance: button; font: inherit; } details { display: block; } summary { display: list-item; } *, *:before, *:after { box-sizing: border-box; } /* Objects */ /* Responsive grid */ .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.127659574%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.99999998999999%; *width: 99.94680850063828%; } .row-fluid .span11 { width: 91.489361693%; *width: 91.4361702036383%; } .row-fluid .span10 { width: 82.97872339599999%; *width: 82.92553190663828%; } .row-fluid .span9 { width: 74.468085099%; *width: 74.4148936096383%; } .row-fluid .span8 { width: 65.95744680199999%; *width: 65.90425531263828%; } .row-fluid .span7 { width: 57.446808505%; *width: 57.3936170156383%; } .row-fluid .span6 { width: 48.93617020799999%; *width: 48.88297871863829%; } .row-fluid .span5 { width: 40.425531911%; *width: 40.3723404216383%; } .row-fluid .span4 { width: 31.914893614%; *width: 31.8617021246383%; } .row-fluid .span3 { width: 23.404255317%; *width: 23.3510638276383%; } .row-fluid .span2 { width: 14.89361702%; *width: 14.8404255306383%; } .row-fluid .span1 { width: 6.382978723%; *width: 6.329787233638298%; } .container-fluid { *zoom: 1; } .container-fluid:before, .container-fluid:after { display: table; content: ""; } .container-fluid:after { clear: both; } @media (max-width: 767px) { .row-fluid { width: 100%; } .row-fluid [class*="span"] { display: block; float: none; width: auto; margin-left: 0; } } @media (min-width: 768px) and (max-width: 1139px) { .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.762430939%; *margin-left: 2.709239449638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 99.999999993%; *width: 99.9468085036383%; } .row-fluid .span11 { width: 91.436464082%; *width: 91.38327259263829%; } .row-fluid .span10 { width: 82.87292817100001%; *width: 82.8197366816383%; } .row-fluid .span9 { width: 74.30939226%; *width: 74.25620077063829%; } .row-fluid .span8 { width: 65.74585634900001%; *width: 65.6926648596383%; } .row-fluid .span7 { width: 57.182320438000005%; *width: 57.129128948638304%; } .row-fluid .span6 { width: 48.618784527%; *width: 48.5655930376383%; } .row-fluid .span5 { width: 40.055248616%; *width: 40.0020571266383%; } .row-fluid .span4 { width: 31.491712705%; *width: 31.4385212156383%; } .row-fluid .span3 { width: 22.928176794%; *width: 22.874985304638297%; } .row-fluid .span2 { width: 14.364640883%; *width: 14.311449393638298%; } .row-fluid .span1 { width: 5.801104972%; *width: 5.747913482638298%; } } @media (min-width: 1280px) { .row-fluid { width: 100%; *zoom: 1; } .row-fluid:before, .row-fluid:after { display: table; content: ""; } .row-fluid:after { clear: both; } .row-fluid [class*="span"] { display: block; float: left; width: 100%; min-height: 1px; margin-left: 2.564102564%; *margin-left: 2.510911074638298%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; -ms-box-sizing: border-box; box-sizing: border-box; } .row-fluid [class*="span"]:first-child { margin-left: 0; } .row-fluid .span12 { width: 100%; *width: 99.94680851063829%; } .row-fluid .span11 { width: 91.45299145300001%; *width: 91.3997999636383%; } .row-fluid .span10 { width: 82.905982906%; *width: 82.8527914166383%; } .row-fluid .span9 { width: 74.358974359%; *width: 74.30578286963829%; } .row-fluid .span8 { width: 65.81196581200001%; *width: 65.7587743226383%; } .row-fluid .span7 { width: 57.264957265%; *width: 57.2117657756383%; } .row-fluid .span6 { width: 48.717948718%; *width: 48.6647572286383%; } .row-fluid .span5 { width: 40.170940171000005%; *width: 40.117748681638304%; } .row-fluid .span4 { width: 31.623931624%; *width: 31.5707401346383%; } .row-fluid .span3 { width: 23.076923077%; *width: 23.0237315876383%; } .row-fluid .span2 { width: 14.529914530000001%; *width: 14.4767230406383%; } .row-fluid .span1 { width: 5.982905983%; *width: 5.929714493638298%; } } /* 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: 767px) { .visible-phone { display: inherit !important; } .hidden-phone { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important; } } @media (min-width: 768px) and (max-width: 1139px) { .visible-tablet { display: inherit !important; } .hidden-tablet { display: none !important; } .hidden-desktop { display: inherit !important; } .visible-desktop { display: none !important ; } } /* Content wrappers for blog post and system templates */ .content-wrapper { padding: 0 20px; margin: 0 auto; } /* Drag and drop layout styles */ .dnd-section { padding-right: var(--base-padding); padding-left: var(--base-padding); padding-top: 65px; padding-bottom: 65px; } .dnd-section.row-fluid-wrapper.row-depth-1[class*="max-width-section-centering"] .dnd-column { padding: 20px; } /* .dnd-section:has(.sticky-quote) { padding-top: 0px; padding-bottom: 0px; } */ .dnd-section > .row-fluid { max-width: 1680px; margin: 0 auto; } @media (min-width: 768px) { .dnd-section { padding-right: var(--base-padding); padding-left: var(--base-padding); padding-top: 120px; padding-bottom: 120px; } .dnd-section.row-fluid-wrapper.row-depth-1[class*="max-width-section-centering"] .dnd-column { padding: 120px; } /* .dnd-section:has(.sticky-quote) { padding-top: 0px; padding-bottom: 0px; } */ } @media (min-width: 1440px) { .dnd-section { padding-left: 37px; padding-right: 37px; } } /* Elements */ html { font-size: 16px default; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--paragraph-font-size-desktop); font-style: normal; line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing-desktop); overflow-wrap: break-word; word-wrap: break-word; color: var(--body-color); hyphens: var(--hyphens); } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } section.base ol:not(.inputs-list) { padding-left: 18px; } section.base ul:not(.inputs-list) { padding-left: 22px; } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin: 0; margin-bottom: 20px; clear: both; font-style: normal; color: var(--heading-color); } h1, .h1 { font-weight: 300; text-decoration: none; font-family: 'Roboto Serif', serif; font-style: normal; font-family: Roboto Serif, sans-serif; font-size: var(--h1-font-size-desktop); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing-desktop); text-transform: var(--h1-transform); } h2, .h2 { font-weight: normal; text-decoration: none; font-family: 'Roboto Serif', serif; font-style: normal; font-family: Roboto Serif, sans-serif; font-size: var(--h2-font-size-desktop); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing-desktop); text-transform: var(--h2-transform); } h3, .h3 { font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--h3-font-size-desktop); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing-desktop); text-transform: var(--h3-transform); } h4, .h4 { font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--h4-font-size-desktop); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing-desktop); text-transform: var(--h4-transform); } h5, .h5 { font-weight: 500; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--h5-font-size-desktop); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing-desktop); text-transform: var(--h5-transform); } h6, .h6 { font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--h6-font-size-desktop); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing-desktop); text-transform: var(--h6-transform); } p { margin: 0; font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--paragraph-font-size-desktop); font-style: normal; line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing-desktop); text-transform: var(--paragraph-transform); } .small, p.small { font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; font-size: var(--paragraph-small-font-size-desktop); font-style: normal; line-height: var(--paragraph-small-line-height); letter-spacing: var(--paragraph-small-letter-spacing-desktop); text-transform: var(--paragraph-small-transform); } .text-large, p.large { margin-bottom: 20px; font-weight: normal; text-decoration: none; font-family: 'Roboto Serif', serif; font-style: normal; font-family: Roboto Serif, sans-serif; font-size: var(--paragraph-large-font-size-desktop); font-style: normal; line-height: var(--paragraph-large-line-height); letter-spacing: var(--paragraph-large-letter-spacing-desktop); text-transform: var(--paragraph-large-transform); } p.large + .btn-group { margin-top: 48px; } p.small:not(:last-of-type), p.small:not(:last-child), p.large:not(:last-of-type), p.large:not(:last-child), p:not(:last-of-type), p:not(:last-child){ margin-bottom: 20px; } a:not(.btn, .tag) { font-weight: normal; text-decoration: none; font-family: Roboto, sans-serif; font-style: normal; font-family: Roboto, sans-serif; color: var(--link-color); font-size: var(--link-font-size-desktop); line-height: var(--link-line-height); letter-spacing: var(--link-letter-spacing-desktop); text-transform: var(--link-transform); } a:not(.btn, .tag):hover { color: var(--link-color-hover); } a:not(.btn, .tag):active, a:not(.btn, .tag):focus-within, a:not(.btn, .tag):focus-visible, a:not(.btn, .tag):focus { color: var(--link-color-focus); } blockquote { margin: 0; margin-bottom: 25px; padding: 0; color: var(--quote-color); font-weight: normal; text-decoration: none; font-family: 'Roboto Serif', serif; font-style: normal; font-family: Roboto Serif, sans-serif; font-size: var(--blockquote-font-size-desktop); font-style: normal; line-height: var(--blockquote-line-height); letter-spacing: var(--blockquote-letter-spacing-desktop); text-transform: var(--blockquote-transform); } .subheading { display: block; margin-bottom: 20px; color: var(--subheading-color); font-weight: 600; text-decoration: none; font-family: Montserrat; font-style: normal; font-family: Montserrat, sans-serif; font-size: var(--subheading-font-size-desktop); font-style: normal; line-height: var(--subheading-line-height); letter-spacing: calc(var(--subheading-letter-spacing-desktop) * 1px); text-transform: var(--subheading-transform); } .subheading svg{ display: none; } @media only screen and (max-width: 767px) { body { font-size: var(--paragraph-font-size-mobile); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing-mobile); } h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { margin-bottom: 20px; } h1, .h1, .title-small h1 { font-size: var(--h1-font-size-mobile); line-height: var(--h1-line-height); letter-spacing: var(--h1-letter-spacing-mobile); } h1.small, .h1.small { font-size: 2rem; line-height: 120%; } h2, .h2 { font-size: var(--h2-font-size-mobile); line-height: var(--h2-line-height); letter-spacing: var(--h2-letter-spacing-mobile); } h3, .h3 { font-size: var(--h3-font-size-mobile); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing-mobile); } h4, .h4 { font-size: var(--h4-font-size-mobile); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing-mobile); } h5, .h5 { font-size: var(--h5-font-size-mobile); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing-mobile); } h6, .h6 { font-size: var(--h6-font-size-mobile); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing-mobile); } p { font-size: var(--paragraph-font-size-mobile); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing-mobile); } p.small { font-size: var(--paragraph-small-font-size-mobile); line-height: var(--paragraph-small-line-height); letter-spacing: var(--paragraph-small-letter-spacing-mobile); } .text-large, p.large { font-size: var(--paragraph-large-font-size-mobile); line-height: var(--paragraph-large-line-height); letter-spacing: var(--paragraph-large-letter-spacing-mobile); } a { font-size: var(--link-font-size-mobile); line-height: var(--link-line-height); letter-spacing: var(--link-letter-spacing-mobile); } blockquote { font-size: var(--blockquote-font-size-mobile); line-height: var(--blockquote-line-height); letter-spacing: var(--blockquote-letter-spacing-mobile); } .subheading { margin-bottom: 20px; font-size: var(--subheading-font-size-mobile); line-height: var(--subheading-line-height); letter-spacing: var(--subheading-letter-spacing-mobile); } } /* BG Colors */ .bg-color-4 { background-color: #E7E7E0; } .bg-color-5 { background-color: #F4EFE8; } .bg-white { background-color: #FFFFFF; } .bg-black { background-color: #2E3133; } .bg-color-1 { background-color: #4C0; } .bg-color-2 { background-color: #BEA179; } .bg-color-3 { background-color: #3D5057; } .bg-black { background-color: var(--black); } .bg-white { background-color: var(--white); } form .hs-richtext, form .hs-richtext p { margin-bottom: 0.5rem; } form .hs-richtext, form .hs-richtext p, form .hs-richtext p a { font-size: var(--form-misc-size-mobile); } form label.hs-form-checkbox-display span, form label.hs-form-radio-display span, form label.hs-form-booleancheckbox-display span { font-size: var(--form-misc-size-mobile); margin-top: 2px; } @media only screen and (min-width: 768px) { form label.hs-form-checkbox-display span, form label.hs-form-radio-display span, form label.hs-form-booleancheckbox-display span, form .hs-richtext, form .hs-richtext p { font-size: var(--form-misc-size-desktop); } } form .hs-richtext img { max-width: 100% !important; } .legal-consent-container { margin-bottom: 2rem; } form .legal-consent-container .hs-form-booleancheckbox-display>span { margin-left: 0; } form fieldset.form-columns-1:has(input[type="hidden"]) { display: none; } /* Fields */ form .hs-form-field { position: relative; display: flex; flex-direction: column; justify-content: flex-start; float: none !important; width: 100% !important; margin-bottom: 1.4rem; } form .hs-form-field .input { margin-right: 0 !important; } form .hs-form-field ul { list-style-type: none; margin: 0; padding: 0; } form fieldset { border: none; max-width: 100% !important; } form fieldset + .hs_submit.hs-submit { margin-top: 1.4rem; } form fieldset:not(:last-of-type) { margin-bottom: 1.4rem; } form fieldset .hs-form-field { margin-bottom: 0; } /* form fieldset.form-columns-1 .hs-input, form fieldset.form-columns-2 .hs-input, form fieldset.form-columns-3 .hs-input { width: 100% !important; } */ form fieldset.form-columns-2, form fieldset.form-columns-3 { display: grid; align-items: flex-start; grid-gap: 1.4rem 1.4rem; grid-template-columns: minmax(0, 1fr); } @media (min-width: 768px) { form fieldset.form-columns-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } form fieldset.form-columns-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* Labels */ form label { display: block; margin-bottom: var(--form-label-spacing-bottom); color: var(--form-label-color); font-family: var(--form-label-font-family); font-size: var(--form-label-font-size-mobile); line-height: 1; font-weight: var(--form-label-font-weight); text-transform: var(--form-label-transform); } @media only screen and (min-width: 768px) { form label { font-size: var(--form-label-font-size-desktop); } } form .inputs-list.multi-container label span, form .hs-form-booleancheckbox label span { color: initial; } /* Form Title */ .form-title { margin-bottom: 0; } @media only screen and (max-width: 767px) { .form-title.h3 { margin-bottom: 35px; } } /* Help text */ form legend { font-size: 0.875rem; } /* Inputs */ form input[type=text], form input[type=search], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea { display: inline-block; width: 100%; border: none; border-bottom: var(--form-input-border-size) solid var(--form-input-border-color); border-radius: var(--form-input-border-radius); background-color: var(--form-input-background-color); padding: var(--form-input-padding-top) var(--form-input-padding-right) var(--form-input-padding-bottom) var(--form-input-padding-left); color: var(--form-input-color); font-family: var(--form-input-font-family); font-size: var(--form-input-font-size-mobile); line-height: 1.3; font-weight: var(--form-input-font-weight); text-transform: var(--form-input-transform); } @media only screen and (min-width: 768px) { form input[type=text], form input[type=search], form input[type=email], form input[type=password], form input[type=tel], form input[type=number], form input[type=file], form select, form textarea { font-size: var(--form-input-font-size-desktop); } } form textarea { resize: vertical; line-height: 1.2; } form input::placeholder, form select::placeholder, form textarea::placeholder { opacity: 1; color: var(--form-placeholder-color); } form input:focus, form input:focus-visible, form input:focus-within, form input:active, form input:target, form select:focus, form select:focus-visible, form select:focus-within, form select:active, form select:target, form textarea:focus, form textarea:focus-visible, form textarea:focus-within, form textarea:active, form textarea:target { border-color: var(--form-input-border-focus-color); outline: none; box-shadow: none; } form legend.hs-field-desc { position: absolute; right: 0; width: auto !important; } /* Inputs - date picker */ .hs-dateinput { position: relative; } .hs-dateinput:before { content: ''; position: absolute; right: var(--form-input-padding-right); top: 50%; transform: translateY(-50%); width: 24px; height: 24px; background-repeat: no-repeat; background-size: contain; background-image: var(--form-date-icon); } .fn-date-picker .pika-table thead th { color: var(--white); } .fn-date-picker td.is-selected .pika-button { border-radius: 0; box-shadow: none; } .fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus { border-radius: 0 !important; color: var(--white); } /* Inputs - file picker */ form input[type=file] { border-radius: 0; background-color: transparent; border: initial; padding: initial; } .hs-fieldtype-select .input { position: relative; } .hs-fieldtype-select .input select { position: relative; } .hs-fieldtype-select .input::after { content: ""; display: block; position: absolute; width: 14px; height: 7px; right: var(--form-input-padding-right); top: 50%; transform: translateY(-50%); background-repeat: no-repeat; background-size: contain; background-position: center; background-image: var(--form-dropdown-icon); } select.hs-input { appearance: none; } /* GDPR */ /* Validation */ .hs-form-required { color: var(--form-error-color); } .hs-input.invalid.error { border-color: var(--form-error-color); } .hs-error-msg { margin-top: 0.35rem; color: var(--form-error-color); } /* form input.hs-input.invalid.error { border-color: var(--pink); } */ /* Submit button */ form input[type=submit], form .hs-button { cursor: pointer; display: inline-block; text-align: center; transition: all 0.15s linear; white-space: normal; } /* Captcha */ .grecaptcha-badge { margin: 0 auto; } /* Position label text against custom radio and checkboxes */ ul.inputs-list.multi-container { display: flex; flex-direction: column; align-items: flex-start; gap: var(--multi-list-gap); margin-top: var(--multi-list-spacing-top); } label.hs-form-booleancheckbox-display, label.hs-form-checkbox-display, label.hs-form-radio-display { cursor: pointer; display: flex; align-items: center; gap: var(--label-check-spacing); } /* Custom checkbox */ [data-hsfc-id=Renderer] .hsfc-CheckboxInput { border: none !important; background-color: transparent !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxInput:active, [data-hsfc-id=Renderer] .hsfc-CheckboxInput:focus, [data-hsfc-id=Renderer] .hsfc-CheckboxInput:hover { box-shadow: none !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxInput:checked:after { content: none !important; display: none !important; box-shadow: none !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxInput, input[type="checkbox"] { position: relative; cursor: pointer; appearance: none; width: var(--form-checkbox-width) !important; height: var(--form-checkbox-height) !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxInput::before, input[type="checkbox"]::before { content: ""; position: absolute; left: 0; top: 0; width: var(--form-checkbox-width); height: var(--form-checkbox-height); background-image: var(--form-checkbox-icon); background-size: contain; background-position: center; background-repeat: no-repeat; transition: var(--transition); } [data-hsfc-id=Renderer] .hsfc-CheckboxInput:checked::before, input[type="checkbox"]:checked::before { background-image: var(--form-checkbox-checked-icon); } /* Custom Radio Button Styling */ [data-hsfc-id=Renderer] .hsfc-RadioInput { border: none !important; background-color: transparent !important; } [data-hsfc-id=Renderer] .hsfc-RadioInput:active, [data-hsfc-id=Renderer] .hsfc-RadioInput:focus, [data-hsfc-id=Renderer] .hsfc-RadioInput:hover { box-shadow: none !important; } [data-hsfc-id=Renderer] .hsfc-RadioInput:checked:after { content: none !important; display: none !important; box-shadow: none !important; } [data-hsfc-id=Renderer] .hsfc-RadioInput, .hs-form-radio-display input[type="radio"] { position: relative; cursor: pointer; appearance: none; /* Hide default radio button */ -webkit-appearance: none; -moz-appearance: none; width: var(--form-radio-width); height: var(--form-radio-height); margin: 0; padding: 0; background-color: var(--form-radio-bg-color); } [data-hsfc-id=Renderer] .hsfc-RadioInput::before, .hs-form-radio-display input[type="radio"]::before { content: ""; position: absolute; left: 0; top: 0; width: var(--form-radio-width); height: var(--form-radio-height); background-image: var(--form-radio-icon); background-size: contain; background-position: center; background-repeat: no-repeat; transition: var(--transition); pointer-events: none; } [data-hsfc-id=Renderer] .hsfc-RadioInput:checked::before, .hs-form-radio-display input[type="radio"]:checked::before { background-image: var(--form-radio-checked-icon); } /* Buttons */ .form-button--custom input[type="submit"].hs-button { border: var(--button-two-border-size) var(--button-two-border-style) #FF0998 !important; background-color: #FF0998 !important; color: var(--white) !important; } .form-button--custom input[type="submit"].hs-button:hover { border: var(--button-two-border-size) var(--button-two-border-style) var(--white) !important; background-color: var(--white) !important; color: var(--black) !important; box-shadow: var(--box-shadow-big) !important; } /* New form styles */ .aa-contact-hero [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content { padding: 0 !important; } [data-hsfc-id=Renderer] .hsfc-PhoneInput, [data-hsfc-id=Renderer] .hsfc-TextareaInput, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-TextField input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-DropdownField input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField input { display: inline-block !important; width: 100% !important; border: none !important; border-bottom: var(--form-input-border-size) solid var(--form-input-border-color) !important; border-radius: var(--form-input-border-radius) !important; background-color: var(--form-input-background-color) !important; padding: var(--form-input-padding-top) var(--form-input-padding-right) var(--form-input-padding-bottom) var(--form-input-padding-left) !important; color: var(--form-input-color) !important; font-family: var(--form-input-font-family) !important; font-size: var(--form-input-font-size-mobile) !important; line-height: 1.3 !important; font-weight: var(--form-input-font-weight) !important; text-transform: var(--form-input-transform) !important; } [data-hsfc-id=Renderer] .hsfc-PhoneInput { display: flex !important; } [data-hsfc-id=Renderer] .hsfc-RichText p, [data-hsfc-id=Renderer] .hsfc-FieldDescription { font-size: var(--form-misc-size-mobile) !important; } @media only screen and (min-width: 768px) { [data-hsfc-id=Renderer] .hsfc-RichText p, [data-hsfc-id=Renderer] .hsfc-FieldDescription { font-size: var(--form-misc-size-desktop) !important; } } [data-hsfc-id=Renderer] .hsfc-DropdownOptions { background-color: var(--white) !important; padding: 12px !important; border-radius: 10px !important; border: 1px solid var(--black) !important; } [data-hsfc-id=Renderer] .hsfc-FieldLabel { display: flex !important; align-items: center !important; margin-bottom: var(--form-label-spacing-bottom) !important; color: var(--form-label-color) !important; font-family: var(--form-label-font-family) !important; font-size: var(--form-label-font-size-mobile) !important; line-height: 1 !important; font-weight: var(--form-label-font-weight) !important; text-transform: var(--form-label-transform) !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxField label { display: flex !important; align-items: center !important; } @media only screen and (min-width: 768px) { [data-hsfc-id=Renderer] .hsfc-FieldLabel { font-size: var(--form-label-font-size-desktop) !important; } } [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator { color: var(--form-label-color) !important; font-family: var(--form-label-font-family) !important; font-size: var(--form-label-font-size-mobile) !important; line-height: 1 !important; font-weight: var(--form-label-font-weight) !important; text-transform: var(--form-label-transform) !important; } [data-hsfc-id=Renderer] .hsfc-TextInput { padding: 0px !important; padding-left: 0px !important; margin: 0 !important; border: none !important; height: auto !important; background-color: transparent !important; } [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField > input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField > input, [data-hsfc-id=Renderer] .hsfc-DropdownInput > input, [data-hsfc-id=Renderer] .hsfc-TextInput { font-family: var(--form-input-font-family) !important; font-size: var(--form-input-font-size-mobile) !important; line-height: 1.3 !important; font-weight: var(--form-input-font-weight) !important; text-transform: var(--form-input-transform) !important; } @media only screen and (min-width: 768px) { [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField > input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField > input, [data-hsfc-id=Renderer] .hsfc-DropdownInput > input, [data-hsfc-id=Renderer] .hsfc-TextInput { font-size: var(--form-input-font-size-desktop) !important; } } [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField > input:hover, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField > input:hover, [data-hsfc-id=Renderer] .hsfc-DropdownInput > input:hover, [data-hsfc-id=Renderer] .hsfc-TextInput:hover, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField > input:active, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField > input:active, [data-hsfc-id=Renderer] .hsfc-DropdownInput > input:active, [data-hsfc-id=Renderer] .hsfc-TextInput:active, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField > input:focus, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField > input:focus, [data-hsfc-id=Renderer] .hsfc-DropdownInput > input:focus, [data-hsfc-id=Renderer] .hsfc-TextInput:focus { border-color: var(--form-input-border-focus-color) !important; outline: none !important; box-shadow: none !important; } [data-hsfc-id=Renderer] .hsfc-DateInput.hsfc-DateInput--placeholder, [data-hsfc-id=Renderer] .hsfc-TextareaInput::placeholder, [data-hsfc-id=Renderer] .hsfc-TextInput::placeholder, [data-hsfc-id=Renderer] .hsfc-TextInput::placeholder { opacity: 1 !important; color: var(--form-placeholder-color) !important; } [data-hsfc-id=Renderer] .hsfc-PhoneInput { gap: 10px !important; } [data-hsfc-id=Renderer] .hsfc-DropdownOptions, [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List { padding: 0 !important; } [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem { color: var(--black) !important; font-size: 16px !important; font-style: normal !important; font-weight: 400 !important; line-height: 22px !important; background-color: transparent !important; } [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:hover { background-color: #EBF6FF !important; } [data-hsfc-id=Renderer] .hsfc-ErrorAlert { margin-top: 12px; color: var(--form-error-color) !important; } [data-hsfc-id=Renderer] .hsfc-TextareaInput:has(.hsfc-ErrorAlert), [data-hsfc-id=Renderer] .hsfc-Form .hsfc-TextField:has(.hsfc-ErrorAlert) input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-DropdownField:has(.hsfc-ErrorAlert) input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField:has(.hsfc-ErrorAlert) input, [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField:has(.hsfc-ErrorAlert) input { border-bottom: 1px solid var(--form-error-color) !important; } [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret { padding: 0 0 0 20px !important; } [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret>span { border: 0 !important; background-repeat: no-repeat; background-size: contain; background-image: var(--form-dropdown-icon) !important; width: 22px !important; height: 10px !important; } [data-hsfc-id=Renderer] .hsfc-Step .hsfc-Step__Content { padding: 0 !important; } [data-hsfc-id=Renderer] .hsfc-RichText { font-family: var(--form-label-font-family) !important; color: var(--black) !important; } .content--light form label, .content--light form .hs-form-booleancheckbox label span, .content--light form input[type=text], .content--light form input[type=search], .content--light form input[type=email], .content--light form input[type=password], .content--light form input[type=tel], .content--light form input[type=number], .content--light form input[type=file], .content--light form select, .content--light form textarea, .content--light [data-hsfc-id=Renderer] .hsfc-RichText, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-TextField, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-DropdownField, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField, .content--light [data-hsfc-id=Renderer] .hsfc-FieldLabel, .content--light [data-hsfc-id=Renderer] .hsfc-FieldLabel__RequiredIndicator, .content--light [data-hsfc-id=Renderer] .hsfc-TextareaInput, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-TextField input, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-DropdownField input, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-EmailField input, .content--light [data-hsfc-id=Renderer] .hsfc-Form .hsfc-NumberField input { color: var(--white) !important; } .content--light [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret>span { background-image: var(--form-dropdown-icon-light) !important; } .content--light [data-hsfc-id=Renderer] .hsfc-TextInput { color: var(--white); } .btn-group { display: flex; flex-wrap: wrap; align-items: center; gap: 35px; margin-top: 48px; } .btn-group.btn-group--small { gap: 20px; } .btn-group.btn-group--small .btn, .btn-group.btn-group--small a.btn { padding: 16px 45px; } /* Button styling */ .btn, a.btn, .form-button input[type="submit"].hs-button, .form-button [data-hsfc-id=Renderer] .hsfc-Button { cursor: pointer; display: inline-flex; text-align: center; transition: var(--transition); white-space: normal; width: 100%; justify-content: center; padding: var(--button-padding-top-mobile) var(--button-padding-right-mobile) var(--button-padding-bottom-mobile) var(--button-padding-left-mobile); border: var(--button-border-size) var(--button-border-style) var(--button-border-color); border-radius: var(--button-border-radius); background-color: var(--button-background-color); color: var(--button-text-color); font-family: var(--button-font-family), sans-serif; font-size: var(--button-font-size-mobile); line-height: var(--button-line-height); font-style: var(--button-font-style); font-weight: var(--button-font-weight); letter-spacing: var(--button-letter-spacing); text-transform: var(--button-transform); text-decoration: none; } @media only screen and (min-width: 600px) { .btn, a.btn, .form-button input[type="submit"].hs-button, .form-button [data-hsfc-id=Renderer] .hsfc-Button { width: auto; justify-content: flex-start; } } @media only screen and (min-width: 768px) { .btn, a.btn, .form-button input[type="submit"].hs-button, .form-button [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-padding-top) var(--button-padding-right) var(--button-padding-bottom) var(--button-padding-left); font-size: var(--button-font-size-desktop); } } .btn:hover, a.btn:hover { border: var(--button-border-size) var(--button-border-style) var(--button-border-color-hover); background-color: var(--button-background-color-hover); color: var(--button-text-color-hover); text-decoration: none; } .btn:focus-visible, a.btn:focus-visible { border: var(--button-border-size) var(--button-border-style) blue; } /* Button theme variations */ .btn--1, a.btn--1, .form-button--1 input[type="submit"].hs-button, .form-button.form-button--1 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-one-padding-top-mobile) var(--button-one-padding-right-mobile) var(--button-one-padding-bottom-mobile) var(--button-one-padding-left-mobile); border: var(--button-one-border-size) var(--button-one-border-style) var(--button-one-border-color); border-radius: var(--button-one-border-radius); background-color: var(--button-one-background-color); color: var(--button-one-text-color); font-family: var(--button-one-font-family), sans-serif; font-size: var(--button-one-font-size-mobile); font-weight: var(--button-one-font-weight); text-transform: var(--button-one-transform); } .btn--1:hover, a.btn--1:hover, .form-button--1 input[type="submit"].hs-button:hover, .form-button.form-button--1 [data-hsfc-id=Renderer] .hsfc-Button:hover { border: var(--button-one-border-size) var(--button-one-border-style) var(--button-one-border-color-hover); background-color: var(--button-one-background-color-hover); color: var(--button-one-text-color-hover); } .btn--2, a.btn--2, .form-button--2 input[type="submit"].hs-button, .form-button.form-button--2 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-two-padding-top-mobile) var(--button-two-padding-right-mobile) var(--button-two-padding-bottom-mobile) var(--button-two-padding-left-mobile); border: var(--button-two-border-size) var(--button-two-border-style) var(--button-two-border-color); border-radius: var(--button-two-border-radius); background-color: var(--button-two-background-color); color: var(--button-two-text-color); font-family: var(--button-two-font-family), sans-serif; font-size: var(--button-two-font-size-mobile); font-weight: var(--button-two-font-weight); text-transform: var(--button-two-transform); } .btn--2:hover, a.btn--2:hover, .form-button--2 input[type="submit"].hs-button:hover, .form-button.form-button--2 [data-hsfc-id=Renderer] .hsfc-Button:hover { border: var(--button-two-border-size) var(--button-two-border-style) var(--button-two-border-color-hover); background-color: var(--button-two-background-color-hover); color: var(--button-two-text-color-hover); } .btn--3, a.btn--3, .form-button--3 input[type="submit"].hs-button, .form-button.form-button--3 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-three-padding-top-mobile) var(--button-three-padding-right-mobile) var(--button-three-padding-bottom-mobile) var(--button-three-padding-left-mobile); border: var(--button-three-border-size) var(--button-three-border-style) var(--button-three-border-color); border-radius: var(--button-three-border-radius); background-color: var(--button-three-background-color); color: var(--button-three-text-color); font-family: var(--button-three-font-family), sans-serif; font-size: var(--button-three-font-size-mobile); font-weight: var(--button-three-font-weight); text-transform: var(--button-three-transform); } .btn--3:hover, a.btn--3:hover, .form-button--3 input[type="submit"].hs-button:hover, .form-button.form-button--3 [data-hsfc-id=Renderer] .hsfc-Button:hover { border: var(--button-three-border-size) var(--button-three-border-style) var(--button-three-border-color-hover); background-color: var(--button-three-background-color-hover); color: var(--button-three-text-color-hover); } .btn--4, a.btn--4, .form-button--4 input[type="submit"].hs-button, .form-button.form-button--4 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-four-padding-top-mobile) var(--button-four-padding-right-mobile) var(--button-four-padding-bottom-mobile) var(--button-four-padding-left-mobile); border: var(--button-four-border-size) var(--button-four-border-style) var(--button-four-border-color); border-radius: var(--button-four-border-radius); background-color: var(--button-four-background-color); color: var(--button-four-text-color); font-family: var(--button-four-font-family), sans-serif; font-size: var(--button-four-font-size-mobile); font-weight: var(--button-four-font-weight); text-transform: var(--button-four-transform); } .btn--4:hover, a.btn--4:hover, .form-button--4 input[type="submit"].hs-button:hover, .form-button.form-button--4 [data-hsfc-id=Renderer] .hsfc-Button:hover { border: var(--button-four-border-size) var(--button-four-border-style) var(--button-four-border-color-hover); background-color: var(--button-four-background-color-hover); color: var(--button-four-text-color-hover); } .btn--5, a.btn--5, .form-button--5 input[type="submit"].hs-button, .form-button.form-button--5 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-five-padding-top-mobile) var(--button-five-padding-right-mobile) var(--button-five-padding-bottom-mobile) var(--button-five-padding-left-mobile); border: var(--button-five-border-size) var(--button-five-border-style) var(--button-five-border-color); border-radius: var(--button-five-border-radius); background-color: var(--button-five-background-color); color: var(--button-five-text-color); font-family: var(--button-five-font-family), sans-serif; font-size: var(--button-five-font-size-mobile); font-weight: var(--button-five-font-weight); text-transform: var(--button-five-transform); } .btn--5:hover, a.btn--5:hover, .form-button--5 input[type="submit"].hs-button:hover, .form-button.form-button--5 [data-hsfc-id=Renderer] .hsfc-Button:hover { border: var(--button-five-border-size) var(--button-five-border-style) var(--button-five-border-color-hover); background-color: var(--button-five-background-color-hover); color: var(--button-five-text-color-hover); } @media only screen and (min-width: 768px) { .btn--1, a.btn--1, .form-button--1 input[type="submit"].hs-button, .form-button.form-button--1 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-one-padding-top) var(--button-one-padding-right) var(--button-one-padding-bottom) var(--button-one-padding-left); font-size: var(--button-one-font-size-desktop); } .btn--2, a.btn--2, .form-button--2 input[type="submit"].hs-button, .form-button.form-button--2 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-two-padding-top) var(--button-two-padding-right) var(--button-two-padding-bottom) var(--button-two-padding-left); font-size: var(--button-two-font-size-desktop); } .btn--3, a.btn--3, .form-button--3 input[type="submit"].hs-button, .form-button.form-button--3 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-three-padding-top) var(--button-three-padding-right) var(--button-three-padding-bottom) var(--button-three-padding-left); font-size: var(--button-three-font-size-desktop); } .btn--4, a.btn--4, .form-button--4 input[type="submit"].hs-button, .form-button.form-button--4 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-four-padding-top) var(--button-four-padding-right) var(--button-four-padding-bottom) var(--button-four-padding-left); font-size: var(--button-four-font-size-desktop); } .btn--5, a.btn--5, .form-button--5 input[type="submit"].hs-button, .form-button.form-button--5 [data-hsfc-id=Renderer] .hsfc-Button { padding: var(--button-five-padding-top) var(--button-five-padding-right) var(--button-five-padding-bottom) var(--button-five-padding-left); font-size: var(--button-five-font-size-desktop); } } .tags { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: 12px; } .tags-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } .tag { cursor: pointer; display: inline-flex; text-align: center; transition: var(--transition); white-space: normal; border: var(--tag-border-width) solid var(--tag-border-color); border-radius: var( --tag-border-radius); background-color: var(--tag-background); padding: var(--form-tag-padding-top) var(--form-tag-padding-right) var(--form-tag-padding-bottom) var(--form-tag-padding-left); color: var(--tag-text-color); font-weight: 600; text-decoration: none; font-family: Montserrat; font-style: normal; font-family: Montserrat, sans-serif; font-size: var(--tags-font-size-mobile); line-height: 1; text-transform: var(--tags-transform); } .tag:hover, .tag.active { text-decoration: none; border: var(--tag-border-width) solid var(--tag-hover-border-color); background-color: var(--tag-hover-background); color: var(--tag-hover-text-color); } @media only screen and (min-width: 768px) { .tags { flex-direction: row; } .tags-wrapper { justify-content: flex-start; } .tag { font-size: var(--tags-font-size-desktop); } } .hamburger-wrapper { width: 58px; height: 36px; cursor: pointer; display: none; border-radius: 30px; background-color: #0068C5; align-items: center; justify-content: center; } .hamburger { display: none; width: 20px; height: 2px; background: var(--white); position: relative; transition: all 0.3s ease; } .hamburger::before, .hamburger::after { content: ""; position: absolute; width: 20px; height: 2px; background: var(--white); transition: all 0.3s ease; } .hamburger::before { top: -8px; } .hamburger::after { top: 8px; } .hamburger.hamburger-open { background: transparent; } .hamburger.hamburger-open::before { transform: rotate(45deg); top: 0; } .hamburger.hamburger-open::after { transform: rotate(-45deg); top: 0; } @media only screen and (max-width: 1200px) { .hamburger-wrapper { display: flex; } .hamburger { display: inline-block; } } .video-container { position: relative; overflow: hidden; padding-bottom: 56.25%; background-size: cover; background-repeat: no-repeat; } @media only screen and (min-width: 768px) { .video-container { min-height: 490px; } } .video-container video { position: absolute; width: 100%; height: 100%; background-size: cover; transform: none; margin-left: 0; object-fit: contain; } .video-container--youtube { padding-bottom: 0; } .video-thumbnail { position: absolute; top: 0; bottom: 0; left: 0; right: 0; display: flex; align-items: center; justify-content: center; z-index: 1; opacity: 1; transition: var(--transition); cursor: pointer; overflow: clip; } @media only screen and (min-width: 768px) { .video-thumbnail { min-height: 490px; } } .video-thumbnail .bg-image-container.object-cover { display: flex; background: var(--bluish-grey, #BACAD8); height: 100%; width: 100%; } .video-thumbnail .bg-image-container.object-cover img { width: 100%; height: 100%; object-fit: cover; } .video-thumbnail::before { content: ''; position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: 10; background-color: rgba(#000,0.5); } .video-thumbnail.is-hidden { opacity: 0; visibility: hidden; } .video-thumbnail + video { visibility: hidden; } .video-thumbnail.is-hidden + video { visibility: visible; } .play { display: flex; align-items: center; justify-content: center; height: 25px; width: 25px; position: absolute; outline: none; appearance: none; top: 50%; left: 50%; transform: translateX(-50%) translateY(-50%); z-index: 100; transition: all ease-in-out 0.3s; } .play:hover { opacity: 0.5; } @media only screen and (min-width: 768px) { .play { height: 74px; width: 74px; } } .youtube { width: 100%; background-color: var(--black); position: relative; padding-top: 56.25%; overflow: hidden; } .youtube::after { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: var(--black); opacity: .3; } .youtube img { width: 100%; height: auto; top: -16.84%; left: 0; } .youtube img, .youtube iframe { position: absolute; } .youtube iframe { z-index: 2; height: 100%; width: 100%; top: 0; left: 0; } .custom-language-switcher { position: relative; display: flex; flex-direction: column; justify-content: center; cursor: pointer; } .lang-toggle { display: flex; align-items: center; gap: 8px; } .lang-toggle .globe { width: 16px; height: 16px; margin-bottom: 2px; } .lang-toggle .arrow { height: 10px; width: 14px; } .lang-toggle .current-lang { color: var(--white); font-size: 12px; font-style: normal; font-weight: 400; line-height: 18px; /* 128.571% */ text-transform: uppercase; } .lang-dropdown { position: absolute; top: 80%; right: 0; padding: 0.5rem 0; background: var(--white); min-width: 50px; display: none; z-index: 999; } .lang-dropdown li { display: flex; align-items: center; justify-content: center; list-style: none; } .lang-dropdown li a { display: block; width: 100%; text-align: center; padding: 0.5rem 0; margin-bottom: 5px; font-size: 14px; font-style: normal; font-weight: 400; line-height: 18px; /* 128.571% */ text-transform: uppercase; color: #333; } .lang-dropdown li a:hover { background-color: rgba(49, 191, 200, 0.4); } .custom-language-switcher:hover .lang-dropdown, .custom-language-switcher.open .lang-dropdown { display: block; } .custom-language-switcher:hover::before { content: ""; position: absolute; bottom: -24px; right: 0; width: 50px; height: 30px; } .hs-search-field__form { position: relative; } .website-header .hs-search-field__form input[type="search"] { background: transparent; border: none; outline: none; border-radius: 0; box-shadow: none; border-bottom: 1px solid var(--white); padding: 5px !important; font-size: 12px !important; font-style: normal; font-weight: 400; line-height: 18px; text-transform: uppercase; color: var(--white); } .website-header .hs-search-field__form input[type="search"]::placeholder { opacity: 1; color: var(--white); } .hs-search-field__button { position: absolute; top: 50%; transform: translateY(-50%); left: -24px; background: transparent; border: none; outline: none; padding: 0; margin: 0; } .hs-search-field__button svg { height: 24px; width: 20px; } .website-header .hs-search-field__form .hs-search-field__suggestions-container { display: none; } .hs-editor-hide-until-active { display: none; } .inpage-editor-active-field .hs-editor-hide-until-active { display: block; } .hs-search-field { position: relative; } .hs-search-field__input { box-sizing: border-box; width: 100%; flex: 1; } .hs-search-field__suggestions { padding: 0; margin: 0; list-style: none; } .hs-search-field--open .hs-search-field__suggestions, .inpage-editor-active-field .hs-search-field__suggestions { position: absolute; width: 100%; border: 1px solid #cdcdcd; background-color: var(--white); box-shadow: 1px 10px 16px -9px rgba(122, 122, 122, 0.75); } .hs-search-field__suggestions li { display: block; padding: 0; margin: 0; } .hs-search-field__suggestions .results-for { font-weight: bold; } .hs-search-field__suggestions a, .hs-search-field__suggestions .results-for { display: block; padding: 0 10px; line-height: 1.7rem; } .hs-search-field__suggestions a:hover, .hs-search-field__suggestions a:focus { background-color: rgba(0, 0, 0, 0.1); outline: none; } .hs-search-field__input:focus { outline-style: solid; } .hs-search-field__suggestions-container { position: relative; flex-basis: 100%; } .hs-search-field__form { display: flex; flex-wrap: wrap; } .hs-search-field__label { flex-basis: 100%; } .hs-search-field__bar--button-beneath .hs-search-field__input { flex-basis: 100%; } .hs-search-field__bar--button-beneath .hs-search-field__button { margin-top: 0.725rem; margin-right: 0.725rem; } .hs-search-field__bar--button-align-right .hs-search-field__button { margin-right: 0; margin-left: 0.725rem; order: 2; } .hs-search-field__bar--button-beneath .hs-search-field__suggestions-container { min-width: 75%; flex-basis: auto; flex-grow: 1; } .hs-search-field__button--labelled .hs_cos_wrapper_type_icon { margin-right: 0.5rem; } /* stylelint-disable declaration-no-important */ .show-for-sr { position: absolute !important; overflow: hidden !important; height: 1px !important; width: 1px !important; padding: 0 !important; border: 0 !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; } /* stylelint-enable declaration-no-important */ @media only screen and (max-width: 992px) { .website-header .hs-search-field__form input[type=search] { border-bottom: none; } } .product-cards__header { display: flex; flex-direction: column; gap: 35px; justify-content: space-between; margin-bottom: 60px; } @media only screen and (min-width: 600px) { .product-cards__header { flex-direction: row; align-items: flex-end; } } @media only screen and (min-width: 1440px) { .product-cards__header { margin-bottom: 60px; padding-right: 0; } } .product-cards__header .link a { font-size: 20px; font-weight: 500; line-height: 150%; color: var(--orange); text-decoration: underline; } .product-cards__header h4 { margin-bottom: 0; } .product-card { position: relative; width: 100%; overflow: clip; border-radius: 30px; background-color: var(--white); transition: all ease-in-out 0.3s; cursor: pointer; } .product-card .product-link { position: absolute; z-index: 3; top: 0; left: 0; height: 100%; width: 100%; } .product-card:hover { box-shadow: 0 6px 20px -4px rgba(1, 39, 62, 0.10); } .product-card .product-card-tag { position: absolute; z-index: 4; top: 24px; left: 24px; display: inline-flex; padding: 10px 16px; justify-content: center; align-items: center; gap: 10px; border-radius: 30px; background: var(--electric-blue); color: var(--white); text-transform: uppercase; font-size: 14px; line-height: 18px; } .product-card .label { color: var(--electric-blue); font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; } .product-card .image { height: 325px; width: 100%; overflow: clip; transition: all ease-in-out 0.3s; } .product-card .image img { width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.3s; } .product-card:hover .image img { transform: scale(1.1); } .product-card .content { display: flex; flex-direction: column; gap: 8px; padding: 32px 24px; } .product-card .content p.large { transition: all ease-in-out 0.3s; } .product-card:hover .content p.large { color: var(--orange); text-decoration: underline; } .accordion{ display: flex; flex-direction: column; width: 100%; border-bottom: 1px solid; background-color: transparent; transition: var(--transition); } .accordion.accordion--light{ border-color: rgba(61, 80, 87, 0.20); } .accordion.accordion--dark{ border-color: rgba(61, 80, 87, 0.20); } .accordion__title-indicator__title{ margin: 0; } .accordion.accordion--light .accordion__title-indicator__title span{ color: white; } .accordion .accordion__title-indicator{ display: flex; flex-direction: row; justify-content: space-between; position: relative; align-items: center; margin-bottom: 0px; transition: var(--transition); cursor: pointer; user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; padding: 18px 0px; } .accordion .accordion__title-indicator__title span{ font-weight: 400; transition: 0.15s linear; font-size: 28px; } .accordion.active .accordion__title-indicator__title span, .accordion:hover .accordion__title-indicator__title span{ color: var(--primary-blue); } .accordion__title-indicator .accordion__title__indicator{ position: relative; margin-left: 20px; } .accordion__title__indicator__plus{ width: 20px; height: 20px; height: auto; opacity: 1; transition: var(--transition) } .accordion.active .accordion__title__indicator__plus{ opacity: 0; } .accordion__title__indicator__minus{ position: absolute; width: 20px; height: 20px; top: 0; left: 0; opacity: 0; transition: var(--transition) } .accordion.active .accordion__title__indicator__minus{ opacity: 1; } .accordion .accordion__title-indicator-svg{ min-width: 14px; min-height: 7px; transform: rotate(0deg); transition: var(--transition); } .accordion.active .accordion__title-indicator-svg{ transform: rotate(180deg); } .accordion.active .accordion__title-indicator-svg path{ /*stroke: var(--teal);*/ } .accordion .accordion__content{ height: 0; overflow: hidden; opacity: 0; transition: height var(--transition), opacity var(--transition); width: 90%; line-height: 1.5; position: relative; } .accordion.active .accordion__content{ opacity: 1; padding: 32px 0px; } .accordion.active .accordion__content img{ border-radius: 8px; margin-bottom: 24px; } @media screen and (max-width: 768px) { .accordion__title-indicator__title span{ font-size: 24px; } .accordion__title__indicator{ margin-left: 0px!important; } .accordion .accordion__content{ width: 100%; } } /* // BLOG CARD */ .blog-card{ background-color: white; border: 1px solid rgba(46, 49, 51, 0.20); box-shadow: 0 4px 50px 0 rgba(190, 161, 121, 0); border-radius: 10px; overflow: hidden; transition: all 0.5s ease ; position: relative; isolation: isolate; } .blog-card__image-container{ height: 280px; overflow: hidden; position: relative; } .blog-card__image-container img{ width: 100%; height: 100%; object-fit: cover; transition: all 0.5s ease; } .blog-card__readingtime{ padding: 3px 12px; background: rgba(61, 80, 87, 0.80); border-radius: 50px; display: inline-block; color: white; position: absolute; bottom: 20px; right: 20px; margin: 0; } .blog-card:hover .blog-card__image-container img{ transform: scale(1.1); } .blog-card .blog-card__body{ padding: 30px; } .blog-card__body h4, .blog-card__body p{ margin-bottom: 20px ; } .blog-card__body p{ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; text-overflow: ellipsis; } .blog-card__body p:last-of-type{ margin: 0; } .blog-card:hover{ border: 1px solid var(--green); box-shadow: 0 4px 50px 0 rgba(190, 161, 121, 0.30); } .blog-card__cover-link{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 999; } .blog-card__body__tag{ font-size: 14px; font-style: normal; font-weight: 500; line-height: 1.5; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 20px; display: block; } .arrow::after { content: ""; width: 0; height: 0; border-top: 5px solid transparent; border-bottom: 5px solid transparent; border-right: 8px solid black; position: absolute; top: 50%; transform: translateY(-50%) rotate(180deg); right: -1px; } .arrow::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background-color: black; position: absolute; top: 50%; transform: translateY(-50%); left: -1px } .arrow{ position: relative; width: 100%; height: 1px; background: black; } /* Utilities */ /* * Base styles */ .base { scroll-margin-top: 150px; } .base .wrapper { position: relative; z-index: 3; display: flex; flex-direction: column; max-width: var(--max-width); width: 100%; margin: 0 auto; } .img-cover, .image-wrapper.img-cover { display: flex; max-width: 100%; width: 100%; height: 100%; } .img-cover img, .image-wrapper.img-cover img { width: 100%; height: 100%; object-fit: cover; } .centered-content { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .text-col.centered-content { justify-content: flex-start; } .bg-wrapper { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .overlay::before { content: ""; position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; background: var(--aubergine); opacity: 0.8; } .overlay.overlay--2::before { background: var(--dark-blue); } .overlay.overlay--3::before { background: var(--blue); } .overlay.overlay--4::before { background: var(--orange); } .overlay.overlay--5::before { background: var(--light); } .overlay.overlay--6::before { background: var(--black); } .overlay.overlay--7::before { background: var(--white); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* * Color change */ .base .wrapper.content--light h1, .base .wrapper.content--light h2, .base .wrapper.content--light h3, .base .wrapper.content--light h4, .base .wrapper.content--light h5, .base .wrapper.content--light h6, .base .wrapper.content--light blockquote, .base .wrapper.content--light a:not(.btn), .base .wrapper.content--light p, .base .wrapper.content--light span:not(.btn-text), .base .wrapper.content--light div { color: var(--white); } .base .wrapper.content--light a:not(.btn):hover { color: var(--white); opacity: 0.8; } .base .wrapper.content--light form label { color: var(--white); } .base .wrapper.content--light form .inputs-list.multi-container label span, .base .wrapper.content--light form .hs-form-booleancheckbox label span { color: var(--white); } .base .wrapper.content--light form input[type=text], .base .wrapper.content--light form input[type=search], .base .wrapper.content--light form input[type=email], .base .wrapper.content--light form input[type=password], .base .wrapper.content--light form input[type=tel], .base .wrapper.content--light form input[type=number], .base .wrapper.content--light form input[type=file], .base .wrapper.content--light form select, .base .wrapper.content--light form textarea { border: var(--form-input-border-size) solid var(--white); } .base .wrapper.content--light form input::placeholder, .base .wrapper.content--light form select::placeholder, .base .wrapper.content--light form textarea::placeholder { opacity: 0.8; } .base .wrapper.content--light input[type="checkbox"]::before { background-image: var(--form-checkbox-icon--white); } .base .wrapper.content--light input[type="checkbox"]:checked::before { background-image: var(--form-checkbox-checked-icon--white); } section.base .wrapper.content--light ul:not(.inputs-list) li::before, section.base .wrapper .content--light ul:not(.inputs-list) li::before { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 18 18' fill='none'%3E%3Cpath d='M9.00166 18C7.75682 18 6.58674 17.7638 5.49142 17.2914C4.3961 16.8189 3.44337 16.1778 2.63321 15.368C1.82305 14.5581 1.18161 13.6058 0.708868 12.5109C0.236289 11.4161 0 10.2463 0 9.00166C0 7.75682 0.236289 6.58674 0.708868 5.49142C1.18129 4.3961 1.8225 3.44337 2.6325 2.63321C3.4425 1.82305 4.395 1.18161 5.49 0.708868C6.585 0.236289 7.755 0 9 0C9.9979 0 10.9421 0.15 11.8326 0.45C12.7232 0.75 13.5401 1.16842 14.2835 1.70526L13.2558 2.75661C12.6437 2.33503 11.9806 2.00708 11.2666 1.77276C10.5526 1.53829 9.79705 1.42105 9 1.42105C6.9 1.42105 5.11184 2.15921 3.63553 3.63553C2.15921 5.11184 1.42105 6.9 1.42105 9C1.42105 11.1 2.15921 12.8882 3.63553 14.3645C5.11184 15.8408 6.9 16.5789 9 16.5789C11.1 16.5789 12.8882 15.8408 14.3645 14.3645C15.8408 12.8882 16.5789 11.1 16.5789 9C16.5789 8.66716 16.5571 8.33803 16.5133 8.01261C16.4696 7.68718 16.404 7.37076 16.3165 7.06334L17.4643 5.90661C17.6379 6.39355 17.7707 6.89455 17.8624 7.40961C17.9541 7.9245 18 8.45463 18 9C18 10.245 17.7638 11.415 17.2914 12.51C16.8189 13.605 16.1778 14.5575 15.368 15.3675C14.5581 16.1775 13.6058 16.8187 12.5109 17.2911C11.4161 17.7637 10.2463 18 9.00166 18ZM7.65545 13.0299L3.95716 9.33158L4.95545 8.33329L7.65545 11.0333L17.0017 1.67258L18 2.67087L7.65545 13.0299Z' fill='%2309FFB9'/%3E%3C/svg%3E"); } section.base .wrapper .content--light ol:not(.inputs-list) li::marker { font-weight: 600; color: var(--green); } /* * Content widths */ .wrapper.wrapper--sm { max-width: var(--max-width-sm); } .wrapper.wrapper--md { max-width: var(--max-width-md); } .wrapper.wrapper--lg { max-width: var(--max-width-lg); } /* * Grids */ .base .grid, .grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; } @media only screen and (min-width: 768px) { .base .grid--2, .grid--2 { grid-template-columns: repeat(2, 1fr); } .base .grid--3, .grid--3 { grid-template-columns: repeat(2, 1fr); } .base .grid--4, .grid--4 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1080px) { .base .grid--3, .grid--3 { grid-template-columns: repeat(3, 1fr); } .base .grid--4, .grid--4 { grid-template-columns: repeat(4, 1fr); } } .flex-wrap { display: flex; align-items: center; gap: var(--flex-gap); flex-wrap: wrap; } .flex-wrap--center { justify-content: center; } /* * Hiding content */ /* hidden mobile down */ @media only screen and (max-width: 600px) { .hidden-sm { display: none !important; } } /* hidden tablet down */ @media only screen and (max-width: 767px) { .hidden-md { display: none !important; } } /* hidden laptops down */ @media only screen and (max-width: 991px) { .hidden-lg { display: none !important; } } /* hidden desktop down */ @media only screen and (max-width: 1199px) { .hidden-xl { display: none !important; } } /* hidden desktop */ @media only screen and (min-width: 1200px) { .hidden-desk { display: none !important; } } /* bg elements */ main { position: relative; } main .top-bg-graphic { display: none; } main .bottom-bg-graphic { display: none; } @media only screen and (min-width: 1080px) { main .top-bg-graphic { display: block; position: absolute; z-index: 1; top: 0; right: 0; pointer-events: none; } main .top-bg-graphic.left { right: auto; left: 0; } main .top-bg-graphic.center, main.blog-overview .top-bg-graphic { display: flex; justify-content: center; left: 50%; transform: translateX(-50%); } main .bottom-bg-graphic { display: block; position: absolute; z-index: 1; bottom: -5px; right: 0; pointer-events: none; } } .flex{ display: flex; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .items-end-safe { align-items: safe flex-end; } .items-center { align-items: center; } .items-center-safe { align-items: safe center; } .items-baseline { align-items: baseline; } .items-baseline-last { align-items: last baseline; } .items-stretch { align-items: stretch; } /* Components */ .footer { position: relative; background-color: var(--dark-blue); padding-left: var(--base-padding); padding-right: var(--base-padding); } @media only screen and (min-width: 1080px) { .footer { padding-left: 120px; padding-right: 120px; } } .footer-graphic { display: none; } @media only screen and (min-width: 1080px) { .footer-graphic { position: absolute; top: 0; right: 0; pointer-events: none; display: block; } } .footer .wrapper { max-width: 1440px; margin: 0 auto; padding-top: 84px; padding-bottom: 54px; } .footer__header { margin-bottom: 36px; } .footer__header a.logo { display: flex; align-items: center; max-width: 300px; } .footer__header a.logo img { max-width: 100%; width: 100%; height: auto; object-fit: contain; } .footer__body { display: flex; flex-wrap: wrap; gap: 48px; margin-bottom: 36px; color: var(--white); } @media only screen and (min-width: 1080px) { .footer__body { margin-bottom: 54px; gap: 230px; } } .footer-links { display: flex; flex-direction: column; gap: 16px; } @media only screen and (min-width: 580px) { .footer-links { flex-direction: row; flex-wrap: wrap; gap: 36px; } } @media only screen and (min-width: 1080px) { .footer-links { gap: 150px; } } .footer-links ul { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; } .footer-links ul li { list-style: none; } .footer-links ul li a { color: var(--white); text-decoration: none; } .footer-links ul li a:hover { text-decoration: underline; } .footer__footer { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 20px; } .footer__footer a { display: flex; align-items: center; color: var(--white); } @media only screen and (max-width: 560px) { .footer__footer a { width: 35px; height: 35px; align-items: flex-end; } .footer__footer a img { width: 100%; height: auto; } } /* secondary footer */ .wrapper.footer-secondary { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 32px; border-top: 1px solid var(--blue); padding-top: 36px; padding-bottom: 60px; font-size: 14px; line-height: 1; color: var(--white); } @media only screen and (min-width: 1080px) { .wrapper.footer-secondary { padding-top: 24px; padding-bottom: 48px; } } .wrapper.footer-secondary a { font-size: 14px; line-height: 1; color: var(--white); text-decoration: none; transition: all ease-in-out 0.2s; } .wrapper.footer-secondary a:hover { text-decoration: underline; } .footer-secondary__body { display: flex; flex-wrap: wrap; align-items: center; gap: 36px; } /* Modules */ .text .wrapper .text-col { width: 100%; } /* modifiers for 2 col layout */ @media only screen and (min-width: 768px) { .text.text--2.text--70-30 .wrapper { grid-template-columns: 8fr 4fr; } .text.text--2.text--30-70 .wrapper { grid-template-columns: 4fr 8fr; } } .pagination-wrapper{ display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 60px; } .pagination__link{ border-radius: 50%; display: flex; align-items: center; justify-content: center; padding: 12px; border: 1px solid var(--black); width: 40px; height: 40px; color: var(--black); text-decoration: none; background-color: transparent; cursor: pointer; } .pagination__link:before{ display: none; } .pagination-container.pagination-container--blog{ display: flex; align-items: center; justify-content: center; gap: 16px; } .pagination__link--active{ background-color: var(--black); border: 1px solid var(--black); color: white; } .pagination__link--disabled{ opacity: 0.4; pointer-events: none; } .pagination__link:hover{ background-color: var(--black); border: 1px solid var(--black); color: white; } .pagination__link:hover svg path{ stroke: white; } .pagination__link__prev svg{ transform: rotate(180deg); } :root { --gap-mobile: 40px; --gap-desk: 90px; --radius-mobile: 0px; --radius-desk: 0px; } .txt-media .wrapper { flex-direction: column; } .txt-media .wrapper:has(.txt-media__body--color) { gap: 0; } .txt-media__header, .txt-media__body { width: 100%; } .txt-media__header { position: relative; border-radius: var(--radius-mobile); overflow: clip; } .txt-media__header img { object-fit: cover; height: 100%; width: 100%; } .txt-media__body p:last-of-type { margin-bottom: 0; } .txt-media__header .media-wrapper { position: relative; z-index: 4; overflow: hidden; display: flex; } .txt-media .wrapper .txt-media__body { padding: 0; padding-top: var(--gap-mobile); } .txt-media .wrapper .txt-media__body.txt-media__body--color { padding: var(--gap-mobile); } @media only screen and (min-width: 960px) { .txt-media .wrapper { flex-direction: row; } .txt-media__header { border-radius: var(--radius-desk); } .txt-media__header, .txt-media__body { max-width: 50%; } .txt-media .wrapper .txt-media__body { padding: var(--gap-desk); } .txt-media .wrapper .txt-media__body { padding-left: var(--gap-desk); padding-right: 0; } .txt-media .wrapper .txt-media__body.txt-media__body--color { padding: var(--gap-desk); } } /* modifier */ @media only screen and (min-width: 960px) { .txt-media.txt-content--top .wrapper .txt-media__body { align-self: flex-start; } .txt-media.txt-content--center .wrapper .txt-media__body { align-self: center; } .txt-media.txt-content--bot .wrapper .txt-media__body { align-self: flex-end; } } @media only screen and (min-width: 960px) { .txt-media.txt-media--reversed .wrapper { flex-direction: row-reverse; } .txt-media.txt-media--reversed .txt-media__body { padding-right: var(--gap-desk); padding-left: 0; } } .txt-media__header .media-wrapper { height: 100%; } .txt-media__header.vid-cover .video-container video { object-fit: cover; } .txt-media__header.vid-cover .video-container { height: 100%; } .txt-media__header.contained img { object-fit: contain; height: auto; width: auto; max-width: 100%; } .txt-media__header.contained.image-pos--left .media-wrapper, .txt-media__header.contained.image-pos--center .media-wrapper, .txt-media__header.contained.image-pos--right .media-wrapper { display: flex; } .txt-media__header.contained.image-pos--left .media-wrapper { justify-content: flex-start; } .txt-media__header.contained.image-pos--center .media-wrapper { justify-content: center; } .txt-media__header.contained.image-pos--right .media-wrapper { justify-content: flex-end; } .txt-media__header.video-pos--top, .txt-media__header.contained.image-pos-vert--top { align-self: flex-start; } .txt-media__header.video-pos--center, .txt-media__header.contained.image-pos-vert--center { align-self: center; } .txt-media__header.video-pos--bottom, .txt-media__header.contained.image-pos-vert--bottom { align-self: flex-end; } @media only screen and (min-width: 960px) { .txt-media.txt-media--60-40 .txt-media__header { max-width: 60%; } .txt-media.txt-media--40-60 .txt-media__header { max-width: 40%; } .txt-media.txt-media--70-30 .txt-media__header { max-width: 68%; } .txt-media.txt-media--30-70 .txt-media__header { max-width: 32%; } .txt-media.txt-media--70-30 .txt-media__body { max-width: 32%; } .txt-media.txt-media--60-40 .txt-media__body { max-width: 40%; } .txt-media.txt-media--40-60 .txt-media__body { max-width: 60%; } .txt-media.txt-media--30-70 .txt-media__body { max-width: 68%; } } .video .wrapper { border-radius: 0px; overflow: clip; } @media only screen and (min-width: 768px) { .video .wrapper { border-radius: 0px; } }