/*
1. Libraries
2. Base
*/
/* Enable CSS debug mode */
/* * {border: 1px solid red;} */
/* Libraries */
*,
*:before,
*:after {
box-sizing: border-box;
} /* 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 {
margin: 0;
}
/**
* 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 */
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 {
/* 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;
}
/**
* 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;
} /* https://github.com/necolas/normalize.css */
/* CSS variables */
:root {
--column-gap: 2.13%;
--column-width-multiplier: 8.333;
}
/* Mobile layout */
.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%;
}
/* Desktop layout */
@media (min-width: 768px) {
.row-fluid {
flex-wrap: nowrap;
justify-content: space-between;
}
.row-fluid .span1 {
width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
}
.row-fluid .span2 {
width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
}
.row-fluid .span3 {
width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
}
.row-fluid .span4 {
width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
}
.row-fluid .span5 {
width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
}
.row-fluid .span6 {
width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
}
.row-fluid .span7 {
width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
}
.row-fluid .span8 {
width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
}
.row-fluid .span9 {
width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
}
.row-fluid .span10 {
width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
}
.row-fluid .span11 {
width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
}
} /* layout classes https://github.com/HubSpot/cms-theme-boilerplate */
.content-wrapper {
margin: 0 auto;
padding: 0;
}
@media screen and (min-width: 1380px) {
.content-wrapper {
padding: 0;
}
}
.dnd-section>.row-fluid {
margin: 0 auto;
}
.dnd-section .dnd-column {
padding: 0;
}
@media (max-width: 767px) {
.dnd-section .dnd-column {
padding: 0;
}
} /* dnd classes https://github.com/HubSpot/cms-theme-boilerplate */
[data-sal] {
transition-delay: 0s;
transition-delay: var(--sal-delay, 0s);
transition-duration: .2s;
transition-duration: var(--sal-duration, .2s);
transition-timing-function: ease;
transition-timing-function: var(--sal-easing, ease)
}
[data-sal][data-sal-duration="200"] {
transition-duration: .2s
}
[data-sal][data-sal-duration="250"] {
transition-duration: .25s
}
[data-sal][data-sal-duration="300"] {
transition-duration: .3s
}
[data-sal][data-sal-duration="350"] {
transition-duration: .35s
}
[data-sal][data-sal-duration="400"] {
transition-duration: .4s
}
[data-sal][data-sal-duration="450"] {
transition-duration: .45s
}
[data-sal][data-sal-duration="500"] {
transition-duration: .5s
}
[data-sal][data-sal-duration="550"] {
transition-duration: .55s
}
[data-sal][data-sal-duration="600"] {
transition-duration: .6s
}
[data-sal][data-sal-duration="650"] {
transition-duration: .65s
}
[data-sal][data-sal-duration="700"] {
transition-duration: .7s
}
[data-sal][data-sal-duration="750"] {
transition-duration: .75s
}
[data-sal][data-sal-duration="800"] {
transition-duration: .8s
}
[data-sal][data-sal-duration="850"] {
transition-duration: .85s
}
[data-sal][data-sal-duration="900"] {
transition-duration: .9s
}
[data-sal][data-sal-duration="950"] {
transition-duration: .95s
}
[data-sal][data-sal-duration="1000"] {
transition-duration: 1s
}
[data-sal][data-sal-duration="1050"] {
transition-duration: 1.05s
}
[data-sal][data-sal-duration="1100"] {
transition-duration: 1.1s
}
[data-sal][data-sal-duration="1150"] {
transition-duration: 1.15s
}
[data-sal][data-sal-duration="1200"] {
transition-duration: 1.2s
}
[data-sal][data-sal-duration="1250"] {
transition-duration: 1.25s
}
[data-sal][data-sal-duration="1300"] {
transition-duration: 1.3s
}
[data-sal][data-sal-duration="1350"] {
transition-duration: 1.35s
}
[data-sal][data-sal-duration="1400"] {
transition-duration: 1.4s
}
[data-sal][data-sal-duration="1450"] {
transition-duration: 1.45s
}
[data-sal][data-sal-duration="1500"] {
transition-duration: 1.5s
}
[data-sal][data-sal-duration="1550"] {
transition-duration: 1.55s
}
[data-sal][data-sal-duration="1600"] {
transition-duration: 1.6s
}
[data-sal][data-sal-duration="1650"] {
transition-duration: 1.65s
}
[data-sal][data-sal-duration="1700"] {
transition-duration: 1.7s
}
[data-sal][data-sal-duration="1750"] {
transition-duration: 1.75s
}
[data-sal][data-sal-duration="1800"] {
transition-duration: 1.8s
}
[data-sal][data-sal-duration="1850"] {
transition-duration: 1.85s
}
[data-sal][data-sal-duration="1900"] {
transition-duration: 1.9s
}
[data-sal][data-sal-duration="1950"] {
transition-duration: 1.95s
}
[data-sal][data-sal-duration="2000"] {
transition-duration: 2s
}
[data-sal][data-sal-delay="50"] {
transition-delay: .05s
}
[data-sal][data-sal-delay="100"] {
transition-delay: .1s
}
[data-sal][data-sal-delay="150"] {
transition-delay: .15s
}
[data-sal][data-sal-delay="200"] {
transition-delay: .2s
}
[data-sal][data-sal-delay="250"] {
transition-delay: .25s
}
[data-sal][data-sal-delay="300"] {
transition-delay: .3s
}
[data-sal][data-sal-delay="350"] {
transition-delay: .35s
}
[data-sal][data-sal-delay="400"] {
transition-delay: .4s
}
[data-sal][data-sal-delay="450"] {
transition-delay: .45s
}
[data-sal][data-sal-delay="500"] {
transition-delay: .5s
}
[data-sal][data-sal-delay="550"] {
transition-delay: .55s
}
[data-sal][data-sal-delay="600"] {
transition-delay: .6s
}
[data-sal][data-sal-delay="650"] {
transition-delay: .65s
}
[data-sal][data-sal-delay="700"] {
transition-delay: .7s
}
[data-sal][data-sal-delay="750"] {
transition-delay: .75s
}
[data-sal][data-sal-delay="800"] {
transition-delay: .8s
}
[data-sal][data-sal-delay="850"] {
transition-delay: .85s
}
[data-sal][data-sal-delay="900"] {
transition-delay: .9s
}
[data-sal][data-sal-delay="950"] {
transition-delay: .95s
}
[data-sal][data-sal-delay="1000"] {
transition-delay: 1s
}
[data-sal][data-sal-easing=linear] {
transition-timing-function: linear
}
[data-sal][data-sal-easing=ease] {
transition-timing-function: ease
}
[data-sal][data-sal-easing=ease-in] {
transition-timing-function: ease-in
}
[data-sal][data-sal-easing=ease-out] {
transition-timing-function: ease-out
}
[data-sal][data-sal-easing=ease-in-out] {
transition-timing-function: ease-in-out
}
[data-sal][data-sal-easing=ease-in-cubic] {
transition-timing-function: cubic-bezier(.55, .055, .675, .19)
}
[data-sal][data-sal-easing=ease-out-cubic] {
transition-timing-function: cubic-bezier(.215, .61, .355, 1)
}
[data-sal][data-sal-easing=ease-in-out-cubic] {
transition-timing-function: cubic-bezier(.645, .045, .355, 1)
}
[data-sal][data-sal-easing=ease-in-circ] {
transition-timing-function: cubic-bezier(.6, .04, .98, .335)
}
[data-sal][data-sal-easing=ease-out-circ] {
transition-timing-function: cubic-bezier(.075, .82, .165, 1)
}
[data-sal][data-sal-easing=ease-in-out-circ] {
transition-timing-function: cubic-bezier(.785, .135, .15, .86)
}
[data-sal][data-sal-easing=ease-in-expo] {
transition-timing-function: cubic-bezier(.95, .05, .795, .035)
}
[data-sal][data-sal-easing=ease-out-expo] {
transition-timing-function: cubic-bezier(.19, 1, .22, 1)
}
[data-sal][data-sal-easing=ease-in-out-expo] {
transition-timing-function: cubic-bezier(1, 0, 0, 1)
}
[data-sal][data-sal-easing=ease-in-quad] {
transition-timing-function: cubic-bezier(.55, .085, .68, .53)
}
[data-sal][data-sal-easing=ease-out-quad] {
transition-timing-function: cubic-bezier(.25, .46, .45, .94)
}
[data-sal][data-sal-easing=ease-in-out-quad] {
transition-timing-function: cubic-bezier(.455, .03, .515, .955)
}
[data-sal][data-sal-easing=ease-in-quart] {
transition-timing-function: cubic-bezier(.895, .03, .685, .22)
}
[data-sal][data-sal-easing=ease-out-quart] {
transition-timing-function: cubic-bezier(.165, .84, .44, 1)
}
[data-sal][data-sal-easing=ease-in-out-quart] {
transition-timing-function: cubic-bezier(.77, 0, .175, 1)
}
[data-sal][data-sal-easing=ease-in-quint] {
transition-timing-function: cubic-bezier(.755, .05, .855, .06)
}
[data-sal][data-sal-easing=ease-out-quint] {
transition-timing-function: cubic-bezier(.23, 1, .32, 1)
}
[data-sal][data-sal-easing=ease-in-out-quint] {
transition-timing-function: cubic-bezier(.86, 0, .07, 1)
}
[data-sal][data-sal-easing=ease-in-sine] {
transition-timing-function: cubic-bezier(.47, 0, .745, .715)
}
[data-sal][data-sal-easing=ease-out-sine] {
transition-timing-function: cubic-bezier(.39, .575, .565, 1)
}
[data-sal][data-sal-easing=ease-in-out-sine] {
transition-timing-function: cubic-bezier(.445, .05, .55, .95)
}
[data-sal][data-sal-easing=ease-in-back] {
transition-timing-function: cubic-bezier(.6, -.28, .735, .045)
}
[data-sal][data-sal-easing=ease-out-back] {
transition-timing-function: cubic-bezier(.175, .885, .32, 1.275)
}
[data-sal][data-sal-easing=ease-in-out-back] {
transition-timing-function: cubic-bezier(.68, -.55, .265, 1.55)
}
[data-sal|=fade] {
opacity: 0;
transition-property: opacity
}
[data-sal|=fade].sal-animate,
body.sal-disabled [data-sal|=fade] {
opacity: 1
}
[data-sal|=slide] {
opacity: 0;
transition-property: opacity, transform
}
[data-sal=slide-up] {
transform: translateY(20%)
}
[data-sal=slide-down] {
transform: translateY(-20%)
}
[data-sal=slide-left] {
transform: translateX(20%)
}
[data-sal=slide-right] {
transform: translateX(-20%)
}
[data-sal|=slide].sal-animate,
body.sal-disabled [data-sal|=slide] {
opacity: 1;
transform: none
}
[data-sal|=zoom] {
opacity: 0;
transition-property: opacity, transform
}
[data-sal=zoom-in] {
transform: scale(.5)
}
[data-sal=zoom-out] {
transform: scale(1.1)
}
[data-sal|=zoom].sal-animate,
body.sal-disabled [data-sal|=zoom] {
opacity: 1;
transform: none
}
[data-sal|=flip] {
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
transition-property: transform
}
[data-sal=flip-left] {
transform: perspective(2000px) rotateY(-91deg)
}
[data-sal=flip-right] {
transform: perspective(2000px) rotateY(91deg)
}
[data-sal=flip-up] {
transform: perspective(2000px) rotateX(-91deg)
}
[data-sal=flip-down] {
transform: perspective(2000px) rotateX(91deg)
}
[data-sal|=flip].sal-animate,
body.sal-disabled [data-sal|=flip] {
transform: none
}
/*# sourceMappingURL=sal.css.map*/ /* https://github.com/mciastek/sal */
/* Base */
:root {
/* Colors */
--action1: #00C4FF;
--action2: #F63366;
--blackr: #000000;
--black: #10173C;
--black2: #787a80;
--black3: #1e212c;
--black4: #424551;
--black5: #263238;
--black6: #1C1E1F;
--white: #fff;
--gray1: rgba(16, 23, 60, .5);
--whitelite: rgba(255, 255, 255, .8);
--gray2: #cbd6e2;
--gray3: #99acc2;
--gray4: #9A9CA5;
--gray5: #e5e8ed;
--gray6: #dadbdd;
--gray7: #607d8b;
--gray8: #d9d9d9;
--green: #00E1D0;
--blue: #00C4FF;
--blue2: #0562e8;
--blue3: #00ffff;
--blue4: #0039FF;
--blue5: #00bcfb;
--blue6: #00ddc9;
--blue7: #0038ff;
--pink: #E653EA;
--red: #F63366;
--darkgray: #272424;
--purple: #8252F7;
--purple2: #811ff1;
--purple3: #8239ad;
--teal: #17696A;
--orange: #FF4242;
--orange2: #ED1C24;
--new-black: #4D4D4D;
--new-dark-black: #272424;
/* u5 aliases still referenced by modules / shared CSS */
--light-gray: #f5f5f5;
--dark-gray: var(--darkgray);
--btn-dark: var(--darkgray);
/* Opacity helpers */
--black-80: rgba(16, 23, 60, .8);
--black-50: rgba(16, 23, 60, .5);
--black-30: rgba(16, 23, 60, .3);
--black-20: rgba(16, 23, 60, .2);
--black-10: rgba(16, 23, 60, .1);
--white-80: rgba(255, 255, 255, .8);
--white-50: rgba(255, 255, 255, .5);
--white-30: rgba(255, 255, 255, .3);
--white-20: rgba(255, 255, 255, .2);
--white-10: rgba(255, 255, 255, .1);
/* Gradients */
--gradient1: linear-gradient(201deg, rgba(50, 197, 255, .4) 49%, rgba(255, 255, 255, .2) 96%);
--gradient2: linear-gradient(225deg, #7F4EC9 0%, #705DD4 17%, #4C70E6 34%, #3184FA 50%, #389FFF 70%, #41BFFF 100%);
--bg-grad1: linear-gradient(202deg, rgba(16, 23, 60, .4) 4%, rgba(16, 23, 60, 0) 100%);
--bg-grad2: linear-gradient(225deg, #804EC9 0%, #5E67DD 25%, #2E7BF0 44%, #39A1FF 70%, #41BFFF 100%);
--bg-grad3: linear-gradient(0deg, #8628ef, #28bbff);
--bg-card-grad: linear-gradient(227.93deg, #00C4FF 0%, #00C4FF 3.36%, rgba(5, 98, 232, .7) 100%);
--lang-grad: linear-gradient(209deg, #F63366 18%, #8A25F9 90%);
/* Font — sitewide Nunito Sans (loaded in base.html) */
--font1: 'Nunito Sans', sans-serif;
--font2: 'Nunito Sans', sans-serif;
--font3: 'Nunito Sans', sans-serif;
--base-line-height: 1.61803398875;
/* Border Radius (u4 rem→px) */
--border1: 8px;
--border2: 27px;
--border3: 10px;
/* Shadow */
--shadow1: 0 12px 15px 0 rgba(16, 23, 60, .18);
--shadow1hover: 0 8px 10px 0 rgba(16, 23, 60, .2);
--shadow2: 3px 0 8px 0 rgba(16, 23, 60, .2);
--shadow3: 7px 11px 22px 0 rgba(16, 23, 60, .3);
--new-shadow: 5px 8px 15px 0 rgba(0, 0, 0, .1);
--module-shadow: 5px 8px 15px 0 rgba(0, 0, 0, .15);
--module-shadow-inset: inset 5px 8px 15px 0 rgba(0, 0, 0, .15);
--textShadow1: 0 0 2px rgba(0, 0, 0, .5);
/* Animation */
--animation1: .1s ease-in;
--animation2: .25s ease-in;
--animation3: .1s cubic-bezier(.4, 0, 1, 1);
/* Widths */
--center: 1240px;
--center-small: 900px;
/* Spacing */
--section-padding-none: 0;
--section-padding-small: 20px 0;
--section-padding-medium: 40px 0;
--section-padding-large: 80px 0;
--section-margin-none: 0 auto;
--section-margin-small: 0 auto 50px auto;
--section-margin-medium: 0 auto 80px auto;
--section-margin-large: 0 auto 100px auto;
}
/* Centering */
.center {
float: none;
margin-left: auto;
margin-right: auto;
max-width: var(--center);
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
.center-small {
float: none;
margin-left: auto;
margin-right: auto;
max-width: var(--center-small);
width: 100%;
padding-left: 20px;
padding-right: 20px;
}
/* Default anchor link offset */
.anchor {
display: block;
position: relative;
top: -160px;
visibility: hidden;
}
.shadow-boxes {
background-color: var(--black-10);
display: flex;
justify-content: center;
align-items: center;
gap: 50px;
padding: 50px;
.box {
display: flex;
justify-content: center;
align-items: center;
background-color: var(--white);
padding: 16px;
aspect-ratio: 1/1;
max-width: 250px;
width: 100%;
&.shadow1 {
box-shadow: var(--shadow1);
}
&.shadow2 {
box-shadow: var(--shadow2);
}
&.shadow3 {
box-shadow: var(--shadow3);
}
}
}
/* Popover styling */
/* When any card popover is open, lock body scroll. Using class so it works with top-layer. */
body:has(.popover-container:popover-open) {
overflow: hidden;
}
.popover-container {
border:none;
background: transparent;
&:has(form) {
.popover-inner-container {
background: transparent;
padding:0;
}
}
/* Keep dialog within the viewport when short (Popover UA centers tall boxes → top/bottom clip). */
&:popover-open {
display: flex;
flex-direction: column;
box-sizing: border-box;
min-height: 0;
overflow: hidden;
max-height: calc(
100vh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px
);
max-height: calc(
100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px) - 32px
);
}
/* Scroll the white panel when the stack exceeds the viewport; avoid nested flex on content (collapses height when popover is intrinsic-sized). */
&:popover-open .popover-inner-container {
flex: 1 1 auto;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
}
&::backdrop {
background: rgba(0, 0, 0, 0.9);
backdrop-filter: none;
transition: background-color 0.3s;
transition-behavior: allow-discrete;
position: fixed;
pointer-events: auto;
inset: 0px;
}
.popover-inner-container {
padding: 30px;
overflow: visible;
border-radius: var(--border3);
box-shadow: var(--shadow3);
background-color: var(--white);
@media (max-width: 580px) {
padding: 20px;
}
}
/**/
button.close-btn {
display: block;
margin:0 0 20px auto;
border:none;
background:rgba(255,255,255,.25);
width: 48px;
height: 48px;
flex: 0 0 48px;
border-radius: 50%;
border: 2px solid var(--white);
transition: var(--animation1);
span {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
}
svg {
width: 16px;
height: 16px;
path {
fill: var(--white);
transition: var(--animation1);
}
}
&:hover,&:focus {
background: rgba(255,255,255,.9);
svg {
path {
fill: var(--black);
}
}
}
}
.popover-content-container {
&:has(form) {
max-width: 860px;
width: 100%;
}
max-height: 650px;
overflow-y:scroll;
text-align:initial;
h1,h2,h3,h4,h5,h6 {
color: initial;
}
}
}
/* Team Member Popover CSS */
.popover-container.team-member {
.popover-content-upper {
display:block;
margin-bottom: 30px;
.popover-member-name {
margin-bottom:0;
font-weight: bold;
}
.popover-member-position {
margin-top: 10px;
margin-bottom:0;
}
.social-links {
display:flex;
margin-top: 20px;
gap: 5px;
a {
margin:0;
display:flex;
}
a:after {
display:none;
}
a:hover {
svg path {
fill: var(--action1);
}
}
}
}
.popover-member-bio {
display: block;
}
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/* splide pagination and arrows */
ul.splide__pagination {
position: relative;
margin-top: 30px;
bottom: unset;
display: flex;
justify-content: center;
align-items: center;
gap: 12px;
margin-left: auto;
margin-right: auto;
margin-bottom: 0;
padding:0;
li {
margin:0;
padding:0;
button.splide__pagination__page {
width: 24px;
height: 24px;
margin:0;
opacity:1;
border: 2px solid var(--black);
border-radius: 50%;
background: transparent;
transform: none;
transition: var(--animation1);
&:not(.is-active) {
&:hover,&:focus {
background: var(--black-10);
}
}
&.is-active {
background: var(--black);
transform: none;
}
}
}
.dark-mode & {
li {
button.splide__pagination__page {
border: 2px solid var(--white);
&.is-active {
background: var(--white);
transform: none;
}
&:not(.is-active) {
&:hover,&:focus {
background: var(--white-20);
}
}
}
}
}
}
.splide__arrows {
.splide__arrow {
background:var(--white);
border: 1px solid var(--gray1);
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
transition: var(--animation1);
box-shadow: var(--shadow1);
opacity:1!important;
svg {
transition: var(--animation1);
path {
fill: var(--black);
transition: var(--animation1);
}
}
&.splide__arrow--prev {
left: -18px;
transform:scale(0.8);
}
&.splide__arrow--next {
right: -18px;
transform:scale(0.8);
}
&:hover:not(:disabled) {
border: 1px solid var(--black);
background-color: var(--black);
opacity:1!important;
svg {
path {
fill: var(--white);
}
}
}
}
.dark-mode & {
.splide__arrow {
background:var(--white);
border: 1px solid var(--gray1);
svg path {
fill: var(--black);
}
&:hover:not(:disabled) {
border: 1px solid var(--gray2);
background-color: var(--light-gray);
svg path {
fill: var(--black);
}
}
}
}
}
/* body */
body {
font-size: 16px;
line-height: 1.61803398875;
/* Golden ratio */
font-family: var(--font1);
color: var(--black);
font-weight: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* Set default text size */
section:not(.dark-mode) {
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
span {
color: var(--action1);
}
}
}
section.dark-mode {
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6 {
span {
color: var(--white);
}
}
}
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
font-weight: bold;
}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
/* 0 top margin on 1st header */
p:first-child,
h1:first-child,
h2:first-child,
h3:first-child,
h4:first-child,
h5:first-child,
h6:first-child {
margin-top: 0;
}
/* heading styles */
h1,
.h1 {
font-family: var(--font1);
font-size: 44px;
letter-spacing: .91px;
margin-bottom: 0;
line-height: 1.1;
margin-top: 0;
@media (max-width: 580px) {
font-size: 34px;
margin-bottom: 15px;
}
}
h2,
.h2 {
font-family: var(--font1);
font-size: 37px;
letter-spacing: .25px;
margin-bottom: 22px;
margin-top: 0;
line-height: 1.1;
@media (max-width: 580px) {
font-size: 30px;
}
}
h3,
.h3 {
font-family: var(--font1);
font-size: 28px;
letter-spacing: .25px;
margin-bottom: 15px;
line-height: 1.2;
margin-top: 0;
@media (max-width: 580px) {
font-size: 24px;
margin-bottom: 20px;
}
}
h4,
.h4 {
font-family: var(--font1);
font-size: 24px;
letter-spacing: .25px;
margin-bottom: 15px;
line-height: 1.2;
margin-top: 0;
@media (max-width: 580px) {
font-size: 20px;
margin-bottom: 20px;
}
}
h5,
.h5 {
font-family: var(--font1);
font-size: 20px;
letter-spacing: .25px;
margin-bottom: 15px;
line-height: 1.2;
margin-top: 0;
}
h6,
.h6 {
font-family: var(--font1);
font-size: 18px;
letter-spacing: .25px;
margin-bottom: 15px;
line-height: 1.2;
margin-top: 0;
}
/* body styles */
.b1 {
font-family: var(--font1);
font-size: 22px;
line-height: 1.4;
letter-spacing: .25px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 17px;
}
}
.b2 {
font-family: var(--font1);
font-size: 18px;
line-height: 1.6;
letter-spacing: .25px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 16px;
}
}
.b3 {
font-family: var(--font1);
font-size: 16px;
line-height: 1.6;
letter-spacing: .25px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 15px;
}
}
.b4 {
font-family: var(--font1);
font-size: 14px;
line-height: 1.6;
letter-spacing: .35px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 14px;
}
}
.b5 {
font-family: var(--font1);
font-size: 13px;
line-height: 1.6;
letter-spacing: .35px;
margin-bottom: 20px;
@media (max-width: 580px) {
font-size: 13px;
}
}
.b6 {
font-family: var(--font1);
font-size: 12px;
line-height: 1.6;
letter-spacing: .35px;
margin-bottom: 10px;
@media (max-width: 580px) {
font-size: 12px;
}
}
.blockquote,blockquote {
font-family: var(--font1);
font-size: 20px;
font-weight: 500;
font-style: italic;
margin: 50px auto;
display: block;
padding: 50px;
max-width: 100%;
border-radius: var(--border3);
border: 1px solid var(--gray1);
background: var(--white);
@media (max-width: 1024px) {
padding: 30px;
}
@media (max-width: 580px) {
padding: 20px;
font-size: 18px;
}
p:last-of-type {
margin-bottom: 0;
}
p:first-of-type {
margin-top: 0;
}
}
.eyebrow {
font-family: var(--font1);
font-size: 14px;
line-height: 1.2;
font-weight: 600;
letter-spacing: 1px;
text-transform: uppercase;
display: block;
margin-bottom: 12px;
@media (max-width: 580px) {
font-size: 12px;
}
}
/****************/
/* BUTTON .btn */
/**************/
a.btn,
span.btn a,
input.hs-button,span.btn button:not(.close-btn),button.btn,.systems-page form button {
display: inline-block;
font-family: var(--font1);
color: var(--white);
background-color: var(--btn-dark);
border: 2px solid transparent;
border-radius: 100px;
padding: 14px 25px;
margin: 0;
transition: var(--animation1);
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
letter-spacing: 1.5px;
cursor: pointer;
text-align: center;
box-shadow: 5px 8px 15px 0 var(--black-10);
}
a.btn:hover,
a.btn:focus,
span.btn a:hover,
span.btn a:focus,
input.hs-button:hover,
input.hs-button:focus,
span.btn button:not(.close-btn):hover,
span.btn button:not(.close-btn):focus,
button.btn:hover,
button.btn:focus,.systems-page form button:hover,.systems-page form button:focus {
background-color: var(--white);
color: var(--btn-dark);
border-color: var(--btn-dark);
box-shadow: none;
text-decoration: none;
}
/***************************/
/* BUTTON WHITE .btn-white */
/***************************/
span.btn-white a,
a.btn-white,
span.btn-white button:not(.close-btn),
button.btn-white {
display: inline-block;
font-family: var(--font1);
color: var(--btn-dark);
background-color: var(--white);
border: 2px solid var(--white);
border-radius: 100px;
padding: 14px 25px;
margin: 0;
transition: var(--animation1);
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
letter-spacing: 1.5px;
cursor: pointer;
text-align: center;
box-shadow: 5px 8px 15px 0 var(--black-10);
}
a.btn-white:hover,
a.btn-white:focus,
span.btn-white a:hover,
span.btn-white a:focus,
span.btn-white button:not(.close-btn):hover,
span.btn-white button:not(.close-btn):focus,
button.btn-white:hover,
button.btn-white:focus {
background-color: transparent;
border-color: var(--white);
color: var(--white);
box-shadow: none;
text-decoration: none;
}
/*------------------------------------------------------------------------------------------------*/
/**********************************/
/* BUTTON GRADIENT .btn-gradient */
/********************************/
a.btn-gradient,
span.btn-gradient a,
span.btn-gradient button:not(.close-btn),
button.btn-gradient,
a.btn-gradient-white,
span.btn-gradient-white a,
span.btn-gradient-white button:not(.close-btn),
button.btn-gradient-white {
display: inline-block;
font-family: var(--font1);
color: var(--white);
background-image: linear-gradient(90deg, #F4538A 0%, #8A25F9 100%);
background-size: 100% 100%;
border: 2px solid transparent;
border-radius: 100px;
padding: 14px 25px;
margin: 0;
transition: var(--animation1);
text-transform: uppercase;
text-decoration: none;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
letter-spacing: 1.5px;
cursor: pointer;
text-align: center;
box-shadow: 5px 8px 15px 0 var(--black-10);
}
a.btn-gradient:hover,
a.btn-gradient:focus,
span.btn-gradient a:hover,
span.btn-gradient a:focus,
span.btn-gradient button:not(.close-btn):hover,
span.btn-gradient button:not(.close-btn):focus,
button.btn-gradient:hover,
button.btn-gradient:focus,
a.btn-gradient-white:hover,
a.btn-gradient-white:focus,
span.btn-gradient-white a:hover,
span.btn-gradient-white a:focus,
span.btn-gradient-white button:not(.close-btn):hover,
span.btn-gradient-white button:not(.close-btn):focus,
button.btn-gradient-white:hover,
button.btn-gradient-white:focus {
background-image: linear-gradient(90deg, #8A25F9 0%, #F4538A 100%);
color: var(--white);
box-shadow: none;
text-decoration: none;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/********************************/
/* BUTTON STROKED .btn-stroked */
/******************************/
a.btn-stroked,
span.btn-stroked a,
span.btn-stroked button:not(.close-btn),
button.btn-stroked {
display: inline-block;
font-family: var(--font1);
color: var(--btn-dark);
background-color: transparent;
border: 2px solid var(--btn-dark);
padding: 14px 25px;
margin: 0;
transition: var(--animation1);
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
letter-spacing: 1.5px;
text-decoration: none;
cursor: pointer;
text-align: center;
border-radius: 100px;
}
a.btn-stroked:hover,
a.btn-stroked:focus,
span.btn-stroked a:hover,
span.btn-stroked a:focus,
span.btn-stroked button:not(.close-btn):hover,
span.btn-stroked button:not(.close-btn):focus,
button.btn-stroked:hover,
button.btn-stroked:focus {
background-color: var(--btn-dark);
color: var(--white);
text-decoration: none;
}
/********************************************/
/* BUTTON STROKED WHITE .btn-stroked-white */
/******************************************/
a.btn-stroked-white,
span.btn-stroked-white a,
span.btn-stroked-white button:not(.close-btn),
button.btn-stroked-white {
display: inline-block;
font-family: var(--font1);
color: var(--white);
background-color: transparent;
border: 2px solid var(--white);
padding: 14px 25px;
margin: 0;
transition: var(--animation1);
text-transform: uppercase;
font-weight: 700;
font-size: 13px;
line-height: 1.1;
letter-spacing: 1.5px;
text-decoration: none;
cursor: pointer;
text-align: center;
border-radius: 100px;
}
a.btn-stroked-white:hover,
a.btn-stroked-white:focus,
span.btn-stroked-white a:hover,
span.btn-stroked-white a:focus,
span.btn-stroked-white button:not(.close-btn):hover,
span.btn-stroked-white button:not(.close-btn):focus,
button.btn-stroked-white:hover,
button.btn-stroked-white:focus {
background-color: var(--white);
border-color: var(--white);
color: var(--btn-dark);
text-decoration: none;
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/**************************/
/* BUTTON TEXT .btn-text */
/*************************/
a.btn-text,
span.btn-text a,
.read-more,
span.btn-text button:not(.close-btn),
button.btn-text {
font-weight: bold;
/* margin: 20px 0; */
margin:0;
cursor: pointer;
text-decoration: none;
color: var(--black);
border: none;
background-color: transparent;
padding:0;
&:after {
content: "→";
display: inline-block;
font-family: var(--font1);
margin-left: 2px;
top: 1px;
font-size: 120%;
line-height: 0;
position: relative;
font-weight: bold;
transition: var(--animation1);
color: var(--action1);
}
}
a.btn-text:hover,
a.btn-text:focus,
span.btn-text a:hover,
span.btn-text a:focus,
.read-more:hover,
.read-more:focus,
span.btn-text button:not(.close-btn):hover,
span.btn-text button:not(.close-btn):focus,
button.btn-text:hover,
button.btn-text:focus {
color: var(--action1);
&:after {
transform: translateX(2px);
}
}
/**************************************/
/* BUTTON TEXT WHITE .btn-text-white */
/************************************/
a.btn-text-white,
span.btn-text-white a,
span.btn-text-white button:not(.close-btn),
button.btn-text-white {
font-weight: bold;
/* margin: 20px 0; */
margin:0;
cursor: pointer;
text-decoration: none;
color: var(--white);
border: none;
background-color: transparent;
padding:0;
&:after {
content: "→";
display: inline-block;
margin-left: 2px;
top: 1px;
font-size: 120%;
line-height: 0;
position: relative;
transition: var(--animation1);
font-weight: bold;
font-family: var(--font1);
color: var(--white);
}
}
a.btn-text-white:hover,
a.btn-text-white:focus,
span.btn-text-white a:hover,
span.btn-text-white a:focus,
span.btn-text-white button:not(.close-btn):hover,
span.btn-text-white button:not(.close-btn):focus,
button.btn-text-white:hover,
button.btn-text-white:focus {
color: var(--white);
opacity: .8;
&:after {
transform: translateX(2px);
}
}
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/*---------------------------------------------------------------------------------------------------*/
/* BUTTON SMALL .btn__sm */
a.btn.btn__sm,
.btn.btn__sm a,
span.btn-small button:not(.close-btn),
button.btn-small {
padding: 8px 20px 7px 20px;
font-size: 12px;
line-height: 1.2;
}
/***************************************/
.card {
border-radius: var(--border3);
position: relative;
display: flex;
flex-direction: column;
flex-basis: calc(100% / var(--cols) - var(--gap) / var(--cols) * (var(--cols) - 1));
background-color: var(--white);
transition: all var(--animation2);
&.full-click {
&:hover,&:focus {
border: 1px solid var(--action1);
}
.button-group a, .button-group button {
&:before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
}
}
&:has(.media.icon) {
.content {
padding-top: 20px;
}
}
.media {
&.image {
position: relative;
aspect-ratio: 16/9;
border-top-right-radius: inherit;
border-top-left-radius: inherit;
overflow: hidden;
/* min-height: 200px; */
img {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
}
&.icon {
padding: 30px 30px 0 30px;
&>span {
display: flex;
}
svg {
height: 36px;
path {
fill: var(--action1);
}
}
}
}
.content {
padding: 30px;
display: flex;
flex-direction: column;
align-items: flex-start;
flex-grow: 1;
.content-upper {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
flex-grow: 1;
span.eyebrow {
display: inline-block;
color: var(--gray3);
line-height: 1.1;
font-weight: 500;
margin-bottom: 12px;
font-size: 13px;
letter-spacing: 0.5px;
background: var(--light-gray);
padding: 6px 8px;
border-radius: var(--border1);
text-transform:none;
}
span.title {
display: block;
color: var(--black);
font-weight: bold;
margin:0;
line-height: 1.4;
}
span.description {
margin-top: 10px;
color: var(--black);
display: block;
margin-bottom: 0;
p:last-of-type {
margin-bottom: 0;
}
}
}
.button-group {
margin-top: 30px;
}
}
}
/***************************************/
.featured-card {
/* featured cards use .card class */
@media(min-width: 768px) {
flex-direction:row;
align-items: center;
justify-content: space-between;
padding: 30px;
gap: 30px;
.media {
width: 40%;
border-radius: var(--border3);
}
.content {
width: 60%;
padding:0;
.content-upper {
span.eyebrow {
font-size: 15px;
padding: 8px 10px;
}
.title {
font-size: 28px;
}
}
}
}
}
/*****Resource Card**********************************/
.resource-card {
/* resource cards use .card class */
}
/*****Blog Post Card********************/
/* Shared by u5m-blog-post-cards + u5m-blog-listing (partial: u5-blog-cards.html) */
.blog-post-card {
/* --cols / --gap are inherited from the container (wrapper/posts grid) */
position: relative;
display: flex;
flex-direction: column;
flex: 0 0 calc(100% / var(--cols, 3) - var(--gap, 40px) / var(--cols, 3) * (var(--cols, 3) - 1));
overflow: hidden;
border-radius: var(--border3);
background: linear-gradient(157deg, #fff 49.27%, #0039ff 357.63%);
box-shadow: 0 5px 17px 0 rgba(143, 134, 196, .06);
text-decoration: none;
transition: box-shadow var(--animation2), transform var(--animation2);
&:hover,
&:focus {
transform: translateY(-5px);
box-shadow: none;
text-decoration: none;
.image {
transform: scale(1.1);
}
.title {
color: var(--action1);
&:before {
width: 80px;
}
}
.info {
opacity: .9;
}
.read-more {
background-color: var(--black-80);
&:after {
margin-left: 11px;
}
}
}
.image-wrap {
width: 100%;
height: 175px;
overflow: hidden;
&.bg-color {
background-image: linear-gradient(12deg, #e653ea 25%, #00e1d0);
background-position: center;
background-size: cover;
}
.image {
width: 100%;
height: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
transition: transform .5s ease;
}
}
.content {
display: flex;
flex-direction: column;
flex: 1;
padding: 20px;
.content-upper {
flex-grow: 1;
margin-bottom: 20px;
.info {
display: flex;
flex-wrap: wrap;
align-items: center;
margin-bottom: 6px;
opacity: 1;
transition: opacity .5s ease;
.topic-link {
display: inline-block;
margin: 0 10px 0 0;
padding: 3px 7px 2px;
border-radius: var(--border2);
background-color: var(--btn-dark);
color: var(--white);
font-size: 11px;
letter-spacing: 1px;
text-transform: uppercase;
}
.divider {
display: none;
}
.read-time {
display: flex;
align-items: center;
flex: 1 1 100%;
margin-top: 8px;
color: var(--black);
font-size: 12px;
.clock-icon {
width: 13px;
height: 13px;
margin-right: 5px;
color: var(--btn-dark);
}
}
}
.title {
position: relative;
display: inline-block;
margin: 0 auto 10px 0;
color: var(--black);
font-size: 20px;
font-weight: 700;
line-height: 1.2;
transition: color .5s ease;
&:before {
content: '';
position: absolute;
bottom: -6px;
width: 0;
height: 3px;
background: var(--action1);
transition: width .5s ease;
}
}
.teaser {
display: block;
margin: 0;
color: var(--black-50);
font-size: 14px;
line-height: 1.4;
}
}
.content-lower {
margin-top: auto;
.read-more {
display: inline-flex;
align-items: center;
margin: 0;
padding: 3px 14px;
border-radius: 20px;
background-color: var(--black-50);
color: var(--white);
font-size: 13px;
font-weight: 700;
text-transform: uppercase;
transition: background-color var(--animation2);
&:after {
content: "";
position: static;
top: auto;
width: 6px;
height: 10px;
margin: 0 0 0 6px;
background-color: var(--white);
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1.4 0 0 1.4 4.6 6 0 10.6 1.4 12l6-6z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='12' viewBox='0 0 8 12'%3E%3Cpath d='M1.4 0 0 1.4 4.6 6 0 10.6 1.4 12l6-6z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
transition: margin var(--animation2);
}
}
}
}
}
.form,.popover-content-container:has(form) {
background-color: var(--light-gray);
padding: 30px;
max-width: 765px;
margin: 0 auto;
float: none;
overflow: auto;
border-radius: var(--border3);
border: 1px solid var(--gray1);
.submitted-message {
text-align: center;
}
.form-title:empty {
display: none;
}
form {
margin-bottom: 0;
.hs-form-field {
>label {
font-size: 12px;
font-weight: bold;
line-height: 1.2;
letter-spacing: 1px;
pointer-events: auto;
}
}
/* error messages */
.hs_error_rollup {
margin-top: 20px;
.hs-error-msgs {
margin-top: 0;
}
}
ul.hs-error-msgs {
margin: -10px 0 20px 0;
padding: 0;
list-style: none;
li {
display: block;
text-align: center;
margin: 0;
width: 100%;
font-size: 14px;
line-height: 1.2;
font-weight: bold;
padding: 10px;
border-radius: var(--border1);
color: var(--white);
background-color: red;
}
}
/****** FORM INPUTS ******/
.form-columns-1,
.form-columns-2 {
.input {
margin-right: 0 !important;
}
}
.form-columns-2 {
display: flex;
gap: 20px;
}
fieldset {
max-width: unset;
}
input,
select,
textarea {
&.error,
&.invalid {
border: 1px solid red;
}
}
/* Text Based Inputs */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"] {
border-radius: var(--border1);
margin-top: 2px;
margin-bottom: 20px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
width: 100% !important;
appearance: none;
&:not(.error):not(.invalid) {
border: 1px solid transparent;
}
}
/* Select Inputs */
select {
position: relative;
border: 0;
border-radius: var(--border1);
margin-top: 2px;
margin-bottom: 20px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
cursor: pointer;
width: 100% !important;
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 24px;
color: var(--black);
&::placeholder {
color: var(--gray2);
}
}
/* Radios and Checkboxes */
ul.inputs-list {
&.multi-container {
list-style: none;
padding: 0;
margin-top: 8px;
margin-bottom: 20px;
label {
>span {
font-size: 14px;
font-weight: normal;
line-height: 1.2;
pointer-events: auto;
}
}
/* Shared Input Styles */
input {
margin-right: 5px;
cursor: pointer;
}
/* Radio Input */
input[type="radio"] {}
/* Checkbox Input */
input[type="checkbox"] {}
}
}
/* Textarea Input */
textarea {
border: 1px solid transparent;
border-radius: var(--border1);
margin-top: 2px;
margin-bottom: 20px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
width: 100% !important;
min-height: 150px;
resize: vertical;
}
.legal-consent-container {
font-size: 13px;
font-weight: normal;
line-height: 1.6;
pointer-events: auto;
display: flex;
flex-direction: column;
gap: 10px;
* {
margin: 0 !important;
}
ul {
list-style: none;
padding: 0;
margin: 0;
li {
label {
display: flex;
gap: 5px;
cursor: pointer;
span {
margin: 0;
}
}
}
}
}
/* Button */
.hs-button {
margin-top: 30px;
margin-bottom: 0;
display: block;
width: 100%;
font-size: 18px;
}
}
.dark-mode & {
background-color: rgba(255, 255, 255, .75);
}
}
/* for the "new" hubspot form tool */
.form,.popover-content-container:has(form) {
.hsfc-Renderer {
p {
font-family: var(--font1)!important;
color: var(--black)!important;
margin: 0 0 10px 0;
}
.hsfc-FormWrapper {
form {
.hsfc-Step {
.hsfc-Step__Content {
padding:0!important;
/*---- FORM ROWS ----*/
.hsfc-Row {
margin-bottom:20px;
label {
font-size: 12px;
font-weight: bold;
line-height: 1.2;
letter-spacing: 1px;
pointer-events: auto;
}
input {
margin-bottom:0;
}
/* FIELD TYPE SPECIFIC STYLES */
/* rich text */
.hsfc-RichText {
margin-bottom: 30px;
p:last-of-type {
margin-bottom:0;
}
}
/* text input */
.hsfc-TextField {}
/* phone input */
.hsfc-PhoneField {
.hsfc-PhoneInput {
margin-bottom: 20px;
.hsfc-PhoneInput__FlagAndCaret {
border-color: transparent!important;
}
input.hsfc-TextInput {
margin-bottom:0;
margin-top:0;
}
}
}
/* textarea field */
.hsfc-TextareaField {
textarea {
background-color: var(--white);
border:none;
}
}
/* single checkbox field */
.hsfc-CheckboxField {
margin-bottom: 10px;
}
/* multiple checkbox field */
.hsfc-CheckboxFieldGroup {
margin-bottom:10px;
}
/* radio button field */
.hsfc-RadioFieldGroup {
margin-bottom: 10px;
}
/* file upload field */
/* select/dropdown field */
}
/*---- SUBMIT BUTTON(S) ----*/
.hsfc-NavigationRow {
/*button style from buttons.css*/
button[type="submit"] {
display: block;
width:100%;
display: inline-block;
font-family: var(--font1);
color: var(--white);
background-color: var(--action1);
border: 2px solid var(--action1);
border-radius: var(--border1);
padding: 15px 40px 15px 40px;
/* margin: 20px 0; */
margin:0;
transition: var(--animation1);
text-transform: uppercase;
text-decoration: none;
font-weight: bold;
font-size: 14px;
line-height: 1.2;
letter-spacing: .25px;
text-decoration: none;
cursor: pointer;
text-align: center;
&:hover,&:focus {
transform: none;
background-color: var(--black);
color: var(--white);
border-color: var(--black);
}
}
}
}
}
}
}
}
}
.hs-search-field {
--search-button-bg: var(--action1);
--search-button-color: var(--white);
--search-border: var(--action1);
--search-height: 48px;
--search-radius: 6px;
.hs-search-field__bar {
form {
display: flex;
align-items: stretch;
gap: 0;
flex-wrap: nowrap;
margin-bottom: 0;
}
.hs-search-field__input {
height: var(--search-height);
min-height: var(--search-height);
padding: 0 1rem;
border: 1px solid var(--search-border);
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border-top-left-radius: var(--search-radius);
border-bottom-left-radius: var(--search-radius);
font-size: 16px;
line-height: 1;
box-sizing: border-box;
flex: 0 0 180px;
appearance: none;
&:focus {
outline: none;
border-color: var(--search-button-bg);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-button-bg) 20%, transparent);
}
}
.search-button {
height: var(--search-height);
min-height: var(--search-height);
padding: 0 1rem;
border: none;
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: var(--search-radius);
border-bottom-right-radius: var(--search-radius);
background: var(--search-button-bg);
color: var(--search-button-color);
display: inline-flex;
align-items: center;
justify-content: center;
cursor: pointer;
box-sizing: border-box;
transition: background 0.2s ease, transform 0.2s ease;
&:hover {
filter: brightness(0.95);
}
&:focus {
outline: none;
box-shadow: 0 0 0 3px color-mix(in srgb, var(--search-button-bg) 20%, transparent);
}
svg {
width: 20px;
height: 20px;
fill: currentColor;
}
}
}
ul.hs-search-field__suggestions {
margin-top: 0;
margin-bottom: 0;
}
}
form {
.hs-form__virality-link {
display: none!important;
}
}
/* Keep background from scrolling when menu is open */
html.menu-open {
overflow-y: hidden;
}
body.hide-header {
margin-top: 0;
}
body.lp-sign-up {
margin-top: 0;
}
/* HubSpot Cookie Notification */
div#hs-eu-cookie-confirmation.hs-cookie-notification-position-bottom.can-use-gradients {
box-shadow: 2px -1px 5px 0px rgba(0, 0, 0, 0.05);
border: 0;
background-color: rgba(var(--white), .9);
div#hs-eu-cookie-confirmation-inner {
background-color: rgba(var(--white), 0);
padding: 15px 20px 10px 20px;
max-width: 1240px;
p {
margin-bottom: 0;
}
div#hs-en-cookie-confirmation-buttons-area {
text-align: left;
margin: 0;
a#hs-eu-confirmation-button {
font-weight: bold;
margin: 10px 0;
&:hover {
background-color: var(--black);
}
}
}
}
}
/* default p size */
p {
line-height: 1.5;
}
a {
color: var(--action1);
}
blockquote,
blockquote p {}
em {
font-style: italic;
}
strong {
font-weight: bold;
}
ul {
list-style: disc;
padding-left: 40px;
margin-top: 0;
margin-bottom: 30px;
}
ol {
list-style: decimal;
padding-left: 40px;
margin-top: 0;
margin-bottom: 30px;
}
li {
margin-bottom: 5px;
letter-spacing: .5px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin: 20px 0 20px 20px;
}
input {
font-family: var(--font1);
}
button {
font-family: var(--font1);
cursor: pointer;
}
/* Forms */
form {
margin-bottom: 30px
}
::-webkit-input-placeholder {
color: var(--gray3);
opacity: 1;
font-weight: normal;
}
/* Webkit input placeholders */
::-moz-placeholder {
color: var(--gray3);
opacity: 1;
font-weight: normal;
}
/* Firefox input placeholders */
:-ms-input-placeholder {
color: var(--gray3);
opacity: 1;
font-weight: normal;
}
/* IE input placeholders */
/* Images */
img {
max-width: 100%;
height: auto;
border: 0;
-ms-interpolation-mode: bicubic;
vertical-align: bottom;
}
/* Make responsive, clear border, fix IE scaling, suppress the space beneath the baseline, fix Webkit blurring on scaled down files */
svg {
max-width: 100%;
width: auto;
height: auto;
}
/* Horizontal Rule */
hr {
margin-top: 30px;
margin-bottom: 35px;
border-width: 0;
border-top: 1px solid var(--gray1);
}
/* Abbreviations */
abbr[title] {
border: 0;
}
/* Code */
code {
padding: 1px;
margin: 0 10px;
white-space: nowrap;
background: var(--gray1);
border: 1px solid var(--gray1);
border-radius: 0;
}
pre>code {
display: block;
padding: 1px 15px;
white-space: pre;
margin-bottom: 30px
}
pre {
overflow-x: auto;
}
/* responsive pre elements */
table pre {
white-space: pre-wrap;
}
/* responsive pre tables */
/* Tables */
th,
td {
padding: 10px 20px;
text-align: left;
border-bottom: 1px solid var(--gray1);
}
th:first-child,
td:first-child {
padding-left: 0;
}
th:last-child,
td:last-child {
padding-right: 0;
}
table {
margin-bottom: 30px
}
table th {
text-transform: uppercase;
}
table td {
border-bottom: 1px solid var(--gray2);
font-size: 14px;
}
a[href='javascript:;'] {
cursor: default;
}
section[class*='u5m-'] {
scroll-margin-top: 145px;
}
.hs_cos_wrapper_type_form {
h3 {
text-align: center;
}
form {}
}
section.u3gm-header-2023 div.inner div.cta .cta-inner a, section.u3gm-header-2023 .announcement-banner .content a,
section.u3gm-header-2023 .utility-nav .utility-inner .right ul li a, section.u4m-footer div.menu .hs-menu-wrapper.hs-menu-flow-horizontal ul.hs-menu-children-wrapper li a,
section.u4m-footer div.utility .legal a {
text-decoration: none;
}
section.u4m-footer div.utility .legal a:hover, section.u4m-footer div.utility .legal a:focus {
text-decoration: underline;
}
section.u5m-404-error,
section.u5m-500-error,section.u5m-backup-unsubscribe {
margin: 0 auto;
text-align: center;
min-height: 60vh;
display:flex;
align-items: center;
justify-content: center;
flex-direction: column;
@media (max-width: 768px) {
min-height: 35vh;
}
}
section.u5m-backup-unsubscribe {
text-align: center;
#hs_cos_wrapper_backup_unsubscribe_email_simple_subscription {
h3 {
max-width: 900px;
margin-left: auto;
margin-right: auto;
font-size: 20px;
line-height: 1.4;
}
}
form {
h3 {
font-size: 12px;
font-weight: bold;
text-align: left;
margin-bottom: 4px;
}
input {
border: 1px solid transparent;
border-radius: 4px;
margin-top: 2px;
margin-bottom: 0;
font-size: 16px;
padding: 16px;
width: 100%;
}
padding-bottom: 50px;
}
}
section.u5m-membership-login,
section.u5m-membership-register,
section.u5m-membership-reset-password-request,
section.u5m-membership-reset-password,
section.u5m-password-prompt {
span.form-separator {
display:block;
margin-top: 20px;
}
margin: 180px auto 80px;
text-align: center;
ul.hs-error-msgs {
margin: 10px 0 20px 0;
}
.form {
&.membership-reset-password-request {
div.hs-form-field:has(ul.no-list) {
display:none;
}
div.hs-form-field {
input.hs-input {
margin-bottom: 0;
}
}
}
&.membership-login, &.membership-register {
div.hs-form-field:has(ul.no-list) {
display:none;
}
}
h1 {
font-size: 40px;
margin-bottom: 10px;
}
form {
label:not(.hs-error-msg) {
float:left;
}
.no-list li label, label#hs-register-widget-checkbox-consent {
float:none;
}
label#hs-register-widget-checkbox-consent {
position: relative;
top: -2px;
}
label.hs-login-widget-email-label {
margin-bottom: 10px;
}
a.hs-reset-widget-show-password, a.hs-register-widget-show-password, a.hs-login-widget-show-password {
float:right;
margin-left:10px;
position: relative;
font-size: 14px;
top: -5px;
&:hover,&:focus {
color: var(--black);
}
}
a#hs_login_reset {
margin-top: 20px;
display:block;
&:hover,&:focus {
color: var(--black);
}
}
.hs-form-field:has(#hs-login-widget-remember),.hs-form-field:has(#hs-passwordless-auth-checkbox-consent){
display: flex;
gap: 10px;
margin-top: 30px;
}
input[type="password"] {
height:auto!important;
margin-bottom: 0;
}
}
}
div>p {
margin-top: 20px;
a {
&:hover,&:focus {
color: var(--black);
}
}
}
}
section.u5m-password-prompt {
form {
padding-top: 30px;
}
}
section.u5m-search-results {
margin: 180px auto 100px;
.section-inner.center {
.systems-page {
h1 {}
.filters-wrapper {
margin-bottom: 80px;
@media (max-width: 768px) {
margin-bottom: 50px;
}
select {
position: relative;
border: 1px solid var(--gray1);
border-radius: var(--border1);
transition: border-color var(--animation2);
margin-top: 0px;
margin-bottom: 0px;
font-size: 16px;
background-color: var(--white);
padding: 16px;
cursor: pointer;
width: 100% !important;
appearance: none;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 24px;
color: var(--black);
&::placeholder {
color: var(--gray2);
}
&:hover,&:focus {
border-color: var(--action1);
}
}
}
.hs-search-results {
p.hs-search-results__message {}
}
}
}
/* search results 'card' style found in u5m-search-results.module.css */
ul.hs-search-results__listing {
}
.hs-search__no-results {
p {
font-size: 18px;
}
}
}
section.u5m-subscription-preferences {
margin: 180px auto 80px;
.page-header br {
display: none;
}
.systems-page {
.form-group {
.form {
max-width: 1000px;
form {
h1 {
font-size: 40px;
}
h2 {
font-size: 24px;
}
.email-prefs {
margin-top: 30px;
div.item {
border-bottom: 1px solid var(--gray1);
margin-bottom: 25px;
.item-inner {
padding-bottom: 25px;
div.checkbox-row span span {
font-weight: bold;
padding-left: 5px;
}
p {
margin:0;
padding-left: 22px;
}
}
}
}
div.subscribe-options p span {
font-weight: bold;
padding-left: 5px;
}
}
}
}
}
}
section.u5m-subscriptions-confirmation {
margin: 180px auto 80px;
form {
margin-top: 20px;
fieldset {
padding:0;
&#hs-subscriptions-unsubscribe-survey-fieldset {
legend {
margin-bottom: 10px;
}
#hs-subscriptions-unsubscribe-survey-options {
div {
margin-bottom: 5px;
label {
input {margin-right: 5px;}
}
}
}
}
textarea {
margin: 20px 0 0 0;
}
}
button {}
}
div.success {
font-weight: bold;
}
}
.visually-hidden,
.sr-only {
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.001s;
transition-duration: 0.001s;
animation-iteration-count: 1;
}
}
.skip-to-content-link {
background: var(--action1);
min-height: 40px;
left: 50%;
padding: 10px;
position: absolute;
transform: translate(-50%, -100%);
transition: transform 0.3s;
z-index: 20;
display:flex;
justify-content: center;
align-items: center;
text-align: center;
color: var(--white);
font-weight: bold;
font-size: 16px;
line-height: 1.2;
letter-spacing: .25px;
cursor: pointer;
}
.skip-to-content-link:focus {
transform: translate(-50%, 0%);
}
section.u5m-blog-post {
position: relative;
&.has-sidebar {
--content-width: 1240px;
--body-max-width: 800px;
}
&:not(.has-sidebar) {
--content-width:920px;
}
/*****************************************/
/* .hero */
/*****************************************/
.hero {
background-color: var(--light-gray);
margin-bottom:0;
position: relative;
padding: 80px 0px;
@media(max-width: 580px) {
padding: 50px 0px;
}
.section-inner.center {
max-width: var(--content-width);
.content {
padding: 0;
margin: 0 auto;
span.date {
display:block;
margin-bottom: 15px;
font-weight: 500;
font-size: 14px;
}
h1.title {
margin: 0;
}
.author-wrap {
display: flex;
align-items: center;
margin: 20px auto 0 auto;
justify-content:flex-start;
gap: 10px;
.avatar {
overflow: hidden;
height: 36px;
width: 36px;
border-radius: 50%;
img {
object-fit: cover;
object-position: 50% 50%;
width: 100%;
height: 100%;
}
}
.author-link {
font-size: 14px;
a {
font-weight: 500;
color: var(--black);
transition: var(--animation1);
}
a:hover {
color: var(--action1);
}
}
}
}
}
}
/*****************************************/
/* .share */
/*****************************************/
.share {
margin-bottom: 50px;
padding: 8px 0;
background-color: var(--white);
border-top: 1px solid var(--gray1);
border-bottom: 1px solid var(--gray1);
position: sticky;
top: 100px;
z-index:2;
.section-inner.center {
max-width: var(--content-width);
display:flex;
align-items: center;
justify-content: space-between;
gap: 10px;
span.label {
font-weight: 600;
font-size: 14px;
margin-right:10px;
}
.share-links {
display:flex;
gap: 5px;
align-items: center;
flex-direction:row;
a {
display:flex;
svg {
path {
fill: var(--black);
transition: var(--animation1);
}
}
&:hover,&:focus {
svg {
path {
fill: var(--action1);
}
}
}
}
}
}
}
/*****************************************/
/* .body */
/*****************************************/
.body {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px;
.content {
img {
border-radius: var(--border2);
}
p,
ul,
ol {}
h1 {}
h2 {}
h3 {}
h4 {}
h5 {}
h6 {}
h1,h2,h3,h4,h5,h6 {
margin-top: 30px;
}
blockquote {
p {}
}
a {
font-weight: bold;
&:hover {
color: var(--black);
}
}
}
&.has-sidebar {
display: flex;
flex-direction: row;
gap: 80px;
@media(max-width: 991px) {
flex-direction: column;
}
.content {
max-width: var(--body-max-width);
width: 100%;
@media(max-width: 991px) {
order:2;
max-width: 100%;
}
h2 {
scroll-margin-top:160px;
}
}
.blog-sidebar {
max-width: 320px;
width: 100%;
position:relative;
@media(max-width: 991px) {
order:1;
max-width: 100%;
}
.blog-sidebar-inner {
position:sticky;
top: 170px;
padding: 20px;
background-color: var(--white);
border-radius: var(--border2);
border: 1px solid var(--gray1);
.title {
font-weight: 600;
margin-bottom:12px;
}
.toc-list {
padding-left:20px;
margin:0;
li.toc-item {
margin-bottom:12px;
line-height:1.4;
&::marker {
color: var(--action1);
font-weight: 600;
}
&:last-of-type {
margin-bottom:0;
}
a.toc-link {
color: var(--black);
transition: var(--animation1);
text-decoration: none;
&.active {
color: var(--action1);
}
&:hover,&:focus {
color: var(--action1);
text-decoration:underline;
}
}
}
}
}
}
}
}
/*****************************************/
/* .topics */
/*****************************************/
.topics {
max-width: var(--content-width);
margin: 0 auto;
padding: 0 20px;
margin-top: 50px;
padding-top: 50px;
border-top: 1px solid var(--gray1);
display:flex;
flex-direction:row;
align-items: center;
gap: 12px;
.label {
font-size: 13px;
font-weight: 500;
display:inline-block;
}
.topics-list {
display:flex;
flex-direction:row;
column-gap: 8px;
row-gap: 10px;
.link {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
white-space: nowrap;
font-size: 13px;
font-weight: 500;
text-decoration: none;
color: var(--black);
padding: 5px 8px;
border-radius: var(--border2);
background-color: var(--white);
transition: var(--animation1);
border: 1px solid var(--gray1);
&:hover {
background-color: var(--black);
border-color: var(--black);
color: var(--white);
}
}
}
}
/*****************************************/
/* .author -- removed */
/*****************************************/
.author {
display:none;
max-width: var(--content-width);
display: flex;
align-items: center;
margin: 50px auto;
padding: 0 20px;
.meta {
flex: 0 0 170px;
text-align: center;
.avatar {
width: 100px;
height: 100px;
background-image: url('https://302335.fs1.hubspotusercontent-na1.net/hubfs/302335/default-avatar.png');
background-size: cover;
background-position: 50%;
border-radius: 50%;
margin: 0 auto;
@media (max-width: 575.98px) {
margin-bottom: 30px;
}
}
}
.bio {
.name {
margin: 0;
}
p {
margin-top: 20px;
}
.social {
.label {
@media (max-width: 575.98px) {}
}
a {
font-size: 20px;
margin-left: 10px;
@media (max-width: 575.98px) {
font-size: 18px;
margin-left: 8px;
}
}
}
}
}
/*****************************************/
/* .comments -- removed */
/*****************************************/
.comments {
display:none;
margin-bottom: 100px;
h2.heading {
text-align: center;
margin: 100px auto 0 auto;
}
.content {
max-width: 1000px;
margin-top: 50px;
form {
.hs-button {}
}
}
}
}
/* CSS Keyframes */
@keyframes fadeIn1 {
0% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
@keyframes fadeIn2 {
0% {
opacity: 0;
transform: translateY(20px);
}
50% {
opacity: 0;
transform: translateY(20px);
}
100% {
opacity: 1;
transform: translateY(0px);
}
}
/* default anchor link offset */
div.hs_cos_wrapper_widget section.top-margin-none {
margin-top: 0;
}
/* module overrides */
div.hs_cos_wrapper_widget section.top-margin-small {
margin-top: 50px;
@media (max-width: 767px) {
margin-top: 35px;
}
@media (max-width: 575.98px) {
margin-top: 25px;
}
}
div.hs_cos_wrapper_widget section.top-margin-medium {
margin-top: 100px;
@media (max-width: 767px) {
margin-top: 75px;
}
@media (max-width: 575.98px) {
margin-top: 50px;
}
}
div.hs_cos_wrapper_widget section.top-margin-large {
margin-top: 150px;
@media (max-width: 767px) {
margin-top: 115px;
}
@media (max-width: 575.98px) {
margin-top: 75px;
}
}
div.hs_cos_wrapper_widget section.bottom-margin-none {
margin-bottom: 0;
}
div.hs_cos_wrapper_widget section.bottom-margin-small {
margin-bottom: 50px;
@media (max-width: 767px) {
margin-bottom: 35px;
}
@media (max-width: 575.98px) {
margin-bottom: 25px;
}
}
div.hs_cos_wrapper_widget section.bottom-margin-medium {
margin-bottom: 100px;
@media (max-width: 767px) {
margin-bottom: 75px
}
@media (max-width: 575.98px) {
margin-bottom: 50px
}
}
div.hs_cos_wrapper_widget section.bottom-margin-large {
margin-bottom: 150px;
@media (max-width: 767px) {
margin-bottom: 115px;
}
@media (max-width: 575.98px) {
margin-bottom: 75px;
}
}
div.hs_cos_wrapper_widget section.top-padding-none {
padding-top: 0;
}
div.hs_cos_wrapper_widget section.top-padding-small {
padding-top: 50px;
@media (max-width: 767px) {
padding-top: 35px;
}
@media (max-width: 575.98px) {
padding-top: 25px;
}
}
div.hs_cos_wrapper_widget section.top-padding-medium {
padding-top: 100px;
@media (max-width: 767px) {
padding-top: 75px;
}
@media (max-width: 575.98px) {
padding-top: 50px;
}
}
div.hs_cos_wrapper_widget section.top-padding-large {
padding-top: 150px;
@media (max-width: 767px) {
padding-top: 115px;
}
@media (max-width: 575.98px) {
padding-top: 75px;
}
}
div.hs_cos_wrapper_widget section.bottom-padding-none {
padding-bottom: 0;
}
div.hs_cos_wrapper_widget section.bottom-padding-small {
padding-bottom: 50px;
@media (max-width: 767px) {
padding-bottom: 35px;
}
@media (max-width: 575.98px) {
padding-bottom: 25px;
}
}
div.hs_cos_wrapper_widget section.bottom-padding-medium {
padding-bottom: 100px;
@media (max-width: 767px) {
padding-bottom: 75px;
}
@media (max-width: 575.98px) {
padding-bottom: 50px;
}
}
div.hs_cos_wrapper_widget section.bottom-padding-large {
padding-bottom: 150px;
@media (max-width: 767px) {
padding-bottom: 115px;
}
@media (max-width: 575.98px) {
padding-bottom: 75px;
}
}
/* Embedded u4 mega header: utility-nav menu base layout.
The u4 header module only styles colors/padding/hover for this HubSpot menu and
relies on the global unified4 stylesheet (not loaded in u5) for the horizontal
layout + flyout behavior. Supply just those primitives, scoped to the header. */
section.u3gm-header-2023 .utility-nav .utility-inner .right .hs-menu-wrapper > ul {
display: flex;
align-items: center;
margin: 0;
padding: 0;
list-style: none;
> li {
list-style: none;
}
/* Submenus become hidden flyouts (module already sets their color/offset) */
.hs-menu-children-wrapper {
position: absolute;
display: none;
flex-direction: column;
margin: 0;
list-style: none;
z-index: 600;
}
.hs-menu-depth-1.hs-item-has-children:hover > .hs-menu-children-wrapper {
display: flex;
}
}
/* Embedded u4 mega header: nav-overlay decorative background.
The u4 #nav-overlay partial (hero background grid + gradient blobs) is hidden by
default in the global unified4 stylesheet and only shown as a fixed overlay when
the mobile nav is open. u5 doesn't load that rule, so the oversized SVGs render
inline. Restore the default hidden state (this embed also hides it on nav-open). */
#nav-overlay {
display: none;
}
/* Embedded u4 header/footer: Font Awesome icon replacements (u5 ONLY).
Production u4 loads its own Font Awesome and never loads this stylesheet, so this
cannot affect it. Icons are drawn as CSS masks painted with currentColor, so the
module's existing color + hover rules continue to drive them. */
section.u3gm-header-2023 .fa-search::before,
section.u3gm-header-2023 .fa-times::before,
section.u3gm-header-2023 .fa-chevron-right::before,
section.u4m-footer .fa-facebook-f::before,
section.u4m-footer .fa-linkedin-in::before,
section.u4m-footer .fa-instagram::before,
section.u4m-footer .fa-youtube::before {
content: "";
display: inline-block;
width: 1em;
height: 1em;
background-color: currentColor;
-webkit-mask: center / contain no-repeat;
mask: center / contain no-repeat;
}
section.u3gm-header-2023 .fa-search::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M416 208c0 45.9-14.9 88.3-40 122.7L502.6 457.4c12.5 12.5 12.5 32.8 0 45.3s-32.8 12.5-45.3 0L330.7 376c-34.4 25.2-76.8 40-122.7 40C93.1 416 0 322.9 0 208S93.1 0 208 0S416 93.1 416 208zM208 352a144 144 0 1 0 0-288 144 144 0 1 0 0 288z'/%3E%3C/svg%3E");
}
/* Only the utility-nav toggle gets the larger/bolder treatment — not the
search button inside the popup overlay (which uses the same fa-search). */
section.u3gm-header-2023 .search-toggle-button::before {
width: 1.3em;
height: 1.3em;
}
/* u5 ships its own .hs-search-field styles (for the u5 site search) in _06-forms.css.
The embedded u4 header search overlay + mobile search reuse the same class names, so
those u5 rules leak in — most visibly flex:0 0 180px, which pins the input to 180px
instead of filling the bar. Re-assert the u4 layout, scoped to the header only. */
section.u3gm-header-2023 .hs-search-field .hs-search-field__bar form .hs-search-field__input {
flex: 1 1 auto;
width: auto;
}
section.u3gm-header-2023 .fa-times::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M256-200 200-256 424-480 200-704 256-760 480-536 704-760 760-704 536-480 760-256 704-200 480-424 256-200Z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M256-200 200-256 424-480 200-704 256-760 480-536 704-760 760-704 536-480 760-256 704-200 480-424 256-200Z'/%3E%3C/svg%3E");
}
section.u3gm-header-2023 .fa-chevron-right::before {
width: 1.3em;
height: 1.3em;
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
}
section.u4m-footer .fa-facebook-f::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath d='M279.14 288l14.22-92.66h-88.91v-60.13c0-25.35 12.42-50.06 52.24-50.06h40.42V6.26S260.43 0 225.36 0c-73.22 0-121.08 44.38-121.08 124.72v70.62H22.89V288h81.39v224h100.17V288z'/%3E%3C/svg%3E");
}
section.u4m-footer .fa-linkedin-in::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M100.28 448H7.4V148.9h92.88zM53.79 108.1C24.09 108.1 0 83.5 0 53.8a53.79 53.79 0 0 1 107.58 0c0 29.7-24.1 54.3-53.79 54.3zM447.9 448h-92.68V302.4c0-34.7-.7-79.2-48.29-79.2-48.29 0-55.69 37.7-55.69 76.7V448h-92.78V148.9h89.08v40.8h1.3c12.4-23.5 42.69-48.3 87.88-48.3 94 0 111.28 61.9 111.28 142.3V448z'/%3E%3C/svg%3E");
}
section.u4m-footer .fa-instagram::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M224.1 141c-63.6 0-114.9 51.3-114.9 114.9s51.3 114.9 114.9 114.9S339 319.5 339 255.9 287.7 141 224.1 141zm0 189.6c-41.1 0-74.7-33.5-74.7-74.7s33.5-74.7 74.7-74.7 74.7 33.5 74.7 74.7-33.6 74.7-74.7 74.7zm146.4-194.3c0 14.9-12 26.8-26.8 26.8-14.9 0-26.8-12-26.8-26.8s12-26.8 26.8-26.8 26.8 12 26.8 26.8zm76.1 27.2c-1.7-35.9-9.9-67.7-36.2-93.9-26.2-26.2-58-34.4-93.9-36.2-37-2.1-147.9-2.1-184.9 0-35.8 1.7-67.6 9.9-93.9 36.1s-34.4 58-36.2 93.9c-2.1 37-2.1 147.9 0 184.9 1.7 35.9 9.9 67.7 36.2 93.9s58 34.4 93.9 36.2c37 2.1 147.9 2.1 184.9 0 35.9-1.7 67.7-9.9 93.9-36.2 26.2-26.2 34.4-58 36.2-93.9 2.1-37 2.1-147.8 0-184.8zM398.8 388c-7.8 19.6-22.9 34.7-42.6 42.6-29.5 11.7-99.5 9-132.1 9s-102.7 2.6-132.1-9c-19.6-7.8-34.7-22.9-42.6-42.6-11.7-29.5-9-99.5-9-132.1s-2.6-102.7 9-132.1c7.8-19.6 22.9-34.7 42.6-42.6 29.5-11.7 99.5-9 132.1-9s102.7-2.6 132.1 9c19.6 7.8 34.7 22.9 42.6 42.6 11.7 29.5 9 99.5 9 132.1s2.7 102.7-9 132.1z'/%3E%3C/svg%3E");
}
section.u4m-footer .fa-youtube::before {
-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 576 512'%3E%3Cpath d='M549.655 124.083c-6.281-23.65-24.787-42.276-48.284-48.597C458.781 64 288 64 288 64S117.22 64 74.629 75.486c-23.497 6.322-42.003 24.947-48.284 48.597-11.412 42.867-11.412 132.305-11.412 132.305s0 89.438 11.412 132.305c6.281 23.65 24.787 41.5 48.284 47.821C117.22 448 288 448 288 448s170.78 0 213.371-11.486c23.497-6.321 42.003-24.171 48.284-47.821 11.412-42.867 11.412-132.305 11.412-132.305s0-89.438-11.412-132.305zm-317.51 213.508V175.185l142.739 81.205-142.739 81.201z'/%3E%3C/svg%3E");
}
/* Tier 2 — mega-nav "has-arrow" chevrons (\f054). The element is a filled circle and
the ::after is just the icon, so draw a white chevron there. Uses the Font Awesome
free chevron path (fills its viewBox) so it matches the original size instead of
rendering tiny. content:"" !important clears the FA glyph without copying the
module's long selector chains. */
section.u3gm-header-2023 .button-text.has-arrow::after,
section.u3gm-header-2023 .link-text.has-arrow::after,
section.u3gm-header-2023 .item-button-text.has-arrow::after {
content: "" !important;
display: inline-block;
width: 1em;
height: 1em;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Tier 2 — child-item hover arrow (\f054) and video-button-link (\f105). Here the
::after IS a fixed black circle (the module sets width/height + background-color),
so keep the circle and lay a small white icon on top via background-image. */
section.u3gm-header-2023 a.child-menu-item:not([href="javascript:;"]) .item-heading::after {
content: "" !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'%3E%3Cpath fill='%23ffffff' d='M285.476 272.971 91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: auto 10px;
}
section.u3gm-header-2023 .video-button-link.has-arrow::after {
content: "" !important;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath fill='%23ffffff' d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: center;
background-size: auto 11px;
}
/* Tier 2 — inline link arrows (\f105 angle-right): announcement-banner "Register Now"
link, mega-nav text-links and (non-circle) text buttons. Paints with currentColor
so it follows the link color; the module's margin-left spacing is preserved. */
section.u3gm-header-2023 .announcement-banner .content a::after,
section.u3gm-header-2023 .language-banner .content .link::after,
section.u3gm-header-2023 .text-link::after,
section.u3gm-header-2023 .button-text:not(.has-arrow)::after,
section.u3gm-header-2023 .link-text:not(.has-arrow)::after,
section.u3gm-header-2023 .item-button-text:not(.has-arrow)::after {
content: "" !important;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 512'%3E%3Cpath d='M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* Tier 2 — mobile menu caret (\f0d7, paints with currentColor). */
section.u3gm-header-2023 div.offscreen-menu .mobile-menu li.hs-item-has-children > a::after {
content: "" !important;
display: inline-block;
width: 1em;
height: 1em;
vertical-align: middle;
background-color: currentColor;
-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") center / contain no-repeat;
mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 -960 960 960'%3E%3Cpath d='M480-360 280-560h400L480-360Z'/%3E%3C/svg%3E") center / contain no-repeat;
}
/* ============================================================================
Embedded u4 footer (section.u4m-footer)
============================================================================ */
/* u5's global ul/li styles (_07-elements.css: list-style:disc; padding-left:40px;
li margin-bottom + letter-spacing) leak into the footer's HubSpot lists,
adding bullets + indentation. The u4 module relied on the u4 global list reset that
isn't loaded here. Strip the list chrome on the footer menus, scoped to the footer. */
section.u4m-footer .menu ul {
list-style: none;
padding-left: 0;
margin-top: 0;
}
section.u4m-footer .menu li {
margin-bottom: 0;
letter-spacing: normal;
}
.intro-content {
display: flex;
flex-direction: column;
&.left-aligned {
align-items: flex-start;
justify-content: flex-start;
text-align: left;
.heading,
.description {
margin-left: 0;
margin-right: auto;
}
.button-group {
justify-content: flex-start;
}
}
&.center-aligned {
align-items: center;
justify-content: center;
text-align: center;
margin-left: auto;
margin-right: auto;
.heading,
.description {
margin-left: auto;
margin-right: auto;
}
.button-group {
justify-content: center;
}
}
&.split-aligned {
flex-direction: row;
align-items: center;
justify-content: space-between;
gap: 30px;
width: 100%;
text-align: left;
.intro-content-upper {
flex: 1 1 auto;
min-width: 0;
}
.heading,
.description {
margin-left: 0;
margin-right: auto;
}
.button-group {
flex-shrink: 0;
justify-content: flex-end;
margin-top: 0;
}
@media (max-width: 768px) {
flex-direction: column;
align-items: flex-start;
.button-group {
justify-content: flex-start;
margin-top: 30px;
}
}
}
.eyebrow {}
.heading {
max-width: 900px;
margin-top: 0;
}
span.description {
margin-bottom: 0;
max-width: 900px;
display: block;
* {
font-size: inherit;
}
*:last-child {
margin-bottom: 0;
}
a {
text-decoration: underline;
&:hover,
&:focus {
color: var(--black);
}
}
}
.button-group {
display: flex;
gap: 20px;
align-items: center;
flex-wrap: wrap;
margin-top: 30px;
span.button-span {
@media (max-width: 767px) {
width: auto;
}
a {
margin: 0;
}
}
}
}
section.dark-mode {
.intro-content {
.intro-content-upper {
.eyebrow {
color: var(--white);
}
h1,
h2,
h3 {
color: var(--white);
}
span.description {
color: var(--white);
font-weight: 500;
* {
color: var(--white);
}
a {
text-decoration: underline;
&:hover,
&:focus {
opacity: .8;
}
}
}
}
}
}