/* 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: #01273e; --base-color--2: #003C71; --base-color--3: #0068C5; --base-color--4: #E57200; --base-color--5: #FFF; /* base color naming based on figma naming */ --dark-blue: #01273e; --blue: #003C71; --electric-blue: #0068C5; --orange: #E57200; --base-white: #FFF; /* base color naming base on figma RGB version */ --dark-blue-rgb: 1, 39, 62; --blue-rgb: 0, 60, 113; --electric-blue-rgb: 0, 104, 197; --orange-rgb: 229, 114, 0; --base-white-rgb: 255, 255, 255; /* base color naming base on figma RGBA version */ --dark-blue-rgba: rgba(1, 39, 62, 1); --blue-rgba: rgba(0, 60, 113, 1); --electric-blue-rgba: rgba(0, 104, 197, 1); --orange-rgba: rgba(229, 114, 0, 1); --base-white-rgba: rgba(255, 255, 255, 1); /* general colors */ --blueish-grey: #BACAD8; --clean-blueish-grey: #EBF6FF; --light-blue: #F5FBFF; --grey: #F1EFED; --grey-rgb: 241, 239, 237; --hyperlink-blue: #51E2FF; --ui-red: #FF8F8F; --black: #000; --white: #fff; } :root{ /* This is setting variables for evertyhing that is in font.css which contains font-weight, text decoration and font-family */ --paragraph-small-font-family: 'Instrument Sans', sans-serif; --paragraph-font-family: 'Instrument Sans', sans-serif; --blockquote-font-family: 'Instrument Sans', sans-serif; --blockquote-font-weight: 500; --paragraph-large-font-family: 'Instrument Sans', sans-serif; --link-font-family: 'Instrument Sans', sans-serif; --link-text-decoration: underline; --h1-font-family: 'Instrument Sans', sans-serif; --h1-font-weight: 500; --h2-font-family: 'Instrument Sans', sans-serif; --h2-font-weight: 500; --h3-font-family: 'Instrument Sans', sans-serif; --h3-font-weight: 500; --h4-font-family: 'Instrument Sans', sans-serif; --h4-font-weight: 500; --h5-font-family: 'Instrument Sans', sans-serif; --h5-font-weight: 500; --subheading-font-family: 'Instrument Sans', sans-serif; --h6-font-family: 'Instrument Sans', sans-serif; --h6-font-weight: 500; /* === H1 === */ --h1-font-size-desktop: 3.625rem; --h1-font-size-mobile: 2.875rem; --h1-transform: none; --h1-line-height: 1.1; --h1-letter-spacing-desktop: 0; --h1-letter-spacing-mobile: 0; /* === H2 === */ --h2-font-size-desktop: 3.0rem; --h2-font-size-mobile: 2.25rem; --h2-transform: none; --h2-line-height: 1.2; --h2-letter-spacing-desktop: 0; --h2-letter-spacing-mobile: 0; /* === H3 === */ --h3-font-size-desktop: 2.125rem; --h3-font-size-mobile: 2.125rem; --h3-transform: none; --h3-line-height: 1.3; --h3-letter-spacing-desktop: 0; --h3-letter-spacing-mobile: 0; /* === H4 === */ --h4-font-size-desktop: 1.75rem; --h4-font-size-mobile: 1.875rem; --h4-transform: none; --h4-line-height: 1.35; --h4-letter-spacing-desktop: 0; --h4-letter-spacing-mobile: 0; /* === H5 === */ --h5-font-size-desktop: 1.5rem; --h5-font-size-mobile: 1.5rem; --h5-transform: none; --h5-line-height: 1.4; --h5-letter-spacing-desktop: 0; --h5-letter-spacing-mobile: 0; /* === H6 === */ --h6-font-size-desktop: 1.375rem; --h6-font-size-mobile: 1.375rem; --h6-transform: none; --h6-line-height: 1.4; --h6-letter-spacing-desktop: 0; --h6-letter-spacing-mobile: 0; /* === Subheading === */ --subheading-font-size-desktop: 0.875rem; --subheading-font-size-mobile: 0.875rem; --subheading-transform: none; --subheading-line-height: 1.25; --subheading-letter-spacing-desktop: 0; --subheading-letter-spacing-mobile: 0; /* === Paragraph === */ --paragraph-font-size-desktop: 16px; --paragraph-font-size-mobile: 16; --paragraph-transform: ; --paragraph-line-height: 1.35; --paragraph-letter-spacing-desktop: 0; --paragraph-letter-spacing-mobile: 0; /* === Paragraph (Large) === */ --paragraph-large-font-size-desktop: 1.25rem; --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.875rem; --paragraph-small-font-size-mobile: 0.875rem; --paragraph-small-line-height: 1.2; --paragraph-small-letter-spacing-desktop: 0; --paragraph-small-letter-spacing-mobile: 0; /* === Links === */ --link-font-size-desktop: 1.0rem; --link-font-size-mobile: 1.0rem; --link-transform: ; --link-line-height: 1.35; --link-letter-spacing-desktop: ; --link-letter-spacing-mobile: 0; /* === Blockquote === */ --blockquote-font-size-desktop: 1.375rem; --blockquote-font-size-mobile: 1.25rem; --blockquote-transform: ; --blockquote-line-height: 1.35; --blockquote-letter-spacing-desktop: 0; --blockquote-letter-spacing-mobile: 0; } a { {font=Instrument Sans, font_set=GOOGLE, styles={font-family='Instrument Sans', sans-serif, font-style=normal, font-weight=normal, text-decoration=underline}, size=null, size_unit=null, color=null, variant=regular, fallback=sans-serif, line_height=null, letter_spacing=null, casing=null, style=font-family: 'Instrument Sans', sans-serif; font-style: normal; font-weight: normal; text-decoration: underline, css=font-family: 'Instrument Sans', sans-serif; text-decoration: underline;} } :root { /* Label text */ --form-label-color: #01273E; --form-label-font-family: {font=Instrument Sans, font_set=GOOGLE, styles={font-family='Instrument Sans', sans-serif, font-style=normal, font-weight=500, text-decoration=none}, size=null, size_unit=null, color=null, variant=500, fallback=sans-serif, line_height=null, letter_spacing=null, casing=null, style=font-family: 'Instrument Sans', sans-serif; font-style: normal; font-weight: 500; text-decoration: none, css=font-family: 'Instrument Sans', sans-serif; font-weight: 500;}; --form-label-font-size-desktop: 0.8125rem; --form-label-font-size-mobile: 0.875rem; --form-label-font-weight: 500; --form-label-transform: none; --form-label-spacing-bottom: 0.875rem; /* Input text */ --form-input-color: #01273E; --form-input-font-family: {font=Instrument Sans, font_set=GOOGLE, styles={font-family='Instrument Sans', sans-serif, font-style=normal, font-weight=normal, text-decoration=none}, size=null, size_unit=null, color=null, variant=regular, fallback=sans-serif, line_height=null, letter_spacing=null, casing=null, style=font-family: 'Instrument Sans', sans-serif; font-style: normal; font-weight: normal; text-decoration: none, css=font-family: 'Instrument Sans', sans-serif;}; --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: #BACAD8; /* Error text */ --form-error-color: #FF8F8F; /* Input fields */ --form-input-background-color: rgba(255, 255, 255, 0%); --form-input-border-color: #2475A5; --form-input-border-focus-color: #2475A5; --form-input-border-size: 0.0625rem; --form-input-border-radius: 0.0rem; --form-input-padding-top: 0.0rem; --form-input-padding-bottom: 0.75rem; --form-input-padding-right: 0.0rem; --form-input-padding-left: 0.0rem; /* 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: Instrument Sans; --button-font-size-desktop: 1.25rem; --button-font-size-mobile: 1.25rem; --button-font-weight: 500; --button-transform: none; --button-padding-top: 1.25rem; --button-padding-bottom: 1.25rem; --button-padding-right: 2.0rem; --button-padding-left: 2.0rem; --button-padding-top-mobile: 1.25rem; --button-padding-bottom-mobile: 1.25rem; --button-padding-right-mobile: 2.0rem; --button-padding-left-mobile: 2.0rem; --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: Instrument Sans; --button-one-font-size-desktop: 1.25rem; --button-one-font-size-mobile: 1.25rem; --button-one-font-weight: 500; --button-one-transform: none; --button-one-padding-top: 1.25rem; --button-one-padding-bottom: 1.25rem; --button-one-padding-right: 2.0rem; --button-one-padding-left: 2.0rem; --button-one-padding-top-mobile: 1.25rem; --button-one-padding-bottom-mobile: 1.25rem; --button-one-padding-right-mobile: 2.0rem; --button-one-padding-left-mobile: 2.0rem; --button-one-border-size: 0.0625rem; --button-one-border-radius: 2.5rem; --button-one-border-style: solid; --button-one-border-color: #E57200; --button-one-border-color-hover: #ffffff; --button-one-background-color: #E57200; --button-one-background-color-hover: rgba(229, 114, 0, 0%); --button-one-text-color: #ffffff; --button-one-text-color-hover: #ffffff; /* Button 2 */ --button-two-font-family: Instrument Sans; --button-two-font-size-desktop: 1.25rem; --button-two-font-size-mobile: 1.25rem; --button-two-font-weight: 500; --button-two-transform: none; --button-two-padding-top: 1.25rem; --button-two-padding-bottom: 1.25rem; --button-two-padding-right: 2.0rem; --button-two-padding-left: 2.0rem; --button-two-padding-top-mobile: 1.25rem; --button-two-padding-bottom-mobile: 1.25rem; --button-two-padding-right-mobile: 2.0rem; --button-two-padding-left-mobile: 2.0rem; --button-two-border-size: 0.0625rem; --button-two-border-radius: 2.5rem; --button-two-border-style: solid; --button-two-border-color: #ffffff; --button-two-border-color-hover: #ffffff; --button-two-background-color: rgba(0, 0, 0, 0%); --button-two-background-color-hover: #ffffff; --button-two-text-color: #ffffff; --button-two-text-color-hover: #01273E; /* Button 3 */ --button-three-font-family: Instrument Sans; --button-three-font-size-desktop: 1.25rem; --button-three-font-size-mobile: 1.25rem; --button-three-font-weight: 500; --button-three-transform: none; --button-three-padding-top: 1.25rem; --button-three-padding-bottom: 1.25rem; --button-three-padding-right: 2.0rem; --button-three-padding-left: 2.0rem; --button-three-padding-top-mobile: 1.25rem; --button-three-padding-bottom-mobile: 1.25rem; --button-three-padding-right-mobile: 2.0rem; --button-three-padding-left-mobile: 2.0rem; --button-three-border-size: 0.0625rem; --button-three-border-radius: 2.5rem; --button-three-border-style: solid; --button-three-border-color: #E57200; --button-three-border-color-hover: #E57200; --button-three-background-color: #E57200; --button-three-background-color-hover: rgba(229, 114, 0, 0%); --button-three-text-color: #ffffff; --button-three-text-color-hover: #E57200; /* Button 4 */ --button-four-font-family: Instrument Sans; --button-four-font-size-desktop: 1.25rem; --button-four-font-size-mobile: 1.25rem; --button-four-font-weight: 500; --button-four-transform: none; --button-four-padding-top: 1.25rem; --button-four-padding-bottom: 1.25rem; --button-four-padding-right: 2.0rem; --button-four-padding-left: 2.0rem; --button-four-padding-top-mobile: 1.25rem; --button-four-padding-bottom-mobile: 1.25rem; --button-four-padding-right-mobile: 2.0rem; --button-four-padding-left-mobile: 2.0rem; --button-four-border-size: 0.0625rem; --button-four-border-radius: 2.5rem; --button-four-border-style: solid; --button-four-border-color: #E57200; --button-four-border-color-hover: #E57200; --button-four-background-color: rgba(229, 114, 0, 0%); --button-four-background-color-hover: #E57200; --button-four-text-color: #E57200; --button-four-text-color-hover: #ffffff; /* Button 5 */ --button-five-font-family: Instrument Sans; --button-five-font-size-desktop: 1.25rem; --button-five-font-size-mobile: 1.25rem; --button-five-font-weight: 500; --button-five-transform: none; --button-five-padding-top: 1.25rem; --button-five-padding-bottom: 1.25rem; --button-five-padding-right: 2.0rem; --button-five-padding-left: 2.0rem; --button-five-padding-top-mobile: 1.25rem; --button-five-padding-bottom-mobile: 1.25rem; --button-five-padding-right-mobile: 2.0rem; --button-five-padding-left-mobile: 2.0rem; --button-five-border-size: 0.0625rem; --button-five-border-radius: 2.5rem; --button-five-border-style: solid; --button-five-border-color: #ffffff; --button-five-border-color-hover: #ffffff; --button-five-background-color: #ffffff; --button-five-background-color-hover: rgba(0, 0, 0, 0%); --button-five-text-color: #01273E; --button-five-text-color-hover: #ffffff; } :root { --tags-font-size-desktop: 1.0rem; --tags-font-size-mobile: 1.0rem; --tags-font-weight: 500; --tags-transform: none; --tag-background: rgba(0, 104, 197, 0%); --tag-border-color: #BACAD8; --tag-text-color: #01273E; --tag-hover-background: #0068C5; --tag-hover-border-color: #0068C5; --tag-hover-text-color: #ffffff; --tag-border-width: 0.0625rem; --tag-border-radius: 1.875rem; --form-tag-padding-top: 0.875rem; --form-tag-padding-bottom: 0.875rem; --form-tag-padding-right: 1.125rem; --form-tag-padding-left: 1.125rem; } :root { --base-padding: 37px; --max-width: 1440px; --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: 16px; --flex-gap: 35px; } /* Generic */ /* normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ 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-left: 37px; padding-right: 37px; padding-top: 65px; padding-bottom: 65px; } .dnd-section:has(.sticky-quote) { padding-top: 0px; padding-bottom: 0px; } .dnd-section:has(.hero-slider) { padding-top: 60px; padding-bottom: 48px; } .dnd-section >.row-fluid { 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:has(.sticky-quote) { padding-top: 0px; padding-bottom: 0px; } .dnd-section:has(.hero-slider) { padding-top: 60px; padding-bottom: 84px; } .dnd-section:has(.applications-slider) { padding-left: 0; padding-right: 0; } } @media (min-width: 1440px) { .dnd-section { padding-left: 120px; padding-right: 120px; } .dnd-section:has(.applications-slider) { padding-left: 0; padding-right: 0; } } /* Elements */ html { font-size: 16px default; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-family: var(--paragraph-font-family); font-size: var(--paragraph-font-size-desktop); font-style: var(--paragraph-font-style); font-weight: var(--paragraph-font-weight); text-decoration: var(--paragraph-text-decoration); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing); overflow-wrap: break-word; word-wrap: break-word; hyphens: var(--hyphens); color: var(--dark-blue); } 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; } h1, .h1 { font-family: var(--h1-font-family); font-size: var(--h1-font-size-desktop); font-style: var(--h1-font-style); font-weight: var(--h1-font-weight); line-height: var(--h1-line-height); text-decoration: var(--h1-text-decoration); letter-spacing: var(--h1-letter-spacing); text-transform: var(--h1-transform); } h1.small, .h1.small, .title-small h1 { font-size: 3.438rem; line-height: 110%; letter-spacing: -1px; font-style: normal; font-weight: 600; } h2, .h2 { font-family: var(--h2-font-family); font-size: var(--h2-font-size-desktop); font-style: var(--h2-font-style); font-weight: var(--h2-font-weight); line-height: var(--h2-line-height); text-decoration: var(--h2-text-decoration); letter-spacing: var(--h2-letter-spacing); text-transform: var(--h2-transform); } h3, .h3 { font-family: var(--h3-font-family); font-size: var(--h3-font-size-desktop); font-style: var(--h3-font-style); font-weight: var(--h3-font-weight); line-height: var(--h3-line-height); text-decoration: var(--h3-text-decoration); letter-spacing: var(--h3-letter-spacing); text-transform: var(--h3-transform); } h4, .h4 { font-family: var(--h4-font-family); font-size: var(--h4-font-size-desktop); font-style: var(--h4-font-style); font-weight: var(--h4-font-weight); line-height: var(--h4-line-height); text-decoration: var(--h4-text-decoration); letter-spacing: var(--h4-letter-spacing); text-transform: var(--h4-transform); } h5, .h5 { font-family: var(--h5-font-family); font-size: var(--h5-font-size-desktop); font-style: var(--h5-font-style); font-weight: var(--h5-font-weight); line-height: var(--h5-line-height); text-decoration: var(--h5-text-decoration); letter-spacing: var(--h5-letter-spacing); text-transform: var(--h5-transform); } h6, .h6 { font-family: var(--h6-font-family); font-size: var(--h6-font-size-desktop); font-style: var(--h6-font-style); font-weight: var(--h6-font-weight); line-height: var(--h6-line-height); text-decoration: var(--h6-text-decoration); letter-spacing: var(--h6-letter-spacing); text-transform: var(--h6-transform); } p { margin: 0; font-family: var(--paragraph-font-family); font-size: var(--paragraph-font-size-desktop); font-style: var(--paragraph-font-style); font-weight: var(--paragraph-font-weight); line-height: var(--paragraph-line-height); text-decoration: var(--paragraph-text-decoration); letter-spacing: var(--paragraph-letter-spacing); text-transform: var(--paragraph-transform); } p.small { font-family: var(--paragraph-small-font-family); font-size: var(--paragraph-small-font-size-desktop); font-style: var(--paragraph-small-font-style); font-weight: var(--paragraph-small-font-weight); line-height: var(--paragraph-small-line-height); text-decoration: var(--paragraph-small-text-decoration); letter-spacing: var(--paragraph-small-letter-spacing); text-transform: var(--paragraph-small-transform); } .text-large, p.large { margin-bottom: 20px; font-family: var(--paragraph-large-font-family); font-size: var(--paragraph-large-font-size-desktop); font-style: var(--paragraph-large-font-style); font-weight: var(--paragraph-large-font-weight); line-height: var(--paragraph-large-line-height); text-decoration: var(--paragraph-large-text-decoration); letter-spacing: var(--paragraph-large-letter-spacing); 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 { font-family: 'Instrument Sans', sans-serif; font-style: normal; font-weight: normal; text-decoration: underline; font-size: var(--link-font-size-desktop); line-height: var(--link-line-height); letter-spacing: var(--link-letter-spacing); text-transform: var(--link-transform); transition: var(--transition); color: var(--dark-blue); } a:hover { color: var(--orange); text-decoration-color: var(--orange); } blockquote { margin: 0; margin-bottom: 25px; padding: 0; font-family: var(--blockquote-font-family); font-size: var(--blockquote-font-size-desktop); font-style: var(--blockquote-font-style); font-weight: var(--blockquote-font-weight); line-height: var(--blockquote-line-height); text-decoration: var(--blockquote-text-decoration); letter-spacing: var(--blockquote-letter-spacing); text-transform: var(--blockquote-transform); } .subheading { display: block; margin-bottom: 20px; font-family: var(--subheading-font-family); font-size: var(--subheading-font-size-desktop); font-style: var(--subheading-font-style); font-weight: var(--subheading-font-weight); line-height: var(--subheading-line-height); text-decoration: var(--subheading-text-decoration); letter-spacing: 2px; text-transform: var(--subheading-transform); color: var(--electric-blue); } a.big-link { font-size: 20px; font-style: normal; font-weight: 500; color: var(--orange); text-decoration: underline; transition: all ease-in-out 0.3s; } a.big-link:hover { opacity: 0.7; } @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); } 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); } 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); } h3, .h3 { font-size: var(--h3-font-size-mobile); line-height: var(--h3-line-height); letter-spacing: var(--h3-letter-spacing); } h4, .h4 { font-size: var(--h4-font-size-mobile); line-height: var(--h4-line-height); letter-spacing: var(--h4-letter-spacing); } h5, .h5 { font-size: var(--h5-font-size-mobile); line-height: var(--h5-line-height); letter-spacing: var(--h5-letter-spacing); } h6, .h6 { font-size: var(--h6-font-size-mobile); line-height: var(--h6-line-height); letter-spacing: var(--h6-letter-spacing); } p { font-size: var(--paragraph-font-size-mobile); line-height: var(--paragraph-line-height); letter-spacing: var(--paragraph-letter-spacing); } p.small { font-size: var(--paragraph-small-font-size-mobile); line-height: var(--paragraph-small-line-height); letter-spacing: var(--paragraph-small-letter-spacing); } .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); } a { font-size: var(--link-font-size-mobile); line-height: var(--link-line-height); letter-spacing: var(--link-letter-spacing); } blockquote { font-size: var(--blockquote-font-size-mobile); line-height: var(--blockquote-line-height); letter-spacing: var(--blockquote-letter-spacing); } .subheading { margin-bottom: 20px; font-size: var(--subheading-font-size-mobile); line-height: var(--subheading-line-height); letter-spacing: var(--subheading-letter-spacing); } } /* custom font sizes */ .blog-post .blog-post-content h2 { font-size: 34px; font-style: normal; font-weight: 500; line-height: 44px; } .blog-post .blog-post-content h3 { font-size: 26px; font-style: normal; font-weight: 500; line-height: 36px; } @media only screen and (max-width: 767px) { .blog-post .blog-post-content h2 { font-size: 32px; line-height: 42px; } .blog-post .blog-post-content h3 { font-size: 24px; line-height: 34px; } } /* BG Colors */ .bg-color-4 { background-color: #E57200; } .bg-color-5 { background-color: #FFF; } .bg-color-1 { background-color: #01273e; } .bg-color-2 { background-color: #003C71; } .bg-color-3 { background-color: #0068C5; } .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: #FFF; } .fn-date-picker td.is-selected .pika-button { border-radius: 0; box-shadow: none; } .fn-date-picker td .pika-button:hover, .fn-date-picker td .pika-button:focus { border-radius: 0 !important; color: #FFF; } /* Inputs - file picker */ form input[type=file] { 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-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-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(--blueish-grey) !important; } [data-hsfc-id=Renderer] .hsfc-FieldLabel { display: block !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-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(--dark-blue) !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; } .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); } .content--light [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret>span { } .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); } } /* Button style modifiers */ .btn.btn--small, a.btn.btn--small { padding: 14px 18px; border-radius: 30px; font-size: 1rem; line-height: 24px; } .tags { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; gap: 12px; } @media only screen and (min-width: 768px) { .tags { flex-direction: row; } } .tags-wrapper { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; } @media only screen and (min-width: 768px) { .tags-wrapper { justify-content: flex-start; } } .tag { cursor: pointer; display: inline-flex; text-align: center; transition: var(--transition); white-space: normal; text-decoration: none; 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-family: var(--tags-font-family); font-size: var(--tags-font-size-mobile); line-height: 1; font-weight: var(--tags-font-weight); text-transform: var(--tags-transform); } @media only screen and (min-width: 768px) { .tag { font-size: var(--tags-font-size-desktop); } } .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); } .filter-text { margin-right: 10px; } /* card tags */ .card-tag.tag { padding: 8px 16px; border: var(--tag-border-width) solid var(--tag-hover-border-color); background-color: var(--tag-hover-background); color: var(--tag-hover-text-color); cursor: auto; } .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 { 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: #fff; 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: #fff; 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; } .hs-search-field__suggestions-container { display: none; } /* 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) { .hs-search-field__bar form input[type=search] { border-bottom: none; display: none; } } .hs-search-field .hs-search-field__bar, .hs-search-field .hs-search-field__bar .hs-search-field__form{ height: 24px; width: 20px; } .hs-search-field .hs-search-field__bar .hs-search-field__input { display: 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; } /* 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); } /* * Spacing */ .pt-sm { padding-top: 25px; } .pt-md { padding-top: 35px; } .pt-lg { padding-top: 80px; } .pt-xxl { padding-top: 180px; } @media only screen and (min-width: 768px) { .pt-sm { padding-top: 45px; } .pt-md { padding-top: 85px; } .pt-lg { padding-top: 120px; } .pt-xxl { padding-top: 220px; } } .pb-sm { padding-bottom: 25px; } .pb-md { padding-bottom: 35px; } .pb-lg { padding-bottom: 80px; } .pb-xxl { padding-bottom: 120px; } @media only screen and (min-width: 768px) { .pb-sm { padding-bottom: 45px; } .pb-md { padding-bottom: 85px; } .pb-lg { padding-bottom: 120px; } .pb-xxl { padding-bottom: 180px; } } /* * 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 */ .grid { display: grid; gap: var(--grid-gap); grid-template-columns: 1fr; } @media only screen and (min-width: 768px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1080px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .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; } } /* 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 */ .navigation { position: relative; z-index: 24; background-color: var(--white); } .navigation { --top-nav-h: 0px; transition: transform 220ms ease; } .navigation.is-fixed { position: fixed; top: 0; left: 0; right: 0; } .navigation.is-top-hidden { transform: translateY(calc(-1 * var(--top-nav-h))); } @media (prefers-reduced-motion: reduce) { .navigation { transition: none; } } .navigation .wrapper { max-width: 1440px; margin: 0 auto; display: flex; flex-direction: row; } .navigation-logo, .navigation-logo a { display: flex; align-items: center; max-width: 240px; } .navigation-logo img { width: 100%; height: auto; object-fit: contain; } .top-nav, .main-nav { padding-left: 37px; padding-right: 37px; } /* top nav */ .top-nav { padding-top: 13px; padding-bottom: 13px; background: var(--dark-blue); } .top-nav .wrapper { display: flex; gap: 48px; justify-content: flex-end; width: 100%; } .top-nav a { display: flex; gap: 10px; align-items: center; color: var(--white); font-size: 14px; line-height: 18px; text-decoration: none; } /* main nav */ .main-nav { position: relative; z-index: 23; background-color: var(--white); padding-top: 24px; padding-bottom: 24px; } body.sub-menu-open::before { content: ""; display: block; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 11; background-color: rgba(var(--dark-blue-rgb), 0.1); } .main-nav .wrapper { display: flex; justify-content: space-between; } .main-nav .navigation-menu { display: flex; align-items: center; } .main-nav .navigation-menu ul { display: flex; gap: 48px; align-items: center; list-style: none; margin: 0; padding: 0; } @media only screen and (min-width: 1200px) { .main-nav .navigation-menu ul { gap: 14px; } } @media only screen and (min-width: 1440px) { .main-nav .navigation-menu ul { gap: 48px; } } .main-nav .navigation-menu ul li a { text-decoration: none; } .main-nav .navigation-menu ul li a:hover { color: var(--electric-blue); text-decoration: underline; } .nav__item.has-children { position: relative; } .nav__item.has-children ul { position: absolute; z-index: 24; top: 85px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 16px; padding: 48px 38px; border-radius: 30px; background-color: var(--white); } .nav__item.has-children ul::after { content: ""; display: block; position: absolute; z-index: 23; top: -18px; left: 50%; transform: translateX(-50%); background-image: url("data:image/svg+xml,%3Csvg width='53' height='53' viewBox='0 0 53 53' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='25.6851' width='37.7028' height='36.3242' transform='rotate(45 25.6851 0)' fill='white'/%3E%3C/svg%3E%0A"); width: 37px; height: 37px; background-position: center; background-repeat: no-repeat; background-size: contain; } .nav__item.has-children ul[hidden], .nav__item.has-children ul.nav__submenu.col-2[hidden] { display: none; } .nav__item.has-children ul li { min-width: 265px; } .nav__item.has-children .nav__item-inner { display: flex; gap: 10px; } .nav__item.has-children ul.nav__submenu.col-2 { display: grid; grid-template-columns: repeat(2, 1fr); column-gap: 85px; row-gap: 16px; } .nav__item.has-children .nav__toggle { display: flex; align-items: center; gap: 10px; box-shadow: none; outline: none; border: none; background-color: transparent; padding: 0; margin: 0; line-height: 1; cursor: pointer; color: var(--dark-blue); } .nav__item.has-children .nav__toggle:focus, .nav__item.has-children .nav__toggle:focus-visible, .nav__item.has-children .nav__toggle:active, .nav__item.has-children .nav__toggle:hover, .nav__item.has-children .nav__toggle.sub-menu-open { color: var(--electric-blue); } .nav__item.has-children .nav__toggle:focus svg, .nav__item.has-children .nav__toggle:focus-visible svg, .nav__item.has-children .nav__toggle:active svg, .nav__item.has-children .nav__toggle:hover .drowdown-icon svg { stroke: var(--electric-blue); } .nav__item.has-children .nav__toggle.sub-menu-open .drowdown-icon svg { transform: rotate(180deg); stroke: var(--electric-blue); } .nav__item.has-children .nav__toggle .drowdown-icon { display: flex; align-items: center; } .nav__item.has-children .nav__toggle .drowdown-icon { width: 8px; height: 6px; } .nav__item.has-children .nav__toggle .drowdown-icon svg { margin-top: 2px; } .main-nav .navigation-misc { display: flex; align-items: center; gap: 25px; } @media only screen and (min-width: 1200px) { .main-nav .navigation-misc { gap: 14px; } } @media only screen and (min-width: 1440px) { .main-nav .navigation-misc { gap: 25px; } } .main-nav .navigation-misc .search, .main-nav .navigation-misc .search svg { width: 24px; height: 24px; } .navigation-misc .language { display: none; align-items: center; gap: 15px; } @media only screen and (min-width: 1200px) { .navigation-misc .language { display: flex; gap: 8px; } } @media only screen and (min-width: 1440px) { .navigation-misc .language { gap: 15px; } } /* mobile */ body.hamburger-open { overflow: clip; } body.hamburger-open .navigation .navigation-menu.mobile { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; position: absolute; top: 87px; left: 0; width: 100%; height: calc(100vh - 87px); overflow-y: auto; background-color: var(--white); } .navigation-menu.mobile .mobile-button-wrapper, .navigation-menu.mobile .language { padding: 28px 37px; } .navigation-menu.mobile .top-nav { padding: 37px 37px; padding-bottom: 90px; } .navigation-menu.mobile ul { align-items: flex-start; flex-direction: column; width: 100%; gap: 0; } .navigation-menu.mobile ul.nav__submenu { gap: 24px; } .navigation-menu.mobile ul li.nav__item { width: 100%; padding-bottom: 24px; border-bottom: 1px solid #BACAD8; padding-top: 28px; padding-left: 37px; padding-right: 37px; } .navigation-menu.mobile ul li.nav__item:last-of-type { border-bottom: none; padding-bottom: 0; } .navigation-menu.mobile .nav__item.has-children { width: 100%; } .navigation-menu.mobile .nav__item.has-children .nav__toggle .drowdown-icon { width: 13px; height: 8px; } .navigation-menu.mobile .nav__item.has-children .nav__item-inner .nav__toggle { justify-content: space-between; width: 100%; } .navigation-menu.mobile .nav__item.open { background-color: var(--clean-blueish-grey); } .navigation-menu.mobile .nav__item.open .nav__item-inner { margin-bottom: 24px; } .navigation-menu.mobile .nav__submenu { position: relative; top: 0; left: 0; transform: none; border-radius: 0; background-color: var(--clean-blueish-grey); padding: 0; } .navigation-menu.mobile .nav__item.has-children ul::after { content: none; display: none; } .navigation-menu.mobile .nav__item.has-children ul li a { font-size: 14px; line-height: 18px; } /* mobile misc items */ .navigation-menu.mobile .mobile-button-wrapper { padding-top: 0; width: 100%; } .navigation-menu.mobile .mobile-button-wrapper a { display: block; } .navigation-menu.mobile .top-nav { width: 100%; } .navigation-menu.mobile .top-nav .wrapper { flex-direction: column; gap: 0; } .navigation-menu.mobile .top-nav .top-nav-link { padding-bottom: 28px; padding-top: 28px; border-bottom: 1px solid #003C71; } .navigation-menu.mobile .top-nav .top-nav-link:first-of-type { padding-top: 0; } .navigation-menu.mobile .top-nav .top-nav-link:last-of-type { border-bottom: none; padding-bottom: 0; } .navigation-menu.mobile .language { display: flex; align-items: center; padding-top: 0; gap: 15px; padding-top: 48px; } /* modifiers */ .navigation .mobile { display: none; } .navigation .desk { display: none; } @media only screen and (min-width: 1200px) { .navigation .mobile { display: none; } .navigation .desk { display: flex; } } .blog-card { position: relative; width: 100%; overflow: clip; border-radius: 30px; background-color: var(--white); transition: all ease-in-out 0.3s; cursor: pointer; } .blog-card .blog-link, .blog-card .blog-card-link { position: absolute; z-index: 3; top: 0; left: 0; height: 100%; width: 100%; } .blog-card:hover { box-shadow: 0 6px 20px -4px rgba(1, 39, 62, 0.10); } .blog-card-tags { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } .blog-card-tags .subheading { margin-bottom: 0; } .blog-card .blog-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; } .blog-card .label { color: var(--electric-blue); font-size: 14px; font-style: normal; font-weight: 400; line-height: 22px; } .blog-card .image { height: 325px; width: 100%; overflow: clip; transition: all ease-in-out 0.3s; } .blog-card .image img { width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.3s; } .blog-card:hover .image img { transform: scale(1.1); } .blog-card .content { display: flex; flex-direction: column; gap: 12px; padding: 32px 24px; padding-bottom: 110px; } .blog-card .content .subheading { margin-bottom: 0; } .blog-card .content .h4 { transition: all ease-in-out 0.3s; margin-bottom: 0; } .blog-card:hover .content .h4 { color: var(--orange); text-decoration: underline; } /* blog post related */ .blog-cards.blog-cards-related { padding-top: 65px; padding-bottom: 65px; background-color: rgba(var(--grey-rgb),0.4); } @media only screen and (min-width: 1080px) { .blog-cards.blog-cards-related { padding-top: 120px; padding-bottom: 120px; } } .blog-cards__header { display: flex; justify-content: space-between; flex-direction: column; gap: 22px; margin-bottom: 60px; } .blog-cards__header h2 { margin-bottom: 0; } @media only screen and (min-width: 600px) { .blog-cards__header { align-items: center; flex-direction: row; gap: 36px; } } .breadcrumbs__list { display: flex; flex-wrap: wrap; gap: 0; list-style: none; margin: 0; padding: 0 !important; } .breadcrumbs__item { display: flex; align-items: center; } .breadcrumbs__item:not(:last-child)::after { content: ''; margin: 0 16px; width: 9px; height: 15px; background-repeat: no-repeat; background-size: contain; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M0.353554 0.353554L7.35355 7.35355L0.353554 14.3536' stroke='%2301273E'/%3E%3C/svg%3E"); } .content--light .breadcrumbs__item:not(:last-child)::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='15' viewBox='0 0 9 15' fill='none'%3E%3Cpath d='M0.353554 0.353554L7.35355 7.35355L0.353554 14.3536' stroke='%23FFFFFF'/%3E%3C/svg%3E"); } .breadcrumbs__item a { color: var(--dark-blue); font-weight: 500; text-decoration: none; } .breadcrumbs__item a:hover { text-decoration: underline; } .breadcrumbs__item a[aria-current="page"], .breadcrumbs__item span[aria-current="page"] { color: var(--dark-blue); font-weight: 500; } .breadcrumbs__item.home a span{ display: inline-block; } .breadcrumbs__item.home a svg { display: none; } @media only screen and (max-width: 600px) { .breadcrumbs__item.home a span { display: none; } .breadcrumbs__item.home a svg { display: inline-block; } .breadcrumbs__item, .breadcrumbs__item a, .breadcrumbs__item span { font-size: 11px; line-height: 1; } .breadcrumbs__item:not(:last-child)::after { margin: 0 12px; width: 7px; height: 12px; } } /* offset to fix 1px issue on form load */ .base.form { margin-top: -1px; } /* offset to fix 1px issue on form load end */ .form { position: relative; overflow: hidden; } .form .bg-wrapper { z-index: -1; } .form .bg-wrapper img, .form .bg-wrapper video { object-fit: cover; height: 100%; width: 100%; } .form .wrapper { position: relative; z-index: 3; gap: 65px; } .form .wrapper .form__body { display: flex; flex-direction: column; gap: 0px; } @media only screen and (min-width: 768px) { .form .wrapper .form__body { gap: 35px; } } /* modifier */ .form.side-by-side .wrapper { flex-direction: column; gap: 65px; } .form.side-by-side .wrapper .form__header, .form.side-by-side .wrapper .form__body { width: 100%; } @media only screen and (min-width: 890px) { .form.side-by-side .wrapper { flex-direction: row; gap: 120px; } .form.side-by-side .wrapper .form__header, .form.side-by-side .wrapper .form__body { max-width: 50%; } .form.form-only .form__header, .form.form-only .form__body { max-width: 920px; } } .form .bg-wrapper.parallax img, .form .bg-wrapper.parallax video { position: fixed; top: 0; left: 0; } .product-listing__header { display: flex; align-items: flex-end; gap: 35px; margin-bottom: 25px; } @media only screen and (min-width: 1080px) { .product-listing__header { margin-bottom: 65px; } } .product-listing__header h1 { margin-bottom: 0; } .product-listing__header .search { max-width: 330px; width: 100%; } .product-listing__header .content { width: 100%; display: flex; gap: 35px; justify-content: space-between; align-items: flex-end; } .product-listing__body { display: flex; flex-direction: column; gap: 35px; } @media only screen and (min-width: 1080px) { .product-listing__body { flex-direction: row; } } .product-listing__body .filters { width: 100%; } @media only screen and (min-width: 1080px) { .product-listing__body .filters { max-width: 330px; padding-bottom: 120px; } } .product-listing .product-cards { width: 100%; } .product-listing .product-cards-wrapper { width: 100%; gap: 14px; margin-bottom: 100px; } @media only screen and (min-width: 560px) { .product-listing .product-cards-wrapper.grid-3 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1080px) { .product-listing .product-cards-wrapper.grid-3 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1080px) { .product-listing .product-cards-wrapper.grid-3 { grid-template-columns: repeat(2, 1fr); } } @media only screen and (min-width: 1440px) { .product-listing .product-cards-wrapper.grid-3 { grid-template-columns: repeat(3, 1fr); } } /* search */ .product-listing .search { width: 100%; } .product-listing .search .search-wrapper { display: flex; padding-bottom: 6px; margin-bottom: 6px; align-items: center; gap: 10px; border-bottom: 1px solid var(--blueish-grey); max-width: 180px; width: 100%; } .product-listing .search input { appearance: none; border-radius: 0; background-color: transparent; border: none; width: 100%; } .product-listing__header .search svg { max-width: 15px; width: 100%; height: 15px; } .product-listing .search input:focus, .product-listing .search input:focus-visible { appearance: none; border-radius: 0; border: none; outline: none; } .product-listing .search input::placeholder { color: var(--blue); font-size: 18px; line-height: 24px; } /* filter title */ .product-listing__body:has(.no-result-message) { position: relative } .product-listing__body .filter-title { display: flex; align-items: center; justify-content: space-between; width: 100%; margin-bottom: 22px; font-size: 16px; font-weight: 400; line-height: 24px; } .product-listing__body .filter-title p { margin-bottom: 0; } @media only screen and (min-width: 1080px) { .product-listing__body .filter-title { font-size: 20px; font-weight: 700; line-height: 28px; } } .product-listing__body .filter-title .reset-button { font-size: 16px; font-weight: 400; line-height: 22px; color: var(--electric-blue); text-decoration: underline; cursor: pointer; } .product-listing__body .filter-title .reset-button:hover { color: var(--orange); } /* filter groups */ .product-listing__body .filters-wrapper { display: flex; flex-direction: column; gap: 24px; position: sticky; top: 145px; bottom: 120px; } .filter-group { padding-bottom: 12px; border-bottom: 1px solid var(--blueish-grey); } .filter-group:last-of-type { border-bottom: none; } @media only screen and (min-width: 1080px) { .filter-group { padding-bottom: 24px; } } .filter-group.is-open { display: flex; flex-direction: column; gap: 15px; } .filter-group.is-open svg.open { display: block; } .filter-group.is-open svg.closed { display: none; } .filter-group svg.open { display: none; } .filter-group svg.closed { display: block; } .filter-group .main-filter { display: none; } .filter-group.is-open .main-filter { display: block; } .filter-group .filter-group-label { display: flex; gap: 10px; align-items: center; justify-content: space-between; width: 100%; cursor: pointer; font-size: 16px; font-style: normal; font-weight: 400; line-height: 24px; } .filter-wrapper { display: flex; gap: 10px; font-size: 14px; line-height: 18px; cursor: pointer; } .filter-wrapper.active { color: var(--electric-blue); font-weight: 600; } .filter-wrapper .checkbox { position: relative; } .filter-wrapper .checkbox .checkmark { display: none; position: absolute; top: 5px; left: 4px; } .filter-wrapper.active .checkbox .checkmark { display: block; } /* sidebar */ .products-sidebar { position: fixed; overflow-y: scroll; z-index: 12; top: 88px; left: 0; width: 80%; height: 100vh; display: flex; flex-direction: column; gap: 12px; padding: 46px 37px; background-color: var(--white); transform: translateX(-200%); transition: transform ease-in-out 0.2s; } .products-sidebar.active { transform: translateX(0); } .products-sidebar.active::before { content: ""; position: fixed; z-index: 8; top: 0; left: 0; width: 100%; height: 100%; background: black; opacity: 0.3; } @media only screen and (min-width: 1080px) { p:has(.product-number.mobile), .reset-button.mobile, .products-sidebar { display: none; } } @media only screen and (max-width: 1079px) { .product-listing__body .filter-group { display: none; } .product-listing__body .products-sidebar .filter-group { display: flex; } .reset-button.desk, .search.desk, p:has(.product-number.desk) { display: none; } } .products-sidebar .filter-title-wrapper { flex-direction: row-reverse; justify-content: space-between; gap: 35px; width: 100%; } /* pagination */ .product-listing .pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 120px; } .product-listing .pagination button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; outline: none; background-color: transparent; border-radius: 50%; transition: all ease-in-out 0.2s; border: none; font-size: 16px; line-height: 22px; cursor: pointer; } .product-listing .pagination button.disabled { opacity: 0.4; } .product-listing .pagination button:hover, .product-listing .pagination button.active { color: var(--white); background-color: var(--orange); } .product-listing .pagination button:first-of-type, .product-listing .pagination button:last-of-type { background-color: transparent; } .product-listing .pagination button:first-of-type:hover, .product-listing .pagination button:last-of-type:hover { background-color: transparent; } /* filter open close */ @media only screen and (min-width: 1080px) { .filter-title-wrapper svg.open, .filter-title-wrapper svg.close { display: none; } } /* mobile vs desk styles */ @media only screen and (max-width: 1079px) { .filter-title-wrapper { display: flex; align-items: center; gap: 8px; font-size: 20px; font-weight: 500; line-height: 28px; } .reset-button.mobile { color: var(--electric-blue); margin-top: 12px; margin-bottom: 12px; text-decoration: underline; } } .hero-slider { } .hero-slider .wrapper { display: flex; flex-direction: column-reverse; gap: 64px; } @media only screen and (min-width: 1080px) { .hero-slider .wrapper { flex-direction: row; gap: 64px; } } .hero-slider__header { position: relative; max-width: 660px; width: 100%; padding-left: 60px; padding-right: 60px; margin: 0 auto; } .hero-slider__header .swiper-slide { display: flex; justify-content: center; align-items: center; } .hero-slider__header .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } .hero-slider__header .swiper-pagination { position: relative; top: auto; bottom: auto; left: auto; right: auto; padding-top: 46px; } .hero-slider__header .swiper-pagination .swiper-pagination-bullet { width: 12px; height: 12px; background-color: #D9D9D9; } .hero-slider__header .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--electric-blue); } .hero-slider-buttons { position: absolute; z-index: 4; top: 50%; left: 50%; transform: translate(-50%) translateY(-50%); width: 100%; display: flex; gap: 60px; align-items: center; justify-content: space-between; cursor: pointer; } .hero-slider-button.swiper-button-disabled { opacity: 0.4 !important; } .hero-slider__body { width: 100%; } @media only screen and (min-width: 960px) { .hero-slider__body { padding-top: 36px; } } .hero-slider .hero-slider__body ul.hero-slider-links { display: flex; flex-direction: column; gap: 16px; margin: 0; margin-top: 36px; padding: 0; } .hero-slider__body ul.hero-slider-links li { list-style: none; } .hero-slider__body ul.hero-slider-links li a { display: flex; align-items: center; gap: 20px; text-decoration: underline; } .hero-slider__body ul.hero-slider-links li a img { width: 35px; height: 35px; object-fit: contain; } /* modifiers */ @media only screen and (min-width: 960px) { .hero-slider.hero-slider--reversed .wrapper { flex-direction: row-reverse; } } .sticky-quote .wrapper { display: flex; flex-wrap: wrap; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; gap: 25px; padding-top: 25px; padding-bottom: 25px; } @media only screen and (min-width: 768px) { .sticky-quote .wrapper { justify-content: center; } } @media only screen and (min-width: 960px) { .sticky-quote .wrapper { gap: 36px; justify-content: space-between; } } .sticky-quote .wrapper h1, .sticky-quote .wrapper h2, .sticky-quote .wrapper h3, .sticky-quote .wrapper h4, .sticky-quote .wrapper h5 { margin-bottom: 0; } .sticky-quote .wrapper .btn-group { margin-top: 0; } .sticky-quote__header a.h5.mobile { display: none; } @media only screen and (max-width: 767px) { .sticky-quote__header { width: 100%; } .sticky-quote__header .h5.desk { display: none; } .sticky-quote__header a.h5.mobile { display: block; text-align: center !important; text-decoration: underline !important; margin-bottom: 0; } .sticky-quote__header a.h5.mobile span { text-align: center !important; text-decoration: underline !important; } .sticky-quote__body { width: 100%; display: none; } } /* scroll style */ .row-fluid-wrapper.row-depth-1:has(.sticky-quote) { position: sticky; z-index: 11; top: 85px; left: 0; width: 100%; } @media only screen and (min-width: 1200px) { .row-fluid-wrapper.row-depth-1:has(.sticky-quote) { top: 146px; } body:has(.navigation.is-top-hidden) .row-fluid-wrapper.row-depth-1:has(.sticky-quote) { top: 102px; } } .sticky-quote.is-sticky .wrapper { padding-top: 12px; padding-bottom: 12px; } .sticky-quote.is-sticky .wrapper { padding-top: 12px; padding-bottom: 12px; } .text .wrapper { display: grid; gap: 35px; grid-template-columns: 1fr; } .text .wrapper .text-col { width: 100%; } .text.text--2 .wrapper .text-col { max-width: 100%; } .text.text--3 .wrapper .text-col { max-width: 100%; } @media only screen and (min-width: 768px) { .text.text--4 .wrapper, .text.text--2 .wrapper { grid-template-columns: repeat(2, 1fr); } .text.text--3 .wrapper { grid-template-columns: repeat(3, 1fr); } } @media only screen and (min-width: 1080px) { .text.text--4 .wrapper { grid-template-columns: repeat(4, 1fr); } } /* 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; } } .video .wrapper { border-radius: 10px; overflow: clip; } @media only screen and (min-width: 768px) { .video .wrapper { border-radius: 30px; } } .txt-media .wrapper { gap: 40px; flex-direction: column; } .txt-media__header, .txt-media__body { width: 100%; } .txt-media__header { position: relative; border-radius: 10px; 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; } @media only screen and (min-width: 960px) { .txt-media .wrapper { flex-direction: row; gap: 90px; align-items: center; } .txt-media__header { border-radius: 40px; } .txt-media__header, .txt-media__body { max-width: 50%; } } /* 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--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__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.contained.image-pos-vert--top { align-self: flex-start; } .txt-media__header.contained.image-pos-vert--center { align-self: center; } .txt-media__header.contained.image-pos-vert--bot { 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%; } } .row-fluid-wrapper.row-depth-1:has(.image-slider.base){ padding-right: 0 !important; padding-left: 0 !important; overflow: clip; } .image-slider__header { padding-left: var(--base-padding); } @media only screen and (min-width: 1440px) { .image-slider__header { width: 1560px; } } @media only screen and (min-width: 1500px) { .image-slider__header { padding-left: 0; } } .image-slider .swiper-slide { border-radius: 30px; overflow: clip; } .image-slider .swiper-slide { height: auto; } .image-slider .swiper-slide img { width: 100%; height: 100%; object-fit: cover; } /* slider buttons */ .image-slider-buttons { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 35px; max-width: 1440px; padding-right: var(--base-padding); padding-left: var(--base-padding); } .image-slider-button { cursor: pointer; } @media only screen and (min-width: 1500px) { .image-slider-buttons { padding-right: 0; padding-left: 0; } } .image-slider-button svg { width: 55px; height: 36px; fill: #0068C5; } @media only screen and (min-width: 560px) { .image-slider-buttons { margin-top: 60px; } .image-slider-button svg { width: 76px; height: 50px; } } .image-slider-button svg rect { stroke: var(--white); } .image-slider-button svg path { stroke: var(--white); } .image-slider-button.swiper-button-disabled svg { fill: transparent; } .image-slider-button.swiper-button-disabled svg rect { stroke: #BACAD8; } .image-slider-button.swiper-button-disabled svg path { stroke: #BACAD8; } .image-slider-button.image-slider-next svg { transform: rotate(180deg); } .image-slider-buttons .swiper-pagination { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; font-size: 20px; line-height: 28px; } @media only screen and (min-width: 560px) { .image-slider-buttons .swiper-pagination { font-size: 20px; line-height: 28px; } } /* scroll bar */ .image-slider .swiper-scrollbar { max-width: 1403px; } .image-slider .swiper-horizontal>.swiper-scrollbar, .image-slider .swiper-scrollbar.swiper-scrollbar-horizontal { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: 4px; margin-top: 60px; opacity: 1 !important; background: var(--blueish-grey, #BACAD8); margin-right: var(--base-padding); margin-left: var(--base-padding); } @media only screen and (min-width: 1500px) { .image-slider .swiper-horizontal>.swiper-scrollbar, .image-slider .swiper-scrollbar.swiper-scrollbar-horizontal { margin-right: 0; margin-left: 0; } } .image-slider .swiper-scrollbar-drag { background-color: var(--electric-blue, #0068C5); border-radius: 0; } .row-fluid-wrapper.row-depth-1:has(.applications-slider.base) { overflow: clip; } .applications-slider__header { display: flex; align-items: flex-end; gap: 35px; justify-content: space-between; margin-bottom: 60px; padding-right: var(--base-padding); padding-left: var(--base-padding); } @media only screen and (min-width: 768px) { .applications-slider.base { padding-right: 0; } .applications-slider__body { padding-left: var(--base-padding); } .applications-slider__header { display: flex; align-items: flex-end; gap: 35px; justify-content: space-between; margin-bottom: 60px; padding-right: var(--base-padding); padding-left: var(--base-padding); } .applications-slider__body { position: relative; } .applications-slider__body::after { content: ""; position: absolute; z-index: 5; top: 0; right: 0; height: 100%; width: 125px; background: linear-gradient(270deg, #FFF 0%, rgba(255, 255, 255, 0.00) 100%); } } @media only screen and (min-width: 1440px) { .applications-slider__header { display: flex; align-items: flex-end; gap: 35px; justify-content: space-between; margin-bottom: 60px; } .applications-slider__body { width: 1560px; } } .applications-slider .swiper-slide { border-radius: 30px; overflow: clip; } .applications-slider .swiper-slide { height: auto; } .applications-slider .swiper-slide img { position: absolute; z-index: 1; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; transition: all ease-in-out 0.3s; } .applications-card.active img { transform: scale(1.2); } @media only screen and (min-width: 1080px) { .applications-slider .applications-card.swiper-slide:hover img { transform: scale(1.2); } } .applications-slider .applications-card { position: relative; display: flex; align-items: flex-end; height: 400px; transition: all ease-in-out 0.3s; padding: 48px 32px; cursor: pointer; } @media only screen and (min-width: 560px) { .applications-slider .applications-card { height: 530px; } } .applications-slider .applications-card::after { content: ""; position: absolute; z-index: 3; top: 0; left: 0; height: 100%; width: 100%; opacity: 0.6; background: linear-gradient(180deg, rgba(1, 39, 62, 0.00) 0%, #01273E 100%); transition: all ease-in-out 0.2s; } .applications-card.active::after { opacity: 0.8; background: linear-gradient(180deg, rgba(1, 39, 62, 0.00) 0%, #01273E 75.11%, #01273E 100%); } @media only screen and (min-width: 1080px) { .applications-slider .applications-card:hover::after { opacity: 0.8; background: linear-gradient(180deg, rgba(1, 39, 62, 0.00) 0%, #01273E 75.11%, #01273E 100%); } } .applications-slider .applications-card .applications-card-link { position: absolute; z-index: 6; top: 0; left: 0; height: 100%; width: 100%; } .applications-slider .applications-card .content { position: relative; z-index: 5; color: var(--white); overflow: clip; } .applications-slider .applications-card .content h4 { margin-bottom: 0; transition: all ease-in-out 0.2s; } .applications-card.active .content h4 { text-decoration: underline; } .applications-slider .applications-card .content p { height: 100%; max-height: 0; transition: max-height ease-in-out 0.3s, padding-top ease-in-out 0.3s; padding-top: 0px; overflow: clip; } .applications-card.active .content p { max-height: 300px; padding-top: 20px; } @media only screen and (min-width: 1080px) { .applications-slider .applications-card:hover .content h4 { text-decoration: underline; } .applications-slider .applications-card:hover .content p { max-height: 300px; padding-top: 20px; } } /* slider buttons */ .applications-slider-buttons { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 35px; } .applications-slider-button { cursor: pointer; } .applications-slider__header .applications-slider-buttons { display: none; } .applications-slider__body .applications-slider-buttons { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 35px; } @media only screen and (min-width: 768px) { .applications-slider__header .applications-slider-buttons { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-right: var(--base-padding); } .applications-slider__body .applications-slider-buttons { display: none; } } .applications-slider-button svg { width: 55px; height: 36px; fill: #0068C5; } @media only screen and (min-width: 560px) { .applications-slider-button svg { width: 76px; height: 50px; } } .applications-slider-button svg rect { stroke: var(--white); } .applications-slider-button svg path { stroke: var(--white); } .applications-slider-button.swiper-button-disabled svg { fill: transparent; } .applications-slider-button.swiper-button-disabled svg rect { stroke: #BACAD8; } .applications-slider-button.swiper-button-disabled svg path { stroke: #BACAD8; } .applications-slider-button.applications-slider-next svg { transform: rotate(180deg); } .applications-slider-buttons .swiper-pagination { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; font-size: 20px; line-height: 28px; } @media only screen and (min-width: 560px) { .applications-slider-buttons .swiper-pagination { font-size: 20px; line-height: 28px; } } .applications-card .readmore { position: absolute; z-index: 11; top: 48px; left: 24px; width: 40px; height: 40px; } .applications-card .readmore .plus { display: block; } .applications-card .readmore .minus { display: none; } .applications-card.active .readmore .plus { display: none; } .applications-card.active .readmore .minus { display: block; } @media only screen and (min-width: 1080px) { .applications-card .readmore { display: none; } } .faq .wrapper { gap: 20px; } @media only screen and (min-width: 768px) { .faq .wrapper { gap: 65px; } } .faq__body { display: flex; flex-direction: column; gap: 20px; } .faq-item { padding: 20px 0px; padding-top: 0; border-bottom: 1px solid var(--blueish-grey); background-color: transparent; transition: var(--transition); cursor: pointer; } .faq-item:last-of-type { border-bottom: none; } .faq-item .faq-item__header { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .faq-item .faq-item__header .title, .faq-item .faq-item__header .faq-title { font-size: 20px; font-weight: 400; line-height: 30px; } .faq-item:focus-visible .faq-item__header .faq-readmore { border: 1px solid var(--electric-blue); } .faq-item .faq-item__header .h4 { margin-bottom: 0; } .faq-readmore { position: relative; max-width: 37px; width: 100%; height: 37px; border: 1px solid var(--electric-blue); border-radius: 50%; } .faq-readmore::before, .faq-readmore::after { content: ""; position: absolute; top: 11px; left: 17px; width: 1px; height: 13px; background-color: var(--electric-blue); transition: transform ease-in-out 0.2s; } @media only screen and (min-width: 768px) { .faq-readmore { max-width: 41px; height: 41px; } .faq-readmore::before, .faq-readmore::after { top: 12px; left: 19px; height: 14px; } } .faq-item.active .faq-readmore { background-color: var(--electric-blue); } .faq-readmore::before { transform: rotate(90deg); } .faq-item.active .faq-readmore::before { border: 1px solid var(--white); } .faq-item.active .faq-readmore::after { transform: rotate(90deg); border: 1px solid var(--white); } .faq-item__body { overflow: hidden; height: 0; transition: height 0.3s ease; } .faq-item__body .faq-item-content { padding-top: 20px; } /* modifiers */ .faq.faq--row { gap: 20px; flex-direction: column; } .faq.faq--row .faq__header, .faq.faq--row .faq__body { width: 100%; } @media only screen and (min-width: 768px) { .faq.faq--row .wrapper { flex-direction: row; gap: 120px; } .faq.faq--row .faq__header { max-width: 420px; } } .tabs .wrapper { padding: 48px 24px; border-radius: 30px; background: var(--white, #FFF); } @media only screen and (min-width: 768px) { .tabs .wrapper { padding: 75px; } } .tabs__header .tabs-wrapper { display: none; flex-wrap: wrap; align-items: center; gap: 16px; } .tabs-mobile-select { display: block; } .tabs-select { appearance: none; -webkit-appearance: none; -moz-appearance: none; width: 100%; border: none; padding-bottom: 10px; border-bottom: 1px solid #2475A5; color: var(--dark-blue); background-color: transparent; background-image: url("data:image/svg+xml,%3Csvg width='15' height='9' viewBox='0 0 15 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14.3535 0.353516L7.35352 7.35352L0.353516 0.353515' stroke='%2301273E'/%3E%3C/svg%3E%0A"); background-repeat: no-repeat; background-position: right 12px center; background-size: 12px; } @media only screen and (max-width: 767px) { .tabs-select { font-size: 20px; font-weight: 500; background-size: 20px; } } .tabs-select:hover, .tabs-select:focus { outline: none; border: none; border-bottom: 1px solid #2475A5; background-color: transparent; } @media only screen and (min-width: 768px) { .tabs-mobile-select { display: none; } .tabs__header .tabs-wrapper { display: flex; } } .tab-name { padding: 14px 18px; border-radius: 30px; border: 1px solid var(--blueish-grey, #BACAD8); background: var(--white, #FFF); transition: all ease-in-out 0.2s; font-weight: 500; cursor: pointer; } .tab-name:hover, .tab-name.active { color: var(--white, #FFF); border: 1px solid var(--electric-blue, #0068C5); background: var(--electric-blue, #0068C5); } .tabs__body { margin-top: 48px; display: none; } .tabs__body.active { display: block; } .tab-title { display: block; margin-bottom: 28px; } .tab-pre-text { display: block; margin-bottom: 48px; } .tabs__body ul.tabber-list, .tabs .tabs__body ul.tabber-list:not(.inputs-list) { padding: 0; margin: 0; } .tabs__body ul.tabber-list li { list-style: none; padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid var(--blueish-grey, #BACAD8); } .tabs__body ul.tabber-list li:first-of-type { padding-top: 0px; } .tabs__body ul.tabber-list li:last-of-type { border-bottom: none; padding-bottom: 0px; } .tabs__body ul.tabber-list li p { margin-bottom: 0; } /* tabber faq */ .tabs .tab-faq-wrapper { display: flex; flex-direction: column; gap: 20px; } .tabs .tab-faq-item { padding: 20px 0px; padding-top: 0; border-bottom: 1px solid var(--blueish-grey); background-color: transparent; transition: var(--transition); cursor: pointer; } .tab-faq-item:last-of-type { border-bottom: none; } .tab-faq-item .tab-faq-item__header { display: flex; align-items: center; justify-content: space-between; gap: 40px; } .tab-faq-item:focus-visible .tab-faq-item__header .faq-readmore { border: 1px solid var(--electric-blue); } .tab-faq-title.text-large { margin-bottom: 0; font-weight: 500; } .tab-faq-readmore svg { position: relative; max-width: 20px; width: 20px; height: 10px; } .tab-faq-item.active .tab-faq-readmore svg { transform: rotate(180deg); } .tab-faq-item__body { overflow: hidden; height: 0; padding-top: 0; transition: height 0.3s ease; } .tab-faq-item__body .tab-faq-item-content { padding-top: 36px; max-width: 90%; } .downloads-listing .wrapper { flex-direction: column; gap: 45px } @media only screen and (min-width: 1080px) { .downloads-listing .wrapper { flex-direction: row; gap: 86px } } .downloads-listing__header { max-width: 195px; width: 100%; } .downloads-listing__body { width: 100%; } /* download items */ .downloads-listing__body { display: flex; flex-direction: column; gap: 36px; } .downloads-listing-item { border-bottom: 1px solid rgba(var(--dark-blue-rgb), 0.4); } .downloads-listing-item .downloads-listing-item__header { display: flex; align-items: center; justify-content: space-between; padding-bottom: 36px; gap: 48px; cursor: pointer; } .downloads-listing-item .downloads-listing-item__header svg { min-width: 30px; } .downloads-listing-item .downloads-listing-item__body { overflow: hidden; height: 0; transition: height 0.3s ease; } .downloads-listing-item-wrapper { display: flex; flex-direction: column; gap: 21px; } /* download sub items */ .download-accordion { display: flex; flex-direction: column; gap: 37px; } .downloads-listing-item-title { margin-bottom: 0; } .download-item { border-bottom: 1px solid var(--blueish-grey); padding-bottom: 21px; overflow: clip; } .downloads-listing-item.active .downloads-listing-item__header svg { transform: rotate(180deg); } .download-item:last-of-type { border-bottom: none; } .download-item .download-item__header { display: flex; align-items: center; justify-content: space-between; gap: 40px; cursor: pointer; } .download-item .download-item__header .download-item-title { margin-bottom: 0; } .download-item .download-item__header .download-item-readmore { position: relative; max-width: 37px; width: 100%; height: 37px; border: 1px solid var(--dark-blue); border-radius: 50%; } .download-item .download-item__header .download-item-readmore::before, .download-item .download-item__header .download-item-readmore::after { content: ""; position: absolute; top: 11px; left: 17px; width: 1px; height: 13px; background-color: var(--dark-blue); transition: transform ease-in-out 0.2s; } .download-item.active .download-item__header .download-item-readmore { background-color: var(--dark-blue); } .download-item .download-item__header .download-item-readmore::before { transform: rotate(90deg); } .download-item.active .download-item__header .download-item-readmore::before { border: 1px solid var(--white); } .download-item.active .download-item__header .download-item-readmore::after { transform: rotate(90deg); border: 1px solid var(--white); } @media only screen and (min-width: 768px) { .download-item .download-item__header .download-item-readmore { max-width: 41px; height: 41px; } .download-item .download-item__header .download-item-readmore::before, .download-item .download-item__header .download-item-readmore::after { top: 12px; left: 19px; height: 14px; } } .download-item .download-item__body { overflow: hidden; height: 0; transition: height 0.3s ease; } .download-item .download-item-content-wrapper { border-bottom: 1px solid var(--blueish-grey); padding-bottom: 21px; margin-bottom: 21px; overflow-x: auto; width: 100%; } .download-item .download-item-content-wrapper:last-of-type { margin-bottom: 0; } .download-item .download-item-content-wrapper__inner { width: 100%; min-width: 815px; } .download-item .download-item-content { display: flex; align-items: center; gap: 48px; } .download-item .download-item-content + .download-info { padding-top: 35px; } .download-item .download-item-content-wrapper:first-of-type { padding-top: 48px; } .download-item .download-item-content-wrapper:last-of-type { border-bottom: none; padding-bottom: 0; } .download-item .download-item-content .download-title { margin-bottom: 0; max-width: 45%; width: 100%; min-width: 200px; } .download-item .download-item-content .download-tag { min-width: 65px; } .download-item .download-item-content .download-tag .download-tag-wrapper { display: block; border-radius: 30px; padding: 10px 16px; background-color: var(--blueish-grey); line-height: 1.1; text-align: center; } .download-item .download-item-content .download-date { display: flex; align-items: center; gap: 16px; min-width: 115px; } .download-item .download-item-content .download-file-size { display: flex; align-items: center; gap: 16px; min-width: 115px; } .download-item .download-item-content .download-link { display: flex; align-items: center; gap: 16px; color: var(--orange); margin-left: auto; } .download-item .download-item-content .download-link svg { transition: all ease-in-out 0.3s; } .download-item .download-item-content .download-link:hover svg { transform: translateY(2px); } /* search */ .downloads-listing .search { width: 100%; margin-bottom: 48px; } .downloads-listing .search .search-wrapper { display: flex; padding-bottom: 6px; margin-bottom: 6px; align-items: center; gap: 10px; border-bottom: 1px solid var(--blueish-grey); max-width: 180px; width: 100%; } .downloads-listing .search input { appearance: none; border-radius: 0; background-color: transparent; border: none; width: 100%; } .downloads-listing .search svg { max-width: 15px; width: 100%; height: 15px; } .downloads-listing .search input:focus, .downloads-listing .search input:focus-visible { appearance: none; border-radius: 0; border: none; outline: none; } .downloads-listing .search input::placeholder { color: var(--blue); font-size: 18px; line-height: 24px; } /* filters */ .downloads-listing .filters { height: 100%; padding-bottom: 120px; } .downloads-listing .filter-title { font-weight: 700; margin-bottom: 10px; } .downloads-listing .filters-wrapper { position: sticky; top: 65px; display: flex; flex-direction: column; gap: 14px; } /* pagination */ .downloads-listing .pagination { display: flex; align-items: center; justify-content: center; gap: 5px; margin-bottom: 120px; } .downloads-listing .pagination button { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; outline: none; background-color: transparent; border-radius: 50%; transition: all ease-in-out 0.2s; border: none; font-size: 16px; line-height: 22px; cursor: pointer; } .downloads-listing .pagination button.pagination__btn:disabled { opacity: 0.4; cursor: not-allowed; } .downloads-listing .pagination button:hover, .downloads-listing .pagination button.active { color: var(--white); background-color: var(--orange); } .downloads-listing .pagination button:first-of-type, .downloads-listing .pagination button:last-of-type { background-color: transparent; } .downloads-listing .pagination button:first-of-type:hover, .downloads-listing .pagination button:last-of-type:hover { background-color: transparent; } .distributors__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 35px; margin-bottom: 65px; } @media only screen and (min-width: 600px) { .distributors__header { margin-bottom: 135px; } } .distributors__header .search { max-width: 400px; width: 100%; display: flex; gap: 20px; align-items: center; border-bottom: 1px solid var(--blueish-grey); padding-bottom: 10px; } .distributors__header .search input, .distributors__header .search input:focus, .distributors__header .search input:focus-visible { border: none; outline: none; } .distributors__header .tags { flex-direction: row; align-items: flex-start; } .distributors__body { display: grid; grid-template-columns: 1fr; column-gap: 35px; row-gap: 64px; } @media only screen and (min-width: 720px) { .distributors__body { grid-template-columns: repeat(2, 1fr); column-gap: 80px; row-gap: 120px; } } @media only screen and (min-width: 1080px) { .distributors__body { grid-template-columns: repeat(3, 1fr); } } .distributor-card .subheading { font-size: 20px; line-height: 1; color: var(--orange); margin-bottom: 12px; } .distributor-title { margin-bottom: 24px; } .distributor-info { margin-bottom: 18px; } .distributor-links { display: flex; flex-direction: column; gap: 15px; } .distributor-link { display: flex; align-items: center; gap: 10px; color: var(--dark-blue); } .distributor-link a { text-decoration: underline; } .distributor-link a:hover { text-decoration: underline; color: var(--orange); } /* pagination */ .distributors .pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 5px; margin-top: 120px; } .distributors .pagination button { display: flex; align-items: center; justify-content: center; max-width: 30px; width: 100%; height: 30px; outline: none; background-color: transparent; border-radius: 50%; transition: all ease-in-out 0.2s; border: none; font-size: 16px; line-height: 22px; cursor: pointer; } .distributors .pagination button span { display: inline-flex; } .distributors .pagination button.disabled, .distributors .pagination button:disabled { opacity: 0; cursor: not-allowed; } .distributors .pagination button:hover, .distributors .pagination button.is-active { color: var(--white); background-color: var(--orange); } .distributors .pagination button:first-of-type, .distributors .pagination button:last-of-type { background-color: transparent; } .distributors .pagination button:first-of-type:hover, .distributors .pagination button:last-of-type:hover { background-color: transparent; } .info-cards__body { margin-top: 45px; } .info-card .info-card-image { max-width: 50px; width: 100%; height: 50px; margin-bottom: 34px; } .info-card .info-card-image img { object-fit: contain; width: 100%; height: 100%; } .info-card-number { font-size: 120px; line-height: 1; font-weight: 500; color: var(--orange); margin-bottom: 20px; } /* modifiers */ .info-cards.info-cards--centered .info-card, .info-card.info-card--centered { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .info-cards__body.grid { gap: 48px; } .row-fluid-wrapper.row-depth-1:has(.timeline.base) { overflow: clip; padding-left: 0; padding-right: 0; } .timeline .wrapper { max-width: 100%; padding: 0px; overflow: visible; width: 100%; padding-left: var(--base-padding); padding-right: var(--base-padding); } @media only screen and (min-width: 1080px) { .timeline .wrapper { padding-left: 120px; padding-right: 120px; } } .timeline .timeline__header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; max-width: 1440px; margin: 0 auto; width: 100%; gap: 35px; } .timeline-title h1, .timeline-title h2, .timeline-title h3 { margin-bottom: 0; } .timeline .timeline__body { position: relative; margin-top: 90px; } .timeline .timeline__body::before { content: ""; position: absolute; top: 0; left: -37px; /* offset for padding on container */ height: 4px; width: 120vw; background-color: var(--bluish-grey, #BACAD8); } @media only screen and (min-width: 1080px) { .timeline .timeline__body::before { left: -120px; } } .timeline .timeline__body .timeline__swiper { max-width: 1440px; margin: 0 auto; width: 100%; } .timeline-item { position: relative; padding-top: 60px; } .timeline-item::before { content: ""; position: absolute; top: 0; left: 0; height: 36px; width: 4px; background-color: var(--bluish-grey, #BACAD8); } .timeline-item__title { display: block; color: var(--orange); margin-bottom: 30px; } /* slider buttons */ .timeline-slider-buttons { display: flex; align-items: center; justify-content: space-between; gap: 35px; margin-top: 35px; padding-right: var(--base-padding); } .timeline-slider-button { cursor: pointer; } .timeline-slider-button svg { width: 55px; height: 36px; fill: #0068C5; } @media only screen and (min-width: 560px) { .timeline-slider-buttons { margin-top: 60px; } .timeline-slider-button svg { width: 76px; height: 50px; } } .timeline-slider-button svg rect { stroke: var(--white); } .timeline-slider-button svg path { stroke: var(--white); } .timeline-slider-button.swiper-button-disabled svg { fill: transparent; } .timeline-slider-button.swiper-button-disabled svg rect { stroke: #BACAD8; } .timeline-slider-button.swiper-button-disabled svg path { stroke: #BACAD8; } .timeline-slider-button.timeline-slider-next svg { transform: rotate(180deg); } .timeline-slider-buttons .swiper-pagination { position: relative; top: auto; left: auto; right: auto; bottom: auto; width: auto; height: auto; font-size: 20px; line-height: 28px; } @media only screen and (min-width: 560px) { .timeline-slider-buttons .swiper-pagination { font-size: 20px; line-height: 28px; } } .dnd-section:has(.hero) { overflow: clip; } .row-fluid-wrapper.row-depth-1.row-number-2:has(.hero) { position: relative; } .hero .wrapper { flex-direction: column; gap: 45px } @media only screen and (min-width: 860px) { .hero .wrapper { flex-direction: row; } } @media only screen and (min-width: 1080px) { .hero .wrapper { gap: 220px; } } .hero__header { width: 100%; } .hero__body { position: relative; z-index: 3; display: flex; max-width: 100%; overflow: clip; border-radius: 30px; width: 100%; } .hero__body .media-wrapper { width: 100%; } .hero__body .media-wrapper img { object-fit: cover; width: 100%; height: 100%; } @media only screen and (min-width: 860px) { .hero__header { padding-top: 145px; padding-bottom: 145px; } .hero__body { max-width: 550px; } } .hero .wrapper .bottom-bg-graphic { bottom: -120px; right: -173px; } .hero .wrapper .bottom-bg-graphic img { height: auto; } .hero__body .video-container { width: 100%; } .hero__body .hs-video-widget { width: 100%; } @media only screen and (min-width: 860px) { .hero__body:has(.hs-video-widget) { border-radius: 0; align-items: center; } } /* modifiers */ .hero__body.contained img { object-fit: contain; width: auto; height: auto; } .hero__body.contained.image-pos--left .media-wrapper, .hero__body.contained.image-pos--center .media-wrapper, .hero__body.contained.image-pos--right .media-wrapper { display: flex; } .hero__body.contained.image-pos--left .media-wrapper { justify-content: flex-start; } .hero__body.contained.image-pos--center .media-wrapper { justify-content: center; } .hero__body.contained.image-pos--right .media-wrapper { justify-content: flex-end; } .hero__body.contained.image-pos-vert--top { align-self: flex-start; } .hero__body.contained.image-pos-vert--center { align-self: center; } .hero__body.contained.image-pos-vert--bot { align-self: flex-end; } .base.logo-slider { padding-left: 0; padding-right: 0; } .base.logo-slider .wrapper { max-width: 2000px; } .logo-slider__header { max-width: 1440px; margin: 0 auto; margin-bottom: 55px; padding-left: var(--base-padding); padding-right: var(--base-padding); } .logo-slider__body .swiper-wrapper { display: flex; align-items: center; } .logo-slider__body { position: relative; } .logo-slider__body::before, .logo-slider__body::after { content: ""; position: absolute; z-index: 4; top: 0; width: 100px; height: 100%; } .logo-slider__body::before { left: 0; } .logo-slider__body::after { right: 0; } .logo-slider__body { overflow: hidden; } .logo-track { display: flex; width: max-content; animation: marquee 40s linear infinite; will-change: transform; } .logo-item { flex: 0 0 auto; margin-right: 32px; } @keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } .calculator .wrapper { display: grid; grid-template-columns: 1fr; gap: 24px; } @media (min-width:900px) { .calculator .wrapper { grid-template-columns: 310px 1fr; } } .calculator .sidebar { background: var(--white); border-radius: 30px; padding: 36px; position: static; top: 16px } @media (min-width:900px) { .calculator .sidebar { position: sticky; } } .calculator .muted { margin-bottom: 24px; } .calculator .nav { display: flex; flex-direction: column; gap: 16px } .calculator .nav button { appearance: none; cursor: pointer; text-align: left; border: 1px solid var(--electric-blue); background: var(--white); color: var(--electric-blue); padding: 14px 18px; border-radius: 30px; font-weight: 500; transition: .15s; } .calculator .nav button:hover { border: 1px solid var(--electric-blue); background: var(--electric-blue); color: var(--white); } .calculator .nav button.active { border: 1px solid var(--electric-blue); background: var(--electric-blue); color: var(--white); } .calculator .main { background: var(--white); border-radius: 30px; padding: 36px; } .calculator .h3 { margin-bottom: 36px; } .calculator .section { display: none } .calculator .section.active { display: block } .calculator .rows { display: flex; flex-direction: column; gap: 24px; margin-bottom: 24px; } .calculator .row { display: flex; gap: 8px; align-items: center } .calculator input { appearance: none; outline: none; border: none; padding: 12px 0px; border-bottom: 1px solid #2475A5; width: 100%; } .calculator input::placeholder { color: #BACAD8; } .calculator .btn { appearance: none; cursor: pointer; padding: 24px 36px; border-radius: 40px; border: 1px solid var(--orange); background-color: var(--orange); color: var(--white); font-size: 20px; font-weight: 500; line-height: 26px; } @media (min-width:900px) { .calculator .btn.btn-submit { position: absolute; bottom: 36px; right: 36px; z-index: 12; } } .calculator .btn:hover { border: 1px solid var(--orange); background-color: var(--white); color: var(--orange); } .row:has(.addition-btns) { padding-bottom: 24px; flex-direction: column; align-items: flex-start; gap: 36px; } @media (min-width:600px) { .row:has(.addition-btns) { flex-direction: row; align-items: center; } } #sec-rest .row .btn { margin-bottom: 24px; } @media (min-width:900px) { #sec-rest .row .btn { margin-bottom: 0px; } } .calculator .addition-btns { display: flex; align-items: center; gap: 14px; } .calculator .results { font-size: 24px; font-style: normal; font-weight: 700; line-height: 34px; } @media (min-width:900px) { .row:has(.addition-btns) { padding-bottom: 90px; } .calculator .results { position: absolute; bottom: 50px; } } .calculator .icon { background: none; border: none; padding: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; } .calculator .icon svg { width: 40px; height: 40px; } .calculator .card { font-size: 24px; font-weight: 700; line-height: 34px; } .calculator .grid { display: grid; grid-template-columns: 1fr 1fr; row-gap: 36px; column-gap: 75px; } /* Combo (click-to-open) for frequency */ .calculator .combo { position: relative; max-width: 100%; } .calculator .combo-btn { width: 100%; text-align: left; cursor: pointer; border: none; border-bottom: 1px solid #2475A5; background: transparent; padding: 12px 0px; display: flex; align-items: center; justify-content: space-between; } .calculator .arrow { margin-left: 12px; font-size: 12px; opacity: .7; transition: .2s } .calculator .combo.open .arrow { transform: rotate(180deg) } .calculator .panel { position: absolute; left: 0; right: 0; z-index: 45; margin-top: 28px; background: #fff; border: 1px solid var(--bluish-grey, #BACAD8); border-radius: 10px; max-height: 300px; overflow-y: auto; overflow-x: hidden; display: none; } .calculator .combo.open .panel { display: block } .calculator .opt { padding: 10px 12px; cursor: pointer } .calculator .opt:hover, .calculator .opt[aria-selected="true"] { background: #eef5ff } /* Weighting mode buttons (orange) */ .calculator .wmodes { display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 36px; } .calculator .btn-toggle { appearance: none; cursor: pointer; border: 1px solid var(--bluish-grey, #BACAD8); background: transparent; padding: 14px 18px; border-radius: 30px; font-weight: 500; } .calculator .btn-toggle:hover { border: 1px solid var(--orange); background: var(--orange); color: var(--white); } .calculator .btn-toggle.active { border: 1px solid var(--orange); background: var(--orange); color: var(--white); } @media (max-width:900px) { .calculator .nav { flex-direction: row; flex-wrap: wrap; } .calculator .nav button { text-align: center; flex: 1; } .calculator .grid { grid-template-columns: 1fr; gap: 36px; } }