/* Theme base styles */
/* Generic */
*, *:before, *:after {
box-sizing: border-box;
}
html {
line-height: 1.15;
-webkit-text-size-adjust: 100%;
}
body {
margin: 0;
}
main {
display: block;
}
h1 {
font-size: 2em;
margin: 0.67em 0;
}
hr {
box-sizing: content-box;
height: 0;
overflow: visible;
}
pre {
font-family: monospace, monospace;
font-size: 1em;
}
a {
background-color: transparent;
}
abbr[title] {
border-bottom: none;
text-decoration: underline;
text-decoration: underline dotted;
}
b,
strong {
font-weight: bolder;
}
code,
kbd,
samp {
font-family: monospace, monospace;
font-size: 1em;
}
small {
font-size: 80%;
}
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
img {
border-style: none;
}
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
font-size: 100%;
line-height: 1.15;
margin: 0;
}
button,
input {
overflow: visible;
}
button,
select {
text-transform: none;
}
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
fieldset {
padding: 0.35em 0.75em 0.625em;
}
legend {
box-sizing: border-box;
color: inherit;
display: table;
max-width: 100%;
padding: 0; /* 3 */
white-space: normal;
}
progress {
vertical-align: baseline;
}
textarea {
overflow: auto;
}
[type="checkbox"],
[type="radio"] {
box-sizing: border-box;
padding: 0;
}
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
[type="search"] {
-webkit-appearance: textfield;
outline-offset: -2px;
}
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
::-webkit-file-upload-button {
-webkit-appearance: button;
font: inherit;
}
details {
display: block;
}
summary {
display: list-item;
}
template {
display: none;
}
[hidden] {
display: none;
}
/* Objects */
/* Responsive grid */
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.127659574%;
*margin-left: 2.0744680846382977%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 99.99999998999999%;
*width: 99.94680850063828%;
}
.row-fluid .span11 {
width: 91.489361693%;
*width: 91.4361702036383%;
}
.row-fluid .span10 {
width: 82.97872339599999%;
*width: 82.92553190663828%;
}
.row-fluid .span9 {
width: 74.468085099%;
*width: 74.4148936096383%;
}
.row-fluid .span8 {
width: 65.95744680199999%;
*width: 65.90425531263828%;
}
.row-fluid .span7 {
width: 57.446808505%;
*width: 57.3936170156383%;
}
.row-fluid .span6 {
width: 48.93617020799999%;
*width: 48.88297871863829%;
}
.row-fluid .span5 {
width: 40.425531911%;
*width: 40.3723404216383%;
}
.row-fluid .span4 {
width: 31.914893614%;
*width: 31.8617021246383%;
}
.row-fluid .span3 {
width: 23.404255317%;
*width: 23.3510638276383%;
}
.row-fluid .span2 {
width: 14.89361702%;
*width: 14.8404255306383%;
}
.row-fluid .span1 {
width: 6.382978723%;
*width: 6.329787233638298%;
}
.container-fluid {
*zoom: 1;
}
.container-fluid:before, .container-fluid:after {
display: table;
content: "";
}
.container-fluid:after {
clear: both;
}
@media (max-width: 767px) {
.row-fluid {
width: 100%;
}
.row-fluid [class*="span"] {
display: block;
float: none;
width: auto;
margin-left: 0;
}
}
@media (min-width: 768px) and (max-width: 1139px) {
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.762430939%;
*margin-left: 2.709239449638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 99.999999993%;
*width: 99.9468085036383%;
}
.row-fluid .span11 {
width: 91.436464082%;
*width: 91.38327259263829%;
}
.row-fluid .span10 {
width: 82.87292817100001%;
*width: 82.8197366816383%;
}
.row-fluid .span9 {
width: 74.30939226%;
*width: 74.25620077063829%;
}
.row-fluid .span8 {
width: 65.74585634900001%;
*width: 65.6926648596383%;
}
.row-fluid .span7 {
width: 57.182320438000005%;
*width: 57.129128948638304%;
}
.row-fluid .span6 {
width: 48.618784527%;
*width: 48.5655930376383%;
}
.row-fluid .span5 {
width: 40.055248616%;
*width: 40.0020571266383%;
}
.row-fluid .span4 {
width: 31.491712705%;
*width: 31.4385212156383%;
}
.row-fluid .span3 {
width: 22.928176794%;
*width: 22.874985304638297%;
}
.row-fluid .span2 {
width: 14.364640883%;
*width: 14.311449393638298%;
}
.row-fluid .span1 {
width: 5.801104972%;
*width: 5.747913482638298%;
}
}
@media (min-width: 1280px) {
.row-fluid {
width: 100%;
*zoom: 1;
}
.row-fluid:before, .row-fluid:after {
display: table;
content: "";
}
.row-fluid:after {
clear: both;
}
.row-fluid [class*="span"] {
display: block;
float: left;
width: 100%;
min-height: 1px;
margin-left: 2.564102564%;
*margin-left: 2.510911074638298%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
.row-fluid [class*="span"]:first-child {
margin-left: 0;
}
.row-fluid .span12 {
width: 100%;
*width: 99.94680851063829%;
}
.row-fluid .span11 {
width: 91.45299145300001%;
*width: 91.3997999636383%;
}
.row-fluid .span10 {
width: 82.905982906%;
*width: 82.8527914166383%;
}
.row-fluid .span9 {
width: 74.358974359%;
*width: 74.30578286963829%;
}
.row-fluid .span8 {
width: 65.81196581200001%;
*width: 65.7587743226383%;
}
.row-fluid .span7 {
width: 57.264957265%;
*width: 57.2117657756383%;
}
.row-fluid .span6 {
width: 48.717948718%;
*width: 48.6647572286383%;
}
.row-fluid .span5 {
width: 40.170940171000005%;
*width: 40.117748681638304%;
}
.row-fluid .span4 {
width: 31.623931624%;
*width: 31.5707401346383%;
}
.row-fluid .span3 {
width: 23.076923077%;
*width: 23.0237315876383%;
}
.row-fluid .span2 {
width: 14.529914530000001%;
*width: 14.4767230406383%;
}
.row-fluid .span1 {
width: 5.982905983%;
*width: 5.929714493638298%;
}
}
/* Clearfix */
.clearfix {
*zoom: 1;
}
.clearfix:before, .clearfix:after {
display: table;
content: "";
}
.clearfix:after {
clear: both;
}
/* Visibilty Classes */
.hide {
display: none;
}
.show {
display: block;
}
.invisible {
visibility: hidden;
}
.hidden {
display: none;
visibility: hidden;
}
/* Responsive Visibilty Classes */
.visible-phone {
display: none !important;
}
.visible-tablet {
display: none !important;
}
.hidden-desktop {
display: none !important;
}
@media (max-width: 767px) {
.visible-phone {
display: inherit !important;
}
.hidden-phone {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important;
}
}
@media (min-width: 768px) and (max-width: 1139px) {
.visible-tablet {
display: inherit !important;
}
.hidden-tablet {
display: none !important;
}
.hidden-desktop {
display: inherit !important;
}
.visible-desktop {
display: none !important ;
}
}
/* Content wrappers for blog post and system templates */
.content-wrapper {
margin: 0 auto;
}
/* Drag and drop layout styles */
.dnd-section > .row-fluid {
margin: 0 auto;
}
@media (max-width: 767px) {
.dnd-section .dnd-column {
padding: 0;
}
}
@media (max-width: 1580px) {
.content-wrapper {
margin: 0 auto;
padding: 0 24px;
}
}
/* Elements */
/* Article */
.card{
overflow: clip;
position: relative;
display: flex;
flex-direction: column;
height: 100%;
}
.card.card--hide{
display: none;
}
.card__image{
height: 320px;
max-height: 320px;
width: 100%;
overflow: clip;
position: relative;
margin-bottom: 32px;
}
.card__image img{
width: 100%;
height: 100%;
position: absolute;
transform: scale(1);
top: 0;
left: 0;
object-fit: cover;
object-position: center;
transition: var(--transition);
}
.card:hover .card__image img{
transform: scale(1.1);
}
.card__content{
display: flex;
flex-direction: column;
flex-grow: 1;
gap: 24px;
transition: var(--transition);
}
.card__tags{
display: flex;
flex-direction: row;
}
.card-tag{
color: var(--blue);
transition: var(--transition);
margin-bottom: 0px;
}
.card:hover .card-tag{
text-decoration: underline;
text-underline-offset: 4px;
}
.card-date{
color: var(--dark-grey);
}
.card__header{
display: flex;
flex-direction: row;
justify-content: space-between;
gap: 32px;
flex-wrap: wrap;
}
.card__content h4 {
margin-bottom: 0px;
color: var(--off-black);
display: inline;
-webkit-box-decoration-break: clone;
box-decoration-break: clone;
text-decoration: underline;
text-decoration-thickness: 2px;
text-underline-offset: 4px;
text-decoration-color: rgba(255, 122, 45, 0);
transition: var(--transition);
}
.card:hover .card__content h4{
color: var(--orange);
text-decoration-color: rgba(255, 122, 45, 1);
}
.card__content p:last-of-type{
margin-bottom: 0px;
}
.card:hover .text-cta{
gap: 20px;
}
/* Resource Card */
.resource-card{
position: relative;
display: flex;
flex-direction: column;
gap: 48px;
padding: 0px 32px 48px 32px;
transition: var(--transition);
isolation: isolate;
height: 100%;
}
.resource-card.resource-card--hide{
display: none;
}
.resource-card::before{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: calc(100% - 60px);
background-color: var(--light-grey);
transition: var(--transition);
z-index: -1;
}
.resource-card:hover{
padding: 0px 20px 48px 44px;
}
.resource-card:hover::before{
background-color: var(--white);
}
.resource-card__image{
min-height: 300px;
height: 300px;
width: 100%;
}
.resource-card .resource-card__image img{
object-fit: contain;
object-position: left;
width: 100%;
height: 100%;
}
.resource-card.resource-card--large-img .resource-card__image img{
object-fit: cover;
object-position: center;
}
.resource-card__content{
display: flex;
flex-direction: column;
}
.resource-card__content .card-tag{
margin-bottom: 12px;
text-wrap: balance;
}
.resource-card__content h4{
margin-bottom: 12px;
text-wrap: balance;
color: var(--off-black);
transition: var(--transition);
}
.resource-card:hover .resource-card__content h4{
color: var(--dark-grey);
}
.resource-card__footer{
margin-top: 50px;
display: flex;
flex-grow: 1;
align-items: flex-end;
}
.resource-card__content p{
margin-bottom: 0px;
}
/* Experts Card */
.expert-card{
display: flex;
flex-direction: column;
gap: 40px;
}
.expert-card.expert-card--hide{
display: none;
}
.expert-card__image{
width: 100%;
height: 250px;
}
.expert-card__image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.expert-card__content-title{
margin-bottom: 12px;
font-size: 24px;
}
.expert-card__content p:not(.expert-card__content-title),
.expert-card__content h4{
margin-bottom: 0px;
}
.expert-card__content a{
color: var(--blue);
}
/* Distributor Card */
.distributor-card {
display: flex;
flex-direction: column;
gap: 40px;
min-width: 0;
}
.distributor-card__image {
width: 100%;
aspect-ratio: 1 / 1;
background-color: white;
padding: 34px 28px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
}
.distributor-card__image img {
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.distributor-card.distributor-card--hide{
display: none;
}
.distributor-card__content{
display: flex;
flex-direction: column;
}
.distributor-card__content h4{
margin-bottom: 16px;
color: white;
}
.distributor-card__content a{
color: var(--orange);
}
/* Product Card */
.product_card .product_card__title{
color: var(--off-black);
transition: var(--transition);
}
.product_card:hover .product_card__title{
color: var(--dark-grey);
}
html {
position: relative;
}
body {
line-height: 1.4;
}
html[lang^='ja'] body,
html[lang^='zh'] body,
html[lang^='ko'] body {
line-break: strict;
overflow-wrap: normal;
word-break: break-all;
}
/* Paragraphs */
p {
margin: 0 0 24px;
font-size: 1rem;
}
/* Anchors */
a {
cursor: pointer;
}
/* Headings */
.h1-large{
font-size: 96px;
line-height: 1.1;
}
h1,
h2,
h3,
h4,
h5,
h6 {
margin: 0 0 24px;
}
/* Lists */
ul,
ol {
padding-left: 1rem;
margin: 0 0 24px;
}
ul li,
ol li {
margin: 0.7rem;
}
ul ul,
ol ul,
ul ol,
ol ol {
margin: 24px 0;
}
.no-list {
padding-left: 0;
margin: 0;
list-style: none;
}
.no-list li {
margin: 0;
}
/* Code blocks */
pre {
overflow: auto;
}
code {
vertical-align: bottom;
}
/* Blockquotes */
blockquote {
padding-left: 1rem;
border-left: 10px solid;
margin: 0 0 24px;
}
/* Horizontal rules */
hr {
border: 0 none;
border-bottom: 1px solid;
}
/* Subscripts and superscripts */
sup,
sub {
position: relative;
font-size: 75%;
line-height: 0;
vertical-align: baseline;
}
sup {
top: -0.5em;
}
sub {
bottom: -0.25em;
}
/* Image alt text */
img {
font-size: 1rem;
word-break: normal;
}
.cta-wrapper{
display: flex;
align-items: center;
gap: 16px;
}
.primary-cta,
.secondary-cta{
text-decoration: none;
border: none;
padding: 20px 22px;
line-height: 20px;
transition: var(--transition);
background-color: inherit;
position: relative;
display: inline-block;
max-width: max-content;
position: relative;
isolation: isolate;
border: 2px solid;
text-decoration: none!important;
font-weight: 600!important;
font-size: 20px;
}
.primary-cta::before,
.secondary-cta::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%!important;
transition: var(--transition);
z-index: -1;
}
.primary-cta:hover::before,
.secondary-cta:hover::before{
width: 100%;
}
/* Colourways */
/* Colourways -> Orange */
/* Primary */
.primary-cta.light-cta.orange-cta,
.primary-cta.dark-cta.orange-cta{
background-color: var(--orange);
border-color: var(--orange);
color: white;
}
.primary-cta.dark-cta.orange-cta::before{
background-color: var(--off-black);
}
.primary-cta.dark-cta.orange-cta:hover{
border-color: var(--off-black);
}
.primary-cta.light-cta.orange-cta::before{
background-color: var(--white);
}
.primary-cta.light-cta.orange-cta:hover{
color: var(--off-black);
border-color: var(--white);
}
/* Secondary */
.secondary-cta.light-cta.orange-cta,
.secondary-cta.dark-cta.orange-cta{
background-color: var(--transparent);
border-color: var(--orange);
color: var(--orange);
}
.secondary-cta.light-cta.orange-cta::before{
background-color: var(--orange);
}
.secondary-cta.dark-cta.orange-cta::before{
background-color: var(--off-black);
}
.secondary-cta.light-cta.orange-cta:hover,
.secondary-cta.dark-cta.orange-cta:hover{
color: var(--white);
border-color: var(--off-black);
}
/* Colourways -> White */
/* Primary */
.primary-cta.light-cta.white-cta,
.primary-cta.dark-cta.white-cta{
background-color: var(--white);
border-color: var(--white);
color: var(--off-black);
}
.primary-cta.dark-cta.white-cta::before{
background-color: var(--off-black);
}
.primary-cta.dark-cta.white-cta:hover{
border-color: var(--off-black);
color: var(--white);
}
.primary-cta.light-cta.white-cta::before{
background-color: var(--orange);
}
.primary-cta.light-cta.white-cta:hover{
color: var(--white);
border-color: var(--orange);
}
/* Secondary */
.secondary-cta.light-cta.white-cta,
.secondary-cta.dark-cta.white-cta{
background-color: transparent;
border-color: var(--white);
color: var(--white);
}
.secondary-cta.light-cta.orange-cta::before{
background-color: var(--orange);
}
.secondary-cta.light-cta.white-cta::before{
background-color: var(--off-black);
}
.secondary-cta.light-cta.white-cta:hover{
color: var(--white);
border-color: var(--off-black);
}
.secondary-cta.dark-cta.white-cta:hover{
color: var(--off-black);
border-color: var(--white)
}
.secondary-cta.dark-cta.white-cta:hover::before{
background-color: var(--white);
}
@media screen and (max-width: 767px){
.primary-cta,
.secondary-cta{
max-width: unset;
width: 100%;
text-align: center;
}
}
/* Seperate text link CTA style, used in explicit cases, not included in the usual CTA fieldset */
.text-cta{
position: relative;
color: var(--orange);
font-weight: 500;
line-height: 1.3;
display: flex;
align-items: center;
gap: 12px;
transition: var(--transition);
}
.text-cta:hover{
gap: 20px;
text-decoration: none;
color: var(--orange);
}
.text-cta::after{
content: "";
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='14' viewBox='0 0 16 14' fill='none'%3E%3Cpath d='M15.1211 6.63184L8.48926 13.2637L6.36816 11.1426L9.37891 8.13184H0V5.13184H9.37891L6.36816 2.12109L8.48926 0L15.1211 6.63184Z' fill='%23FF7B2D'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
width: 16px;
height: 14px;
display: inline-block;
}
/* Labels */
/* Help text */
form legend {
}
.hs-form__virality-link{
display: none!important;
}
/* Form fields */
.simple-form{
position: relative;
}
.hs-form-field{
position: relative;
transition: var(--transition);
margin-top: 10px;
margin-bottom: 28px;
}
.hs-form-field:not(.hs-fieldtype-checkbox) label:not(.hs-error-msg, .hs-form-booleancheckbox-display, .hs-form-radio-display){
font-style: normal;
margin-bottom: 8px;
display: block;
}
.hs-fieldtype-radio label:first-of-type:not(.hs-form-radio-display),
.hs-fieldtype-checkbox label:first-of-type:not(.hs-form-checkbox-display){
top: 0px!important;
position: relative!important;
left: 0px!important;
margin-bottom: 10px!important;
display: block;
}
.hs-form-field:not(.hs-fieldtype-checkbox).hs-form-field--active label:not(.hs-error-msg),
.hs-form-field:has(.hs-error-msgs):not(.hs-fieldtype-checkbox).hs-form-field--active label:not(.hs-error-msg){
top: calc(0% - 10px);
font-size: 10px;
left: 0px;
}
.hs-form-booleancheckbox-display{
position: relative !important;
top: 0!important;
transform: unset !important;
pointer-events: all!important;
}
.hs-form-booleancheckbox-display a{
color: var(--orange)!important;
}
.hs-error-msg{
color: var(--ui-red);
line-height: 1;
margin-top: 18px;
display: block;
}
.hs-form-field:has(.hs-error-msg) input{
border-color: var(--ui-red)!important;
}
.inputs-list.multi-container li label{
display: flex;
flex-direction: row;
align-items: center;
margin-bottom: 12px;
}
form input[type='text'],
form input[type='email'],
form input[type='password'],
form input[type='tel'],
form input[type='number'],
form input[type='search'],
form select,
form textarea{
width: 100%;
padding: 12px 0px!important;
border-left: none;
border-top: none;
border-right: none;
border-bottom: 1px solid var(--light-grey);
background-color: transparent;
}
form textarea{
min-height: 120px;
}
form fieldset{
max-width: unset!important;
}
form input::placeholder{
opacity: 1!important;
}
.form--light form input,
.form--light form select,
.form--light form textarea {
color: var(--white);
}
.form--dark form input,
.form--dark form select,
.form--dark form textarea {
color: var(--off-black);
}
.form--light .hs-form-field label:not(.hs-error-msg),
.form--dark .hs-form-field label:not(.hs-error-msg){
color: var(--ui-grey);
}
.form--light li[role="checkbox"] .hs-form-booleancheckbox-display,
.form--light li[role="radio"] .hs-form-radio-display{
color: var(--white);
}
.form--dark li[role="checkbox"] .hs-form-booleancheckbox-display,
.form--dark li[role="radio"] .hs-form-radio-display{
color: var(--off-black);
}
.form--light .hs-richtext{
color: var(--ui-grey);
}
.form--light form input::placeholder,
.form--light form textarea::placeholder{
color: var(--ui-grey);
}
.form--dark form input::placeholder,
.form--dark form textarea::placeholder{
color: var(--ui-grey);
}
.legal-consent-container .hs-form-booleancheckbox-display input{
}
/* Form -fields -> intl phone */
.hs-fieldtype-intl-phone{
display: flex;
flex-direction: row;
gap: 10px;
}
/* Form fields - placeholders */
::-webkit-input-placeholder {
display: none;
}
::-moz-placeholder {
display: none;
}
:-ms-input-placeholder {
display: none;
}
:-moz-placeholder {
display: none;
}
::placeholder {
display: none;
}
/* Form fields - date picker */
form .hs-dateinput:before {
}
form .pika-table thead th {
}
form td.is-today .pika-button {
}
form .is-selected .pika-button {
}
form .pika-button:hover {
}
/* Headings and text */
form .hs-richtext,
form .hs-richtext *,
form .hs-richtext p,
form .hs-richtext h1,
form .hs-richtext h2,
form .hs-richtext h3,
form .hs-richtext h4,
form .hs-richtext h5,
form .hs-richtext h6 {
}
form .hs-richtext a {
}
/* GDPR */
.form--light form .legal-consent-container .hs-richtext,
.form--light form .legal-consent-container .hs-richtext p {
color: var(--ui-grey);
}
form .legal-consent-container .hs-richtext,
form .legal-consent-container .hs-richtext p {
margin-bottom: 24px;
}
/* Inline thank you message */
.submitted-message {
}
/* Custom checkbox */
input[type="checkbox"]{
position: relative;
cursor: pointer;
appearance: none;
width: 20px;
height: 20px;
}
input[type="checkbox"]::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: var(--transition);
}
input[type="checkbox"]::before {
background-image: url('data:image/svg+xml,');
}
input[type="checkbox"]:checked::before {
background-image: url('data:image/svg+xml,');
}
.form--dark input[type="checkbox"]::before {
background-image: url('data:image/svg+xml,');
}
.form--dark input[type="checkbox"]:checked::before {
background-image: url('data:image/svg+xml,');
}
.form--light input[type="checkbox"]::before {
background-image: url('data:image/svg+xml,');
}
.form--light input[type="checkbox"]:checked::before {
background-image: url('data:image/svg+xml,');
}
input[type="checkbox"] + span:not(.legal-consent-container .hs-form-booleancheckbox-display>span){
padding-left: 28px;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
margin-left: 28px!important;
}
/* Custom Radio Button Styling */
/* Target radio inputs inside any label with the common HubSpot structure */
.hs-form-radio-display input[type="radio"] {
position: relative;
cursor: pointer;
appearance: none; /* Hide default radio button */
-webkit-appearance: none;
-moz-appearance: none;
width: 20px;
height: 20px;
margin: 0;
padding: 0;
background-color: transparent;
}
.hs-form-radio-display input[type="radio"]::before {
content: "";
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 20px;
height: 20px;
background-size: contain;
background-position: center;
background-repeat: no-repeat;
transition: var(--transition, 0.3s ease);
pointer-events: none;
}
.hs-form-radio-display input[type="radio"]::before {
background-image: url('data:image/svg+xml,');
}
.hs-form-radio-display input[type="radio"]:checked::before {
background-image: url('data:image/svg+xml,');
}
.form--dark .hs-form-radio-display input[type="radio"]::before {
background-image: url('data:image/svg+xml,');
}
.form--dark .hs-form-radio-display input[type="radio"]:checked::before {
background-image: url('data:image/svg+xml,');
}
.form--light .hs-form-radio-display input[type="radio"]::before {
background-image: url('data:image/svg+xml,');
}
.form--light .hs-form-radio-display input[type="radio"]:checked::before {
background-image: url('data:image/svg+xml,');
}
.hs-form-radio-display input[type="radio"] + span {
display: inline-block;
padding-left: 36px; /* Leave room for the 20px icon and spacing */
line-height: 20px;
font-size: 16px;
vertical-align: middle;
position: relative;
}
.hs-form-radio-display{
display: flex;
flex-direction: row;
align-items: center;
}
.hs-form-radio-display label span{
font-size: 16px;
display: inline-block;
margin-bottom: 8px;
}
/* Buttons */
.hs_submit,
.hs-submit{
margin-top: 32px;
}
input[type="submit"].hs-button{
text-decoration: none;
border-width: 2px;
border-style: solid;
padding: 16px 24px;
font-weight: 600;
line-height: 20px;
font-size: 20px;
transition: var(--transition);
cursor: pointer;
}
.form--light input[type="submit"].hs-button{
background-color: var(--orange);
border-color: var(--orange);
color: var(--white);
}
.form--light input[type="submit"].hs-button:hover{
background-color: var(--off-black);
border-color: var(--off-black);
color: var(--white);
}
.form--dark input[type="submit"].hs-button{
background-color: var(--orange);
border-color: var(--orange);
color: var(--white);
}
.form--dark input[type="submit"].hs-button:hover{
background-color: var(--off-black);
border-color: var(--off-black);
color: var(--white);
}
.hs-form-booleancheckbox span{
color: black!important;
}
.legal-consent-container .hs-richtext{
margin-bottom: 0px!important;
}
.legal-consent-container .hs-richtext a{
color: var(--orange)!important;
}
/*
Need to make individual adjustments? -- Please use modifier classes e.g. slider-navigation--team-slider
inside of your modules respective css file
*/
/* Logo Slider */
.logo-slider{
position: relative;
isolation: isolate;
}
.logo-slider::after,
.logo-slider::before{
content: "";
position: absolute;
width: 100px;
height: 100%;
z-index: 5;
pointer-events: none;
}
.logo-slider::after{
top: 0;
right: 0;
}
.logo-slider::before{
top: 0;
left: 0;
}
.logo-slider__logo{
display: flex;
justify-content: center;
align-items: center;
}
.logo-slider.logo-slider--light .logo-slider__logo img{
filter: brightness(0) saturate(100%) invert(1);
-webkit-filter: brightness(0) saturate(100%) invert(1);
}
.logo-slider.logo-slider--dark .logo-slider__logo img{
filter: brightness(0) saturate(100%);
-webkit-filter: brightness(0) saturate(100%);
}
.logo-slider__logo img{
min-height: 90px;
max-height: 100px;
width: 100%;
object-fit: contain;
}
.logo-slider .swiper-wrapper{
transition-timing-function: linear;
}
/* Slider Navigation */
.slider-navigation{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.slider-navigation__item{
width: 50px;
height: 50px;
background-color: transparent;
border: 1px solid white;
display: flex;
justify-content: center;
align-items: center;
transition: var(--transition);
cursor: pointer;
opacity: 1;
}
.slider-navigation__item svg{
width: 14px;
max-width: 14px;
height: auto;
}
.slider-navigation__item svg path{
transition: var(--transition);
}
/* ======= Light ========== */
/* Light, Standard State */
.slider-navigation.slider-navigation--light .slider-navigation__item{
border-color: var(--cyan);
background-color: var(--cyan);
}
.slider-navigation.slider-navigation--light .slider-navigation__item svg path{
stroke: var(--white);
}
/* Light, Hover State */
.slider-navigation.slider-navigation--light .slider-navigation__item:hover{
border-color: var(--blue);
background-color: var(--blue);
}
/* Light, Disabled State */
.slider-navigation.slider-navigation--light .slider-navigation__item.swiper-button-disabled{
cursor: not-allowed;
border-color: var(--cyan);
background-color: transparent;
}
.slider-navigation.slider-navigation--light .slider-navigation__item.swiper-button-disabled:hover{
cursor: not-allowed;
border-color: var(--cyan);
background-color: transparent;
}
.slider-navigation.slider-navigation--light .slider-navigation__item.swiper-button-disabled svg path{
stroke: var(--white);
}
/* ======= Dark ========== */
/* Dark, Standard State */
.slider-navigation.slider-navigation--dark .slider-navigation__item{
border-color: var(--white);
background-color: var(--white);
}
.slider-navigation.slider-navigation--dark .slider-navigation__item svg path{
stroke: var(--cyan);
}
/* Dark, Hover State */
.slider-navigation.slider-navigation--dark .slider-navigation__item:hover{
background-color: var(--blue);
border-color: var(--blue);
}
.slider-navigation.slider-navigation--dark .slider-navigation__item:hover svg path{
stroke: var(--white);
}
/* Dark, Disabled State */
.slider-navigation.slider-navigation--dark .slider-navigation__item.swiper-button-disabled{
cursor: not-allowed;
border-color: var(--white);
background-color: transparent;
}
.slider-navigation.slider-navigation--dark .slider-navigation__item.swiper-button-disabled:hover{
border-color: var(--white);
background-color: transparent;
}
.slider-navigation.slider-navigation--dark .slider-navigation__item.swiper-button-disabled svg path{
stroke: var(--white);
}
.slider-navigation.slider-navigation--dark .slider-navigation__item.swiper-button-disabled:hover svg path{
stroke: var(--white);
}
.pagination{
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pagination__page,
.pagination__arrow{
max-width: 30px;
max-height: 30px;
width: 30px;
height: 30px;
display: flex;
justify-content: center;
align-items: center;
color: inherit;
background-color: transparent;
transition: var(--transition);
cursor: pointer;
}
.pagination__page:hover,
.pagination__page.pagination__page--active{
background-color: var(--orange);
color: white;
}
.pagination__arrow:hover{
background-color: var(--orange);
}
.pagination__arrow svg path{
stroke: var(--orange);
}
.pagination__arrow:hover svg path{
stroke: var(--white);
}
.pagination__arrow svg{
pointer-events: none;
}
.pagination__arrow.pagination__arrow--prev svg{
transform: rotate(180deg);
}
.pagination__arrow.pagination__arrow--inactive{
cursor: not-allowed;
opacity: 0.3;
}
.pagination:has(.pagination__arrow.pagination__arrow--prev.pagination__arrow--inactive):has(.pagination__arrow.pagination__arrow--next.pagination__arrow--inactive) .pagination__arrow.pagination__arrow--inactive{
display: none;
}
/* Table */
table {
border-collapse: collapse;
margin: 0px;
width: 100%;
font-size: var(--protocol-grey);
}
/* Table cells */
th,
td {
padding: 0.7rem!important;
vertical-align: top;
text-align: left!important;
}
/* Table header */
thead th:first-of-type,
thead td:first-of-type {
text-align: left;
}
thead th,
thead td{
text-align: center;
}
thead th h6{
margin: 0px;
}
thead th:last-of-type{
border-right: none;
}
table {
border-collapse: collapse;
}
table td {
padding: 16px!important;
font-size: 16px;
}
table thead td {
color: #ffffff;
font-weight: bold;
font-size: 13px;
border: 1px solid #54585d;
}
table td p,
table td h6{
margin-bottom: 0px;
}
table:not(.pricing-table) tbody tr:first-of-type h1,
table:not(.pricing-table) tbody tr:first-of-type h2,
table:not(.pricing-table) tbody tr:first-of-type h3,
table:not(.pricing-table) tbody tr:first-of-type h4,
table:not(.pricing-table) tbody tr:first-of-type h5,
table:not(.pricing-table) tbody tr:first-of-type h6{
color: white!important;
margin-bottom: 0px;
}
tbody tr{
transition: var(--transition);
}
table tbody tr:first-of-type td{
border: 0px solid transparent!important;
}
table tbody tr td:first-of-type{
text-align: left;
}
table tbody tr td{
text-align: center;
}
table tbody tr td:last-of-type{
border-right: 0px solid;
}
table ul{
padding: 0;
margin: 0;
margin-left: 20px;
}
table li{
margin: 0;
padding: 0;
font-size: 14px;
}
/* Rich text based table adjustments */
.hs_cos_wrapper_type_rich_text table tbody tr:first-of-type {
border-top: 2px solid #646363;
}
.hs_cos_wrapper_type_rich_text table tbody tr {
border-bottom: 2px solid #646363;
}
@media (max-width: 767px) {
.hs_cos_wrapper_type_rich_text:has(table) {
display:block;
width: 100%;
overflow-x: scroll;
}
.hs_cos_wrapper_type_rich_text > table {
width: max-content !important;
min-width: 100% !important;
border-collapse: collapse;
}
.hs_cos_wrapper_type_rich_text > table th,
.hs_cos_wrapper_type_rich_text > table td {
width: auto !important;
min-width: 160px;
white-space: nowrap;
padding: 12px 14px;
}
}
.video-media{
position: relative;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-media.video-media--paused{
}
.video-media video{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 1;
display: block;
}
.video-media .video-media__thumbnail{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
opacity: 0;
pointer-events: none;
z-index: 2;
transition: var(--transition);
}
.video-media.video-media--paused .video-media__thumbnail{
opacity: 1;
}
.video-media .video-media__controls{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
background-color: rgba(0, 0, 0, 0.2);
cursor: pointer;
opacity: 0;
pointer-events: none;
z-index: 3;
transition: var(--transition);
}
.video-media:hover .video-media__controls{
background-color: rgba(0, 0, 0, 0.3);
}
.video-media.video-media--paused .video-media__controls{
opacity: 1;
pointer-events: all;
}
.video-media__controls svg{
transition: var(--transition);
border: 0px solid rgba(255, 255, 255, 0);
background-color: white;
}
.video-media__controls svg circle{
fill: var(--white);
background-color: white;
transition: var(--transition);
}
.video-media__controls svg path{
fill: var(--blue);
transition: var(--transition);
}
.video-media__controls:hover svg path{
fill: var(--orange);
}
@media screen and (max-width: 767px){
.video-media__controls svg{
width: 50px;
height: 50px;
}
}
.accordion{
display: flex;
flex-direction: column;
width: 100%;
border-bottom: 1px solid;
background-color: transparent;
transition: var(--transition);
padding: 20px 0px 20px 0px;
}
.accordion.accordion--light{
border-color: #39B3E1;
}
.accordion.accordion--dark{
border-color: var(--off-black);
}
.accordion.accordion--light .accordion__title-indicator__title h4{
color: white;
}
.accordion .accordion__title-indicator{
display: flex;
flex-direction: row;
justify-content: space-between;
position: relative;
align-items: center;
margin-bottom: 0px;
transition: var(--transition);
cursor: pointer;
user-select: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.accordion .accordion__title-indicator__title h4{
margin-bottom: 0px;
}
.accordion.accordion--dark .accordion__title-indicator__title h4{
color: white;
}
.accordion__title-indicator .accordion__title__indicator{
position: relative;
margin-left: 20px;
}
.accordion__title__indicator__plus{
width: 20px;
height: 20px;
height: auto;
opacity: 1;
transition: var(--transition)
}
.accordion.active .accordion__title__indicator__plus{
opacity: 0;
}
.accordion__title__indicator__minus{
position: absolute;
width: 20px;
height: 20px;
top: 0;
left: 0;
opacity: 0;
transition: var(--transition)
}
.accordion.active .accordion__title__indicator__minus{
opacity: 1;
}
.accordion .accordion__title-indicator-svg{
min-width: 14px;
min-height: 7px;
transform: rotate(0deg);
transition: var(--transition);
}
.accordion.active .accordion__title-indicator-svg{
transform: rotate(180deg);
}
.accordion.active .accordion__title-indicator-svg path{
stroke: var(--white);
}
.accordion .accordion__content{
height: 0;
overflow: hidden;
opacity: 0;
transition: height var(--transition), opacity var(--transition) padding-top: var(--transition);
width: 90%;
line-height: 1.5;
position: relative;
padding-top: 0px;
}
.accordion.active .accordion__content{
opacity: 1;
padding-top: 20px;
overflow: visible;
height: max-content;
}
.accordion .accordion__content p{
color: white;
}
.accordion.active .accordion__content p:last-of-type{
margin-bottom: 0px;
}
.accordion.accordion--light .accordion__content a{
color: white;
}
.accordion.active .accordion__content img{
border-radius: 8px;
margin-bottom: 24px;
}
.accordion-mob-img{
display: none;
}
@media screen and (max-width: 768px) {
.accordion-mob-img{
display: block;
}
.accordion__title-indicator__title span{
font-size: 24px;
}
.accordion__title__indicator{
margin-left: 0px!important;
}
.accordion .accordion__content{
width: 100%;
}
}
.statistic{
display: flex;
flex-direction: column;
gap: 12px;
position: relative;
}
.statistic-number{
display: flex;
flex-direction: row;
align-items: flex-end;
font-size: 96px;
font-weight: 900;
color: var(--white);
}
.statistic-content p:last-of-type{
margin-bottom: 0px;
}
@media screen and (max-width: 1023px){
.statistic-number{
font-size: 48px;
}
}
/* Modules */
/* Rich text */
.widget-type-rich_text img {
height: auto;
max-width: 100%;
}
.location-map{
position: relative;
isolation: isolate;
}
.location-map__map{
width: 100%;
position: relative;
}
.location-map__filters{
width: 100%;
max-width: 1440px;
margin: auto;
margin-bottom: 24px;
display: flex;
justify-content: flex-end;
align-items: center;
position: relative;
z-index: 5;
padding: 0px 24px;
}
.location-map__filters select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
background-color: transparent;
background-image: url(data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='8' fill='none' viewBox='0 0 13 8'%3E%3Cpath stroke='%236e7d8b' d='m12.354.354-6 6-6-6'/%3E%3C/svg%3E);
background-position: 100%;
background-repeat: no-repeat;
border: none;
border-bottom: 1px solid var(--ui-grey);
border-radius: 0;
color: var(--dark-grey);
padding: 12px 24px 12px 0;
width: 100%;
max-width: 350px;
}
.location-map__pins{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 2;
}
.location-pin{
position: absolute;
width: 10px;
height: 10px;
background-color: var(--blue);
display: block;
transform:scale(1);
transition: var(--transition);
cursor: pointer;
}
.location-pin.location-pin--active{
transform: scale(1.2);
background-color: var(--dark-blue);
}
.location-map .content-wrapper{
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 50%;
transform: translateX(-50%);
z-index: 3;
pointer-events: none;
padding: 24px;
}
.countries{
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 0;
background-color: white;
opacity: 0;
pointer-events: none;
}
.countries-close{
position: absolute;
top: 0;
right: 0;
pointer-events: all;
cursor: pointer;
z-index: 10;
}
.countries.countries--active{
opacity: 1;
pointer-events: all;
}
.countries__country{
display: flex;
flex-direction: row;
gap: 32px;
opacity: 0;
pointer-events: none;
transition: var(--transition);
position: absolute;
top: 0;
left: 0;
padding: 48px 32px 32px 32px;
}
.countries__country--active{
opacity: 1;
pointer-events: all;
}
.location-map__location{
display: none;
flex-direction: column;
gap: 24px;
}
.location-map__location.location-map__location--active{
display: flex;
}
.location-map__location{
min-width: 220px;
}
.location-map__location .location-image img{
width: 100%;
height: 100%;
max-width: 200px;
max-height: 120px;
object-fit: cover;
object-position: center;
}
.location-map__location ul {
list-style: none;
margin: 0 0 16px;
padding: 0;
}
.location-map__location li {
color: var(--dark-grey);
margin: 0;
padding: 0;
}
.location-map__location p {
margin-bottom: 0px;
}
@media screen and (max-width: 1023px){
.location-map__filters select {
max-width: unset;
}
.countries__country{
display: none;
}
.countries__country.countries__country--active{
display: flex;
}
.location-map .content-wrapper{
position: relative;
display: none;
}
.location-map .content-wrapper:has(.countries.countries--active){
display: flex;
}
.countries{
position: relative;
top: 0;
left: 0;
transform:translateY(0);
height: auto!important;
width: 100%!important;
}
.location-map__location{
min-width: unset;
}
.countries__country{
position: relative;
}
.location-map__location .location-image img{
width: 80%;
height: 100%;
max-width: unset;
max-height: 120px;
object-fit: cover;
object-position: center;
}
}
@media screen and (max-width: 767px){
.countries__country{
flex-direction: column;
}
.location-map__pins{
display: none;
}
.countries__country{
padding: 24px;
}
}
.signpost-cards{
}
.signpost-cards__title{
margin-bottom: 60px;
}
.signpost-cards__title h2{
margin-bottom: 0px;
}
.signpost-cards__cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
.signpost-card{
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0px;
position: relative;
}
.signpost-card:not(.signpost-card--single) {
grid-column: span 2;
}
.signpost-card--single {
grid-column: span 1;
}
.signpost-card__column{
width: 50%;
position: relative;
}
.signpost-card.signpost-card--single .signpost-card__column{
width: 100%;
}
.signpost-card__column.signpost-card__column--content{
padding: 100px 32px 48px 24px;
transition: var(--transition);
position: relative;
isolation: isolate;
min-height: 340px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 64px;
}
.signpost-card:hover .signpost-card__column.signpost-card__column--content{
padding: 100px 24px 48px 32px;
}
.signpost-card__column.signpost-card__column--content::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: var(--orange);
transition: var(--transition);
z-index: -1;
}
.signpost-card:hover .signpost-card__column.signpost-card__column--content::before{
width: 100%;
}
.signpost-card__column.signpost-card__column--content h3,
.signpost-card__column.signpost-card__column--content p{
color: var(--white);
}
.signpost-card:hover .signpost-card__column.signpost-card__column--content p{
opacity: 1;
}
.signpost-card__column.signpost-card__column--content p{
opacity: 0;
transition: var(--transition);
}
.signpost-card__column.signpost-card__column--image img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 768px) {
.signpost-cards__cards {
grid-template-columns: 1fr;
}
.signpost-card:not(.signpost-card--single),
.signpost-card--single {
grid-column: span 1;
}
.signpost-card__column {
width: 100%;
}
.signpost-card__column.signpost-card__column--image{
display: none;
}
.signpost-card__column.signpost-card__column--content,
.signpost-card:hover .signpost-card__column.signpost-card__column--content:hover{
padding: 48px 24px;
gap: 48px;
}
.signpost-card .signpost-card__column.signpost-card__column--content::before{
width: 100%;
}
.signpost-card .signpost-card__column.signpost-card__column--content p{
opacity: 1;
}
}
.statistics {
display: grid;
gap: clamp(64px, 5vw, 150px);
padding: 80px 60px;
grid-template-columns: repeat(3, 1fr);
position: relative;
z-index: 3;
}
@media (max-width: 1024px) {
.statistics {
grid-template-columns: repeat(2, 1fr);
gap: 48px;
}
}
@media (max-width: 767px) {
.statistics {
grid-template-columns: repeat(1, 1fr);
padding: 80px 20px 48px 20px;
}
}
/* LP specific styling */
.footer.footer--lp{
padding: 48px 24px;
}
.footer.footer--lp .footer-main__column-rows,
.footer.footer--lp .footer-main__body{
display: none;
}
.footer.footer--lp .footer-main__column.footer-main__column--first{
justify-content: flex-end;
}
/* Footer CTA Banner */
.footer-cta-banner{
background: linear-gradient(0deg,rgba(48, 48, 48, 1) 80%, transparent 80%);
padding: 0px 24px;
}
.footer-cta-banner.footer-cta-banner--underlap{
background-color: #F4F5F6;
}
.footer-cta-banner .content-wrapper{
display: flex;
flex-direction: row;
align-items: stretch;
padding: 0px;
}
.footer-cta-banner__column{
width: 50%;
}
.footer-cta-banner__column.footer-cta-banner__column--content{
background-color: var(--orange);
padding: 64px;
}
.footer-cta-banner__column.footer-cta-banner__column--image{
position: relative;
min-height: 345px;
}
.footer-cta-banner__column.footer-cta-banner__column--image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.footer-cta-banner .light-cta.primary-cta.white-cta:hover::before{
background-color: var(--off-black);
}
.footer-cta-banner .light-cta.primary-cta.white-cta:hover{
border-color: var(--off-black);
color: var(--white);
}
/* Setup */
.footer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: var(--off-black);
margin: auto;
position: relative;
z-index: 98;
padding: 84px 24px 50px 24px;
}
.footer-logo{
position: relative;
}
.footer .content-wrapper{
padding: 0px;
display: flex;
flex-direction: column;
width: 100%;
}
.footer h1,
.footer h2,
.footer h3,
.footer h4,
.footer h5,
.footer h6,
.footer p,
.footer span{
color: var(--white);
}
/* Footer - Main */
.footer-main {
display: grid;
grid-template-columns: 1fr 1fr;
gap: clamp(100px, 10vw + 50px, 300px);
}
/* Footer - Main - Columns */
.footer-main__column{
display: flex;
flex-direction: column;
gap: 44px;
}
.footer-main__column-rows{
display: flex;
flex-direction: row;
gap: 64px;
justify-content: space-between;
}
/* Footer - Main -> First Column */
.footer-main__column.footer-main__column--first{
gap: 44px;
width: 100%;
}
/* Form */
.footer-main__form{
border-bottom: 1px solid var(--dark-grey);
position: relative;
max-width: 360px;
}
.footer-main__form-title{
color: var(--White, #FFF);
font-size: 36px;
opacity: 0.7;
margin-bottom: 10px;
max-width: max-content;
}
.footer-main__column{
justify-content: space-between;
}
.footer-main__column.footer-main__column--first form{
display: flex;
flex-direction: row;
width: 100%;
gap: 20px;
align-items: center;
}
.footer-main__column.footer-main__column--first form .hs-form-field{
margin: 0px!important;
border-bottom: 0px;
width: 100%;
}
.footer-main__column.footer-main__column--first form .hs-form-field label{
color: var(--white);
opacity: 0.7;
font-size: 14px;
}
.footer-main__column.footer-main__column--first form .legal-consent-container{
display: flex;
height: 50px;
}
.footer-main__column.footer-main__column--first form .hs_submit .hs-button{
margin: 0px;
padding: 10px 32px !important;
border: none;
}
.footer-main__column.footer-main__column--first form input[type='email']{
color: var(--white);
padding: 12px 0px!important;
border-bottom: 0px;
}
.footer-main__column.footer-main__column--first form input::placeholder{
color: var(--white);
}
.footer-main__column.footer-main__column--first form input[type="submit"].hs-button{
transition: var(--transition);
background-color: var(--transparent);
}
.footer-main__form svg{
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 0;
}
/* Rows */
.footer-main__column-row p{
margin-bottom: 0px;
}
.footer-main__column-row ul{
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 16px;
}
.footer-main__column-row ul li{
margin: 0;
padding: 0;
}
.footer-main__column-row ul li a{
color: var(--white)!important;
transition: var(--transition);
}
.footer-main__column-row.footer-main__column-row--hidden-title ul li a{
color: var(--white)!important;
font-size: 20px;
line-height: 1.2;
opacity: 1;
}
.footer-main__column-row ul li a:hover{
opacity: 1;
}
.footer-main__column-row ul li:first-of-type{
display: flex;
flex-direction: row;
align-items: center;
gap: 6px;
}
.footer-main__column-row.footer-main__column-row--featured-link ul li:first-of-type::after{
content: "";
display: inline-block;
width: 14px;
min-width: 14px;
height: 14px;
background-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='14'%20height='14'%20viewBox='0%200%2014%2014'%20fill='none'%3E%3Cpath%20d='M1.16675%206.99968H12.8334M12.8334%206.99968L7.00008%2012.5413M12.8334%206.99968L7.00008%201.45801'%20stroke='%23FF7700'%20stroke-width='1.5'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Socials */
.footer-main__socials{
display: flex;
flex-direction: row;
gap: 16px;
margin-top: 32px;
}
.social-icon{
display: flex;
justify-content: center;
align-items: center;
position: relative;
padding: 8px;
background-color: var(--orange);
}
.social-icon span{
line-height: 1;
margin-top: 1px;
}
.social-icon svg{
width: 22px;
height: 22px;
}
.social-icon svg path{
fill: var(--off-black);
transition: var(--transition);
}
.social-icon:hover svg path{
fill: var(--white);
}
.footer-policy__policy-menu{
display: flex;
flex-direction: row;
gap: 40px;
grid-column: span 4;
}
.footer-lower__policy-menu-item a{
color: white;
}
/* Footer - MQs */
@media screen and (max-width: 1024px) {
.footer-main {
grid-template-columns: repeat(2, 1fr);
}
.footer-cta-banner__column.footer-cta-banner__column--content{
padding: 32px;
}
}
@media screen and (max-width: 767px) {
.footer-cta-banner .content-wrapper{
flex-direction: column-reverse;
}
.footer-cta-banner__column.footer-cta-banner__column--image{
min-height: 250px;
}
.footer-cta-banner__column{
width: 100%;
}
.footer{
padding: 64px 24px;
}
.footer-main {
grid-template-columns: 1fr;
gap: 32px;
}
.footer-main__form{
max-width: unset;
}
.footer-main__column:last-of-type{
order: -1;
flex-direction: column-reverse;
}
.footer-main__column-rows{
flex-direction: column-reverse;
gap: 32px;
}
.footer-main__form-title {
font-size: 20px;
}
.footer-policy__policy-menu{
display: flex;
flex-direction: row;
}
}
.header.header--lp .header__column.header__column--nav{
display: none;
}
/* Main Body*/
.header{
position: fixed;
width: 100%;
top: 30px;
left: 0;
z-index: 99999;
padding: 0px 24px;
}
.header .content-wrapper{
width: 100%;
max-width: 1440px;
margin: auto;
position: relative;
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: space-between;
gap: 32px;
background-color: white;
border: 1px solid var(--light-grey);
padding: 0px 0px 0px 24px;
}
/* Logo */
.header__column.header__column--logo{
position: relative;
display: flex;
align-items: center;
}
.header__column.header__column--logo img{
width: 140px;
height: auto;
}
/* Navigation */
.header-navigation{
}
/* Navigation -> Parent Menu */
.header-navigation__parent{
position: relative;
list-style: none;
display: flex;
flex-direction: row;
align-items: center;
gap: 48px;
margin: 0;
padding: 0;
}
.header-navigation__parent li{
position: relative;
padding: 0px;
margin: 0;
}
.header-navigation__link{
display: block;
padding: 20px 0px;
color: var(--off-black);
}
.header-navigation__link::before{
display: none;
}
/* Navigation -> Child Menu */
.header-navigation__child{
list-style: none;
position: absolute;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
padding: 16px 0px;
background-color: white;
border: 1px solid var(--light-grey);
margin: 0;
width: max-content;
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.header-navigation__parent li:hover .header-navigation__child{
opacity: 1;
pointer-events: all;
}
.header-navigation__child::before{
content: "";
position: absolute;
top: -20px;
left: 0;
width: 100%;
height: 20px;
background: transparent
}
.header-navigation__child::after{
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 20px;
height: 20px;
background: white;
transform: translateX(-50%) rotate(45deg);
border-top: 1px solid var(--light-grey);
border-left: 1px solid var(--light-grey);
}
.header-navigation__child li{
padding: 0;
margin: 0;
}
.header-navigation__link.header-navigation__link--child{
padding: 8px 24px;
}
/* Actions */
.header__column.header__column--actions{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.header-actions__cta,
.header__column.header__column--actions .cta-wrapper,
.header__column.header__column--actions .cta-wrapper .primary-cta{
height: 100%;
display: flex;
align-items: center;
}
.header__column.header__column--actions .cta-wrapper .primary-cta{
padding-left: 32px;
padding-right: 32px
}
/* Search */
.header-actions__search{
}
.header-actions__search-input {
color: var(--dark-grey);
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M7.32873 13.6575C10.824 13.6575 13.6575 10.824 13.6575 7.32873C13.6575 3.83347 10.824 1 7.32873 1C3.83347 1 1 3.83347 1 7.32873C1 10.824 3.83347 13.6575 7.32873 13.6575Z' stroke='%23303030' stroke-width='2' stroke-miterlimit='10'/%3E%3Cpath d='M11.8047 11.8045L14.9992 14.999' stroke='%23303030' stroke-width='2' stroke-miterlimit='10'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: 14px 14px;
background-position: right 12px center;
padding-right: 38px;
border: none;
border-bottom: 1px solid transparent;
transition: var(--transition);
max-width: 100px;
}
.header-actions__search-input::placeholder {
color: var(--dark-grey);
opacity: 1;
}
.header-actions__search-input:focus {
border-bottom: 1px solid var(--dark-grey);
outline: none;
}
/* Language Switcher */
.header-actions__switcher{
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
position: relative;
}
.header-actions__switcher span{
color: var(--dark-grey);
text-transform: capitalize;
}
.header-actions__switcher svg{
width: 30px;
height: 30px;
}
.header-actions__switcher:hover .switcher-body{}
.switcher-body{
position: absolute;
top: calc(100% + 40px);
left: 50%;
transform: translateX(-50%);
background-color: var(--white);
border: 1px solid var(--light-grey);
display: flex;
flex-direction: column;
gap: 14px;
width: max-content;
pointer-events: none;
opacity: 0;
transition: var(--transition);
padding: 16px 6px;
z-index: 9999999;
}
.switcher-body::before{
content: "";
position: absolute;
top: -40px;
left: 0;
width: 100%;
height: 40px;
background: transparent
}
.switcher-body::after{
content: "";
position: absolute;
top: -10px;
left: 50%;
width: 20px;
height: 20px;
background: white;
transform: translateX(-50%) rotate(45deg);
border-top: 1px solid var(--light-grey);
border-left: 1px solid var(--light-grey);
}
.switcher-body:hover,
.header-actions__switcher:hover .switcher-body{
opacity: 1;
pointer-events: all;
}
.switcher-body a{
padding-left: 18px;
color: var(--dark-grey)!important;
transition: var(--transition);
text-transform: capitalize;
}
.switcher-link{
text-transform: uppercase!important;
}
.switcher-link svg{
width: 14px;
height: auto;
margin-left: 8px;
}
.switcher-body a:hover{
color: var(--blue)!important;
}
.region-switcher{
border-top: 1px solid var(--light-grey);
padding: 16px 18px 0px 18px;
}
.region-switcher__title{
font-size: 12px;
color: var(--off-black)!important;
}
.region-switcher__current{
color: var(--blue)!important;
}
.region-switcher__cta:not(footer .region-switcher__cta){
color: var(--orange)!important;
text-decoration: underline;
}
.region-switcher__cta{
cursor: pointer;
}
/* Mega Menu */
.header__mega-menu{
position: absolute;
width: 100%;
top: calc(100%);
left: 50%;
transform: translateX(-50%);
}
.header__mega-menu,
.header__mega-menu-child{
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.header__mega-menu.header__mega-menu--active,
.header__mega-menu-child.header__mega-menu-child--active{
opacity: 1;
pointer-events: all;
}
.header__mega-menu{
width: 100%;
max-width: 1300px;
margin: auto;
background-color: var(--white);
border: 1px solid var(--light-grey);
margin-top: 20px;
}
.header__mega-menu-child{
padding: 64px 32px;
display: flex;
flex-direction: row;
gap: 70px;
}
.header__mega-menu-child__column{
width: calc((100% /3) - 35px);
}
/* Mega Menu -> Featured Content */
.header__mega-menu-child__featured{
margin-bottom: 48px;
}
.header__mega-menu-child__featured a{
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
color: var(--blue);
font-size: 20px;
font-weight: 900!important;
margin-bottom: 12px;
}
.header__mega-menu-child__featured p{
margin-bottom: 0px;
color: var(--dark-grey);
}
/* Mega Menu -> Menu */
.header__mega-menu-child ul{
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
}
.header__mega-menu-child ul li{
width: 100%;
padding: 14px 0px;
margin: 0;
border-top: 1px solid var(--light-grey);
}
.header__mega-menu-child ul li:first-of-type{
border-top: none;
padding-top: 0px;
}
.header__mega-menu-child ul li a{
color: var(--blue);
font-size: 20px;
}
/* Mobile Menu */
.header-mobile{
display: none;
}
.hamburger{
display: none;
}
/* Region Selector */
.region-selector{
position: absolute;
top: calc(100% + 40px);
left: 50%;
transform: translateX(-50%);
width: calc(100% - 48px);
max-width: 1440px;
border: 1px solid var(--light-grey, #DCDFE3);
background: var(--white, #FFF);
padding: 70px;
display: flex;
flex-direction: column;
gap: 70px;
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.region-selector.region-selector--active{
opacity: 1;
pointer-events: all;
}
.region-selector__title{
text-align: center;
}
.region-selector__title p:last-of-type{
margin-bottom: 0px;
}
.region-selector__options{
display: flex;
flex-direction: column;
flex-wrap: wrap;
max-height: 350px;
gap: 0px 80px;
}
.region-option{
border-bottom: 1px solid var(--light-grey);
margin-bottom: 0px;
padding: 16px 32px;
cursor: pointer;
color: var(--off-black);
text-decoration: none;
transition: var(--transition);
position: relative;
}
.region-option:hover{
text-decoration: underline;
color: var(--orange);
}
.region-option.region-option--active{
font-weight: 900;
}
.region-option.region-option--active::before{
content: "";
width: 18px;
height: 16px;
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='16' viewBox='0 0 19 16' fill='none'%3E%3Cpath d='M18.2402 8L10.2402 16L7.68164 13.4414L11.3135 9.80957H0V6.19043H11.3135L7.68164 2.55859L10.2402 0L18.2402 8Z' fill='%23303030'/%3E%3C/svg%3E");
}
@media screen and (max-width: 1030px){
.header-actions__search{
display: none;
}
.region-selector{
padding: 50px;
}
.region-selector .h1{
font-size: 40px;
}
.region-selector__options{
gap: 0 40px;
}
}
@media screen and (max-width: 920px){
.header .content-wrapper{
background-color: transparent;
justify-content: flex-start;
border: none;
gap: 0px;
padding: 0px;
}
.header__column.header__column--logo,
.header__column.header__column--nav,
.header__column.header__column--actions{
background-color: white;
}
/* Logo */
.header__column.header__column--logo{
padding: 0px 24px;
border: 1px solid var(--light-grey);
border-right: none;
}
.header__column.header__column--logo img{
min-width: 100px;
height: auto;
}
/* Navigation */
.header__column.header__column--nav{
padding-right: 24px;
border: 1px solid var(--light-grey);
border-left: none;
display: flex;
justify-content: flex-end;
align-items: center;
width: 100%;
}
.header-navigation__parent{
display: none;
}
/* Navigation -> Hamburger */
.hamburger{
display: block;
}
.hamburger .line{
width: 30px;
height: 3px;
background-color: var(--off-black);
display: block;
margin: 6px auto;
-webkit-transition: all 0.3s ease-in-out;
-o-transition: all 0.3s ease-in-out;
transition: all 0.3s ease-in-out;
}
.hamburger:hover{
cursor: pointer;
}
#hamburger.is-active .line:nth-child(2){
opacity: 0;
}
#hamburger.is-active .line:nth-child(1){
-webkit-transform: translateY(10px) rotate(45deg);
-ms-transform: translateY(10px) rotate(45deg);
-o-transform: translateY(10px) rotate(45deg);
transform: translateY(10px) rotate(45deg);
}
#hamburger.is-active .line:nth-child(3){
-webkit-transform: translateY(-8px) rotate(-45deg);
-ms-transform: translateY(-8px) rotate(-45deg);
-o-transform: translateY(-8px) rotate(-45deg);
transform: translateY(-8px) rotate(-45deg);
}
/* Actions */
.header__column.header__column--actions{
padding: 12px 24px;
border: 1px solid var(--light-grey);
}
.header__column.header__column--actions{
margin-left: 10px;
}
.header-actions__cta{
display: none;
}
/* Mobile Menu */
.header-mobile{
display: flex;
flex-direction: column;
padding: 24px 16px;
background-color: white;
border: 1px solid var(--light-grey);
position: absolute;
top: calc(100% + 20px);
left: 50%;
transform: translateX(-50%);
width: calc(100% - 48px);
opacity: 0;
pointer-events: none;
transition: var(--transition);
gap: 20px;
max-height: 800px;
overflow-y: scroll;
}
.header-mobile.header-mobile--active{
opacity: 1;
pointer-events: all;
}
/* Navigation */
.header-mobile__link{
font-size: 22px;
text-decoration: none;
}
/* Navigation -> Accordions */
.header-accordion__body {
display: grid;
height: 0px;
overflow: hidden;
opacity: 0;
}
.header-accordion.header-accordion--active .header-accordion__body {
max-height: 10000px;
height: max-content;
opacity: 1;
transition: opacity var(--transition);
}
.header__mega-menu-child__featured{
min-height: 0;
padding-top: 24px;
}
.header-accordion__title {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 12px;
cursor: pointer;
}
.header-accordion__title p.big-text {
margin-bottom: 0px;
font-size: 22px;
}
.header-accordion__indicator .vertical {
transform-origin: center;
transition: var(--transition);
}
.header-accordion.header-accordion--active .header-accordion__indicator .vertical{
opacity: 0;
}
.header-accordion__body .header__mega-menu-child__featured a{
text-decoration: none;
}
.header__mega-menu-child__featured{
margin-bottom: 32px;
}
.header-accordion__body__links{
display: flex;
flex-direction: column;
}
.header-accordion__body__links .header-mobile__link{
color: var(--blue)!important;
padding: 14px 0px;
border-top: 1px solid var(--light-grey);
}
.header-accordion__body__links .header-mobile__link:first-of-type{
border-top: none;
}
/* Region Selector */
.region-selector__options{
gap: 0 20px;
max-height: 450px;
}
.switcher-body {
left: -24px;
}
.switcher-body:after {
left: unset;
right: 24px;
}
}
@media screen and (max-width: 650px){
.region-selector{
padding: 32px;
gap: 40px;
}
.region-selector__options{
gap: 0 20px;
max-height: 400px;
flex-wrap: unset;
overflow-y: scroll;
}
}
.stepped-icon-cards {
width: 100%;
}
.stepped-icon-cards__title {
max-width: 900px;
width: 100%;
margin-bottom: 80px;
}
.stepped-icon-cards__cards {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr));
gap: 30px;
align-items: start;
container-type: inline-size;
}
.icon-card {
padding: 36px;
background-color: var(--white);
min-height: 360px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.icon-card__icon {
width: 48px;
height: 48px;
aspect-ratio: 1/1;
object-fit: contain;
object-position: center;
}
@container (min-width: 1440px) {
.icon-card:nth-child(3n+2) {
margin-top: 80px;
}
.icon-card:nth-child(3n) {
margin-top: 160px;
}
}
@container (min-width: 950px) and (max-width: 1439px) {
.icon-card:nth-child(3n),
.icon-card:nth-child(3n+2) {
margin-top: -80px;
}
.icon-card:nth-child(2n) {
margin-top: 80px;
}
}
@container (max-width: 949px) {
.icon-card {
margin-top: 0;
}
}
.testimonial-slider{
}
.testimonial-slider__slider{
}
.testimonial-slide{
display: flex;
flex-direction: row;
gap: 0px;
padding-bottom: 100px;
position: relative;
}
.testimonial-slide__column.testimonial-slide__column--content{
width: 70%;
background-color: var(--dark-blue);
padding: 96px 265px 64px 72px;
}
.testimonial-slide.testimonial-slide--no-image .testimonial-slide__column.testimonial-slide__column--content{
width: 100%;
padding: 70px;
}
.testimonial-slide__column.testimonial-slide__column--content svg{
margin-bottom: 64px;
}
.testimonial-slide.testimonial-slide--no-image .testimonial-slide__column.testimonial-slide__column--content svg{
margin-bottom: 48px;
}
.testimonial-slide__column.testimonial-slide__column--content .h3{
color: white;
display: block;
margin-bottom: 48px;
}
.testimonial-slide__user{
display: flex;
flex-direction: row;
gap: 24px;
align-items: center;
margin-bottom: 48px;
}
.testimonial-slide__user img{
width: 84px;
height: 84px;
object-fit: cover;
object-position: center;
}
.testimonial-slide__user-content{
display: flex;
flex-direction: column;
}
.testimonial-slide__user p{
margin-bottom: 0px;
color: white;
}
.testimonial-slide__user p:first-of-type{
font-weight: bold;
}
.testimonial-slide.testimonial-slide--no-image .testimonial-slide__column.testimonial-slide__column--spacer{
display: none;
}
.testimonial-slide__column.testimonial-slide__column--spacer{
width: 30%;
}
.testimonial-slide__image{
position: absolute;
bottom: 0;
right: 0;
width: calc((30% + 265px) - 44px);
height: calc(100% - 96px);
max-height: 840px;
}
.testimonial-slide.testimonial-slide--no-image .testimonial-slide__image{
display: none;
}
.testimonial-slide__image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.testimonial-slider__navigation{
padding: 0px 74px;
margin-top: -64px;
position: relative;
z-index: 30;
}
.testimonial-slider__navigation .slider-navigation__item.swiper-button-disabled svg path{
stroke: var(--cyan)!important;
}
@media screen and (max-width: 1200px){
.testimonial-slide__column.testimonial-slide__column--content{
width: 70%;
padding: 64px 120px 64px 64px;
}
.testimonial-slide.testimonial-slide--no-image .testimonial-slide__column.testimonial-slide__column--content{
padding: 32px;
}
.testimonial-slide__column.testimonial-slide__column--spacer{
width: 30%;
}
.testimonial-slide__image{
position: absolute;
bottom: 0;
right: 0;
width: calc((30% + 120px) - 32px);
height: calc(100% - 96px);
max-height: unset;
}
}
@media screen and (max-width: 900px){
.testimonial-slider{
background-color: var(--dark-blue);
padding-bottom: 36px;
}
.testimonial-slide{
padding-bottom: 70px;
}
.testimonial-slide.testimonial-slide--no-image{
padding-bottom: 0px;
}
.testimonial-slide__column.testimonial-slide__column--content svg{
margin-bottom: 28px;
max-width: 50px;
height: auto;
}
.testimonial-slide__column.testimonial-slide__column--content{
width: 100%;
padding: 48px 24px 36px 24px;
}
.testimonial-slide__column.testimonial-slide__column--content .h3{
font-size: 30px;
margin-bottom: 32px;
}
.testimonial-slide__user {
align-items: flex-start;
flex-direction: column-reverse;
gap: 24px;
}
.testimonial-slide__column.testimonial-slide__column--spacer{
display: none;
}
.testimonial-slide__image{
display: none;
}
.testimonial-slider__navigation{
padding: 0px 24px;
width: 100%;
}
.testimonial-slider__navigation .slider-navigation{
width: 100%;
justify-content: space-between;
}
}
.content-tabber__tabs{
display: grid;
grid-template-columns: 1fr 1fr;
gap: 130px;
}
.content-tabber__tab__navigation.content-tabber__tab__navigation--desktop{
display: block;
position: relative;
}
.content-tabber__tab__navigation.content-tabber__tab__navigation--desktop .navigation-items{
position: sticky;
top: 120px;
left: 0;
}
.content-tabber__tab__navigation.content-tabber__tab__navigation--mobile{
display: none;
}
.content-tabber__tab__navigation-item{
border-top: 1px solid var(--ui-grey);
padding: 24px;
display: flex;
flex-direction: row;
gap: 32px;
justify-content: space-between;
align-items: center;
cursor: pointer;
}
.content-tabber__tab__navigation-item svg{
opacity: 0;
transition: var(--transition);
}
.content-tabber__tab__navigation-item.content-tabber__tab__navigation-item--active svg{
opacity: 1;
}
.content-tabber__tab__navigation-item:first-of-type{
border-top: none;
}
.content-tabber__tab__navigation-item h3{
margin-bottom: 0px;
color: var(--ui-grey);
transition: var(--transition);
}
.content-tabber__tab__navigation-item.content-tabber__tab__navigation-item--active h3,
.content-tabber__tab__navigation-item:hover h3{
color: var(--orange);
}
/* Tab Content */
.content-tabber__tab__tab-content-wrapper{
position: relative;
}
.content-tabber__tab__tab-content{
display: flex;
flex-direction: column;
gap: 100px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max-content;
opacity: 0;
transition: var(--transition);
pointer-events: none;
}
.content-tabber__tab__tab-content.content-tabber__tab__tab-content--active{
opacity: 1;
pointer-events: all;
}
@media screen and (max-width: 1023px){
.content-tabber__tabs{
grid-template-columns: 1fr;
gap: 32px;
}
.content-tabber__tab__navigation.content-tabber__tab__navigation--desktop{
display: none;
}
.content-tabber__tab__navigation.content-tabber__tab__navigation--mobile{
display: block;
}
.content-tabber__tab__navigation--mobile select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
width: 100%;
padding: 12px 24px 12px 0;
border: none;
border-bottom: 1px solid var(--ui-grey);
color: var(--dark-grey);
border-radius: 0;
background-color: transparent;
background-image: url("data:image/svg+xml,%3Csvg width='13' height='8' viewBox='0 0 13 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.3535 0.353516L6.35352 6.35352L0.353515 0.353517' stroke='%236E7D8B'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right center;
}
.content-tabber__tab__tab-content{
gap: 48px;
}
}
.solution-cards{
}
.solution-cards__title{
margin-bottom: 60px;
text-align: center;
}
.solution-cards__title h2{
margin-bottom: 0px;
}
.solution-cards__cards {
display: grid;
gap: 36px;
}
.solution-cards.solution-cards__cards--three-per-row .solution-cards__cards {
grid-template-columns: repeat(3, 1fr);
}
.solution-cards.solution-cards__cards--two-per-row .solution-cards__cards {
grid-template-columns: repeat(2, 1fr);
}
.solution-cards.solution-cards__cards--default .solution-cards__cards {
grid-template-columns: repeat(3, 1fr);
}
.solution-card{
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0px;
position: relative;
}
.solution-card__column{
width: 100%;
position: relative;
}
.solution-card__column.solution-card__column--content{
padding: 60px 32px 60px 24px;
transition: var(--transition);
position: relative;
isolation: isolate;
min-height: 340px;
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 120px;
}
.solution-card:hover .solution-card__column.solution-card__column--content{
padding: 60px 24px 60px 32px;
}
.solution-card__column.solution-card__column--content::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 0%;
height: 100%;
background-color: var(--orange);
transition: var(--transition);
z-index: -1;
}
.solution-card:hover .solution-card__column.solution-card__column--content::before{
width: 100%;
}
.solution-card__column.solution-card__column--content h3,
.solution-card__column.solution-card__column--content p{
color: var(--white);
}
.solution-card__column.solution-card__column--content h3{
-webkit-hyphens: auto;
-ms-hyphens: auto;
hyphens: auto;
word-break: break-word;
overflow-wrap: break-word;
word-wrap: break-word;
}
.solution-card:hover .solution-card__column.solution-card__column--content p{
opacity: 1;
}
.solution-card__column.solution-card__column--content p{
opacity: 0;
transition: var(--transition);
}
.solution-card__column.solution-card__column--image img{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
@media (max-width: 992px) {
.solution-cards.solution-cards__cards--three-per-row .solution-cards__cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.solution-cards.solution-cards__cards--three-per-row .solution-cards__cards,
.solution-cards.solution-cards__cards--two-per-row .solution-cards__cards,
.solution-cards.solution-cards__cards--default .solution-cards__cards {
grid-template-columns: 1fr;
}
.solution-card__column.solution-card__column--content h3 {
font-size: 30px;
}
.solution-card__column.solution-card__column--content::before{
width: 100%;
}
.solution-card:hover .solution-card__column.solution-card__column--content,
.solution-card__column.solution-card__column--content{
padding: 48px 24px;
gap: 32px;
}
.solution-card__column.solution-card__column--content h3{
font-size: 30px;
}
.solution-card__column.solution-card__column--content p{
opacity: 1;
}
}
.hero-image-slider{
position: relative;
isolation: isolate;
z-index: 5;
}
.hero-image-slider .content-wrapper{
display: flex;
flex-direction: row;
gap: 100px;
padding-top: 210px;
padding-bottom: 150px;
max-width: 1440px;
}
.hero-image-slider .content-wrapper a:not(.primary-cta, .secondary-cta){
margin-bottom: 24px;
display: block;
}
.hero-image-slider__column{
width: 50%;
}
.hero-image-slider__column .cta-wrapper{
margin-top: 40px;
}
.hero-image-slider__slider{
position: absolute;
bottom: 0;
right: 0;
height: 100%;
width: 50%;
isolation: isolate;
}
.hero-image-slider__slider.hero-image-slider__slider--overhang .swiper-slide{
height: calc(100% + 40px);
}
.hero-image-slider__slider .swiper-slide{
height: auto;
z-index: 1;
}
.hero-image-slider__slider-image{
height: 100%;
}
.hero-image-slider__slider-image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.hero-image-slider__navigation{
position: absolute;
bottom: 48px;
left: 48px;
z-index: 2;
}
@media screen and (max-width: 940px){
.hero-image-slider .content-wrapper{
flex-direction: column;
padding: 0px 32px;
gap: 0px;
}
.hero-image-slider__column{
width: 100%;
}
.hero-image-slider__column.hero-image-slider__column--content{
padding-top: 120px;
padding-bottom: 60px;
}
.hero-image-slider__column.hero-image-slider__column--spacer{
height: 450px;
}
.hero-image-slider__slider{
height: 450px;
width: 100%;
}
.hero-image-slider__navigation{
width: 100%;
left: 0;
padding: 0px 32px;
}
.hero-image-slider__navigation .slider-navigation--hero-slider{
width: 100%;
justify-content: space-between;
}
.hero-image-slider__slider.hero-image-slider__slider--overhang .swiper-slide{
height: auto;
}
}
/* Looking for .video-media? You can find this in css/elements/_video.css */
.switchback{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 50px;
overflow-y: clip;
}
.switchback.switchback--reverse{
flex-direction: row-reverse;
}
.switchback-column{
width: 50%;
}
/* Content */
.switchback-column.switchback-column--content{
display: flex;
flex-direction: column;
justify-content: center;
}
.switchback-column.switchback-column--content h1{
overflow-wrap: break-word;
-webkit-hyphens: auto;
hyphens: auto;
line-break: loose;
}
.switchback-column.switchback-column--content p:last-of-type{
margin-bottom: 0px;
}
.switchback-column .cta-wrapper{
margin-top: 32px;
gap: 16px;
}
/* Content -> List Items */
.switchback-column__list-item{
display: flex;
flex-direction: column;
}
/* Media */
.switchback-column.switchback-column--media:has(.switchback-image){
display: flex;
justify-content: center;
align-items: center;
max-height: 530px;
/* min-height: 530px; -- Removed for now to see if it has an adverse effects */
aspect-ratio: 1/1;
}
.switchback-column.switchback-column--media{
position: relative;
}
.switchback-column.switchback-column--media img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
aspect-ratio: 1/1;
}
.switchback:has(.switchback-column--media--sticky){
align-items: stretch;
}
.switchback-column--media.switchback-column--media--sticky{
max-height: unset!important;
min-height: unset!important;
align-items: flex-start!important;
}
.switchback-column--media.switchback-column--media--sticky img{
position: sticky;
top: 32px;
left: 0px;
max-height: 530px;
}
@media screen and (max-width: 768px){
.switchback{
gap: 48px;
flex-direction: column!important;
}
.switchback--media-top{
flex-direction: column-reverse!important;
}
.switchback-column.switchback-column--content h2{
margin-bottom: 32px;
}
.switchback-column{
width: 100%;
}
.switchback-column.switchback-column--content{
padding: 0px;
}
.switchback-column.switchback-column--media{
min-height: unset;
}
.switchback-column.switchback-column--media:has(.switchback-image){
min-height: 350px;
max-height: 350px;
}
.switchback-column__cta-wrapper{
margin-top: 30px;
}
}
/* Missing Template at Path: \'fibox-avidly-theme\/css\/modules\/sections\/_tabbed-meeting-form.css\' */
/* Missing Template at Path: \'fibox-avidly-theme\/css\/modules\/sections\/_highlighted-title.css\' */
/* Missing Template at Path: \'fibox-avidly-theme\/css\/modules\/sections\/_product-slider.css\' */
.icon-image-repeater {
display: grid;
row-gap: 0;
justify-items: start;
align-items: start;
}
.icon-image-repeater__items {
display: grid;
grid-gap: 90px 32px;
width: 100%;
}
.icon-image-repeater__items.icon-image-repeater__items--three {
grid-template-columns: repeat(3, 1fr);
grid-gap: 100px 32px;
}
.icon-image-repeater__items.icon-image-repeater__items--four {
grid-template-columns: repeat(4, 1fr);
}
.icon-image-repeater__items.icon-image-repeater__items--three:has(.repeater-image) {
grid-gap: 28px 14px;
}
.icon-image-repeater__items__item .repeater-icon {
width: auto;
object-fit: contain;
}
.icon-image-repeater__items__item .repeater-icon.repeater-icon--small {
max-height: 40px;
min-height: 40px;
margin-bottom: 24px;
}
.icon-image-repeater__items__item .repeater-icon.repeater-icon--large {
max-height: 90px;
min-height: 90px;
margin-bottom: 32px;
}
.icon-image-repeater__items__item.icon-image-repeater__items__item--small-gap .repeater-icon {
margin-bottom: 16px;
}
.icon-image-repeater__items__item.icon-image-repeater__items__item--large-gap .repeater-icon {
margin-bottom: 50px;
}
.icon-image-repeater__items__item {
display: flex;
flex-direction: column;
align-items: flex-start;
}
.icon-image-repeater__items__item.icon-image-repeater__items__item--center {
align-items: center;
text-align: center;
}
.icon-image-repeater__items__item .repeater-image {
width: 100%;
min-height: 340px;
max-height: 470px;
object-fit: cover;
object-position: center;
margin-bottom: 36px;
}
@media screen and (min-width: 1440px) {
.icon-image-repeater__items__item .repeater-image {
min-height: 470px;
}
}
.icon-image-repeater__items__item h3 {
margin-bottom: 28px;
}
.icon-image-repeater__items__item p {
padding-right: 16px;
}
.icon-image-repeater__items__item p:last-of-type {
margin-bottom: 0;
}
@media screen and (max-width: 1023px) {
.icon-image-repeater__items {
grid-gap: 32px 24px;
}
.icon-image-repeater__items.icon-image-repeater__items--three {
grid-template-columns: repeat(2, 1fr);
}
.icon-image-repeater__items.icon-image-repeater__items--four {
grid-template-columns: repeat(2, 1fr);
}
.icon-image-repeater__items.icon-image-repeater__items--three > *:nth-child(3) {
grid-column: 1 / -1;
}
.icon-image-repeater__items__item .repeater-image {
margin-bottom: 32px;
}
}
@media screen and (max-width: 767px) {
.icon-image-repeater__items {
grid-gap: 60px!important;
}
.icon-image-repeater__items.icon-image-repeater__items--three,
.icon-image-repeater__items.icon-image-repeater__items--four {
grid-template-columns: 1fr;
}
.icon-image-repeater__items__item{
align-items: center;
text-align: center;
}
.icon-image-repeater__items__item ul{
width: 100%;
text-align: left;
}
.icon-image-repeater__items__item p {
padding-right: 0px;
}
.icon-image-repeater__items.icon-image-repeater__items--three > *:nth-child(3) {
grid-column: auto;
}
.icon-image-repeater__items__item .repeater-image {
max-height: 400px;
min-height: 400px;
margin-bottom: 24px;
}
}
/* Missing Template at Path: \'fibox-avidly-theme\/css\/modules\/components\/_testimonial.css\' */
.mixed-content {}
.mixed-content.mixed-content--left{
text-align: left;
}
.mixed-content.mixed-content--center{
text-align: center;
}
.mixed-content.mixed-content--right{
text-align: right;
}
.mixed-content.mixed-content--boxed{
padding: 70px 50px;
}
.mixed-content__header h2 {
margin-bottom: 64px;
}
.mixed-content.mixed-content--boxed .mixed-content__columns,
.mixed-content.mixed-content--boxed .mixed-content__header{
max-width: 1440px;
margin: auto;
}
.mixed-content__columns {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
}
.mixed-content.mixed-content--light h1,
.mixed-content.mixed-content--light h2,
.mixed-content.mixed-content--light h3,
.mixed-content.mixed-content--light h4,
.mixed-content.mixed-content--light h5,
.mixed-content.mixed-content--light h6,
.mixed-content.mixed-content--light p,
.mixed-content.mixed-content--light ul,
.mixed-content.mixed-content--light ul li{
color: white !important;
}
.mixed-content__column{
display: flex;
flex-direction: column;
gap: 20px;
}
.mixed-content__column p:last-of-type:not(.label) {
margin-bottom: 0;
}
.mixed-content__column img {
border-radius: var(--radius);
max-height: 700px;
width: 100%;
height: auto;
object-fit: cover;
}
.mixed-content__accordions{
display: flex;
flex-direction: column;
width: 100%;
gap: 10px;
}
.mixed-content__column-item{
text-wrap: balance;
}
.mixed-content__column-item .cta-wrapper{
margin-top: 10px;
}
@media screen and (max-width: 1023px) {
.mixed-content__columns {
grid-template-columns: repeat(2, 1fr);
gap: 48px!important;
}
.mixed-content__column img {
max-height: max-content;
}
}
@media screen and (max-width: 768px) {
.mixed-content__columns {
grid-template-columns: 1fr;
gap: 48px;
}
.mixed-content.mixed-content--boxed{
padding: 60px 20px;
}
}
/* two-per-row */
.mixed-content--two-per-row .mixed-content__columns {
grid-template-columns: repeat(2, 1fr);
gap: 64px;
}
.mixed-content--two-per-row .mixed-content__columns.mixed-content__columns--alt{
grid-template-columns: 30% 70%;
gap: 64px;
}
@media screen and (max-width: 768px) {
.mixed-content--two-per-row .mixed-content__columns {
grid-template-columns: 1fr;
}
.mixed-content--two-per-row .mixed-content__columns.mixed-content__columns--alt {
grid-template-columns: 1fr;
}
}
/* three-per-row */
.mixed-content--three-per-row .mixed-content__columns {
grid-template-columns: repeat(3, 1fr);
}
@media screen and (max-width: 1023px) {
.mixed-content--three-per-row .mixed-content__columns {
grid-template-columns: repeat(2, 1fr);
}
.mixed-content--three-per-row .mixed-content__columns > *:nth-child(3) {
grid-column: 1 / -1;
}
}
@media screen and (max-width: 768px) {
.mixed-content--three-per-row .mixed-content__columns {
grid-template-columns: 1fr;
}
}
/* four-per-row */
.mixed-content--four-per-row .mixed-content__columns {
grid-template-columns: repeat(4, 1fr);
}
@media screen and (max-width: 1023px) {
.mixed-content--four-per-row .mixed-content__columns {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.mixed-content--four-per-row .mixed-content__columns {
grid-template-columns: 1fr;
}
}
.featured-post{
display: flex;
flex-direction: row;
align-items: stretch;
gap: 0px;
background-color: var(--light-grey);
}
.featured-post__column{
width: 50%;
}
.featured-post__column.featured-post__column--media{
position: relative;
min-height: 500px;
}
.featured-post__column.featured-post__column--media img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
position: absolute;
top: 0;
left: 0;
}
.featured-post__column.featured-post__column--content{
padding: 120px 48px 48px 48px;
background-color: var(--light-grey);
position: relative;
}
.featured-label{
display: block;
position: absolute;
color: white;
top: 0;
left: 0;
padding: 16px 48px;
background-color: var(--blue);
}
.featured-post__header{
display: flex;
gap: 32px;
justify-content: space-between;
align-items: center;
margin-bottom: 24px;
}
.featured-post__header .card-date{
color: var(--dark-grey);
margin-bottom: 0px;
}
.featured-post__column--content p:last-of-type {
margin-bottom: 40px;
}
.article-date{
margin-bottom: 12px;
}
@media screen and (max-width: 1100px){
.featured-post__column.featured-post__column--content{
padding: 90px 32px 32px 32px;
}
}
@media screen and (max-width: 767px){
.featured-post{
flex-direction: column;
}
.featured-post__column{
width: 100%;
}
.featured-post__column.featured-post__column--media{
min-height: 350px;
}
.featured-post__column.featured-post__column--media img{
width: 100%;
max-height: 350px;
}
.featured-post__column--content p:last-of-type {
margin-bottom: 24px;
}
}
/* Missing Template at Path: \'fibox-avidly-theme\/css\/modules\/sections\/_highlighted-title.css\' */
/* Missing Template at Path: \'fibox-avidly-theme\/css\/modules\/utility\/_tabbed-drag-and-drop-sections.css\' */
.utility__indicator{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 10px;
width: max-content;
transition: 0.3s ease-in-out;
position: relative;
border-radius: 20px;
background-color: var(--orange);
padding: 4px 12px 4px 4px;
}
.utility__indicator .utility__indicator__icon{
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.utility__indicator .utility__indicator__icon svg{
width: 16px;
}
.utility__indicator .utility__indicator__icon svg path{
fill: white;
}
.utility__indicator .utility__indicator__label span{
font-size: 12px;
color: white;
display: block;
}
/* Macro */
.filterable-listing{
display: flex;
flex-direction: column;
width: 100%;
gap: 70px;
}
.filterable-listing__filters {
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
flex-wrap: wrap;
gap: 24px;
}
.filterable-listing__filters p {
margin-bottom: 0px;
}
.checkbox-filter {
display: flex;
padding: 10px 16px;
background-color: transparent;
border: 2px solid var(--blue);
color: var(--blue);
align-items: center;
transition: var(--transition);
cursor: pointer;
min-width: max-content;
}
.checkbox-filter input[type="checkbox"]{
height: 0;
width: 0;
}
.checkbox-filter p {
font-size: 16px;
font-weight: 600;
transition: var(--transition);
}
.checkbox-filter.checkbox-filter--active,
.checkbox-filter:hover {
background-color: var(--blue);
color: white;
}
.checkbox-filter.checkbox-filter--active p,
.checkbox-filter:hover p {
color: var(--white);
}
.checkbox-filter input[type="checkbox"]::before {
display: none;
}
.filterable-listing.filterable-listing--select .filterable-listing__select{
display: block;
width: 100%;
max-width: 300px;
}
.filterable-listing__select{
display: none;
font-size: 20px;
padding: 10px;
background-color: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
}
/* Card Grid */
.filterable-listing__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
.filterable-listing__cards--four {
grid-template-columns: repeat(4, 1fr);
}
@media (max-width: 1250px) {
.filterable-listing__cards--four {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1023px) {
.filterable-listing__cards:not(.filterable-listing__cards--two):not(.filterable-listing__cards--four) {
grid-template-columns: repeat(2, 1fr);
}
.filterable-listing__cards:not(.filterable-listing__cards--two):not(.filterable-listing__cards--four) > *:nth-child(3) {
grid-column: 1 / -1;
}
.filterable-listing__cards--two{
grid-template-columns: repeat(2, 1fr);
}
.filterable-listing__cards--two > *:nth-child(3) {
grid-column: auto;
}
}
@media (max-width: 767px) {
.filterable-listing__filters {
justify-content: flex-start;
}
.filterable-listing__cards {
grid-template-columns: 1fr;
gap: 16px;
}
.filterable-listing.filterable-listing--select .filterable-listing__select {
max-width: unset;
}
}
@media (max-width: 1023px) {
.filterable-listing__cards--two {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.filterable-listing {
gap: 40px;
}
.filterable-listing__filters {
display: none;
}
.filterable-listing__select {
display: block;
}
.filterable-listing__cards,
.filterable-listing__cards--four {
grid-template-columns: repeat(1, 1fr) !important;
gap: 32px;
}
}
.product-listing-wrapper{
/* isolation: isolate; */
}
.product-hubdb-listing__header {
padding: 60px 0;
}
.product-introbox {
display: grid;
grid-template-columns: 1fr;
align-items: center;
gap: 64px;
}
.product-hubdb-listing__header img {
width: 100%;
}
.product-hubdb-listing__header__cta {
display: flex;
align-items: center;
gap: 16px;
color: var(--orange);
}
.product-hubdb-listing__header__cta:hover{
text-decoration: underline;
color: var(--orange);
}
.product-introbox__img {
background: white;
align-items: center;
justify-content: center;
display: flex;
padding: 24px;
order: 2;
}
.product-listings-wrapper {
background-color: var(--ui-light-grey);
padding-top: 150px;
padding-bottom: 60px;
}
.product-listings__spacer_tp {
padding-top: 54px;
}
.product-listings__spacer_bp {
padding-bottom: 54px;
}
.product-listing-pagination-wrapper {
grid-column: -1 / 1;
width: 100%;
}
.product-listing__pagination {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.product-listing__pagination button {
width: 30px;
height: 30px;
display: flex;
align-items: center;
justify-content: center;
border: none;
background-color: transparent;
cursor: pointer;
}
.product-listing__pagination button.active {
background-color: var(--orange);
color: white;
}
.product-grid__no-results {
padding: 32px;
border: 1px solid var(--light-grey);
grid-column: -1 / 1;
width: 100%;
display: none;
align-self: flex-start;
}
.product-grid__no-results p {
margin-bottom: 0px;
}
.product-listing-layout {
display: flex;
flex-direction: row;
gap: 70px;
justify-content: center;
}
.product_grid__mobile-filter {
display: flex;
flex-direction: row;
gap: 12px;
align-items: center;
width: 100%;
cursor: pointer;
grid-column: -1 / 1;
}
.product-grid__heading {
grid-column: -1 / 1;
}
.product-grid__heading h3 {
margin-bottom: 0;
}
@media screen and (min-width: 900px) {
.product-hubdb-listing__header {
padding: 120px 0;
}
.product_grid__mobile-filter {
display: none;
}
.product-introbox {
grid-template-columns: 1fr 1fr;
}
.product-introbox__img {
order: initial;
}
}
@media screen and (min-width: 1024px) {
.product-listings__spacer_tp {
padding-top: 108px;
}
.product-listings__spacer_bp {
padding-bottom: 108px;
}
}
.product_grid{
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-gap: 40px;
width: 100%;
margin-bottom: 80px;
}
.product_card{
padding: 24px 24px 60px 24px;
position: relative;
background-color: white;
cursor: pointer;
height: 100%;
}
.product_card__cover-link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 1;
display: block;
}
.product_card.product_card--hidden{
display: none;
}
.product_card_image{
height: 245px;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.product_card_image img{
height: 100%;
width: 100%;
object-fit: contain;
transition: var(--transition);
}
.product_card__content{
padding-top: 24px;
}
.product_card__category{
display: block;
color: var(--blue, #3994D7);
font-family: Archivo;
font-size: 12px;
margin-bottom: 6px;
}
.product_card__title{
font-weight: 800;
font-size: 20px;
line-height: 1.2;
margin-bottom: 6px;
}
.product_card .card-dimensions{
font-size: 12px;
margin-bottom: 6px;
color: var(--dark-grey);
}
.product_card p:last-of-type:not(.card-dimensions){
margin-bottom: 0px;
}
.product_card__cta{
position: absolute;
right: 0;
bottom: 0px;
height: 38px;
width: 38px;
display: flex;
align-items: center;
justify-content: center;
background-color: var(--blue);
transition: var(--transition);
}
.product_card:hover .product_card__cta{
background-color: var(--orange);
}
.product_card:hover .product_card_image img{
transform: scale(1.1);
}
.product_card.product_item.always-hide{
display: none !important;
/* opacity: 0.5; */
}
.product_card.product_item.always-hide{
position: relative;
isolation: isolate;
pointer-events: none;
}
.product_card.product_item.always-hide:before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5);
z-index: 2;
backdrop-filter: blur(4px);
}
.product_card.product_item.always-hide:after{
content: "Not currently available in your region";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 18px;
color: black;
z-index: 3;
padding: 40px;
text-align: center;
line-height: 1.2;
}
.product_card.product_item.general-accessories.always-hide:before{
display: none;
}
.product_card.product_item.general-accessories.always-hide:after{
display: none;
}
.product_card.product_item.general-accessories.always-hide{
position: relative;
isolation: isolate;
pointer-events: initial;
opacity: 1;
}
.accordion-item {
border-bottom: 1px solid #DCDFE3;
/* max-width: 600px; */
}
.accordion-header {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 24px 0;
background: none;
border: none;
cursor: pointer;
font-size: 1.1rem;
font-weight: bold;
transition: var(--transition);
}
.accordion-item__first-item .accordion-header{
padding-top: 0;
}
/* Icon Animation */
.icon {
transition: transform 0.3s ease;
}
.accordion-item.active .icon {
transform: rotate(45deg); /* Turns the plus into a close 'x' */
}
/* Content Animation Logic */
.accordion-content {
display: grid;
grid-template-rows: 0fr;
transition: grid-template-rows 0.3s ease-out;
overflow: hidden;
}
.accordion-item.active .accordion-content {
grid-template-rows: 1fr;
}
.content-inner {
min-height: 0;
transition: padding 0.3s ease;
}
/* .accordion-item.active .content-inner {
padding: 0;
} */
.latest-articles__title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 50px;
margin-bottom: 54px;
}
.latest-articles__title h2,
.latest-articles__title h3{
margin-bottom: 0px;
}
.latest-articles__title a{
color: var(--orange);
}
.latest-articles__articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 46px;
align-items: stretch;
}
.latest-articles--four .latest-articles__articles{
grid-template-columns: repeat(4, 1fr);
gap: 28px;
}
.latest-articles__articles .article-card{
display: flex;
opacity: 1;
}
@media (max-width: 1023px) {
.latest-articles__articles,
.latest-articles--four .latest-articles__articles{
grid-template-columns: repeat(2, 1fr);
}
.latest-articles__title .primary-cta{
display: none;
}
}
@media (max-width: 767px) {
.latest-articles__title{
flex-direction: column;
align-items: flex-start;
gap: 24px;
margin-bottom: 32px;
}
.latest-articles__articles,
.latest-articles--four .latest-articles__articles{
grid-template-columns: 1fr;
gap: 30px;
}
}
.modal {
position: fixed;
inset: 0;
width: 100vw;
height: 100vh;
z-index: 99999999999;
pointer-events: none;
opacity: 0;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
}
.modal.modal--show {
opacity: 1;
pointer-events: all;
}
.modal::before {
content: "";
position: absolute;
inset: 0;
background-color: black;
opacity: 0.8;
pointer-events: none;
}
.modal__content{
position: relative;
max-width: 85vw;
width: 85vw;
max-height: 90vh;
background: white;
border-radius: 20px;
box-shadow: 0 0 50px rgba(0,0,0,0.4);
overflow-y: auto;
padding: 20px;
z-index: 1;
display: flex;
flex-direction: column;
box-sizing: border-box;
isolation: isolate;
}
.modal__content * {
max-width: 100%;
box-sizing: border-box;
}
.modal__content iframe,
.modal__content video {
width: 100% !important;
height: auto !important;
max-height: 60vh;
display: block;
}
.modal__content video{
max-height: unset;
}
.modal__content:has(video){
padding: 0px;
}
.modal__content .video-media{
z-index: 1;
}
.modal__content:has(video) .modal-close-icon svg path{
fill: white!important;
}
.modal-close-icon {
position: absolute;
top: 16px;
right: 32px;
cursor: pointer;
z-index: 2;
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.modal-close-icon:hover svg path {
fill: var(--teal);
transition: var(--transition);
}
.modal-close-icon .label{
margin-bottom: 0px;
color: var(--mint);
}
/* Custom Macro Behaviours */
.modal .video-media.video-media--paused .video-media__controls{
pointer-events: none;
}
.modal--show .video-media.video-media--paused .video-media__controls{
pointer-events: all;
}
/* Sections */
/* Settings */
:root {
--black: #000;
--white: #fff;
--off-black: #303030;
--dark-blue: #1C587E;
--blue: #3994D7;
--orange: #FF7B2D;
--cyan: #39B3E1;
--dark-grey: #6E7D8B;
--light-grey: #DCDFE3;
--ui-grey: #96A7B6;
--ui-light-grey: #F4F5F6;
--ui-red: #FF2020;
--ui-light-red: #FFACAC;
--ui-light-blue: #C9E8FF;
--transition: 0.3s ease-in-out;
interpolate-size: allow-keywords;
}
/* Helpers */
.hide-desktop{
display: none;
}
[id] {
scroll-margin-top: 150px;
}
body.no-scroll{
overflow-y: clip;
}
p a{
text-decoration: underline;
color: inherit;
}
@media screen and (max-width: 767px){
.hide-desktop{
display: flex!important;
}
.hide-mobile{
display: none!important;
}
}
/* All */
*{
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
html {
scroll-behavior: smooth;
}
.inner-container{
max-width: 1440px;
margin: 0 auto;
}
.body-wrapper{
overflow-x: clip;
}
.cover-link{
position: absolute!important;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
a{
font-weight: 400!important;
}
.big-text{
font-size: 20px;
line-height: 1.5;
}
.small-text{
font-size: 14px;
line-height: 1.4;
}
blockquote {
font-size: 24px;
line-height: 1.4;
border: 0px;
padding: 0px;
margin-bottom: 0px;
}
.label{
font-size: 20px;
line-height: 1.5;
text-transform: uppercase;
}
.hs-banner-optimization-animation{
box-shadow: none!important;
}
.hs-banner-parent{
position: relative!important;
}
body:has(.hs-banner-optimization-animation):not(body:has(.hs-banner-optimization-animation.hs-hidden)) .cookie-overlay{
opacity: 0.7;
}
ul li::marker{
font-size: 20px;
color: var(--orange);
}
ul.inputs-list{
list-style: none;
margin: 0!important;
padding: 0!important;
}
ul.inputs-list li{
padding: 0px;
margin: 0px;
line-height: 1.5;
}
/* Custom List Style */
.icon-checklist {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 20px;
}
.icon-checklist li {
--icon-size: 1.25rem;
--icon-gap: 0.75rem;
position: relative;
padding-left: calc(var(--icon-size) + var(--icon-gap));
margin: 0;
}
.icon-checklist li::before {
content: "";
position: absolute;
left: 0;
top: 0;
width: var(--icon-size);
height: var(--icon-size);
background-repeat: no-repeat;
background-size: 100% 100%;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='51' height='51' viewBox='0 0 51 51' fill='none'%3E%3Crect width='51' height='51' fill='%233994D7'/%3E%3Cpath d='M10.1992 26.0327L19.8159 35.6494L39.0492 16.4161' stroke='white' stroke-width='6'/%3E%3C/svg%3E");
}
.icon-checklist.icon-checklist--light li{
color: var(--white);
}
.icon-checklist.icon-checklist--light li::before{
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30' fill='none'%3E%3Cpath d='M8 14.5519L12.221 18.7729L20.9938 10' stroke='white' stroke-width='2.0953'/%3E%3Ccircle cx='14.9184' cy='14.9194' r='11.3695' transform='rotate(-105 14.9184 14.9194)' stroke='url(%23paint0_linear_6884_872)' stroke-width='1.62422'/%3E%3Cdefs%3E%3ClinearGradient id='paint0_linear_6884_872' x1='4.79978' y1='2.73779' x2='27.2063' y2='21.6825' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%2351FFDC'/%3E%3Cstop offset='1' stop-color='%23544BFF'/%3E%3C/linearGradient%3E%3C/defs%3E%3C/svg%3E");
}
.icon-checklist li {
color: #111;
}
.icon-checklist li strong {
color: inherit;
}
.widget-type-linked_image{
overflow: clip;
}
.article-quote{
padding-left: 60px;
border-left: 4px solid var(--orange);
display: block;
}
.article-quote span{
display: block;
margin-bottom: 40px;
}
.article-quote p{
margin-bottom: 0px;
}
@media screen and (max-width: 768px) {
.align-center-mobile{
text-align: center;
}
.big-text{
font-size: 18px;
line-height: 1.4;
}
blockquote {
font-size: 30px;
line-height: 1.3;
}
}
/* Utilities */
img {
max-width: 100%;
height: auto;
}
a,
a.button {
transition: all 0.3s;
}
a.cover {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
}
.d-grid {
display: grid;
}
.d-flex {
display: flex;
}
.d-block {
display: block;
}
.d-none {
display: none;
}
.flex-wrap {
flex-wrap: wrap;
}
.justify-content-start {
justify-content: flex-start;
}
.justify-content-center {
justify-content: center;
}
.justify-content-between {
justify-content: space-between;
}
.justify-content-around {
justify-content: space-around;
}
.justify-content-end {
justify-content: flex-end;
}
.align-items-start {
align-items: flex-start;
}
.align-items-end {
align-items: flex-end;
}
.align-items-center {
align-items: center;
}
.align-items-baseline {
align-items: baseline;
}
.align-items-stretch {
align-items: stretch;
}
.flex-row {
flex-direction: row;
}
.flex-row-reverse {
flex-direction: row-reverse;
}
.flex-col {
flex-direction: column;
}
.flex-col-reverse {
flex-direction: column-reverse;
}
.text-center {
text-align: center;
}
.w-100 {
width: 100%;
}
.position-fixed {
position: fixed !important;
}
@media screen and (max-width: 767px) {
.flex-phone {
display: flex;
}
.flex-row-phone {
flex-direction: row;
}
.flex-row-reverse-phone {
flex-direction: row-reverse;
}
.flex-col-phone {
flex-direction: column;
}
.flex-col-reverse-phone {
flex-direction: column-reverse;
}
}
@media screen and (min-width: 768px) and (max-width: 1024px) {
.flex-row-tablet {
flex-direction: row;
}
.flex-row-reverse-tablet {
flex-direction: row-reverse;
}
.flex-col-tablet {
flex-direction: column;
}
.flex-col-reverse-tablet {
flex-direction: column-reverse;
}
}
/* = box shadows -------------------- */
.shadow {
box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
.shadow-md {
box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
0 2px 4px -1px rgba(0, 0, 0, 0.06);
}
.shadow-lg {
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
0 4px 6px -2px rgba(0, 0, 0, 0.05);
}
.shadow-xl {
box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
0 10px 10px -5px rgba(0, 0, 0, 0.04);
}
.shadow-2xl {
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}
/* For content that needs to be visually hidden but stay visible for screenreaders */
/* stylelint-disable declaration-no-important */
.show-for-sr {
position: absolute !important;
overflow: hidden !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}
@media (max-width: 767px) {
.show-for-sr--mobile {
position: absolute !important;
overflow: hidden !important;
height: 1px !important;
width: 1px !important;
padding: 0 !important;
border: 0 !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
}
}
/* stylelint-enable declaration-no-important */