/* ==========================================================================
1. BASE STYLES
========================================================================== */
/* ==========================================================================
Base
========================================================================== */
*, *:before, *:after {
box-sizing: border-box;
}
html, body {
margin: 0;
padding: 0;
position: relative;
}
html {
background-color: rgb(var(--color-background));
color: rgb(var(--color-foreground));
font-size: var(--site-font-size);
/* breaking gsap scrolltrigger on resize or refresh down page */
/* scroll-behavior: smooth; */
scroll-padding-top: var(--header-height, 4rem);
}
.no-js {
scroll-behavior: smooth;
}
body {
overflow-x: clip;
}
/* correct width issues in table elements created via the wysiwyg editor */
table tr td img {
max-width: initial;
}
/* visual media */
img, picture, video, canvas {
display: block;
height: auto;
max-width: 100%;
}
/* modals (initial style, other styles handled in async modal.css) */
.modal {
display: none;
}
/* ==========================================================================
Tables
========================================================================== */
.table-wrap {
overflow-x: auto;
}
table {
border-collapse: collapse;
margin-bottom: 1rem;
text-align: left;
font-size: .9rem;
}
table,
tbody {
border-color: rgb(var(--color-foreground));
}
th,
td {
padding: 0.75rem;
vertical-align: top;
border: 1px solid;
border-color: rgb(var(--color-foreground), .2);
background-color: rgb(var(--color-background));
color: rgb(var(--color-foreground));
}
thead th,
thead td {
background-color: rgb(var(--color-background-alt));
color: rgb(var(--color-foreground));
}
thead th {
vertical-align: bottom;
border-bottom: 2px solid rgb(var(--color-foreground), .5);
border-width: 1px;
}
tbody {
border-bottom: 2px solid rgb(var(--color-foreground), .5);
}
tfoot th,
tfoot td {
background-color: rgb(var(--color-background-alt));
color: rgb(var(--color-foreground));
}
table caption {
caption-side: bottom;
margin-top: .5rem;
font-size: .8em;
text-align: left;
opacity: .85;
padding: 0.75rem;
}
.table-minimalist th,
.table-minimalist td {
border-width: 0 0 1px 0;
}
.table-minimalist thead th,
.table-minimalist thead td {
background-color: transparent;
border-width: 0 0 2px 0;
}
.table-minimalist tfoot th,
.table-minimalist tfoot td {
background-color: transparent;
border-bottom: 0;
}
.table-striped th,
.table-striped td {
border-width: 0 0 1px 0;
}
.table-striped thead th,
.table-striped thead td {
background-color: transparent;
border-width: 0 0 2px 0;
}
.table-striped tbody tr:nth-child(even) th,
.table-striped tbody tr:nth-child(even) td {
background-color: rgb(var(--color-background-alt), .5);
}
.table-striped tfoot th,
.table-striped tfoot td {
background-color: transparent;
border-bottom: 0;
}
.js td,
.js th {
padding: 1rem 0.75rem;
}
.table-compact td,
.table-compact th {
font-size: .85rem;
padding: 0.5rem 0.7rem;
}
.table-expanded td,
.table-expanded th {
padding: 1.25rem 0.8rem;
}
.responsive-table {
--table-head-bg: rgb(var(--color-light));
}
.responsive-table table {
width: 100%;
text-align: inherit;
font-size: inherit;
}
.responsive-table tbody {
border-bottom: none;
}
.responsive-table thead td,
.responsive-table thead th {
background-color: var(--table-head-bg);
}
.responsive-table .first-cell {
background-color: var(--table-head-bg);
}
.responsive-table, .responsive-table thead, .responsive-table tr, .responsive-table th, .responsive-table td {
display: block;
}
.responsive-table thead {
display: none;
}
.responsive-table tbody {
display: flex;
flex-direction: column;
gap: 20px;
}
.responsive-table td::before {
content: attr(data-label);
}
/* Exclude td elements with the value "Name" */
.responsive-table .first-cell::before {
content: none; /* This removes the pseudo-element for "Name" */
}
.responsive-table td {
display: flex;
justify-content: space-between;
}
@media (min-width: 768px) {
.responsive-table,
.responsive-table table {
width: 100%;
}
.responsive-table, .responsive-table thead, .responsive-table tr, .responsive-table th, .responsive-table td {
display: table; /* or any other style to revert the block display */
}
.responsive-table thead, .responsive-table tr {
display: table-row; /* Ensure rows are displayed correctly */
}
.responsive-table th, .responsive-table td {
display: table-cell; /* Ensure table cells are displayed properly */
}
.responsive-table thead {
display: table-header-group; /* Ensure thead is in proper table structure */
}
.responsive-table tbody {
display: table-row-group; /* Revert to default table layout */
}
.responsive-table .first-cell {
background-color: transparent;
}
.responsive-table td::before {
content: none;
}
}
/* ==========================================================================
Typography
========================================================================== */
body {
font: var(--body-font);
letter-spacing: 0;
-moz-osx-font-smoothing: grayscale;
-moz-font-feature-settings: "liga" on;
}
/* Resets */
blockquote,button,dd,dl,figure,h1,h2,h3,h4,h5,h6,ol,p,pre,ul {
margin: 0;
padding: 0
}
/* Links */
a {
color: rgb(var(--color-accent));
font-weight: bold;
text-decoration: var(--link-text-decoration);
}
a:not([class]) {
-webkit-text-decoration-skip: ink;
text-decoration-skip-ink: auto;
}
a:hover {
opacity: .9;
outline: none;
}
/* Basic text */
p {
line-height: var(--body-line-height);
margin-top: 1em;
margin-bottom: 1.2em;
}
sup, sub {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
code, kbd, pre, samp {
font-family: var(--code-font-family);
font-size: 14px;
}
mark {
background-color: rgb(var(--color-primary), .3);
color: inherit;
}
code {
background-color: rgb(var(--color-dark), .85);
border-radius: 4px;
color: rgb(var(--color-text-light));
padding: 2px 3px;
}
pre {
background-color: rgb(var(--color-dark), .85);
border-radius: 4px;
color: rgb(var(--color-text-light));
padding: 1.25rem;
white-space: pre-wrap;
}
/* Headings */
/* Improved heading in supported browsers */
h1, .h1,
h2, .h2,
h3, .h3,
h4, .h4,
h5, .h5,
h6, .h6 {
text-wrap: pretty;
}
.jumbo, .h0 {
--font-family: var(--jumbo-font-family);
--font-size: var(--jumbo-font-size);
--font-style: var(--jumbo-font-style);
--font-weight: var(--jumbo-font-weight);
--line-height: var(--jumbo-line-height);
font: var(--jumbo-font);
letter-spacing: var(--jumbo-letter-spacing, normal);
text-transform: var(--jumbo-transform);
}
h1, .h1 {
--font-family: var(--h1-font-family);
--font-size: var(--h1-font-size);
--font-style: var(--h1-font-style);
--font-weight: var(--h1-font-weight);
--line-height: var(--h1-line-height);
font: var(--h1-font);
letter-spacing: var(--h1-letter-spacing, normal);
text-transform: var(--h1-transform);
}
h2, .h2 {
--font-family: var(--h2-font-family);
--font-size: var(--h2-font-size);
--font-style: var(--h2-font-style);
--font-weight: var(--h2-font-weight);
--line-height: var(--h2-line-height);
font: var(--h2-font);
letter-spacing: var(--h2-letter-spacing, normal);
text-transform: var(--h2-transform);
}
h3, .h3 {
--font-family: var(--h3-font-family);
--font-size: var(--h3-font-size);
--font-style: var(--h3-font-style);
--font-weight: var(--h3-font-weight);
--line-height: var(--h3-line-height);
font: var(--h3-font);
letter-spacing: var(--h3-letter-spacing, normal);
text-transform: var(--h3-transform);
}
h4, .h4 {
--font-family: var(--h4-font-family);
--font-size: var(--h4-font-size);
--font-style: var(--h4-font-style);
--font-weight: var(--h4-font-weight);
--line-height: var(--h4-line-height);
font: var(--h4-font);
letter-spacing: var(--h4-letter-spacing, normal);
text-transform: var(--h4-transform);
}
h5, .h5 {
--font-family: var(--h5-font-family);
--font-size: var(--h5-font-size);
--font-style: var(--h5-font-style);
--font-weight: var(--h5-font-weight);
--line-height: var(--h5-line-height);
font: var(--h5-font);
letter-spacing: var(--h5-letter-spacing, normal);
text-transform: var(--h5-transform);
}
h6, .h6 {
--font-family: var(--h6-font-family);
--font-size: var(--h6-font-size);
--font-style: var(--h6-font-style);
--font-weight: var(--h6-font-weight);
--line-height: var(--h6-line-height);
font: var(--h6-font);
letter-spacing: var(--h6-letter-spacing, normal);
text-transform: var(--h6-transform);
}
h1 a, h2 a, h3 a, h4 a, h5 a, h6 a {
text-decoration: none;
}
/* eyebrow text */
.text-eyebrow {
--font-family: var(--eyebrow-font-family);
--font-size: var(--eyebrow-font-size);
--font-style: var(--eyebrow-font-style);
--font-weight: var(--eyebrow-font-weight);
--line-height: var(--eyebrow-line-height);
color: var(--eyebrow-color, rgb(var(--color-foreground)));
display: block;
font: var(--font-style) var(--font-weight) var(--font-size) / var(--line-height) var(--font-family);
letter-spacing: var(--eyebrow-letter-spacing, normal);
margin-block: var(--eyebrow-margin-block, 0 0.5em);
padding: var(--eyebrow-padding-top, 0)
var(--eyebrow-padding-right, 0)
var(--eyebrow-padding-bottom, 0)
var(--eyebrow-padding-left, 0);
text-transform: var(--eyebrow-text-transform, none);
}
/* Paragraphs */
p, .paragraph, .widget-type-rich-text li, .rt li {
max-width: var(--p-max-width, 75ch); /* improve readability */
text-wrap: pretty; /* prevent orphans in supported browsers */
}
/* headings or any element with .paragraph and/or .unstyled classes */
.paragraph, .unstyled {
--font-size: 1rem;
font: var(--body-font);
}
.paragraph {
margin-block: 1em 1.2em;
}
.p-sm {
--font-size: var(--body-font-size-sm, .825rem);
font: var(--body-font-sm);
}
.p-lg {
--font-size: var(--body-font-size-lg, 1.4rem);
font: var(--body-font-lg);
}
/* Lists */
ul.unstyled, ol.unstyled, ul.flex {
list-style: none;
}
ul.unstyled:not(.flex), ol.unstyled {
margin: 0;
padding: 0;
}
/* Quotes */
blockquote {}
blockquote p {}
blockquote small {}
blockquote small:before {}
blockquote cite {
font-size: .8em;
text-align: right;
display: block;
font-style: normal;
font-weight: 400;
}
q:before, q:after, blockquote:before, blockquote:after {}
/* captions */
.caption,
.caption p {
font-size: .8em;
letter-spacing: var(--caption-letter-spacing, normal);
text-transform: var(--caption-case, inherit);
}
/* post & richtext typography */
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text, .rt) :last-child {
margin-bottom: 0;
}
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text, .rt) :first-child {
margin-top: 0;
}
:is(.widget-type-rich_text, .hs_cos_wrapper_type_rich_text) h2 {
margin-block: .5em;
}
.post__body h2 {
font-size: 2em;
margin-top: 1.35em;
margin-bottom: .4em;
}
.widget-type-rich_text h3,
.hs_cos_wrapper_type_rich_text h3 {
margin-top: .75em;
margin-bottom: .5em;
}
.post__body h3 {
font-size: 1.4em;
margin-top: 1.75em;
margin-bottom: .5em;
}
:is(.widget-type-rich_text, .hs_cos_wrapper_type_rich_text) h4,
:is(.widget-type-rich_text, .hs_cos_wrapper_type_rich_text) h5,
:is(.widget-type-rich_text, .hs_cos_wrapper_type_rich_text) h6 {
margin-block: .5em;
}
.post__body p {
margin-bottom: 1.42em;
line-height: 1.6;
font-size: 1em;
}
:is(.widget-type-rich_text, .hs_cos_wrapper_type_rich_text) p {
margin-bottom: 1.42em;
}
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) blockquote {
padding: .25em 1.15em;
border-left: 4px solid rgb(var(--color-primary));
margin-top: 1.4em;
margin-bottom: 1.4em;
font-size: 1.3em;
font-weight: bold;
}
@media (min-width: 768px) {
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) blockquote {
padding: .25em 1.5em;
}
}
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) blockquote p {
font-size: unset;
font-weight: bold;
}
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) ul,
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) ol {
padding: 0 1.15em;
margin-block: 1.5em;
}
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) li,
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) li ul,
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text) li ol {
margin-block: 0.5em;
}
:is(.post__body, .widget-type-rich_text, .hs_cos_wrapper_type_rich_text, .rt) li::marker {
color: rgb(var(--color-accent));
}
.post__body code {
background-color: rgb(var(--color-light));
color: rgb(var(--color-text-dark));
padding: 5px;
}
/* font util classes */
.font-body {
font-family: var(--body-font-family);
letter-spacing: .01em;
}
/* text style and color util classes */
.text-uppercase {
text-transform: uppercase;
}
/* ==========================================================================
Color themes
========================================================================== */
.card,
[class*="ct-"] .card{
--color-background: var(--theme-card-background-base);
--color-foreground: var(--theme-card-foreground);
--background: var(--theme-card-background);
--color-accent: var(--theme-card-accent);
--color-accent-contrast: var(--theme-card-accent-contrast);
--link-color: rgb(var(--theme-card-accent));
}
.card:not([class*=ct-]):hover,
[class*="ct-"] .card:not([class*=ct-]):hover{
--color-background: var(--theme-card-interaction-background-base);
--color-foreground: var(--theme-card-interaction-foreground);
--background: var(--theme-card-interaction-background);
--color-accent: var(--theme-card-interaction-accent);
--color-accent-contrast: var(--theme-card-interaction-accent-contrast);
--link-color: rgb(var(--theme-card-interaction-accent));
}
.ct,
.ct-white, .dnd-section:has(.mh-section.ct-white),
.ct-light, .dnd-section:has(.mh-section.ct-light),
.ct-black, .dnd-section:has(.mh-section.ct-black),
.ct-dark, .dnd-section:has(.mh-section.ct-dark),
.ct-card {
background-color: rgb(var(--color-background));
background: var(--background);
color: rgb(var(--color-foreground));
}
/* .ct a:not(.button),
.ct-white a:not(.button), .dnd-section:has(.mh-section.ct-white) a:not(.button),
.ct-light a:not(.button), .dnd-section:has(.mh-section.ct-light) a:not(.button),
.ct-black a:not(.button), .dnd-section:has(.mh-section.ct-black) a:not(.button),
.ct-dark a:not(.button), .dnd-section:has(.mh-section.ct-dark) a:not(.button),
.ct-card a:not(.button) {
color: rgb(var(--color-accent));
} */
.ct-white, .dnd-section:has(.mh-section.ct-white),
[class*="ct-"] .ct-white,
[class*="ct-"] .dnd-section:has(.mh-section.ct-white){
--color-background: var(--theme-white-background-base);
--color-foreground: var(--theme-white-foreground);
--background: var(--theme-white-background);
--color-accent: var(--theme-white-accent);
--color-accent-contrast: var(--theme-white-accent-contrast);
--link-color: rgb(var(--theme-white-accent));
}
.ct-light, .dnd-section:has(.mh-section.ct-light),
[class*="ct-"] .ct-light,
[class*="ct-"] .dnd-section:has(.mh-section.ct-light){
--color-background: var(--theme-light-background-base);
--color-foreground: var(--theme-light-foreground);
--background: var(--theme-light-background);
--color-accent: var(--theme-light-accent);
--color-accent-contrast: var(--theme-light-accent-contrast);
--link-color: rgb(var(--theme-light-accent));
}
.ct-black, .dnd-section:has(.mh-section.ct-black),
[class*="ct-"] .ct-black,
[class*="ct-"] .dnd-section:has(.mh-section.ct-black){
--color-background: var(--theme-black-background-base);
--color-foreground: var(--theme-black-foreground);
--background: var(--theme-black-background);
--color-accent: var(--theme-black-accent);
--color-accent-contrast: var(--theme-black-accent-contrast);
--link-color: rgb(var(--theme-black-accent));
}
.ct-dark, .dnd-section:has(.mh-section.ct-dark),
[class*="ct-"] .ct-dark,
[class*="ct-"] .dnd-section:has(.mh-section.ct-dark){
--color-background: var(--theme-dark-background-base);
--color-foreground: var(--theme-dark-foreground);
--background: var(--theme-dark-background);
--color-accent: var(--theme-dark-accent);
--color-accent-contrast: var(--theme-dark-accent-contrast);
--link-color: rgb(var(--theme-dark-accent));
}
.ct-card, .dnd-section:has(.mh-section.ct-card),
[class*="ct-"] .ct-card,
[class*="ct-"] .dnd-section:has(.mh-section.ct-card){
--color-background: var(--theme-card-background-base);
--color-foreground: var(--theme-card-foreground);
--background: var(--theme-card-background);
--color-accent: var(--theme-card-accent);
--color-accent-contrast: var(--theme-card-accent-contrast);
--link-color: rgb(var(--theme-card-accent));
}
/* ==========================================================================
Utilities
========================================================================== */
/* accessibility: screen reader, visually hidden */
.sr-only,
.screen-reader-text,
.visually-hidden,
.visually-hidden--focusable:not(:focus):not(:focus-within) {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
@media (max-width: 767px) {
.visually-hidden\@sm {
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;
}
}
/* alignment */
.align-left {
margin-right: auto;
}
.align-center {
margin-left: auto;
margin-right: auto;
}
.align-right {
margin-left: auto;
}
@media (min-width: 768px) and (max-width:1024px) {
.align-left--tablet {
margin-left: unset;
margin-right: auto;
}
.align-center--tablet {
margin-left: auto;
margin-right: auto;
}
.align-right--tablet {
margin-left: auto;
margin-right: unset;
}
}
@media (min-width: 1025px) {
.align-left--desktop {
margin-left: unset;
margin-right: auto;
}
.align-center--desktop {
margin-left: auto;
margin-right: auto;
}
.align-right--desktop {
margin-left: auto;
margin-right: unset;
}
}
/* flex alignment */
.flex-align-left {
justify-content: flex-start;
}
.flex-align-center {
justify-content: center;
}
.flex-align-right {
justify-content: flex-end;
}
@media (max-width: 767px) {
.flex-align-justify > * {
flex-grow: 1;
}
}
.flex-align-top {
align-items: flex-start;
}
.flex-align-middle {
align-items: center;
}
.flex-align-bottom {
align-items: flex-end;
}
@media (min-width: 768px) and (max-width:1024px) {
.flex-align-left--tablet {
justify-content: flex-start;
}
.flex-align-center--tablet {
justify-content: center;
}
.flex-align-right--tablet {
justify-content: flex-end;
}
.flex-align-top--tablet {
align-items: flex-start;
}
.flex-align-middle--tablet {
align-items: center;
}
.flex-align-bottom--tablet {
align-items: flex-end;
}
.flex-align-justify--tablet > * {
flex-grow: 1;
}
}
@media (min-width: 1025px) {
.flex-align-left--desktop {
justify-content: flex-start;
}
.flex-align-center--desktop {
justify-content: center;
}
.flex-align-right--desktop {
justify-content: flex-end;
}
.flex-align-justify--desktop > * {
flex-grow: 1;
}
.flex-align-top--desktop {
align-items: flex-start;
}
.flex-align-middle--desktop {
align-items: center;
}
.flex-align-bottom--desktop {
align-items: flex-end;
}
}
/* grid alignment */
.grid-align-left {
justify-content: start;
justify-items: start;
}
.grid-align-center {
justify-content: center;
justify-items: center;
}
.grid-align-right {
justify-content: end;
justify-items: end;
}
.grid-align-top {
align-content: start;
align-items: start;
}
.grid-align-middle {
align-content: center;
align-items: center;
}
.grid-align-bottom {
align-content: end;
align-items: end;
}
@media (min-width: 768px) and (max-width:1024px) {
.grid-align-left--tablet {
justify-content: start;
justify-items: start;
}
.grid-align-center--tablet {
justify-content: center;
justify-items: center;
}
.grid-align-right--tablet {
justify-content: end;
justify-items: end;
}
.grid-align-top--tablet {
align-content: start;
align-items: start;
}
.grid-align-middle--tablet {
align-content: center;
align-items: center;
}
.grid-align-bottom--tablet {
align-content: end;
align-items: end;
}
}
@media (min-width: 1025px) {
.grid-align-left--desktop {
justify-content: start;
justify-items: start;
}
.grid-align-center--desktop {
justify-content: center;
justify-items: center;
}
.grid-align-right--desktop {
justify-content: end;
justify-items: end;
}
.grid-align-top--desktop {
align-content: start;
align-items: start;
}
.grid-align-middle--desktop {
align-content: center;
align-items: center;
}
.grid-align-bottom--desktop {
align-content: end;
align-items: end;
}
}
/* text alignment */
.text-left {
text-align:left;
}
.text-center {
text-align:center;
}
.text-center p,
.text-center .paragraph {
margin-inline: auto; /* fix for max width in _typography.css */
}
.text-right {
text-align:right;
}
.text-right p,
.text-right .paragraph {
margin-inline: auto 0; /* fix for max width in _typography.css */
}
@media (max-width: 767px) {
.text-left--mobile {
text-align:left;
}
.text-right--mobile p,
.text-right--mobile .paragraph {
margin-inline: 0 auto; /* fix for max width in _typography.css */
}
.text-center--mobile {
text-align:center;
}
.text-center--mobile p,
.text-center--mobile .paragraph {
margin-inline: auto; /* fix for max width in _typography.css */
}
.text-right--mobile {
text-align:right;
}
.text-right--mobile p,
.text-right--mobile .paragraph {
margin-inline: auto 0; /* fix for max width in _typography.css */
}
}
@media (min-width: 768px) and (max-width:1024px) {
.text-left--tablet {
text-align:left;
}
.text-right--tablet p,
.text-right--tablet .paragraph {
margin-inline: 0 auto; /* fix for max width in _typography.css */
}
.text-center--tablet {
text-align:center;
}
.text-center--tablet p,
.text-center--tablet .paragraph {
margin-inline: auto; /* fix for max width in _typography.css */
}
.text-right--tablet {
text-align:right;
}
.text-right--tablet p,
.text-right--tablet .paragraph {
margin-inline: auto 0; /* fix for max width in _typography.css */
}
}
@media (min-width: 1025px) {
.text-left--desktop {
text-align:left;
}
.text-right--desktop p,
.text-right--desktop .paragraph {
margin-inline: 0 auto; /* fix for max width in _typography.css */
}
.text-center--desktop {
text-align:center;
}
.text-center--desktop p,
.text-center--desktop .paragraph {
margin-inline: auto; /* fix for max width in _typography.css */
}
.text-right--desktop {
text-align:right;
}
.text-right--desktop p,
.text-right--desktop .paragraph {
margin-inline: auto 0; /* fix for max width in _typography.css */
}
}
/* text colors */
.text-white, .text-white * {
color: rgb(var(--color-white));
}
.text-dark,
.text-dark p,
.text-dark h1,
.text-dark h2,
.text-dark h3,
.text-dark h4,
.text-dark h5 {
color: rgb(var(--color-text-dark));
}
.text-light, .text-light p {
color: rgb(var(--color-text-light));
}
.text-light a:not(.button),
.text-light h1,
.text-light h2,
.text-light h3,
.text-light h4,
.text-light h5 {
color: rgb(var(--color-text-light));
}
.text-primary {
color: rgb(var(--color-primary));
}
/* scroll */
.scroll-snap-x {
overflow: auto hidden;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
}
@media (prefers-reduced-motion: no-preference) {
.scroll-snap-x {
scroll-behavior: smooth;
}
}
@media (hover: none) {
.scroll-snap-x {
scrollbar-width: none;
}
.scroll-snap-x::-webkit-scrollbar {
width: 0;
height: 0;
}
}
/* ==========================================================================
2. COS STRUCTURE
========================================================================== */
/* ==========================================================================
Flex
========================================================================== *//* flex layouts */
.flex {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
flex-wrap: nowrap;
}
.flex--column {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.flex--column.flex--reverse {
-webkit-box-orient: vertical;
-webkit-box-direction: reverse;
-ms-flex-direction: column-reverse;
flex-direction: column-reverse;
}
@media (min-width: 768px) {
.flex--row {
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
}
.flex--row.flex--reverse {
-webkit-box-orient: horizontal;
-webkit-box-direction: reverse;
-ms-flex-direction: row-reverse;
flex-direction: row-reverse;
}
.flex.flex--nowrap {
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
}
}
.flex--wrap {
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.flex--jc-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.flex--jc-left {
-webkit-box-pack: start;
-ms-flex-pack: start;
justify-content: flex-start;
}
.flex--jc-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flex--jc-right {
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
.flex--jc-around {
-ms-flex-pack: distribute;
justify-content: space-around;
}
.flex--vertical-top {
-webkit-box-align: start;
-ms-flex-align: start;
align-items: flex-start;
}
.flex--vertical-center {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.flex--vertical-bottom {
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
}
/* flex items / columns */
.flex__item {
width: 100%;
}
.flex--has-gutter-mobile {
margin-right: -1.4vw;
margin-left: -1.4vw;
}
/* standard column classes */
@media (min-width: 768px) {
.flex__item {
width: auto;
}
.flex--has-gutter {
margin-right: -1.4vw;
margin-left: -1.4vw;
}
.flex--has-gutter > .flex__item {
margin-left: 1.4vw;
margin-right: 1.4vw;
}
.flex--has-gutter-small {
margin-right: -0.84vw;
margin-left: -0.84vw;
}
}
@media(min-width: 768px){.flex__item.col-1 {width: 8.33300%;}.flex__item.col-2 {width: 16.66600%;}.flex__item.col-3 {width: 25.00000%;}.flex__item.col-4 {width: 33.33300%;}.flex__item.col-5 {width: 41.66600%;}.flex__item.col-6 {width: 50.00000%;}.flex__item.col-7 {width: 58.33300%;}.flex__item.col-8 {width: 66.66600%;}.flex__item.col-9 {width: 75.00000%;}.flex__item.col-10 {width: 83.33300%;}.flex__item.col-11 {width: 91.66600%;}.flex__item.col-12 {width: 100.00000%;}}
@media(min-width: 768px){.flex__item.col-1-10ths {width: 10.00000%;}.flex__item.col-2-10ths {width: 20.00000%;}.flex__item.col-3-10ths {width: 30.00000%;}.flex__item.col-4-10ths {width: 40.00000%;}.flex__item.col-5-10ths {width: 50.00000%;}.flex__item.col-6-10ths {width: 60.00000%;}.flex__item.col-7-10ths {width: 70.00000%;}.flex__item.col-8-10ths {width: 80.00000%;}.flex__item.col-9-10ths {width: 90.00000%;}.flex__item.col-10-10ths {width: 100.00000%;}}
@media(min-width: 768px){.flex--has-gutter>.flex__item.col-1 {width: calc(8.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2 {width: calc(16.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3 {width: calc(25.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4 {width: calc(33.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5 {width: calc(41.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6 {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7 {width: calc(58.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8 {width: calc(66.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9 {width: calc(75.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10 {width: calc(83.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-11 {width: calc(91.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-12 {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(min-width: 768px){.flex--has-gutter>.flex__item.col-1-10ths {width: calc(10.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2-10ths {width: calc(20.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3-10ths {width: calc(30.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4-10ths {width: calc(40.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5-10ths {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6-10ths {width: calc(60.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7-10ths {width: calc(70.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8-10ths {width: calc(80.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9-10ths {width: calc(90.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10-10ths {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(max-width: 767px){.flex__item.col-1--mobile-only {width: 8.33300%;}.flex__item.col-2--mobile-only {width: 16.66600%;}.flex__item.col-3--mobile-only {width: 25.00000%;}.flex__item.col-4--mobile-only {width: 33.33300%;}.flex__item.col-5--mobile-only {width: 41.66600%;}.flex__item.col-6--mobile-only {width: 50.00000%;}.flex__item.col-7--mobile-only {width: 58.33300%;}.flex__item.col-8--mobile-only {width: 66.66600%;}.flex__item.col-9--mobile-only {width: 75.00000%;}.flex__item.col-10--mobile-only {width: 83.33300%;}.flex__item.col-11--mobile-only {width: 91.66600%;}.flex__item.col-12--mobile-only {width: 100.00000%;}}
@media(max-width: 767px){.flex__item.col-1-10ths--mobile-only {width: 10.00000%;}.flex__item.col-2-10ths--mobile-only {width: 20.00000%;}.flex__item.col-3-10ths--mobile-only {width: 30.00000%;}.flex__item.col-4-10ths--mobile-only {width: 40.00000%;}.flex__item.col-5-10ths--mobile-only {width: 50.00000%;}.flex__item.col-6-10ths--mobile-only {width: 60.00000%;}.flex__item.col-7-10ths--mobile-only {width: 70.00000%;}.flex__item.col-8-10ths--mobile-only {width: 80.00000%;}.flex__item.col-9-10ths--mobile-only {width: 90.00000%;}.flex__item.col-10-10ths--mobile-only {width: 100.00000%;}}
@media(max-width: 767px){.flex--has-gutter>.flex__item.col-1--mobile-only {width: calc(8.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2--mobile-only {width: calc(16.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3--mobile-only {width: calc(25.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4--mobile-only {width: calc(33.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5--mobile-only {width: calc(41.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6--mobile-only {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7--mobile-only {width: calc(58.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8--mobile-only {width: calc(66.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9--mobile-only {width: calc(75.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10--mobile-only {width: calc(83.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-11--mobile-only {width: calc(91.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-12--mobile-only {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(max-width: 767px){.flex--has-gutter>.flex__item.col-1-10ths--mobile-only {width: calc(10.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2-10ths--mobile-only {width: calc(20.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3-10ths--mobile-only {width: calc(30.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4-10ths--mobile-only {width: calc(40.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5-10ths--mobile-only {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6-10ths--mobile-only {width: calc(60.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7-10ths--mobile-only {width: calc(70.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8-10ths--mobile-only {width: calc(80.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9-10ths--mobile-only {width: calc(90.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10-10ths--mobile-only {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(min-width: 768px) and (max-width: 1024px){.flex__item.col-1--tablet-only {width: 8.33300%;}.flex__item.col-2--tablet-only {width: 16.66600%;}.flex__item.col-3--tablet-only {width: 25.00000%;}.flex__item.col-4--tablet-only {width: 33.33300%;}.flex__item.col-5--tablet-only {width: 41.66600%;}.flex__item.col-6--tablet-only {width: 50.00000%;}.flex__item.col-7--tablet-only {width: 58.33300%;}.flex__item.col-8--tablet-only {width: 66.66600%;}.flex__item.col-9--tablet-only {width: 75.00000%;}.flex__item.col-10--tablet-only {width: 83.33300%;}.flex__item.col-11--tablet-only {width: 91.66600%;}.flex__item.col-12--tablet-only {width: 100.00000%;}}
@media(min-width: 768px) and (max-width: 1024px){.flex__item.col-1-10ths--tablet-only {width: 10.00000%;}.flex__item.col-2-10ths--tablet-only {width: 20.00000%;}.flex__item.col-3-10ths--tablet-only {width: 30.00000%;}.flex__item.col-4-10ths--tablet-only {width: 40.00000%;}.flex__item.col-5-10ths--tablet-only {width: 50.00000%;}.flex__item.col-6-10ths--tablet-only {width: 60.00000%;}.flex__item.col-7-10ths--tablet-only {width: 70.00000%;}.flex__item.col-8-10ths--tablet-only {width: 80.00000%;}.flex__item.col-9-10ths--tablet-only {width: 90.00000%;}.flex__item.col-10-10ths--tablet-only {width: 100.00000%;}}
@media(min-width: 768px) and (max-width: 1024px){.flex--has-gutter>.flex__item.col-1--tablet-only {width: calc(8.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2--tablet-only {width: calc(16.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3--tablet-only {width: calc(25.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4--tablet-only {width: calc(33.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5--tablet-only {width: calc(41.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6--tablet-only {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7--tablet-only {width: calc(58.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8--tablet-only {width: calc(66.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9--tablet-only {width: calc(75.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10--tablet-only {width: calc(83.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-11--tablet-only {width: calc(91.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-12--tablet-only {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(min-width: 768px) and (max-width: 1024px){.flex--has-gutter>.flex__item.col-1-10ths--tablet-only {width: calc(10.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2-10ths--tablet-only {width: calc(20.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3-10ths--tablet-only {width: calc(30.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4-10ths--tablet-only {width: calc(40.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5-10ths--tablet-only {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6-10ths--tablet-only {width: calc(60.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7-10ths--tablet-only {width: calc(70.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8-10ths--tablet-only {width: calc(80.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9-10ths--tablet-only {width: calc(90.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10-10ths--tablet-only {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(min-width: 1025px){.flex__item.col-1--desktop-only {width: 8.33300%;}.flex__item.col-2--desktop-only {width: 16.66600%;}.flex__item.col-3--desktop-only {width: 25.00000%;}.flex__item.col-4--desktop-only {width: 33.33300%;}.flex__item.col-5--desktop-only {width: 41.66600%;}.flex__item.col-6--desktop-only {width: 50.00000%;}.flex__item.col-7--desktop-only {width: 58.33300%;}.flex__item.col-8--desktop-only {width: 66.66600%;}.flex__item.col-9--desktop-only {width: 75.00000%;}.flex__item.col-10--desktop-only {width: 83.33300%;}.flex__item.col-11--desktop-only {width: 91.66600%;}.flex__item.col-12--desktop-only {width: 100.00000%;}}
@media(min-width: 1025px){.flex__item.col-1-10ths--desktop-only {width: 10.00000%;}.flex__item.col-2-10ths--desktop-only {width: 20.00000%;}.flex__item.col-3-10ths--desktop-only {width: 30.00000%;}.flex__item.col-4-10ths--desktop-only {width: 40.00000%;}.flex__item.col-5-10ths--desktop-only {width: 50.00000%;}.flex__item.col-6-10ths--desktop-only {width: 60.00000%;}.flex__item.col-7-10ths--desktop-only {width: 70.00000%;}.flex__item.col-8-10ths--desktop-only {width: 80.00000%;}.flex__item.col-9-10ths--desktop-only {width: 90.00000%;}.flex__item.col-10-10ths--desktop-only {width: 100.00000%;}}
@media(min-width: 1025px){.flex--has-gutter>.flex__item.col-1--desktop-only {width: calc(8.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2--desktop-only {width: calc(16.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3--desktop-only {width: calc(25.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4--desktop-only {width: calc(33.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5--desktop-only {width: calc(41.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6--desktop-only {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7--desktop-only {width: calc(58.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8--desktop-only {width: calc(66.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9--desktop-only {width: calc(75.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10--desktop-only {width: calc(83.33300% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-11--desktop-only {width: calc(91.66600% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-12--desktop-only {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
@media(min-width: 1025px){.flex--has-gutter>.flex__item.col-1-10ths--desktop-only {width: calc(10.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-2-10ths--desktop-only {width: calc(20.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-3-10ths--desktop-only {width: calc(30.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-4-10ths--desktop-only {width: calc(40.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-5-10ths--desktop-only {width: calc(50.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-6-10ths--desktop-only {width: calc(60.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-7-10ths--desktop-only {width: calc(70.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-8-10ths--desktop-only {width: calc(80.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-9-10ths--desktop-only {width: calc(90.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}.flex--has-gutter>.flex__item.col-10-10ths--desktop-only {width: calc(100.00000% - 2.8vw);
margin-left: 1.4vw;
margin-right: 1.4vw;}}
/* ==========================================================================
Structure
========================================================================== */
/* class on the body tag */
main {
position: relative;
min-height: calc(100vh - var(--nav-height) - var(--nav-height));
}
/* container styles */
.container-fluid .row-fluid .container {
float: none;
margin: 0 auto;
position: relative;
width: 100%;
}
.container {
float: none;
max-width: var(--site-width);
margin: 0 auto;
padding-left: var(--site-gutter);
padding-right: var(--site-gutter);
position: relative;
width: 100%;
}
.container--medium {
--site-width: 1380px;
}
.container--slim {
--site-width: 1000px;
}
.container--skinny {
--site-width: 820px;
}
@media
(min-width: 2400px )
{
.body-container {
max-width: 2700px;
margin: auto;
position: relative;
overflow: hidden;
}
}
.body-container .container {
padding-block: var(--section-spacing-y, 4em);
}
.container--py0,
.body-container .container--py0 {
padding-block: 0;
}
@media
(min-width: 56.25em )
{
.container {
padding-left: 3.5rem;
padding-right: 3.5rem;
}
}
.relative {
position: relative;
}
#content > .span12 {
float: none;
}
/* display rules */
.hide,
.no-js .hide--no-js {
display: none!important;
}
@media
(max-width: 37.5em )
{
.hide--phone,
.hide--mobile {
display: none!important;
}
}
@media
(min-width: 37.5em ) and (max-width: 68.75em )
{
.hide--tablet {
display: none!important;
}
}
@media
(min-width: 68.75em )
{
.hide--desktop {
display: none!important;
}
}
/* ==========================================================================
DnD Styles
========================================================================== */
.dnd--level-1-nowrap .dnd-section > .row-fluid,
.dnd--level-1-nowrap.dnd-section > .row-fluid {
flex-wrap: nowrap;
}
/* sections */
/* non-background sections have half vertical spacing,
* background sections have full vertical spacing
* first and last sections have full vertical spacing
*/
.dnd-section {
padding: calc(var(--section-spacing-y) / 2) 0;
}
.dnd-section:is([class*=background], :has(.mh-section[class*=ct-])) {
padding-block: var(--section-spacing-y);
}
.dnd-section:first-child,
.dnd-section:is([class*=background], :has(.mh-section[class*=ct-])) + .dnd-section:not([class*=background], :has(.mh-section[class*=ct-])) {
padding-block-start: var(--section-spacing-y);
}
.dnd-section:not([class*=background], :has(.mh-section[class*=ct-])) + .dnd-section:is([class*=background], :has(.mh-section[class*=ct-])) {
margin-block-start: calc(var(--section-spacing-y) / 2);
}
.dnd-section:last-child {
padding-block-end: var(--section-spacing-y);
}
/* force module to be full width */
.dnd-section .row-module {
margin: 0 calc(var(--site-gutter-calculated) * -1);
}
.dnd-section[class*="full-width"] .row-module {
margin: 0;
}
/* section first div styled by hs dnd */
.dnd-section > .row-fluid {
margin-left: auto;
margin-right: auto;
max-width: var(--site-width);
padding-left: var(--site-gutter);
padding-right: var(--site-gutter);
position: relative;
}
.dnd-section[class*="full-width"] > .row-fluid {
padding-left: 0;
padding-right: 0;
}
@media (min-width: 768px) {
.dnd-section > .row-fluid {
display: flex;
}
}
/* columns on full width sections */
@media (max-width: 767px) {
.dnd-section[class*="full-width"] > .row-fluid > .dnd-column {
padding-left: var(--site-gutter-calculated);
padding-right: var(--site-gutter-calculated);
}
}
@media (min-width: 768px) {
.dnd-section[class*="full-width"]>.row-fluid>.dnd-column:not(.span12):first-child {
padding-left: var(--site-gutter-calculated);
}
.dnd-section[class*="full-width"]>.row-fluid>.dnd-column:not(.span12):last-child {
padding-right: var(--site-gutter-calculated);
}
}
/* force the dnd "add module here" placeholder full width */
.dnd-section > .row-fluid .hs-private {
width: 100%;
}
/* Missing Template at Path: \'pike-child-mst-services\/css\/partials\/_rows.css\' */
/* ==========================================================================
BG Elements
========================================================================== */
.bg-els {
display: block;
height: 100%;
position: absolute;
inset: 0 auto auto 0;
width: 100%;
}
.bg-el {
position: absolute;
overflow: hidden;
opacity: .2;
}
.bg {
overflow: hidden;
}
.bg--parallax {
--parallax-strength: 0.3;
}
.bg,
.bg__img,
.bg__overlay,
.bg__video,
.bg__pattern {
display: block;
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
.bg__video {
object-fit: cover;
object-position: 50% 50%;
}
.bg__img {
object-fit: cover;
}
.js .bg--parallax .bg__img,
.js .bg--parallax .bg__video {
height: calc(100% + (200% * var(--parallax-strength, 0.3)));
top: calc(-100% * var(--parallax-strength, 0.3));
object-position: 50% 50%;
}
.bg__img--left-top {
object-position: 0 0;
}
.bg__img--left-center {
object-position: 0 50%;
}
.bg__img--left-bottom {
object-position: 0 100%;
}
.bg__img--center-top {
object-position: 50% 0;
}
.bg__img--center-center {
object-position: 50% 50%;
}
.bg__img--center-bottom {
object-position: 50% 100%;
}
.bg__img--right-top {
object-position: 100% 0;
}
.bg__img--right-center {
object-position: 100% 50%;
}
.bg__img--right-bottom {
object-position: 100% 100%;
}
.bg__pattern {
background-repeat: repeat;
background-size: auto;
background-position: left top;
}
.media {
border-radius: var(--media-radius);
height: 1px;
position: relative;
overflow:hidden;
width: 100%;
}
.media--16-9
{
padding-bottom: 56.25%;
}
.media--7-5
{
padding-bottom: 71.43%;
}
.media--4-3
{
padding-bottom: 75.00%;
}
.media--5-4
{
padding-bottom: 80.00%;
}
.media--7-8
{
padding-bottom: 114.29%;
}
.media--1-1
{
padding-bottom: 100.00%;
}
.media--8-7
{
padding-bottom: 87.50%;
}
.media--4-5
{
padding-bottom: 125.00%;
}
.media--3-4
{
padding-bottom: 133.33%;
}
.media--5-7
{
padding-bottom: 140.00%;
}
.media > img,
.media > video,
.media > iframe {
display: block;
height: 100%;
width: 100%;
object-fit: cover;
position: absolute;
}
/* deferred media */
deferred-media {
display: block;
}
.deferred-media__poster {
background-color: transparent;
border: none;
border-radius: 0;
cursor: pointer;
font-size: 1rem;
margin: 0;
padding: 0;
position: relative;
height: 100%;
width: 100%;
}
.deferred-media__poster {
align-items: center;
display: flex;
justify-content: center;
}
.deferred-media__poster img {
width: auto;
height: 100%;
}
.deferred-media {
overflow: hidden;
}
.deferred-media:not([loaded]) template {
z-index: -1;
}
.deferred-media[loaded] > .deferred-media__poster {
display: none;
}
.deferred-media__poster:focus {
outline-offset: -0.3rem;
}
.deferred-media__overlay {
display: block;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.deferred-media__poster-content {
color: rgb(var(--color-white));
display: flex;
align-items: center;
flex-flow: column;
justify-content: center;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%) scale(1);
z-index: 1;
}
.deferred-media__media {
height: 1px;
overflow: hidden;
padding-bottom: var(--dm-ratio, 56.25%);
position: relative;
width: 100%;
}
.deferred-media__media iframe {
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
/* ==========================================================================
3. COMPONENTS
========================================================================== */
/* ==========================================================================
Icons
========================================================================== */
/*
* Icon Module
* markup options:
*
* 
*/
:root {
--icon-bg-rgb: transparent;
--icon-bg: transparent;
/* --icon-interaction-bg: var(--icon-bg); */
--icon-border: none;
--icon-color: currentColor;
/* --icon-interaction-color: var(--icon-color); */
--icon-padding: 0px;
--icon-radius: var(--icon-size);
--icon-shadow: none;
/* --icon-interaction-shadow: var(--icon-shadow); */
--icon-size: 60px;
}
.icon-module {
background: var(--icon-bg);
border: var(--icon-border);
border-radius: var(--icon-radius);
box-shadow: var(--icon-shadow);
display: block;
height: var(--icon-size);
object-fit: contain;
overflow: visible;
padding: var(--icon-padding);
position: relative;
width: var(--icon-size);
}
.icon-module:hover,
.icon-module:focus {
box-shadow: var(--icon-interaction-shadow, var(--icon-shadow));
opacity: 1;
}
a.icon-module {
text-decoration: none;
transition: outline 0.15s ease-in-out, all 0.2s ease-in-out;
}
a.icon-module:hover,
a.icon-module:focus {
outline: 2px rgb(var(--icon-interaction-bg-rgb, var(--icon-bg-rgb))) solid;
outline-offset: 2px;
}
/* use psuedo el for bg gradient hovers */
a.icon-module::before {
background: var(--icon-interaction-bg, var(--icon-bg));
border-radius: var(--icon-radius);
content: '';
display: block;
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: inherit;
width: 100%;
}
a.icon-module:hover::before,
a.icon-module:focus::before {
opacity: 1;
}
.icon-module svg {
display: block;
fill: var(--icon-color);
height: 100%;
position: relative;
transition: inherit;
width: 100%;
}
.icon-module:hover svg,
.icon-module:focus svg {
fill: var(--icon-interaction-color, var(--icon-color));
}
/* Theme icons */
svg[hidden] {
display: none;
}
svg.icon,
.icon svg {
fill: currentColor;
vertical-align: middle;
}
svg.icon {
height: 24px;
width: 30px;
}
/* Dropdown icon */
.icon-dropdown {
background-color: currentColor;
color: currentColor;
display: block;
height: var(--dropdown-icon-size, 0.75em);
margin: auto;
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: var(--dropdown-icon);
-webkit-mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: var(--dropdown-icon);
mask-repeat: no-repeat;
position: relative;
width: var(--dropdown-icon-size, 0.75em);
}
/* Arrow icon */
.icon-arrow {
background-color: currentColor;
color: currentColor;
display: block;
height: var(--arrow-icon-size, 1em);
margin: auto;
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: var(--arrow-icon);
-webkit-mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: var(--arrow-icon);
mask-repeat: no-repeat;
position: relative;
width: var(--arrow-icon-size, 1em);
}
.icon-arrow--left {
transform: rotateY(180deg);
}
/* Close icon */
.icon-close {
display: inline-block;
height: 0.7em;
position: relative;
width: 0.7em;
}
.icon-close:before,
.icon-close:after {
background-color: currentColor;
content: '';
height: 2px;
left: 50%;
position: absolute;
top: 50%;
transition: none;
width: 1em;
}
.icon-close:before {
transform: translate(-50%, -50%) rotate(-45deg);
}
.icon-close:after {
transform: translate(-50%, -50%) rotate(45deg);
}
/* Check icon */
.icon-check {
background-color: currentColor;
color: currentColor;
display: block;
height: var(--check-icon-size, 1em);
margin: auto;
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: var(--check-icon);
-webkit-mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: var(--check-icon);
mask-repeat: no-repeat;
position: relative;
width: var(--check-icon-size, 1em);
}
/* ==========================================================================
Native HubSpot Modules
========================================================================== */
/* Space Module */
.widget-type-space {
visibility: hidden;
}
/* Responsive Google Maps */
#map_canvas img, .google-maps img {
max-width: none;
}
/* line height fix for reCaptcha theme */
#recaptcha_table td {
line-height: 0;
}
.recaptchatable #recaptcha_response_field {
min-height: 0;line-height: 12px;
}
pre {
overflow-x: auto;
}
/* responsive pre tables */
table pre {
white-space: pre-wrap;
}
/* adding minimal spacing for blog comments */
.comment {
margin: 10px 0 10px 0;
}
/* make sure lines with no whitespace don't interefere with layout */
.hs_cos_wrapper_type_rich_text,
.hs_cos_wrapper_type_text,
.hs_cos_wrapper_type_header,
.hs_cos_wrapper_type_section_header,
.hs_cos_wrapper_type_raw_html,
.hs_cos_wrapper_type_raw_jinja,
.hs_cos_wrapper_type_page_footer {
word-wrap: break-word;
}
/* beat recaptcha into being responsive, !importants and specificity are necessary */
@media all and (max-width: 400px) {
#captcha_wrapper,
#recaptcha_area,
#recaptcha_area table#recaptcha_table,
#recaptcha_area table#recaptcha_table .recaptcha_r1_c1{
width: auto !important; overflow: hidden;
}
#recaptcha_area table#recaptcha_table .recaptcha_r4_c4 {
width: 67px !important;
}
#recaptcha_area table#recaptcha_table #recaptcha_image {
width: 280px !important;
}
}
/* Responsive tables */
.widget-type-rich_text .cell-wrapper table {
box-sizing: border-box;
border-collapse: collapse;
height: auto!important;
border: none;
width: 100%;
}
table td {
width: auto!important;
}
@media all and (max-width: 768px) {
.widget-type-rich_text .cell-wrapper table td {
width: auto!important;
display: block;
border-top:0;
border-left: 0;
border-right: 0;
}
.widget-type-rich_text .cell-wrapper table tr:last-child td:last-child {
border-bottom:0;
}
}
/* Embed Container (iFrame, Object, Embed) */
.hs-responsive-embed {
position: relative;
height: 0;
overflow: hidden;
padding-top: 0;
padding-left: 0;
padding-right: 0;
}
.hs-responsive-embed iframe,
.hs-responsive-embed object,
.hs-responsive-embed embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
.hs-responsive-embed,
.hs-responsive-embed.hs-responsive-embed-youtube,
.hs-responsive-embed.hs-responsive-embed-wistia,
.hs-responsive-embed.hs-responsive-embed-vimeo {
padding-bottom: 56.25%;
}
.hs-responsive-embed.hs-responsive-embed-instagram {
padding-bottom: 116.01%;
}
.hs-responsive-embed.hs-responsive-embed-pinterest {
height: auto;
overflow: visible;
padding: 0;
}
.hs-responsive-embed.hs-responsive-embed-pinterest iframe {
position: static;
width: auto;
height: auto;
}
iframe[src^="http://www.slideshare.net/slideshow/embed_code/"] {
width: 100%;
max-width: 100%;
}
@media (max-width: 568px) {
iframe {
max-width: 100%;
}
}
/* video module */
.hs-video-widget > img {
display: block;
margin: auto;
}
/* fix for hs layout empty columns */
body .row-fluid [class*="span"] {
min-height: 1px;
}
/* native modules with built-in headers (usually h3s) */
.hs_cos_wrapper > h3,
.hs_cos_wrapper > .block > h3 {
margin-bottom: .75em;
}
/* section header */
.section-header h1,
.section-header h2 {
border-bottom: rgb(var(--color-primary)) 4px solid;
display: inline-block;
font-size: 2.2em;
line-height: 1.25;
padding-bottom: .25em;
}
.section-header p,
.section-header p span {
color: rgb(var(--color-primary));
}
.section-header p {
font-size: 1em;
margin-top: .4em;
}
@media
(min-width: 68.75em )
{
.section-header {
font-size: 1.4em;
}
}
/* Post Listing */
.widget-type-post_listing ul {
padding-left: 1.3rem;
}
/* Post Filter */
.widget-type-post_filter ul,
.hs_cos_wrapper_type_post_filter ul,
.topic-tags ul {
list-style: none;
margin: 0;
padding: 0;
}
.widget-type-post_filter li,
.hs_cos_wrapper_type_post_filter li,
.topic-tags li {
display: inline-block;
}
.widget-type-post_filter li a,
.hs_cos_wrapper_type_post_filter li a,
.topic-tags li a {
background-color: rgb(var(--color-light));
border-radius: 16px;
color: rgb(var(--color-text-dark));
display: inline-block;
height: 32px;
font-size: 13px;
font-weight: 400;
line-height: 32px;
margin-bottom: 5px;
margin-right: 5px;
padding: 0 18px 0 12px;
position: relative;
text-decoration: none;
transition: .2s box-shadow;
}
.widget-type-post_filter li a:hover,
.hs_cos_wrapper_type_post_filter li a:hover,
.topic-tags li a:hover,
.widget-type-post_filter li a:focus,
.hs_cos_wrapper_type_post_filter li a:focus {
box-shadow: 0 0 0 2px rgb(var(--color-primary), 0.6);
}
.widget-type-post_filter li a .filter-link-count,
.hs_cos_wrapper_type_post_filter li a .filter-link-count,
.topic-tags li a .filter-link-count {
background-color: rgb(var(--color-primary));
border-radius: 50%;
color: rgb(var(--color-primary-contrast));
font-weight: 600;
height: 20px;
inset: -5px -4px auto auto;
line-height: 20px;
position: absolute;
text-align: center;
transition: .2s box-shadow;
width: 20px;
}
.widget-type-post_filter li a:hover .filter-link-count,
.hs_cos_wrapper_type_post_filter li a:hover .filter-link-count,
.topic-tags li a:hover .filter-link-count,
.widget-type-post_filter li a:focus .filter-link-count,
.hs_cos_wrapper_type_post_filter li a:focus .filter-link-count {
box-shadow: 0 0 0 3px rgb(var(--color-primary), 0.6);
}
.widget-type-post_filter li a.topic-link,
.hs_cos_wrapper_type_post_filter li a.topic-link,
.topic-tags li a.topic-link {
padding-right: 12px;
}
/* rss feed */
.hs-rss-item {
margin-bottom: 0;
padding: 2.25em 0;
border-bottom: 1px solid rgb(var(--color-foreground), .1);
}
.hs-rss-item.hs-with-featured-image {
display: flex;
flex-flow: row-reverse wrap-reverse;
align-items: center;
}
body .hs-rss-item.hs-with-featured-image .hs-rss-item-image-wrapper {
display: block;
width: 100%;
}
body .hs-rss-item.hs-with-featured-image .hs-rss-item-text {
display: block;
float: none;
width: 100%;
padding: 1.25em 1rem;
}
.hs-rss-title {
color: unset;
display: block;
font-size: 1.75em;
font-weight: 600;
line-height: 1.2;
margin-bottom: 0.4em;
text-decoration:none;
}
.hs-rss-description > p {
margin: 1em 0 0;
}
.hs-rss-description > p > a {
display: block;
margin: 0.8em 0 0;
font-weight: bold;
font-size: 1.2em;
}
@media
(min-width: 68.75em )
{
.hs-rss-item.hs-with-featured-image {
display: flex;
flex-flow: row;
justify-content: space-between;
align-items: flex-start;
font-size: 1.5rem;
}
body .hs-rss-item.hs-with-featured-image .hs-rss-item-image-wrapper {
width: calc(33% - 1.2em);
}
body .hs-rss-item.hs-with-featured-image .hs-rss-item-text {
display: grid;
width: 67%;
grid-template-columns: repeat(2, 1fr);
grid-gap: 1.2em;
align-items: start;
padding-bottom: 0;
padding-top: 0;
}
.hs-rss-item.hs-with-featured-image .hs-rss-title {
font-size: 1.4em;
grid-column: 1;
grid-row: 1;
}
.hs-rss-item.hs-with-featured-image .hs-rss-byline {
grid-column: 1;
grid-row: 2;
font-size: 0.7em;
height: auto;
}
.hs-rss-item.hs-with-featured-image .hs-rss-description {
grid-column: 2;
grid-row: 1 / 3;
font-size: .85em;
}
.hs-rss-item.hs-with-featured-image .hs-rss-description p {
margin-top: 0;
}
}
@media
(min-width: 150em )
{
.hs-rss-item.hs-with-featured-image {
font-size: 1.75em;
}
.hs-rss-item.hs-with-featured-image .hs-rss-description {
font-size: .9em;
}
}
/* menu modules */
.hs-menu-wrapper ul {
list-style: none;
line-height: 1;
padding: 0;
}
.hs-item-has-children {
position: relative;
}
.hs-menu-depth-1 {
position: relative;
}
.hs-menu__child-toggler {
display:none;
position: absolute;
top: 0;
right: 23px;
padding: .75em 1.3rem;
font-size: 1em;
line-height: 1;
}
.hs-menu-wrapper.flyouts:not(.hs-menu-flow-horizontal) .hs-menu-children-wrapper ~ .hs-menu__child-toggler {
display: block;
}
.hs-menu__child-toggler i {
border: rgb(var(--color-primary)) solid;
border-width: 0 2px 2px 0;
display: block;
width: 12px;
height: 12px;
transform: rotate(45deg) translate(-2px,-2px);
}
.hs-item-has-children--open > .hs-menu__child-toggler i {
transform: rotate(225deg) translate(-2px,-2px);
}
.hs-menu-depth-1:before {
background-color: rgb(var(--color-primary), 0.1);
content: '';
height: 100%;
inset: 0 auto auto 0;
position: absolute;
width: 3px;
transition: all 0.2s;
}
.hs-menu-depth-1:hover::before,
.hs-item-has-children--open::before {
background-color: rgb(var(--color-primary));
}
.hs-menu-item a {
display: inline-block;
padding: .75em 1.3rem;
}
.hs-menu-wrapper .hs-menu-children-wrapper {
transition: all 0.4s;
padding-left: 1rem;
font-size: .9em;
}
.hs-menu-wrapper.flyouts .hs-menu-children-wrapper {
display:none;
visibility: hidden;
opacity: 0;
}
.hs-menu-wrapper.flyouts .hs-item-has-children--open > .hs-menu-children-wrapper {
display:block;
visibility: visible;
opacity: 1;
}
/* horizontal menu */
@media
(min-width: 68.75em )
{
.hs-menu-flow-horizontal > ul {
display: flex;
}
.hs-menu-flow-horizontal .hs-item-has-children:not(.hs-menu-depth-1) {
position: static;
}
.hs-menu-flow-horizontal.flyouts .hs-menu-children-wrapper {
background-color: rgb(var(--color-white));
box-shadow: 0px 17px 35px 0px rgb(var(--color-black), .12);
font-size: .9em;
height: auto;
inset: 100% auto auto 0;
min-width: 150px;
opacity: 0;
padding: 1rem 0;
position: absolute;
transition: opacity 0.4s;
visibility: hidden;
width: auto;
z-index: 10;
}
.hs-menu-flow-horizontal .hs-menu-depth-1 {
padding-right: 0;
}
.hs-menu-flow-horizontal .hs-menu-depth-1:before {
content: unset;
}
.hs-menu-flow-horizontal.flyouts .hs-menu__child-toggler {
display:none;
}
.hs-menu-flow-horizontal .hs-menu-depth-2:hover,
.hs-menu-flow-horizontal .hs-menu-depth-2:hover > .hs-menu-children-wrapper {
background-color: rgb(var(--color-primary), .05);
color: rgb(var(--color-primary));
}
.hs-menu-flow-horizontal .hs-menu-depth-1 a {
display: block;
padding: .5em 20px;
}
.hs-menu-flow-horizontal .hs-menu-children-wrapper a {
display: block;
white-space: nowrap;
}
.hs-menu-flow-horizontal .hs-menu-depth-2:hover a {
color: rgb(var(--color-primary-contrast));
}
.hs-menu-flow-horizontal.flyouts .hs-menu-children-wrapper .hs-menu-children-wrapper {
left: 100%;
top: 0;
}
.hs-menu-flow-horizontal.flyouts .hs-item-has-children:hover >.hs-menu-children-wrapper {
opacity: 1;
visibility: visible;
}
.hs-menu-flow-horizontal .hs-menu-depth-1.hs-item-has-children, .hs-menu-flow-horizontal.hs-menu-show-active-branch {
position: relative;
}
.hs-menu-flow-horizontal.hs-menu-show-active-branch .hs-item-has-children {
position: static;
}
.hs-menu-flow-horizontal.hs-menu-show-active-branch .hs-menu-children-wrapper {
display: none;
}
.hs-menu-flow-horizontal.hs-menu-show-active-branch .hs-item-has-children.active-branch > ul.hs-menu-children-wrapper {
display: block;
visibility: visible;
opacity: 1;
}
.hs-menu-flow-horizontal .hs-menu-depth-1 > .hs-menu-children-wrapper:before {
box-sizing: border-box;
background: rgb(var(--color-white));
content: '';
height: 11px;
inset: -5px auto auto 15%;
position: absolute;
width: 11px;
transform: rotate(135deg);
}
}
/* share module */
.hs_cos_wrapper_type_social_sharing {
display: flex;
flex-flow: row;
width: 100%;
}
.hs_cos_wrapper_type_social_sharing a {
background-color: rgb(var(--color-secondary));
color: rgb(var(--color-secondary-contrast));
display: block;
padding: 20px;
transition: .15s all ease-in-out;
width: auto!important;
}
.hs_cos_wrapper_type_social_sharing a:hover {
background-color: rgb(var(--color-primary));
color: rgb(var(--color-primary-contrast));
}
.hs_cos_wrapper_type_social_sharing svg {
display: block;
height: 24px;
width: 30px;
}
.hs-share__title { /* share title icon and text added in js */
align-items: center;
display: flex;
flex-flow: column;
justify-content: center;
}
.hs-share__title span:first-child {
padding: 5px 20px 2px;
}
.hs-share__title span:last-child {
font-size: .875em;
}
/* follow me */
.widget-type-follow_me div {
display: flex;
flex-flow: row;
width: 100%;
}
.widget-type-follow_me a {
display:block;
padding: .5em;
}
.widget-type-follow_me a:hover {
background-color: rgb(var(--color-primary), .1 );
}
.widget-type-follow_me svg {
fill: currentColor;
height: 24px;
width: 30px;
vertical-align: middle;
}
/* ==========================================================================
Common Theme Modules
========================================================================== */
/* fancy list */
.icon-list {
--col-count: var(--col-count\@sm, 1);
--icon-list-item-gap-y: 0.5em;
--icon-list-col-gap: 40px;
--icon-list-icon-color: currentColor;
--icon-list-item-gap: .6em;
--icon-list-style-text: "🔥";
--icon-list-line-height: var(--body-line-height);
--icon-list-text-color: rgb(var(--color-foreground));
--icon-list-text-font-size: 1rem;
--icon-list-text-font-weight: var(--body-font-weight);
--icon-list-text-text-decoration: inherit;
--icon-list-text-font-family: var(--body-font-family);
--icon-list-text-font-style: var(--body-font-style);
column-count: var(--col-count);
column-gap: 20px;
color: var(--icon-list-text-color);
font-family: var(--icon-list-text-font-family);
font-size: var(--icon-list-text-font-size);
font-style: var(--icon-list-text-font-style);
font-weight: var(--icon-list-text-font-weight);
text-decoration: var(--icon-list-text-text-decoration);
line-height: var(--icon-list-line-height);
list-style: none;
padding: 0;
margin: 0;
}
@media (min-width: 768px) {
.icon-list {
--col-count: var(--col-count\@md, 1);
}
}
@media (min-width: 1025px) {
.icon-list {
--col-count: var(--col-count\@lg, 1);
column-gap: var(--icon-list-col-gap);
}
}
/* increased specificity for style clashes */
.icon-list li {
-webkit-column-break-inside: avoid;
break-inside: avoid;
display: flex;
gap: var(--icon-list-item-gap);
line-height: inherit;
list-style: inherit;
}
.icon-list li + li {
margin-top: var(--icon-list-item-gap-y);
}
.icon-list.text-right li {
flex-flow: row-reverse;
}
@media (min-width: 768px) and (max-width: 1024px) {
.icon-list.text-right--tablet li {
flex-flow: row-reverse;
}
.icon-list.text-left--tablet li {
flex-flow: row;
}
.icon-list.text-center--tablet li {
flex-flow: row;
justify-content: center;
}
}
@media (min-width: 1025px) {
.icon-list.text-right--desktop li {
flex-flow: row-reverse;
}
.icon-list.text-left--desktop li {
flex-flow: row;
}
.icon-list.text-center--desktop li {
flex-flow: row;
justify-content: center;
}
}
.js .icon-list[data-mh-animation] li {
opacity: 0;
}
.icon-list.animated li {
animation: var(--animation-name) 1s cubic-bezier(0.46, 0.52, 0.09, 1.01) forwards;
animation-delay: calc(var(--animation-stagger, 100ms) * var(--animation-index, 1) + var(--animation-delay, 0ms));
}
.icon-list--check li:before {
border-left: 3px solid var(--icon-list-icon-color);
border-bottom: 3px solid var(--icon-list-icon-color);
content: '';
display: block;
flex: 0 0 1em;
height: 0.5em;
margin-top: calc(var(--icon-list-line-height) * 0.4em);
transform: rotate(-45deg);
transform-origin: 25%;
width: 1em;
}
.icon-list__icon,
.icon-list__img {
display: block;
width: auto;
height: 1.2em;
margin-top: calc(var(--icon-list-line-height) * .5em - .6em);
min-width: 1.4em;
object-fit: contain;
}
.icon-list__icon svg {
display: block;
fill: var(--icon-list-icon-color);
height: 100%;
margin: auto;
width: auto;
}
.icon-list--text li:before {
content: var(--icon-list-style-text);
color: var(--icon-list-icon-color);
}
.icon-list--disc li:before {
content: '•';
color: var(--icon-list-icon-color);
font-size: 1.6em; /* Match native ::marker size */
line-height: 1;
}
.icon-list--ordered {
counter-reset: step-counter;
}
.icon-list--ordered li:before {
color: var(--icon-list-icon-color);
content: counters(step-counter, ".");
counter-increment: step-counter;
font-weight: bold;
}
.icon-list__text {
position: relative;
width: 100%;
z-index: 0;
}
/* rich text */
.rt,
.widget-type-rich_text {
margin-block: var(--rt-margin-block, 1rem);
}
.rt:not(.p-sm):not(.p-lg) {
font-size: 1rem;
}
/* image */
.adv-img {
border-radius: var(--media-radius);
overflow: hidden;
position: relative;
transition: .2s box-shadow, .2s transform;
}
.adv-img__inner {
border-radius: var(--media-radius);
overflow: hidden;
height: 100%;
}
.adv-img__picture, .adv-img__image {
border-radius: var(--media-radius);
display: block;
}
[data-mh-parallax] .adv-img__image {
height: 120%!important;
max-width: none!important;
object-fit: cover;
position: absolute;
width: 100%;
}
[data-mh-parallax-speed="[-4]"] .adv-img__image {
height: 150%!important;
}
/* row divider (in section extra settings) */
.row-divider-wrapper {
position: relative;
}
.row-divider {
bottom: 0;
display: block;
left: 0;
height: 100px;
overflow: hidden;
position: absolute;
right: 0;
top: auto;
width: 100%;
}
.row-divider[data-position=top] {
bottom: auto;
top: -1px;
transform: rotate(180deg);
}
.row-divider[data-front=true] {
z-index: 50;
}
.row-divider__shape {
background-color: transparent !important;
display: block;
position: absolute;
width: 100%;
height: 40%;
top: auto;
right: 0;
bottom: -1px;
left: 0;
}
@media (min-width: 37.5em) {
.row-divider__shape {
height: 75%;
}
}
@media (min-width: 56.25em) {
.row-divider__shape {
height: 100%;
}
}
.row-divider[data-style=curves] .row-divider__shape {
filter: blur(0.5px);
transform: scale(1.03);
}
.row-divider[data-style=mountains] svg path:first-child {
opacity: .1;
}
.row-divider[data-style=mountains] svg path:nth-child(2) {
opacity: .12;
}
.row-divider[data-style=mountains] svg path:nth-child(3) {
opacity: .18;
}
.row-divider[data-style=mountains] svg path:nth-child(4) {
opacity: .33;
}
.row-divider[data-style=curves] svg path:nth-child(1),
.row-divider[data-style=waves] svg path:nth-child(1) {
opacity: .15;
}
.row-divider[data-style=curves] svg path:nth-child(2),
.row-divider[data-style=waves] svg path:nth-child(2) {
opacity: .3;
}
/* video */
.mh-video {
--aspect-ratio: 16 / 9;
--mh-vid-title-color: rgb(var(--color-text-light, 255,255,255));
--mh-vid-tagline-color: rgb(var(--color-text-light, 255,255,255));
--btn-accent-color: var(--mh-vid-accent-color, 255,255,255);
--btn-accent-contrast-color: var(--mh-vid-accent-contrast-color, 0,0,0);
border-color: var(--border-colors, 'transparent');
border-radius: var(--media-radius);
border-style: var(--border-styles, 'none');
border-width: 0;
overflow: hidden;
position: relative;
}
@media (min-width: 768px) {
.mh-video {
scale: var(--scale, 1);
}
}
.mh-video[data-mh-animation],
.mh-video [data-mh-animation] {
animation-delay: var(--animation-delay);
}
.mh-video [data-mh-animation] + [data-mh-animation] {
animation-delay: calc(var(--animation-delay) + 500ms);
}
.mh-video__inner {
border: inherit;
border-radius: var(--media-radius);
border-width: var(--border-widths, 0);
overflow: hidden;
}
.mh-video__inner:empty {
display: none;
}
.mh-video__inner,
.mh-video__iframe-wrapper,
.mh-video__deferred-media,
.mh-video .hs-video-widget {
aspect-ratio: var(--aspect-ratio);
}
.mh-video--full .mh-video__inner {
aspect-ratio: var(--aspect-ratio);
}
.mh-video video {
border-radius: var(--aspect-ratio);
display: block;
margin: 0 auto;
}
@media (min-width: 800px) {
.mh-video .play-pulser {
--play-pulser-size: 75px;
}
}
.mh-video__loading-bg {
animation: var(--shimmer-animation);
background: var(--shimmer-background);
background-size: var(--shimmer-background-size);
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.mh-video span + .play-pulser {
margin: 20px 0 0;
}
.mh-video .hs-video-widget > img,
.mh-video .hs-video-container {
border-radius: var(--media-radius);
overflow: hidden;
}
.mh-video__iframe-wrapper {
aspect-ratio: var(--media-ratio, 16 / 9);
overflow: hidden;
position: relative;
width: 100%;
}
.mh-video__iframe-wrapper iframe {
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
/* module fallback instructions */
.mh-fallback-instructions {
display: none;
}
.hs-inline-edit .mh-fallback-instructions {
background-color: #f5f8fa;
border: 2px solid #f2547d;
border-radius: 10px;
display: block;
overflow: hidden;
padding: 1em;
text-align: center;
width: 100%;
}
.hs-inline-edit .mh-fallback-instructions__title {
color: #f2547d;
font-size: 1.3rem;
font-weight: bold;
width: 100%;
}
/* editor placeholder */
.hs-module-editor-placeholder__description {
margin-inline: auto;
}
/* ==========================================================================
Breadcrumbs
========================================================================== */
.breadcrumbs {
display: flex;
flex-wrap: wrap;
font-size: .8rem;
list-style: none;
padding: .5em 0;
}
.breadcrumb {
padding-right: 1em;
}
.breadcrumb:last-child {
padding-right: 0;
}
.breadcrumb + .breadcrumb::before{
border: solid currentColor;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
height: 9px;
margin-right: 1em;
transform: rotate(45deg);
vertical-align: middle;
width: 9px;
}
/* ==========================================================================
Language switchers
========================================================================== */
.lang-switcher {
position: relative;
}
g-lang-switcher {
display: block;
position: relative;
}
g-lang-switcher:empty {
display: none;
}
.lang-switcher__toggle,
g-lang-switcher summary {
align-items: center;
color: rgb(var(--color-accent));
cursor: pointer;
display: flex;
gap: 0.5em;
list-style: none;
}
.lang-switcher__toggle::-webkit-details-marker,
g-lang-switcher summary::-webkit-details-marker {
display: none;
}
.lang-switcher__toggle svg,
.lang-switcher__toggle img,
g-lang-switcher details svg,
g-lang-switcher details img {
display: block;
object-fit: contain;
}
.lang-switcher__langs,
g-lang-switcher summary + div {
padding: .5rem 0;
}
.lang-switcher__lang,
g-lang-switcher button {
display: block;
font-weight: inherit;
line-height: 1;
padding: .5rem 1rem;
white-space: nowrap;
width: 100%;
}
/* google language switcher */
g-lang-switcher summary::after {
background-color: currentColor;
color: currentColor;
content: '';
display: block;
height: var(--dropdown-icon-size, 0.75em);
/* margin: auto; */
-webkit-mask-position: center;
-webkit-mask-size: contain;
-webkit-mask-image: var(--dropdown-icon);
-webkit-mask-repeat: no-repeat;
mask-position: center;
mask-size: contain;
mask-image: var(--dropdown-icon);
mask-repeat: no-repeat;
position: relative;
width: var(--dropdown-icon-size, 0.75em);
}
g-lang-switcher button {
border: none;
border-radius: 0;
text-align: left;
}
/* ==========================================================================
Cards
========================================================================== */
/* cards class for modules setting custom padding not inherting from :root
* because setting --card-padding-sm and --card-padding-lg on a module does not work.
* I have no effing clue why.
*/
.cards {
--card-padding: var(--card-padding-sm);
--card-ratio: var(--card-ratio-sm, auto);
}
@media
(min-width: 56.25em )
{
.cards {
--card-padding: var(--card-padding-lg);
--card-ratio: var(--card-ratio-lg, auto);
}
}
/* card */
.card {
aspect-ratio: var(--card-ratio);
background: var(--background);
border: var(--card-border);
border-radius: var(--card-radius);
box-shadow: var(--card-shadow, none);
color: rgb(var(--color-foreground));
display: flex;
flex-flow: column;
position: relative;
transition: all .2s;
}
@media (hover: hover) {
.card:hover {
box-shadow: var(--card-interaction-shadow);
transform: var(--card-interaction-move);
}
.card--has-link:hover {
box-shadow: var(--card-interaction-shadow);
transition: all .2s ease;
}
}
.card:before { /* used for card bg */
background: var(--background-hover, var(--background));
border-radius: var(--card-radius);
content: '';
height: 100%;
left: 0;
opacity: 0;
position: absolute;
top: 0;
transition: opacity .2s;
width: 100%;
}
.card:hover::before {
opacity: 1;
}
.card--no-hover::before {
display: none;
}
.card--no-hover:hover {
box-shadow: var(--card-shadow);
transform: none;
}
.card--padded {
padding: var(--card-padding);
}
/* card media */
.card .bg {
transition: filter .2s, transform .2s;
}
.card .bg,
.card .bg__img {
border-radius: var(--card-radius);
}
.card__image {
aspect-ratio: var(--card-media-aspect-ratio, auto);
border-radius: var(--card-radius);
display: block;
object-fit: cover;
transition: filter .2s, transform .2s;
}
.card__image:not(.card__image--padded) {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
margin: calc(var(--card-padding) * -1);
margin-bottom: var(--card-padding);
max-width: calc(100% + var(--card-padding) * 2);
}
/* card link */
.card__link {
color: inherit;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.card__link:hover,
.card__link:focus {
opacity: 1;
}
.card--has-link img {
transition: .1s transform ease;
}
.card--has-link:hover img,
.card--has-link:focus-within img {
transform: scale(1.1) rotate(3deg);
transition: .6s transform ease;
}
.card__content {
color: inherit;
display: flex;
flex-direction: column;
font-weight: inherit;
height: 100%;
justify-content: var(--card-alignment-y);
padding: var(--card-padding);
position: relative;
text-decoration: none;
width: 100%;
}
.card__link:focus .card__content {
transform: scale(.9);
outline: none;
box-shadow: 0 0 0 6px rgba(var(--rgb-secondary), 1);
}
/* card text */
/* .card__sub-title {
color: var(--eyebrow-color, inherit);
display: block;
font: var(--eyebrow-font-style, var(--font-style))
var(--eyebrow-font-weight, var(--font-weight))
var(--eyebrow-font-size, var(--font-size)) /
var(--eyebrow-line-height, var(--line-height))
var(--eyebrow-font-family, var(--font-family));
margin-block: var(--eyebrow-margin-block, 0);
padding: var(--eyebrow-padding-top, 0)
var(--eyebrow-padding-right, 0)
var(--eyebrow-padding-bottom, 0)
var(--eyebrow-padding-left, 0);
text-decoration: var(--eyebrow-text-decoration, none);
} */
.card__title {
color: var(--_title-color, inherit);
display: block;
font: var(--_title-font-style, var(--font-style))
var(--_title-font-weight, var(--font-weight))
var(--_title-font-size, var(--font-size)) /
var(--_title-line-height, var(--line-height))
var(--_title-font-family, var(--font-family));
margin-block: var(--_title-margin-block, 0);
padding: var(--_title-padding-top, 0)
var(--_title-padding-right, 0)
var(--_title-padding-bottom, 0)
var(--_title-padding-left, 0);
text-decoration: var(--_title-text-decoration, none);
}
.card__title:not(.jumbo, .h1, .h2, .h3, .h4, .h5, .h6) {
--font-family: var(--h4-font-family);
--font-size: var(--h4-font-size);
--font-style: var(--h4-font-style);
--font-weight: var(--h4-font-weight);
--line-height: var(--h4-line-height);
}
.card__text {
color: var(--_description-color, inherit);
font: var(--_description-font-style, var(--font-style))
var(--_description-font-weight, var(--font-weight))
var(--_description-font-size, var(--font-size)) /
var(--_description-line-height, var(--line-height))
var(--_description-font-family, var(--font-family));
margin-block: var(--_description-margin-block, 1em);
padding: var(--_description-padding-top, 0)
var(--_description-padding-right, 0)
var(--_description-padding-bottom, 0)
var(--_description-padding-left, 0);
text-decoration: var(--_description-text-decoration, none);
}
.cards--masonry .card__text:not(.p-sm, .p-lg) {
--font-size: .8em;
}
.card .card__text:last-child,
.card:has(.card__ctas:empty) .card__text {
margin-block-end: 0;
}
.card__text a {
position: relative;
transition: text-decoration 0.2s ease-in-out;
}
.card__text a:hover {
text-decoration: underline;
}
.card__text p {
line-height: inherit;
}
.card__text p:first-child,
.card__text p:last-child {
margin-block: 0;
}
/* card icon */
.card__icon {
align-self: var(--card-icon-alignment, var(--card-alignment-x));
margin-bottom: 1em;
transition: all .2s;
}
/* card buttons */
.card__ctas {
align-items: center;
display: flex;
flex-wrap: wrap;
gap: 1rem;
margin-block: var(--_ctas-margin-block, auto 0);
padding: var(--_ctas-padding-top, 0)
var(--_ctas-padding-right, 0)
var(--_ctas-padding-bottom, 0)
var(--_ctas-padding-left, 0);
}
.card__ctas:empty {
display: none;
}
.text-center .card__ctas {
margin-left: auto;
margin-right: auto;
}
.text-right .card__ctas {
margin-left: auto;
}
.card__ctas:has(.button--full-width) {
margin-inline: 0;
}
.card:has(.card__title-link):hover .button:not(.button--unstyled) {
outline-offset: 2px;
outline: 2px solid rgb(var(--btn-accent-color), .5);
}
.card:has(.card__title-link):hover .button--unstyled {
text-decoration: underline;
}
.card__text:has(a:hover) + .card__ctas .button:not(.button--unstyled) {
outline: none;
}
.card__text:has(a:hover) + .card__ctas .button--unstyled {
text-decoration: none;
}
/* card list */
.card__list {
list-style-type: '— ';
padding-left: 1.25em;
}
/* card title link (assessibility) */
a.card__title-link {
color: inherit;
font-family: inherit;
font-weight: inherit;
text-decoration: none;
}
a.card__title-link:hover,
a.card__title-link:focus {
color: rgb(var(--color-accent));
text-decoration: underline;
}
a.card__title-link::after {
content: '';
height: 100%;
inset: 0;
position: absolute;
width: 100%;
}
/* animations */
.js .cards[data-mh-animation] {
will-change: auto!important;
}
.js .cards[data-mh-animation] .card {
opacity: 0;
}
.cards.animated .card {
animation: var(--card-animation) 1s cubic-bezier(0.46, 0.52, 0.09, 1.01) forwards;
animation-delay: calc(var(--card-animation-delay));
}
/* ==========================================================================
Chips
========================================================================== */
.chips {
display: flex;
flex-flow: row wrap;
font-size: 0.75em;
gap: 0.5em;
line-height: 1;
padding: var(--chip-border-width, 1px);
}
.chip {
background: rgb(var(--chip-background, var(--color-primary), 0.15));
border-radius: var(--chip-radius, 10rem);
box-shadow: 0 0 0 var(--chip-border-width, 1px)
rgb(var(--chip-border-color, var(--color-primary)));
color: rgb(var(--chip-foreground, var(--color-primary)));
font-size: 1em;
letter-spacing: 0.025em;
padding: var(--chip-padding, 0.3em 1em);
white-space: nowrap;
}
/* chips styles */
/* hero section styles */
@media (min-width: 68.75em) {
.hide--desktop { /* update Section Settings media query to match HS breakpoints */
display: block !important;
}
}
@media (min-width: 768px) {
.body-container .span12 .row-number-1.body_dnd_area-row-0-background-layers { /* parent container of content centered in flexbox */
min-height: 32rem;
}
.body-container .span12 .row-number-1.body_dnd_area-row-0-background-layers:has(.mh-section) > .row-fluid { /* content centered in flexbox */
height: 100%;
min-height: 24rem;
}
#hero-section-settings .hide--desktop { /* update Section Settings media query to match HS breakpoints */
display: none !important;
}
}
@media (max-width: 767px) {
.body-container .span12 .row-number-1.body_dnd_area-row-0-background-layers { /* mobile settings for parent container of content centered in flexbox */
min-height: 22rem;
}
.body-container .span12 .row-number-1.body_dnd_area-row-0-background-layers:has(.mh-section) > .row-fluid { /* mobile settings for content centered in flexbox */
display: flex;
align-items: center;
height: 100%;
min-height: 18rem;
}
}
/* END hero section styles */
/* IG - Step Process */
.step-module {
box-shadow: 0 15px 22px -1px rgba(33, 33, 57, 0.31) !important;
-webkit-box-shadow: 0 15px 22px -1px rgba(33, 33, 57, 0.31) !important;
border-radius: 12px !important;
}
.step-module .slider.slick-slider {
margin: 30px auto !important;
padding:
display: flex;
align-items: center;
}
.step-module .slick-list {
display: flex;
flex-direction: column;
justify-content: center;
}
.step-module .slick-track {
display: flex !important;
align-content: center;
align-items: center;
margin-left: unset !important;
margin-right: unset !important;
}
.step-module .slick-initialized .slick-slide {
display: flex !important;
}
.step-module .item-container {
display: flex;
flex-direction: column;
}
.step-module .item-container h3 {
margin-top: 0 !important;
}
@media (min-width: 601px) and (max-width: 767px) {
.step-module .item-container p {
padding: 0 5vw;
}
}
/* END IG - Step Process */
/* Section Heading */
.heading {
margin-block: 0 !important;
}
.lined-heading .heading__heading {
display: flex;
gap: 1rem;
align-items: center;
}
.lined-heading .heading__heading::after {
content: '';
display: block;
flex-grow: 1;
flex-shrink: 1;
width: 100%;
height: 3px;
background-color: rgb(var(--color-secondary));
}
.lined-heading .heading__heading .heading__title {
flex-shrink: 0;
flex-grow: 0;
text-wrap: unset;
}
.heading__title sup {
top: -0.3em;
font-size: .75em;
}
/* END Section Heading */
/* Rich Text (Simple) */
.rt-no-margin-block {
margin-block: 0 !important;
}
.widget-type-rich_text .rt.case-studies-list-item-dark ul li:before {
background: rgb(var(--color-secondary));
}
/* END Rich Text (Simple) */
/* Button(s) */
.button,
.hs-button {
line-height: 1.3 !important;
}
/* END Button(s) */
/* Cards */
.floating-card {
max-width: 25rem;
}
.floating-card .card__content {
padding-bottom: calc(var(--card-padding) + 1rem);
}
.single-card-img-bg .card__content {
padding-bottom: calc(var(--card-padding) + 3rem);
}
.card-as-single-testimonial .card__text.p-lg {
margin-top: 0;
}
.card-as-single-testimonial .card__text.p-lg p:nth-last-child(2) {
font-size: 1rem;
font-weight: 600;
margin-bottom: .25em;
}
.card-as-single-testimonial .card__text.p-lg p:last-child {
font-size: var(--body-font-size-sm, .825rem);
}
.card__title:not(.jumbo):not(.h1):not(.h2):not(.h3):not(.h4):not(.h5) {
font-size: clamp(1.2rem, 0.75rem + 0.938vw, 1.5rem);
font-weight: inherit;
}
.bg-image-cards a.card__title-link:hover,
.bg-image-cards a.card__title-link:focus {
color: #eefcff;
text-decoration: none;
}
.cards-offset-icons .card {
margin-top: 3rem;
}
a.card__title-link:hover, a.card__title-link:focus {
color: inherit;
}
/* Cards END */
/* Tabs */
.tabber .tabber__panel .tabber__panel-col ul li {
margin-bottom: 1em;
padding-left: .5em;
}
.tabber .tabber__panel {
align-items: start;
}
.tabber.tabs-CA-BH-COE .tabber__panel-col a {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--btn-spacing-y, 0.65em) var(--btn-spacing-x, 0.9rem);
text-align: center;
text-decoration: var(--btn-text-decoration);
text-transform: var(--btn-text-transform);
line-height: 1.1;
letter-spacing: var(--btn-letter-spacing);
color: rgba(255, 255, 255, 1);
background: rgba(15, 20, 91, 1);
border-radius: var(--btn-radius);
box-shadow: var(--btn-shadow);
cursor: pointer;
transition: all 0.2s ease-in-out;
}
.tabber.tabs-CA-BH-COE .tabber__panel-col a:hover {
outline: 2px solid rgba(15, 20, 91, 0.5);
outline-offset: 2px;
opacity: 1;
}
/* END Tabs */
/* Testimonials */
.testimonials.testimonials--overlap .testimonial__quote .testimonial__icon {
margin-bottom: .5rem;
}
.testimonials.swipe-track.testimonials--swipe .testimonial.card .testimonial__quote .testimonial__icon {
margin-bottom: .8rem;
}
/* END Testimonials */
/* Counter(s) */
.counters.case-studies-counter {
--counter-title-max-width: 100%;
}
/* END Counter(s) */
/* IG - Testimonial carousel */
.hs-testimonial-carousel .swiper-container {
padding-bottom: 2.75rem !important;
}
.hs-testimonial-carousel .card {
padding: 2.2rem !important;
}
.hs-testimonial-carousel .testimonial-content .testimonial-text {
font-size: clamp(0.889rem, 0.873rem + 0.82vw, 1.222rem);
}
@media (max-width: 767px) {
.hs-testimonial-carousel .testimonial-content,
.hs-testimonial-carousel .testimonial-content p {
text-align: left !important;
}
.hs-testimonial-carousel .testimonial-content .testimonial-text .quote-icon.quote-icon--open {
margin-bottom: .5em;
text-align: left !important;
}
.hs-testimonial-carousel .testimonial-content .testimonial-text .quote-icon.quote-icon--close {
margin-top: .5em;
text-align: right !important;
}
}
/* END IG - Testimonial carousel */
/* IG - Step Process */
.step-module {
background-color: var(--theme-dark-background) !important;
box-shadow: 0 15px 22px -1px rgba(33, 33, 57, 0.31) !important;
-webkit-box-shadow: 0 15px 22px -1px rgba(33, 33, 57, 0.31) !important;
border-radius: 12px !important;
}
.step-module .slider.slick-slider {
margin: 30px auto !important;
display: flex;
align-items: center;
}
.step-module .slick-list {
display: flex;
flex-direction: column;
justify-content: center;
}
.slick-dots li,
.slick-dots li.slick-active {
background-color: var(--theme-dark-background) !important;
}
.step-module .slick-track {
display: flex !important;
align-content: center;
align-items: center;
margin-left: unset !important;
margin-right: unset !important;
}
.step-module .slick-initialized .slick-slide {
display: flex !important;
}
.step-module .item-container {
display: flex;
flex-direction: column;
}
.step-module .item-container h3 {
margin-top: 0 !important;
}
@media (min-width: 601px) and (max-width: 767px) {
.step-module .item-container p {
padding: 0 5vw;
}
}
.step-module .item-container a,
.step-module .item-container p a {
color: var(--color-primary-contrast);
}
.step-module .item-container a {
position: relative;
margin-top: 1rem !important;
transition: .2s transform ease-in-out;
}
.step-module .item-container a:hover {
transform: translateX(10px);
}
.step-module .item-container a:before {
content: '';
display: block;
position: absolute;
width: 1.3em;
height: 2px;
top: 50%;
right: -2rem;
transform: translateY(-50%);
transform-origin: right center;
background-color: #fff;
transition: .2s transform ease-in-out;
}
.step-module .item-container a:after {
content: '';
position: absolute;
position: absolute;
display: block;
width: 8px;
height: 8px;
top: 50%;
right: -2rem;
border: solid currentColor;
border-width: 2px 2px 0 0;
transform: translate(0%, -50%) rotate(45deg);
transform-origin: center;
transition: .2s transform ease-in-out;
}
.step-module .item-container a:hover:before {
transform: translate(-10px, -50%) scaleX(0.8);
}
.step-module .item-container a:hover:after {
transform: translate(-10px, -50%) rotate(45deg);
}
/* END IG - Step Process */
/* Global header */
.mobile-drawer {
padding-bottom: 20px;
}
/* END Global header */
/* Global footer */
.footer a {
font-weight: 400;
}
.footer .hs-menu-item.hs-menu-depth-1:before {
background-color: rgb(var(--color-secondary), .2);
}
.footer .hs-menu-item.hs-menu-depth-1:hover::before {
background-color: rgba(var(--color-secondary), 1);
}
.footer .hs-menu-wrapper ul {
line-height: 1.2;
}
/* END Global footer */
/* Testimonials page */
.hero-section:has(.container-fluid .row-fluid-wrapper .row-fluid .span12 .row-number-1 .hero-testimonials) img {
background-color: #e9f2fa;
}
/* END Testimonials page */
/* Icon List */
.icon-list-footer-address .icon-list__item {
font-size: var(--body-font-size-sm, .825rem);
}
.icon-list-footer-address .icon-list__icon {
fill: rgb(var(--color-secondary));
}
/* END Icon List */
/* END chips styles */
/* ==========================================================================
4. FORMS & BUTTONS
========================================================================== */
/* ==========================================================================
Forms
========================================================================== */
body .hs-form-html .hsfc-Renderer {
--hsf-default-row__horizontal-spacing: 30px;
--hsf-default-row__vertical-spacing: 20px;
--hsf-default-module__vertical-spacing: 10px;
--hsf-default-navigationrow-buttons__justify-content: space-between;
--hsf-default-navigationrow-buttons-single__justify-content: end;
--hsf-default-button__font-family: var(--btn-font-family);
--hsf-default-button__font-size: var(--form-submit-font-size);
--hsf-default-button__color: rgb(var(--color-accent-contrast));
--hsf-default-button__background-color: rgb(var(--color-accent));
--hsf-default-button__background-image: none;
--hsf-default-button__border-radius: var(--btn-radius);
--hsf-default-button__border-width: var(--btn-border-width);
--hsf-default-button__border-style: none;
--hsf-default-button__border-color: initial;
--hsf-default-button__padding: var(--btn-spacing-y) var(--btn-spacing-x);
--hsf-default-button__box-shadow: none;
--hsf-default-button__font-weight: var(--btn-font-weight);
--hsf-default-richtext__font-family: var(--body-font-family);
--hsf-default-richtext__font-size: var(--body-font-size);
--hsf-default-richtext__color: rgb(var(--color-foreground));
--hsf-default-heading__font-family: var(--h1-font-family);
--hsf-default-heading__color: rgb(var(--color-foreground));
--hsf-default-heading__text-shadow: none;
--hsf-default-background__padding: var(--form-padding);
--hsf-default-background__border-style: none;
--hsf-default-background__border-color: rgba(255, 255, 255, 1);
--hsf-default-background__border-radius: var(--form-radius);
--hsf-default-background__border-width: var(--form-border-width);
--hsf-default-progressbar-text__font-family: var(--body-font-family);
--hsf-default-progressbar-text__font-size: var(--body-font-size);
--hsf-default-progressbar-text__color: rgb(var(--color-foreground));
--hsf-default-progressbar-progressLine__background-color: rgb(var(--color-accent));
--hsf-default-progressbar-progressLine__background-image: none;
--hsf-default-progressbar-progressLine__border-color: rgb(var(--color-accent));
--hsf-default-progressbar-progressLine__border-style: none;
--hsf-default-progressbar-progressLine__border-width: 0px 0px 0px 0px;
--hsf-default-progressbar-trackLine__background-color: rgb(var(--color-foreground), 0.1);
--hsf-default-erroralert__font-family: var(--body-font-family);
--hsf-default-erroralert__font-size: 0.9em;
--hsf-default-erroralert__color: rgb(var(--theme-form-error));
--hsf-default-infoalert__font-family: var(--body-font-family);
--hsf-default-infoalert__font-size: 0.9em;
--hsf-default-infoalert__color: rgb(var(--color-foreground));
--hsf-default-field-label__font-family: var(--label-font-family);
--hsf-default-field-label__font-size: var(--label-font-size, 0.75em);
--hsf-default-field-label__color: var(--label-color);
--hsf-default-field-description__font-family: var(--body-font-family);
--hsf-default-field-description__font-size: var(--body-font-size-sm);
--hsf-default-field-description__color: var(--color-text-light);
--hsf-default-field-footer__font-family: var(--body-font-family);
--hsf-default-field-footer__font-size: var(--body-font-size-sm);
--hsf-default-field-footer__color: var(--color-text-light);
--hsf-default-field-input__font-family: var(--input-font-family);
--hsf-default-field-input__font-size: var(--input-font-size, 0.9em);
--hsf-default-field-input__color: rgb(var(--input-color-foreground));
--hsf-default-field-input__background-color: rgb(var(--input-color-background));
--hsf-default-field-input__placeholder-color: var(--input-color-placeholder);
--hsf-default-field-input__border-color: rgb(var(--input-border-color));
--hsf-default-field-input__border-width: var(--input-border-width, 1px);
--hsf-default-field-input__border-style: solid;
--hsf-default-field-input__border-radius: var(--input-radius, 4px);
--hsf-default-field-input__padding: var(--input-padding, 0.65em 0.85rem);
--hsf-default-field-textarea__font-family: var(--input-font-family);
--hsf-default-field-textarea__font-size: var(--input-font-size, 0.9em);
--hsf-default-field-textarea__color: rgb(var(--input-color-foreground));
--hsf-default-field-textarea__background-color: rgb(var(--input-color-background));
--hsf-default-field-textarea__placeholder-color: var(--input-color-placeholder);
--hsf-default-field-textarea__border-color: rgb(var(--input-border-color));
--hsf-default-field-textarea__border-width: var(--input-border-width, 1px);
--hsf-default-field-textarea__border-style: solid;
--hsf-default-field-textarea__border-radius: var(--input-radius, 4px);
--hsf-default-field-textarea__padding: var(--input-padding, 0.65em 0.85rem);
--hsf-default-field-checkbox__padding: var(--check-radio-grp-padding);
--hsf-default-field-checkbox__background-color: rgb(var(--input-color-background));
--hsf-default-field-checkbox__color: rgb(var(--input-color-foreground));
--hsf-default-field-checkbox__border-color: rgb(var(--input-border-color));
--hsf-default-field-checkbox__border-width: var(--input-border-width, 1px);
--hsf-default-field-checkbox__border-style: solid;
--hsf-default-field-radio__padding: var(--check-radio-grp-padding);
--hsf-default-field-radio__background-color: rgb(var(--input-color-background));
--hsf-default-field-radio__color: rgb(var(--input-color-foreground));
--hsf-default-field-radio__border-color: rgb(var(--input-border-color));
--hsf-default-field-radio__border-width: var(--input-border-width, 1px);
--hsf-default-field-radio__border-style: solid;
--hsf-default-button--hover__background-color: rgb(var(--color-accent));
--hsf-default-background__background-color: transparent;
--hsf-default-background__background-image: none;
--hsf-default-background__background-position: initial;
--hsf-default-background__background-size: initial;
--hsf-default-background__background-repeat: initial;
--hsf-default-background-banner__border-bottom-left-radius: 0px;
--hsf-default-background-banner__border-bottom-right-radius: 0px;
--hsf-default-background-banner__border-top-left-radius: 0px;
--hsf-default-background-banner__border-top-right-radius: 0px;
--hsf-default-field-dropdown-options__border-radius: var(--input-radius, 4px);
}
/* forms general */
@media (min-width: 48em) {
form {
font-size: 18px;
}
}
form label {
font: var(--label-font-style, normal) var(--label-font-weight, 600) var(--label-font-size, 0.75em)/var(--label-line-height, 1.2) var(--label-font-family, var(--font-family));
margin-block: var(--label-margin, 0 0.3em);
padding: var(--label-padding, 0);
}
form ul {
margin-left: 0;
padding-left: 0;
}
form ul li {
list-style-type: none;
}
form textarea {
min-height: 6em;
}
form fieldset {
border: 0;
margin: 0;
padding: 0;
}
input[type="button"],
input[type="submit"],
input[type="reset"] {
-webkit-appearance: none;
-webkit-border-radius: 0;
}
textarea,
input[type="text"],
input[type="file"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select, select:focus {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: rgb(var(--input-color-background));
border: var(--input-border-width, 1px) solid rgb(var(--input-border-color));
border-radius: var(--input-radius, 4px);
box-sizing: border-box;
color: rgb(var(--input-color-foreground));
display: inline-block;
font: var(--input-font-style, normal) var(--input-font-weight, normal) 0.9em var(--input-font-family, var(--font-family));
outline: none;
padding: var(--input-padding, 0.65em 0.85rem);
width: 100%;
}
input::placeholder,
textarea::placeholder,
select.is-placeholder {
color: rgb(var(--input-color-placeholder));
}
textarea:hover,
input[type="text"]:hover,
input[type="file"]:hover,
input[type="password"]:hover,
input[type="datetime"]:hover,
input[type="datetime-local"]:hover,
input[type="date"]:hover,
input[type="month"]:hover,
input[type="time"]:hover,
input[type="week"]:hover,
input[type="number"]:hover,
input[type="email"]:hover,
input[type="url"]:hover,
input[type="search"]:hover,
input[type="tel"]:hover,
input[type="color"]:hover,
select:hover, select:hover:hover {
box-shadow: 0 0 0 1px rgb(var(--input-border-color));
}
textarea:focus,
input[type="text"]:focus,
input[type="file"]:focus,
input[type="password"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus, select:focus:focus {
outline: none;
background-color: rgb(var(--input-color-background-focus));
border-color: rgb(var(--input-color-focus));
box-shadow: 0 0 0 2px rgb(var(--input-color-focus), 0.2);
}
@media (max-width: 48em) {
textarea,
input[type="text"],
input[type="file"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select, select:focus {
font-size: inherit !important;
}
}
input[type="file"] {
border-style: dashed;
}
input[type="file"],
input[type=file]::-webkit-file-upload-button {
cursor: pointer;
}
input[type="submit"], button {
border: none;
background-color: rgb(var(--color-primary));
color: rgb(var(--color-primary-contrast));
}
select {
background: rgb(var(--input-color-background)) url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEYAAABGCAAAAABURb1YAAAAl0lEQVRYw+3Uuw2AMAwE0Oy/jIsskDIFC1BSZAEmQCCE+Ji7REIIoUuZ4hX2ncP4yAtixIgRI0aMmE8zZWhiUired2/WxJjF4iqxicme0/s4mo3jAOV+xBcHKWBTJwcqaOEHByswNzuHKDh+m8MUkuLVoQorw+JwhXZqdrjCq5mtQqloeK5Qag5FV35+/cSIESNGjJhXmQnOvgEuVs+JLgAAAABJRU5ErkJggg==') no-repeat top right/contain;
background: rgb(var(--input-color-background)) url('data:image/svg+xml;utf8,') no-repeat top right/contain;
cursor: pointer;
}
.form-input {
display: flex;
flex-flow: column;
}
.form-input input + label {
order: -1;
}
/* lazy hubspot-form custom element */
hubspot-form {
--min-height: var(--min-height\@sm, 80px);
animation: none;
display: block;
min-height: var(--min-height);
}
@media (min-width: 768px) {
hubspot-form {
--min-height: var(--min-height\@md, 100px);
}
}
@media (min-width: 1025px) {
hubspot-form {
--min-height: var(--min-height\@lg, 100px);
}
}
hubspot-form:empty {
animation: var(--shimmer-animation);
background: var(--shimmer-background);
background-size: var(--shimmer-background-size);
}
hubspot-form[loaded] {
animation: none;
}
/* forms HubSpot */
hubspot-form,
.widget-type-form {
--color-background: var(--theme-form-background-base);
--color-foreground: var(--theme-form-foreground);
--background: var(--theme-form-background);
--color-accent: var(--theme-form-accent);
--color-accent-contrast: var(--theme-form-accent-contrast);
--link-color: rgb(var(--theme-form-accent));
display: block;
padding: var(--form-padding);
}
hubspot-form,
.widget-type-form,
.widget-type-form.inpage-editor-active-field,
.widget-type-form.inpage-editor-highlight-field {
background: var(--background);
border: var(--form-border-width, 0px) solid rgb(var(--form-border-color));
border-radius: var(--form-radius, var(--card-radius));
box-shadow: var(--form-shadow, none);
color: rgb(var(--color-foreground));
}
/* hs multi-step forms - erase inner padding on non-banner layout */
body .hsfc-Step:not([class*="hsfc-Step--layoutTemplate"]) .hsfc-Step__Content {
padding: 0;
}
/* form title */
.form-title {
margin-block: 0 0.75em;
}
.form-title:empty {
display: none;
}
/* inputs - beat down new hubspot form styles */
body .hs-form-html .hsfc-TextInput:hover,
body .hs-form-html .hsfc-TextareaInput:hover {
box-shadow: 0 0 0 1px rgb(var(--input-border-color));
}
body .hs-form-html .hsfc-TextInput:focus,
body .hs-form-html .hsfc-TextareaInput:focus {
border-color: rgb(var(--input-color-focus));
box-shadow: 0 0 0 2px rgb(var(--input-color-focus), 0.2);
}
/* non checkbox/radio labels */
.hs-form-field > label {
display: block;
}
/* make labels of radio/checkbox lists match input size */
form.hs-form .hs-fieldtype-radio > label,
form.hs-form .hs-fieldtype-checkbox > label,
.hsfc-Renderer .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
.hsfc-Renderer .hsfc-RadioFieldGroup > .hsfc-FieldLabel {
font:
var(--check-radio-legend-font-style, normal)
var(--check-radio-legend-font-weight, normal)
var(--check-radio-legend-font-size, 1em)/var(--check-radio-legend-line-height, var(--line-height))
var(--check-radio-legend-font-family, var(--font-family));
margin-block: var(--check-radio-legend-margin, 0 1em);
padding: 0;
}
/* vertical spacing */
form.hs-form .hs-fieldtype-textarea,
form.hs-form input[type="text"],
form.hs-form input[type="file"],
form.hs-form input[type="password"],
form.hs-form input[type="datetime"],
form.hs-form input[type="datetime-local"],
form.hs-form input[type="date"],
form.hs-form input[type="month"],
form.hs-form input[type="time"],
form.hs-form input[type="week"],
form.hs-form input[type="number"],
form.hs-form input[type="email"],
form.hs-form input[type="url"],
form.hs-form input[type="search"],
form.hs-form input[type="tel"],
form.hs-form input[type="color"],
form.hs-form select {
margin-block: var(--input-margin, 0 1em);
}
form.hs-form .hs-submit {
margin-block: var(--form-submit-margin, 1.65em 0);
}
form.hs-form .hs-button[type="submit"] {
font-size: var(--form-submit-font-size);
padding: var(--form-submit-padding);
}
form.hs-form fieldset {
margin: .75em 0;
max-width: 100%;
}
form.hs-form fieldset:has(input[type="hidden"]) {
margin-block: 0;
}
form.hs-form fieldset.form-columns-1 .hs-input:is(
textarea,
input[type="text"],
input[type="file"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"],
select
) {
width: 100%;
}
@media (max-width: 500px) {
form.hs-form fieldset {
margin: 0;
}
form.hs-form fieldset[class*="form-columns"] .hs-form-field {
float: none;
width: 100%;
}
form.hs-form fieldset[class*="form-columns"] .input,
form.hs-form fieldset[class*="form-columns"] textarea,
form.hs-form fieldset[class*="form-columns"] input[type="text"],
form.hs-form fieldset[class*="form-columns"] input[type="file"],
form.hs-form fieldset[class*="form-columns"] input[type="password"],
form.hs-form fieldset[class*="form-columns"] input[type="datetime"],
form.hs-form fieldset[class*="form-columns"] input[type="datetime-local"],
form.hs-form fieldset[class*="form-columns"] input[type="date"],
form.hs-form fieldset[class*="form-columns"] input[type="month"],
form.hs-form fieldset[class*="form-columns"] input[type="time"],
form.hs-form fieldset[class*="form-columns"] input[type="week"],
form.hs-form fieldset[class*="form-columns"] input[type="number"],
form.hs-form fieldset[class*="form-columns"] input[type="email"],
form.hs-form fieldset[class*="form-columns"] input[type="url"],
form.hs-form fieldset[class*="form-columns"] input[type="search"],
form.hs-form fieldset[class*="form-columns"] input[type="tel"],
form.hs-form fieldset[class*="form-columns"] input[type="color"],
form.hs-form fieldset[class*="form-columns"] select {
width: 100% !important;
margin-right: 0 !important;
}
form.hs-form .hs-button {
width: 100%;
}
}
form.hs-form .hs-richtext {
margin-top: 1.5em;
margin-bottom: 1.25em;
}
form.hs-form .hs-richtext > * {
margin-top: 0;
}
form.hs-form .hs-richtext p:last-child {
margin-bottom: 0;
}
form.hs-form .hs_recaptcha {
margin-bottom: 1em;
margin-top: 1em;
}
/* form notifications / messages */
form .inputs-list {
padding:0;
}
form .inputs-list.multi-container {
display: flex;
flex-direction: column;
gap: 0.3em;
}
form .hs-input.invalid.error {
border-color: rgb(var(--input-color-error));
box-shadow: 0 0 0 1px rgb(var(--input-color-error));
}
form .hs-input.invalid.error:focus {
border-color: rgb(var(--input-color-error));
box-shadow: 0 0 0 2px rgb(var(--input-color-error), 0.5);
}
.hs-error-msgs {
list-style-type: none;
}
/* error messages */
form .hs-error-msgs.inputs-list {
color: rgb(var(--theme-form-error));
font-weight: 400;
padding: 0 1rem 0 36px;
position: relative;
margin: -.3em 0 1em;
}
form .hs-error-msgs.inputs-list:before {
background-color: rgb(var(--theme-form-error));
border-radius: 50%;
color: rgb(var(--theme-form-error-contrast));
content: '!';
display: block;
font-size: 12px;
font-weight: 600;
height: 16px;
line-height: 16px;
position: absolute;
width: 16px;
left: 0.5rem;
text-align: center;
top: 50%;
transform: translateY(-50%);
vertical-align: middle;
}
.hsfc-ErrorAlert {
display: flex;
font-weight: 400;
gap: 0.5em;
}
.hsfc-ErrorAlert:before {
background-color: rgb(var(--theme-form-error));
border-radius: 50%;
color: rgb(var(--theme-form-error-contrast));
content: '!';
display: grid;
font-size: 12px;
font-weight: 600;
height: 16px;
line-height: 16px;
margin-block: calc(1em - 6px) 0;
place-content: center;
width: 16px;
}
form .hs-error-msgs.inputs-list label,
.hsfc-ErrorAlert {
font-size: 0.9em;
margin-bottom: 0;
}
/* hs checkbox/radio spacing */
.hs-fieldtype-booleancheckbox {
margin-block: var(--check-radio-grp-margin, 1.2em);
}
.hs-fieldtype-checkbox,
.hs-fieldtype-radio {
margin-block: var(--check-radio-grp-margin, 1.2em);
padding: var(--check-radio-grp-padding, 0);
}
/* hs textarea */
.hs-fieldtype-textarea > .input {
display: grid;
}
.hs-fieldtype-textarea .input::after {
content: attr(data-replicated-value) " ";
visibility: hidden;
white-space: pre-wrap;
}
.hs-fieldtype-textarea textarea {
overflow: hidden;
resize: none;
}
form.hs-form .hs-fieldtype-textarea textarea {
margin-block: 0;
}
/* Identical styling required!! */
.hs-form .hs-fieldtype-textarea textarea,
.hs-fieldtype-textarea .input::after {
appearance: none;
background-color: rgb(var(--input-color-background));
border: 1px solid rgb(var(--input-border-color));
border-radius: var(--input-radius, 4px);
box-sizing: border-box;
color: rgb(var(--input-color-foreground));
display: inline-block;
font: normal .9em/1.3 var(--body-font-family);
grid-area: 1 / 1 / 2 / 2;
min-height: 6em;
outline: none;
padding: var(--input-padding, 0.65em 0.85rem);
}
.hs-form .hs-fieldtype-textarea textarea:focus,
.hs-fieldtype-textarea .input:focus-within::after {
background-color: rgb(var(--input-color-background-focus));
border-color: rgb(var(--input-color-focus));
box-shadow: 0 0 0 2px rgb(var(--input-color-focus), 0.2);
}
/* hs phone */
body .hs-form-html .hsfc-PhoneInput__FlagAndCaret {
padding-block: 0;
}
body .hs-form-html .hsfc-PhoneInput__FlagAndCaret__Caret {
border-width: clamp(4px, 0.25em, 6px);
}
/* hs select */
.hs-fieldtype-select .input {
background-color: rgb(var(--input-color-background));
margin-block: var(--input-margin, 0 1em);
position: relative;
}
.hs-fieldtype-select .input:focus-within {
background-color: rgb(var(--input-color-background-focus));
}
body .hs-form-html .hsfc-DropdownInput__Caret,
.hs-fieldtype-select .input::before {
aspect-ratio: 1;
background-color: rgb(var(--input-color-foreground));
content: '';
mask-image: url('data:image/svg+xml;utf8,');
mask-image: var(--dropdown-icon);
mask-size: var(--dropdown-icon-size, 0.7em);
mask-repeat: no-repeat;
mask-position: center;
/* no-repeat top right/contain; */
height: 100%;
inset: 0 0 auto auto;
position: absolute;
}
form.hs-form .hs-fieldtype-select select {
background: transparent;
margin-block: 0;
position: relative;
}
/* legal consent */
.legal-consent-container .hs-richtext,
body .hsfc-DataPrivacyField .hsfc-RichText {
font-size: 13px;
}
body .legal-consent-container .hs-form-booleancheckbox-display > span {
margin-left: 0;
}
/* hs membership */
#hs-membership-form a[class*='show-password'] {
font-size: 0.75em;
}
/* forms checkboxes - general */
/* style checkbox */
input[type="checkbox"] {
accent-color: rgb(var(--input-color-accent));
appearance: none;
background: rgb(var(--input-color-background));
border: min(var(--input-border-width, 1px), 3px) solid rgb(var(--input-border-color));
border-radius: min(3px, var(--input-radius, 4px));
cursor: pointer;
font-size: inherit;
grid-area: checkbox;
height: var(--check-radio-size);
margin: calc(
.5em * var(--check-radio-line-height, 1.5) - (var(--check-radio-size) / 2)
) 0 0 0;
outline-offset: 6px;
position: relative;
transition: .2s;
width: var(--check-radio-size);
}
input[type="checkbox"]:focus {
box-shadow: none!important;
}
input[type="checkbox"]:hover {
box-shadow: 0 0 0 1px rgb(var(--color-accent))!important;
}
/* checkbox check */
input[type="checkbox"]::after {
aspect-ratio: 15 / 32;
background-color: transparent!important;
border: solid rgb(var(--color-accent-contrast));
border-width: 0 min(var(--check-radio-size) / 10, 4px) min(var(--check-radio-size) / 10, 4px) 0;
content: '';
height: 70%;
inset: 10% auto auto 33%!important; /* important to override new form editor styles */
-webkit-mask: none!important; /* important to override new form editor styles */
mask: none!important; /* important to override new form editor styles */
opacity: 0;
position: absolute;
transform: rotate(40deg);
transition: inherit;
}
/* disabled */
label:has(input[type="checkbox"]:disabled),
input[type="checkbox"]:disabled + :is(span, label) {
color: rgb(var(--theme-form-disabled))!important;
cursor: not-allowed;
opacity: var(--theme-form-disabled-opacity, 60%);
}
input[type="checkbox"]:disabled {
background: rgb(var(--theme-form-disabled));
border: var(--input-border-width, 1px) solid rgb(var(--theme-form-disabled));
}
/* hover */
.form-checkbox:hover input[type="checkbox"],
.hs-form-checkbox-display:hover input[type="checkbox"],
.hs-form-booleancheckbox-display:hover input[type="checkbox"] {
border-color: rgb(var(--theme-form-focus));
}
/* focus/checked */
input[type="checkbox"]:focus {
background-color: rgb(var(--theme-form-focus), .1);
border-color: rgb(var(--theme-form-focus));
}
input[type="checkbox"]:checked {
background-color: rgb(var(--color-accent));
border-color: rgb(var(--color-accent));
}
input[type="checkbox"]:checked::after {
opacity: 1;
}
label:has(input[type="checkbox"]:is(:focus-visible, :checked, :hover)),
input[type="checkbox"]:is(:focus-visible, :checked, :hover) + span {
color: rgb(var(--input-color-accent));
}
/* options list */
.form-checkboxes {
display: flex;
flex-flow: column;
gap: 0.3em;
}
/* label or checkbox wrapper */
.form-checkbox,
.hs-form-checkbox-display,
.hs-form-booleancheckbox-display,
.hsfc-Renderer .hsfc-CheckboxField .hsfc-FieldLabel,
.hsfc-Renderer .hsfc-CheckboxFieldGroup .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel {
cursor: pointer;
display: grid;
font:
var(--check-radio-font-weight, normal)
var(--check-radio-font-style, normal)
var(--check-radio-font-size, 1em) / var(--check-radio-line-height, 1.5)
var(--check-radio-font-family, var(--font-family));
gap: 0.75em;
grid-template: 'checkbox label' auto / var(--check-radio-size) 1fr;
margin: 0;
padding: 0;
position: relative;
transition: .2s;
}
.form-checkbox label {
cursor: pointer;
font: inherit;
transition: inherit;
}
.hs-form-checkbox-display span,
.hs-form-booleancheckbox-display span {
transition: inherit;
}
/* style radio */
input[type="radio"] {
accent-color: rgb(var(--color-accent));
aspect-ratio: 1;
appearance: none;
background: rgb(var(--input-color-background));
border: min(var(--input-border-width, 1px), 3px) solid rgb(var(--input-border-color));
border-radius: 50%;
cursor: pointer;
font-size: inherit;
grid-area: radio;
margin: calc(
.5em * var(--check-radio-line-height, 1.5) - (var(--check-radio-size) / 2)
) 0 0 0;
outline-offset: 6px;
position: relative;
transition: .2s;
width: var(--check-radio-size);
}
input[type="radio"]:focus {
box-shadow: none!important;
}
input[type="radio"]:hover {
box-shadow: 0 0 0 1px rgb(var(--color-accent))!important;
}
/* radio inner circle */
input[type="radio"]::after {
aspect-ratio: 1;
background: rgb(var(--color-accent))!important;
border-radius: inherit;
content: '';
height: 64%;
inset: 18%!important; /* important to override new form editor styles */
-webkit-mask: none!important; /* important to override new form editor styles */
mask: none!important; /* important to override new form editor styles */
opacity: 0;
position: absolute;
scale: 0;
transition: inherit;
}
/* disabled */
label:has(input[type="radio"]:disabled),
input[type="radio"]:disabled + :is(span, label) {
color: rgb(var(--theme-form-disabled))!important;
cursor: not-allowed;
opacity: 0.6;
}
input[type="radio"]:disabled {
background: rgb(var(--theme-form-disabled));
border: var(--input-border-width, 1px) solid rgb(var(--theme-form-disabled));
}
/* hover */
.form-radio:hover input[type="radio"],
.hs-form-radio-display:hover input[type="radio"],
.hs-form-booleanradio-display:hover input[type="radio"] {
border-color: rgb(var(--theme-form-focus));
}
/* focus/checked */
input[type="radio"]:focus {
border-color: rgb(var(--theme-form-focus));
}
input[type="radio"]:checked {
background: rgb(var(--input-color-background));
border-color: rgb(var(--color-accent));
}
input[type="radio"]:checked::after {
opacity: 1;
scale: 1;
}
label:has(input[type="radio"]:is(:focus-visible, :checked, :hover)),
input[type="radio"]:is(:focus-visible, :checked, :hover) + span {
color: rgb(var(--color-accent));
}
/* options list */
.form-radios {
display: flex;
flex-flow: column;
gap: 0.3em;
}
/* label or radio wrapper */
.form-radio,
.hs-form-radio-display,
.hsfc-Renderer .hsfc-RadioFieldGroup .hsfc-RadioFieldGroup__Options .hsfc-FieldLabel {
cursor: pointer;
display: grid;
font:
var(--check-radio-font-weight, normal)
var(--check-radio-font-style, normal)
var(--check-radio-font-size, 1em) / var(--check-radio-line-height, 1.5)
var(--check-radio-font-family, var(--font-family));
gap: 0.75em;
grid-template: 'radio label' auto / var(--check-radio-size) 1fr;
margin: 0;
padding: 0;
position: relative;
transition: .2s;
}
.form-radio label {
cursor: pointer;
font: inherit;
transition: inherit;
}
.hs-form-radio-display span {
transition: inherit;
}
/* scrap these styles on labels with button class */
[type="radio"] + label.button,
[type="radio"] + label.button,
[type="radio"] + span.button,
[type="radio"] + span.button {
padding: var(--btn-spacing-y) var(--btn-spacing-x);
}
[type="radio"] + label.button:before,
[type="radio"] + label.button:after,
[type="radio"] + span.button:before,
[type="radio"] + span.button:after {
display: none;
}
.radio-btn-group {
/* border: 1px solid rgb(var(--input-border-color)); */
/* border-radius: var(--btn-radius); */
display: flex;
gap: var(--btn-border-width);
/* padding: var(--btn-border-width); */
}
.radio-btn-group input:checked + label.button,
input:checked + .radio-btn-group label.button {
background-color: rgb(var(--btn-accent-color));
color: rgb(var(--btn-accent-contrast-color));
}
.form--one-line form {
display: flex;
justify-content: space-around;
align-items: flex-end;
}
.form--one-line form .hs_email {
flex: auto;
position: relative;
}
.form--one-line form .hs-error-msgs.inputs-list {
position: absolute;
right: 0;
top: 0;
margin: 0 !important;
}
.form--one-line form .hs-error-msgs.inputs-list * {
margin: 0 !important;
}
.form--one-line form .hs_submit input[type="submit"] {
font-size: 1.2em;
}
.form--one-line form input[type="email"],
.form--one-line form input[type="text"],
.form--one-line form input[type="submit"],
.form--one-line form button {
height: 50px;
padding-top: 0;
line-height: 50px;
padding-bottom: 0;
margin: 0 !important;
}
.form--checkboxes-inline .multi-container li.hs-form-checkbox {
display: inline-block;
}
.form--checkboxes-inline .multi-container li.hs-form-checkbox label {
display: inline-block;
}
.form--checkboxes-inline .multi-container li.hs-form-checkbox label span {
padding-left: 23px;
margin-right: 25px;
}
.form--checkboxes-2-col .multi-container {
display: inline-block;
column-count: 2;
column-gap: 1.5em;
}
.form--checkboxes-2-col .multi-container li.hs-form-checkbox label span {
padding-left: 23px;
margin-right: 25px;
}
.form--radios-inline .multi-container li.hs-form-radio {
display: inline-block;
}
.form--radios-inline .multi-container li.hs-form-radio label {
display: inline-block;
}
.form--radios-inline .multi-container li.hs-form-radio label span {
padding-left: 26px;
margin-right: 20px;
}
@media (min-width:768px) {
.radio_inline.with_label .hs-fieldtype-radio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom:1em;
}
.radio_inline.with_label .hs-fieldtype-radio .input {
flex: 2 0 auto;
text-align: right;
}
.radio_inline.with_label .hs-fieldtype-radio label {
flex: 1 2 auto;
}
}
.radio_inline.with_label .hs-fieldtype-radio {
margin-bottom:1em;
}
.radio_inline.with_label .hs-fieldtype-radio ul {
margin:0;
}
.form--radios-2-col .multi-container {
display: inline-block;
column-count: 2;
column-gap: 1.5em;
}
.form--radios-2-col .multi-container li.hs-form-radio label span {
padding-left: 26px;
margin-right: 20px;
}
/* ==========================================================================
Buttons
========================================================================== */
/* buttons general */
button,
.button,
.hs-button,
input[type="submit"],
input[type="button"] {
-webkit-appearance: none;
border-radius: var(--btn-radius);
box-shadow: var(--btn-shadow);
color: inherit;
cursor: pointer;
display: inline-block;
font: var(--btn-font);
justify-content: center;
letter-spacing: var(--btn-letter-spacing);
line-height: 1;
padding: var(--btn-spacing-y, 0.65em) var(--btn-spacing-x, 0.9rem);
text-align: center;
text-decoration: var(--btn-text-decoration);
text-transform: var(--btn-text-transform);
transition: all 0.2s ease-in-out;
}
.button {
align-items: center;
display: inline-flex;
gap: 0.5em;
}
.buttons,
.button-wrap {
--buttons-gap-x: 1rem;
--buttons-gap-y: .5rem;
display: inline-flex;
flex-flow: row wrap;
gap: var(--buttons-gap-y) var(--buttons-gap-x);
overflow: visible;
}
.button-wrap {
align-items: center;
width: 100%;
}
button,
.button {
background-color: transparent;
}
button:hover,
.button:hover,
.hs-button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
opacity: 1;
transition: all 0.2s ease-in-out;
}
button:focus,
.button:focus,
.hs-button:focus,
input[type="submit"]:focus,
input[type="button"]:focus {
text-decoration:none;
}
modal-opener .button {
width: 100%;
}
/* buttons sizing */
.button--small {
--btn-spacing-x: var(--btn-sm-spacing-x, 0.7rem);
--btn-spacing-y: var(--btn-sm-spacing-y, 0.5em);
font-size: var(--btn-sm-font-size, 0.75rem);
}
.button--large {
--btn-spacing-x: var(--btn-lg-spacing-x, 1.8rem);
--btn-spacing-y: var(--btn-lg-spacing-y, 0.9em);
font-size: var(--btn-lg-font-size, 0.85rem);
}
.button--larger {
--btn-spacing-x: var(--btn-xl-spacing-x, 1.95rem);
--btn-spacing-y: var(--btn-xl-spacing-y, 1.15em);
font-size: var(--btn-xl-font-size, 0.875rem);
}
.button--full-width {
width: 100%;
flex-grow: 1;
}
.button--unstyled {
border-radius: 0;
border: none;
box-shadow: none;
padding: 0;
}
.button--unstyled:hover,
.button--unstyled:focus {
text-decoration: underline;
}
.button--inherit {
padding: inherit;
margin: inherit;
text-align: inherit;
border: inherit;
font: inherit;
color: inherit;
text-decoration: inherit;
border-radius: inherit;
background-color: inherit;
letter-spacing: inherit;
}
.button__text {
position: relative;
}
/* button color themes */
.button,
.hs-button,
.hsfc-Button,
input[type='submit'],
input[type='button'] {
--btn-accent-color: var(--color-accent);
--btn-accent-contrast-color: var(--color-accent-contrast);
--btn-accent: rgb(var(--btn-accent-color));
/* background-color: rgb(var(--btn-accent-color)); */
background: var(--btn-accent);
border-color: rgb(var(--btn-accent-color));
color: rgb(var(--btn-accent-contrast-color));
outline-color: rgb(var(--btn-accent-color));
}
.button:hover,
.hs-button:hover,
.hsfc-Button:hover,
input[type='submit']:hover,
input[type='button']:hover {
outline: 2px solid rgb(var(--btn-accent-color), 0.5);
outline-offset: 2px;
}
.button--underlined:hover,
.button--unstyled:hover {
outline: none;
}
.button:focus-visible,
.hs-button:focus-visible,
.hsfc-Button:focus-visible,
input[type='submit']:focus-visible,
input[type='button']:focus-visible {
outline-offset: 3px;
}
.button--primary {
--btn-accent-color: var(--color-primary);
--btn-accent-contrast-color: var(--color-primary-contrast);
}
.button--secondary {
--btn-accent-color: var(--color-secondary);
--btn-accent-contrast-color: var(--color-secondary-contrast);
}
.button--tertiary {
--btn-accent-color: var(--color-tertiary);
--btn-accent-contrast-color: var(--color-tertiary-contrast);
}
.button--black {
--btn-accent-color: var(--color-black);
--btn-accent-contrast-color: var(--color-white);
}
.button--dark {
--btn-accent-color: var(--color-dark);
--btn-accent-contrast-color: var(--color-white);
}
.button--light {
--btn-accent-color: var(--color-light);
--btn-accent-contrast-color: var(--color-black);
}
.button--white {
--btn-accent-color: var(--color-white);
--btn-accent-contrast-color: var(--color-black);
}
.button--foreground {
--btn-accent-color: var(--color-foreground);
--btn-accent-contrast-color: var(--color-background);
}
.hsfc-Button[type="button"]:not(:only-child):first-child,
.button--outlined {
/* background-color: transparent; */
background: transparent;
box-shadow: inset 0 0 0 var(--btn-border-width) rgb(var(--btn-accent-color)), var(--btn-shadow);
color: rgb(var(--btn-accent-color));
}
.hsfc-Button[type="button"]:not(:only-child):first-child:is(:hover, :focus),
.button--outlined:is(:hover, :focus) {
/* background-color: rgb(var(--btn-accent-color)); */
background: var(--btn-accent);
color: rgb(var(--btn-accent-contrast-color));
}
.hsfc-Button[type="button"]:not(:only-child):first-child::before,
.button--outlined::before {
background: var(--btn-accent);
border-radius: var(--btn-radius);
/* no content (added if gradient values - see below) */
inset: 0;
-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite: xor;
mask-composite: exclude;
padding: var(--btn-border-width);
position: absolute;
transition: 0.2s ease-in-out;
}
.button--unstyled {
background: transparent !important;
color: rgb(var(--btn-accent-color));
}
.button--unstyled:hover {
color: rgb(var(--btn-accent-color), 0.85);
}
/* gradients */
/********************************************************
* button with icon
********************************************************/
.button--icon {
--btn-text-compensation-margin: 0;
--btn-text-compensation-padding: calc(var(--btn-spacing-x) / 2.5);
--btn-icon-fill: currentColor;
--btn-icon-fill-interaction: currentColor;
--btn-icon-size: 1em;
gap: var(--btn-icon-gap, 0.75em);
position: relative;
}
/* icon position */
.button--icon-right {
flex-direction: row-reverse;
}
.button--icon-right .button__icon {
order: 0; /* Hubspot payment button module will mess up ours without this */
}
/* icon */
.button__icon {
display: block;
position: relative;
width: var(--btn-icon-size);
}
.button__icon i,
.button__icon svg {
display: block;
height: var(--btn-icon-size);
fill: var(--btn-icon-fill);
left: 0;
/* object-fit: contain; */
position: absolute;
top: calc(var(--btn-icon-size) / -2);
width: var(--btn-icon-size);
}
.button__icon i {
background-color: var(--btn-icon-fill);
mask: var(--icon-mask) no-repeat 0 0 /100% 100%;
-webkit-mask: var(--icon-mask) no-repeat 0 0 /100% 100%;
}
.button--icon:hover .button__icon svg {
fill: var(--btn-icon-fill-interaction);
}
.button--icon:hover .button__icon i {
background-color: var(--btn-icon-fill-interaction);
}
/* translate button inner content with awkward spacing an icon brings */
.button--icon .button__icon,
.button--icon .button__text {
translate: -0.55em 0;
}
.button--icon-circled .button__icon,
.button--icon-circled .button__text,
.button--icon.button--icon-right .button__icon,
.button--icon.button--icon-right .button__text {
translate: 0;
}
/* circled icon */
.button--icon-circled {
--btn-icon-bg: currentColor;
--btn-icon-bg-interaction: currentColor;
--btn-icon-fill: rgb(var(--btn-accent-color));
--btn-icon-fill-interaction: rgb(var(--btn-accent-color));
}
.button--icon-circled.button--outlined {
--btn-icon-fill: rgb(var(--btn-accent-contrast-color));
}
.button--icon-circled .button__icon {
aspect-ratio: 1/1;
background-color: var(--btn-icon-bg);
border-radius: 50%;
display: block;
height: calc(100% - var(--btn-border-width, 1px) * 4);
left: calc(var(--btn-border-width, 1px) * 2);
position: absolute;
top: calc(var(--btn-border-width, 1px) * 2);
width: auto;
}
.button--icon-right.button--icon-circled .button__icon {
left: auto;
right: calc(var(--btn-border-width, 1px) * 2);
}
.button--icon-circled .button__icon i,
.button--icon-circled .button__icon svg {
left: 50%;
margin: 0;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
}
.button--icon-circled .button__icon svg {
fill: var(--btn-icon-fill);
}
.button--icon-circled .button__icon + .button__text {
padding-left: var(--btn-text-compensation-padding);
margin-left: var(--btn-text-compensation-margin);
}
.button--icon-right.button--icon-circled .button__icon + .button__text {
margin-left: 0;
margin-right: var(--btn-text-compensation-margin);
padding-left: 0;
padding-right: var(--btn-text-compensation-padding);
}
.button--icon-circled.button--icon-pulsating .button__icon::before,
.button--icon-circled.button--icon-pulsating .button__icon::after {
animation: pulse-1 2.6s cubic-bezier(0.25, 0.9, 0.2, 1) 0.4s infinite;
animation: pulse-2 2.6s cubic-bezier(0.25, 0.9, 0.2, 1) 0.4s infinite;
border: var(--play-pulser-ring-size, 2px) solid rgb(var(--btn-accent-color));
border-radius: 50%;
content: '';
display: block;
height: 100%;
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: scale(0.35) translateY(-50%) translateX(-50%);
width: 100%;
}
@media (prefers-reduced-motion) {
.button--icon-circled.button--icon-pulsating .button__icon::before,
.button--icon-circled.button--icon-pulsating .button__icon::after {
animation: none !important;
}
}
.button--icon-circled.button--icon-pulsating .button__icon::after {
animation: pulse-2 2.6s cubic-bezier(0.25, 0.9, 0.2, 1) 0s infinite;
}
.button--icon-circled.button--icon-pulsating:hover .button__icon::before {
animation: none;
transform: scale(1.1);
}
/* .button--icon-circle:hover .play-pulser__icon-wrap {
transform: scale(0.99);
} */
/* outlined combo */
.button--icon-circled:hover .button__icon {
background-color: var(--btn-icon-bg-interaction);
}
.button--icon-circled:hover .button__icon svg {
fill: var(--btn-icon-fill-interaction);
}
/********************************************************
* button arrows
* markup should be:
```
The cta here
```
********************************************************/
.button--arrow {
--arrow-width: 1.3em;
--arrow-thickness: 2px;
--arrow-head-size: 8px;
position: relative;
padding-right: calc(var(--arrow-width) + var(--btn-spacing-x) + 1em);
}
.button--arrow .button__text {
display: block;
position: relative;
transition: .2s transform ease-in-out;
}
.button__arrow:before, .button__arrow:after {
content: '';
display: block;
position: absolute;
right: var(--btn-spacing-x);
top: 50%;
transition: .2s transform ease-in-out;
}
.button__arrow:before {
background-color: currentColor;
height: var(--arrow-thickness);
transform: translateY(-50%);
transform-origin: right center;
width: var(--arrow-width, 1.3em);
}
.button__arrow:after {
border: solid currentColor;
border-width: var(--arrow-thickness) var(--arrow-thickness) 0px 0;
height: var(--arrow-head-size);
transform: translate(0%,-50%) rotate(45deg);
transform-origin: center;
width: var(--arrow-head-size);
}
.button--arrow:hover .button__text {
transform: translateX(10px) !important;
}
.button--arrow:hover .button__arrow:before {
transform: translate(0, -50%) scaleX(0.8);
}
/*********************************************************
* buttons arrows markup should be:
```
```
*********************************************************/
/* pulsator animations */
@keyframes pulse-1 {
0% {
transform: translate3d(-50%, -50%, 0) scale(1);
opacity: 1;
}
100% {
transform: translate3d(-50%, -50%, 0) scale(1.7);
opacity: 0;
}
}
@keyframes pulse-2 {
0% {
transform: translate3d(-50%, -50%, 0) scale(1);
opacity: .5;
}
100% {
transform: translate3d(-50%, -50%, 0) scale(1.7);
opacity: 0;
}
}
/* play pulser parent el */
.play-pulser {
--play-pulser-size: 42px;
--play-pulser-ring-size: 2px;
--play-pulser-outline-size: 2px;
--play-pulser-icon-size: calc(var(--play-pulser-size) * .25);
border-radius: 5em;
box-shadow: none;
padding: 2px;
text-decoration: none;
}
@media (min-width: 1024px) {
.play-pulser {
--play-pulser-size: 52px;
}
.play-pulser:not(.button--outlined),
.play-pulser:not(.button--outlined):hover,
.play-pulser:not(.button--outlined):focus {
background: transparent;
border: none;
padding: 0;
}
}
/* pulsating circles */
.play-pulser__circles {
display: inline-block;
height: var(--play-pulser-size, 42px);
position: relative;
transition: all 0.4s cubic-bezier(0.19, 1, 0.22, 1) 0s;
vertical-align: middle;
width: var(--play-pulser-size, 42px);
}
@media (min-width: 1024px) {
.play-pulser__circles {
height: var(--play-pulser-size, 52px);
width: var(--play-pulser-size, 52px);
}
}
.play-pulser__circles:before {
backface-visibility: hidden;
}
.play-pulser__circles:before,
.play-pulser__circles:after {
animation: pulse-1 2.6s cubic-bezier(0.25, 0.9, 0.2, 1) 0.4s infinite;
animation: pulse-2 2.6s cubic-bezier(0.25, 0.9, 0.2, 1) 0.4s infinite;
background: rgb(var(--btn-accent-color), 0.2);
border: var(--play-pulser-ring-size, 2px) solid rgb(var(--btn-accent-color));
border-radius: 50%;
content: '';
display: block;
height: var(--play-pulser-size, 52px);
left: 50%;
opacity: 0;
position: absolute;
top: 50%;
transform: scale(0.35) translateY(-50%) translateX(-50%);
width: var(--play-pulser-size, 52px);
}
@media (prefers-reduced-motion) {
.play-pulser__circles:before,
.play-pulser__circles:after {
animation: none !important;
}
}
.play-pulser__circles:after {
animation: pulse-2 2.6s cubic-bezier(0.25, 0.9, 0.2, 1) 0s infinite;
}
.play-pulser:not(.button--outlined):hover .play-pulser__circles {
transform: scale(1.15);
}
.play-pulser:not(.button--outlined):hover .play-pulser__icon-wrap {
transform: scale(0.99);
}
/* the play (triangle) icon */
.play-pulser svg {
display: block;
fill: rgb(var(--btn-accent-contrast-color));
left: 50%;
position: absolute;
top: 50%;
transform: translate(-40%, -50%);
width: var(--play-pulser-icon-size, 20px);
}
.play-pulser.button--outlined:hover svg {
fill: rgb(var(--btn-accent-color));
}
/* play icon circle wrap */
.play-pulser__icon-wrap {
background-color: rgb(var(--btn-accent-color));
border-radius: 50%;
border: var(--play-pulser-outline-size, 2px) solid rgb(var(--btn-accent-contrast-color));
display: block;
height: 100%;
position: relative;
width: 100%;
z-index: 1;
}
.play-pulser.button--outlined .play-pulser__icon-wrap {
border: none;
}
.play-pulser.button--outlined:hover .play-pulser__icon-wrap {
background-color: rgb(var(--btn-accent-contrast-color));
}
@media (min-width: 1024px) {
.play-pulser__icon-wrap {
border: none;
}
.play-pulser__icon-wrap--outlined {
background: transparent !important;
border: var(--play-pulser-outline-size, 2px) solid currentColor !important;
}
.play-pulser__icon-wrap--outlined svg {
fill: currentColor !important;
}
}
/* play button inlined text */
.play-pulser__text {
display: inline-block;
margin: 0 calc(var(--play-pulser-size, 52px) * .5) 0 calc(var(--play-pulser-size, 52px) * .25);
vertical-align: middle;
}
@media (min-width: 1024px) {
.play-pulser:not(.button--outlined) .play-pulser__text {
color: rgb(var(--btn-accent-color));
}
}