, etc.) */ :root { --white: #fff; --black: #000; --base-white: #FFFFFF; --base-black: #000000; --gray-25: #FEFEFE; --gray-50: #FCFCFC; --gray-100: #F7F7F7; --gray-200: #F2F2F2; --gray-300: #EBEBEB; --gray-400: #C9C9C9; --gray-500: #ABABAB; --gray-600: #818181; --gray-700: #6D6D6D; --gray-800: #4D4D4D; --gray-900: #2B2B2B; --navy-blue-25: #F3F5FA; --navy-blue-50: #E7EAF4; --navy-blue-100: #C2C9E5; --navy-blue-200: #9AA6D3; --navy-blue-300: #7384C1; --navy-blue-400: #5469B4; --navy-blue-500: #3450A8; --navy-blue-600: #2E489E; --navy-blue-700: #243E93; --navy-blue-800: #1C3587; --navy-blue-900: #0C2471; --ice-blue-25: #F5F7FF; --ice-blue-50: #E7EAF4; --ice-blue-100: #C2C9E5; --ice-blue-200: #B1C1F7; --ice-blue-300: #91A7F2; --ice-blue-400: #7791ED; --ice-blue-500: #5E7BE8; --ice-blue-600: #5771DC; --ice-blue-700: #4D65CF; --ice-blue-800: #465BC3; --ice-blue-900: #3948AD; --royal-blue-25: #F2F3FF; --royal-blue-50: #E7E8FF; --royal-blue-100: #C2C5FE; --royal-blue-200: #95A0FE; --royal-blue-300: #607AFF; --royal-blue-400: #255CFF; --royal-blue-500: #003BFB; --royal-blue-600: #0032EF; --royal-blue-700: #0026E3; --royal-blue-800: #0016D9; --royal-blue-900: #0000BF; --green-25: #F3FBF3; --green-50: #E9F6E9; --green-100: #CBE9C9; --green-200: #AADBA7; --green-300: #88CE83; --green-400: #6FC368; --green-500: #56B84D; --green-600: #4DA844; --green-700: #419639; --green-800: #36852F; --green-900: #20661C; --red-25: #FDEFF1; --red-50: #FDE3E8; --red-100: #FAB8C5; --red-200: #F58B9F; --red-300: #EF5C7A; --red-400: #E9395F; --red-500: #E31846; --red-600: #D31145; --red-700: #BE0942; --red-800: #AB0040; --red-900: #88003C; --yellow-25: #FFFEF5; --yellow-50: #FFFCE5; --yellow-100: #FFF7BE; --yellow-200: #FFF193; --yellow-300: #FFEC67; --yellow-400: #FEE740; --yellow-500: #FCE104; --yellow-600: #FED108; --yellow-700: #FDB800; --yellow-800: #FC9F00; --yellow-900: #FA7300; --alpha-gray-2: rgba(18, 18, 20, 0.02)); --alpha-gray-5: rgba(18, 18, 20, 0.05)); --alpha-gray-10: rgba(18, 18, 20, 0.1)); --alpha-gray-20: rgba(18, 18, 20, 0.2)); --alpha-gray-30: rgba(18, 18, 20, 0.3)); --alpha-gray-40: rgba(18, 18, 20, 0.4)); --alpha-gray-50: rgba(18, 18, 20, 0.5)); --alpha-gray-60: rgba(18, 18, 20, 0.6)); --alpha-gray-70: rgba(18, 18, 20, 0.7)); --alpha-gray-80: rgba(18, 18, 20, 0.8)); --alpha-gray-90: rgba(18, 18, 20, 0.9)); --alpha-primary-2: rgba(12, 36, 113, 0.02)); --alpha-primary-5: rgba(12, 36, 113, 0.05)); --alpha-primary-10: rgba(12, 36, 113, 0.1)); --alpha-primary-20: rgba(12, 36, 113, 0.2)); --alpha-primary-30: rgba(12, 36, 113, 0.3)); --alpha-primary-40: rgba(12, 36, 113, 0.4)); --alpha-primary-50: rgba(12, 36, 113, 0.5)); --alpha-primary-60: rgba(12, 36, 113, 0.6)); --alpha-primary-70: rgba(12, 36, 113, 0.7)); --alpha-primary-80: rgba(12, 36, 113, 0.8)); --alpha-primary-90: rgba(12, 36, 113, 0.9)); --alpha-white-2: rgba(255, 255, 255, 0.02)); --alpha-white-5: rgba(255, 255, 255, 0.05)); --alpha-white-10: rgba(255, 255, 255, 0.1)); --alpha-white-20: rgba(255, 255, 255, 0.2)); --alpha-white-30: rgba(255, 255, 255, 0.3)); --alpha-white-40: rgba(255, 255, 255, 0.4)); --alpha-white-50: rgba(255, 255, 255, 0.5)); --alpha-white-60: rgba(255, 255, 255, 0.6)); --alpha-white-70: rgba(255, 255, 255, 0.7)); --alpha-white-80: rgba(255, 255, 255, 0.8)); --alpha-white-90: rgba(255, 255, 255, 0.9)); --eyebrow-primary: #2B2B2B; --eyebrow-primary-dark: #E7EAF4; --body-primary: rgba(12, 36, 113, 0.80); --body-primary-dark: rgba(255, 255, 255, 0.80); --heading-primary: #0C2471; --heading-primary-dark: #fff; --heading-highlight: #1A295F; --heading-highlight-dark: #fff; } .text-white {color: var(--white, #fff)}; .bg-white {background-color: var(--white, #fff)}; .text-black {color: var(--black, #000)}; .bg-white {background-color: var(--black, #000)}; .text-base-white { color: var(--base-white); } .bg-base-white { background-color: var(--base-white); } .text-base-black { color: var(--base-black); } .bg-base-black { background-color: var(--base-black); } .text-gray-25 { color: var(--gray-25); } .bg-gray-25 { background-color: var(--gray-25); } .text-gray-50 { color: var(--gray-50); } .bg-gray-50 { background-color: var(--gray-50); } .text-gray-100 { color: var(--gray-100); } .bg-gray-100 { background-color: var(--gray-100); } .text-gray-200 { color: var(--gray-200); } .bg-gray-200 { background-color: var(--gray-200); } .text-gray-300 { color: var(--gray-300); } .bg-gray-300 { background-color: var(--gray-300); } .text-gray-400 { color: var(--gray-400); } .bg-gray-400 { background-color: var(--gray-400); } .text-gray-500 { color: var(--gray-500); } .bg-gray-500 { background-color: var(--gray-500); } .text-gray-600 { color: var(--gray-600); } .bg-gray-600 { background-color: var(--gray-600); } .text-gray-700 { color: var(--gray-700); } .bg-gray-700 { background-color: var(--gray-700); } .text-gray-800 { color: var(--gray-800); } .bg-gray-800 { background-color: var(--gray-800); } .text-gray-900 { color: var(--gray-900); } .bg-gray-900 { background-color: var(--gray-900); } .text-navy-blue-25 { color: var(--navy-blue-25); } .bg-navy-blue-25 { background-color: var(--navy-blue-25); } .text-navy-blue-50 { color: var(--navy-blue-50); } .bg-navy-blue-50 { background-color: var(--navy-blue-50); } .text-navy-blue-100 { color: var(--navy-blue-100); } .bg-navy-blue-100 { background-color: var(--navy-blue-100); } .text-navy-blue-200 { color: var(--navy-blue-200); } .bg-navy-blue-200 { background-color: var(--navy-blue-200); } .text-navy-blue-300 { color: var(--navy-blue-300); } .bg-navy-blue-300 { background-color: var(--navy-blue-300); } .text-navy-blue-400 { color: var(--navy-blue-400); } .bg-navy-blue-400 { background-color: var(--navy-blue-400); } .text-navy-blue-500 { color: var(--navy-blue-500); } .bg-navy-blue-500 { background-color: var(--navy-blue-500); } .text-navy-blue-600 { color: var(--navy-blue-600); } .bg-navy-blue-600 { background-color: var(--navy-blue-600); } .text-navy-blue-700 { color: var(--navy-blue-700); } .bg-navy-blue-700 { background-color: var(--navy-blue-700); } .text-navy-blue-800 { color: var(--navy-blue-800); } .bg-navy-blue-800 { background-color: var(--navy-blue-800); } .text-navy-blue-900 { color: var(--navy-blue-900); } .bg-navy-blue-900 { background-color: var(--navy-blue-900); } .text-ice-blue-25 { color: var(--ice-blue-25); } .bg-ice-blue-25 { background-color: var(--ice-blue-25); } .text-ice-blue-50 { color: var(--ice-blue-50); } .bg-ice-blue-50 { background-color: var(--ice-blue-50); } .text-ice-blue-100 { color: var(--ice-blue-100); } .bg-ice-blue-100 { background-color: var(--ice-blue-100); } .text-ice-blue-200 { color: var(--ice-blue-200); } .bg-ice-blue-200 { background-color: var(--ice-blue-200); } .text-ice-blue-300 { color: var(--ice-blue-300); } .bg-ice-blue-300 { background-color: var(--ice-blue-300); } .text-ice-blue-400 { color: var(--ice-blue-400); } .bg-ice-blue-400 { background-color: var(--ice-blue-400); } .text-ice-blue-500 { color: var(--ice-blue-500); } .bg-ice-blue-500 { background-color: var(--ice-blue-500); } .text-ice-blue-600 { color: var(--ice-blue-600); } .bg-ice-blue-600 { background-color: var(--ice-blue-600); } .text-ice-blue-700 { color: var(--ice-blue-700); } .bg-ice-blue-700 { background-color: var(--ice-blue-700); } .text-ice-blue-800 { color: var(--ice-blue-800); } .bg-ice-blue-800 { background-color: var(--ice-blue-800); } .text-ice-blue-900 { color: var(--ice-blue-900); } .bg-ice-blue-900 { background-color: var(--ice-blue-900); } .text-royal-blue-25 { color: var(--royal-blue-25); } .bg-royal-blue-25 { background-color: var(--royal-blue-25); } .text-royal-blue-50 { color: var(--royal-blue-50); } .bg-royal-blue-50 { background-color: var(--royal-blue-50); } .text-royal-blue-100 { color: var(--royal-blue-100); } .bg-royal-blue-100 { background-color: var(--royal-blue-100); } .text-royal-blue-200 { color: var(--royal-blue-200); } .bg-royal-blue-200 { background-color: var(--royal-blue-200); } .text-royal-blue-300 { color: var(--royal-blue-300); } .bg-royal-blue-300 { background-color: var(--royal-blue-300); } .text-royal-blue-400 { color: var(--royal-blue-400); } .bg-royal-blue-400 { background-color: var(--royal-blue-400); } .text-royal-blue-500 { color: var(--royal-blue-500); } .bg-royal-blue-500 { background-color: var(--royal-blue-500); } .text-royal-blue-600 { color: var(--royal-blue-600); } .bg-royal-blue-600 { background-color: var(--royal-blue-600); } .text-royal-blue-700 { color: var(--royal-blue-700); } .bg-royal-blue-700 { background-color: var(--royal-blue-700); } .text-royal-blue-800 { color: var(--royal-blue-800); } .bg-royal-blue-800 { background-color: var(--royal-blue-800); } .text-royal-blue-900 { color: var(--royal-blue-900); } .bg-royal-blue-900 { background-color: var(--royal-blue-900); } .text-green-25 { color: var(--green-25); } .bg-green-25 { background-color: var(--green-25); } .text-green-50 { color: var(--green-50); } .bg-green-50 { background-color: var(--green-50); } .text-green-100 { color: var(--green-100); } .bg-green-100 { background-color: var(--green-100); } .text-green-200 { color: var(--green-200); } .bg-green-200 { background-color: var(--green-200); } .text-green-300 { color: var(--green-300); } .bg-green-300 { background-color: var(--green-300); } .text-green-400 { color: var(--green-400); } .bg-green-400 { background-color: var(--green-400); } .text-green-500 { color: var(--green-500); } .bg-green-500 { background-color: var(--green-500); } .text-green-600 { color: var(--green-600); } .bg-green-600 { background-color: var(--green-600); } .text-green-700 { color: var(--green-700); } .bg-green-700 { background-color: var(--green-700); } .text-green-800 { color: var(--green-800); } .bg-green-800 { background-color: var(--green-800); } .text-green-900 { color: var(--green-900); } .bg-green-900 { background-color: var(--green-900); } .text-red-25 { color: var(--red-25); } .bg-red-25 { background-color: var(--red-25); } .text-red-50 { color: var(--red-50); } .bg-red-50 { background-color: var(--red-50); } .text-red-100 { color: var(--red-100); } .bg-red-100 { background-color: var(--red-100); } .text-red-200 { color: var(--red-200); } .bg-red-200 { background-color: var(--red-200); } .text-red-300 { color: var(--red-300); } .bg-red-300 { background-color: var(--red-300); } .text-red-400 { color: var(--red-400); } .bg-red-400 { background-color: var(--red-400); } .text-red-500 { color: var(--red-500); } .bg-red-500 { background-color: var(--red-500); } .text-red-600 { color: var(--red-600); } .bg-red-600 { background-color: var(--red-600); } .text-red-700 { color: var(--red-700); } .bg-red-700 { background-color: var(--red-700); } .text-red-800 { color: var(--red-800); } .bg-red-800 { background-color: var(--red-800); } .text-red-900 { color: var(--red-900); } .bg-red-900 { background-color: var(--red-900); } .text-yellow-25 { color: var(--yellow-25); } .bg-yellow-25 { background-color: var(--yellow-25); } .text-yellow-50 { color: var(--yellow-50); } .bg-yellow-50 { background-color: var(--yellow-50); } .text-yellow-100 { color: var(--yellow-100); } .bg-yellow-100 { background-color: var(--yellow-100); } .text-yellow-200 { color: var(--yellow-200); } .bg-yellow-200 { background-color: var(--yellow-200); } .text-yellow-300 { color: var(--yellow-300); } .bg-yellow-300 { background-color: var(--yellow-300); } .text-yellow-400 { color: var(--yellow-400); } .bg-yellow-400 { background-color: var(--yellow-400); } .text-yellow-500 { color: var(--yellow-500); } .bg-yellow-500 { background-color: var(--yellow-500); } .text-yellow-600 { color: var(--yellow-600); } .bg-yellow-600 { background-color: var(--yellow-600); } .text-yellow-700 { color: var(--yellow-700); } .bg-yellow-700 { background-color: var(--yellow-700); } .text-yellow-800 { color: var(--yellow-800); } .bg-yellow-800 { background-color: var(--yellow-800); } .text-yellow-900 { color: var(--yellow-900); } .bg-yellow-900 { background-color: var(--yellow-900); } .text-alpha-gray-2 { color: var(--alpha-gray-2); } .bg-alpha-gray-2 { background-color: var(--alpha-gray-2); } .text-alpha-gray-5 { color: var(--alpha-gray-5); } .bg-alpha-gray-5 { background-color: var(--alpha-gray-5); } .text-alpha-gray-10 { color: var(--alpha-gray-10); } .bg-alpha-gray-10 { background-color: var(--alpha-gray-10); } .text-alpha-gray-20 { color: var(--alpha-gray-20); } .bg-alpha-gray-20 { background-color: var(--alpha-gray-20); } .text-alpha-gray-30 { color: var(--alpha-gray-30); } .bg-alpha-gray-30 { background-color: var(--alpha-gray-30); } .text-alpha-gray-40 { color: var(--alpha-gray-40); } .bg-alpha-gray-40 { background-color: var(--alpha-gray-40); } .text-alpha-gray-50 { color: var(--alpha-gray-50); } .bg-alpha-gray-50 { background-color: var(--alpha-gray-50); } .text-alpha-gray-60 { color: var(--alpha-gray-60); } .bg-alpha-gray-60 { background-color: var(--alpha-gray-60); } .text-alpha-gray-70 { color: var(--alpha-gray-70); } .bg-alpha-gray-70 { background-color: var(--alpha-gray-70); } .text-alpha-gray-80 { color: var(--alpha-gray-80); } .bg-alpha-gray-80 { background-color: var(--alpha-gray-80); } .text-alpha-gray-90 { color: var(--alpha-gray-90); } .bg-alpha-gray-90 { background-color: var(--alpha-gray-90); } .text-alpha-primary-2 { color: var(--alpha-primary-2); } .bg-alpha-primary-2 { background-color: var(--alpha-primary-2); } .text-alpha-primary-5 { color: var(--alpha-primary-5); } .bg-alpha-primary-5 { background-color: var(--alpha-primary-5); } .text-alpha-primary-10 { color: var(--alpha-primary-10); } .bg-alpha-primary-10 { background-color: var(--alpha-primary-10); } .text-alpha-primary-20 { color: var(--alpha-primary-20); } .bg-alpha-primary-20 { background-color: var(--alpha-primary-20); } .text-alpha-primary-30 { color: var(--alpha-primary-30); } .bg-alpha-primary-30 { background-color: var(--alpha-primary-30); } .text-alpha-primary-40 { color: var(--alpha-primary-40); } .bg-alpha-primary-40 { background-color: var(--alpha-primary-40); } .text-alpha-primary-50 { color: var(--alpha-primary-50); } .bg-alpha-primary-50 { background-color: var(--alpha-primary-50); } .text-alpha-primary-60 { color: var(--alpha-primary-60); } .bg-alpha-primary-60 { background-color: var(--alpha-primary-60); } .text-alpha-primary-70 { color: var(--alpha-primary-70); } .bg-alpha-primary-70 { background-color: var(--alpha-primary-70); } .text-alpha-primary-80 { color: var(--alpha-primary-80); } .bg-alpha-primary-80 { background-color: var(--alpha-primary-80); } .text-alpha-primary-90 { color: var(--alpha-primary-90); } .bg-alpha-primary-90 { background-color: var(--alpha-primary-90); } .text-alpha-white-2 { color: var(--alpha-white-2); } .bg-alpha-white-2 { background-color: var(--alpha-white-2); } .text-alpha-white-5 { color: var(--alpha-white-5); } .bg-alpha-white-5 { background-color: var(--alpha-white-5); } .text-alpha-white-10 { color: var(--alpha-white-10); } .bg-alpha-white-10 { background-color: var(--alpha-white-10); } .text-alpha-white-20 { color: var(--alpha-white-20); } .bg-alpha-white-20 { background-color: var(--alpha-white-20); } .text-alpha-white-30 { color: var(--alpha-white-30); } .bg-alpha-white-30 { background-color: var(--alpha-white-30); } .text-alpha-white-40 { color: var(--alpha-white-40); } .bg-alpha-white-40 { background-color: var(--alpha-white-40); } .text-alpha-white-50 { color: var(--alpha-white-50); } .bg-alpha-white-50 { background-color: var(--alpha-white-50); } .text-alpha-white-60 { color: var(--alpha-white-60); } .bg-alpha-white-60 { background-color: var(--alpha-white-60); } .text-alpha-white-70 { color: var(--alpha-white-70); } .bg-alpha-white-70 { background-color: var(--alpha-white-70); } .text-alpha-white-80 { color: var(--alpha-white-80); } .bg-alpha-white-80 { background-color: var(--alpha-white-80); } .text-alpha-white-90 { color: var(--alpha-white-90); } .bg-alpha-white-90 { background-color: var(--alpha-white-90); } .text-eyebrow-primary { color: var(--eyebrow-primary); } .bg-eyebrow-primary { background-color: var(--eyebrow-primary); } .text-eyebrow-primary-dark { color: var(--eyebrow-primary-dark); } .bg-eyebrow-primary-dark { background-color: var(--eyebrow-primary-dark); } .text-body-primary { color: var(--body-primary); } .bg-body-primary { background-color: var(--body-primary); } .text-body-primary-dark { color: var(--body-primary-dark); } .bg-body-primary-dark { background-color: var(--body-primary-dark); } .text-heading-primary { color: var(--heading-primary); } .bg-heading-primary { background-color: var(--heading-primary); } .text-heading-primary-dark { color: var(--heading-primary-dark); } .bg-heading-primary-dark { background-color: var(--heading-primary-dark); } .text-heading-highlight { color: var(--heading-highlight); } .bg-heading-highlight { background-color: var(--heading-highlight); } .text-heading-highlight-dark { color: var(--heading-highlight-dark); } .bg-heading-highlight-dark { background-color: var(--heading-highlight-dark); } @font-face { font-family: 'Instrument Sans'; src: url('https://www.sonicu.com/hubfs/Fonts/Instrument%20Sans/InstrumentSans-VariableFont_wdth%2cwght.ttf') format('ttf'); font-style: normal; } @font-face { font-family: 'DM Sans'; src: url('https://www.sonicu.com/hubfs/Fonts/DM%20Sans/DMSans-VariableFont_opsz%2cwght.ttf') format('ttf'); font-style: normal; } @font-face { font-family: 'DM Mono'; src: url('https://www.sonicu.com/hubfs/Fonts/DM%20Mono/DMMono-Medium.ttf') format('ttf'); font-style: normal; font-weight: medium; } :root { --primary-font: 'Instrument Sans', sans-serif; --secondary-font: 'DM Sans', sans-serif; --tertiary-font: 'DM Mono', sans-serif; --inter-font: 'Inter', sans-serif; --font-size-eyebrow-sm: 'font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;'; --font-size-text-xs: 'font-size: 12px; line-height: 150%; letter-spacing: normal;'; --font-size-text-sm: 'font-size: 14px; line-height: 150%; letter-spacing: normal;'; --font-size-text-md: 'font-size: 16px; line-height: 150%; letter-spacing: normal;'; --font-size-text-lg: 'font-size: 18px; line-height: 150%; letter-spacing: normal;'; --font-size-text-xl: 'font-size: 20px; line-height: 150%; letter-spacing: normal;'; --font-size-display-xs: 'font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;'; --font-size-display-sm: 'font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;'; --font-size-display-md: 'font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;'; --font-size-display-lg: 'font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;'; --font-size-display-xl: 'font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;'; --font-size-display-2xl: 'font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;'; --font-size-display-3xl: 'font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;'; --font-size-display-4xl: 'font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;'; } .font-instrument { font-family: var(--primary-font); } .font-dm-sans { font-family: var(--secondary-font); } .font-inter { font-family: var(--inter-font); } .font-dm-mono { font-family: var(--tertiary-font); } /* Macro call with no prefixes base style classes */ .text-eyebrow-sm, .text-eyebrow-sm > * { font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;} .text-text-xs, .text-text-xs > * { font-size: 12px; line-height: 150%; letter-spacing: normal;} .text-text-sm, .text-text-sm > * { font-size: 14px; line-height: 150%; letter-spacing: normal;} .text-text-md, .text-text-md > * { font-size: 16px; line-height: 150%; letter-spacing: normal;} .text-text-lg, .text-text-lg > * { font-size: 18px; line-height: 150%; letter-spacing: normal;} .text-text-xl, .text-text-xl > * { font-size: 20px; line-height: 150%; letter-spacing: normal;} .text-display-xs, .text-display-xs > * { font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .text-display-sm, .text-display-sm > * { font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .text-display-md, .text-display-md > * { font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;} .text-display-lg, .text-display-lg > * { font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;} .text-display-xl, .text-display-xl > * { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;} .text-display-2xl, .text-display-2xl > * { font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;} .text-display-3xl, .text-display-3xl > * { font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .text-display-4xl, .text-display-4xl > * { font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} /* Breakpoint specific classes */ @media screen and (min-width: 640px) { .sm-text-eyebrow-sm, .sm-text-eyebrow-sm > * { font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;} .sm-text-text-xs, .sm-text-text-xs > * { font-size: 12px; line-height: 150%; letter-spacing: normal;} .sm-text-text-sm, .sm-text-text-sm > * { font-size: 14px; line-height: 150%; letter-spacing: normal;} .sm-text-text-md, .sm-text-text-md > * { font-size: 16px; line-height: 150%; letter-spacing: normal;} .sm-text-text-lg, .sm-text-text-lg > * { font-size: 18px; line-height: 150%; letter-spacing: normal;} .sm-text-text-xl, .sm-text-text-xl > * { font-size: 20px; line-height: 150%; letter-spacing: normal;} .sm-text-display-xs, .sm-text-display-xs > * { font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .sm-text-display-sm, .sm-text-display-sm > * { font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .sm-text-display-md, .sm-text-display-md > * { font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;} .sm-text-display-lg, .sm-text-display-lg > * { font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;} .sm-text-display-xl, .sm-text-display-xl > * { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;} .sm-text-display-2xl, .sm-text-display-2xl > * { font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;} .sm-text-display-3xl, .sm-text-display-3xl > * { font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .sm-text-display-4xl, .sm-text-display-4xl > * { font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} } @media screen and (min-width: 768px) { .md-text-eyebrow-sm, .md-text-eyebrow-sm > * { font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;} .md-text-text-xs, .md-text-text-xs > * { font-size: 12px; line-height: 150%; letter-spacing: normal;} .md-text-text-sm, .md-text-text-sm > * { font-size: 14px; line-height: 150%; letter-spacing: normal;} .md-text-text-md, .md-text-text-md > * { font-size: 16px; line-height: 150%; letter-spacing: normal;} .md-text-text-lg, .md-text-text-lg > * { font-size: 18px; line-height: 150%; letter-spacing: normal;} .md-text-text-xl, .md-text-text-xl > * { font-size: 20px; line-height: 150%; letter-spacing: normal;} .md-text-display-xs, .md-text-display-xs > * { font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .md-text-display-sm, .md-text-display-sm > * { font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .md-text-display-md, .md-text-display-md > * { font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;} .md-text-display-lg, .md-text-display-lg > * { font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;} .md-text-display-xl, .md-text-display-xl > * { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;} .md-text-display-2xl, .md-text-display-2xl > * { font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;} .md-text-display-3xl, .md-text-display-3xl > * { font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .md-text-display-4xl, .md-text-display-4xl > * { font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} } @media screen and (min-width: 1024px) { .lg-text-eyebrow-sm, .lg-text-eyebrow-sm > * { font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;} .lg-text-text-xs, .lg-text-text-xs > * { font-size: 12px; line-height: 150%; letter-spacing: normal;} .lg-text-text-sm, .lg-text-text-sm > * { font-size: 14px; line-height: 150%; letter-spacing: normal;} .lg-text-text-md, .lg-text-text-md > * { font-size: 16px; line-height: 150%; letter-spacing: normal;} .lg-text-text-lg, .lg-text-text-lg > * { font-size: 18px; line-height: 150%; letter-spacing: normal;} .lg-text-text-xl, .lg-text-text-xl > * { font-size: 20px; line-height: 150%; letter-spacing: normal;} .lg-text-display-xs, .lg-text-display-xs > * { font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .lg-text-display-sm, .lg-text-display-sm > * { font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .lg-text-display-md, .lg-text-display-md > * { font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;} .lg-text-display-lg, .lg-text-display-lg > * { font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;} .lg-text-display-xl, .lg-text-display-xl > * { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;} .lg-text-display-2xl, .lg-text-display-2xl > * { font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;} .lg-text-display-3xl, .lg-text-display-3xl > * { font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .lg-text-display-4xl, .lg-text-display-4xl > * { font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} } @media screen and (min-width: 1280px) { .xl-text-eyebrow-sm, .xl-text-eyebrow-sm > * { font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;} .xl-text-text-xs, .xl-text-text-xs > * { font-size: 12px; line-height: 150%; letter-spacing: normal;} .xl-text-text-sm, .xl-text-text-sm > * { font-size: 14px; line-height: 150%; letter-spacing: normal;} .xl-text-text-md, .xl-text-text-md > * { font-size: 16px; line-height: 150%; letter-spacing: normal;} .xl-text-text-lg, .xl-text-text-lg > * { font-size: 18px; line-height: 150%; letter-spacing: normal;} .xl-text-text-xl, .xl-text-text-xl > * { font-size: 20px; line-height: 150%; letter-spacing: normal;} .xl-text-display-xs, .xl-text-display-xs > * { font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .xl-text-display-sm, .xl-text-display-sm > * { font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .xl-text-display-md, .xl-text-display-md > * { font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;} .xl-text-display-lg, .xl-text-display-lg > * { font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;} .xl-text-display-xl, .xl-text-display-xl > * { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;} .xl-text-display-2xl, .xl-text-display-2xl > * { font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;} .xl-text-display-3xl, .xl-text-display-3xl > * { font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .xl-text-display-4xl, .xl-text-display-4xl > * { font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} } @media screen and (min-width: 1536px) { .xxl-text-eyebrow-sm, .xxl-text-eyebrow-sm > * { font-size: 14px; line-height: 128%; font-weight: 500; letter-spacing: normal; font-family: DM Mono, sans-serif;} .xxl-text-text-xs, .xxl-text-text-xs > * { font-size: 12px; line-height: 150%; letter-spacing: normal;} .xxl-text-text-sm, .xxl-text-text-sm > * { font-size: 14px; line-height: 150%; letter-spacing: normal;} .xxl-text-text-md, .xxl-text-text-md > * { font-size: 16px; line-height: 150%; letter-spacing: normal;} .xxl-text-text-lg, .xxl-text-text-lg > * { font-size: 18px; line-height: 150%; letter-spacing: normal;} .xxl-text-text-xl, .xxl-text-text-xl > * { font-size: 20px; line-height: 150%; letter-spacing: normal;} .xxl-text-display-xs, .xxl-text-display-xs > * { font-size: 24px; line-height: 130%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .xxl-text-display-sm, .xxl-text-display-sm > * { font-size: 30px; line-height: 125%; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .xxl-text-display-md, .xxl-text-display-md > * { font-size: 36px; line-height: 120%; letter-spacing: -0.72px; font-family: Instrument Sans, sans-serif;} .xxl-text-display-lg, .xxl-text-display-lg > * { font-size: 48px; line-height: 125%; letter-spacing: -0.96px; font-family: Instrument Sans, sans-serif;} .xxl-text-display-xl, .xxl-text-display-xl > * { font-size: 60px; line-height: 120%; letter-spacing: -1.2px; font-family: Instrument Sans, sans-serif;} .xxl-text-display-2xl, .xxl-text-display-2xl > * { font-size: 72px; line-height: 125%; letter-spacing: -1.44px; font-family: Instrument Sans, sans-serif;} .xxl-text-display-3xl, .xxl-text-display-3xl > * { font-size: 84px; line-height: 105px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} .xxl-text-display-4xl, .xxl-text-display-4xl > * { font-size: 112px; line-height: 140px; letter-spacing: -0.02em; font-family: Instrument Sans, sans-serif;} } /* Font Weights */ .weight-thin, .thin { font-weight: 300; } .weight-regular, .regular { font-weight: 400; } .weight-medium, .medium { font-weight: 500; } .weight-semibold, .semibold { font-weight: 600; } .weight-bold, .bold { font-weight: 700; } /* The overflow-wrap is meant to prevent long/large words from breaking the mobile responsiveness of a page (e.g. horizontal scrolling). It is preferred to reduce font sizes on mobile to address this, with this CSS specifically helping with extreme scenarios where a reduction in font size is not possible. */ body { color: var(--body-primary, #3B5497); font-family: var(--secondary-font); font-size: 16px; line-height: 150%; font-weight: 400; overflow-wrap: break-word; } /* Handles word breaking for a few specific languages which handle breaks in words differently. If your content is not translated into these languages, you can safely remove this. */ html[lang^="ja"] body, html[lang^="zh"] body, html[lang^="ko"] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Headings */ h1, h2, h3, h4, h5, h6 { /* color: var(--heading-primary, #1A295F); */ font-weight: 500; margin: 0 0 1.4rem; } /* Paragraphs */ p { margin: 0 0 1.4rem; } /* Anchors */ a { cursor: pointer; text-decoration: underline; } a:hover { text-decoration: underline; } p a, p a:visited, span a, span a:visited, .rich-text a, .rich-text a:visited { color: var(--blue-600, #0167B0); } p a:hover, span a:hover, .rich-text a:hover { color: var(--navy-900, #1A295F); } /* Code blocks */ pre { overflow: auto; } code { vertical-align: bottom; } /* Blockquotes */ blockquote { border-left: 2px solid; margin: 0 0 1.4rem; padding-left: 0.7rem; } /* Horizontal rules */ hr { border: none; border-bottom: 1px solid #CCC; } /* Image alt text */ img { font-size: 0.583rem; word-break: normal; } .line-clamp-3 { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .uppercase { text-transform: uppercase; } .decoration-none { text-decoration: none; } /* Form styles */ /* * To use, wrap form hubl snippet with a div using the following, .form-container * * Can be updated to include dark-theme items with a .dark-theme override class * */ :root { --fontFamily: var(--secondary-font, 'DM Sans'); --labelColor: var(--gray-600, #818181); --inputColor: var(--gray-900, #2B2B2B); --inputBg: var(--base-white, #fff); --errorBorderColor: var(--red-600, #D31145); --errorColor: var(--red-600, #D31145); --placeholderColor: var(--gray-600, #818181); /* --emailInputIcon: url('needs%20url***%20/Icons/envelope.svg'); */ } .form-container { border-radius: 4px; background: var(--base-white); border: 8px solid rgba(255, 255, 255, .6); border-radius: 4px; padding: 24px; box-shadow: 0 24px 48px -12px rgba(77, 77, 77, 0.18); } .form-container form .hs-form-field { margin-bottom: 16px; } .form-container form .hs-fieldtype-textarea { margin-bottom: 24px; } .form-container form label, .form-container .hs-custom-style .hs-form-required { width: max-content; line-height: 1.5; color: var(--gray-600); padding: 0; font-family: 'DM Sans', sans-serif; font-weight: 500; text-align: left; float: unset; } .form-container form .form-columns-1 .input, .form-container form .form-columns-2 .input, .form-container .hs-custom-style .input { margin-inline: 0 !important; border-radius: 4px; } .form-container form .hs-fieldtype-select label { color: var(--navy-blue-500, #3450A8); } .form-container form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M5 7.5L10 12.5L15 7.5' stroke='%233450A8' stroke-width='1.66667' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 20px 20px; cursor: pointer; /* background: url('needs%20url***%20/Icons/CaretDown.svg') calc(100% - 14px) 50%/16px 16px no-repeat; */ } .input select option { color: var(--navy-blue-500, #3450A8); font-size: 14px; } .input select option:hover { background-color: var(--navy-blue-25, #F3F5FA); } /* Input styles */ .form-container form .input input:not([type=checkbox]):not([type=radio]) , .form-container form select, .form-container form textarea { color: var(--gray-900, #2B2B2B); display: block; width: 100% !important; min-height: 40px !important; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 400; line-height: 150%; letter-spacing: 0em; margin-top: 6px; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--navy-blue-100, #C2C9E5); background-color: var(--base-white, #fff); transition-property: background-color, box-shadow, border-radius; transition-timing-function: ease-in-out; transition-duration: 300ms; box-shadow: 0 1px 2px 0 rgba(77, 77, 77, 0.05); &:hover, &:focus, &:focus-visible { background-color: var(--white, #fff); outline: unset; } &:focus, &:focus-visible { background-color: var(--white, #fff); border-color: var(--navy-blue-300, #7384C1); box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--royal-blue-400, #255CFF) inset; outline: unset; } } .form-container form .hs-fieldtype-intl-phone.hs-input select, .form-container fieldset.form-columns-1 .hs-fieldtype-intl-phone { width: 100% !important; } .hs-fieldtype-intl-phone.hs-input::after { display: none !important; } /* Disabled input styles */ .form-container form .input input[disabled]:not([type=checkbox]):not([type=radio]) , .form-container form select[disabled], .form-container form textarea[disabled] { border: 1px solid var(--navy-blue-100, #C2C9E5); background: var(--gray-50, #FCFCFC); box-shadow: 0px 1px 2px 0px rgba(77, 77, 77, 0.05); pointer-events: none; user-select: none; } .form-container form input::placeholder, .form-container form select.is-placeholder, .form-container form textarea::placeholder, .form-container .hs-custom-style input::placeholder, .form-container .hs-custom-style select.is-placeholder, .form-container .hs-custom-style textarea::placeholder{ color: var(--placeholderColor); opacity: 1; } /* .form-container form .input input[type="email"] { padding-left: 44px !important; } */ /* .form-container form .input:has(> input[type="email"]) { position: relative; */ /* email icon */ /* &:before { position: absolute; content: ''; inset: 50% auto auto 12px; width: 24px; height: 24px; background-image: var(--emailInputIcon); background-size: contain; background-repeat: no-repeat; transform: translateY(-50%); } */ /* } */ .form-container form textarea { resize: vertical; padding: 12px 14px; } .form-container form fieldset { max-width: 100% !important; } /* Inputs - checkbox/radio */ .form-container form .inputs-list { margin: 0; padding: 0; list-style: none; } .form-container form .inputs-list > li { display: block; margin: 0.7rem 0; } .form-container form .inputs-list label { font-size: 14px; font-weight: 500; line-height: 142.857%; } .form-container form .inputs-list input, .form-container form .inputs-list span { vertical-align: middle; cursor: pointer; padding-left: 24px; } .form-container form input[type=checkbox], .form-container form input[type=radio] { cursor: pointer; margin-right: 0.35rem; } /* Help Text */ .form-container legend { font-family: 'DM Sans', sans-serif; font-size: 14px; font-style: normal; font-weight: 500; line-height: 150%; margin-bottom: 6px; color: var(--gray-600); } /* Error styles */ .form-container .hs-input.invalid.error { border-color: var(--errorBorderColor) !important; &:hover, &:focus, &:focus-visible { border-color: var(--errorBorderColor) !important; box-shadow: 0px 8px 8px -4px rgba(240, 68, 56, 0.03), 0px 20px 24px -4px rgba(211, 17, 69, 0.10), 0px 0px 0px 1px var(--red-600, #D31145) !important; } } .form-container form .input.invalid.error input:not([type=checkbox]):not([type=radio]) , .form-container form select.invalid.error, .form-container form textarea.invalid.error { color: var(--gray-900, #2B2B2B); display: block; width: 100% !important; min-height: 40px !important; font-family: 'DM Sans', sans-serif; font-size: 16px; font-weight: 300; line-height: 150%; letter-spacing: 0em; background-color: var(--base-white, #FFF); padding: 8px 14px; border-radius: 8px; border: 2px solid #ebebeb; transition-property: background-color, box-shadow, border-radius; transition-timing-function: ease-in-out; transition-duration: 300ms; &:hover, &:focus, &:focus-visible { border-color: var(--errorBorderColor) !important; box-shadow: 0px 8px 8px -4px rgba(240, 68, 56, 0.03), 0px 20px 24px -4px rgba(211, 17, 69, 0.10), 0px 0px 0px 1px var(--red-600, #D31145) !important; } } .form-container form .hs-error-msgs { margin: 0 !important; padding-left: 0 !important; } .form-container form .hs-error-msgs li { background-image: unset !important; padding: 0 !important; margin: 0 !important; } .form-container form .hs-error-msgs li label { color: var(--errorColor) !important; font-size: 14px !important; font-weight: 300; margin-top: 6px; margin-bottom: 0; } /* Consent message */ .form-container .hs-richtext { font-size: 12px !important; font-weight: 400; line-height: 24px !important; margin-bottom: 20px !important; } .form-container .hs-richtext a { font-weight: 500; } .form-container form .actions { padding: 0; margin: 0; } .form-container form input[type="submit"], .form-container .hs-custom-style input[type="submit"] { all: unset; box-sizing: border-box; display: flex; justify-content: center; align-items: center; column-gap: 8px; width: 100%; text-align: center; cursor: pointer; font-family: 'DM Sans', sans-serif; letter-spacing: 0.01em; font-size: 16px; font-weight: 500; line-height: 150%; transition: all 0.3s ease; white-space: nowrap; color: #fff; background-color: var(--navy-blue-900, #0C2471); border: 1px solid var(--royal-blue-700, #243E93); padding: 6px 16px; border-radius: 4px; @media screen and (min-width: 768px) { padding: 12px 20px; border-radius: 4px; } &:hover { color: #fff; background-color: var(--navy-blue-700, #243E93); border: 1px solid var(--royal-blue-700, #243E93); } &:focus, &:focus-visible { background-color: var(--royal-blue-700, #243E93); border: 1px solid var(--royal-blue-700, #243E93); /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--royal-blue-400-P, #255CFF) inset; outline: 0; } &:disabled { background-color: var(--gray-300, #EBEBEB); border: 1px solid var(--gray-300, #EBEBEB); color: var(--base-white, #fff); } } /* Captcha */ .grecaptcha-badge { margin: 0 auto; } /* custom hubspot form breakpoint */ @media screen and (min-width: 576px) { .form-container form .form-columns-2 .hs-form-field:first-child .input { margin-right: 16px !important; } } @media screen and (min-width: 768px) { .form-container form .actions { display: flex; justify-content: flex-start; } } @media screen and (max-width: 576px) { .form-wrap { padding: 16px; } .form-container fieldset.form-columns-2 .hs-form-field { width: 100% !important; } .form-container form .form-columns-2 .hs-form-field:first-child .input { margin-right: 0 !important; } } /* Custom checkbox styles */ .form-container .hs-form-checkbox, .form-container .hs-form-booleancheckbox, .form-container .hs-form-radio { width: 100%; display: block; position: relative; /* padding-left: 24px; */ margin-bottom: 12px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; } /* Hide the browser's default checkbox */ .form-container .hs-form-checkbox input[type=checkbox], .form-container .hs-form-booleancheckbox input[type=checkbox], .form-container .hs-form-radio input[type=radio] { position: absolute; opacity: 0; cursor: pointer; width: 100%; height: 100%; } /* Create a custom checkbox */ .form-container .hs-form-checkbox:before, .form-container .hs-form-booleancheckbox:before, .form-container .hs-form-radio:before { position: absolute; top: 50%; content: ''; height: 16px; width: 16px; border-radius: 2px; border: 1px solid var(--gray-300, #EBEBEB); background: var(--Base-White, #FFF); transform: translateY(-50%); transition: all .3s ease; pointer-events: none; } .form-container .hs-form-radio:before { border-radius: 8px; } /* On hover*/ .form-container .hs-form-checkbox:hover:has(input[type=checkbox]:not([disabled]):not(:checked)):before, .form-container .hs-form-booleancheckbox:hover:has(input[type=checkbox]:not([disabled]):not(:checked)):before, .form-container .hs-form-radio:hover:has(input[type=radio]:not([disabled]):not(:checked)):before { border: 1px solid var(--royal-blue-400, #255CFF); background: var(--royal-blue-25, #F2F3FF); } .form-container .hs-form-radio:hover:has(input[type=radio]:not([disabled])):before { border-radius: 8px; } /* focus */ .form-container .hs-form-checkbox:has(input[type=checkbox]:focus):before, .form-container .hs-form-checkbox:has(input[type=checkbox]:focus-visible):before, .form-container .hs-form-booleancheckbox:has(input[type=checkbox]:focus):before, .form-container .hs-form-booleancheckbox:has(input[type=checkbox]:focus-visible):before, .form-container .hs-form-radio:has(input[type=radio]:focus):before, .form-container .hs-form-radio:has(input[type=radio]:focus-visible):before { border: 1px solid var(--royal-blue-400, #255CFF); background: var(--base-white, #fff); /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--Royal-Blue-400-P, #255CFF) inset; } /* When the checkbox is checked */ .form-container .hs-form-checkbox:has(input[type=checkbox]:checked):before, .form-container .hs-form-booleancheckbox:has(input[type=checkbox]:checked):before { background: var(--royal-blue-400, #255CFF); border: 1px solid var(--royal-blue-400, #255CFF); } .form-container .hs-form-radio:has(input[type=radio]:checked):before { border: 1px solid var(--royal-blue-400, #255CFF); } /* Create the checkmark/radio indicator (hidden when not checked) */ .form-container .hs-form-checkbox:after, .form-container .hs-form-booleancheckbox:after { display: none; position: absolute; content: ""; inset: 6px auto auto 2px; width: 13px; height: 13px; background-image: url('https://www.sonicu.com/hubfs/2025%20-%20Redesign%20Branding%20Images/Icons/white%20check.svg'); background-repeat: no-repeat; pointer-events: none; } .form-container .hs-form-radio:after { display: none; position: absolute; content: ''; inset: 9px auto auto 5px; width: 6px; height: 6px; background-color: var(--royal-blue-400, #255CFF); border-radius: 8px; } /* Show the checkmark when checked */ .form-container .hs-form-checkbox:has(input[type=checkbox]:checked):after, .form-container .hs-form-booleancheckbox:has(input[type=checkbox]:checked):after, .form-container .hs-form-radio:has(input[type=radio]:checked):after{ display: block; } /* Disabled Styles */ .form-container .hs-form-checkbox:has(input[type=checkbox][disabled]), .form-container .hs-form-booleancheckbox:has(input[type=checkbox][disabled]), .form-container .hs-form-radio:has(input[type=radio][disabled]) { cursor: default; } .form-container .hs-form-checkbox:has(input[type=checkbox][disabled]):before, .form-container .hs-form-booleancheckbox:has(input[type=checkbox][disabled]):before, .form-container .hs-form-radio:has(input[type=radio][disabled]):before { pointer-events: none; border-radius: 4px; border: 1px solid var(--gray-400, #C9C9C9); background: var(--Gray-100, #F7F7F7); } .form-container .hs-form-checkbox:has(input[type=checkbox][disabled]):after, .form-container .hs-form-booleancheckbox:has(input[type=checkbox][disabled]):after, .form-container .hs-form-radio:has(input[type=radio][disabled]):after{ /* background-image: url('needs%20url***%20/Icons/check-disabled.svg'); */ } /* Table */ table { border-collapse: collapse; margin-bottom: 1.4rem; overflow-wrap: break-word; } /* Table cells */ td, th { vertical-align: top; } /* Table header */ thead th { vertical-align: bottom; } .shadow-xs { box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05); } .shadow-sm { box-shadow: 0px 1px 3px 0px rgba(16, 24, 40, 0.10), 0px 1px 2px 0px rgba(16, 24, 40, 0.06); } .shadow-md { box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.10), 0px 2px 4px -2px rgba(16, 24, 40, 0.06); } .shadow-lg { box-shadow: 0px 12px 16px -4px rgba(16, 24, 40, 0.08), 0px 4px 6px -2px rgba(16, 24, 40, 0.03); } .shadow-xl { box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08), 0px 8px 8px -4px rgba(16, 24, 40, 0.03); } .shadow-2xl { box-shadow: 0px 24px 48px -12px rgba(16, 24, 40, 0.18); } .shadow-3xl { box-shadow: 0px 32px 64px -12px rgba(16, 24, 40, 0.14); } .blur-light { background: rgba(255, 255, 255, 0.6); } .blur-dark { background: rgba(12, 36, 113, 0.5); } .blur-sm { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); } .blur-md { backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .blur-lg { backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } .blur-xl { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } button, .button, .hs-button { cursor: pointer; display: inline-block; text-align: center; transition: all 0.15s linear; white-space: normal; } button:disabled, .button:disabled, .hs-button:disabled { background-color: #EBEBEB; border-color: rgba(255, 255, 255, 0.56); box-shadow: 0px 0px 0px 2px rgba(73, 75, 78, 0.20); color: #FFF; } /* No button */ .no-button, .no-button:hover, .no-button:focus, .no-button:active { background: none; border: none; border-radius: 0; color: initial; font-family: inherit; font-size: inherit; font-style: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; margin-bottom: 0; padding: 0; text-align: left; text-decoration: none; transition: none; } /* Design System*** CTA styles */ .btn-primary, .btn-secondary, .btn-link { all: unset; box-sizing: border-box; display: flex; justify-content: center; align-items: center; column-gap: 8px; width: 100%; text-align: center; cursor: pointer; font-family: 'DM Sans', sans-serif; letter-spacing: 0.01em; font-size: 14px; font-weight: 500; line-height: 150%; transition: all 0.3s ease; white-space: nowrap; } @media screen and (min-width: 768px) { .btn-primary, .btn-secondary { font-size: 16px; } } @media screen and (min-width: 768px) { .btn-link { font-size: 16px; } } .btn-primary:hover, .btn-secondary:hover, .btn-link:hover { text-decoration: none; } /* For svg/path fill */ .btn-primary *, .btn-secondary *, .btn-link * { fill: currentColor; } .btn-primary, .btn-secondary { padding: 4px 16px; border-radius: 4px; } @media screen and (min-width: 768px) { .btn-primary, .btn-secondary { padding: 11px 19px; border-radius: 8px; } } .btn-primary.disabled, .btn-primary:disabled, .btn-secondary.disabled, .btn-secondary:disabled, .btn-link.disabled, .btn-link:disabled { pointer-events: none; cursor: default; -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -moz-user-select: none; /* Old versions of Firefox */ user-select: none; /* Non-prefixed version, currently supported by Chrome, Edge, Opera and Firefox */ } /* Primary */ .btn-primary { color: #fff; background-color: var(--navy-blue-900, #0C2471); border: 1px solid var(--royal-blue-700, #243E93); } .btn-primary .btn-end-icon-container { display: flex; padding: 3px; justify-content: center; align-items: center; gap: 25.143px; border-radius: 4px; background: #FED108; } .btn-primary:hover { color: #fff; background-color: var(--navy-blue-700, #243E93); border: 1px solid var(--royal-blue-700, #243E93); } .btn-primary:focus, .btn-primary:focus-visible { background-color: var(--royal-blue-700, #243E93); border: 1px solid var(--royal-blue-700, #243E93); /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--royal-blue-400-P, #255CFF) inset; outline: 0; } .btn-primary.disabled, .btn-primary:disabled { background-color: var(--gray-300, #EBEBEB); border: 1px solid var(--gray-300, #EBEBEB); color: var(--base-white, #fff); } /* Primary - Dark */ .dark.btn-primary { color: #0C2471; border: 1px solid var(--yellow-600, #FED108); background-color: var(--yellow-600, #FED108); } .dark.btn-primary .btn-end-icon-container { display: flex; padding: 3px; justify-content: center; align-items: center; gap: 25.143px; border-radius: 4px; background: #0C2471; } .dark.btn-primary:hover { color: #0C2471; border: 1px solid var(--yellow-400, #FFEC67); background-color: var(--yellow-400, #FFEC67); } .dark.btn-primary:focus, .dark.btn-primary:focus-visible { color: #0C2471; border: 1px solid var(--yellow-400, #FFEC67); background-color: var(--yellow-400, #FFEC67); /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--royal-blue-400-P, #255CFF) inset; outline: 0; } .dark.btn-primary.disabled, .dark.btn-primary:disabled { border: 1px solid var(--gray-400, #0C2471); background-color: var(--white, #fff); color: var(--gray-400, #0C2471); } /* Secondary */ .btn-secondary { color: var(--navy-blue-900, #0C2471); border: 1px solid var(--navy-blue-900, #0C2471); background-color: transparent; } .btn-secondary:hover, .btn-secondary:focus, .btn-secondary:focus-visible { color: var(--navy-blue-900, #0C2471); background-color: var(--ice-blue-50, #E7EAF4); } .btn-secondary:focus, .btn-secondary:focus-visible { color: var(--navy-blue-900, #0C2471); background-color: var(--ice-blue-50, #E7EAF4); outline: 0; /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--Royal-Blue-400-P, #255CFF) inset; } .btn-secondary.disabled, .btn-secondary:disabled { background-color: transparent; color: var(--gray-400, #C9C9C9); border: 1px solid var(--gray-300, #EBEBEB); } /* Secondary - Dark */ .dark.btn-secondary { color: var(--base-white, #fff); border: 1px solid var(--base-white, #fff); background-color: transparent; } .dark.btn-secondary:hover { color: var(--base-white, #fff); border: 1px solid var(--base-white, #fff); background-color: var(--ice-blue-50, #5469B4); } .dark.btn-secondary:focus, .dark.btn-secondary:focus-visible { color: var(--base-white, #fff); border: 1px solid var(--base-white, #fff); background-color: var(--ice-blue-50, #5469B4); outline: 0; /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--Royal-Blue-400-P, #255CFF) inset; } .dark.btn-secondary.disabled, .dark.btn-secondary:disabled { background-color: transparent; color: var(--gray-500, #ABABAB); border: 1px solid #C9C9C9; /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--Royal-Blue-400-P, #255CFF) inset; } /* Button Link */ .btn-link { color: #0C2471; padding: 6px 0; border: 1px solid transparent; border-radius: 8px; color: var(--navy-blue-600, #2e489e); } .btn-link .btn-end-icon-container { display: flex; padding: 3px; justify-content: center; align-items: center; gap: 25.143px; border-radius: 4px; background: #0C2471; } .btn-link:hover { background-color: var(--navy-blue-50, #e7eaf4); border-color: var(--royal-blue-400, #255cff); padding: 6px; } .btn-link:focus, .btn-link:focus-visible { color: #00383A; outline: 0; padding: 6px; border-radius: 8px; background: var(--navy-blue-50, #E7EAF4); /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--royal-blue-400-P, #255CFF) inset; } .btn-link.disabled, .btn-link:disabled { color: var(--Gray-600, #818181); } /* Button Link - Dark */ .dark.btn-link { color: #FFF; } .dark.btn-link .btn-end-icon-container { display: flex; padding: 3px; justify-content: center; align-items: center; gap: 25.143px; border-radius: 4px; background: #FED108; } .dark.btn-link:hover { color: #9AA6D3; padding: 6px; background-color: var(--navy-blue-700, #243E93); border-color: var(--royal-blue-400, #255CFF); } .dark.btn-link:focus, .dark.btn-link:focus-visible { color: #9AA6D3; outline: 0; border-radius: 8px; background: var(--navy-blue-700, #243E93); /* Focus Ring/1px Primary-500 */ box-shadow: 0px 8px 8px -4px rgba(37, 92, 255, 0.03), 0px 20px 24px -4px rgba(37, 92, 255, 0.08), 0px 0px 0px 1px var(--royal-blue-400-P, #255CFF) inset; } .dark.btn-link.disabled, .dark.btn-link:disabled { color: var(--Gray-600, #818181); } /* Button Icons */ .btn-icon { font-size: 20px; } @media screen and (min-width: 768px) { .btn-primary, .btn-secondary, .btn-link-primary { width: max-content; } } /* 2024 Padding styles */ /* * Allow variation of padding options for components top and bottom of a component * */ :root { --section-padding-block: 48px; --hero-padding-top: 48px; --half-padding: 24px; --no-padding: 0; --padding-none: 0; --padding-4: 4px; --padding-8: 8px; --padding-16: 16px; --padding-24: 24px; --padding-32: 32px; --padding-48: 48px; --padding-56: 56px; --padding-64: 64px; --padding-72: 72px; --padding-96: 96px; --padding-128: 128px; @media screen and (min-width: 768px) { --section-padding-block: 72px; --half-padding: 36px; --hero-padding-top: 64px; } @media screen and (min-width: 1280px) { --section-padding-block: 96px; --half-padding: 48px; } } .half-pt { padding-top: var(--half-padding); } .half-pb { padding-bottom: var(--half-padding); } .hero-pt { padding-top: var(--hero-padding-top); } .no-pt { padding-top: var(--no-padding); } .no-pb { padding-bottom: var(--no-padding); } /* NONE */ .pt-none { padding-top: var(--padding-none); } .pb-none { padding-bottom: var(--padding-none); } /* XS */ .pt-xs { padding-top: var(--padding-8); } .pb-xs { padding-bottom: var(--padding-8); } /* SM */ .pt-sm { padding-top: var(--padding-16); } .pb-sm { padding-bottom: var(--padding-16); } /* MD */ .pt-md { padding-top: var(--padding-8); } .pb-md { padding-bottom: var(--padding-8); } /* LG */ .pt-lg { padding-top: var(--padding-48); } .pb-lg { padding-bottom: var(--padding-48); } /* XL */ .pt-xl { padding-top: var(--padding-48); } .pb-xl { padding-bottom: var(--padding-48); } /* 2XL */ .pt-xl { padding-top: var(--padding-72); } .pb-xl { padding-bottom: var(--padding-72); } .px-4 { padding-left: var(--padding-4); padding-right: var(--padding-4); } .pt-4 { padding-top: var(--padding-4); } .pb-4 { padding-bottom: var(--padding-4); } .px-8 { padding-left: var(--padding-8); padding-right: var(--padding-8); } .pt-8 { padding-top: var(--padding-8); } .pb-8 { padding-bottom: var(--padding-8); } .px-16 { padding-left: var(--padding-16); padding-right: var(--padding-16); } .pt-16 { padding-top: var(--padding-16); } .pb-16 { padding-bottom: var(--padding-16); } .px-24 { padding-left: var(--padding-24); padding-right: var(--padding-24); } .pt-24 { padding-top: var(--padding-24); } .pb-24 { padding-bottom: var(--padding-24); } .px-32 { padding-left: var(--padding-32); padding-right: var(--padding-32); } .pt-32 { padding-top: var(--padding-32); } .pb-32 { padding-bottom: var(--padding-32); } .px-48 { padding-left: var(--padding-48); padding-right: var(--padding-48); } .pt-48 { padding-top: var(--padding-48); } .pb-48 { padding-bottom: var(--padding-48); } .px-56 { padding-left: var(--padding-56); padding-right: var(--padding-56); } .pt-56 { padding-top: var(--padding-56); } .pb-56 { padding-bottom: var(--padding-56); } .px-64 { padding-left: var(--padding-64); padding-right: var(--padding-64); } .pt-64 { padding-top: var(--padding-64); } .pb-64 { padding-bottom: var(--padding-64); } .px-72 { padding-left: var(--padding-72); padding-right: var(--padding-72); } .pt-72 { padding-top: var(--padding-72); } .pb-72 { padding-bottom: var(--padding-72); } .px-96 { padding-left: var(--padding-96); padding-right: var(--padding-96); } .pt-96 { padding-top: var(--padding-96); } .pb-96 { padding-bottom: var(--padding-96); } .px-128 { padding-left: var(--padding-128); padding-right: var(--padding-128); } .pt-128 { padding-top: var(--padding-128); } .pb-128 { padding-bottom: var(--padding-128); } @media screen and (min-width: 640px) { .sm-px-4 { padding-left: var(--padding-4); padding-right: var(--padding-4); } .sm-pt-4 { padding-top: var(--padding-4); } .sm-pb-4 { padding-bottom: var(--padding-4); } .sm-px-8 { padding-left: var(--padding-8); padding-right: var(--padding-8); } .sm-pt-8 { padding-top: var(--padding-8); } .sm-pb-8 { padding-bottom: var(--padding-8); } .sm-px-16 { padding-left: var(--padding-16); padding-right: var(--padding-16); } .sm-pt-16 { padding-top: var(--padding-16); } .sm-pb-16 { padding-bottom: var(--padding-16); } .sm-px-24 { padding-left: var(--padding-24); padding-right: var(--padding-24); } .sm-pt-24 { padding-top: var(--padding-24); } .sm-pb-24 { padding-bottom: var(--padding-24); } .sm-px-32 { padding-left: var(--padding-32); padding-right: var(--padding-32); } .sm-pt-32 { padding-top: var(--padding-32); } .sm-pb-32 { padding-bottom: var(--padding-32); } .sm-px-48 { padding-left: var(--padding-48); padding-right: var(--padding-48); } .sm-pt-48 { padding-top: var(--padding-48); } .sm-pb-48 { padding-bottom: var(--padding-48); } .sm-px-56 { padding-left: var(--padding-56); padding-right: var(--padding-56); } .sm-pt-56 { padding-top: var(--padding-56); } .sm-pb-56 { padding-bottom: var(--padding-56); } .sm-px-64 { padding-left: var(--padding-64); padding-right: var(--padding-64); } .sm-pt-64 { padding-top: var(--padding-64); } .sm-pb-64 { padding-bottom: var(--padding-64); } .sm-px-72 { padding-left: var(--padding-72); padding-right: var(--padding-72); } .sm-pt-72 { padding-top: var(--padding-72); } .sm-pb-72 { padding-bottom: var(--padding-72); } .sm-px-96 { padding-left: var(--padding-96); padding-right: var(--padding-96); } .sm-pt-96 { padding-top: var(--padding-96); } .sm-pb-96 { padding-bottom: var(--padding-96); } .sm-px-128 { padding-left: var(--padding-128); padding-right: var(--padding-128); } .sm-pt-128 { padding-top: var(--padding-128); } .sm-pb-128 { padding-bottom: var(--padding-128); } } @media screen and (min-width: 768px) { /* MD */ .pt-md { padding-top: var(--padding-16); } .pb-md { padding-bottom: var(--padding-16); } /* LG */ .pt-lg { padding-top: var(--padding-56); } .pb-lg { padding-bottom: var(--padding-56); } /* XL */ .pt-xl { padding-top: var(--padding-72); } .pb-xl { padding-bottom: var(--padding-72); } /* 2XL */ .pt-xl { padding-top: var(--padding-96); } .pb-xl { padding-bottom: var(--padding-96); } .md-pt-4 { padding-top: var(--padding-4); } .md-pb-4 { padding-bottom: var(--padding-4); } .md-pt-8 { padding-top: var(--padding-8); } .md-pb-8 { padding-bottom: var(--padding-8); } .md-pt-16 { padding-top: var(--padding-16); } .md-pb-16 { padding-bottom: var(--padding-16); } .md-pt-24 { padding-top: var(--padding-24); } .md-pb-24 { padding-bottom: var(--padding-24); } .md-pt-32 { padding-top: var(--padding-32); } .md-pb-32 { padding-bottom: var(--padding-32); } .md-pt-48 { padding-top: var(--padding-48); } .md-pb-48 { padding-bottom: var(--padding-48); } .md-pt-56 { padding-top: var(--padding-56); } .md-pb-56 { padding-bottom: var(--padding-56); } .md-pt-64 { padding-top: var(--padding-64); } .md-pb-64 { padding-bottom: var(--padding-64); } .md-pt-72 { padding-top: var(--padding-72); } .md-pb-72 { padding-bottom: var(--padding-72); } .md-pt-96 { padding-top: var(--padding-96); } .md-pb-96 { padding-bottom: var(--padding-96); } .md-pt-128 { padding-top: var(--padding-128); } .md-pb-128 { padding-bottom: var(--padding-128); } } @media screen and (min-width: 1024px) { /* MD */ .pt-md { padding-top: var(--padding-32); } .pb-md { padding-bottom: var(--padding-32); } /* LG */ .pt-lg { padding-top: var(--padding-64); } .pb-lg { padding-bottom: var(--padding-64); } /* 2LG */ .pt-2lg { padding-top: var(--padding-72); } .pb-2lg { padding-bottom: var(--padding-72); } /* XL */ .pt-xl { padding-top: var(--padding-96); } .pb-xl { padding-bottom: var(--padding-96); } /* 2XL */ .pt-2xl { padding-top: var(--padding-128); } .pb-2xl { padding-bottom: var(--padding-128); } .lg-pt-4 { padding-top: var(--padding-4); } .lg-pb-4 { padding-bottom: var(--padding-4); } .lg-pt-8 { padding-top: var(--padding-8); } .lg-pb-8 { padding-bottom: var(--padding-8); } .lg-pt-16 { padding-top: var(--padding-16); } .lg-pb-16 { padding-bottom: var(--padding-16); } .lg-pt-24 { padding-top: var(--padding-24); } .lg-pb-24 { padding-bottom: var(--padding-24); } .lg-pt-32 { padding-top: var(--padding-32); } .lg-pb-32 { padding-bottom: var(--padding-32); } .lg-pt-48 { padding-top: var(--padding-48); } .lg-pb-48 { padding-bottom: var(--padding-48); } .lg-pt-56 { padding-top: var(--padding-56); } .lg-pb-56 { padding-bottom: var(--padding-56); } .lg-pt-64 { padding-top: var(--padding-64); } .lg-pb-64 { padding-bottom: var(--padding-64); } .lg-pt-72 { padding-top: var(--padding-72); } .lg-pb-72 { padding-bottom: var(--padding-72); } .lg-pt-96 { padding-top: var(--padding-96); } .lg-pb-96 { padding-bottom: var(--padding-96); } .lg-pt-128 { padding-top: var(--padding-128); } .lg-pb-128 { padding-bottom: var(--padding-128); } } @media screen and (min-width: 1280px) { .xl-pt-4 { padding-top: var(--padding-4); } .xl-pb-4 { padding-bottom: var(--padding-4); } .xl-pt-8 { padding-top: var(--padding-8); } .xl-pb-8 { padding-bottom: var(--padding-8); } .xl-pt-16 { padding-top: var(--padding-16); } .xl-pb-16 { padding-bottom: var(--padding-16); } .xl-pt-24 { padding-top: var(--padding-24); } .xl-pb-24 { padding-bottom: var(--padding-24); } .xl-pt-32 { padding-top: var(--padding-32); } .xl-pb-32 { padding-bottom: var(--padding-32); } .xl-pt-48 { padding-top: var(--padding-48); } .xl-pb-48 { padding-bottom: var(--padding-48); } .xl-pt-56 { padding-top: var(--padding-56); } .xl-pb-56 { padding-bottom: var(--padding-56); } .xl-pt-64 { padding-top: var(--padding-64); } .xl-pb-64 { padding-bottom: var(--padding-64); } .xl-pt-72 { padding-top: var(--padding-72); } .xl-pb-72 { padding-bottom: var(--padding-72); } .xl-pt-96 { padding-top: var(--padding-96); } .xl-pb-96 { padding-bottom: var(--padding-96); } .xl-pt-128 { padding-top: var(--padding-128); } .xl-pb-128 { padding-bottom: var(--padding-128); } } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ /* Lists */ ul, ol { margin: 0 0 1.4rem; } ul ul, ol ul, ul ol, ol ol { margin: 0; } ul.no-list { list-style: none; margin: 0; padding-left: 0; } .rich-text ul, .rich-text ol, .rich-text-list-item ul, .rich-text-list-item ol { display: flex; flex-direction: column; gap: 16px; margin: 0 0 1.4rem; } .rich-text ul { list-style: disc; padding: 0 0 0 24px; } .rich-text-list-item ul { list-style: none; padding: 0; } .rich-text ol { padding-left: 25px; } .rich-text ol li { color: rgba(12, 36, 113, 0.80); counter-increment: step-counter; font-weight: 400; padding-left: 32px; } .rich-text ol li::before { content: counter(step-counter); color: #080F23; font-weight: bold; } [data-theme="dark"] ul li, [data-theme="dark"] ol li, [data-theme="navy"] ul li, [data-theme="navy"] ol li { color: var(--navy-200); } .rich-text ul li { display: list-item; } .rich-text-list-item ul li { display: flex; padding-left: 32px; } .rich-text ul li, .rich-text-list-item ul li { flex-direction: column; row-gap: 8px; position: relative; color: rgba(12, 36, 113, 0.80); font-weight: 400; } .rich-text ol li { padding-left: 8px; } .rich-text-list-item ul li:before { /* background-image: url(needs%20url***%20/images/icons/check_mark_icon.svg); */ background-repeat: no-repeat; background-size: contain; border-radius: 24px; content: ""; display: block; height: 24px; left: 0px; position: absolute; top: 4px; width: 24px; } .rich-text .li-desc > * { margin-bottom: 0; } .isolate { isolation: isolate; } .uppercase { text-transform: uppercase; } .line-clamp-1 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .line-clamp-2 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .line-clamp-3 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; } .line-clamp-4 { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4; } /* @import url('http://example.com/example_style.css'); */ /***********************************************/ /* CSS @imports must be at the top of the file */ /* Add them above this section */ /***********************************************/ /*****************************************/ /* Start your style declarations here */ /*****************************************/ .text-heading-primary h1, .text-heading-primary h2, .text-heading-primary h3, .text-heading-primary h4, .text-heading-primary h5, .text-heading-primary h6, .text-heading-primary p { margin: 0; } .text-body-primary h1, .text-body-primary h2, .text-body-primary h3, .text-body-primary h4, .text-body-primary h5, .text-body-primary h6, .text-body-primary p { margin-bottom: 16px; } .text-body-primary h1:last-of-type, .text-body-primary h2:last-of-type, .text-body-primary h3:last-of-type, .text-body-primary h4:last-of-type, .text-body-primary h5:last-of-type, .text-body-primary h6:last-of-type, .text-body-primary p:last-of-type { margin: 0px; } .rich-text img { width: 100%; height: auto; } .rich-text .hs-embed-wrapper { width: 100%; max-width: 100% !important; min-width: 100% !important; } .rich-text-styling h1 { font-size: 50px; line-height: 120%; letter-spacing: -1px; font-family: 'Instrument Sans', sans-serif; } .rich-text-styling h2 { font-size: 33px; line-height: 115.152%; font-family: 'Instrument Sans', sans-serif; } .rich-text-styling h3 { font-size: 27px; line-height: 140.741%; font-family: 'Instrument Sans', sans-serif; } .rich-text-styling h4 { font-size: 24px; line-height: 133.333%; font-family: 'Instrument Sans', sans-serif; } .rich-text-styling h5 { font-size: 20px; line-height: 150%; } .rich-text-styling h6 { font-size: 16px; line-height: 150%; } .subheading__container { width: 100%; } .section.light-theme, .section[data-theme='light'] { background-color: var(--white, #fff); } .section.white-theme, .section[data-theme='white'] { background-color: var(--white, #fff); } .section.ice-blue-25-theme, .section[data-theme='ice-blue-25'] { background-color: var(--ice-blue-25, #F7F9FD); } .section.ice-blue-50-theme, .section[data-theme='ice-blue-50'] { background-color: var(--ice-blue-50, #ECF0FF); } .section.navy-blue-900-theme, .section[data-theme='navy-blue-900'] { background-color: var(--navy-blue-900, #0C2471); } .white-theme .text-body-primary, [data-theme='white'] .text-body-primary { color: var(--navy-blue-900, #0C2471); } .white-theme .text-heading-primary, [data-theme='white'] .text-heading-primary { color: var(--navy-blue-900, #0C2471); } .white-theme .text-eyebrow-primary, [data-theme='white'] .text-eyebrow-primary { color: #000; } .ice-blue-25-theme .text-body-primary, [data-theme='ice-blue-25'] .text-body-primary { color: rgba(12, 36, 113, 0.80); } .ice-blue-25-theme .text-heading-primary, [data-theme='ice-blue-25'] .text-heading-primary { color: #0C2471; } .ice-blue-25-theme .text-eyebrow-primary, [data-theme='ice-blue-25'] .text-eyebrow-primary { color: #2B2B2B; } .ice-blue-50-theme .text-body-primary, [data-theme='ice-blue-50'] .text-body-primary { color: rgba(12, 36, 113, 0.80); } .ice-blue-50-theme .text-heading-primary, [data-theme='ice-blue-50'] .text-heading-primary { color: #0C2471; } .ice-blue-50-theme .text-eyebrow-primary, [data-theme='ice-blue-50'] .text-eyebrow-primary { color: #2B2B2B; } .navy-blue-900-theme .text-body-primary, [data-theme='navy-blue-900'] .text-body-primary { color: rgba(255, 255, 255, 0.80); } .navy-blue-900-theme .text-heading-primary, [data-theme='navy-blue-900'] .text-heading-primary { color: var(--white, #fff); } .navy-blue-900-theme .text-eyebrow-primary, [data-theme='navy-blue-900'] .text-eyebrow-primary { color: #E7EAF4; } /* Components Specific pieces of UI that are stylized. Typically used for global partial styling */ /* Header DND sections */ .header .dnd-section { padding: 0; } /* Header container */ .header__container { display: flex; justify-content: space-between; } .header__row-1 { padding-top: 1rem; } .header__row-1, .header__row-2 { align-items: center; display: flex; justify-content: flex-end; width: 100%; } @media (max-width: 1150px) and (min-width: 767px) { .header__column { width: 100%; } } @media (max-width: 767px) { .header__container { flex-direction: column; padding: 1rem 0 0; } .header__column { position: relative; } .header__row-1 { padding-top: 0; } .header__row-2 { justify-content: center; padding: 1.05rem; } } /* Navigation skipper */ .header__skip { height: 1px; left: -1000px; overflow: hidden; position: absolute; text-align: left; top: -1000px; width: 1px; } .header__skip:hover, .header__skip:focus, .header__skip:active { height: auto; left: 0; overflow: visible; top: 0; width: auto; } /* Logo */ .header__logo { align-items: center; display: flex; height: auto; margin-right: auto; max-width: 200px; overflow: hidden; } @media (max-width: 767px) { .header__logo { margin: 0 auto; width: 100%; } } .header__logo img { max-width: 100%; } .header__logo .logo-company-name { font-size: 1.167rem; margin-top: 0.7rem; } .header__logo--main { padding-top: 1rem; } /* Search bar */ .header__search { padding: 0 1rem; width: auto; } .header__search .hs-search-field__input { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+); background-position: center right 15px; background-repeat: no-repeat; height: 45px; padding: 0 0.7rem; } .header__search .hs-search-field--open .hs-search-field__input { border-bottom: none; border-radius: 6px 6px 0 0; max-width: 100%; } .header__search .hs-search-field--open .hs-search-field__suggestions { background-color: #FFF; border: 2px solid #D1D6DC; border-radius: 0 0 6px 6px; border-top-width: 1px; position: absolute; width: 100%; z-index: 10; } .header__search .hs-search-field__suggestions li { border-top: 1px solid #D1D6DC; font-size: 0.875rem; } .header__search .hs-search-field__suggestions li a { color: #494A52; padding: 0.35rem 0.7rem; text-decoration: none; transition: background-color 0.3s; } .header__search .hs-search-field__suggestions #results-for { display: none; } @media (min-width: 767px) { .header__search form { align-items: center; display: flex; flex-direction: row; } .header__search label { margin: 0 1rem 0 0; } .header__search .hs-search-field__input { width: auto; } } @media (max-width: 767px) { .header__search { border-top: 2px solid #CED4DB; order: 1; padding: 1.05rem; } } /* Language switcher */ .header__language-switcher { cursor: pointer; padding-right: 1.4rem; } .header__language-switcher .lang_switcher_class { position: static; } .header__language-switcher .lang_list_class { border: 2px solid; border-radius: 3px; box-shadow: 0 2px 9px 0 rgba(0, 0, 0, 0.2); display: block; left: calc(100% - 24px); opacity: 0; min-width: 100px; padding-top: 0; text-align: left; top: 100%; transition: opacity 0.3s; visibility: hidden; } .header__language-switcher:hover .lang_list_class, .header__language-switcher:focus .lang_list_class { opacity: 1; transition: opacity 0.3s; visibility: visible; } .header__language-switcher .lang_list_class:before { left: 70%; top: -25px; } .header__language-switcher .lang_list_class:after { left: 70%; top: -22px; } .header__language-switcher .lang_list_class.first-active::after { top: -22px; transition: 0.3s; } .header__language-switcher .lang_list_class li { border: none; font-size: 18px; padding: 0.35rem 0.7rem; } .header__language-switcher .lang_list_class li:first-child { border-radius: 6px 6px 0 0; border-top: none; } .header__language-switcher .lang_list_class li:last-child { border-bottom: none; border-radius: 0 0 6px 6px; } .header__language-switcher .lang_list_class li:hover { transition: background-color 0.3s; } .header__language-switcher--label { display: flex; position: relative; } .header__language-switcher--label-current { align-items: center; display: flex; font-size: 0.75rem; margin-bottom: 0.175rem; margin-left: 0.7rem; } .header__language-switcher--label-current:after { border-left: 4px solid transparent; border-right: 4px solid transparent; border-top: 6px solid #494A52; content: ""; display: block; height: 0px; margin-left: 0.7rem; margin-top: 0.175rem; width: 0px; } @media (max-width: 767px) { .header__language-switcher { border-top: 2px solid #CED4DB; padding-left: 1.05rem; padding-right: 0; } .header__language-switcher .lang_list_class { border: none; box-shadow: unset; display: block; left: 30px; opacity: 1; padding: 0 1.05rem; top: 0; visibility: visible; } .header__language-switcher .lang_list_class li { background-color: inherit; font-size: 0.917rem; } .header__language-switcher--label-current { display: none; } .header__language-switcher .globe_class { background-image: none; } .header__language-switcher .lang_list_class li:hover{ background-color: inherit; } .header__language-switcher .lang_list_class:before, .header__language-switcher .lang_list_class:after { content: none; }} /* The video Modal */ .d-none { display: none; } .video-modal { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 999999; width: 100%; height: 100vh; overflow: hidden; background-color: rgba(0, 0, 0, 0.8); } /* Modal Content/Box */ .modal-content { display: flex; justify-content: center; align-items: center; height: 100vh; width: 1200px; max-width: 80%; position: relative; vertical-align: middle; margin: 0 auto; text-align: left; z-index: 1045; } .video-content { position: relative; width: 100%; height: 0; padding-top: 56.25%; } .iframe-scaler { position: absolute; display: block; top: 0; left: 0; width: 100%; height: 100%; } /* Close Button */ .close-button { position: absolute; top: -40px; right: 0; cursor: pointer; background-color: transparent; border: none; } .close-button:hover, .close-button:focus { color: #ccc; text-decoration: none; cursor: pointer; } /****/ /* Navigation */ #nav-toggle { display: none; } /* Mobile toggles */ @media (max-width: 767px) { .header__navigation, .header__search, .header__language-switcher { display: none; width: 100%; } .header__navigation.open, .header__search.open, .header__language-switcher.open { background-color: #F8FAFC; display: block; left: 0; min-height: calc(100vh - 115px); position: absolute; right: 0; top: 75px; z-index: 2; } .header__navigation--toggle, .header__search--toggle, .header__language-switcher--toggle, .header__close--toggle { cursor: pointer; margin: 0 5vw; position: relative; } .header__navigation--toggle.hide, .header__search--toggle.hide, .header__language-switcher--toggle.hide { display: none; } .header__navigation--toggle.open, .header__search--toggle.open, .header__language-switcher--toggle.open { display: block; margin-left: 0; margin-right: auto; } .header__navigation--toggle:after, .header__search--toggle:after, .header__language-switcher--toggle:after { display: none; font-size: 1.083rem; font-weight: 600; position: absolute; left: 40px; text-transform: uppercase; top: -10px; } .header__navigation--toggle.open:after, .header__search--toggle.open:after, .header__language-switcher--toggle.open:after { display: block; word-break: normal; } .header__navigation--toggle { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5oYW1idXJnZXI8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGcgaWQ9ImhhbWJ1cmdlciIgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+ICAgICAgICA8ZyBpZD0iR3JvdXAiIHN0cm9rZT0iIzQ5NEE1MiIgc3Ryb2tlLXdpZHRoPSIzIj4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlIiB4PSIxLjUiIHk9IjEuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNCIgeD0iMS41IiB5PSI5LjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICAgICAgPHJlY3QgaWQ9IlJlY3RhbmdsZS1Db3B5LTUiIHg9IjEuNSIgeT0iMTcuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgIDwvZz4gICAgPC9nPjwvc3ZnPg==); background-size: cover; height: 25px; width: 25px; } .header__navigation--toggle:after { content: "Menu"; } .header__language-switcher--toggle { background-image: url(//static.hsappstatic.net/cos-LanguageSwitcher/static-1.1/img/globe.png); background-size: cover; height: 25px; width: 25px; } .header__language-switcher--toggle:after { content: "Language"; } .header__search--toggle { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjI0cHgiIHZpZXdCb3g9IjAgMCAyNCAyNCIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5TZWFyY2g8L3RpdGxlPiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4gICAgPGRlZnM+ICAgICAgICA8cGF0aCBkPSJNOS4xMzg2MTUzNCwxNS44OTI1Njg1IEM1LjQxMzk1NzQyLDE1Ljg5MjU2ODUgMi4zODM4ODUyNywxMi44NjM0NDc1IDIuMzgzODg1MjcsOS4xMzkwMDM3NiBDMi4zODM4ODUyNyw1LjQxNDU2MDA1IDUuNDEzOTU3NDIsMi4zODM4ODUyNyA5LjEzODYxNTM0LDIuMzgzODg1MjcgQzEyLjg2MzI3MzMsMi4zODM4ODUyNyAxNS44OTI1Njg1LDUuNDE0NTYwMDUgMTUuODkyNTY4NSw5LjEzOTAwMzc2IEMxNS44OTI1Njg1LDEyLjg2MzQ0NzUgMTIuODYzMjczMywxNS44OTI1Njg1IDkuMTM4NjE1MzQsMTUuODkyNTY4NSBNOS4xMzg3NTI0NSwyLjQzMzYwODg3ZS0xMyBDMTQuMTc3OTk1NSwyLjQzMzYwODg3ZS0xMyAxOC4yNzY0NTM3LDQuMTAwMzI0NzEgMTguMjc2NDUzNyw5LjEzOTI3Nzk2IEMxOC4yNzY0NTM3LDExLjIyOTgyMTEgMTcuNTcxMDE2OSwxMy4xNTg0NDM0IDE2LjM4NTYzMTMsMTQuNjk5NjY5NiBMMjMuNjUwODg4MSwyMS45NjUyMjY2IEMyNC4xMTYzNzA2LDIyLjQzMDcwOTIgMjQuMTE2MzcwNiwyMy4xODU0MDU1IDIzLjY1MDg4ODEsMjMuNjUwODg4MSBDMjMuMTg1NDA1NSwyNC4xMTYzNzA2IDIyLjQzMDcwOTIsMjQuMTE2MzcwNiAyMS45NjUyMjY2LDIzLjY1MDg4ODEgTDE0LjY5OTgxMzMsMTYuMzg1NDcxMyBDMTMuMTU4NDQwNSwxNy41NzA5NTA5IDExLjIyOTU3MzgsMTguMjc2NDUzNyA5LjEzODc1MjQ1LDE4LjI3NjQ1MzcgQzQuMDk5NTA5MzgsMTguMjc2NDUzNyAtMy43MzAzNDkzNmUtMTQsMTQuMTc4MjMxMiAtMy43MzAzNDkzNmUtMTQsOS4xMzkyNzc5NiBDLTMuNzMwMzQ5MzZlLTE0LDQuMTAwMzI0NzEgNC4wOTk1MDkzOCwyLjQzMzYwODg3ZS0xMyA5LjEzODc1MjQ1LDIuNDMzNjA4ODdlLTEzIFoiIGlkPSJwYXRoLTEiPjwvcGF0aD4gICAgPC9kZWZzPiAgICA8ZyBpZD0iU2VhcmNoIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIj4gICAgICAgIDxtYXNrIGlkPSJtYXNrLTIiIGZpbGw9IndoaXRlIj4gICAgICAgICAgICA8dXNlIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICAgICAgPC9tYXNrPiAgICAgICAgPHVzZSBpZD0iSWNvbnMvQWN0aW9ucy9TZWFyY2giIGZpbGw9IiM0OTRBNTIiIHhsaW5rOmhyZWY9IiNwYXRoLTEiPjwvdXNlPiAgICA8L2c+PC9zdmc+); background-size: cover; height: 25px; width: 25px; } .header__search--toggle:after { content: "Search"; } .header__close--toggle { background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz48c3ZnIHdpZHRoPSIyNHB4IiBoZWlnaHQ9IjE5cHgiIHZpZXdCb3g9IjAgMCAyNCAxOSIgdmVyc2lvbj0iMS4xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIj4gICAgICAgIDx0aXRsZT5jbG9zZTwvdGl0bGU+ICAgIDxkZXNjPkNyZWF0ZWQgd2l0aCBTa2V0Y2guPC9kZXNjPiAgICA8ZyBpZD0iY2xvc2UiIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiPiAgICAgICAgPGcgaWQ9Ikdyb3VwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgyLjAwMDAwMCwgLTEuMDAwMDAwKSIgc3Ryb2tlPSIjNDk0QTUyIiBzdHJva2Utd2lkdGg9IjMiPiAgICAgICAgICAgIDxyZWN0IGlkPSJSZWN0YW5nbGUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDEwLjAwMDAwMCwgMTAuNTAwMDAwKSByb3RhdGUoLTQ1LjAwMDAwMCkgdHJhbnNsYXRlKC0xMC4wMDAwMDAsIC0xMC41MDAwMDApICIgeD0iLTAuNSIgeT0iMTAuNSIgd2lkdGg9IjIxIiBoZWlnaHQ9IjEiIHJ4PSIwLjUiPjwvcmVjdD4gICAgICAgICAgICA8cmVjdCBpZD0iUmVjdGFuZ2xlLUNvcHktNSIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMTAuMDAwMDAwLCAxMC41MDAwMDApIHJvdGF0ZSg0NS4wMDAwMDApIHRyYW5zbGF0ZSgtMTAuMDAwMDAwLCAtMTAuNTAwMDAwKSAiIHg9Ii0wLjUiIHk9IjEwLjUiIHdpZHRoPSIyMSIgaGVpZ2h0PSIxIiByeD0iMC41Ij48L3JlY3Q+ICAgICAgICA8L2c+ICAgIDwvZz48L3N2Zz4=); background-repeat: no-repeat; background-size: 110%; display: none; height: 25px; margin-right: 0; width: 25px; } .header__close--toggle.show { display: block; } .modal-content { max-width: 100%; } } /* Menu and simple menu */ .hs-menu-wrapper ul { display: flex; flex-wrap: wrap; list-style: none; margin: 0; padding-left: 0; } /* Horizontal menu */ .hs-menu-wrapper.hs-menu-flow-horizontal .hs-menu-children-wrapper { flex-direction: column; } @media (max-width: 767px) { .hs-menu-wrapper.hs-menu-flow-horizontal ul { flex-direction: column; } } /* Vertical menu */ .hs-menu-wrapper.hs-menu-flow-vertical ul { flex-direction: column; } /* Flyouts */ .hs-menu-wrapper.hs-menu-flow-vertical.flyouts ul { display: inline-flex; } @media (max-width: 767px) { .hs-menu-wrapper.hs-menu-flow-vertical ul { display: flex; } } .hs-menu-wrapper.flyouts .hs-item-has-children { position: relative; } .hs-menu-wrapper.flyouts .hs-menu-children-wrapper { left: -9999px; opacity: 0; position: absolute; } .hs-menu-wrapper.flyouts .hs-menu-children-wrapper a { display: block; white-space: nowrap; } .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper { left: 0; opacity: 1; top: 100%; } .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper { left: 100%; opacity: 1; top: 0; } @media (max-width: 767px) { .hs-menu-wrapper.flyouts .hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper, .hs-menu-wrapper.hs-menu-flow-vertical.flyouts .hs-item-has-children:hover > .hs-menu-children-wrapper { left: 0; opacity: 1; position: relative; top: auto; } } /* CTA, logo, and rich text images */ .hs_cos_wrapper_type_cta img, .hs_cos_wrapper_type_logo img, .hs_cos_wrapper_type_rich_text img { height: auto; max-width: 100%; } /* Utilities Helper classes with ability to override anything that comes before it */ /* For content that needs to be visually hidden but stay visible for screenreaders */ .show-for-sr { border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } @media (max-width: 767px) { .show-for-sr--mobile { border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } }