/* Settings */ :root { /* HubSpot DND layout grid */ --hsElevate--column__gap: 2.13%; --hsElevate--column__widthMultiplier: 8.333; /* Sections */ --hsElevate--contentWrapper--narrow__maxWidth: 768px ; --hsElevate--contentWrapper--medium__maxWidth: 1120px ; --hsElevate--contentWrapper--wide__maxWidth: 1140px ; --hsElevate--section--extraSmall__verticalPadding: 48px ; --hsElevate--section--small__verticalPadding: 64px ; --hsElevate--section--medium__verticalPadding: 96px ; --hsElevate--section--large__verticalPadding: 128px ; --hsElevate--section--extraLarge__verticalPadding: 192px ; /* Default section left/right padding */ --hsElevate--section--horizontalPadding: 15px ; /* Gap - default gaps that could be easily leveraged in module styles via class names */ --hsElevate--gap--extraSmall: 16px ; --hsElevate--gap--small: 24px ; --hsElevate--gap--medium: 32px ; --hsElevate--gap--large: 64px ; --hsElevate--gap--extraLarge: 96px ; /* Spacing - default spacing values */ --hsElevate--spacing--4: 4px ; --hsElevate--spacing--8: 8px ; --hsElevate--spacing--12: 12px ; --hsElevate--spacing--16: 16px ; --hsElevate--spacing--20: 20px ; --hsElevate--spacing--24: 24px ; --hsElevate--spacing--32: 32px ; --hsElevate--spacing--40: 40px ; --hsElevate--spacing--48: 48px ; --hsElevate--spacing--56: 56px ; --hsElevate--spacing--64: 64px ; --hsElevate--spacing--72: 72px ; --hsElevate--spacing--80: 80px ; --hsElevate--spacing--88: 88px ; --hsElevate--spacing--96: 96px ; --hsElevate--spacing--104: 104px ; --hsElevate--spacing--112: 112px ; --hsElevate--spacing--120: 120px ; --hsElevate--spacing--128: 128px ; --hsElevate--spacing--136: 136px ; --hsElevate--spacing--144: 144px ; --hsElevate--spacing--152: 152px ; --hsElevate--spacing--160: 160px ; --hsElevate--spacing--168: 168px ; --hsElevate--spacing--176: 176px ; --hsElevate--spacing--184: 184px ; --hsElevate--spacing--192: 192px ; /* Grids */ --default-section-padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); --default-section-margin: 0; --default-section-max-width: var(--hsElevate--contentWrapper--wide__maxWidth); --default-container-padding: 0; --default-container-margin: 0; --default-container-gap: var(--hsElevate--gap--medium); --default-container-row-gap: var(--hsElevate--gap--medium); --default-container-column-gap: var(--hsElevate--gap--medium); --default-table-padding: 0; --default-table-margin: 0; --default-table-row-gap: var(--hsElevate--gap--medium); --default-table-column-gap: var(--hsElevate--gap--medium); } :root { --hsElevate--brandFont: "Space Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; /* Text spacing */ --hsElevate--text--extraSmall__margin: 0 0.75rem; /* 12px */ --hsElevate--text--small__margin: 0 1.25rem; /* 20px */ --hsElevate--text__margin: 0 2rem; /* 32px */ --hsElevate--text--large__margin: 0 2.5rem; /* 40px */ --hsElevate--text--extraLarge__margin: 0 4rem; /* 64px */ /* Body */ --hsElevate--baseText__fontSize: 16px ; --hsElevate--body__font: var(--hsElevate--brandFont); --hsElevate--body--small__fontSize: 1.11125rem ; --hsElevate--body__fontSize: 1.25rem ; --hsElevate--body--large__fontSize: 1.66625rem ; --hsElevate--body--extraLarge__fontSize: 2.22125rem ; --hsElevate--body__fontWeight: normal ; --hsElevate--body__fontStyle: normal ; --hsElevate--body__lineHeight: 1.55; /* Primary links */ --hsElevate--link--primary__fontColor: #4F38E0 ; --hsElevate--link--primary__textDecoration: none; --hsElevate--link--primary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--primary__hover--fontColor: #4F38E0 ; --hsElevate--link--primary__hover--textDecoration: underline; --hsElevate--link--primary__hover--textDecorationColor: #4F38E0 ; /* Secondary links */ --hsElevate--link--secondary__fontColor: #D2CAFF ; --hsElevate--link--secondary__textDecoration: none; --hsElevate--link--secondary__textDecorationColor: transparent; /* Hover state */ --hsElevate--link--secondary__hover--fontColor: #D2CAFF ; --hsElevate--link--secondary__hover--textDecoration: underline; --hsElevate--link--secondary__hover--textDecorationColor: #D2CAFF ; /* Headings */ /* Percentage change for the heading font sizes on mobile */ --hsElevate--heading__tablet-modifier: 0.8; --hsElevate--heading__lineHeight: 1.2; --hsElevate--display1__font: var(--hsElevate--brandFont); --hsElevate--display1__fontSize: 6.313rem; --hsElevate--display2__font: var(--hsElevate--brandFont); --hsElevate--display2__fontSize: 4.75rem; --hsElevate--h1__font: var(--hsElevate--brandFont); --hsElevate--h1__fontSize: 3.5625rem ; --hsElevate--h1__fontWeight: 500 ; --hsElevate--h1__fontStyle: normal ; --hsElevate--h2__font: var(--hsElevate--brandFont); --hsElevate--h2__fontSize: 2.6875rem ; --hsElevate--h2__fontWeight: 600 ; --hsElevate--h2__fontStyle: normal ; --hsElevate--h3__font: var(--hsElevate--brandFont); --hsElevate--h3__fontSize: 2.0rem ; --hsElevate--h3__fontWeight: 600 ; --hsElevate--h3__fontStyle: normal ; --hsElevate--h4__font: var(--hsElevate--brandFont); --hsElevate--h4__fontSize: 1.5rem ; --hsElevate--h4__fontWeight: 600 ; --hsElevate--h4__fontStyle: normal ; --hsElevate--h5__font: var(--hsElevate--brandFont); --hsElevate--h5__fontSize: 1.0625rem ; --hsElevate--h5__fontWeight: 600 ; --hsElevate--h5__fontStyle: normal ; --hsElevate--h6__font: var(--hsElevate--brandFont); --hsElevate--h6__fontSize: 1.0rem ; --hsElevate--h6__fontWeight: 600 ; --hsElevate--h6__fontStyle: normal ; /* Quotes */ --hsElevate--quotes__font: var(--hsElevate--brandFont); --hsElevate--quotes__fontColor: ; --hsElevate--quotes__fontSize: 1.25rem ; --hsElevate--quotes__fontWeight: 400 ; --hsElevate--quotes__fontStyle: normal ; /* Captions */ --hsElevate--captions__font: var(--hsElevate--brandFont); --hsElevate--captions__fontSize: 0.75rem ; --hsElevate--captions__fontWeight: 800 ; --hsElevate--captions__fontStyle: normal ; --hsElevate--captions__case: uppercase ; /* Images */ --hsElevate--rteImages__margin: 2rem; /* 32px */ } :root { /* Base colors */ --hsElevate--color--base--1: #FFFFFF ; --hsElevate--color--base--2: #F7F9FC ; --hsElevate--color--base--3: #09152B ; /* Accent colors */ --hsElevate--color--accent--1: #F4F2FF ; --hsElevate--color--accent--2: #D2CAFF ; --hsElevate--color--accent--3: #4F38E0 ; } :root { /* Primary button variables */ --hsElevate--button--primary__buttonFill: filled ; /* Primary button font */ --hsElevate--button--primary__font: verdana, geneva ; /* TODO: Look into why primary_button.text.size ~ primary_button.text.size_unit is not evaluating to the correct size_unit, but can still take in px */ --hsElevate--button--primary__fontSize: 1.0rem ; --hsElevate--button--primary__fontWeight: 500 ; --hsElevate--button--primary__fontStyle: normal ; /* Primary button text color */ --hsElevate--button--primary__textColor: #F7F9FC ; --hsElevate--button--primary__hover--textColor: #F7F9FC ; /* Primary button shape */ --hsElevate--button--primary__borderRadius: 50px; /* Primary button background color */ --hsElevate--button--primary__backgroundColor: #4F38E0 ; --hsElevate--button--primary__hover--backgroundColor: #6854E8 ; --hsElevate--button--primary__active--backgroundColor: #4a36ca ; /* Primary button border */ --hsElevate--button--primary__borderThickness: 0px ; --hsElevate--button--primary__hover--borderThickness: 0px ; --hsElevate--button--primary__borderColor: transparent; --hsElevate--button--primary__hover--borderColor: transparent; /* Secondary button variables */ --hsElevate--button--secondary__buttonFill: no_fill ; /* Secondary button font */ --hsElevate--button--secondary__font: verdana, geneva ; --hsElevate--button--secondary__fontSize: 1.0rem ; --hsElevate--button--secondary__fontWeight: 500 ; --hsElevate--button--secondary__fontStyle: normal ; /* Secondary button text color */ --hsElevate--button--secondary__textColor: #4F38E0 ; --hsElevate--button--secondary__hover--textColor: #6854E8 ; /* Secondary button shape */ --hsElevate--button--secondary__borderRadius: 50px; /* Secondary button background color */ --hsElevate--button--secondary__backgroundColor: transparent; --hsElevate--button--secondary__hover--backgroundColor: transparent; /* Secondary button border */ --hsElevate--button--secondary__borderThickness: 2px ; --hsElevate--button--secondary__hover--borderThickness: 2px ; --hsElevate--button--secondary__borderColor: #4F38E0 ; --hsElevate--button--secondary__hover--borderColor: #6854E8 ; /* Tertiary button variables */ --hsElevate--button--tertiary__buttonFill: filled ; /* Tertiary button font */ --hsElevate--button--tertiary__font: verdana, geneva ; --hsElevate--button--tertiary__fontSize: 1.0rem ; --hsElevate--button--tertiary__fontWeight: 500 ; --hsElevate--button--tertiary__fontStyle: normal ; /* Tertiary button text color */ --hsElevate--button--tertiary__textColor: #09152B ; --hsElevate--button--tertiary__hover--textColor: #09152B ; /* Tertiary button shape */ --hsElevate--button--tertiary__borderRadius: 50px; /* Tertiary button background color */ --hsElevate--button--tertiary__backgroundColor: #D2CAFF ; --hsElevate--button--tertiary__hover--backgroundColor: #E9E5FF ; /* Tertiary button border */ --hsElevate--button--tertiary__borderThickness: 0px ; --hsElevate--button--tertiary__hover--borderThickness: 0px ; --hsElevate--button--tertiary__borderColor: transparent; --hsElevate--button--tertiary__hover--borderColor: transparent; /* Accent button variables */ --hsElevate--button--accent__buttonFill: no_fill ; /* Accent button font */ --hsElevate--button--accent__font: verdana, geneva ; --hsElevate--button--accent__fontSize: 1.0rem ; --hsElevate--button--accent__fontWeight: 500 ; --hsElevate--button--accent__fontStyle: normal ; /* Accent button text color */ --hsElevate--button--accent__textColor: #D2CAFF ; --hsElevate--button--accent__hover--textColor: #E9E5FF ; /* Accent button shape */ --hsElevate--button--accent__borderRadius: 50px; /* Accent button background color */ --hsElevate--button--accent__backgroundColor: transparent; --hsElevate--button--accent__hover--backgroundColor: transparent; /* Accent button border */ --hsElevate--button--accent__borderThickness: 2px ; --hsElevate--button--accent__hover--borderThickness: 2px ; --hsElevate--button--accent__borderColor: #D2CAFF ; --hsElevate--button--accent__hover--borderColor: #E9E5FF ; } :root { /* Form field background color */ --hsElevate--formField__backgroundColor: #F7F9FC ; /* Form field shape */ --hsElevate--formField__borderRadius: 50px; /* Form field border -- multiple fields to properly handle field visibility for both fill and no fill */ /* Proper usage of variables to achieve "All" or "Bottom" will be within CSS */ --hsElevate--formField__borderThickness: 1px ; --hsElevate--formField__borderTop: 1px solid #D3DAE4 ; --hsElevate--formField__borderRight: 1px solid #D3DAE4 ; --hsElevate--formField__borderLeft: 1px solid #D3DAE4 ; --hsElevate--formField__borderBottom: 1px solid #D3DAE4 ; --hsElevate--formField__borderColor: #D3DAE4 ; /* Form field text color */ --hsElevate--formFieldInput__textColor: #09152B ; /* Form field spacing */ --hsElevate--formField__marginBottom: var(--hsElevate--spacing--32); /* Form textarea border radius */ --hsElevate--formFieldTextArea__borderRadius: calc(var(--hsElevate--formField__borderRadius) * 0.5); /* Form field checkbox/radio */ --hsElevate--formFieldCheckboxRadio__size: 24px; --hsElevate--formFieldCheckboxRadio__fillColor: #000000; /* Form field placeholder */ --hsElevate--formFieldPlaceholder__textColor: #7d8ca5 ; /* Form required field color */ --hsElevate--formRequired__color: #de2828; /* Form field datepicker icon */ --hsElevate--formField__datepickerIcon: url("data:image/svg+xml,%3Csvg width='24' height='29' viewBox='0 0 24 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_3812_12272)'%3E%3Cpath d='M8.14286 2.07136C8.14286 1.35886 7.56964 0.785645 6.85714 0.785645C6.14464 0.785645 5.57143 1.35886 5.57143 2.07136V4.21422H3.42857C1.5375 4.21422 0 5.75172 0 7.64279V8.49993V11.0714V24.7856C0 26.6767 1.5375 28.2142 3.42857 28.2142H20.5714C22.4625 28.2142 24 26.6767 24 24.7856V11.0714V8.49993V7.64279C24 5.75172 22.4625 4.21422 20.5714 4.21422H18.4286V2.07136C18.4286 1.35886 17.8554 0.785645 17.1429 0.785645C16.4304 0.785645 15.8571 1.35886 15.8571 2.07136V4.21422H8.14286V2.07136ZM2.57143 11.0714H21.4286V24.7856C21.4286 25.2571 21.0429 25.6428 20.5714 25.6428H3.42857C2.95714 25.6428 2.57143 25.2571 2.57143 24.7856V11.0714Z' fill='%2309152B'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_3812_12272'%3E%3Crect width='24' height='27.4286' fill='white' transform='translate(0 0.785645)'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A"); /* Form field select icon */ --hsElevate--formField__selectIcon: url("data:image/svg+xml,%3Csvg width='24' height='25' viewBox='0 0 24 25' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M10.9407 19.5595C11.5267 20.1454 12.4782 20.1454 13.0642 19.5595L22.0642 10.5595C22.6501 9.97354 22.6501 9.02197 22.0642 8.43604C21.4782 7.8501 20.5267 7.8501 19.9407 8.43604L12.0001 16.3767L4.05947 8.44072C3.47354 7.85478 2.52197 7.85478 1.93604 8.44072C1.3501 9.02666 1.3501 9.97822 1.93604 10.5642L10.936 19.5642L10.9407 19.5595Z' fill='%2309152B'/%3E%3C/svg%3E%0A"); /* Textarea drag icon */ --hsElevate--formField__dragIcon: url("data:image/svg+xml,%3Csvg width='11' height='12' viewBox='0 0 22 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cline y1='-1' x2='29.5206' y2='-1' transform='matrix(-0.666795 0.745241 -0.806754 -0.590888 19.6843 0)' stroke='%23303F59' stroke-width='2'/%3E%3Cpath d='M21.0005 9.99756L10.5005 21.9976' stroke='%23303F59' stroke-width='2'/%3E%3C/svg%3E%0A"); /* Label text */ --hsElevate--formLabel__textColor: #09152B ; --hsElevate--formLabel__font: verdana, geneva ; --hsElevate--formLabel__fontSize: 1.125rem ; --hsElevate--formLabel__fontWeight: 500 ; --hsElevate--formLabel__marginBottom: var(--hsElevate--spacing--8); /* Help text */ --hsElevate--formHelpText__textColor: #647390; /* Form background color */ --hsElevate--form__backgroundColor: #FFFFFF ; /* Form shape */ --hsElevate--form__borderRadius: 24px; /* Form border */ --hsElevate--form__borderThickness: 1px ; --hsElevate--form__borderColor: #D3DAE4 ; /* Form spacing */ --hsElevate--form__padding: var(--hsElevate--spacing--48); /* CSS variables for new forms */ /* Global vars */ --hsf-global__font-family: var(--hsElevate--formLabel__font); --hsf-global__font-size: var(--hsElevate--formLabel__fontSize); --hsf-global__color: var(--hsElevate--formLabel__textColor); --hsf-global-error__color: var(--hsElevate--formRequired__color); /* Form */ --hsf-background__background-color: var(--hsElevate--form__backgroundColor); --hsf-background__padding: var(--hsElevate--form__padding); --hsf-background__border-style: solid; --hsf-background__border-color: var(--hsElevate--form__borderColor); --hsf-background__border-radius: var(--hsElevate--form__borderRadius); --hsf-background__border-width: var(--hsElevate--form__borderThickness); /* Content */ --hsf-heading__font-family: var(--hsf-global__font-family); --hsf-heading__color: var(--hsf-global__color); --hsf-heading__text-shadow: none; --hsf-richtext__font-family: var(--hsf-global__font-family); --hsf-richtext__font-size: var(--hsf-global__font-size); --hsf-richtext__color: var(--hsf-global__color); /* Labels */ --hsf-field-label__font-family: var(--hsf-global__font-family); --hsf-field-label__font-size: var(--hsf-global__font-size); --hsf-field-label__color: var(--hsf-global__color); --hsf-field-label-requiredindicator__color: var(--hsf-global-error__color); --hsf-module__vertical-spacing: var(--hsElevate--formLabel__marginBottom); /* Help text */ --hsf-field-description__font-family: var(--hsf-global__color); --hsf-field-description__color: var(--hsElevate--formHelpText__textColor); /* Errors */ --hsf-erroralert__font-family: var(--hsElevate--formLabel__font); --hsf-erroralert__color: var(--hsf-global-error__color); /* Field footer */ --hsf-field-footer__font-family: var(--hsf-field-description__font-family); --hsf-field-footer__color: var(--hsf-field-description__color); /* Field */ --hsf-field-input__font-family: var(--hsf-global__font-family); --hsf-field-input__background-color: var(--hsElevate--formField__backgroundColor); --hsf-field-input__placeholder-color: var(--hsElevate--formFieldPlaceholder__textColor); --hsf-field-input__border-color: var(--hsElevate--formField__borderColor); --hsf-field-input__border-width: var(--hsElevate--formField__borderThickness); ; --hsf-field-input__border-style: solid; --hsf-field-input__border-radius: var(--hsElevate--formField__borderRadius); --hsf-field-input__padding: var(--hsElevate--spacing--20) var(--hsElevate--spacing--32); --hsf-field-input__color: var(--hsElevate--formFieldInput__textColor); --hsf-row__vertical-spacing: var(--hsElevate--formField__marginBottom); --hsf-row__horizontal-spacing: var(--hsElevate--spacing--32); /* Textarea */ --hsf-field-textarea__font-family: var(--hsf-field-input__font-family); --hsf-field-textarea__color: var(--hsf-field-input__color); --hsf-field-textarea__background-color: var(--hsf-field-input__background-color); --hsf-field-textarea__border-color: var(--hsf-field-input__border-color); --hsf-field-textarea__border-style: var(--hsf-field-input__border-style); --hsf-field-textarea__border-radius: var(--hsElevate--formFieldTextArea__borderRadius); --hsf-field-textarea__padding: var(--hsf-field-input__padding); /* Checkbox */ --hsf-field-checkbox__padding: calc(var(--hsElevate--formFieldCheckboxRadio__size) / 2); --hsf-field-checkbox__background-color: #fff; --hsf-field-checkbox__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-checkbox__border-color: var(--hsf-field-input__border-color); --hsf-field-checkbox__border-width: 1px 1px 1px 1px; --hsf-field-checkbox__border-style: var(--hsf-field-input__border-style); /* Radio */ --hsf-field-radio__padding: calc(var(--hsElevate--formFieldCheckboxRadio__size) / 2); --hsf-field-radio__background-color: #fff; --hsf-field-radio__color: var(--hsElevate--formFieldCheckboxRadio__fillColor); --hsf-field-radio__border-color: var(--hsf-field-input__border-color); --hsf-field-radio__border-width: 1px 1px 1px 1px; --hsf-field-radio__border-style: var(--hsf-field-input__border-style); /* Progress bar CSS vars: - --hsf-progressbar__font-family - --hsf-progressbar__font-family - --hsf-progressbar__font-size - --hsf-progressbar__color - --hsf-progressbar__background-color - --hsf-progressbar__background - --hsf-progressbar__border-color - --hsf-progressbar__border-style - --hsf-progressbar__border-width */ /* Button */ --hsf-button__width: 100%; --hsf-button__font-family: var(--hsElevate--button--primary__font); --hsf-button__font-size: var(--hsElevate--button--primary__fontSize); --hsf-button__font-weight: var(--hsElevate--button--primary__fontWeight); --hsf-button__color: var(--hsElevate--button--primary__textColor); --hsf-button__background-color: var(--hsElevate--button--primary__backgroundColor); --hsf-button__background-image: none; --hsf-button__border-radius: var(--hsElevate--button--primary__borderRadius); --hsf-button__border-width: var(--hsElevate--button--primary__borderThickness); --hsf-button__border-style: solid; --hsf-button__border-color: var(--hsElevate--button--primary__borderColor); --hsf-button__padding: var(--hsElevate--spacing--20) var(--hsElevate--spacing--24); --hsf-button__box-shadow: none; --hsf-button--hover__color: var(--hsElevate--button--primary__hover--textColor); --hsf-button--hover__background-color: var(--hsElevate--button--primary__hover--backgroundColor); --hsf-button--hover__border-color: var(--hsElevate--button--primary__hover--borderColor); --hsf-button--focus__color: var(--hsElevate--button--primary__hover--textColor); --hsf-button--focus__background-color: var(--hsElevate--button--primary__hover--backgroundColor); --hsf-button--focus__border-color: var(--hsElevate--button--primary__hover--borderColor); } @media (max-width: 600px) { :root { --hsElevate--form__padding: var(--hsElevate--spacing--24); } .hsfc-PhoneInput__FlagAndCaret { --hsf-field-input__padding: var(--hsElevate--spacing--20) var(--hsElevate--spacing--16); } } :root { /* Card variant 1 */ /* Shape */ --hsElevate--card--variant1__borderRadius: 16px; --hsElevate--card--variant1__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant1__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant1__backgroundColor: #FFFFFF ; --hsElevate--card--variant1__borderColor: #D3DAE4 ; --hsElevate--card--variant1__textColor: #09152B ; /* Links */ --hsElevate--card--variant1--link__fontColor: #4F38E0 ; --hsElevate--card--variant1--link__textDecoration: none; --hsElevate--card--variant1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant1--link__hover--fontColor: #4F38E0 ; --hsElevate--card--variant1--link__hover--textDecoration: underline; --hsElevate--card--variant1--link__hover--textDecorationColor: #4F38E0 ; /* Icon colors */ --hsElevate--card--variant1__iconColor: #4F38E0 ; --hsElevate--card--variant1__iconBackgroundColor: #D2CAFF ; /* Card variant 2 */ /* Shape */ --hsElevate--card--variant2__borderRadius: 16px; --hsElevate--card--variant2__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant2__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant2__backgroundColor: #F7F9FC ; --hsElevate--card--variant2__borderColor: #D3DAE4 ; --hsElevate--card--variant2__textColor: #09152B ; /* Links */ --hsElevate--card--variant2--link__fontColor: #4F38E0 ; --hsElevate--card--variant2--link__textDecoration: none; --hsElevate--card--variant2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant2--link__hover--fontColor: #4F38E0 ; --hsElevate--card--variant2--link__hover--textDecoration: underline; --hsElevate--card--variant2--link__hover--textDecorationColor: #4F38E0 ; /* Icon colors */ --hsElevate--card--variant2__iconColor: #4F38E0 ; --hsElevate--card--variant2__iconBackgroundColor: #D3DAE4 ; /* Card variant 3 */ /* Shape */ --hsElevate--card--variant3__borderRadius: 16px; --hsElevate--card--variant3__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant3__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant3__backgroundColor: #09152B ; --hsElevate--card--variant3__borderColor: #303F59 ; --hsElevate--card--variant3__textColor: #F7F9FC ; /* Links */ --hsElevate--card--variant3--link__fontColor: #D2CAFF ; --hsElevate--card--variant3--link__textDecoration: none; --hsElevate--card--variant3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant3--link__hover--fontColor: #D2CAFF ; --hsElevate--card--variant3--link__hover--textDecoration: underline; --hsElevate--card--variant3--link__hover--textDecorationColor: #D2CAFF ; /* Icon colors */ --hsElevate--card--variant3__iconColor: #D2CAFF ; --hsElevate--card--variant3__iconBackgroundColor: #303F59 ; /* Card variant 4 */ /* Shape */ --hsElevate--card--variant4__borderRadius: 16px; --hsElevate--card--variant4__iconBorderRadius: 12px; /* Border thickness */ --hsElevate--card--variant4__borderThickness: 1px ; /* Colors */ --hsElevate--card--variant4__backgroundColor: #18233B ; --hsElevate--card--variant4__borderColor: #303F59 ; --hsElevate--card--variant4__textColor: #F7F9FC ; /* Links */ --hsElevate--card--variant4--link__fontColor: #D2CAFF ; --hsElevate--card--variant4--link__textDecoration: none; --hsElevate--card--variant4--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--card--variant4--link__hover--fontColor: #D2CAFF ; --hsElevate--card--variant4--link__hover--textDecoration: underline; --hsElevate--card--variant4--link__hover--textDecorationColor: #D2CAFF ; /* Icon colors */ --hsElevate--card--variant4__iconColor: #D2CAFF ; --hsElevate--card--variant4__iconBackgroundColor: #303F59 ; } :root { /* Light section 1 */ --hsElevate--section--lightSection--1__backgroundColor: #FFFFFF ; --hsElevate--section--lightSection--1__textColor: #09152B ; --hsElevate--section--lightSection--1__accentColor: #4F38E0 ; --hsElevate--section--lightSection--1__captionColor: #647390 ; --hsElevate--section--lightSection--1--blockquote__textColor: #09152B ; --hsElevate--section--lightSection--1--blockquote__backgroundColor: #F7F9FC ; --hsElevate--section--lightSection--1--blockquote__accentColor: #4F38E0 ; --hsElevate--section--lightSection--1--link__fontColor: #4F38E0 ; --hsElevate--section--lightSection--1--link__textDecoration: none; --hsElevate--section--lightSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--1--link__hover--fontColor: #4F38E0 ; --hsElevate--section--lightSection--1--link__hover--textDecoration: underline; --hsElevate--section--lightSection--1--link__hover--textDecorationColor: #4F38E0 ; /* Light section 2 */ --hsElevate--section--lightSection--2__backgroundColor: #F7F9FC ; --hsElevate--section--lightSection--2__textColor: #09152B ; --hsElevate--section--lightSection--2__accentColor: #4F38E0 ; --hsElevate--section--lightSection--2__captionColor: #647390 ; --hsElevate--section--lightSection--2--blockquote__textColor: #09152B ; --hsElevate--section--lightSection--2--blockquote__backgroundColor: #F7F9FC ; --hsElevate--section--lightSection--2--blockquote__accentColor: #4F38E0 ; --hsElevate--section--lightSection--2--link__fontColor: #4F38E0 ; --hsElevate--section--lightSection--2--link__textDecoration: none; --hsElevate--section--lightSection--2--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--2--link__hover--fontColor: #4F38E0 ; --hsElevate--section--lightSection--2--link__hover--textDecoration: underline; --hsElevate--section--lightSection--2--link__hover--textDecorationColor: #4F38E0 ; /* Light section 3 */ --hsElevate--section--lightSection--3__backgroundColor: #F4F2FF ; --hsElevate--section--lightSection--3__textColor: #09152B ; --hsElevate--section--lightSection--3__accentColor: #4F38E0 ; --hsElevate--section--lightSection--3__captionColor: #4D6080 ; --hsElevate--section--lightSection--3--blockquote__textColor: #09152B ; --hsElevate--section--lightSection--3--blockquote__backgroundColor: #F4F2FF ; --hsElevate--section--lightSection--3--blockquote__accentColor: #4F38E0 ; --hsElevate--section--lightSection--3--link__fontColor: #4F38E0 ; --hsElevate--section--lightSection--3--link__textDecoration: none; --hsElevate--section--lightSection--3--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--lightSection--3--link__hover--fontColor: #4F38E0 ; --hsElevate--section--lightSection--3--link__hover--textDecoration: underline; --hsElevate--section--lightSection--3--link__hover--textDecorationColor: #4F38E0 ; /* Dark section 1 */ --hsElevate--section--darkSection--1__backgroundColor: #09152B ; --hsElevate--section--darkSection--1__textColor: #F7F9FC ; --hsElevate--section--darkSection--1__accentColor: #D2CAFF ; --hsElevate--section--darkSection--1__captionColor: #7D8CA5 ; --hsElevate--section--darkSection--1--blockquote__textColor: #F7F9FC ; --hsElevate--section--darkSection--1--blockquote__backgroundColor: #18233B ; --hsElevate--section--darkSection--1--blockquote__accentColor: #D2CAFF ; --hsElevate--section--darkSection--1--link__fontColor: #D2CAFF ; --hsElevate--section--darkSection--1--link__textDecoration: none; --hsElevate--section--darkSection--1--link__textDecorationColor: transparent; /* Hover state */ --hsElevate--section--darkSection--1--link__hover--fontColor: #D2CAFF ; --hsElevate--section--darkSection--1--link__hover--textDecoration: underline; --hsElevate--section--darkSection--1--link__hover--textDecorationColor: #D2CAFF ; } :root { /* Font */ --hsElevate--tag__font: verdana, geneva ; --hsElevate--tag__fontColor: ; --hsElevate--tag__fontSize: 0.875rem ; --hsElevate--tag__fontWeight: 500 ; --hsElevate--tag__fontStyle: normal ; /* Text colors */ --hsElevate--tag__textColor: #063E95 ; /* Background colors */ --hsElevate--tag__backgroundColor: #E5F0FF ; /* Shape */ --hsElevate--tag__borderRadius: 50px; /* Border thickness */ --hsElevate--tag__borderThickness: 1px ; --hsElevate--tag__borderColor: #E5F0FF ; /* Case */ --hsElevate--tag__case: none ; } :root { /* Border radius based on shape */ --hsElevate-sharp: 0; --hsElevate-rounded--extra-small: 4px; --hsElevate-rounded--small: 8px; --hsElevate-rounded: 16px; --hsElevate-rounded--large: 24px; --hsElevate-rounded--extra-large: 32px; --hsElevate-circle: 50%; } :root { --hsElevate--icon--small__size: 16px; --hsElevate--icon--medium__size: 24px; --hsElevate--icon--large__size: 32px; } /* Generic */ *, *:before, *:after { box-sizing: border-box; } /*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */ /* Document ========================================================================== */ /** * 1. Correct the line height in all browsers. * 2. Prevent adjustments of font size after orientation changes in iOS. */ html { line-height: 1.15; /* 1 */ -webkit-text-size-adjust: 100%; /* 2 */ } /* Sections ========================================================================== */ /** * Remove the margin in all browsers. */ body { overflow-x: hidden; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * Add the correct box sizing in Firefox. */ hr { box-sizing: content-box; height: 0; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * Add the correct font weight in Chrome, Edge, and Safari. */ b, strong { font-weight: bolder; } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Forms ========================================================================== */ /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Remove the inheritance of text transform in Edge and Firefox. * 1. Remove the inheritance of text transform in Firefox. */ button, select { text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type='button'], [type='reset'], [type='submit'] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type='button']::-moz-focus-inner, [type='reset']::-moz-focus-inner, [type='submit']::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type='button']:-moz-focusring, [type='reset']:-moz-focusring, [type='submit']:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * Remove the padding so developers are not caught out when they zero out `fieldset` elements in all browsers. */ legend { padding: 0; } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type='number']::-webkit-inner-spin-button, [type='number']::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type='search'] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type='search']::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Objects */ .dnd-section { padding: var(--hsElevate--section--medium__verticalPadding) var(--hsElevate--section--horizontalPadding); } .dnd-section > .row-fluid, .hs-elevate-content-wrapper { margin: 0 auto; max-width: var(--hsElevate--contentWrapper--wide__maxWidth); } /* Include gutters so page content aligns with the header/footer container. */ .hs-elevate-content-wrapper { max-width: calc(var(--hsElevate--contentWrapper--wide__maxWidth) + 2 * var(--hsElevate--section--horizontalPadding)); padding: 0 var(--hsElevate--section--horizontalPadding); } /* Helper Classes */ .hs-elevate-content-wrapper--sm { max-width: var(--hsElevate--contentWrapper--narrow__maxWidth); padding: 0; } .hs-elevate-content-wrapper--md { max-width: var(--hsElevate--contentWrapper--medium__maxWidth); padding: 0; } /* Padding for non DND sections */ .hs-elevate-content-padding { padding-block: var(--hsElevate--section--medium__verticalPadding); } .hs-elevate-content-padding--extra-small { padding-block: var( --hsElevate--section--extraSmall__verticalPadding); } .hs-elevate-content-padding--small { padding-block: var(--hsElevate--section--small__verticalPadding); } .hs-elevate-content-padding--large { padding-block: var(--hsElevate--section--large__verticalPadding); } .hs-elevate-content-padding--extra-large { padding-block: var(--hsElevate--section--extraLarge__verticalPadding); } .row-fluid { display: flex; flex-wrap: wrap; width: 100%; } .row-fluid .span1, .row-fluid .span2, .row-fluid .span3, .row-fluid .span4, .row-fluid .span5, .row-fluid .span6, .row-fluid .span7, .row-fluid .span8, .row-fluid .span9, .row-fluid .span10, .row-fluid .span11, .row-fluid .span12 { min-height: 1px; width: 100%; } @media (min-width: 768px) { .row-fluid { flex-wrap: nowrap; justify-content: space-between; } .row-fluid .span1 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 1 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 11 / 100 ); } .row-fluid .span2 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 2 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 10 / 100 ); } .row-fluid .span3 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 3 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 9 / 100 ); } .row-fluid .span4 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 4 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 8 / 100 ); } .row-fluid .span5 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 5 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 7 / 100 ); } .row-fluid .span6 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 6 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 6 / 100 ); } .row-fluid .span7 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 7 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 5 / 100 ); } .row-fluid .span8 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 8 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 4 / 100 ); } .row-fluid .span9 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 9 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 3 / 100 ); } .row-fluid .span10 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 10 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 2 / 100 ); } .row-fluid .span11 { width: calc( var(--hsElevate--column__widthMultiplier) * 1% * 11 - var(--hsElevate--column__gap) * var(--hsElevate--column__widthMultiplier) * 1 / 100 ); } } /* Elements */ html { font-size: var(--hsElevate--baseText__fontSize); } body { background-color: var(--hsElevate--section--lightSection--1__backgroundColor); color: var(--hsElevate--section--lightSection--1__textColor); font-family: var(--hsElevate--body__font); font-size: var(--hsElevate--body__fontSize); font-style: var(--hsElevate--body__fontStyle); font-weight: var(--hsElevate--body__fontWeight); line-height: var(--hsElevate--body__lineHeight); overflow-wrap: break-word; } html[lang^='ja'] body, html[lang^='zh'] body, html[lang^='ko'] body { line-break: strict; overflow-wrap: normal; word-break: break-all; } /* Paragraphs */ p { margin-block: var(--hsElevate--text__margin); } a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link), a.hs-elevate-link--primary, .hs-elevate-link--primary a { color: var(--hsElevate--link--primary__fontColor); cursor: pointer; -webkit-text-decoration: var(--hsElevate--link--primary__textDecoration); text-decoration: var(--hsElevate--link--primary__textDecoration); text-decoration-color: var(--hsElevate--link--primary__textDecorationColor); } a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus, a.hs-elevate-link--primary:hover, .hs-elevate-link--primary a:hover, a.hs-elevate-link--primary:focus, .hs-elevate-link--primary a:focus { color: var(--hsElevate--link--primary__hover--fontColor); -webkit-text-decoration: var(--hsElevate--link--primary__hover--textDecoration); text-decoration: var(--hsElevate--link--primary__hover--textDecoration); text-decoration-color: var(--hsElevate--link--primary__hover--textDecorationColor); } a.hs-elevate-link--secondary, .hs-elevate-link--secondary a { color: var(--hsElevate--link--secondary__fontColor); cursor: pointer; -webkit-text-decoration: var(--hsElevate--link--secondary__textDecoration); text-decoration: var(--hsElevate--link--secondary__textDecoration); text-decoration-color: var(--hsElevate--link--secondary__textDecorationColor); } a.hs-elevate-link--secondary:hover, .hs-elevate-link--secondary a:hover a.hs-elevate-link--secondary:focus, .hs-elevate-link--secondary a:focus { color: var(--hsElevate--link--secondary__hover--fontColor); -webkit-text-decoration: var(--hsElevate--link--secondary__hover--textDecoration); text-decoration: var(--hsElevate--link--secondary__hover--textDecoration); text-decoration-color: var(--hsElevate--link--secondary__hover--textDecorationColor); } /* Headings */ h1, h2, h3, h4, h5, h6, .hs-elevate-display-1, .hs-elevate-display-2 { line-height: var(--hsElevate--heading__lineHeight); margin-block: var(--hsElevate--text__margin); } .hs-elevate-display-1 { font-family: var(--hsElevate--display1__font); font-size: calc(var(--hsElevate--display1__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: normal; font-weight: 400; } .hs-elevate-display-2 { font-family: var(--hsElevate--display2__font); font-size: calc(var(--hsElevate--display2__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: normal; font-weight: 400; } h1, .hs-elevate-h1 { font-family: var(--hsElevate--h1__font); font-size: calc(var(--hsElevate--h1__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h1__fontStyle); font-weight: var(--hsElevate--h1__fontWeight); } h2, .hs-elevate-h2 { font-family: var(--hsElevate--h2__font); font-size: calc(var(--hsElevate--h2__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h2__fontStyle); font-weight: var(--hsElevate--h2__fontWeight); } h3, .hs-elevate-h3 { font-family: var(--hsElevate--h3__font); font-size: calc(var(--hsElevate--h3__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h3__fontStyle); font-weight: var(--hsElevate--h3__fontWeight); } h4, .hs-elevate-h4 { font-family: var(--hsElevate--h4__font); font-size: calc(var(--hsElevate--h4__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h4__fontStyle); font-weight: var(--hsElevate--h4__fontWeight); } h5, .hs-elevate-h5 { font-family: var(--hsElevate--h5__font); font-size: calc(var(--hsElevate--h5__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h5__fontStyle); font-weight: var(--hsElevate--h5__fontWeight); } h6, .hs-elevate-h6 { font-family: var(--hsElevate--h6__font); font-size: calc(var(--hsElevate--h6__fontSize) * var(--hsElevate--heading__tablet-modifier)); font-style: var(--hsElevate--h6__fontStyle); font-weight: var(--hsElevate--h6__fontWeight); } @media (min-width: 767px) { .hs-elevate-display-1 { font-size: var(--hsElevate--display1__fontSize); } .hs-elevate-display-2 { font-size: var(--hsElevate--display2__fontSize); } h1, .hs-elevate-h1 { font-size: var(--hsElevate--h1__fontSize); } h2, .hs-elevate-h2 { font-size: var(--hsElevate--h2__fontSize); } h3, .hs-elevate-h3 { font-size: var(--hsElevate--h3__fontSize); } h4, .hs-elevate-h4 { font-size: var(--hsElevate--h4__fontSize); } h5, .hs-elevate-h5 { font-size: var(--hsElevate--h5__fontSize); } h6, .hs-elevate-h6 { font-size: var(--hsElevate--h6__fontSize); } } /* Lists */ ul, ol { margin-block: var(--hsElevate--text__margin); } /* Blockquotes */ blockquote { padding: var(--hsElevate--spacing--24, 24px); border-radius: var(--hsElevate-rounded--extra-small); border-left: 3px solid var(--hsElevate--blockquote__accentColor, var(--hsElevate--section--lightSection--1--blockquote__accentColor)); background-color: var(--hsElevate--blockquote__backgroundColor, var(--hsElevate--section--lightSection--1--blockquote__backgroundColor)); color: var(--hsElevate--blockquote__fontColor, var(--hsElevate--section--lightSection--1--blockquote__textColor)); font-family: var(--hsElevate--quotes__font); font-size: var(--hsElevate--quotes__fontSize); font-style: var(--hsElevate--quotes__fontStyle); font-weight: var(--hsElevate--quotes__fontWeight); margin-block: var(--hsElevate--text__margin); } :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { padding: var(--hsElevate--spacing--24, 24px); border-radius: var(--hsElevate-rounded--extra-small); border-left: 3px solid var(--hsElevate--blockquote__accentColor, var(--hsElevate--section--lightSection--1--blockquote__accentColor)); background-color: var(--hsElevate--blockquote__backgroundColor, var(--hsElevate--section--lightSection--1--blockquote__backgroundColor)); color: var(--hsElevate--blockquote__fontColor, var(--hsElevate--section--lightSection--1--blockquote__textColor)); font-family: var(--hsElevate--quotes__font); font-size: var(--hsElevate--quotes__fontSize); font-style: var(--hsElevate--quotes__fontStyle); font-weight: var(--hsElevate--quotes__fontWeight); margin-block: var(--hsElevate--text__margin); } @media (max-width: 767.98px) { :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) blockquote { font-size: calc(var(--hsElevate--body__fontSize) + 4px); margin-inline: 0; } } /* Captions */ .hs-elevate-caption { color: var(--hsElevate--captions__fontColor, var(--hsElevate--section--lightSection--1--captionColor)); font-family: var(--hsElevate--captions__font); font-size: var(--hsElevate--captions__fontSize); font-style: var(--hsElevate--captions__fontStyle); font-weight: var(--hsElevate--captions__fontWeight); text-transform: var(--hsElevate--captions__case); } /* Tags */ .hs-elevate-tag { padding: 2px 8px; border-color: var(--hsElevate--tag__borderColor); border-radius: var(--hsElevate--tag__borderRadius); border-style: solid; border-width: var(--hsElevate--tag__borderThickness); background-color: var(--hsElevate--tag__backgroundColor); color: var(--hsElevate--tag__textColor); font-family: var(--hsElevate--tag__font); font-size: var(--hsElevate--tag__fontSize); font-style: var(--hsElevate--tag__fontStyle); font-weight: var(--hsElevate--tag__fontWeight); text-transform: var(--hsElevate--tag__case); } /* Images in rich text */ :is(.hs_cos_wrapper_type_rich_text, .hs_cos_wrapper_type_inline_richtext_field) img { max-width: 100%; margin-block-end: var(--hsElevate--rteImages__margin); } .hs-elevate-button:focus { outline: 2px solid #53ACFF; outline-offset: 2px; } .hs-elevate-button--primary { font-family: var(--hsElevate--button--primary__font); font-size: var(--hsElevate--button--primary__fontSize); font-weight: var(--hsElevate--button--primary__fontWeight); font-style: var(--hsElevate--button--primary__fontStyle); color: var(--hsElevate--button--primary__textColor); border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--hsElevate--button--primary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--primary__borderColor); border-radius: var(--hsElevate--button--primary__borderRadius); text-decoration: none; } .hs-elevate-button--primary:hover { color: var(--hsElevate--button--primary__hover--textColor); background-color: var(--hsElevate--button--primary__hover--backgroundColor); border-color: var(--hsElevate--button--primary__hover--borderColor); border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--primary:active { color: var(--hsElevate--button--primary__hover--textColor); background-color: #4a36ca ; border-color: ; border-width: var(--hsElevate--button--primary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--secondary { font-family: var(--hsElevate--button--secondary__font); font-size: var(--hsElevate--button--secondary__fontSize); font-weight: var(--hsElevate--button--secondary__fontWeight); font-style: var(--hsElevate--button--secondary__fontStyle); color: var(--hsElevate--button--secondary__textColor); border-width: var(--hsElevate--button--secondary__borderThickness); background-color: var(--hsElevate--button--secondary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--secondary__borderColor); border-radius: var(--hsElevate--button--secondary__borderRadius); text-decoration: none; } .hs-elevate-button--secondary:hover { color: var(--hsElevate--button--secondary__hover--textColor); background-color: var(--hsElevate--button--secondary__hover--backgroundColor); border-color: var(--hsElevate--button--secondary__hover--borderColor); border-width: var(--hsElevate--button--secondary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--secondary:active { color: var(--hsElevate--button--secondary__hover--textColor); background-color: transparent ; border-color: #4a36ca ; border-width: var(--hsElevate--button--secondary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--tertiary { font-family: var(--hsElevate--button--tertiary__font); font-size: var(--hsElevate--button--tertiary__fontSize); font-weight: var(--hsElevate--button--tertiary__fontWeight); font-style: var(--hsElevate--button--tertiary__fontStyle); color: var(--hsElevate--button--tertiary__textColor); border-width: var(--hsElevate--button--tertiary__borderThickness); background-color: var(--hsElevate--button--tertiary__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--tertiary__borderColor); border-radius: var(--hsElevate--button--tertiary__borderRadius); text-decoration: none; } .hs-elevate-button--tertiary:hover { color: var(--hsElevate--button--tertiary__hover--textColor); background-color: var(--hsElevate--button--tertiary__hover--backgroundColor); border-color: var(--hsElevate--button--tertiary__hover--borderColor); border-width: var(--hsElevate--button--tertiary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--tertiary:active { color: var(--hsElevate--button--tertiary__hover--textColor); background-color: #cbc7e1 ; border-color: ; border-width: var(--hsElevate--button--tertiary__hover--borderThickness); text-decoration: none; } .hs-elevate-button--accent { font-family: var(--hsElevate--button--accent__font); font-size: var(--hsElevate--button--accent__fontSize); font-weight: var(--hsElevate--button--accent__fontWeight); font-style: var(--hsElevate--button--accent__fontStyle); color: var(--hsElevate--button--accent__textColor); border-width: var(--hsElevate--button--accent__borderThickness); background-color: var(--hsElevate--button--accent__backgroundColor); border-style: solid; border-color: var(--hsElevate--button--accent__borderColor); border-radius: var(--hsElevate--button--accent__borderRadius); text-decoration: none; } .hs-elevate-button--accent:hover { color: var(--hsElevate--button--accent__hover--textColor); background-color: var(--hsElevate--button--accent__hover--backgroundColor); border-color: var(--hsElevate--button--accent__hover--borderColor); border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } .hs-elevate-button--accent:active { color: var(--hsElevate--button--accent__hover--textColor); background-color: ; border-color: #cbc7e1 ; border-width: var(--hsElevate--button--accent__hover--borderThickness); text-decoration: none; } .hs-elevate-card--variant-1 { border-color: var(--hsElevate--card--variant1__borderColor); border-radius: var(--hsElevate--card--variant1__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant1__borderThickness); background-color: var(--hsElevate--card--variant1__backgroundColor); color: var(--hsElevate--card--variant1__textColor); } .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant1--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant1--link__textDecoration); text-decoration: var(--hsElevate--card--variant1--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant1--link__textDecorationColor); } .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-1 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant1--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant1--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant1--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant1--link__hover--textDecorationColor); } .hs-elevate-card--variant-2 { border-color: var(--hsElevate--card--variant2__borderColor); border-radius: var(--hsElevate--card--variant2__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant2__borderThickness); background-color: var(--hsElevate--card--variant2__backgroundColor); color: var(--hsElevate--card--variant2__textColor); } .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant2--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant2--link__textDecoration); text-decoration: var(--hsElevate--card--variant2--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant2--link__textDecorationColor); } .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-2 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant2--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant2--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant2--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant2--link__hover--textDecorationColor); } .hs-elevate-card--variant-3 { border-color: var(--hsElevate--card--variant3__borderColor); border-radius: var(--hsElevate--card--variant3__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant3__borderThickness); background-color: var(--hsElevate--card--variant3__backgroundColor); color: var(--hsElevate--card--variant3__textColor); } .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant3--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant3--link__textDecoration); text-decoration: var(--hsElevate--card--variant3--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant3--link__textDecorationColor); } .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-3 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant3--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant3--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant3--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant3--link__hover--textDecorationColor); } .hs-elevate-card--variant-4 { border-color: var(--hsElevate--card--variant4__borderColor); border-radius: var(--hsElevate--card--variant4__borderRadius); border-style: solid; border-width: var(--hsElevate--card--variant4__borderThickness); background-color: var(--hsElevate--card--variant4__backgroundColor); color: var(--hsElevate--card--variant4__textColor); } .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link) { color: var(--hsElevate--card--variant4--link__fontColor); -webkit-text-decoration: var(--hsElevate--card--variant4--link__textDecoration); text-decoration: var(--hsElevate--card--variant4--link__textDecoration); text-decoration-color: var(--hsElevate--card--variant4--link__textDecorationColor); } .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):hover, .hs-elevate-card--variant-4 a:not(.hs-elevate-button, .hs-elevate-blog-listing__pagination-link, .hs-elevate-card--blog__link):focus { color: var(--hsElevate--card--variant4--link__hover--fontColor); -webkit-text-decoration: var(--hsElevate--card--variant4--link__hover--textDecoration); text-decoration: var(--hsElevate--card--variant4--link__hover--textDecoration); text-decoration-color: var(--hsElevate--card--variant4--link__hover--textDecorationColor); } .cs-feature { overflow: hidden; } .cs-feature .hs-elevate-details__label { font-weight: 600; } .cs-feature .cs-feature__link:hover { opacity: 0.8; } .cs-feature .cs-feature__link .cs-feature__chevron-path { fill: currentcolor; } .cs-feature .cs-feature__link:hover .cs-feature__chevron-path { opacity: 0.8; } /* Form */ .hs-form, .hs-elevate-system-form form, .hs-elevate-system-form--subscription-preferences form .email-prefs { padding: var(--hsElevate--form__padding); border-color: var(--hsElevate--form__borderColor); border-radius: var(--hsElevate--form__borderRadius); border-style: solid; border-width: var(--hsElevate--form__borderThickness); background: var(--hsElevate--form__backgroundColor); } /* Form labels */ :is(.hs-form, .hs-elevate-system-form) label, .hs-elevate-system-form--subscription-preferences .fakelabel { display: block; color: var(--hsElevate--formLabel__textColor); font-family: var(--hsElevate--formLabel__font); font-size: var(--hsElevate--formLabel__fontSize); font-weight: var(--hsElevate--formLabel__fontWeight); margin-block-end: var(--hsElevate--formLabel__marginBottom); } /* Form fields */ .hs-form .hs-form-field { margin-block-end: var(--hsElevate--formField__marginBottom); } :is(.hs-form, .hs-elevate-system-form) input[type='text'], :is(.hs-form, .hs-elevate-system-form) input[type='email'], :is(.hs-form, .hs-elevate-system-form) input[type='password'], :is(.hs-form, .hs-elevate-system-form) input[type='tel'], :is(.hs-form, .hs-elevate-system-form) input[type='number'], :is(.hs-form, .hs-elevate-system-form) input[type='search'], :is(.hs-form, .hs-elevate-system-form) select, :is(.hs-form, .hs-elevate-system-form) textarea { width: 100% !important; border-radius: var(--hsElevate--formField__borderRadius); border-top: var(--hsElevate--formField__borderTop); border-right: var(--hsElevate--formField__borderRight); border-bottom: var(--hsElevate--formField__borderBottom); border-left: var(--hsElevate--formField__borderLeft); background-color: var(--hsElevate--formField__backgroundColor); color: var(--hsElevate--formFieldInput__textColor); padding-block: var(--hsElevate--spacing--20); padding-inline: var(--hsElevate--spacing--32); } .hs-input.hs-fieldtype-intl-phone { display: flex; width: 100% !important; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 8px; /* matches column margins from form injection */ } .hs-input.hs-fieldtype-intl-phone > input { flex: 1 0 calc(70% - 8px) !important; } .hs-input.hs-fieldtype-intl-phone > select { flex: 1 0 30% !important; } @media (max-width: 600px) { .hs-input.hs-fieldtype-intl-phone { display: flex; width: 100%; flex-direction: column; gap: 8px; } .hs-input.hs-fieldtype-intl-phone > select, .hs-input.hs-fieldtype-intl-phone > input { min-width: 100%; flex: 1 1 100%; } .hs-input.hs-fieldtype-intl-phone > select { padding-inline: var(--hsElevate--spacing--16); } } .hs-form-field.hs-fieldtype-file .hs-input, .hs-form fieldset { max-width: 100% !important; } /* Form fields - textarea */ .hs-form textarea { position: relative; height: 160px; border-radius: var(--hsElevate--formFieldTextArea__borderRadius); } .hs-form textarea::-webkit-resizer { display: none; } .hs-form .hs_multi_line_field .input { position: relative; } .hs-form .hs_multi_line_field .input:after { position: absolute; right: var(--hsElevate--spacing--8); bottom: var(--hsElevate--spacing--8); content: var(--hsElevate--formField__dragIcon); pointer-events: none; } /* Form fields - select */ .hs-form .hs-fieldtype-select .input { position: relative; } .hs-form select { -webkit-appearance: none; -moz-appearance: none; appearance: none; } .hs-form .hs-fieldtype-select .input:after { position: absolute; top: 50%; right: var(--hsElevate--spacing--32); content: var(--hsElevate--formField__selectIcon); pointer-events: none; transform: translateY(-50%); } /* Form fields - datepicker */ .hs-form .hs-dateinput { position: relative; } .hs-form .hs-dateinput:before { position: absolute; top: 50%; right: var(--hsElevate--spacing--32); content: var(--hsElevate--formField__datepickerIcon); pointer-events: none; transform: translateY(-50%); } /* Form fields - placeholders */ ::-moz-placeholder { color: var(--hsElevate--formFieldPlaceholder__textColor); } ::placeholder { color: var(--hsElevate--formFieldPlaceholder__textColor); } /* Form fields - checkbox/radio */ .hs-form .inputs-list { padding: 0; margin: 0; list-style: none; } .hs-form .inputs-list li { display: block; margin-block-end: var(--hsElevate--spacing--16); } .hs-form .inputs-list li:last-of-type { margin-block-end: 0; } .hs-form .inputs-list :is(input, span) { vertical-align: middle; } :is(.hs-form, .hs-elevate-system-form) input[type='checkbox'], :is(.hs-form, .hs-elevate-system-form) input[type='radio'] { height: var(--hsElevate--formFieldCheckboxRadio__size); width: var(--hsElevate--formFieldCheckboxRadio__size) !important; accent-color: var(--hsElevate--formFieldCheckboxRadio__fillColor); cursor: pointer; margin-inline-end: var(--hsElevate--spacing--12); } /* Form help text */ .hs-form legend { /* To do: figure out where we should pull this from */ color: var(--hsElevate--formHelpText__textColor); margin-block-end: var(--hsElevate--spacing--8); } /* Form rich text */ .hs-form .hs-richtext { color: var(--hsElevate--formLabel__textColor); } .hs-form .hs-richtext img { height: auto; max-width: 100% !important; } /* Form error messages */ .hs-form .hs-input.error { border-color: var(--hsElevate--formRequired__color); } .hs-form .hs-error-msg, .hs-form .hs-error-msgs { color: var(--hsElevate--formRequired__color); margin-block-start: var(--hsElevate--spacing--4); } /* Form button */ :is(.hs-form, .hs-elevate-system-form) .hs-button, :is(.hs-form, .hs-elevate-system-form) input[type='submit'] { display: inline-block; width: 100%; border-color: var(--hsElevate--button--primary__borderColor); border-radius: var(--hsElevate--button--primary__borderRadius); border-style: solid; border-width: var(--hsElevate--button--primary__borderThickness); background-color: var(--hsElevate--button--primary__backgroundColor); color: var(--hsElevate--button--primary__textColor); cursor: pointer; font-family: var(--hsElevate--button--primary__font); font-size: var(--hsElevate--button--primary__fontSize); font-style: var(--hsElevate--button--primary__fontStyle); font-weight: var(--hsElevate--button--primary__fontWeight); padding-block: var(--hsElevate--spacing--20); padding-inline: var(--hsElevate--spacing--24); text-align: center; text-decoration: none; transition: all 0.15s linear; white-space: normal !important; } :is(.hs-form, .hs-elevate-system-form) .hs-button:hover, :is(.hs-form, .hs-elevate-system-form) .hs-button:focus, :is(.hs-form, .hs-elevate-system-form) input[type='submit']:hover, :is(.hs-form, .hs-elevate-system-form) input[type='submit']:focus { border-color: var(--hsElevate--button--primary__hover--borderColor); border-width: var(--hsElevate--button--primary__hover--borderThickness); background-color: var(--hsElevate--button--primary__hover--backgroundColor); color: var(--hsElevate--button--primary__hover--textColor); text-decoration: none; } /* Captcha */ .grecaptcha-badge { margin-block: 0; margin-inline: auto; } /* Components */ /* ============================================================================= base-styling.css Shared foundation for the header and the footer. Load this FIRST. 1. Reset and typography 2. Grid and utility classes the markup relies on (container, row, col-*, visible-*, hidden-*, pull-*, mt-*) 3. Buttons and links (btn-v3, btn-v3-orange, link-v3-*, btn-group-v3) 4. Page shell (site-wrapper, centered) and the demo main container 5. Icon fallback glyphs - DEMO ONLY, delete once icomoon is loaded ============================================================================= */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: "Segoe UI", Arial, Helvetica, sans-serif; font-size: 16px; line-height: 1.5; color: #162c36; background: #fff; } a { color: #04aada; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } button { font: inherit; color: inherit; cursor: pointer; } h1, h3, h4, h6, p, ul { margin-top: 0; } .container { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 15px; } .row { margin-left: -15px; margin-right: -15px; } .row::after { content: ""; display: table; clear: both; } .col-xs-12, .col-md-2, .col-md-3, .col-md-7, .col-md-9, .col-md-12 { position: relative; float: left; width: 100%; padding-left: 15px; padding-right: 15px; } @media (min-width: 992px) { .col-md-2 { width: 16.66667%; } .col-md-3 { width: 25%; } .col-md-7 { width: 58.33333%; } .col-md-9 { width: 75%; } .col-md-12 { width: 100%; } } .hidden { display: none !important; } @media (max-width: 767px) { .hidden-xs { display: none !important; } } @media (min-width: 768px) and (max-width: 991px) { .hidden-sm { display: none !important; } } @media (min-width: 992px) and (max-width: 1199px) { .hidden-md { display: none !important; } } .visible-xs, .visible-sm, .visible-md, .visible-lg { display: none !important; } @media (max-width: 767px) { .visible-xs { display: block !important; } } @media (min-width: 768px) and (max-width: 991px) { .visible-sm { display: block !important; } } @media (min-width: 992px) and (max-width: 1199px) { .visible-md { display: block !important; } } @media (min-width: 1200px) { .visible-lg { display: block !important; } } .mt-10 { margin-top: 10px; } .mt-20 { margin-top: 20px; } .ml-0 { margin-left: 0; } .mr-0 { margin-right: 0; } .p-0 { padding: 0; } .pull-left { float: left !important; } .pull-right { float: right !important; } .img-responsive { display: block; max-width: 100%; height: auto; } .center-block { margin-left: auto; margin-right: auto; } #main-container { padding: 60px 0; min-height: 160vh; } .btn-v3-orange { padding: 6px 18px; border: 2px solid #fb4f14; color: #fff; font-size: 14px; background: #fb4f14; transition: .3s; } .btn-v3-orange:hover { background: #d83a04; border: 2px solid #d83a04; color: #fff; text-decoration: none; box-shadow: none; } .btn-v3-orange:after { content: none; font-family: icomoon; padding-left: 10px; } .btn-v3-orange-border { padding: 6px 18px; border: 2px solid #fb4f14; color: #fb4f14; font-size: 14px; background: transparent; transition: .3s; } .btn-v3-orange-border:hover { color: #fff; background: #fb4f14; border: 2px solid #fb4f14; text-decoration: none; box-shadow: none; } .btn-v3-orange-border:after { content: none; font-family: icomoon; padding-left: 10px; } .btn-v3-black-border { padding: 6px 18px; border: 2px solid #162c36; color: #162c36; font-size: 14px; background: transparent; transition: .3s; } .btn-v3-black-border:hover { background: #162c36; border: 2px solid #162c36; color: #fff; text-decoration: none; } .link-v3-orange { color: #04aada; font-weight: 700; display: block; } .link-v3-orange:hover { color: #0383a8; text-decoration: underline; } .link-v3-orange .icomoon-icon { display: inline-block; vertical-align: text-bottom; padding-left: 5px; } .link-v3-default { color: #04aada; font-weight: 700; display: block; } .link-v3-default:hover { color: #0383a8; text-decoration: underline; } .link-v3-default .icomoon-icon { display: inline-block; vertical-align: text-bottom; padding-left: 5px; } .link-v3-white { color: #fff; } .link-v3-white:hover { text-decoration: underline; color: #fff; } .link-v3-white .icomoon-icon { display: inline-block; vertical-align: text-bottom; padding-left: 5px; } .cta-v3 { margin-bottom: -20px; } .btn-v3 { padding: 14px 30px; font-weight: 700; font-size: 16px; line-height: 20px; display: inline-block; margin-right: 20px; margin-bottom: 20px; border-radius: 0; transition: .3s; } .btn-v3:hover { text-decoration: none; box-shadow: none; } .btn-v3:after { content: none; font-family: icomoon; padding-left: 10px; top: 2px; position: relative; } .btn-v3.btn-v3-small { padding: 6px 18px; font-size: 14px; margin: 0; } .btn-v3.btn-block { width: 100%; } .btn-v3.btn-white-outline { color: #fff; background-color: transparent; border: 2px solid #fff; } .btn-v3.btn-white-outline:hover { color: #162c36; background-color: #fff; border-color: #fff; } .btn-v3.btn-black-outline { color: #162c36; background-color: transparent; border: 2px solid #162c36; } .btn-v3.btn-black-outline:hover { color: #fff; background-color: #162c36; border-color: #162c36; } .btn-v3.btn-blue-outline { color: #016a9c; background-color: transparent; border: 2px solid #016a9c; } .btn-v3.btn-blue-outline:hover { color: #fff; background-color: #016a9c; border-color: #016a9c; } .btn-v3.btn-orange { border: 2px solid #fb4f14; color: #fff; background: #fb4f14; } .btn-v3.btn-orange:hover { background: #d83a04; border: 2px solid #d83a04; color: #fff; } .btn-v3.btn-orange-outline { border: 2px solid #fb4f14; color: #fb4f14; background: transparent; } .btn-v3.btn-orange-outline:hover { color: #fff; background: #fb4f14; border: 2px solid #fb4f14; } .btn-v3.btn-oi-blue { border: 2px solid #04aada; background: #04aada; color: #fff !important; } .btn-v3.btn-oi-blue:hover { border: 2px solid #0383a8; background: #0383a8; } .btn-v3.btn-default-color { border: 2px solid #04aada; color: #fff; background: #04aada; } .btn-v3.btn-default-color:hover { background: #0383a8; border: 2px solid #0383a8; color: #fff; } .btn-v3.btn-default-outline { color: #04aada; background-color: transparent; border: 2px solid #04aada; } .btn-v3.btn-default-outline:hover { color: #fff; background-color: #04aada; border-color: #04aada; } .btn-group-v3 { position: relative; display: inline-block; vertical-align: top; margin-right: 20px; } .btn-group-v3:hover { cursor: pointer; } .btn-group-v3 .caret { border-top: 6px dashed; } .btn-group-v3 .btn-v3 { margin-right: 0; } .btn-group-v3 .btn-v3:after { content: none; } .btn-group-v3 .dropdown-menu { margin-top: -20px; padding: 10px 0; } .btn-group-v3 .dropdown-menu li { margin-right: 0; margin-left: 0; width: 100%; } .btn-group-v3 .dropdown-menu li a { padding: 10px 20px; width: 100%; display: block; } @media(max-width: 767px) { .btn-block-xs { display:block; width: 100%; } .btn-block-xs.btn-v3 { margin: 0 0 20px; padding-left: 32px; padding-right: 32px; text-align: center; } .btn-block-xs .dropdown-menu { margin-top: 0; } } @media(min-width: 768px) { .centered .btn-v3 { margin-left:10px; margin-right: 10px; } .centered .btn-group-v3 { margin-left: 10px; margin-right: 10px; } .centered .btn-group-v3 .btn-v3 { margin-left: 0; margin-right: 0; } } .site-wrapper { overflow: hidden; position: relative; width: 100%; } .centered { text-align: center !important; } .icomoon-icon { display: inline-block; width: 24px; height: 24px; background-color: currentColor; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; vertical-align: middle; } .icon-menu_A { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M4 7h16M4 12h16M4 17h16'/%3E%3C/svg%3E"); } .icon-search_A { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.2 16.2 4.8 4.8'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m16.2 16.2 4.8 4.8'/%3E%3C/g%3E%3C/svg%3E"); } .icon-user { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20c0-4 3.4-6 7.5-6s7.5 2 7.5 6'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4.5 20c0-4 3.4-6 7.5-6s7.5 2 7.5 6'/%3E%3C/g%3E%3C/svg%3E"); } .icon-globe { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17'/%3E%3C/g%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cg fill='none' stroke='%23000' stroke-width='1.6'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cellipse cx='12' cy='12' rx='4.5' ry='9'/%3E%3Cpath d='M3.5 9h17M3.5 15h17'/%3E%3C/g%3E%3C/svg%3E"); } .icon-arrow_forward { -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E"); mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' d='M4 12h15m-6-6 6 6-6 6'/%3E%3C/svg%3E"); } /* ============================================================================= header-styling.css ============================================================================= */ #head-v3 { background-color: #fff; } #head-v3 .sticky { position: fixed; background: #fff; z-index: 999; width: 100%; } #head-v3 .sticky-wrap { border-bottom: 1px solid #eff1f1; } #head-v3 .sticky-wrap.stuck { z-index: 999999; } #head-v3 #hv3-top { background-color: #04aada; } #head-v3 #hv3-top a:hover { text-decoration: none; } #head-v3 #hv3-top>.container>ul { margin: 0; padding: 0; list-style: none; text-align: right; } #head-v3 #hv3-top>.container>ul>li { display: inline-block; padding: 0; position: relative; cursor: pointer; padding: 2px 10px 6px; } #head-v3 #hv3-top>.container>ul>li.hv3-country,#head-v3 #hv3-top>.container>ul>li#signin-container { position: static; } #head-v3 #hv3-top>.container>ul>li.phone-number { color: #fff; font-size: 14px; cursor: default; } #head-v3 #hv3-top>.container>ul>li.phone-number .icomoon-icon { font-size: 13px; margin-right: 7px; } #head-v3 #hv3-top>.container>ul>li a.txt-lnk { font-size: 14px; color: #fff; } #head-v3 #hv3-top>.container>ul>li a.txt-lnk:hover { text-decoration: underline; } #head-v3 #hv3-top>.container>ul .utility .icomoon-icon { vertical-align: middle; color: #fff; } #head-v3 #hv3-top>.container>ul .utility .icomoon-icon.icon-search_A,#head-v3 #hv3-top>.container>ul .utility .icomoon-icon.icon-user { font-size: 24px; } #head-v3 #hv3-top>.container>ul .hv3-search { position: inherit; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper { visibility: hidden; opacity: 0; transition: visibility .5s linear,opacity .5s linear; position: absolute; width: 100%; left: 0; z-index: 999; margin-top: 5px; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper.open { visibility: visible; opacity: 1; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container { background: #003d4d; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox { width: 100%; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .close-search { width: 40px; height: 40px; position: absolute; right: 0; top: 20px; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .close-search:after { font-family: 'icomoon' !important; color: #fff; font-size: 35px; position: relative; top: -9px; font-weight: 400; } @media(min-width: 768px) { #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .close-search:after { font-size:40px; top: -10px; } } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox { width: 94%; float: left; padding: 20px 0; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box { border: 0; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box.magic-box-hasFocus { box-shadow: none !important; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box.magic-box-hasFocus .magic-box-suggestions.magic-box-hasSuggestion { top: 42px; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input { height: 42px; background: transparent; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input .magic-box-underlay { height: 42px; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input .magic-box-clear { display: none; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input>input { background: #003d4d; height: 42px; font-size: 30px; color: #e3f3f3; font-weight: normal; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input>input::-moz-placeholder { color: #e3f3f3; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input>input::placeholder { color: #e3f3f3; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-suggestions .magic-box-suggestion-footer { color: #04aada; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .CoveoSearchButton { background: none; border: none; height: auto; width: 60px; } #head-v3 #hv3-top>.container>ul .hv3-search .search-wrapper .search-container #searchbox .CoveoSearchbox .CoveoSearchButton .coveo-search-button:before { font-size: 36px; top: -20px; } @media(min-width: 768px) and (max-width:991px) { #head-v3 #hv3-top>.container>ul .hv3-search.mobile-search .search-wrapper .search-container #searchbox .close-search { top:8px; } } #head-v3 #hv3-top>.container>ul #signin-container { padding: 0; } #head-v3 #hv3-top>.container>ul #signin-container .badge.is-logged-in { background-color: #3e831c; width: 14px; padding: 0; border-radius: 16px; height: 14px; font-size: 12px; font-weight: bold; top: 16px; position: absolute; left: auto; display: none; margin-left: 12px; } #head-v3 #hv3-top>.container>ul #signin-container .badge.is-logged-in i { font-size: 10px; font-weight: bold; padding: 2px; } #head-v3 #hv3-top>.container>ul #signin-container .signin-drop-down { visibility: hidden; opacity: 0; transition: visibility .5s linear,opacity .5s linear; width: 200px; position: absolute; background: #fff; text-align: left; padding: 10px; margin: 5px 0 0 -8px; list-style: none; z-index: 999; right: 0; } #head-v3 #hv3-top>.container>ul #signin-container .signin-drop-down li { padding: 4px 0; } #head-v3 #hv3-top>.container>ul #signin-container .signin-drop-down button,#head-v3 #hv3-top>.container>ul #signin-container .signin-drop-down a { display: block; width: 100%; text-align: center; font-weight: bold; } #head-v3 #hv3-top>.container>ul #signin-container .signin-drop-down .is-logged-in { display: none; } #head-v3 #hv3-top>.container>ul #signin-container.open .signin-drop-down { visibility: visible; opacity: 1; } #head-v3 #hv3-top>.container>ul .hv3-country span.usa { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 19 19'%3E%3Ccircle cx='9.5' cy='9.5' r='9.5' fill='%23fff'/%3E%3Cpath fill='%23b22234' d='M1.4 4h16.2v1.2H1.4zm0 2.4h16.2v1.2H1.4zm0 2.4h16.2V10H1.4zm0 2.4h16.2v1.2H1.4zm0 2.4h16.2v1.2H1.4z'/%3E%3Cpath fill='%233c3b6e' d='M0 0h9.7v8.8H0z'/%3E%3C/svg%3E"); } #head-v3 #hv3-top>.container>ul .hv3-country .hv3-country-drop-down { visibility: hidden; opacity: 0; transition: visibility .5s linear,opacity .5s linear; width: 200px; position: absolute; background: #fff; text-align: left; padding: 6px 0; margin: 5px 0 0 -8px; list-style: none; z-index: 999; right: 0; } #head-v3 #hv3-top>.container>ul .hv3-country .hv3-country-drop-down>li { padding: 5px 15px; } #head-v3 #hv3-top>.container>ul .hv3-country .hv3-country-drop-down>li:hover { background-color: #ebebeb; } #head-v3 #hv3-top>.container>ul .hv3-country .hv3-country-drop-down>li a { font-size: 14px; font-weight: normal; font-stretch: normal; font-style: normal; letter-spacing: normal; text-align: left; color: #00556c; } #head-v3 #hv3-top>.container>ul .hv3-country .hv3-country-drop-down>li a:hover { text-decoration: none; } #head-v3 #hv3-top>.container>ul .hv3-country.open .hv3-country-drop-down { visibility: visible; opacity: 1; } #head-v3 #hv3-top>.container>ul #signin-container,#head-v3 #hv3-top>.container>ul .hv3-country { width: 37px; } #head-v3 #hv3-top>.container>ul #signin-container>div,#head-v3 #hv3-top>.container>ul .hv3-country>div { position: absolute; top: 2px; } #head-v3 #hv3-top>.container>ul #signin-container>div.v3-drop-down-over-lay,#head-v3 #hv3-top>.container>ul .hv3-country>div.v3-drop-down-over-lay { top: 33px; } #head-v3 #hv3-top>.container>ul #signin-container>div .signin-drop-down,#head-v3 #hv3-top>.container>ul #signin-container>div .hv3-country-drop-down,#head-v3 #hv3-top>.container>ul .hv3-country>div .signin-drop-down,#head-v3 #hv3-top>.container>ul .hv3-country>div .hv3-country-drop-down { right: 0; } #head-v3 #hv3-top>.container>ul .v3-drop-down-over-lay { top: 32px; } #head-v3 #hv3-bottom { display: flex; justify-content: space-between; align-items: center; } #head-v3 #hv3-bottom .mobile-menu-container,#head-v3 #hv3-bottom .close-mobile-menu,#head-v3 #hv3-bottom nav .v3-tier-1 span.menu-back,#head-v3 #hv3-bottom nav .v3-tier-1 span.menu-back-tier-2,#head-v3 #hv3-bottom .mobile-nav-over-lay { display: none; } #head-v3 #hv3-bottom #logo { margin: 14px 0 20px; } #head-v3 #hv3-bottom #logo img { height: 45px; } #head-v3 #hv3-bottom #logo.binarytree-logo img { width: 187px; } #head-v3 #hv3-bottom nav { margin-top: 30px; display: inline-block; } #head-v3 #hv3-bottom nav .v3-tier-1 { float: left; color: #00556c; font-size: 17px; font-weight: bold; margin-bottom: -5px; } #head-v3 #hv3-bottom nav .v3-tier-1>span { margin-right: 30px; padding-bottom: 0; border-bottom: 4px solid #fff; display: block; cursor: pointer; margin-bottom: 20px; line-height: 24px; } @media(min-width: 991px) { #head-v3 #hv3-bottom nav .v3-tier-1>span:hover { color:#04aada; border-bottom: 4px solid #04aada; } } #head-v3 #hv3-bottom nav .v3-tier-1>span>a { color: #00556c; } #head-v3 #hv3-bottom nav .v3-tier-1>span>a:hover { text-decoration: none; } @media(min-width: 991px) { #head-v3 #hv3-bottom nav .v3-tier-1>span>a:hover { color:#04aada; } } #head-v3 #hv3-bottom nav .v3-tier-1.open .v3-tier-2.v3-mega-nav,#head-v3 #hv3-bottom nav .v3-tier-1.open .v3-tier-2.v3-drop-down { visibility: visible; opacity: 1; } #head-v3 #hv3-bottom nav .v3-tier-1.open .v3-drop-down-over-lay { width: 100%; height: 100vh; background: rgba(51,51,51,.7); left: 0; z-index: 999998; } #head-v3 #hv3-bottom nav .v3-tier-1.open>span { color: #04aada; border-bottom: 4px solid #04aada; } #head-v3 #hv3-bottom nav .v3-tier-1:last-child { margin-left: 20px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav { visibility: hidden; opacity: 0; transition: visibility .5s linear,opacity .5s linear; width: 100%; position: absolute; right: 0; z-index: 999999; text-align: left; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div { box-shadow: 0 -1px 5px rgba(170,170,170,.5); -webkit-box-shadow: 0 -1px 5px rgba(170,170,170,.5); } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row { display: flex; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 { padding: 40px 20px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 .col-md-2.v3-tier-3 { padding-right: 0; padding-left: 10px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 .col-md-2.v3-tier-3:first-child { padding-left: 15px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 .col-md-2.v3-tier-3 .link-v3-orange,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 .col-md-2.v3-tier-3 .link-v3-default { font-size: 14px; padding-top: 10px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 .col-md-2.v3-tier-3 .link-v3-orange .icomoon-icon,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div>.container>.row>.col-xs-12 .col-md-2.v3-tier-3 .link-v3-default .icomoon-icon { font-size: 18px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav .hv3-right-col { background: #fff; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav .close-mega-menu { width: 36px; height: 36px; position: absolute; z-index: 99; right: 15px; top: 12px; cursor: pointer; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav .close-mega-menu:after { content: ''; font-family: 'icomoon' !important; color: #04aada; font-size: 36px; position: relative; top: -8px; font-weight: 400; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav h3 { font-weight: 700; font-size: 16px; margin-bottom: 14px; margin-top: 0; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav h4,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav span.sub-title { display: block; color: #162c36; text-transform: uppercase; font-weight: 700; font-size: 12px; border-bottom: 1px solid #eee; margin: 8px 0 15px; font-stretch: normal; font-style: normal; line-height: 2.2; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav span.sub-title { font-size: 10px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav h6 { font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.3; letter-spacing: normal; margin-top: 0; margin-bottom: 12px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav h6 a { color: #00556c; display: block; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav ul { list-style: none; padding: 0; margin: 0; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav ul li { font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.67; letter-spacing: normal; text-align: left; color: #00556c; padding-bottom: 6px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav ul li a { color: #00556c; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav .btn-v3-orange,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav .btn-default-color { margin-bottom: 10px; display: inline-block; font-size: 16px; padding: 12px 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.25; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav .link-v3-white { display: block; margin: 0 0 20px; font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.25; letter-spacing: normal; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div { /* was a 28% linear-gradient: it painted a dark band across the full viewport width, outside the container. The dark panel comes from .hv3-left-col instead, which is what the reference shows. */ background: #fff; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .btn-v3-orange,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .btn-default-color { margin-bottom: 20px; display: inline-block; font-size: 16px; padding: 12px 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.25; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .hv3-left-col { background: #00556c; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .hv3-left-col h3 { font-size: 25px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.4; letter-spacing: normal; color: #fff; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .hv3-left-col>p { font-size: 16px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: normal; color: #fff; margin-top: 0; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col h3 a { display: inline-block; margin-left: 30px; font-size: 12px; font-weight: 400; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col h3 a .icomoon-icon { font-size: 14px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul { padding: 0; margin: 0 0 0 -15px; display: flex; flex-wrap: wrap; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li { display: inline-block; width: 48%; padding-right: 20px; margin: 0; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a { display: block; padding: 15px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a h4 { border: none; margin: 0 0 5px; padding: 0; text-transform: none; font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: normal; color: #fff; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a p { color: #fff; margin: 0; font-size: 12px; font-weight: normal; font-stretch: normal; font-style: normal; line-height: 1.5; letter-spacing: normal; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a:hover { background: #fff; text-decoration: none; box-shadow: 2px 2px 14px rgba(0,0,0,.5); } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a:hover h4 { color: #04aada; text-decoration: underline; text-decoration-color: #04aada; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a:hover p { color: #2f2f2f; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col .cta-container-v3 { margin-top: 20px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col .cta-container-v3 .btn-v3-orange,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col .cta-container-v3 .btn-default-color { padding-left: 60px; padding-right: 60px; margin-left: 90px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col { padding-right: 15px; padding-left: 40px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul { display: flex; flex-wrap: wrap; justify-content: space-between; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li { width: 31.5%; padding-bottom: 0; display: flex; align-items: center; justify-content: center; min-height: 50px; border: 2px solid #162c36; margin-bottom: 10px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li:hover { border: 2px solid #04aada; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li.hidden-xs { visibility: hidden; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li a { padding: 0; text-align: center; line-height: 18px; font-size: 14px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #162c36; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li a.btn-v3-black-border-2 { border: 0; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li a.btn-v3-orange-border { color: #162c36; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col ul li a.btn-v3-orange-border:hover { color: #fff; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down { visibility: hidden; opacity: 0; transition: visibility .5s linear,opacity .5s linear; position: absolute; z-index: 999999; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down>ul { background: #fff; padding: 10px 0; list-style: none; width: 200px; margin-top: 0; box-shadow: 0 -1px 5px rgba(170,170,170,.5); } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down>ul li { padding: 8px 15px; line-height: 18px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down>ul li:hover { background: #f2f2f2; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down>ul li a { font-size: 16px; font-weight: bold; font-stretch: normal; font-style: normal; letter-spacing: normal; color: #00556c; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down>ul li a:hover { text-decoration: none; } #head-v3 #hv3-bottom .nav-cta { float: right; margin: 27px 0; font-size: 17px; font-weight: bold; } #head-v3 #hv3-bottom .nav-cta span { margin-right: 5px; } #head-v3 #hv3-bottom .nav-cta span:first-child { margin-right: 20px; } #head-v3 #hv3-bottom .flex-4-col { display: flex; flex-wrap: wrap; } @media(min-width: 992px) { #head-v3 #hv3-bottom .flex-4-col li { width:25%; padding: 15px; } } @media(max-width: 991px) { #head-v3 #hv3-bottom .flex-4-col li { width:100%; border-bottom: 1px solid #aaa; padding: 15px 0; } #head-v3 #hv3-bottom .flex-4-col li h3 { font-size: 20px; } #head-v3 #hv3-bottom .flex-4-col li p { font-size: 16px; color: #162c36; } } #head-v3 #hv3-bottom .flex-3-col { display: flex; flex-wrap: wrap; } @media(min-width: 992px) { #head-v3 #hv3-bottom .flex-3-col li { width:33%; padding: 15px; } } @media(max-width: 991px) { #head-v3 #hv3-bottom .flex-3-col li { width:100%; border-bottom: 1px solid #aaa; padding: 15px 0; } #head-v3 #hv3-bottom .flex-3-col li h3 { font-size: 20px; } #head-v3 #hv3-bottom .flex-3-col li p { font-size: 16px; color: #162c36; } } @media(min-width: 992px) { #head-v3 #hv3-bottom .flex-floating-col { display: flex; } } #head-v3 #hv3-bottom .flex-floating-col .v3-tier-3 { width: auto; } @media(max-width: 991px) { #head-v3 #hv3-bottom .flex-floating-col .v3-tier-3 { width:100% !important; } } @media(min-width: 992px) { #head-v3 #hv3-bottom .nav-cta-bottom-right>span { float:right; margin: 0 10px; } } @media(max-width: 991px) { #head-v3 #hv3-bottom .nav-cta-bottom-right { margin-top:30px; } #head-v3 #hv3-bottom .nav-cta-bottom-right span { float: none; margin: 10px 0; width: 100%; display: block; } #head-v3 #hv3-bottom .nav-cta-bottom-right span.icomoon-icon { display: inline; } } #head-v3 #hv3-bottom .v3-mega-nav .btn-v3.btn-v3-small { padding: 6px 18px !important; font-size: 14px !important; margin: 0 !important; } @media(min-width: 992px) { #head-v3 #hv3-bottom .bottom-title { display: flex; align-items: flex-end; justify-content: flex-start; } } @media(min-width: 992px) { #head-v3 #hv3-bottom .top-title { display: flex; justify-content: flex-start; } } #head-v3 .v3-drop-down-over-lay { visibility: hidden; opacity: 0; transition: visibility .5s linear,opacity .5s linear; position: absolute; } #head-v3 .open .v3-drop-down-over-lay { visibility: visible; opacity: 1; width: 100%; height: 100vh; background: rgba(51,51,51,.7); position: absolute; left: 0; z-index: 101; } @media(min-width: 991px) { #head-v3 #signin-container { padding-right:5px !important; padding-left: 5px !important; } #head-v3 .hv3-search { padding: 2px 6px 6px !important; } .by-industry { padding-top: 5px; } } @media(min-width: 991px) and (max-width:1199px) { #head-v3 #hv3-top>.container>ul #signin-container>div,#head-v3 #hv3-top>.container>ul .hv3-country>div { position:absolute; top: 2px; } #head-v3 #hv3-top>.container>ul #signin-container>div.v3-drop-down-over-lay,#head-v3 #hv3-top>.container>ul .hv3-country>div.v3-drop-down-over-lay { top: 33px; } #head-v3 #hv3-top>.container>ul #signin-container>div .signin-drop-down,#head-v3 #hv3-top>.container>ul #signin-container>div .hv3-country-drop-down,#head-v3 #hv3-top>.container>ul .hv3-country>div .signin-drop-down,#head-v3 #hv3-top>.container>ul .hv3-country>div .hv3-country-drop-down { right: 0; } #head-v3 #hv3-top>.container>ul #signin-container { padding: 0; } #head-v3 #hv3-bottom #logo img { width: 124px; } #head-v3 #hv3-bottom nav .v3-tier-1>span { margin-right: 14px; font-size: 15px; } #head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .btn-v3-orange,#head-v3 #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-mega-nav>div .btn-default-color { padding: 12px 10px; } #head-v3 #hv3-bottom nav .v3-tier-1 .cta-container-v3 .btn-v3-orange,#head-v3 #hv3-bottom nav .v3-tier-1 .cta-container-v3 .btn-default-color { margin-left: 38px !important; } #head-v3 #hv3-bottom nav .v3-tier-1.hidden-xs a { padding: 6px 10px; } #head-v3 #hv3-bottom nav .v3-tier-1.hidden-xs:last-child { margin-left: 10px; } #head-v3 #hv3-bottom .nav-cta span:first-child { margin-right: 5px; } } @media(max-width: 991px) { #head-v3 a:hover { text-decoration:none !important; color: #00556c; } #head-v3 a.link-v3-orange:hover,#head-v3 a.link-v3-default:hover { color: #0383a8; } #head-v3 #hv3-top>.container>ul { padding-right: 10px; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search { display: block; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper { visibility: visible; opacity: 1; top: 0; height: auto; background: transparent; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox { padding: 10px 0; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box.magic-box-hasFocus { box-shadow: none !important; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box.magic-box-hasFocus .magic-box-suggestions.magic-box-hasSuggestion { top: 40px; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input { height: 36px; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input .magic-box-underlay { height: 36px; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input .magic-box-clear { top: 0; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .magic-box .magic-box-input>input { height: 36px; font-size: 16px; margin-bottom: 0; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .CoveoSearchButton { background: none; border: none; height: 39px; width: 50px; padding-top: 20px; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .search-wrapper .search-container #searchbox .CoveoSearchbox .CoveoSearchButton .coveo-search-button:before { font-size: 28px; top: -26px; } #head-v3 #hv3-top>.container>ul>li.hv3-search.mobile-search .v3-drop-down-over-lay { display: none; } #head-v3 #hv3-top>.container>ul #signin-container>div,#head-v3 #hv3-top>.container>ul .hv3-country>div { position: absolute; top: 2px; } #head-v3 #hv3-top>.container>ul #signin-container>div.v3-drop-down-over-lay,#head-v3 #hv3-top>.container>ul .hv3-country>div.v3-drop-down-over-lay { top: 33px; } #head-v3 #hv3-top>.container>ul #signin-container>div .signin-drop-down,#head-v3 #hv3-top>.container>ul #signin-container>div .hv3-country-drop-down,#head-v3 #hv3-top>.container>ul .hv3-country>div .signin-drop-down,#head-v3 #hv3-top>.container>ul .hv3-country>div .hv3-country-drop-down { right: 0; } #head-v3 #hv3-top>.container>ul #signin-container { padding: 0; } #head-v3 .container { width: 100%; padding: 0; } #head-v3 .container #hv3-bottom #logo { margin: 20px 15px; z-index: 100; } #head-v3 .container #hv3-bottom #logo img { width: 140px; height: 40px; } #head-v3 .container #hv3-bottom #logo.binarytree-logo img { width: 170px; } /* the header row is the positioning context for the mobile icon cluster. Scoped to <=991 so the desktop mega nav keeps its own containing block. */ #head-v3 .container #hv3-bottom { position: relative; } /* Icon cluster: flexbox, no floats. It is pinned to the header row (top:0/bottom:0) so it renders in exactly the same place whether .mobile-nav-open is set or not. --oi-mm-edge optical inset of the last glyph against the logo margin --oi-mm-gap extra space between glyphs (each button is already 44px) */ #head-v3 .container #hv3-bottom .mobile-menu-container { --oi-mm-edge: 7px; --oi-mm-gap: 2px; display: flex; align-items: center; justify-content: flex-end; gap: var(--oi-mm-gap); position: absolute; top: 0; bottom: 0; right: var(--oi-mm-edge); left: auto; z-index: 100; } /* visual order is set here, not by the DOM, so the markup can stay as is: ... language, user, shop, SEARCH, BURGER/X (always last) */ #head-v3 .container #hv3-bottom .mobile-menu-container>#hv3-mobile-language { order: 1; } #head-v3 .container #hv3-bottom .mobile-menu-container>#hv3-mobile-user { order: 2; } #head-v3 .container #hv3-bottom .mobile-menu-container>.hv3-mobile-shop { order: 3; } #head-v3 .container #hv3-bottom .mobile-menu-container>.mobile-search { order: 4; } #head-v3 .container #hv3-bottom .mobile-menu-container>.mobile-menu { order: 5; } /* fixed 44x44 hit area (WCAG 2.2 AA target size) keeps the burger and the X the same box, so nothing shifts when the icon swaps */ #head-v3 .container #hv3-bottom .mobile-menu-container>:is(button,a) { border: 0; background: none; margin: 0; padding: 0; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; line-height: 1; cursor: pointer; color: #00556c; } #head-v3 .container #hv3-bottom .mobile-menu-container>:is(button,a) .icomoon-icon { display: block; font-size: 40px; line-height: 1; } #head-v3 .container #hv3-bottom .mobile-menu-container>:is(button,a) .icomoon-icon.icon-menu_A { color: #04aada; } #head-v3 .container #hv3-bottom .mobile-menu-container .mobile-search,#head-v3 .container #hv3-bottom .mobile-menu-container #hv3-mobile-language,#head-v3 .container #hv3-bottom .mobile-menu-container #hv3-mobile-user,#head-v3 .container #hv3-bottom .mobile-menu-container .hv3-mobile-shop { display: none; } #head-v3 .container #hv3-bottom nav { display: none; visibility: hidden; opacity: 0; } #head-v3 .container #hv3-bottom nav .v3-tier-1 .v3-tier-2.v3-drop-down>ul { background: #fff !important; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav>div { background: #fff !important; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav>div>.container>.row { flex-direction: column; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav>div>.container>.row .v3-tier-3 { padding-right: 15px !important; padding-left: 15px !important; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav>div>.container>.row .hv3-left-col { padding-top: 20px; padding-bottom: 0; background: #fff !important; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav>div>.container>.row .hv3-left-col>p { color: #162c36; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-products .hv3-left-col>h3,#head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav.hv3-right-col-top .hv3-left-col>h3 { display: none; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-products .hv3-right-col,#head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav.hv3-right-col-top .hv3-right-col { order: -1; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul { margin: 0; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li { width: 100%; padding: 15px 0; margin: 0; border-bottom: 1px solid #aaa; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a { padding: 0; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a:hover { background: none; box-shadow: none; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a:hover h4 { text-decoration: none; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a h4 { color: #00556c; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-left-col>ul li>a p { color: #162c36; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col { padding-left: 15px; padding-top: 0; } #head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col>ul,#head-v3 .container #hv3-bottom nav .v3-tier-2.v3-mega-nav#nav-v3-solutions .hv3-right-col>div>ul { display: none; } #head-v3 .container #hv3-bottom.mobile-nav-open .mobile-menu .icomoon-icon:before { content: ''; font-size: 40px; } /* The wrapper used to become position:absolute here, which is what forced the whole float + magic-offset workaround: the icon cluster travelled with it. It now stays in flow and