#nav-container { height: var(--header-height); } #nav-container li a { border-radius: 0; } @media (max-resolution: 170dpi) { #nav-container { text-rendering: auto; -webkit-font-smoothing: antialiased; } } :root { --footer-background-color: #646263; } .footer { background-color: var(--footer-background-color); } .footer .row-fluid { gap: 5%; } /** * The footer doesn't need to fade in on scroll. */ .footer .dnd-column { opacity: 1 !important; } .footer .footer-heading { color: var(--color-gray-light); text-transform: uppercase; letter-spacing: 0.04em; font-size: 11px; font-weight: 600; user-select: none; margin: 0; } .footer ul { margin-top: 12px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 1rem; } .footer ul li { line-height: 1.2; } .footer ul a { --link-color: var(--color-white); font-size: 17px; } .footer ul a:hover, .footer ul a:focus { --link-color: var(--color-blue); } .footer ul + .footer-heading { margin-top: 40px; } .footer-bottom { color: var(--color-white); } .footer-bottom a { --link-color: var(--color-white); font-size: 15px; } .footer-bottom a:hover, .footer-bottom a:focus { --link-color: var(--color-blue); } .footer-bottom p { margin: 0; } @media (max-width: 767px) { .footer { text-align: center; } } .hs-tools-menu.hs-tools-menu, .hs-tools-menu.hs-tools-menu * { text-shadow: none !important; font-family: var(--typography-body-font) !important; font-size: 15px !important; color: var(--typography-body-text-color) !important; } .hs-tools-menu.hs-tools-menu { border-radius: 6px !important; background: #ff5c35 !important; border: none !important; color: #fff !important; bottom: 20px; right: 20px !important; top: unset !important; overflow: hidden; } .hs-tools-menu.hs-collapsed.hs-collapsed { align-items: center; background: #ff5c35 !important; box-shadow: 0 0 15px rgb(0 0 0 / 0.2) !important; border: none !important; border-radius: 50% !important; display: flex; justify-content: center; padding: 5px !important; transition: all 0.2s ease; } .hs-tools-menu.hs-collapsed:hover { background: #e04826 !important; transform: translateY(-3px); } .hs-tools-menu.hs-collapsed:active { background: #b3361d !important; transform: translateY(-3px); } .hs-tools-menu.hs-tools-menu .hs-title { color: #fff !important; text-transform: uppercase; font-size: 12px !important; } .hs-tools-menu.hs-tools-menu .hs-sprocket { filter: saturate(0) brightness(5); pointer-events: none; } .hs-tools-menu.hs-collapsed .hs-sprocket { position: relative !important; width: 30px !important; padding: 0 !important; top: 0 !important; right: 0 !important; } .hs-tools-menu.hs-tools-menu ul { background: #fff !important; box-shadow: none !important; padding: 0 !important; border: 1px solid var(--color-gray-light) !important; border-radius: 0 0 6px 6px !important; } .hs-tools-menu.hs-tools-menu a, .hs-tools-menu.hs-tools-menu span { border-radius: 0; } .hs-tools-menu.hs-tools-menu a:hover, .hs-tools-menu.hs-tools-menu span:hover, .hs-tools-menu.hs-tools-menu a:active, .hs-tools-menu.hs-tools-menu span:active { background: var(--color-gray) !important; } .hs-tools-menu.hs-tools-menu span.js-rendering-enabled { background-color: var(--color-gray-lighter) !important; color: var(--color-gray-dark) !important; } :root { --section-padding-vertical: min(max(10%, 50px), 90px); --section-padding-vertical-inverse: max(min(-10%, -50px), -90px); --section-padding-horizontal: 60px; --row-fluid-gap: min(max(5%, 30px), 90px); } /** * Responsive Grid */ .content-wrapper, .wrapper, .dnd-section > .row-fluid { margin-left: auto; margin-right: auto; max-width: var(--wrapper-width); position: relative; } .dnd-section { padding-top: var(--section-padding-vertical); padding-bottom: var(--section-padding-vertical); } .dnd-section:not([class*='force-full-width']) { padding-left: var(--section-padding-horizontal); padding-right: var(--section-padding-horizontal); } .row-fluid { display: flex; width: 100%; gap: var(--row-fluid-gap); } .row-fluid [class*='span'] { display: block; float: left; width: 100%; flex: 1; margin: 0; } .row-fluid [class*='span']:first-child { margin-left: 0; } .row-fluid .span12 { flex-basis: 100%; } .row-fluid .span11 { flex-basis: 91.66%; } .row-fluid .span10 { flex-basis: 83.33%; } .row-fluid .span9 { flex-basis: 75%; } .row-fluid .span8 { flex-basis: 66.66%; } .row-fluid .span7 { flex-basis: 58.33%; } .row-fluid .span6 { flex-basis: 50%; } .row-fluid .span5 { flex-basis: 41.66%; } .row-fluid .span4 { flex-basis: 33.33%; } .row-fluid .span3 { flex-basis: 25%; } .row-fluid .span2 { flex-basis: 16.66%; } .row-fluid .span1 { flex-basis: 8.33%; } @media (max-width: 767px) { :root { --section-padding-horizontal: 20px; } .row-fluid { flex-direction: column; } } /** * Contains overrides/fixes for HubSpot page editor specific styles. */ /** * This is used for the drag and drop section which holds the dialog modules on the page editor. * We only want this visible on the page editor for an easier editing experience. */ .hs-inline-edit .dnd-dialog-layer { display: block; } .hs-inline-edit .popup-form-modal, .hs-inline-edit .dnd-dialog-layer .dnd-module > .hs_cos_wrapper { position: relative; height: auto; width: auto; opacity: 1; visibility: visible; margin: 40px 0; border-radius: 10px; overflow: hidden; background: var(--color-black-10); border: 4px dotted var(--color-white); display: flex; text-align: center; flex-direction: column; padding: 1rem; } .hs-inline-edit .dnd-dialog-layer .dnd-module > .hs_cos_wrapper { background: var(--color-magenta); border: none; margin: 16px 0; height: 70px; display: flex; align-items: center; justify-content: center; } .hs-inline-edit .popup-form-modal::before, .hs-inline-edit .dnd-dialog-layer .dnd-module > .hs_cos_wrapper::before { content: 'Placeholder for Popup Form\a0Modal'; color: var(--color-white); font-weight: 700; font-size: var(--typography-fluid-scale-2); } .hs-inline-edit .popup-form-modal::after { content: '(this is only visible in the content editor to make\a0 editing\a0 easier)'; color: var(--color-white); opacity: 0.8; font-size: var(--typography-fluid-scale-1); } .hs-inline-edit .dnd-dialog-layer .dnd-module > .hs_cos_wrapper::before { content: 'Dialog: ' attr(data-dialog-editor-id); line-height: 1; position: relative; inset: 0; } .hs-inline-edit .popup-form-modal * { display: none; } /** * Wistia video popup modal */ .hs-inline-edit :is( div[id^='wistia'][id*='popover_container'], div[id^='wistia'][id*='popover_overlay'] ) { display: none; } /** * Anchor section */ .hs-inline-edit .anchor-section .hs_cos_wrapper_type_rich_text { position: relative; height: 100px; background: var(--color-gray-lighter); border: 2px dashed var(--color-gray-light); } .hs-inline-edit .anchor-section .hs_cos_wrapper_type_rich_text::before, .hs-inline-edit .anchor-section .hs_cos_wrapper_type_rich_text::after { position: absolute; margin: 0 auto; top: 0; left: 0; right: 0; bottom: 0; text-align: center; display: flex; align-items: center; justify-content: center; } .hs-inline-edit .anchor-section .hs_cos_wrapper_type_rich_text::before { content: 'Anchor Section Placeholder'; margin-top: -30px; font-weight: 700; } .hs-inline-edit .anchor-section .hs_cos_wrapper_type_rich_text::after { content: 'Click Advanced -> Source Code and modify the id attribute value'; margin-top: 30px; font-weight: 400; font-size: 14px; } @keyframes fade-in { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes scale-in { 0% { transform: scale(0); } 100% { transform: scale(1); } } @keyframes bounce-in { 0% { transform: scale(0.1); opacity: 0; } 60% { transform: scale(1.2); opacity: 1; } 100% { transform: scale(1); } } @keyframes wait { 0%, 100% { opacity: .11; } 50% { opacity: .7; } } @keyframes slide-in { from { transform: translateX(-10px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /*! 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 { margin: 0; } /** * Render the `main` element consistently in IE. */ main { display: block; } /** * Correct the font size and margin on `h1` elements within `section` and * `article` contexts in Chrome, Firefox, and Safari. */ h1 { font-size: 2em; margin: 0.67em 0; } /* Grouping content ========================================================================== */ /** * 1. Add the correct box sizing in Firefox. * 2. Show the overflow in Edge and IE. */ hr { box-sizing: content-box; /* 1 */ height: 0; /* 1 */ overflow: visible; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ pre { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /* Text-level semantics ========================================================================== */ /** * Remove the gray background on active links in IE 10. */ a { background-color: transparent; } /** * 1. Remove the bottom border in Chrome 57- * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari. */ abbr[title] { border-bottom: none; /* 1 */ text-decoration: underline; /* 2 */ -webkit-text-decoration: underline dotted; text-decoration: underline dotted; /* 2 */ } /** * 1. Correct the inheritance and scaling of font size in all browsers. * 2. Correct the odd `em` font sizing in all browsers. */ code, kbd, samp { font-family: monospace, monospace; /* 1 */ font-size: 1em; /* 2 */ } /** * Add the correct font size in all browsers. */ small { font-size: 80%; } /** * Prevent `sub` and `sup` elements from affecting the line height in * all browsers. */ sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; } sub { bottom: -0.25em; } sup { top: -0.5em; } /* Embedded content ========================================================================== */ /** * Remove the border on images inside links in IE 10. */ img { border-style: none; } /* Forms ========================================================================== */ /** * 1. Change the inconsistent appearance in all browsers (opinionated). * 2. Add typography inheritance in all browsers (opinionated). */ :where(button, input, select, textarea) { background-color: transparent; /* 1 */ border: 1px solid WindowFrame; /* 1 */ color: inherit; /* 1 */ font: inherit; /* 2 */ letter-spacing: inherit; /* 2 */ padding: 0.25em 0.375em; /* 1 */ } /** * Change the inconsistent appearance in all browsers (opinionated). */ :where(select) { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 0; padding-right: 40px; } /** * Don't show the arrow for multiple choice selects */ :where(select[multiple]) { background-image: none; } /** * Remove the border and padding in all browsers (opinionated). */ :where([type="color" i], [type="range" i]) { border-width: 0; padding: 0; } /** * 1. Change the font styles in all browsers. * 2. Remove the margin in Firefox and Safari. */ button, input, optgroup, select, textarea { font-family: inherit; /* 1 */ font-size: 100%; /* 1 */ line-height: 1.15; /* 1 */ margin: 0; /* 2 */ } /** * Show the overflow in IE. * 1. Show the overflow in Edge. */ button, input { /* 1 */ overflow: visible; } /** * Remove the inheritance of text transform in Edge, Firefox, and IE. * 1. Remove the inheritance of text transform in Firefox. */ button, select { /* 1 */ text-transform: none; } /** * Correct the inability to style clickable types in iOS and Safari. */ button, [type=button], [type=reset], [type=submit] { -webkit-appearance: button; } /** * Remove the inner border and padding in Firefox. */ button::-moz-focus-inner, [type=button]::-moz-focus-inner, [type=reset]::-moz-focus-inner, [type=submit]::-moz-focus-inner { border-style: none; padding: 0; } /** * Restore the focus styles unset by the previous rule. */ button:-moz-focusring, [type=button]:-moz-focusring, [type=reset]:-moz-focusring, [type=submit]:-moz-focusring { outline: 1px dotted ButtonText; } /** * Correct the padding in Firefox. */ fieldset { padding: 0.35em 0.75em 0.625em; } /** * 1. Correct the text wrapping in Edge and IE. * 2. Correct the color inheritance from `fieldset` elements in IE. * 3. Remove the padding so developers are not caught out when they zero out * `fieldset` elements in all browsers. */ legend { box-sizing: border-box; /* 1 */ color: inherit; /* 2 */ display: table; /* 1 */ max-width: 100%; /* 1 */ padding: 0; /* 3 */ white-space: normal; /* 1 */ } /** * Add the correct vertical alignment in Chrome, Firefox, and Opera. */ progress { vertical-align: baseline; } /** * Remove the default vertical scrollbar in IE 10+. */ textarea { overflow: auto; } /** * 1. Add the correct box sizing in IE 10. * 2. Remove the padding in IE 10. */ [type=checkbox], [type=radio] { box-sizing: border-box; /* 1 */ padding: 0; /* 2 */ } /** * Correct the cursor style of increment and decrement buttons in Chrome. */ [type=number]::-webkit-inner-spin-button, [type=number]::-webkit-outer-spin-button { height: auto; } /** * 1. Correct the odd appearance in Chrome and Safari. * 2. Correct the outline style in Safari. */ [type=search] { -webkit-appearance: textfield; /* 1 */ outline-offset: -2px; /* 2 */ } /** * Remove the inner padding in Chrome and Safari on macOS. */ [type=search]::-webkit-search-decoration { -webkit-appearance: none; } /** * 1. Correct the inability to style clickable types in iOS and Safari. * 2. Change font properties to `inherit` in Safari. */ ::-webkit-file-upload-button { -webkit-appearance: button; /* 1 */ font: inherit; /* 2 */ } /* Interactive ========================================================================== */ /* * Add the correct display in Edge, IE 10+, and Firefox. */ details { display: block; } /* * Add the correct display in all browsers. */ summary { display: list-item; } /* Misc ========================================================================== */ /** * Add the correct display in IE 10+. */ template { display: none; } /** * Add the correct display in IE 10. */ [hidden] { display: none; } *, *:before, *:after { box-sizing: border-box; } .wrapper { max-width: var(--wrapper-width); width: 100%; margin-left: auto; margin-right: auto; } .wrapper-sm { max-width: var(--wrapper-sm-width); width: 100%; margin-left: auto; margin-right: auto; } /** * Text formatting helpers. */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /** * Show hide, and disable things. */ .hidden { display: none; } .visible { display: block; } .disabled { opacity: 0.5; cursor: not-allowed; } /** * Small text that appears above a header. */ .subtitle, .subheading { display: block; margin-bottom: 0.5rem; font-size: var(--typography-fluid-scale-0); text-transform: uppercase; opacity: 0.7; font-weight: 600; letter-spacing: 0.04em; } /** * Used on flex items that are meant to be used as filler * in order to keep the last row of flex items all the same size as the * previous rows of flex items. */ .flex-filler { opacity: 0; height: 0; margin-top: 0; margin-bottom: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; border-top: none; border-bottom: none; pointer-events: none; } /** * Line break only applied on resolutions above 767px wide. * @example *
*/ .desktop-only-line-break { height: 0; width: 0; display: block; overflow: hidden; } @media (max-width: 767px) { .desktop-only-line-break { display: none; } } /** * Line break only applied on resolutions below 768px wide. * @example *
*/ .mobile-only-line-break { height: 0; width: 0; display: block; overflow: hidden; } @media (min-width: 768px) { .mobile-only-line-break { display: none; } } .hide, .column--not-scrolled-into-view { opacity: 0.005; transition: opacity 0.4s ease 0s; } .column--scrolled-into-view { opacity: 1; } .bounce-in { animation: bounce-in .5s forwards; } /** * Generate helper class colors. */ .blue { color: #00BDFF; } .orange { color: #FF8500; } .magenta { color: #ED32A2; } .green { color: #85C902; } .purple { color: #B30BDB; } .teal { color: #1DC1A6; } .gray { color: #6C696A; } .white { color: #fff; } .black { color: #000; } .gradient-text { -webkit-background-clip: text; background-clip: text; color: transparent; display: inline-block; } .gradient-text--orange-magenta { background-image: linear-gradient(to right, var(--color-orange) 0%, var(--color-magenta) 100%); } .gradient-text--green-blue { background-image: linear-gradient(to right, var(--color-green) 0%, var(--color-blue) 100%); } .gradient-text--blue-teal { background-image: linear-gradient(to right, var(--color-blue) 0%, var(--color-teal) 100%); } /** * For content that needs to be visually hidden but stay visible for screenreaders. */ .screen-reader-text { border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } @media (max-width: 767px) { .screen-reader-text { border: 0 !important; clip: rect(0, 0, 0, 0) !important; height: 1px !important; overflow: hidden !important; padding: 0 !important; position: absolute !important; white-space: nowrap !important; width: 1px !important; } } :root { /** * Colors */ --color-blue: #00BDFF; --color-blue-lighter: #CAF0FF; --color-blue-light: #80D8FF; --color-blue-dark: #0092CC; --color-blue-darker: #006699; --color-orange: #FF8500; --color-orange-lighter: #FFD7B3; --color-orange-light: #FFAA55; --color-orange-dark: #D1690B; --color-orange-darker: #A04D08; --color-magenta: #ED32A2; --color-magenta-lighter: #FFC5E8; --color-magenta-light: #FF7BD0; --color-magenta-dark: #C10C6B; --color-magenta-darker: #910355; --color-green: #85C902; --color-green-lighter: #D7FF99; --color-green-light: #AFEA49; --color-green-dark: #5EA000; --color-green-darker: #377000; --color-purple: #B30BDB; --color-purple-lighter: #F1B8ff; --color-purple-light: #E166FF; --color-purple-dark: #80139B; --color-purple-darker: #600A75; --color-teal: #1DC1A6; --color-teal-lighter: #D8FAF4; --color-teal-light: #8AEBDB; --color-teal-dark: #19A890; --color-teal-darker: #137C6B; --color-gray: #6C696A; --color-gray-lighter: #F4F3F4; --color-gray-light: #C7C5C6; --color-gray-dark: #3F3F3F; --color-gray-darker: #272526; --color-white: #fff; --color-white-dark: #f4f3f4; --color-white-darker: #d4d4d4; --color-black: #000; --color-black-dark: #000000; --color-black-darker: #000000; --color-contrast: var(--color-black); /** * Generate some alpha variants for our primary colors. * To use blue with 50% transparency, for instance, you would use var(--color-blue-50). */ --color-blue-5: rgb(0, 189, 255, 5%); --color-orange-5: rgb(255, 133, 0, 5%); --color-magenta-5: rgb(237, 50, 162, 5%); --color-green-5: rgb(133, 201, 2, 5%); --color-purple-5: rgb(179, 11, 219, 5%); --color-teal-5: rgb(29, 193, 166, 5%); --color-gray-5: rgb(108, 105, 106, 5%); --color-white-5: rgb(255, 255, 255, 5%); --color-black-5: rgb(0, 0, 0, 5%); --color-blue-10: rgb(0, 189, 255, 10%); --color-orange-10: rgb(255, 133, 0, 10%); --color-magenta-10: rgb(237, 50, 162, 10%); --color-green-10: rgb(133, 201, 2, 10%); --color-purple-10: rgb(179, 11, 219, 10%); --color-teal-10: rgb(29, 193, 166, 10%); --color-gray-10: rgb(108, 105, 106, 10%); --color-white-10: rgb(255, 255, 255, 10%); --color-black-10: rgb(0, 0, 0, 10%); --color-blue-15: rgb(0, 189, 255, 15%); --color-orange-15: rgb(255, 133, 0, 15%); --color-magenta-15: rgb(237, 50, 162, 15%); --color-green-15: rgb(133, 201, 2, 15%); --color-purple-15: rgb(179, 11, 219, 15%); --color-teal-15: rgb(29, 193, 166, 15%); --color-gray-15: rgb(108, 105, 106, 15%); --color-white-15: rgb(255, 255, 255, 15%); --color-black-15: rgb(0, 0, 0, 15%); --color-blue-20: rgb(0, 189, 255, 20%); --color-orange-20: rgb(255, 133, 0, 20%); --color-magenta-20: rgb(237, 50, 162, 20%); --color-green-20: rgb(133, 201, 2, 20%); --color-purple-20: rgb(179, 11, 219, 20%); --color-teal-20: rgb(29, 193, 166, 20%); --color-gray-20: rgb(108, 105, 106, 20%); --color-white-20: rgb(255, 255, 255, 20%); --color-black-20: rgb(0, 0, 0, 20%); --color-blue-25: rgb(0, 189, 255, 25%); --color-orange-25: rgb(255, 133, 0, 25%); --color-magenta-25: rgb(237, 50, 162, 25%); --color-green-25: rgb(133, 201, 2, 25%); --color-purple-25: rgb(179, 11, 219, 25%); --color-teal-25: rgb(29, 193, 166, 25%); --color-gray-25: rgb(108, 105, 106, 25%); --color-white-25: rgb(255, 255, 255, 25%); --color-black-25: rgb(0, 0, 0, 25%); --color-blue-30: rgb(0, 189, 255, 30%); --color-orange-30: rgb(255, 133, 0, 30%); --color-magenta-30: rgb(237, 50, 162, 30%); --color-green-30: rgb(133, 201, 2, 30%); --color-purple-30: rgb(179, 11, 219, 30%); --color-teal-30: rgb(29, 193, 166, 30%); --color-gray-30: rgb(108, 105, 106, 30%); --color-white-30: rgb(255, 255, 255, 30%); --color-black-30: rgb(0, 0, 0, 30%); --color-blue-35: rgb(0, 189, 255, 35%); --color-orange-35: rgb(255, 133, 0, 35%); --color-magenta-35: rgb(237, 50, 162, 35%); --color-green-35: rgb(133, 201, 2, 35%); --color-purple-35: rgb(179, 11, 219, 35%); --color-teal-35: rgb(29, 193, 166, 35%); --color-gray-35: rgb(108, 105, 106, 35%); --color-white-35: rgb(255, 255, 255, 35%); --color-black-35: rgb(0, 0, 0, 35%); --color-blue-40: rgb(0, 189, 255, 40%); --color-orange-40: rgb(255, 133, 0, 40%); --color-magenta-40: rgb(237, 50, 162, 40%); --color-green-40: rgb(133, 201, 2, 40%); --color-purple-40: rgb(179, 11, 219, 40%); --color-teal-40: rgb(29, 193, 166, 40%); --color-gray-40: rgb(108, 105, 106, 40%); --color-white-40: rgb(255, 255, 255, 40%); --color-black-40: rgb(0, 0, 0, 40%); --color-blue-45: rgb(0, 189, 255, 45%); --color-orange-45: rgb(255, 133, 0, 45%); --color-magenta-45: rgb(237, 50, 162, 45%); --color-green-45: rgb(133, 201, 2, 45%); --color-purple-45: rgb(179, 11, 219, 45%); --color-teal-45: rgb(29, 193, 166, 45%); --color-gray-45: rgb(108, 105, 106, 45%); --color-white-45: rgb(255, 255, 255, 45%); --color-black-45: rgb(0, 0, 0, 45%); --color-blue-50: rgb(0, 189, 255, 50%); --color-orange-50: rgb(255, 133, 0, 50%); --color-magenta-50: rgb(237, 50, 162, 50%); --color-green-50: rgb(133, 201, 2, 50%); --color-purple-50: rgb(179, 11, 219, 50%); --color-teal-50: rgb(29, 193, 166, 50%); --color-gray-50: rgb(108, 105, 106, 50%); --color-white-50: rgb(255, 255, 255, 50%); --color-black-50: rgb(0, 0, 0, 50%); --color-blue-55: rgb(0, 189, 255, 55%); --color-orange-55: rgb(255, 133, 0, 55%); --color-magenta-55: rgb(237, 50, 162, 55%); --color-green-55: rgb(133, 201, 2, 55%); --color-purple-55: rgb(179, 11, 219, 55%); --color-teal-55: rgb(29, 193, 166, 55%); --color-gray-55: rgb(108, 105, 106, 55%); --color-white-55: rgb(255, 255, 255, 55%); --color-black-55: rgb(0, 0, 0, 55%); --color-blue-60: rgb(0, 189, 255, 60%); --color-orange-60: rgb(255, 133, 0, 60%); --color-magenta-60: rgb(237, 50, 162, 60%); --color-green-60: rgb(133, 201, 2, 60%); --color-purple-60: rgb(179, 11, 219, 60%); --color-teal-60: rgb(29, 193, 166, 60%); --color-gray-60: rgb(108, 105, 106, 60%); --color-white-60: rgb(255, 255, 255, 60%); --color-black-60: rgb(0, 0, 0, 60%); --color-blue-65: rgb(0, 189, 255, 65%); --color-orange-65: rgb(255, 133, 0, 65%); --color-magenta-65: rgb(237, 50, 162, 65%); --color-green-65: rgb(133, 201, 2, 65%); --color-purple-65: rgb(179, 11, 219, 65%); --color-teal-65: rgb(29, 193, 166, 65%); --color-gray-65: rgb(108, 105, 106, 65%); --color-white-65: rgb(255, 255, 255, 65%); --color-black-65: rgb(0, 0, 0, 65%); --color-blue-70: rgb(0, 189, 255, 70%); --color-orange-70: rgb(255, 133, 0, 70%); --color-magenta-70: rgb(237, 50, 162, 70%); --color-green-70: rgb(133, 201, 2, 70%); --color-purple-70: rgb(179, 11, 219, 70%); --color-teal-70: rgb(29, 193, 166, 70%); --color-gray-70: rgb(108, 105, 106, 70%); --color-white-70: rgb(255, 255, 255, 70%); --color-black-70: rgb(0, 0, 0, 70%); --color-blue-75: rgb(0, 189, 255, 75%); --color-orange-75: rgb(255, 133, 0, 75%); --color-magenta-75: rgb(237, 50, 162, 75%); --color-green-75: rgb(133, 201, 2, 75%); --color-purple-75: rgb(179, 11, 219, 75%); --color-teal-75: rgb(29, 193, 166, 75%); --color-gray-75: rgb(108, 105, 106, 75%); --color-white-75: rgb(255, 255, 255, 75%); --color-black-75: rgb(0, 0, 0, 75%); --color-blue-80: rgb(0, 189, 255, 80%); --color-orange-80: rgb(255, 133, 0, 80%); --color-magenta-80: rgb(237, 50, 162, 80%); --color-green-80: rgb(133, 201, 2, 80%); --color-purple-80: rgb(179, 11, 219, 80%); --color-teal-80: rgb(29, 193, 166, 80%); --color-gray-80: rgb(108, 105, 106, 80%); --color-white-80: rgb(255, 255, 255, 80%); --color-black-80: rgb(0, 0, 0, 80%); --color-blue-85: rgb(0, 189, 255, 85%); --color-orange-85: rgb(255, 133, 0, 85%); --color-magenta-85: rgb(237, 50, 162, 85%); --color-green-85: rgb(133, 201, 2, 85%); --color-purple-85: rgb(179, 11, 219, 85%); --color-teal-85: rgb(29, 193, 166, 85%); --color-gray-85: rgb(108, 105, 106, 85%); --color-white-85: rgb(255, 255, 255, 85%); --color-black-85: rgb(0, 0, 0, 85%); --color-blue-90: rgb(0, 189, 255, 90%); --color-orange-90: rgb(255, 133, 0, 90%); --color-magenta-90: rgb(237, 50, 162, 90%); --color-green-90: rgb(133, 201, 2, 90%); --color-purple-90: rgb(179, 11, 219, 90%); --color-teal-90: rgb(29, 193, 166, 90%); --color-gray-90: rgb(108, 105, 106, 90%); --color-white-90: rgb(255, 255, 255, 90%); --color-black-90: rgb(0, 0, 0, 90%); --color-blue-95: rgb(0, 189, 255, 95%); --color-orange-95: rgb(255, 133, 0, 95%); --color-magenta-95: rgb(237, 50, 162, 95%); --color-green-95: rgb(133, 201, 2, 95%); --color-purple-95: rgb(179, 11, 219, 95%); --color-teal-95: rgb(29, 193, 166, 95%); --color-gray-95: rgb(108, 105, 106, 95%); --color-white-95: rgb(255, 255, 255, 95%); --color-black-95: rgb(0, 0, 0, 95%); /** * Layout */ --wrapper-width: 1100px; --wrapper-sm-width: 760px; --navbar-height: 70px; /** * Misc */ --transition-timing-function: ease; --transition-duration: 0s; --transition: var(--transition-duration) var(--transition-timing-function); } html, body, .content__layer-inner { /** * For smooth scrolling anchor links. */ scroll-behavior: smooth; } /** * The following styles solve the issue of the footer not being at the bottom of the page * when there is not enough content to fill the full viewport. */ body { font-family: var(--typography-body-font); text-rendering: optimizeLegibility; font-variant-ligatures: common-ligatures discretionary-ligatures contextual; font-feature-settings: 'kern' 1, 'liga' 1, 'dlig' 1, 'calt' 1; font-kerning: normal; -webkit-font-variant-ligatures: common-ligatures discretionary-ligatures contextual; -webkit-font-feature-settings: 'kern' 1; -webkit-font-smoothing: subpixel-antialiased; } body, html { overflow-y: hidden; width: 100%; height: 100%; } .content__layer { display: flex; position: relative; flex-direction: column; width: 100%; height: 100%; z-index: 0; overflow-y: hidden; overflow-x: hidden; } .content__layer-inner { display: flex; flex: 1 1 auto; position: relative; flex-direction: column; justify-content: space-between; overflow-y: auto; overflow-x: hidden; -webkit-overflow-scrolling: touch; -ms-overflow-style: auto; } /** * Hide the nav bar and footer if the page is displayed in an iframe, */ .textio-is-in-iframe:not(.hs-inline-edit) .navigation-menu,, .textio-is-in-iframe:not(.hs-inline-edit) .footer, .textio-is-in-iframe:not(.hs-inline-edit) .header { display: none; } /** * Remove outline for non-keyboard :focus */ *:focus:not(:focus-visible) { outline: none; } /** * Default outline style for keyboard :focus */ *:focus-visible { outline: 2px solid var(--color-blue); } .tf-v1-slider .tf-v1-close { border: none; padding: 0; } :root { --typography-font-ally: 'Ally Web', sans-serif; --typography-font-iskra: 'Iskra', sans-serif; --typography-font-charis: 'Charis', serif; --typography-body-font: var(--typography-font-ally); --typography-body-font-weight: 400; --typography-body-line-height: 1.4; --typography-body-text-color: var(--color-gray-dark); --typography-body-font-size: var(--typography-fluid-scale-1); --typography-heading-font: var(--typography-font-iskra); --typography-heading-font-weight: 500; --typography-heading-line-height: 1.1; --typography-heading-text-color: var(--color-g1ray-dark); --typography-quote-font: var(--typography-font-charis); --link-color: var(--color-blue-dark); --link-text-decoration: none; --link-transition: var(--transition); --link-font: var(--typography-body-font); --link-font-weight: var(--typography-body-font-weight); --link-letter-spacing: 0; --link-border-radius: 4px; --link-outline-offset: 2px; --typography-fluid-scale-0: 16px; --typography-fluid-scale-1: 18px; --typography-fluid-scale-2: 22px; --typography-fluid-scale-3: 22px; --typography-fluid-scale-4: 22px; --typography-fluid-scale-5: clamp(1.625rem, calc(1.625rem + ((1vw - 0.24375rem) * 0.2614)), 1.875rem); /* 26 - 30 */ --typography-fluid-scale-6: clamp(1.875rem, calc(1.875rem + ((1vw - 0.24375rem) * 0.8264)), 2.5rem); /* 30 - 40px */ --typography-fluid-scale-7: clamp(2.5rem, calc(2.5rem + ((1vw - 0.24375rem) * 0.8264)), 3.125rem); /* 40 - 50px */ --typography-fluid-scale-8: clamp(3.125rem, calc(3.125rem + ((1vw - 0.24375rem) * 1.1570)), 4rem); /* 50 - 64px */ --typography-p-font-size: var(--typography-fluid-scale-1); --typography-h6-font-size: var(--typography-fluid-scale-2); --typography-h5-font-size: var(--typography-fluid-scale-3); --typography-h4-font-size: var(--typography-fluid-scale-4); --typography-h3-font-size: var(--typography-fluid-scale-5); --typography-h2-font-size: var(--typography-fluid-scale-6); --typography-h1-font-size: var(--typography-fluid-scale-7); --typography-display-font-size: var(--typography-fluid-scale-8); } body { font-family: var(--typography-body-font); font-size: var(--typography-body-font-size); font-weight: var(--typography-body-font-weight); line-height: var(--typography-body-line-height); color: var(--typography-body-text-color); tab-size: 2; text-rendering: optimizeLegibility; -webkit-font-smoothing: subpixel-antialiased; } /** * Links */ a { color: var(--link-color); text-decoration: var(--link-text-decoration); transition: var(--link-transition); font-weight: var(--link-font-weight); letter-spacing: var(--link-letter-spacing); font-family: var(--link-font); border-radius: var(--link-border-radius); outline-offset: var(--link-outline-offset); } a:hover, a:focus { color: var(--color-blue); text-decoration: none; } /** * Paragraphs */ p { font-size: var(--typography-p-font-size); margin: 0 0 16px; text-wrap: pretty; } h1:empty, .h1:empty, h2:empty, .h2:empty, h3:empty, .h3:empty, h4:empty, .h4:empty, h5:empty, .h5:empty, h6:empty, .h6:empty { display: none; } /** * Headings */ h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { font-family: var(--typography-heading-font); font-weight: var(--typography-heading-font-weight); line-height: var(--typography-heading-line-height); margin: 0 0 16px; } h1, .h1 { font-size: var(--typography-h1-font-size); font-family: var(--typography-h1-font, var(--typography-heading-font)); color: var(--typography-h1-color, var(--typography-heading-text-color)); } h2, .h2 { font-size: var(--typography-h2-font-size); font-family: var(--typography-h2-font, var(--typography-heading-font)); color: var(--typography-h2-color, var(--typography-heading-text-color)); } h3, .h3 { font-size: var(--typography-h3-font-size); font-family: var(--typography-h3-font, var(--typography-heading-font)); color: var(--typography-h3-color, var(--typography-heading-text-color)); } h4, .h4 { font-size: var(--typography-h4-font-size); font-family: var(--typography-h4-font, var(--typography-heading-font)); color: var(--typography-h4-color, var(--typography-heading-text-color)); } h5, .h5 { font-size: var(--typography-h5-font-size); font-family: var(--typography-h5-font, var(--typography-heading-font)); color: var(--typography-h5-color, var(--typography-heading-text-color)); } h6, .h6 { font-size: var(--typography-h6-font-size); font-family: var(--typography-h6-font, var(--typography-heading-font)); color: var(--typography-h6-color, var(--typography-heading-text-color)); } .h7 { font-size: clamp(0.9rem, calc(0.9rem + 1vw), 1.4rem); font-family: var(--typography-h6-font, var(--typography-heading-font)); color: var(--typography-h6-color, var(--typography-heading-text-color)); } h3, .h3, h4, .h4, h5, .h5 { --typography-heading-font-weight: 700; } .display-text { font-size: var(--typography-fluid-scale-8); font-family: var(--typography-h1-font, var(--typography-heading-font)); color: var(--typography-h1-color, var(--typography-heading-text-color)); } ul > li:not(.hs-form-checkbox) { margin-top: 10px; margin-bottom: 10px; } :root { --code-border-radius: 0; --code-background-color: var(--color-gray-lighter); } code { white-space: normal; border-radius: var(--code-border-radius); display: inline; max-width: auto; padding: 0.2em 0.4em; margin: 0; font-size: 85%; overflow: visible; line-height: inherit; word-wrap: normal; background-color: var(--code-background-color); border: 0; } pre { padding: 16px; overflow: auto; font-size: 85%; line-height: 1.45; border-radius: var(--code-border-radius); background-color: var(--code-background-color); } pre > code { padding: 0; margin: 0; word-break: normal; white-space: pre; background: transparent; border: 0; border-radius: 0; font-size: 100%; } :root { --blockquote-text-color: var(--typography-body-text-color); --blockquote-background-color: var(--color-black-5); --blockquote-border-left-color: var(--color-gray-light); --blockquote-author-color: var(--color-magenta); --blockquote-author-font-size: 14px; --blockquote-author-font-weight: 700; } blockquote { margin-top: 0; margin-bottom: 16px; padding: 1em; color: var(--blockquote-text-color); background: var(--blockquote-background-color); border-left: 0.25em solid var(--blockquote-border-left-color); } blockquote cite, blockquote footer { color: var(--blockquote-author-color); font-size: var(--blockquote-author-font-size); font-weight: var(--blockquote-author-font-weight); display: block; margin-top: 10px; } blockquote > :first-child { margin-top: 0; } blockquote > :last-child { margin-bottom: 0; } :root { --button-font-family: var(--typography-body-font); --button-font-weight: 400; --button-font-size: 18px; --button-line-height: 1.3; --button-text-decoration: none; --button-text-transform: none; --button-text-align: center; --button-text-color: var(--text-color, var(--color-white)); --button-letter-spacing: 0; --button-border-radius: 6px; --button-padding: 12px 40px; --button-margin: 0; --button-border-width: 2px; --button-border-color: var(--button-background); --button-border-style: solid; --button-outline-color: var(--outline-color, var(--color-blue)); --button-outline-offset: -2px; --button-transition: var(--transition); --button-background: var(--background-color, var(--color-blue)); --button-text-shadow: none; } input[type='submit'] { margin-top: 25px; } .button, a.button, .hs-button, input[type='submit'] { text-shadow: var(--button-text-shadow); font-family: var(--button-font-family); font-size: var(--button-font-size); font-weight: var(--button-font-weight); line-height: var(--button-line-height); text-decoration: var(--button-text-decoration); text-transform: var(--button-text-transform); text-align: var(--button-text-align); color: var(--button-text-color); background: var(--button-background); border-radius: var(--button-border-radius); border-width: var(--button-border-width); border-style: var(--button-border-style); border-color: var(--button-border-color); margin: var(--button-margin); padding: var(--button-padding); letter-spacing: var(--button-letter-spacing); box-shadow: var(--button-box-shadow); transition: var(--button-transition); outline-color: var(--button-outline-color) !important; outline-offset: var(--button-outline-offset); -moz-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; white-space: nowrap; display: inline-flex; width: fit-content; justify-content: center; align-items: center; cursor: pointer; } .button:hover, .hs-button:hover, input[type=submit]:hover, .button:focus, .hs-button:focus, input[type=submit]:focus, .button:focus-within, .hs-button:focus-within, input[type=submit]:focus-within { --button-background: var(--color-blue-dark); --button-border-color: var(--color-blue-dark); text-decoration: none; } .button:active, .hs-button:active, input[type=submit]:active { --button-background: var(--color-blue-darker); --button-border-color: var(--color-blue-darker); } /** * Inherit all of the styles from the button wrapper for descendant CTAs. */ .button .cta_button, .hs-button .cta_button, input[type=submit] .cta_button { all: inherit; } /** * */ .button--text-blue { --button-text-color: var(--color-blue); } .button--text-blue:hover, .button--text-blue:focus, .button--text-blue:focus-within { --button-text-color: var(--color-blue); } .button--background-blue { --button-background: var(--color-blue); } .button--background-blue:hover, .button--background-blue:focus, .button--background-blue:focus-within { --button-background: var(--color-blue-dark); } .button--background-blue:active { --button-background: var(--color-blue-darker); } .button--border-blue { --button-border-color: var(--color-blue); } .button--border-blue:hover, .button--border-blue:focus, .button--border-blue:focus-within { --button-border-color: var(--color-blue-dark); } .button--border-blue:active { --button-border-color: var(--color-blue-darker); } .button--text-orange { --button-text-color: var(--color-orange); } .button--text-orange:hover, .button--text-orange:focus, .button--text-orange:focus-within { --button-text-color: var(--color-orange); } .button--background-orange { --button-background: var(--color-orange); } .button--background-orange:hover, .button--background-orange:focus, .button--background-orange:focus-within { --button-background: var(--color-orange-dark); } .button--background-orange:active { --button-background: var(--color-orange-darker); } .button--border-orange { --button-border-color: var(--color-orange); } .button--border-orange:hover, .button--border-orange:focus, .button--border-orange:focus-within { --button-border-color: var(--color-orange-dark); } .button--border-orange:active { --button-border-color: var(--color-orange-darker); } .button--text-magenta { --button-text-color: var(--color-magenta); } .button--text-magenta:hover, .button--text-magenta:focus, .button--text-magenta:focus-within { --button-text-color: var(--color-magenta); } .button--background-magenta { --button-background: var(--color-magenta); } .button--background-magenta:hover, .button--background-magenta:focus, .button--background-magenta:focus-within { --button-background: var(--color-magenta-dark); } .button--background-magenta:active { --button-background: var(--color-magenta-darker); } .button--border-magenta { --button-border-color: var(--color-magenta); } .button--border-magenta:hover, .button--border-magenta:focus, .button--border-magenta:focus-within { --button-border-color: var(--color-magenta-dark); } .button--border-magenta:active { --button-border-color: var(--color-magenta-darker); } .button--text-green { --button-text-color: var(--color-green); } .button--text-green:hover, .button--text-green:focus, .button--text-green:focus-within { --button-text-color: var(--color-green); } .button--background-green { --button-background: var(--color-green); } .button--background-green:hover, .button--background-green:focus, .button--background-green:focus-within { --button-background: var(--color-green-dark); } .button--background-green:active { --button-background: var(--color-green-darker); } .button--border-green { --button-border-color: var(--color-green); } .button--border-green:hover, .button--border-green:focus, .button--border-green:focus-within { --button-border-color: var(--color-green-dark); } .button--border-green:active { --button-border-color: var(--color-green-darker); } .button--text-purple { --button-text-color: var(--color-purple); } .button--text-purple:hover, .button--text-purple:focus, .button--text-purple:focus-within { --button-text-color: var(--color-purple); } .button--background-purple { --button-background: var(--color-purple); } .button--background-purple:hover, .button--background-purple:focus, .button--background-purple:focus-within { --button-background: var(--color-purple-dark); } .button--background-purple:active { --button-background: var(--color-purple-darker); } .button--border-purple { --button-border-color: var(--color-purple); } .button--border-purple:hover, .button--border-purple:focus, .button--border-purple:focus-within { --button-border-color: var(--color-purple-dark); } .button--border-purple:active { --button-border-color: var(--color-purple-darker); } .button--text-teal { --button-text-color: var(--color-teal); } .button--text-teal:hover, .button--text-teal:focus, .button--text-teal:focus-within { --button-text-color: var(--color-teal); } .button--background-teal { --button-background: var(--color-teal); } .button--background-teal:hover, .button--background-teal:focus, .button--background-teal:focus-within { --button-background: var(--color-teal-dark); } .button--background-teal:active { --button-background: var(--color-teal-darker); } .button--border-teal { --button-border-color: var(--color-teal); } .button--border-teal:hover, .button--border-teal:focus, .button--border-teal:focus-within { --button-border-color: var(--color-teal-dark); } .button--border-teal:active { --button-border-color: var(--color-teal-darker); } .button--text-gray { --button-text-color: var(--color-gray); } .button--text-gray:hover, .button--text-gray:focus, .button--text-gray:focus-within { --button-text-color: var(--color-gray); } .button--background-gray { --button-background: var(--color-gray); } .button--background-gray:hover, .button--background-gray:focus, .button--background-gray:focus-within { --button-background: var(--color-gray-dark); } .button--background-gray:active { --button-background: var(--color-gray-darker); } .button--border-gray { --button-border-color: var(--color-gray); } .button--border-gray:hover, .button--border-gray:focus, .button--border-gray:focus-within { --button-border-color: var(--color-gray-dark); } .button--border-gray:active { --button-border-color: var(--color-gray-darker); } .button--text-white { --button-text-color: var(--color-white); } .button--text-white:hover, .button--text-white:focus, .button--text-white:focus-within { --button-text-color: var(--color-white); } .button--background-white { --button-background: var(--color-white); } .button--background-white:hover, .button--background-white:focus, .button--background-white:focus-within { --button-background: var(--color-white-dark); } .button--background-white:active { --button-background: var(--color-white-darker); } .button--border-white { --button-border-color: var(--color-white); } .button--border-white:hover, .button--border-white:focus, .button--border-white:focus-within { --button-border-color: var(--color-white-dark); } .button--border-white:active { --button-border-color: var(--color-white-darker); } .button--text-black { --button-text-color: var(--color-black); } .button--text-black:hover, .button--text-black:focus, .button--text-black:focus-within { --button-text-color: var(--color-black); } .button--background-black { --button-background: var(--color-black); } .button--background-black:hover, .button--background-black:focus, .button--background-black:focus-within { --button-background: var(--color-black-dark); } .button--background-black:active { --button-background: var(--color-black-darker); } .button--border-black { --button-border-color: var(--color-black); } .button--border-black:hover, .button--border-black:focus, .button--border-black:focus-within { --button-border-color: var(--color-black-dark); } .button--border-black:active { --button-border-color: var(--color-black-darker); } .button--background-gray-light { --button-background: var(--color-gray-light); } .button--background-gray-light:hover, .button--background-gray-light:focus, .button--background-gray-light:focus-within { --button-background: var(--color-gray); } .button--background-gray-light:active { --button-background: var(--color-gray-dark); } .button--background-gray-dark { --button-background: var(--color-gray-dark); } .button--background-gray-dark:hover, .button--background-gray-dark:focus, .button--background-gray-dark:focus-within { --button-background: var(--color-gray-darker); } .button--background-gray-dark:active { --button-background: var(--color-gray-darker); } .button--background-orange-light { --button-background: var(--color-orange-light); } .button--background-orange-light:hover, .button--background-orange-light:focus, .button--background-orange-light:focus-within { --button-background: var(--color-orange); } .button--background-orange-light:active { --button-background: var(--color-orange-dark); } .button--background-orange-dark { --button-background: var(--color-orange-dark); } .button--background-orange-dark:hover, .button--background-orange-dark:focus, .button--background-orange-dark:focus-within { --button-background: var(--color-orange-darker); } .button--background-orange-dark:active { --button-background: var(--color-orange-darker); } .button--background-magenta-light { --button-background: var(--color-magenta-light); } .button--background-magenta-light:hover, .button--background-magenta-light:focus, .button--background-magenta-light:focus-within { --button-background: var(--color-magenta); } .button--background-magenta-light:active { --button-background: var(--color-magenta-dark); } .button--background-magenta-dark { --button-background: var(--color-magenta-dark); } .button--background-magenta-dark:hover, .button--background-magenta-dark:focus, .button--background-magenta-dark:focus-within { --button-background: var(--color-magenta-darker); } .button--background-magenta-dark:active { --button-background: var(--color-magenta-darker); } .button--background-purple-light { --button-background: var(--color-purple-light); } .button--background-purple-light:hover, .button--background-purple-light:focus, .button--background-purple-light:focus-within { --button-background: var(--color-purple); } .button--background-purple-light:active { --button-background: var(--color-purple-dark); } .button--background-purple-dark { --button-background: var(--color-purple-dark); } .button--background-purple-dark:hover, .button--background-purple-dark:focus, .button--background-purple-dark:focus-within { --button-background: var(--color-purple-darker); } .button--background-purple-dark:active { --button-background: var(--color-purple-darker); } .button--background-blue-light { --button-background: var(--color-blue-light); } .button--background-blue-light:hover, .button--background-blue-light:focus, .button--background-blue-light:focus-within { --button-background: var(--color-blue); } .button--background-blue-light:active { --button-background: var(--color-blue-dark); } .button--background-blue-dark { --button-background: var(--color-blue-dark); } .button--background-blue-dark:hover, .button--background-blue-dark:focus, .button--background-blue-dark:focus-within { --button-background: var(--color-blue-darker); } .button--background-blue-dark:active { --button-background: var(--color-blue-darker); } .button--background-green-light { --button-background: var(--color-green-light); } .button--background-green-light:hover, .button--background-green-light:focus, .button--background-green-light:focus-within { --button-background: var(--color-green); } .button--background-green-light:active { --button-background: var(--color-green-dark); } .button--background-green-dark { --button-background: var(--color-green-dark); } .button--background-green-dark:hover, .button--background-green-dark:focus, .button--background-green-dark:focus-within { --button-background: var(--color-green-darker); } .button--background-green-dark:active { --button-background: var(--color-green-darker); } .button--background-teal-light { --button-background: var(--color-teal-light); } .button--background-teal-light:hover, .button--background-teal-light:focus, .button--background-teal-light:focus-within { --button-background: var(--color-teal); } .button--background-teal-light:active { --button-background: var(--color-teal-dark); } .button--background-teal-dark { --button-background: var(--color-teal-dark); } .button--background-teal-dark:hover, .button--background-teal-dark:focus, .button--background-teal-dark:focus-within { --button-background: var(--color-teal-darker); } .button--background-teal-dark:active { --button-background: var(--color-teal-darker); } .button--border-gray-light { --button-border-color: var(--color-gray-light); } .button--border-gray-light:hover, .button--border-gray-light:focus, .button--border-gray-light:focus-within { --button-border-color: var(--color-gray); } .button--border-gray-light:active { --button-border-color: var(--color-gray-dark); } .button--border-gray-dark { --button-border-color: var(--color-gray-dark); } .button--border-gray-dark:hover, .button--border-gray-dark:focus, .button--border-gray-dark:focus-within { --button-border-color: var(--color-gray-darker); } .button--border-gray-dark:active { --button-border-color: var(--color-gray-darker); } .button--border-orange-light { --button-border-color: var(--color-orange-light); } .button--border-orange-light:hover, .button--border-orange-light:focus, .button--border-orange-light:focus-within { --button-border-color: var(--color-orange); } .button--border-orange-light:active { --button-border-color: var(--color-orange-dark); } .button--border-orange-dark { --button-border-color: var(--color-orange-dark); } .button--border-orange-dark:hover, .button--border-orange-dark:focus, .button--border-orange-dark:focus-within { --button-border-color: var(--color-orange-darker); } .button--border-orange-dark:active { --button-border-color: var(--color-orange-darker); } .button--border-magenta-light { --button-border-color: var(--color-magenta-light); } .button--border-magenta-light:hover, .button--border-magenta-light:focus, .button--border-magenta-light:focus-within { --button-border-color: var(--color-magenta); } .button--border-magenta-light:active { --button-border-color: var(--color-magenta-dark); } .button--border-magenta-dark { --button-border-color: var(--color-magenta-dark); } .button--border-magenta-dark:hover, .button--border-magenta-dark:focus, .button--border-magenta-dark:focus-within { --button-border-color: var(--color-magenta-darker); } .button--border-magenta-dark:active { --button-border-color: var(--color-magenta-darker); } .button--border-purple-light { --button-border-color: var(--color-purple-light); } .button--border-purple-light:hover, .button--border-purple-light:focus, .button--border-purple-light:focus-within { --button-border-color: var(--color-purple); } .button--border-purple-light:active { --button-border-color: var(--color-purple-dark); } .button--border-purple-dark { --button-border-color: var(--color-purple-dark); } .button--border-purple-dark:hover, .button--border-purple-dark:focus, .button--border-purple-dark:focus-within { --button-border-color: var(--color-purple-darker); } .button--border-purple-dark:active { --button-border-color: var(--color-purple-darker); } .button--border-blue-light { --button-border-color: var(--color-blue-light); } .button--border-blue-light:hover, .button--border-blue-light:focus, .button--border-blue-light:focus-within { --button-border-color: var(--color-blue); } .button--border-blue-light:active { --button-border-color: var(--color-blue-dark); } .button--border-blue-dark { --button-border-color: var(--color-blue-dark); } .button--border-blue-dark:hover, .button--border-blue-dark:focus, .button--border-blue-dark:focus-within { --button-border-color: var(--color-blue-darker); } .button--border-blue-dark:active { --button-border-color: var(--color-blue-darker); } .button--border-green-light { --button-border-color: var(--color-green-light); } .button--border-green-light:hover, .button--border-green-light:focus, .button--border-green-light:focus-within { --button-border-color: var(--color-green); } .button--border-green-light:active { --button-border-color: var(--color-green-dark); } .button--border-green-dark { --button-border-color: var(--color-green-dark); } .button--border-green-dark:hover, .button--border-green-dark:focus, .button--border-green-dark:focus-within { --button-border-color: var(--color-green-darker); } .button--border-green-dark:active { --button-border-color: var(--color-green-darker); } .button--border-teal-light { --button-border-color: var(--color-teal-light); } .button--border-teal-light:hover, .button--border-teal-light:focus, .button--border-teal-light:focus-within { --button-border-color: var(--color-teal); } .button--border-teal-light:active { --button-border-color: var(--color-teal-dark); } .button--border-teal-dark { --button-border-color: var(--color-teal-dark); } .button--border-teal-dark:hover, .button--border-teal-dark:focus, .button--border-teal-dark:focus-within { --button-border-color: var(--color-teal-darker); } .button--border-teal-dark:active { --button-border-color: var(--color-teal-darker); } .button--background-gradient-blue-green { --button-background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-green) 100%); --button-border-color: transparent; } .button--background-gradient-blue-green:hover, .button--background-gradient-blue-green:focus, .button--background-gradient-blue-green:focus-within { --button-background: linear-gradient(90deg, var(--color-blue-dark) 0%, var(--color-green-dark) 100%); --button-border-color: transparent; } .button--background-gradient-blue-green:active { --button-background: linear-gradient(90deg, var(--color-blue-darker) 0%, var(--color-green-darker) 100%); --button-border-color: transparent; } .button--background-gradient-green-blue { --button-background: linear-gradient(90deg, var(--color-green) 0%, var(--color-blue) 100%); --button-border-color: transparent; } .button--background-gradient-green-blue:hover, .button--background-gradient-green-blue:focus, .button--background-gradient-green-blue:focus-within { --button-background: linear-gradient(90deg, var(--color-green-dark) 0%, var(--color-blue-dark) 100%); --button-border-color: transparent; } .button--background-gradient-green-green:active { --button-background: linear-gradient(90deg, var(--color-green-darker) 0%, var(--color-blue-darker) 100%); --button-border-color: transparent; } .button--background-gradient-magenta-orange { --button-background: linear-gradient(90deg, var(--color-magenta) 0%, var(--color-orange) 100%); --button-border-color: transparent; } .button--background-gradient-magenta-orange:hover, .button--background-gradient-magenta-orange:focus, .button--background-gradient-magenta-orange:focus-within { --button-background: linear-gradient(90deg, var(--color-magenta-dark) 0%, var(--color-orange-dark) 100%); --button-border-color: transparent; } .button--background-gradient-magenta-orange:active { --button-background: linear-gradient(90deg, var(--color-magenta-darker) 0%, var(--color-orange-darker) 100%); --button-border-color: transparent; } .button--background-gradient-orange-magenta { --button-background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-magenta) 100%); --button-border-color: transparent; } .button--background-gradient-orange-magenta:hover, .button--background-gradient-orange-magenta:focus, .button--background-gradient-orange-magenta:focus-within { --button-background: linear-gradient(90deg, var(--color-orange-dark) 0%, var(--color-magenta-dark) 100%); --button-border-color: transparent; } .button--background-gradient-orange-orange:active { --button-background: linear-gradient(90deg, var(--color-orange-darker) 0%, var(--color-magenta-darker) 100%); --button-border-color: transparent; } .button--background-gradient-magenta-purple { --button-background: linear-gradient(90deg, var(--color-magenta) 0%, var(--color-purple) 100%); --button-border-color: transparent; } .button--background-gradient-magenta-purple:hover, .button--background-gradient-magenta-purple:focus, .button--background-gradient-magenta-purple:focus-within { --button-background: linear-gradient(90deg, var(--color-magenta-dark) 0%, var(--color-purple-dark) 100%); --button-border-color: transparent; } .button--background-gradient-magenta-purple:active { --button-background: linear-gradient(90deg, var(--color-magenta-darker) 0%, var(--color-purple-darker) 100%); --button-border-color: transparent; } .button--background-gradient-purple-magenta { --button-background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-magenta) 100%); --button-border-color: transparent; } .button--background-gradient-purple-magenta:hover, .button--background-gradient-purple-magenta:focus, .button--background-gradient-purple-magenta:focus-within { --button-background: linear-gradient(90deg, var(--color-purple-dark) 0%, var(--color-magenta-dark) 100%); --button-border-color: transparent; } .button--background-gradient-purple-purple:active { --button-background: linear-gradient(90deg, var(--color-purple-darker) 0%, var(--color-magenta-darker) 100%); --button-border-color: transparent; } .button--background-gradient-orange-green { --button-background: linear-gradient(90deg, var(--color-orange) 0%, var(--color-green) 100%); --button-border-color: transparent; } .button--background-gradient-orange-green:hover, .button--background-gradient-orange-green:focus, .button--background-gradient-orange-green:focus-within { --button-background: linear-gradient(90deg, var(--color-orange-dark) 0%, var(--color-green-dark) 100%); --button-border-color: transparent; } .button--background-gradient-orange-green:active { --button-background: linear-gradient(90deg, var(--color-orange-darker) 0%, var(--color-green-darker) 100%); --button-border-color: transparent; } .button--background-gradient-green-orange { --button-background: linear-gradient(90deg, var(--color-green) 0%, var(--color-orange) 100%); --button-border-color: transparent; } .button--background-gradient-green-orange:hover, .button--background-gradient-green-orange:focus, .button--background-gradient-green-orange:focus-within { --button-background: linear-gradient(90deg, var(--color-green-dark) 0%, var(--color-orange-dark) 100%); --button-border-color: transparent; } .button--background-gradient-green-green:active { --button-background: linear-gradient(90deg, var(--color-green-darker) 0%, var(--color-orange-darker) 100%); --button-border-color: transparent; } .button--background-gradient-purple-blue { --button-background: linear-gradient(90deg, var(--color-purple) 0%, var(--color-blue) 100%); --button-border-color: transparent; } .button--background-gradient-purple-blue:hover, .button--background-gradient-purple-blue:focus, .button--background-gradient-purple-blue:focus-within { --button-background: linear-gradient(90deg, var(--color-purple-dark) 0%, var(--color-blue-dark) 100%); --button-border-color: transparent; } .button--background-gradient-purple-blue:active { --button-background: linear-gradient(90deg, var(--color-purple-darker) 0%, var(--color-blue-darker) 100%); --button-border-color: transparent; } .button--background-gradient-blue-purple { --button-background: linear-gradient(90deg, var(--color-blue) 0%, var(--color-purple) 100%); --button-border-color: transparent; } .button--background-gradient-blue-purple:hover, .button--background-gradient-blue-purple:focus, .button--background-gradient-blue-purple:focus-within { --button-background: linear-gradient(90deg, var(--color-blue-dark) 0%, var(--color-purple-dark) 100%); --button-border-color: transparent; } .button--background-gradient-blue-blue:active { --button-background: linear-gradient(90deg, var(--color-blue-darker) 0%, var(--color-purple-darker) 100%); --button-border-color: transparent; } .button--background-transparent { --button-background: transparent; } .button--background-transparent:hover, .button--background-transparent:focus, .button--background-transparent:focus-within { --button-background: transparent; } .button--background-transparent:active { --button-background: transparent; } .button--border-transparent { --button-border-color: transparent; } .button--border-transparent:hover, .button--border-transparent:focus, .button--border-transparent:focus-within { --button-border-color: transparent; } .button--border-transparent:active { --button-border-color: transparent; } .button--background-black { --button-background: var(--color-gray-dark); } .button--border-black { --button-border-color: var(--color-gray-dark); } .button--text-black { --button-text-color: var(--color-gray-dark); } .button--border-none { border: none !important; } .wait { display: inline-block; margin-right: 0.35em; transition: opacity .75s linear; opacity: 0; animation: wait 1.5s infinite ease-in-out alternate; } .wait::before { content: '●'; } /** New HubSpot forms **/ :root { --hsf-global__font-family: var(--typography-body-font); --hsf-global__font-size: 15px; --hsf-global__color: var(--typography-body-text-color); /* * Docs say hsf-global-error__color but they're actually using hsf-global__error-color, * so we're leaving this here as a failsafe. */ --hsf-global-error__color: var(--color-magenta); --hsf-global__error-color: var(--color-magenta); --hsf-button__border-radius: var(--button-border-radius); --hsf-button__background-color: var(--button-background); --hsf-button__border-color: var(--button-border-color); --hsf-button__border-style: var(--button-border-style); --hsf-button__color: var(--button-text-color); --hsf-button__padding: var(--button-padding); --hsf-background__padding: 10px; } [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret { background: #fff !important; border-radius: 6px !important; border-color: var(--color-gray-light) !important; padding: 0 10px !important; margin-right: 5px !important; } [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret:hover, [data-hsfc-id=Renderer] .hsfc-PhoneInput__FlagAndCaret:focus-visible { background: var(--color-gray-lighter) !important; } [data-hsfc-id=Renderer] .hsfc-PhoneInput:not(.hsfc-PhoneInput--rtl)>.hsfc-TextInput { padding-left: 10px !important; } [data-hsfc-id=Renderer] .hsfc-Button { font-weight: var(--button-font-weight) !important; } [data-hsfc-id=Renderer] .hsfc-DropdownOptions { background: #fff !important; border-color: var(--color-gray-light) !important; border-radius: 6px !important; } [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem { background: #fff !important; filter: none !important; } [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:hover, [data-hsfc-id=Renderer] .hsfc-DropdownOptions__List__ListItem:focus-visible { background: var(--color-gray-lighter) !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options label { display: flex !important; } [data-hsfc-id=Renderer] .hsfc-CheckboxFieldGroup__Options label>input { flex: 0; border-radius: 4px; } form { overflow: hidden; width: 100%; } form fieldset.form-columns-2 { display: flex; gap: 23px; } form .hs-form-field .input { margin: 0 !important; } [data-hsfc-id='Renderer'] .hsfc-FieldLabel { display: none !important; } .hs-form-field input:not([type='submit']), .hs-form-field textarea, input:not([type='submit']), textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; width: 100% !important; font-size: 15px; font-weight: 400; font-family: var(--typography-body-font); padding: 0px 0 5px 0px; border-top-style: initial; border-right-style: initial; border-left-style: initial; border-top-color: initial; border-right-color: initial; border-left-color: initial; border-image: initial; border-bottom: 1px solid #d7d7d7; border-radius: 0px; background-color: transparent; box-shadow: none; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } .hs-form-field input:not([type='submit']):focus, .hs-form-field textarea:focus, .hs-form-field select:focus, input:not([type='submit']):focus, textarea:focus, select:focus { border-color: var(--color-blue); } .hs-fieldtype-select .input { position: relative; } .hs-fieldtype-select .input::after, [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret > span { content: ''; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E") no-repeat center / 10px; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M137.4 374.6c12.5 12.5 32.8 12.5 45.3 0l128-128c9.2-9.2 11.9-22.9 6.9-34.9s-16.6-19.8-29.6-19.8L32 192c-12.9 0-24.6 7.8-29.6 19.8s-2.2 25.7 6.9 34.9l128 128z'/%3E%3C/svg%3E") no-repeat center / 10px; height: 15px !important; width: 15px !important; background-color: currentColor; display: block; position: absolute; right: 0; bottom: 8px; pointer-events: none; } [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret > span { right: unset; bottom: unset; } [data-hsfc-id=Renderer] .hsfc-DropdownInput__Caret { border-radius: 6px; height: 24px; width: 24px; padding: 0 !important; } .hs-fieldtype-checkbox, .hs-fieldtype-booleancheckbox { color: var(--typography-body-text-color); margin-top: 8px; } .hs-fieldtype-checkbox label, .hs-fieldtype-booleancheckbox label, [data-hsfc-id='Renderer'] .hsfc-FieldLabel, .hs-field-desc { font-size: 15px !important; } .hs-fieldtype-checkbox .input ul, .hs-fieldtype-booleancheckbox .input ul { margin: 0; padding: 0; } .hs-fieldtype-checkbox .input ul > li > label, .hs-fieldtype-booleancheckbox .input ul > li > label, [data-hsfc-id='CheckboxFieldGroup'] .hsfc-FieldLabel { display: flex !important; gap: 8px; align-items: flex-start; font-size: 15px; line-height: 1.5; padding: 20px 0 0; } .hs-fieldtype-checkbox .input ul > li > label .hs-error-msgs, .hs-fieldtype-booleancheckbox .input ul > li > label .hs-error-msgs { font-weight: 400; } .hs-fieldtype-checkbox input[type='checkbox'], .hs-fieldtype-booleancheckbox input[type='checkbox'] { background-color: var(--color-white) !important; margin: 0; font: inherit; color: currentColor !important; width: 24px !important; height: 24px; border: 1px solid currentColor; border-radius: 4px !important; place-content: center; flex: 0 0 auto; cursor: pointer; } .hs-fieldtype-checkbox input[type='checkbox']:hover, .hs-fieldtype-booleancheckbox input[type='checkbox']:hover, .hs-fieldtype-checkbox input[type='checkbox']:focus, .hs-fieldtype-booleancheckbox input[type='checkbox']:focus { border-color: var(--color-blue); } .hs-fieldtype-checkbox input[type='checkbox']:checked, .hs-fieldtype-booleancheckbox input[type='checkbox']:checked { background-color: var(--color-blue) !important; border-color: var(--color-blue); } .hs-fieldtype-checkbox input[type='checkbox']:checked:hover, .hs-fieldtype-booleancheckbox input[type='checkbox']:checked:hover, .hs-fieldtype-checkbox input[type='checkbox']:checked:focus, .hs-fieldtype-booleancheckbox input[type='checkbox']:checked:focus { background-color: var(--color-blue-dark) !important; border-color: var(--color-blue-dark); } .hs-fieldtype-checkbox input[type='checkbox']:checked:active, .hs-fieldtype-booleancheckbox input[type='checkbox']:checked:active { background-color: var(--color-blue-darker) !important; border-color: var(--color-blue-darker); } .hs-fieldtype-checkbox input[type='checkbox']::before, .hs-fieldtype-booleancheckbox input[type='checkbox']::before { content: ''; width: 12px; height: 12px; clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%); transform: scale(0); transform-origin: center; transition: transform .12s ease-in-out; box-shadow: inset 10px 10px var(--color-white); display: flex; align-items: center; justify-content: center; position: relative; top: 2px; left: 5px; } .hs-fieldtype-checkbox input[type=checkbox]:checked::before, .hs-fieldtype-booleancheckbox input[type=checkbox]:checked::before { transform: scale(1); } .hs-form-checkbox-display { cursor: pointer; } form ul { list-style-type: none; } fieldset { max-width: none !important; } .hs_error_rollup { display: none; } .field label { display: block; font-size: 18px; padding-top: 20px; color: var(--color-gray-dark); } .hs_error_rollup ul, form .hs-error-msg, form .hs-error-msgs { font-size: 14px; margin-left: 0; padding-top: 0; font-weight: 400; } label.hs-error-msg { color: var(--color-magenta); } form .hs-error-msgs { padding: 0; margin-bottom: 0; } form .hs-submit { margin-top: 3rem; } .submitted-message { margin-top: 20px; } .submitted-message p { font-size: 15px; } input[type=text]:not(.form-control), input[type=password]:not(.form-control), input[type=email]:not(.form-control), input[type=number]:not(.form-control), input[type=tel]:not(.form-control), input[type=url]:not(.form-control), input[type=date]:not(.form-control), textarea:not(.form-control), select:not(.form-control) { padding: 10px 10px 5px 0 !important; border: 0 !important; border-bottom: 1px solid #d7d7d7 !important; border-radius: 0 !important; background-color: transparent !important; color: var(--color-gray-dark); box-shadow: none !important; font-size: 15px; height: 38px; display: block; outline: none !important; width: 100% !important; background-image: none; line-height: 1.428571429; transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; } input[type=text]:not(.form-control):focus, input[type=password]:not(.form-control):focus, input[type=email]:not(.form-control):focus, input[type=number]:not(.form-control):focus, input[type=tel]:not(.form-control):focus, input[type=url]:not(.form-control):focus, input[type=date]:not(.form-control):focus, textarea:focus { border-bottom: 1px solid var(--color-blue) !important } input[type=text]:not(.form-control):disabled, input[type=password]:not(.form-control):disabled, input[type=email]:not(.form-control):disabled, input[type=number]:not(.form-control):disabled, input[type=tel]:not(.form-control):disabled, input[type=url]:not(.form-control):disabled, input[type=date]:not(.form-control):disabled, textarea:not(.form-control):disabled { border-bottom: 1px solid #d0d0d0 !important; color: #d0d0d0; opacity: 1 !important } input[type=text]:not(.form-control)::placeholder, input[type=password]:not(.form-control)::placeholder, input[type=email]:not(.form-control)::placeholder, input[type=number]:not(.form-control)::placeholder, input[type=tel]:not(.form-control)::placeholder, input[type=url]:not(.form-control)::placeholder, input[type=date]:not(.form-control)::placeholder, select.is-placeholder, textarea::placeholder { padding-left: 2px !important; color: var(--color-gray) !important; opacity: 1 !important } input[type=text]:not(.form-control):focus::placeholder, input[type=password]:not(.form-control):focus::placeholder, input[type=email]:not(.form-control):focus::placeholder, input[type=number]:not(.form-control):focus::placeholder, input[type=tel]:not(.form-control):focus::placeholder, input[type=url]:not(.form-control):focus::placeholder, input[type=date]:not(.form-control):focus::placeholder, textarea:not(.form-control):focus::placeholder { color: var(--color-gray-dark) !important; opacity: 1 !important } input[type=text]:not(.form-control):disabled::placeholder, input[type=password]:not(.form-control):disabled::placeholder, input[type=email]:not(.form-control):disabled::placeholder, input[type=number]:not(.form-control):disabled::placeholder, input[type=tel]:not(.form-control):disabled::placeholder, input[type=url]:not(.form-control):disabled::placeholder, input[type=date]:not(.form-control):disabled::placeholder, textarea:not(.form-control):disabled::placeholder { padding-left: 2px !important; color: #d0d0d0 !important; opacity: 1 !important } textarea:not(.form-control) { min-height: 38px; } select:not(.form-control) { color: var(--color-gray-dark); text-overflow: ellipsis; padding-right: 30px; outline: none !important; } option { color: var(--typography-body-text-color); } /** * For forms that are placed in a section that has a gradient background. */ [class*='background-gradient'] form, [class*='background-gradient'] .hs-error-msg, [class*='background-gradient'] input[type=date]:not(.form-control), [class*='background-gradient'] input[type=email]:not(.form-control), [class*='background-gradient'] input[type=number]:not(.form-control), [class*='background-gradient'] input[type=password]:not(.form-control), [class*='background-gradient'] input[type=tel]:not(.form-control), [class*='background-gradient'] input[type=text]:not(.form-control), [class*='background-gradient'] input[type=url]:not(.form-control), [class*='background-gradient'] textarea:not(.form-control)::placeholder, [class*='background-gradient'] input[type=date]:not(.form-control)::placeholder, [class*='background-gradient'] input[type=email]:not(.form-control)::placeholder, [class*='background-gradient'] input[type=number]:not(.form-control)::placeholder, [class*='background-gradient'] input[type=password]:not(.form-control)::placeholder, [class*='background-gradient'] input[type=tel]:not(.form-control)::placeholder, [class*='background-gradient'] input[type=text]:not(.form-control)::placeholder, [class*='background-gradient'] input[type=url]:not(.form-control)::placeholder, [class*='background-gradient'] textarea:not(.form-control)::placeholder { color: var(--color-white) !important; } [class*='background-gradient'] input[type=date]:not(.form-control):focus, [class*='background-gradient'] input[type=email]:not(.form-control):focus, [class*='background-gradient'] input[type=number]:not(.form-control):focus, [class*='background-gradient'] input[type=password]:not(.form-control):focus, [class*='background-gradient'] input[type=tel]:not(.form-control):focus, [class*='background-gradient'] input[type=text]:not(.form-control):focus, [class*='background-gradient'] input[type=url]:not(.form-control):focus, [class*='background-gradient'] textarea:focus { border-bottom-color: currentColor !important; } @media (max-width: 767px) { .hs-form-field { width: 100% !important; } form .hs-error-msgs { position: relative; } } :root { --image-border-radius: 0; --video-border-radius: 0; } /** * For responsive images */ img { max-width: 100%; height: auto; border-radius: inherit; } /** * The wrapper for HubSpot common module images. */ .hs_cos_wrapper_type_linked_image { border-radius: inherit; display: flex; } /** * For images that link to somewhere. */ .hs_cos_wrapper_type_linked_image > a { display: flex; } /** * Inline images in rich text areas. */ .hs_cos_wrapper img[style*=float] { margin: 1rem 2rem; } video { border-radius: var(--video-border-radius); max-width: 100%; object-fit: cover; } iframe { max-width: 100%; } :root { --table-border-radius: 0; --table-font-size: 15px; --table-text-align: inherit; --table-text-color: inherit; --table-row-even-background-color: transparent; --table-row-odd-background-color: transparent; --table-row-even-text-color: var(--typography-body-color); --table-row-odd-text-color: var(--typography-body-color); --table-footer-background-color: var(--color-blue); --table-footer-text-color: var(--color-white); --table-header-text-color: var(--typography-body-color); --table-header-background-color: var(--color-gray-lighter); --table-header-padding: 10px; --table-header-font-weight: 700; --table-header-cell-border-width: 1px; --table-header-cell-border-style: solid; --table-header-cell-border-color: var(--color-gray-light); --table-header-cell-text-align: inherit; --table-cell-background-color: transparent; --table-cell-padding: 10px; --table-cell-font-weight: 300; --table-cell-border-width: 1px; --table-cell-border-style: solid; --table-cell-border-color: var(--color-gray-light); --table-cell-text-align: inherit; } table { font-size: var(--table-font-size); border: none !important; border-radius: var(--table-border-radius); border-collapse: collapse; border-spacing: 0; overflow: hidden; max-width: 100% !important; text-align: var(--table-text-align); color: var(--table-text-color); } table th { font-weight: var(--table-header-font-weight, var(--table-cell-font-weight)); padding: var(--table-header-padding, var(--table-cell-padding)) !important; background: var(--table-header-background-color, var(--table-cell-background-color)); color: var(--table-header-text-color, var(--table-cell-text-color, var(--table-text-color))); border-width: var(--table-header-cell-border-width, var(--table-cell-border-width)) !important; border-style: var(--table-header-cell-border-style, var(--table-cell-border-style)) !important; border-color: var(--table-header-cell-border-color, var(--table-cell-border-color)) !important; text-align: var(--table-header-cell-text-align, var(--table-cell-text-align)); } table td { font-weight: var(--table-cell-font-weight); padding: var(--table-cell-padding) !important; background: var(--table-cell-background-color); color: var(--table-cell-text-color); border-width: var(--table-cell-border-width) !important; border-style: var(--table-cell-border-style) !important; border-color: var(--table-cell-border-color) !important; text-align: var(--table-cell-text-align); } table thead { display: table-header-group; vertical-align: middle; border-color: inherit; border-collapse: separate; } table tbody tr:nth-of-type(n) { background: var(--table-row-odd-background-color); color: var(--table-row-odd-text-color); } table tbody tr:nth-of-type(2n) { background: var(--table-row-even-background-color); color: var(--table-row-even-text-color); } table tfoot { color: var(--table-footer-text-color); background: var(--table-footer-background-color); } :root { --dialog-backdrop-color: var(--color-black-60); --dialog-header-logo-size: 32px; --dialog-header-logo-gap: 20px; } .dnd-dialog-layer { background: var(--color-gray); border: 3px dotted var(--color-white); position: relative; overflow: hidden; /** * This is used for the drag and drop section which holds the dialog modules on the page editor. * We only want this visible on the page editor for an easier editing experience. */ display: none; } .dnd-dialog-layer::before { content: 'Dialog Layer'; color: var(--color-white); font-weight: 700; font-size: 200px; white-space: nowrap; opacity: .1; position: absolute; top: 50px; left: 0; } .dnd-dialog-layer .column--not-scrolled-into-view { opacity: 1; } .dialog__layer { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; pointer-events: none; transition-delay: .3s; visibility: hidden; } .dialog__backdrop { position: absolute; top: 0; left: 0; background: var(--dialog-backdrop-color, #000); width: 100%; height: 100%; opacity: 0; pointer-events: none; transition: opacity .3s ease; } [data-dialog-active] .dialog__layer, [data-dialog-active] .dialog__backdrop { opacity: 1; visibility: visible; transition-delay: 0s; } [data-dialog-active] .dialog__backdrop { pointer-events: all; } .dialog { position: fixed; width: 100vw; height: 100vh; opacity: 0; visibility: hidden; top: 0; left: 0; display: flex; align-items: center; justify-content: center; transition-delay: .3s; } .dialog__inner-wrapper { border: 1px solid var(--color-black-20); height: auto; background: var(--color-white); opacity: 0; margin: auto; padding: 0; position: relative; border-radius: 6px; box-shadow: var(--color-black-50) 0px 5px 15px; pointer-events: auto; width: 600px; margin: 0 3%; max-height: 80vh; overflow: auto; transform: translate3d(0, -50%, 0); transition: opacity .3s ease, transform .3s ease; } .dialog__inner { display: flex; flex-direction: column; gap: 20px; padding: 21px; } .dialog__content-wrapper { margin: 0 calc(var(--dialog-header-logo-size) + var(--dialog-header-logo-gap)); } .dialog__header-wrapper { display: flex; gap: var(--dialog-header-logo-gap);; margin-right: calc(var(--dialog-header-logo-size) + var(--dialog-header-logo-gap)); } .dialog__heading.h5 { margin: 0; font-family: var(--typography-font-iskra); font-weight: 500; } .dialog__description { font-size: var(--typography-fluid-scale-0); line-height: 1.5; margin: 0; } .dialog__heading + .dialog__description { margin-top: 16px; } .dialog__header-logo { height: var(--dialog-header-logo-size); width: var(--dialog-header-logo-size); } .dialog .actions { display: flex; gap: 0.5rem; } .dialog .hs-form .hs-submit { display: flex; align-items: center; justify-content: flex-end; margin-top: 40px; } .dialog .hs-form-field input:not([type='checkbox']), .dialog .hs-form-field select, .dialog .hs-form-field textarea { border-bottom-color: var(--color-gray-light) !important; color: var(--typography-body-text-color) !important; font-size: 15px; } .dialog .hs-form-field input:focus, .dialog .hs-form-field select:focus, .dialog .hs-form-field textarea:focus { border-bottom-color: var(--color-blue) !important; } .dialog form .hs-error-msgs { position: relative; } .dialog form .hs-error-msg { color: var(--color-magenta) !important; } .dialog .hs-form { display: flex; flex-direction: column; } .dialog .button, .dialog .hs-button, .dialog input[type='submit'] { --button-border-width: 1px; font-size: 15px; padding: 7px 20px; } .dialog .hs-form-field select.is-placeholder { color: var(--color-gray-70) !important; } .dialog .hs-form-field input::placeholder { color: var(--color-gray); } .dialog .field label:not(.hs-error-msg) { padding-top: 20px; } .dialog__footer { display: flex; align-items: center; justify-content: flex-end; } .dialog__placeholder { border-radius: 10px; overflow: hidden; background: var(--color-black-10); border: 4px dotted var(--color-white); display: flex; text-align: center; flex-direction: column; padding: 1rem; color: var(--color-white); } .dialog__placeholder-heading { color: var(--color-white); display: flex; align-items: center; justify-content: center; gap: 10px; font-weight: 600; } .dialog__placeholder-pill { background: var(--color-white); color: var(--color-black); border-radius: 6px; padding: 4px 8px; font-size: var(--typography-body-font-size); } .dialog__placeholder-disclaimer { margin: 0; opacity: 0.7; } .dialog .submitted-message { font-size: var(--typography-fluid-scale-0); margin: 0; line-height: 1.5; } .dialog iframe { height: 100%; width: 100%; border: none; border-radius: 0; } .dialog[data-type='iframe'] .dialog__inner-wrapper { width: 1120px; height: 100%; overflow: hidden; } .dialog[data-type='iframe'] .dialog__inner-wrapper iframe { visibility: hidden; opacity: 0; transition: visibility 0.3s linear, opacity 0.3s linear; } .dialog__inner-wrapper > .wait-wrapper { display: flex; align-items: center; justify-content: center; height: 100%; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: -1; } @media (max-width: 767px) { .dialog__inner-wrapper { max-width: 600px; } .dialog__content-wrapper { margin-right: 0; margin-left: 0; } .dialog__inner { min-width: 0; } .dialog .actions { width: 100%; flex-direction: column; } .dialog .actions .hs-button, .dialog .actions .button { width: 100%; } } [class^='textio-icon textio-icon-']::before, [class*=' icon textio-icon-']::before { /** * We have to set these specifically to override stuff output * by the fontello tool that we don't want. */ margin-right: 0; margin-left: 0; } /** * Most of the these styles are adapted from Font Awesome styles * in order that our custom fontello-based webfont obeys the styling * rules and has the feature set of Font Awesome. */ .textio-icon { display: inline-block; font: normal normal normal 14px/1 fontello; font-size: inherit; text-rendering: auto; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; } .textio-icon-lg { font-size: 1.33333333em; line-height: .75em; vertical-align: -15%; } .textio-icon-fw { width: 1.28571429em; text-align: center; } .textio-icon-ul { margin-left: 2.14285714em; padding-left: 0; list-style-type: none; } .textio-icon-ul>li { position: relative; } .textio-icon-li { position: absolute; top: .14285714em; left: -2.14285714em; width: 2.14285714em; text-align: center; } .textio-icon-li textio-icon-lg { left: -1.85714286em; } .textio-icon-border { padding: .2em .25em .15em; border: solid .08em var(--color-gray); border-radius: .1em; } .textio-icon-pull-left { margin-right: .3em; float: left; } .textio-icon-pull-right { margin-left: .3em; float: right; } .textio-icon-stack { display: inline-block; position: relative; width: 2em; height: 2em; line-height: 2em; vertical-align: middle; } .textio-icon-stack-1x, .textio-icon-stack-2x { position: absolute; left: 0; width: 100%; text-align: center; } .textio-icon-stack-1x { line-height: inherit; } .textio-icon-stack-2x { font-size: 2em; } .textio-icon-nudge-left { padding-right: 4px; } .slider__container .splide__toggle, .slider__container .splide__toggle__pause { display: none; } .slider__container .splide__controls .splide__pagination { gap: 15px; } .slider__container .splide__pagination__page .splide__pagination__page:not(.is-active) { opacity: 0.75 !important; } .slider__container .splide__pagination__page.is-active { transform: scale(1); } .slider__container .splide__controls { margin-top: 50px; } .homepage-hero-blobs-section { display: none; } @media (min-width: 2275px) { .homepage-hero-blobs-section { display: block; position: absolute; top: 0; left: 0; width: 100%; } } .images-overlapping-previous-section { margin-top: calc(var(--section-padding-vertical-inverse) - 100px) !important; } @media (min-width: 768px) and (max-width: 1200px) { .images-overlapping-previous-section > .row-fluid { flex-wrap: wrap; } .images-overlapping-previous-section > .row-fluid > div { flex: 0 45%; display: flex !important; justify-content: flex-end !important; flex-direction: row !important; } .images-overlapping-previous-section > .row-fluid > div:nth-of-type(even) { justify-content: flex-start !important; } } @media (max-width: 767px) { .images-overlapping-previous-section { margin-top: calc(var(--section-padding-vertical-inverse) - 50px) !important; } } @media (max-width: 767px) { .images-overlapping-previous-section > .row-fluid { flex-direction: column-reverse; } } @media (max-width: 1000px) { .two-column-hero-with-media-and-form-section > .row-fluid { flex-wrap: wrap; } /** * Limit the hero image height to 500px. */ .two-column-hero-with-media-and-form-section > .row-fluid .widget-span > .row-fluid-wrapper > .row-fluid > .widget-span > .widget-type-linked_image img { max-height: 500px; object-fit: contain; } } .tools-section { overflow: hidden; } .tools-section img { border-radius: 10px; margin-bottom: -150px; } @media (max-width: 767px) { .tools-section > .row-fluid .row-fluid { flex-direction: column-reverse; } } .testimonial-card-section > .row-fluid > .dnd-column { padding: 30px; border-radius: 25px; box-shadow: 0px 1px 25px rgba(0 0 0 / 0.1); } .page-intro__emphasis { font-size: calc(var(--typography-fluid-scale-2) * 1.133); font-weight: 600; letter-spacing: 0.15px; color: var(--color-gray); line-height: 1.2; }