/* Theme base styles */
/* Generic */
/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
*, *:before, *:after {
box-sizing: border-box;
}
/* Document
========================================================================== */
/**
* 1. Correct the line height in all browsers.
* 2. Prevent adjustments of font size after orientation changes in iOS.
*/
html {
line-height: 1.15; /* 1 */
-webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
========================================================================== */
/**
* Remove the margin in all browsers.
*/
body {
margin: 0;
}
/**
* Render the `main` element consistently in IE.
*/
main {
display: block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.
*/
h1 {
font-size: 2em;
margin: 0.67em 0;
}
/* Grouping content
========================================================================== */
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.
*/
hr {
box-sizing: content-box; /* 1 */
height: 0; /* 1 */
overflow: visible; /* 2 */
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
pre {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/* Text-level semantics
========================================================================== */
/**
* Remove the gray background on active links in IE 10.
*/
a {
background-color: transparent;
}
/**
* 1. Remove the bottom border in Chrome 57-
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
*/
abbr[title] {
border-bottom: none; /* 1 */
text-decoration: underline; /* 2 */
text-decoration: underline dotted; /* 2 */
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.
*/
b,
strong {
font-weight: bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp {
font-family: monospace, monospace; /* 1 */
font-size: 1em; /* 2 */
}
/**
* Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/* Embedded content
========================================================================== */
/**
* Remove the border on images inside links in IE 10.
*/
img {
border-style: none;
}
/* Forms
========================================================================== */
/**
* 1. Change the font styles in all browsers.
* 2. Remove the margin in Firefox and Safari.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit; /* 1 */
font-size: 100%; /* 1 */
line-height: 1.15; /* 1 */
margin: 0; /* 2 */
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.
*/
button,
input { /* 1 */
overflow: visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.
*/
button,
select { /* 1 */
text-transform: none;
}
/**
* Correct the inability to style clickable types in iOS and Safari.
*/
button,
[type="button"],
[type="reset"],
[type="submit"] {
-webkit-appearance: button;
}
/**
* Remove the inner border and padding in Firefox.
*/
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
border-style: none;
padding: 0;
}
/**
* Restore the focus styles unset by the previous rule.
*/
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
outline: 1px dotted ButtonText;
}
/**
* Correct the padding in Firefox.
*/
fieldset {
padding: 0.35em 0.75em 0.625em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
* `fieldset` elements in all browsers.
*/
legend {
box-sizing: border-box; /* 1 */
color: inherit; /* 2 */
display: table; /* 1 */
max-width: 100%; /* 1 */
padding: 0; /* 3 */
white-space: normal; /* 1 */
}
/**
* Add the correct vertical alignment in Chrome, Firefox, and Opera.
*/
progress {
vertical-align: baseline;
}
/**
* Remove the default vertical scrollbar in IE 10+.
*/
textarea {
overflow: auto;
}
/**
* 1. Add the correct box sizing in IE 10.
* 2. Remove the padding in IE 10.
*/
[type="checkbox"],
[type="radio"] {
box-sizing: border-box; /* 1 */
padding: 0; /* 2 */
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.
*/
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
height: auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.
*/
[type="search"] {
-webkit-appearance: textfield; /* 1 */
outline-offset: -2px; /* 2 */
}
/**
* Remove the inner padding in Chrome and Safari on macOS.
*/
[type="search"]::-webkit-search-decoration {
-webkit-appearance: none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button; /* 1 */
font: inherit; /* 2 */
}
/* Interactive
========================================================================== */
/*
* Add the correct display in Edge, IE 10+, and Firefox.
*/
details {
display: block;
}
/*
* Add the correct display in all browsers.
*/
summary {
display: list-item;
}
/* Misc
========================================================================== */
/**
* Add the correct display in IE 10+.
*/
template {
display: none;
}
/**
* Add the correct display in IE 10.
*/
[hidden] {
display: none;
}
/* 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 {
padding: 0 32px;
margin: 0 auto;
}
.content-wrapper-full{
max-width: 1200px64px;
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;
}
}
/* Elements */
/* Insight Cards */
.insight-card{
position: relative;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
border-radius: 8px;
padding: 0px 30px 30px 30px;
overflow: hidden;
}
.insight-card::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 0%, rgba(0, 0, 0, 0.90) 100%);
opacity: 0.85;
pointer-events: none;
z-index: 1;
transition: var(--transition);
}
.insight-card:hover::before{
opacity: 1;
}
.insight-card__content{
height: 100%;
display: flex;
flex-direction: column;
gap: 20px;
padding-top: 240px;
position: relative;
z-index: 2;
}
.insight-card__content p,
.insight-card__content h4{
margin-bottom: 0px;
color: var(--white);
}
.insight-card__content .primary-cta,
.insight-card__content .secondary-cta{
max-width: max-content;
}
@media screen and (max-width: 767px){
.insight-card__content .primary-cta,
.insight-card__content .secondary-cta{
max-width: unset;
}
}
.insight-card__content-footer{
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-grow: 1;
}
/* Location Cards */
.location-card{
display: flex;
flex-direction: column;
border-radius: 8px;
overflow: hidden;
height: 100;
}
.location-card__image{
overflow: hidden;
width: 100%;
height: 190px;
}
.location-card__image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.location-card__content{
padding: 20px;
background-color: var(--white);
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
justify-content: flex-start;
}
.location-card__content-header h4,
.location-card__content-header p{
margin-bottom: 0px;
}
/* Team Member */
.team-member{
height: 100%;
padding: 40px 40px 20px 40px;
background-color: var(--white);
border-radius: 8px;
display: flex;
flex-direction: column;
align-items: center;
gap: 24px;
}
.team-member__image{
width: 100%;
height: 100%;
max-width: 140px;
max-height: 140px;
overflow: hidden;
border-radius: 100%;
}
.team-member__image img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.team-member__header{
text-align: center;
display: flex;
flex-direction: column;
gap: 10px;
}
.team-member__header h5,
.team-member__header p,
.team-member__body p{
margin-bottom: 0px;
}
.team-member__footer{}
.team-member__social{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
padding: 10px 20px;
gap: 10px;
border-radius: 32px;
background-color: var(--hunter-green-light);
position: relative;
transition: var(--transition);
}
.team-member__social:hover{
background-color: var(--teal);
}
.team-member__social svg path{
fill: var(--teal);
transition: var(--transition);
}
.team-member__social:hover svg path{
fill: var(--white);
}
.team-member__social p{
margin-bottom: 0px;
color: var(--teal);
transition: var(--transition);
}
.team-member__social:hover p{
color: var(--white);
}
/* Product Card (All Products Listing) */
.product-card{
display: flex;
flex-direction: column;
padding: 24px 24px 32px 24px;
border-radius: 10px;
background-color: var(--white);
height: 100%;
border: 1px solid var(--grey);
box-shadow: var(--box-shadow--hidden);
transition: box-shadow var(--transition);
}
.product-card.product-card--hide{
display: none;
}
.product-card:hover{
box-shadow: var(--box-shadow);
}
.product-card__header-icon{
width: 50px;
height: 50px;
object-fit: contain;
margin-bottom: 10px;
}
.product-card__header h5{
margin-bottom: 10px;
}
.product-card__header .small-text{
margin-bottom: 10px;
color: #5b7175;
}
.product-card__body{
margin-bottom: 20px;
}
.product-card__body p{
margin-bottom: 0px;
}
.product-card__footer{
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
}
.product-card__footer .primary-cta{
max-width: unset;
width: 100%;
}
/* Article cards */
.article-card {
border-radius: 10px;
overflow: hidden;
display: none;
flex-direction: column;
height: 100%;
opacity: 0;
transition: var(--transition);
position: relative;
border: 1px solid var(--grey);
box-shadow: var(-box-shadow--hidden);
}
.article-card:hover{
box-shadow: var(--box-shadow);
}
.article-card.article-card--visible{
display: flex;
opacity: 1;
}
.article-card.certification {
flex-direction: column;
gap: 0;
}
.article-card__header{
height: 200px;
width: 100%;
background-color: var(--tiber-green);
position: relative;
}
.article-card__header-tag{
display: block;
color: var(--white);
border-radius: 50px;
background-color: rgba(7, 39, 45, 0.80);
padding: 4px 16px;
position: absolute;
top: 20px;
right: 16px;
}
.article-card__header img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.article-card__body{
background-color: white;
padding: 30px;
display: flex;
flex-direction: column;
gap: 20px;
flex-grow: 1;
}
.article-card__tag{
color: var(--teal);
line-height: 1;
}
.article-card__body h5,
.article-card__body p{
margin-bottom: 0px!important;
}
.article-card__footer{
display: flex;
flex-grow: 1;
flex-direction: row;
gap: 20px;
justify-content: space-between;
align-items: flex-end;
}
.article-card__footer-item{
display: flex;
margin-bottom: 0px;
line-height: 1;
}
.article-card__location{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.article-card__footer-item:last-of-type{
justify-content: flex-end;
}
.article-card__footer > .article-card__footer-item:only-of-type {
width: 100%;
justify-content: flex-start;
}
.article-card__footer-item .primary-cta,
.article-card__footer-item .secondary-cta{
max-width: unset;
width: 100%;
}
/* Featured Card */
.featured-card {
border-radius: 10px;
overflow: hidden;
background-size: cover;
background-position: center;
padding: 24px 16px;
position: relative;
height: 100%;
display: flex;
flex-direction: column;
transition: var(--transition);
}
.featured-card:hover .text-cta {
font-weight: 500 !important;
}
.featured-card:hover .text-cta::before {
width: 100%;
z-index: -1;
}
.featured-card a:not(.primary-cta):not(.secondary-cta):not(.text-cta).featured-card-link {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
z-index: 2;
}
.featured-card a.featured-card-link::before {
content: none !important;
}
.filterable-listing__cards .featured-card{
display: none;
opacity: 0;
}
.filterable-listing__cards .featured-card.featured-card--visible{
display: flex;
opacity: 1;
}
.featured-card::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(180deg, rgba(7, 39, 45, 0) 30%, #07272D 100%);
z-index: 2;
pointer-events: none;
}
.featured-card__upper-content{
display: flex;
justify-content: flex-end;
}
.featured-card__upper-content span{
display: block;
color: var(--white);
border-radius: 50px;
background-color: rgba(7, 39, 45, 0.50);
padding: 4px 16px;
}
.featured-card__upper-content-logo{
aspect-ratio: 1/1;
width: 100px;
height: 100px;
background-color: var(--white);
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
}
.featured-card__upper-content-logo img{
max-width: 86px;
height: auto;
max-height: 40px;
object-fit: contain;
object-position: center;
}
.featured-card__body{
margin-top: 180px;
position: relative;
z-index: 3;
display: flex;
flex-direction: column;
gap: 16px;
margin-bottom: 24px;
}
.featured-card__tags{
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
width: 100%;
}
.featured-card__tag{
border-radius: 50px;
border: 1px solid var(--grey);
background: var(--white);
padding: 4px 16px;
}
.featured-card__body,
.featured-card__footer{
padding: 0px 16px;
}
.featured-card__footer{
display: flex;
align-items: flex-end;
flex-grow: 1;
}
.featured-card__footer .text-cta{
max-height: max-content;
}
.featured-card__body h3,
.featured-card__body p{
color: white;
margin-bottom: 0px;
}
/* Glossary Card */
.glossary-card{
border-radius: 10px;
overflow: hidden;
display: none;
flex-direction: column;
height: 100%;
opacity: 0;
transition: var(--transition);
position: relative;
padding: 20px;
background-color: var(--white);
}
.glossary-card.glossary-card--visible{
display: flex;
opacity: 1;
}
.glossary-card__header{
margin-bottom: 10px;
}
.glossary-card__body h4{
margin-bottom: 0px;
color: var(--teal);
margin-bottom: 10px;
}
.glossary-card__body p{
margin-bottom: 0px;
}
/* Product Bundle Cards */
.bundle-card{
border-radius: var(--radius);
border: 1px solid var(--grey);
overflow: hidden;
box-shadow: var(--box-shadow--hidden);
transition: var(--transition);
display: flex;
flex-direction: column;
background-color: var(--white);
}
.bundle-card:hover{
box-shadow: var(--box-shadow);
}
.bundle-card__header{
position: relative;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 220px;
}
.bundle-card__header::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0.00) 0%, #FFF 100%);
pointer-events: none;
}
.bundle-card__body{
padding: 10px 32px 0px 32px;
margin-bottom: 20px;
background-color: white;
}
.bundle-card__body h4{
margin-bottom: 16px;
}
.bundle-card__body p{
margin-bottom: 0px;
}
.bundle-card__footer{
padding: 0px 32px 20px 32px;
background-color: white;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-grow: 1;
gap: 20px;
width: 100%;
}
.bundle-card__footer-product{
display: flex;
flex-direction: row;
gap: 20px;
justify-content: space-between;
}
.bundle-card__footer-product-icons{
display: flex;
flex-direction:row;
}
.bundle-card__footer-product-icon{
width: 26px;
height: 26px;
object-fit: contain;
object-position: bottom left;
border: 2px solid var(--white);
border-radius: 8px;
margin-left: -8px;
transform: scale(1);
z-index: 1;
transition: 0.15s linear;
position: relative;
}
.bundle-card__footer-product-icon:first-of-type{
margin-left: 0px;
}
.bundle-card__footer-product-icon:hover{
transform:scale(1.1);
z-index:2;
}
.bundle-card__footer-product-amount p{
color: var(--tiber-green);
opacity: 0.6;
margin-bottom: 0px;
}
.bundle-card__footer-ctas{
display: flex;
flex-direction: column;
gap: 20px;
justify-content: center;
align-items: center;
width: 100%;
}
.bundle-card__footer-ctas .primary-cta,
.bundle-card__footer-ctas .secondary-cta{
max-width: unset;
width: 100%;
}
.bundle-card__footer-ctas .bundle-card__cta{
max-width: max-content;
}
/* Step Card */
.step-card{
display: flex;
flex-direction: column;
border-radius: var(--radius);
padding: 32px 32px 40px 32px;
height: 100%;
}
.step-card__header{
display: flex;
flex-direction: row;
gap: 40px;
justify-content: space-between;
margin-bottom: 32px;
}
.step-card__header-icon img{
min-width: 48px;
min-height: 48px;
object-fit: contain;
object-position: center;
}
.step-card__header-step span{
display: block;
font-size: 96px;
line-height: 0.7;
font-weight: 600;
color: var(--hunter-green);
}
.step-card__footer{
display: flex;
flex-grow: 1;
justify-content: flex-end;
align-items: flex-end;
width: 100%;
margin-top: 60px;
}
/* Partner Cards */
.partner-card{
background-color: var(--white);
border-radius: 8px;
padding: 32px;
display: flex;
flex-direction: column;
gap: 40px;
}
.partner-card.partner-card--hide{
display: none;
}
.partner-card__header{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
}
.partner-card__header img{
height: 100%;
width: auto;
max-width: 180px;
object-fit: contain;
object-position: center;
}
.partner-card__body{
display: flex;
align-items: flex-end;
text-align: center;
}
.partner-card__footer{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
/* Tools and Template Cards */
.tools-card{
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: flex-start;
gap: 0px;
opacity: 1;
border-radius: var(--radius);
overflow: hidden;
background-color: var(--white);
pointer-events: all;
}
.tools-card.tools-card--hide{
display: none;
opacity: 0;
pointer-events: none;
}
.tools-card__image{
width: 35%;
min-width: 200px;
height: 100%;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.tools-card__content{
padding: 24px 30px;
width: 65%;
}
/* Related Blog Card */
.related-blog-card{
border-radius: 10px;
overflow: hidden;
flex-direction: column;
transition: var(--transition);
position: relative;
padding: 16px 20px;
background-color: #e5f3ea;
}
.related-blog-card__header{
margin-bottom: 10px;
}
.related-blog-card__header-tag{
color: var(--teal);
}
.related-blog-card__body h6{
margin-bottom: 0px;
margin-bottom: 10px;
}
.related-blog-card__body p{
margin-bottom: 0px;
}
/* Client Testimonial */
.client-testimonial{
background-color: #cce8e5;
display: flex;
flex-direction: column;
gap: 30px;
padding: 40px 30px;
border-radius: 8px;
align-items: center;
height: 100%;
position: relative;
border: 1px solid transparent;
box-shadow: var(--box-shadow--hidden);
transition: var(--transition);
}
.client-testimonial.client-testimonial--no-logo{
padding-top: 64px;
}
.client-testimonial:hover{
background-color: var(--white);
border: 1px solid var(--grey);
box-shadow: var(--box-shadow);
}
.client-testimonial .slider-navigation__item{
position: absolute!important;
top: 16px;
right: 16px;
opacity: 0;
}
.client-testimonial:hover .slider-navigation__item{
opacity: 1;
}
.client-testimonial .slider-navigation__item::before{
display: none!important;
}
.client-testimonial__logo img{
max-height: 50px;
width: max-content;
}
.client-testimonial blockquote{
text-align: center;
}
.client-testimonial__footer{
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
}
.client-testimonial__footer img{
height: 48px;
width: 48px;
object-fit: cover;
object-position: center;
border-radius: 100%;
margin-bottom: 16px;
}
.client-testimonial__footer p{
text-align: center;
margin-bottom: 0px;
}
.client-testimonial__footer .small-text{
color: var(--grey);
}
.client-testimonial__footer .additional-content{
margin-top: 24px;
color: var(--teal)!important;
font-weight: 600;
}
@media screen and (max-width: 1200px){
.team-member{
padding: 40px 24px 20px 24px;
}
.tools-card__content{
padding: 24px 30px;
width: 100%;
}
}
@media screen and (max-width: 1100px){
.tools-card{
flex-direction: column;
}
.tools-card__image{
width: 100%;
height: 200px;
}
}
@media screen and (max-width: 767px){
.featured-card__body,
.featured-card__footer{
padding: 0px;
}
}
/* Product Bundle Cards */
.product-bundle-card{
display: flex;
flex-direction: column;
padding: 28px;
border-radius: 10px;
border: 1px solid var(--grey);
position: relative;
box-shadow: 0px 24px 44px 0px rgba(0, 57, 52, 0), 0px 19px 24px 0px rgba(0, 104, 94, 0), 0px 10px 30px 0px rgba(0, 104, 94, 0);
transition: var(--transition);
height: 100%;
}
.product-bundle-card:hover{
background-color: #F2FAF5;
box-shadow: 0px 24px 44px 0px rgba(0, 57, 52, 0.10), 0px 19px 24px 0px rgba(0, 104, 94, 0.08), 0px 10px 30px 0px rgba(0, 104, 94, 0.05);
}
.product-bundle-card__content{
position: relative;
overflow-y: clip;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.product-bundle-card__content::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 70px;
background: linear-gradient(0deg, rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 0) 100%);
opacity: 1;
transition: var(--transition);
z-index: 3;
}
.product-bundle-card:hover .product-bundle-card__content::after{
opacity: 0;
}
.product-bundle-card__content-icon{
opacity: 1;
transition: var(--transition);
}
.product-bundle-card:hover .product-bundle-card__content-icon{
opacity: 0;
}
.product-bundle-card .product-bundle-card__content-text{
position: absolute;
bottom: 0%;
transform: translateY(0%);
left: 0;
transition: var(--transition);
}
.product-bundle-card:hover .product-bundle-card__content-text{
bottom: 100%;
transform: translateY(100%);
}
.product-bundle-card .product-bundle-card__content-text p{
margin-bottom: 0px;
}
.product-bundle-card__content-products{
padding-top: 160px;
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
width: 100%;
gap: 12px;
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.product-bundle-card:hover .product-bundle-card__content-products{
opacity: 1;
pointer-events: all;
}
.product-bundle-card__product{
display: flex;
flex-direction: row;
align-items: center;
align-items: center;
gap: 16px;
position: relative;
}
.product-bundle-card__product img{
width: 30px;
height: 30px;
object-fit: contain;
}
.product-bundle-card__product span{
font-weight: 600;
transition: var(--transition);
}
.product-bundle-card__product:hover span{
color: var(--teal);
}
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,
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;
}
.primary-cta,
.secondary-cta{
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
padding: 16px 40px;
border: 1px solid transparent;
border-radius: 50px;
transition: var(--transition);
text-decoration: none;
display: inline-block;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
max-width: max-content;
}
.primary-cta:hover,
.secondary-cta:hover,
.text-cta:hover{
font-weight: 500!important;
}
.text-cta{
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
text-decoration: none;
display: inline-block;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
position: relative;
z-index: 2;
transition: var(--transition);
}
.text-cta::before{
content: '';
width: 4px;
height: 100%;
background-color: transparent;
position: absolute;
top: 0px;
left:0px;
transition: var(--transition);
}
.text-cta:hover::before{
width: 100%;
z-index: -1;
}
.primary-cta.inactive-cta, .secondary-cta.inactive-cta{
opacity: 0.5;
cursor: not-allowed;
pointer-events: none;
}
/* Colourways */
/* Colourways -> Teal */
.primary-cta.teal-cta{
background-color: var(--teal);
border-color: var(--teal);
color: var(--white);
}
.primary-cta:hover.teal-cta{
background-color: var(--hunter-green);
}
.secondary-cta.teal-cta{
background-color: transparent;
border-color: var(--teal);
color: var(--teal);
}
.secondary-cta:hover.teal-cta{
background-color: var(--teal);
color: var(--white);
}
.text-cta.teal-cta{
color: var(--dark-teal-green);
}
.text-cta.teal-cta:hover{
color: var(--white);
}
.text-cta.teal-cta::before{
background-color: var(--teal);
}
/* Colourways -> Grey */
.primary-cta.grey-cta{
background-color: var(--grey);
border-color: var(--grey);
color: var(--dark-teal-green);
}
.primary-cta:hover.grey-cta{
background-color: var(--dark-grey);
}
.secondary-cta.grey-cta{
background-color: transparent;
border-color: var(--grey);
color: var(--dark-teal-green);
}
.secondary-cta:hover.grey-cta{
background-color: var(--grey);
}
/* Colourways -> Dark Teal Green */
.primary-cta.dark-teal-green-cta{
background-color: var(--dark-teal-green);
border-color: var(--dark-teal-green);
color: var(--white);
}
.primary-cta:hover.dark-teal-green-cta{
background-color: var(--teal);
}
.secondary-cta.dark-teal-green-cta{
background-color: transparent;
border-color: var(--dark-teal-green);
color: var(--dark-teal-green);
}
.secondary-cta:hover.dark-teal-green-cta{
background-color: var(--dark-teal-green);
color: var(--white);
}
/* Colourways -> White */
.primary-cta.white-cta{
background-color: var(--white);
border-color: var(--white);
color: var(--dark-teal-green);
}
.primary-cta:hover.white-cta{
background-color: var(--dark-grey);
}
.secondary-cta.white-cta{
background-color: transparent;
border-color: var(--white);
color: var(--white);
}
.secondary-cta:hover.white-cta{
background-color: var(--white);
color: var(--dark-teal-green);
}
.text-cta.white-cta{
color: var(--white);
}
.text-cta.white-cta:hover{
color: var(--white);
}
.text-cta.white-cta::before{
background-color: var(--spring-green);
}
@media screen and (max-width: 767px){
.cta_button.primary-cta,
.cta_button.secondary-cta{
padding-left: 0px;
padding-right: 0px;
width: 100%;
}
.primary-cta,
.secondary-cta{
width: 100%;
max-width: unset;
}
}
/* Labels */
/* Help text */
form legend {
}
/* Form fields */
.simple-form{
position: relative;
}
.hs-form-field{
position: relative;
transition: var(--transition);
margin-top: 10px;
margin-bottom: 40px;
}
@media screen and (max-width: 767px){
.hs-form-field{
margin-bottom: 24px;
}
}
.hs-form-field.hs-form-field--active{
}
.hs-form-field:not(.hs-fieldtype-checkbox) label:not(.hs-error-msg):not(.hs-form-radio-display){
position: absolute;
top: calc(50%);
transform: translateY(-50%);
left: 16px;
font-size: 16px;
transition: var(--transition);
pointer-events: none;
}
.hs-form-field:has(.hs-error-msgs):not(.hs-fieldtype-checkbox) label:not(.hs-error-msg):not(.hs-form-radio-display){
top: 35%;
}
label[id*="message-"]{
top: 20px!important;
}
.hs-form-field:not(.hs-fieldtype-checkbox).hs-form-field--active label[id*="message-"]{
top: calc(0% - 10px)!important;
font-size: 10px;
left: 0px;
}
.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;
font-size: 14px !important;
pointer-events: all!important;
}
.hs-form-booleancheckbox-display a{
color: var(--spring-green)!important;
}
.hs-error-msg{
color: #F00;
font-size: 12px;
line-height: 1.5;
margin-top: 8px;
}
.hs-form-field:has(.hs-error-msg) input{
border-color: #F00;
}
.inputs-list.multi-container li label{
display: flex;
flex-direction: row;
align-items: center;
}
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: 10px 16px;
border-radius: 5px;
border-style: solid;
border-left: 0px;
border-right: 0px;
border-top: 0px;
border-bottom: 1px solid;
background-color: transparent;
min-height: 40px;
}
form textarea{
border: 1px solid;
min-height: 120px;
}
.form--dark form input{
border-color: var(--dark-teal-green);
color: var(--dark-teal-green);
}
form fieldset{
max-width: unset!important;
}
form input::placeholder{
display: none!important;
opacity: 0!important;
}
/* Light Form Styles */
.form--light form input,
.form--light form select,
.form--light form textarea {
border-color: var(--white);
color: var(--white);
}
.form--light .hs-form-field label:not(.hs-error-msg){
color: var(--white);
}
.form--light .hs-richtext{
color: white;
}
.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 .legal-consent-container,
form .legal-consent-container .hs-richtext,
form .legal-consent-container .hs-richtext p {
}
/* 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);
}
.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: 32px;
}
.legal-consent-container .hs-form-booleancheckbox-display>span {
margin-left: 30px!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;
}
.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,');
}
/* Position label text to the right of the custom radio */
.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;
}
/* Buttons */
input[type="submit"].hs-button{
font-size: 14px;
font-weight: 500;
line-height: 1;
text-transform: uppercase;
padding: 16px 60px;
border: 1px solid transparent;
border-radius: 50px;
transition: var(--transition);
text-decoration: none;
display: inline-block;
text-align: center;
cursor: pointer;
letter-spacing: 1px;
}
.form--dark input[type="submit"].hs-button{
background-color: var(--teal);
border-color: var(--teal);
color: var(--white);
}
.form--dark input[type="submit"].hs-button:hover{
background-color: var(--hunter-green);
}
.form--light input[type="submit"].hs-button{
background-color: var(--grey);
border-color: var(--grey);
color: var(--dark-teal-green);
}
.form--light input[type="submit"].hs-button:hover{
background-color: var(--dark-grey);
}
/*
Need to make individual adjustments? -- Please use modifier classes e.g. slider-navigation--team-slider
inside of your modules respective css file
*/
/* Slider Navigation */
.slider-navigation{
display: flex;
flex-direction: row;
align-items: center;
gap: 32px;
}
.slider-navigation__item{
width: 50px;
height: 50px;
background-color: var(--white);
border: 1px solid rgba(0, 141, 127, 0.1);
border-radius: 100%;
display: flex;
justify-content: center;
align-items: center;
transition: var(--transition);
cursor: pointer;
opacity: 1;
}
.slider-navigation__item.swiper-button-disabled{
opacity: 0.5;
cursor: not-allowed;
}
.slider-navigation__item:hover{
background-color: var(--teal);
border-color: var(--teal);
}
.slider-navigation__item svg{
width: 28px;
max-width: 28px;
height: auto;
}
.slider-navigation__item svg path{
fill: var(--teal);
transition: var(--transition);
}
.slider-navigation__item:hover svg path{
fill: var(--white);
}
/* 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: 70px;
max-height: 70px;
width: 100%;
object-fit: contain;
}
@media screen and (max-width: 768px){
.logo-slider__logo img{
min-height: 30px;
max-height: 30px;
}
}
.pagination{
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
justify-content: center;
flex-wrap: wrap;
}
.pagination__page,
.pagination__arrow{
max-width: 40px;
max-height: 40px;
width: 40px;
height: 40px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 100%;
color: inherit;
background-color: transparent;
transition: var(--transition);
cursor: pointer;
}
.pagination__page:hover,
.pagination__page.pagination__page--active{
background-color: var(--tiber-green);
color: white;
}
.pagination__arrow:hover{
background-color: var(--tiber-green);
}
.pagination__arrow svg path{
stroke: var(--tiber-green);
}
.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%;
}
/* Table cells */
th,
td {
padding: 0.7rem;
vertical-align: top;
}
/* Table header */
thead th,
thead td {
vertical-align: top;
text-align: left;
}
thead th{
border-right: 1px solid var(--grey);
}
thead th h6{
margin: 0px;
}
thead th:last-of-type{
border-right: none;
}
table {
border-collapse: collapse;
}
table td {
padding: 15px;
font-size: 14px;
}
table thead td {
background-color: #54585d;
color: #ffffff;
font-weight: bold;
font-size: 13px;
border: 1px solid #54585d;
}
table tbody td {
color: #636363;
border: 1px solid #dddfe1;
}
table td p,
table td h6{
margin-bottom: 0px;
}
table tbody tr {
background-color: #e6f3f2;
}
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;
}
table tbody tr:first-of-type td{
border: 0px solid transparent!important;
}
table:not(.pricing-table) tbody tr:first-of-type td:nth-child(odd) {
border-right: 0;
background-color: #008D7F;
color: white!important;
}
table:not(.pricing-table) tbody tr:first-of-type td:nth-child(even) {
border-right: 0;
background-color: #1B6359;
color: white!important;
}
table tbody tr:nth-child(odd) {
background-color: #ffffff;
}
table tbody tr td:first-of-type{
border-left: 0px solid red;
}
table tbody tr td:last-of-type{
border-right: 0px solid red;
}
table ul{
padding: 0;
margin: 0;
margin-left: 20px;
}
table li{
margin: 0;
padding: 0;
font-size: 14px;
}
.video-media{
position: relative;
border-radius: 8px;
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);
border-radius: 100%;
}
.video-media__controls:hover svg{
border: 6px solid rgba(255, 255, 255, 0.5);
}
.video-media__controls svg circle{
fill: var(--white);
transition: var(--transition);
}
.video-media__controls svg path{
fill: var(--teal);
transition: var(--transition);
}
.video-media__controls:hover svg circle{
fill: var(--teal);
}
.video-media__controls:hover svg path{
fill: var(--white);
}
@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);
}
.accordion.accordion--light{
border-color: var(--hunter-green);
}
.accordion.accordion--dark{
border-color: var(--grey);
}
.accordion.accordion--dark.active:not(.tabbed-switchback .accordion){
background-color: #e5f3ea;
}
.accordion.accordion--light .accordion__title-indicator__title span{
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;
padding: 18px 0px;
}
.accordion .accordion__title-indicator__title span{
font-weight: 400;
transition: 0.15s linear;
font-size: 20px;
}
.accordion.active .accordion__title-indicator__title span{
font-weight: 600;
}
.accordion:hover .accordion__title-indicator__title span{
color: var(--teal);
}
.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(--teal);
}
.accordion .accordion__content{
height: 0;
overflow: hidden;
opacity: 0;
transition: height var(--transition), opacity var(--transition);
width: 90%;
line-height: 1.5;
position: relative;
}
.accordion.active .accordion__content{
opacity: 1;
padding: 32px 0px;
}
.accordion.active .accordion__content img{
border-radius: 8px;
margin-bottom: 24px;
}
@media screen and (max-width: 768px) {
.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: 20px;
color: var(--hunter-green);
position: relative;
}
.statistic-number{
display: flex;
flex-direction: row;
align-items: flex-end;
letter-spacing: 2px;
}
.statistic-number__prefix,
.statistic-number__suffix{
font-size: 55px;
font-weight: 500;
line-height: 1;
}
.statistic-number__number{
font-size: 70px;
font-weight: 500;
line-height: 1;
}
.statistic-content p{
max-width: 200px;
}
.statistic-content p:last-of-type{
margin-bottom: 0px;
}
@media screen and (max-width: 1023px){
.statistic-number__prefix,
.statistic-number__suffix{
font-size: 40px;
font-weight: 500;
line-height: 1;
}
.statistic-number__number{
font-size: 60px;
font-weight: 500;
line-height: 1;
}
}
/* Modules */
/* Rich text */
.widget-type-rich_text img {
height: auto;
max-width: 100%;
}
/* Global */
/* ------------- Setup ------------- */
.ecs-header{
position: relative;
z-index: 999999999;
isolation: isolate;
}
/* ------------- Upper Navigation ------------- */
.ecs-header__upper{
display: flex;
flex-direction: row;
justify-content: center;
width: 100%;
align-items: center;
background-color: var(--teal);
padding: 14px 0px;
}
.ecs-header__upper .content-wrapper{
padding: 0px;
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: stretch;
width: 100%;
opacity: 1; /* This was done by design, added here for uniformity but could do with finding out the colour value of white at 0.8 */
}
/* Upper Navigation -> Nav */
.ecs-header__upper-nav ul{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style-type: none;
gap: 0px;
}
.ecs-header__upper-nav ul li{
border-right: 1px solid var(--white);
padding: 0px 20px;
}
.ecs-header__upper-nav ul li:first-of-type{
padding-left: 0px;
}
.ecs-header__upper-nav ul li::before{
display: none;
}
.ecs-header__upper-nav ul li a{
display: flex;
flex-direction: row;
gap: 10px;
color: #CCE8E5!important;
}
.ecs-header__upper-nav ul li a::before{
bottom: -2px!important;
background-color: var(--white)!important;
}
/* Upper Navigation -> Language Switcher */
.ecs-header__lang-switcher{
padding: 0px 20px;
display: flex;
flex-direction: row;
align-items: center;
border-right: 1px solid var(--white);
gap: 8px;
}
.ecs-header__lang-switcher span{
text-transform: uppercase;
color: var(--white);
}
.ecs-header__lang-switcher .ecs-header__lang-switcher-module{
display: flex;
flex-direction: row;
align-items: center;
background-image: url('data:image/svg+xml,')!important;
background-repeat: no-repeat;
background-position: center;
width: 20px;
height: 20px;
}
.ecs-header__lang-switcher .globe_class {
background-image: url('')!important;
}
.ecs-header__lang-switcher .lang_list_class li::before{
display: none!important;
}
/* Upper Navigation -> Search */
.ecs-header__search{
padding: 0px 20px;
display: flex;
flex-direction: column;
justify-content: center;
cursor: pointer;
}
/* Search Menu */
.search{
position: fixed;
top: 0;
left: 0px;
width: 100vw;
background-color: var(--white);
height: 100vh;
opacity: 0;
pointer-events: none;
transition: var(--transition);
z-index: 9999999999;
display: flex;
justify-content: center;
align-items: center;
}
.search.search--show{
opacity: 1;
pointer-events: all;
}
.search-close{
position: absolute;
top: 40px;
right: 40px;
width: max-content;
cursor: pointer;
padding: 20px;
}
.search-inner{
display: flex;
flex-direction: column;
gap: 50px;
justify-content: center;
align-items: center;
width: 100%;
max-width: 1200px;
margin: auto;
position: relative;
}
.search-inner::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100px;
background: linear-gradient(180deg,rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 1) 100%);
pointer-events: none;
}
.search-input{
width: 100%;
padding: 20px;
border-bottom: 1px solid var(--dark-teal-green);
border-radius: var(--radius);
border-left: 0px;
border-right: 0px;
border-top: 0px;
background-image: url('data:image/svg+xml,');
background-size: 20px;
background-repeat: no-repeat;
background-position: right 20px center;
background-color: transparent;
/* Removr these rules > live */
border-bottom-color: #003934;
border-radius: 10px;
}
.search-results{
display: flex;
flex-direction: column;
gap: 20px;
height: 350px;
max-height: 350px;
overflow-y: scroll;
position: relative;
}
.search-results__result{
border-bottom: 1px solid var(--grey);
padding: 20px 0px;
position: relative;
}
.search-results__result h3{
color: var(--teal);
}
.hs-search-highlight{
background-color: #e5f1ee;
}
/* ------------- Main Navigation ------------- */
.ecs-header__main{
display: flex;
flex-direction: column;
justify-content: center;
width: 100%;
align-items: center;
position: relative;
background-color: var(--white);
z-index: -1;
}
.ecs-header__main.ecs-header__main--fixed{
position: fixed;
top: 0px;
left: 0px;
right: 0px;
z-index: 99999999;
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);
}
.ecs-header__main .content-wrapper{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 0px;
}
/* Main Navigation -> Logo */
.ecs-header__logo{
display: flex;
flex-direction: column;
justify-content: center;
position: relative;
}
/* Main Navigation -> Navigation */
.ecs-header__main-navigation{
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
}
.ecs-header__main-navigation .primary-cta,
.ecs-header__main-navigation .secondary-cta{
padding: 16px 20px;
}
.ecs-header__main-navigation ul{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
list-style-type: none;
gap: 0px;
}
.ecs-header__main-navigation ul li::before{
display: none;
}
/* Main Navigation -> Navigation -> Links */
.main-navigation__link{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500!important;
line-height: 1.3;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--tiber-green)!important;
padding: 32px 20px;
border-bottom: 1px solid transparent;
transition: var(--transition);
}
.main-navigation__link::before{
display: none;
}
.main-navigation__link.main-navigation__link--active,
.main-navigation__link:hover{
border-color: var(--teal);
color: var(--teal)!important;
}
.main-navigation__link svg{
transform: rotate(0deg);
transition: var(--transition);
}
.main-navigation__link.main-navigation__link--active svg{
transform: rotate(180deg);
}
.main-navigation__link svg path{
stroke: var(--tiber-green);
transition: var(--transition);
}
.main-navigation__link.main-navigation__link--active svg path{
stroke: var(--teal)!important;
}
/* ------------- Submenu ------------- */
.ecs-header__main-submenu{
opacity: 0;
pointer-events: none;
transition: var(--transition);
background-color: var(--light-grey);
padding: 60px;
padding-top: 80px;
position: absolute;
top: 100%;
left: 0px;
width: 100%;
}
.ecs-header__main-submenu.ecs-header__main-submenu--active{
opacity: 1;
pointer-events: all;
max-height: 90vh;
overflow-y: scroll;
}
.main-submenu__close{
position: absolute;
top: 26px;
right: 26px;
cursor: pointer;
}
/* Submenu -> Layout */
.ecs-header__main-submenu .content-wrapper{
padding: 0px;
position: relative;
background-color: transparent;
transition: var(--transition);
}
/* Submenu -> Child Menus */
.ecs-header__child-menu{
display: flex;
flex-direction: row;
gap: 50px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max-content;
opacity: 0;
pointer-events: none;
padding: 0px 60px;
}
.ecs-header__child-menu:has(.ecs-header__child-menu-item-content__upper-column-menus){
padding: 0px 0px;
}
.ecs-header__child-menu ul{
margin: 0px;
padding: 0px;
gap: 0px!important;
}
.ecs-header__child-menu.ecs-header__child-menu--active{
opacity: 1;
pointer-events: all;
}
.ecs-header__child-menu-item{
padding: 20px;
background-color: transparent;
border-radius: 8px;
transition: var(--transition);
cursor: pointer;
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 1.3;
position: relative;
}
.ecs-header__child-menu-item::after{
content: '';
position: absolute;
top: 50%;
right: -5px;
width: 22px;
height: 22px;
transform: translateY(-50%) rotate(45deg);
background-color: var(--white);
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.ecs-header__child-menu-item.ecs-header__child-menu-item--active::after{
opacity: 1;
}
.ecs-header__child-menu-item.ecs-header__child-menu-item--active{
background-color: var(--white);
}
.ecs-header__child-menu-item:hover{
color: var(--teal)!important;
}
/* Submenu -> Child Menus -> Links */
.ecs-header__child-menu-column.ecs-header__child-menu-column--links{
width: 100%;
max-width: 340px;
}
/* Submenu -> Child Menus -> Content */
.ecs-header__child-menu-column.ecs-header__child-menu-column--content{
width: 100%;
padding: 44px;
background-color: var(--white);
border-radius: 8px;
position: relative;
min-height: 500px;
}
.ecs-header__child-menu-item-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max-content;
opacity: 0;
pointer-events: none;
transition: var(--transition);
background-color: var(--white);
border-radius: 8px;
}
.ecs-header__child-menu-item-content.ecs-header__child-menu-item-content--active{
opacity: 1;
pointer-events: all;
}
.ecs-header__child-menu .label:first-of-type{
margin-bottom: 30px;
padding-left: 20px;
}
.ecs-header__child-menu-item-content{
padding: 40px;
}
.ecs-header__child-menu-item-content .label{
padding-left: 0px!important;
margin-bottom: 20px!important;
}
/* Submenu -> Child Menus -> Upper Content (Links + More Info ) */
.ecs-header__child-menu-item-content__upper{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 120px;
}
.ecs-header__child-menu-item-content__upper:has(.ecs-header__child-menu-item-content__upper-column-menus){
gap: 70px;
}
.ecs-header__child-menu-item-content__upper:has(.ecs-header__child-menu-item-content__upper-column-menus) .ecs-header__child-menu-item-content__upper-column:first-of-type{
width: 60%;
}
.ecs-header__child-menu-item-content__upper .ecs-header__child-menu-item-content__upper-column:last-of-type{
max-width: 320px;
}
.ecs-header__child-menu-item-content__upper:has(.ecs-header__child-menu-item-content__upper-column-menus) .ecs-header__child-menu-item-content__upper-column:last-of-type{
width: 100%;
}
.ecs-header__child-menu-item-content__upper-column{
width: 50%;
position: relative;
}
.ecs-header__child-menu-item-content__upper-column.ecs-header__child-menu-item-content__upper-column--full{
width: 100%;
max-width: unset!important;
}
.ecs-header__child-menu-item-content__upper-column.ecs-header__child-menu-item-content__upper-column--full ul {
column-count: 4;
column-gap: 32px; /* Or whatever spacing you need */
list-style: none;
padding: 0;
margin: 0;
max-width: 100%;
max-height: 380px;
flex-wrap: wrap;
}
.ecs-header__child-menu-item-content__upper-column-content{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max-content;
opacity: 0;
pointer-events: none;
transition: var(--transition);
background-color: var(--white);
}
.ecs-header__child-menu-item-content__upper-column-content.ecs-header__child-menu-item-content__upper-column-content--active{
opacity: 1;
pointer-events: all;
}
.ecs-header__child-menu-item-content__upper-column-content img{
width: 100%;
height: 100%;
min-height: 200px;
max-height: 200px;
object-fit: cover;
object-position: center;
border-radius: 10px;
margin-bottom: 24px;
}
.ecs-header__child-menu-item-content__upper-column-content h6{
margin-bottom: 4px;
}
.ecs-header__child-menu-item-content__upper-column-content p{
margin-bottom: 0px;
}
/* Submenu -> Child Menus -> Content -> Navigation */
.ecs-header__child-menu-item-content__upper-column ul{
gap: 20px!important;
width: 50%;
}
.ecs-header__child-menu-item-content__upper-column ul:has(.menu-item__product){
width: 100%;
}
/* Submenu -> Child Menus -> Content -> Navigation (Products) */
.menu-item__product{
padding: 0px;
margin: 0px;
align-items: center;
cursor: pointer;
position: relative;
}
.menu-item__product img{
width: 40px;
height: 40px;
object-fit: contain;
}
.menu-item__product p{
margin: 0px;
color: inherit;
transition: var(--transition);
font-weight: 600!important;
}
.menu-item__product:hover p{
color: var(--teal)!important;
}
.menu-item__product::before,
.menu-item__product a::before{
display: none;
}
/* Submenu -> Child Menus -> Content -> Navigation (Links) */
.ecs-header__child-menu-item-content__upper-column-menus{
display: flex;
flex-direction: row;
gap: 30px;
}
.ecs-header__child-menu-item-content__upper-column-menus ul{
margin: 0px;
padding: 0px;
gap: 10px!important;
}
.ecs-header__child-menu-item-content__upper-column-menus ul h6{
margin-bottom: 4px;
}
.ecs-header__child-menu-item-content__upper-column-menus ul li{
padding: 0px;
margin: 0px;
list-style-type: none;
gap: 10px;
}
.ecs-header__child-menu-item-content__upper-column-menus ul li::before{
background-image: url('data:image/svg+xml,')!important;
min-width: 3px;
max-width: 3px;
min-height: 7px;
max-height: 7px;
}
.ecs-header__child-menu-item-content__upper-column-menus ul li a::before{
display: none!important;
}
/* Submenu -> Child Menus -> Upper Content (CTA) */
.ecs-header__child-menu-item-content__lower{
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 35px;
margin-top: 30px;
padding-top: 30px;
border-top: 1px solid var(--light-grey);
border-radius: 8px;
}
@media screen and (min-width: 1080px){
.ecs-header__child-menu-item-content__lower{
flex-direction: row;
align-items: center;
gap: 120px;
}
}
.ecs-header__child-menu-item-content__lower:has(.menu-banner){
flex-direction: column;
padding-top: 0px;
border-top: 0px solid transparent;
gap: 0px;
justify-content: flex-start;
}
.ecs-header__child-menu-item-content__lower:has(.menu-banner) .label{
opacity: 0.7;
width: 100%;
}
.child-menu-banners{
display: flex;
flex-direction: row;
gap: 20px;
width: 100%;
}
.menu-banner{
width: 100%;
}
.menu-banner img{
max-height: 120px;
width: 100%;
object-fit: contain;
object-position: center left;
}
.ecs-header__child-menu-item-content__lower-column h6{
margin-bottom: 4px;
}
.ecs-header__child-menu-item-content__lower-column p{
color: var(--tiber-green)!important;
margin-bottom: 0px;
}
.ecs-header__child-menu-item-content__lower-column .primary-cta,
.ecs-header__child-menu-item-content__lower-column .secondary-cta{
width: max-content;
padding: 16px 20px;
text-transform: none!important;
}
.esc-header__mobile{
display: none;
}
.ecs-header__mobile-menu{
display: none;
}
.menu-banner{
position: relative;
}
@media screen and (max-width: 1420px){
.ecs-header__main .content-wrapper{
padding: 0px 20px;
}
.ecs-header__child-menu{
padding: 0px;
}
}
@media screen and (max-width: 1200px){
.ecs-header__child-menu-item-content__upper {
gap: 40px;
}
.ecs-header__main-submenu {
padding: 80px 20px 60px 20px;
}
}
@media screen and (max-width: 1130px){
.ecs-header__main-navigation-cta{
display: none;
}
.ecs-header__child-menu-item-content__upper:has(.ecs-header__child-menu-item-content__upper-column-menus) .ecs-header__child-menu-item-content__upper-column:first-of-type {
width: 100%;
}
.ecs-header__child-menu-item-content__upper:has(.ecs-header__child-menu-item-content__upper-column-menus) .ecs-header__child-menu-item-content__upper-column.ecs-header__child-menu-item-content__upper-column--side {
display: none;
}
}
@media screen and (max-width: 900px){
.ecs-header__upper{
display: none;
}
.ecs-header__main .content-wrapper {
padding: 16px 20px;
}
.esc-header__mobile{
display: flex;
flex-direction: row;
align-items: center;
gap: 28px;
}
.ecs-header__main-navigation{
display: none;
}
.ecs-header__mobile-search svg{
width: 18px;
height: 18px;
}
.hamburger .line{
width: 20px;
height: 1.5px;
background-color:black;
display: block;
margin: 6px auto;
transition: var(--transition);
}
.hamburger:hover{
cursor: pointer;
}
/* ONE */
.hamburger.hamburger--active .line:nth-child(2){
opacity: 0;
}
.hamburger.hamburger--active .line:nth-child(1){
-webkit-transform: translateY(7px) rotate(45deg);
-ms-transform: translateY(7px) rotate(45deg);
-o-transform: translateY(7px) rotate(45deg);
transform: translateY(7px) rotate(45deg);
}
.hamburger.hamburger--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);
}
.ecs-header__main-submenu{
display: none;
}
.ecs-header__mobile-menu{
position: absolute;
top: 100%;
left: 0px;
width: 100%;
background-color: var(--light-grey);
height: 100vh; /* This should match the height of the mobile header approximately */
max-height: 100vh; /* This should match the height of the mobile header approximately */
opacity: 0;
pointer-events: none;
transition: var(--transition);
border-top: 1px solid var(--teal);
display: block;
overflow-y: scroll;
}
.ecs-header__mobile-menu.ecs-header__mobile-menu--active{
opacity: 1;
pointer-events: all;
}
/* Mobile Menu Body */
.ecs-header__mobile-menu__main{
min-height: 50vh;
padding: 20px;
padding-bottom: 32px;
display: flex;
flex-direction: column;
justify-content: space-between;
overflow: hidden;
transition: height var(--transition);
}
.ecs-header__mobile-menu__main nav:first-of-type{
opacity: 1;
transition: var(--transition);
}
.ecs-header__mobile-menu__main:has(.mobile-menu__menu.mobile-menu__menu--active) nav:first-of-type{
opacity: 0;
pointer-events: none;
}
.ecs-header__mobile-menu__lower{
min-height: 50vh;
background-color: var(--teal);
padding: 20px;
}
.ecs-header__mobile-menu__lower ul{
list-style: none;
padding: 0px;
margin: 0px;
gap: 0px;
}
.ecs-header__mobile-menu__lower ul li{
list-style: none;
padding: 0px;
margin: 0px;
}
.ecs-header__mobile-menu__lower ul li a{
border-bottom: 1px solid var(--grey);
font-size: 16px !important;
font-weight: 400 !important;
padding: 20px 0;
text-transform: none;
width: 100%;
gap: 8px;
}
.ecs-header__mobile-menu__lower ul li::before{
display: none;
}
.mobile-menu__main-menus{
position: relative;
}
.mobile-menu__menu{
position: absolute;
top: 0;
left: 0%;
width: 100%;
height: max-content;
background-color: var(--light-grey);
pointer-events: none;
transform: translateX(110%);
transition: var(--transition);
}
.mobile-menu__menu.mobile-menu__menu--active{
pointer-events: all;
transform: translateX(0%);
}
.mobile-menu__menu.mobile-menu__menu--active.mobile-menu__menu--hide{
opacity: 0;
pointer-events: none;
}
.mobile-menu__main-menus nav ul{
display: flex;
flex-direction: column;
gap: 0px;
list-style-type: none;
}
.mobile-menu__main-menus nav ul li::before{
display: none;
}
.mobile-menu__main-menus nav ul li a{
width: 100%;
justify-content:space-between;
border-bottom: 1px solid var(--grey);
padding: 20px 0px;
text-transform: none;
font-size: 16px!important;
font-weight: 400!important;
}
.mobile-navigation__link{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
font-size: 15px;
font-weight: 500!important;
line-height: 1.3;
letter-spacing: 1px;
text-transform: uppercase;
color: var(--tiber-green)!important;
padding: 32px 20px;
border-bottom: 1px solid transparent;
transition: var(--transition);
}
.mobile-navigation__link::before{
display: none;
}
.mobile-navigation__link.mobile-navigation__link--light{
color: white!important;
border-color: var(--white);
}
.mobile-navigation__link span{
display: inline-block;
max-width: 80%;
}
.menu-item__product{
padding: 10px 0px;
}
.mobile-menu__main-cta{
margin-top: 32px;
}
.mobile-menu__menu-header{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.mobile-menu__menu-header svg{
width: 40px;
height: 40px;
}
.mobile-menu__menu-header .label{
width: 100%;
text-align: center;
margin-bottom: 0px;
color: var(--tiber-green)!important;
}
.mobile-menu__menu h6{
margin-top: 16px;
margin-bottom: 10px;
}
.search-close{
top: 24px;
right: 24px;
padding: 20px 0px 20px 20px;
}
.search-inner{
padding: 24px;
}
}
/* Setup */
.ecs-footer{
display: flex;
flex-direction: column;
width: 100%;
justify-content: center;
align-items: center;
padding: 68px 0px 48px 0px;
background-color: var(--light-grey);
}
.ecs-footer .content-wrapper{
padding: 0px;
display: flex;
flex-direction: column;
width: 100%;
transition : var(--transition);
}
.ecs-footer ul{
list-style: none;
margin: 0;
padding: 0;
gap: 5px;
}
.ecs-footer ul li::before{
display: none;
}
.ecs-footer ul li a::before{
bottom: -2px!important;
}
/* Upper */
.ecs-footer__upper{
padding-bottom: 28px;
}
.ecs-footer__logo{
padding: 16px 0px;
position: relative;
width: max-content;
}
.ecs-footer__logo img{
width: 210px;
height: auto;
object-fit: contain;
object-position: center;
}
/* Body */
.ecs-footer__body{
display: flex;
flex-direction: row;
gap: 120px;
padding-bottom: 130px;
border-bottom: 1px solid #E6E9EA;
transition: gap var(--transition);
}
.ecs-footer__column:first-of-type{
margin-right: 80px;
}
.ecs-footer__column-body{
display: flex;
flex-direction: row;
gap: 100px;
}
/* Lower */
.ecs-footer__lower{
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 44px;
}
.ecs-footer__lower ul{
display: flex;
flex-direction: row;
gap: 20px;
}
.ecs-footer__lower a{
color: var(--tiber-green)!important;
}
.ecs-footer__column.ecs-footer__column--policies{
display: flex;
flex-direction: row;
align-items: center;
gap: 150px;
}
.ecs-footer__column.ecs-footer__column--policies nav{
display: flex;
flex-direction: row;
gap: 20px;
}
.ecs-footer__column.ecs-footer__column--socials{
display: flex;
flex-direction: row;
align-items: center;
gap: 40px;
}
.ecs-footer__social-icon{
position: relative;
}
.ecs-footer__social-icon svg{
min-height: 24px;
max-height: 24px;
width: auto;
}
@media screen and (max-width: 1400px){
.ecs-footer .content-wrapper{
padding: 0px 24px;
}
}
@media screen and (max-width: 1200px){
.ecs-footer__body{
gap: 40px;
justify-content: space-between;
flex-wrap: wrap;
}
.ecs-footer__column-body{
gap: 40px;
}
.ecs-footer__column:first-of-type{
margin-right: 0px;
}
.ecs-footer__column.ecs-footer__column--policies {
gap: 40px;
}
.ecs-footer__lower{
gap: 40px;
}
}
@media screen and (max-width: 800px){
.ecs-footer__body{
gap: 40px;
justify-content: flex-start;
padding-bottom: 44px;
}
.ecs-footer__lower{
flex-direction: column-reverse;
gap: 20px;
}
.ecs-footer__column.ecs-footer__column--socials{
justify-content: center;
}
.ecs-footer__column.ecs-footer__column--policies{
flex-direction: column;
gap: 20px;
}
}
@media screen and (max-width: 500px){
.ecs-footer__body{
flex-direction: column;
}
.ecs-footer__column:not(.ecs-footer__column:first-of-type) ul{
flex-direction: row;
flex-wrap: wrap;
}
.ecs-footer__column:not(.ecs-footer__column:first-of-type) ul li{
flex-basis: 48%;
gap: 0px;
}
.ecs-footer__column-body{
gap: 20px;
}
}
.hs-search-results__listing {
margin: 0;
padding: 0;
list-style: none;
}
.hs-search-results__listing li {
margin: 0;
padding: 0px 0px 40px 0px;
border-bottom: 1px solid #e0e0e0;
margin-bottom: 40px;
}
a.hs-search-results__title,
a.hs-search-results__title:hover{
font-size: 20px;
text-decoration: none;
font-weight: bold;
}
.hs-search-highlight {
font-weight: bold;
}
.hs-search-results__prev-page {
float: left;
}
.hs-search-results__next-page {
float: right;
}
.hs-search-results__date.posts{
font-size: 12px;
color: #a0a0a0;
margin-bottom: 3px;
}
.blog_tabs {
}
.blog_tabs .tabs-nav{
display: inline-flex;
list-style: none;
padding: 0;
margin: 0;
padding: 0px;
}
.blog_tabs .tabs-nav li {
padding: 0;
margin: 0;
}
.blog_tabs .tabs-nav li:first-child a {
border-right: 0;
}
.blog_tabs .tabs-nav li:last-child a {
}
.tabs-nav a {
color: #07272D;
display: block;
text-align: center;
text-decoration: none;
padding: 16px 24px;
}
.tabs-nav a:hover {
border-bottom: 4px solid #008D7F;
}
.tabs-nav a span{
font-weight: 100;
}
.tabs-nav .tab-active a {
color: #008D7F;
cursor: default;
border-bottom: 4px solid #008D7F;
font-weight: 600;
}
.blog_tabs .tabs-stage {
border-radius: 0 0 6px 6px;
border-top: 1px solid #cecfd5;
clear: both;
padding-top: 40px;
position: relative;
top: -1px;
}
#searchIcon{
display: block;
}
#searchIcon.d-none{
display: none;
}
.hs-search-results__title{
font-size: 30px!important;
color: #008D7F;
font-weight: 600;
text-decoration: none;
margin-bottom: 24px;
line-height: 1.2;
}
select {
/* Reset Select */
appearance: none;
outline: 0;
border: 0;
box-shadow: none;
/* Personalize */
flex: 1;
padding: 0 1em;
color: #000;
background-color: #fff;
background-image: none;
cursor: pointer;
font-size: 12px;
border: 1px solid #02003f;
}
/* Remove IE arrow */
select::-ms-expand {
display: none;
}
/* Custom Select wrapper */
.select {
position: relative;
display: none; /* Remove this if you want it */
width: 230px;
height: 35px;
overflow: hidden;
float: right;
}
/* Arrow */
.select::after {
background-color: #02003e;
content: "\25BC";
padding: 1em;
pointer-events: none;
position: absolute;
right: 0;
top: 0px;
color: white;
font-size: 10px;
height: 100%;
line-height: 19px;
}
/* Transition */
.select:hover::after {
color: #46d0ff;
}
@media (max-width:767px){
.select{
float: none;
margin: 20px 0;
}
}
/* Sections */
/* Looking for .slider-navigation? - You can find this in css/elements/_sliders.css */
/* Looking for .team-member? - You can find this in css/elements/_cards.css */
.team-slider{
position: relative;
}
.team-slider .swiper-slide{
height: auto;
transform: scale(1);
transition: transform var(--transition);
transform-origin: center center;
}
.team-slider .swiper-slide.swiper-slide-active{
transform: scale(1.2);
z-index: 10;
}
.swiper-slide .team-member{
box-shadow: 0px 94px 104px 0px rgba(0, 57, 52, 0), 0px 24px 54px 0px rgba(0, 57, 52, 0), 0px 4px 100px 0px rgba(0, 57, 52, 0);
}
.swiper-slide.swiper-slide-active .team-member{
box-shadow: 0px 94px 104px 0px rgba(0, 57, 52, 0.10), 0px 24px 54px 0px rgba(0, 57, 52, 0.08), 0px 4px 100px 0px rgba(0, 57, 52, 0.05);
}
@media screen and (max-width: 800px){
.team-slider .swiper-slide.swiper-slide-active{
transform: scale(1.1);
}
.slider-navigation--team{
display: flex !important;
position: absolute;
z-index: 100;
top: 50%;
left: 0;
width: 100%;
justify-content: space-between;
padding: 0px 20px;
transform: translateY(-60%);
}
}
.alumni-testimonial-slider{
position: relative;
}
[class*="max-width-section-centering"] .alumni-testimonial-slider .content-wrapper{
padding: 0px;
}
.alumni-testimonial-slider__navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 60px;
}
.alumni-testimonial-slider__navigation h2{
margin-bottom: 0px;
}
.alumni-testimonial-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 767px){
.alumni-testimonial-slider__navigation{
margin-bottom: 45px;
}
.slider-navigation--client-testimonial .slider-navigation__item--prev{
display: none!important;
}
.slider-navigation--client-testimonial .slider-navigation__item--next{
position: absolute;
top: 50%;
right: 6px;
z-index: 10;
}
}
.blog-post-slider .content-wrapper{
padding: 0px;
position: relative;
}
.blog-post-slider__title-navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 70px;
}
.blog-post-slider__title{
max-width: 840px;
}
.blog-post-slider__title h2.no-margin{
margin-bottom: 0px;
}
.blog-post-slider__title p{
margin-bottom: 0px;
}
.blog-post-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 1400px){
.blog-post-slider .content-wrapper{
padding: 0px 20px;
}
}
@media screen and (max-width: 767px){
.blog-post-slider__navigation{
position: absolute;
top: 60%;
transform: translateY(-50%);
z-index: 5;
right: 5.5vw;
}
.slider-navigation--blog-post .slider-navigation__item.slider-navigation__item--prev{
display: none;
}
.slider-navigation--blog-post .slider-navigation__item.slider-navigation__item--next.swiper-button-disabled{
opacity: 0;
pointer-events: none;
}
}
.case-study-header{
padding: 100px 0px 300px 0px;
background-size: cover;
background-position: center;
position: relative;
}
.case-study-header::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
background: linear-gradient(90deg, #07272D 0%, rgba(7, 39, 45, 0.00) 100%);
}
.case-study-header__content{
max-width: 800px;
position: relative;
z-index: 3;
}
.case-study-header__content h1,
.case-study-header__content p{
color: white;
}
.case-study-header__tags{
margin-top: 16px;
display: inline-flex;
align-items: center;
flex-direction: row;
gap: 20px;
flex-wrap: wrap;
}
@media screen and (max-width: 767px){
.case-study-header{
padding: 80px 0px 150px 0px;
}
}
.case-study-slider .content-wrapper{
padding: 0px;
position: relative;
}
.case-study-slider__title-navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 70px;
}
.case-study-slider__title{
max-width: 840px;
}
.case-study-slider__title h2.no-margin{
margin-bottom: 0px;
}
.case-study-slider__title p{
margin-bottom: 0px;
}
.case-study-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 1400px){
.case-study-slider .content-wrapper{
padding: 0px 20px;
}
}
@media screen and (max-width: 767px){
.case-study-slider__navigation{
position: absolute;
top: 60%;
transform: translateY(-50%);
z-index: 5;
right: 5.5vw;
}
.slider-navigation--case-study .slider-navigation__item.slider-navigation__item--prev{
display: none;
}
.slider-navigation--case-study .slider-navigation__item.slider-navigation__item--next.swiper-button-disabled{
opacity: 0;
pointer-events: none;
}
}
.featured-article-slider .content-wrapper{
padding: 0px;
position: relative;
}
/* Navigation */
.featured-article-slider__title-navigation{
display: flex;
justify-content: space-between;
margin-bottom: 64px;
}
.featured-article-slider__title h2{
margin-bottom: 0px;
}
.featured-article-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 1440px){
.featured-article-slider .content-wrapper{
padding: 0px 20px;
}
}
@media screen and (max-width: 767px){
.featured-article-slider__title-navigation{
margin-bottom: 50px;
}
.slider-navigation--featured-article-slider .slider-navigation__item--prev{
display: none!important;
}
.slider-navigation--featured-article-slider .slider-navigation__item--next{
position: absolute;
top: 60%;
transform: translateY(-50%);
right: 20px;
z-index: 20;
}
}
.history-slider .content-wrapper{
padding: 0px;
position: relative;
}
.history-slider__navigation{
}
/* Title */
.history-slider__title{
display: flex;
flex-direction: column;
gap: 20px;
width: 100%;
margin-bottom: 80px;
}
.history-slider__title h2{
margin-bottom: 0px;
}
.history-slider p{
max-width: 720px;
}
.history-slider p:last-of-type{
margin-bottom: 0px;
}
/* Navigation */
.history-slider__navigation{
display: flex;
justify-content: space-between;
margin-bottom: 90px;
}
/* Navigation -> Dates */
.history-slider__navigation-dates{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 32px;
align-items: center;
}
.history-slider__navigation-date{
padding: 16px;
font-weight: 400;
color: inherit;
transition: 0.15s linear;
}
.history-slider__navigation-date.history-slider__navigation-date--active{
font-weight: 600;
color: var(--teal);
}
/* Navigation -> Progress Bar */
.history-slider__navigation-progress-bar{
height: 2px;
background-color: #E6E9EA;
border-radius: 8px;
}
.history-slider__navigation-progress-bar .swiper-scrollbar-drag{
background-color: var(--teal);
border-radius: 8px;
}
/* Slider -> Cards */
.history-slider__slider .swiper-slide{
height: auto;
}
.history-slider__slide__date{
width: max-content;
padding: 8px 16px;
border-radius: 28px;
color: white;
margin-bottom: 16px;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: 600;
font-size: 14px;
}
.history-slider__slide{
background-color: var(--white);
padding: 26px 26px 50px 26px;
border-radius: 8px;
height: 100%;
}
.history-slider__slide h5{
margin-bottom: 16px;
}
@media screen and (max-width: 1400px){
.history-slider .content-wrapper{
padding: 0px 20px;
}
}
@media screen and (max-width: 1150px){
.history-slider__navigation{
flex-direction: column;
gap: 32px;
}
.slider-navigation.slider-navigation--history-slider{
width: 100%;
justify-content: space-between;
}
}
@media screen and (max-width: 767px){
.history-slider__title{
margin-bottom: 48px;
}
.history-slider__navigation{
position: absolute;
top: 70%;
transform: translateY(-50%);
z-index: 5;
right: 5.5vw;
}
.history-slider__dates-progress{
display: none;
}
.slider-navigation--history-slider .slider-navigation__item.slider-navigation__item--prev{
display: none;
}
.slider-navigation--history-slider .slider-navigation__item.slider-navigation__item--next.swiper-button-disabled{
opacity: 0;
pointer-events: none;
}
}
.image-banner{
padding: 100px 0px 200px 0px;
background-size: cover;
background-position: center;
position: relative;
}
.image-banner::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 2;
background: linear-gradient(90deg, #07272D 0%, rgba(7, 39, 45, 0.00) 100%);
}
.image-banner__content{
max-width: 800px;
position: relative;
z-index: 3;
}
.image-banner__ctas{
margin-top: 16px;
display: inline-flex;
align-items: center;
flex-direction: row;
gap: 20px;
}
@media screen and (max-width: 767px){
.image-banner{
padding: 80px 0px;
}
.image-banner__ctas{
flex-direction: column;
width: 100%;
}
}
.image-breaker{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
background-attachment: fixed;
padding-bottom: 32px;
}
.image-breaker .content-wrapper{
padding: 320px 20px;
max-width: 1000px;
width: 100%;
}
.image-breaker .content-wrapper h1,
.image-breaker .content-wrapper h2,
.image-breaker .content-wrapper h3,
.image-breaker .content-wrapper h4,
.image-breaker .content-wrapper h5,
.image-breaker .content-wrapper h6 {
margin-bottom: 0px;
text-align: center;
}
.logo-slider--image-breaker{
padding: 28px 0px;
}
@media screen and (max-width: 1023px){
.image-breaker .content-wrapper{
padding: 180px 20px;
}
}
.product-bundle-slider{
position: relative;
}
.product-bundle-slider__navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 90px;
}
.product-bundle-slider__navigation h2{
margin-bottom: 0px;
text-align: center;
width: 100%;
}
.product-bundle-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 767px){
.product-bundle-slider__navigation{
margin-bottom: 45px;
}
.slider-navigation--product-bundles .slider-navigation__item--prev{
display: none!important;
}
.slider-navigation--product-bundles .slider-navigation__item--next{
position: absolute;
top: 60%;
right: 20px;
background-color: white;
z-index: 2;
}
}
.product-banner{
position: relative;
width: 100%;
}
.product-banner__image{
position: absolute;
bottom: 0;
right: 0;
width: 100%;
max-width: 45%;
height: 100%;
object-fit: contain;
object-position: bottom right;
z-index: 1;
transition: var(--transition);
pointer-events: none;
}
.product-banner .content-wrapper{
padding: 0px;
display: flex;
flex-direction: row;
gap: 100px;
margin-top: 100px;
}
.product-banner__column{
position: relative;
z-index: 2;
}
.product-banner__column:first-of-type{
width: 100%;
max-width: 650px;
}
.product-banner__column:last-of-type{
display: none;
}
.product-banner__product{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
margin-bottom: 32px;
}
.product-banner__product h6{
margin-bottom: 0px;
}
.product-banner__ctas{
margin-top: 24px;
display: inline-flex;
align-items: center;
flex-direction: row;
gap: 20px;
}
@media screen and (max-width: 1400px){
.product-banner .content-wrapper{
padding: 0px 24px;
}
}
@media screen and (max-width: 1200px){
.product-banner__image{
max-width: 40%;
}
.product-banner .content-wrapper{
margin-top: 40px;
padding-bottom: 40px;
}
}
@media screen and (max-width: 767px){
.product-banner .content-wrapper{
flex-direction: column;
gap: 50px;
padding: 50px 0px 0px 0px;
margin-top: 0px;
}
.product-banner__image{
opacity: 0;
}
.product-banner__column:first-of-type{
padding: 0px 24px;
max-width: unset;
}
.product-banner__column:last-of-type{
display: flex;
width: 100%;
}
.product-banner__ctas{
flex-direction: column;
width: 100%;
}
.product-banner__column:last-of-type img{
width: 100%;
height: auto;
object-fit: contain;
object-position: bottom right;
}
}
.step-card-slider .content-wrapper{
padding: 0px;
position: relative;
}
.step-card-slider__title-navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: flex-end;
gap: 40px;
margin-bottom: 70px;
}
.step-card-slider__title{
max-width: 840px;
}
.step-card-slider__title h2.no-margin{
margin-bottom: 0px;
}
.step-card-slider__title p{
margin-bottom: 0px;
}
.step-card-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 1400px){
.step-card-slider .content-wrapper{
padding: 0px 20px;
}
}
@media screen and (max-width: 767px){
.step-card-slider__navigation{
position: absolute;
top: 65%;
transform: translateY(-50%);
z-index: 5;
right: 5.5vw;
}
.slider-navigation--step-card .slider-navigation__item.slider-navigation__item--prev{
display: none;
}
.slider-navigation--step-card .slider-navigation__item.slider-navigation__item--next.swiper-button-disabled{
opacity: 0;
pointer-events: none;
}
}
.studio-tour-slider{
position: relative;
}
[class*="max-width-section-centering"] .studio-tour-slider .content-wrapper{
padding: 0px;
}
.studio-tour-slider__navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 90px;
}
.studio-tour-slider__navigation h2{
margin-bottom: 0px;
}
.studio-tour-slider__slider .swiper-slide{
height: auto;
}
.studio-tour-slider__slider .swiper-slide .article-card{
display: flex;
opacity: 1;
}
.studio-tour-slider__slider .article-card .article-card__footer-item{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
gap: 16px;
}
@media screen and (max-width: 767px){
.studio-tour-slider__navigation{
margin-bottom: 45px;
}
.slider-navigation--studio-tour .slider-navigation__item--prev{
display: none!important;
}
.slider-navigation--studio-tour .slider-navigation__item--next{
position: absolute;
top: 50%;
right: 6px;
z-index: 10;
}
}
.client-testimonial-slider{
position: relative;
}
[class*="max-width-section-centering"] .client-testimonial-slider .content-wrapper{
padding: 0px;
}
.client-testimonial-slider__navigation{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
margin-bottom: 90px;
}
.client-testimonial-slider__navigation h2{
margin-bottom: 0px;
}
.client-testimonial-slider__slider .swiper-slide{
height: auto;
}
@media screen and (max-width: 767px){
.client-testimonial-slider__navigation{
margin-bottom: 45px;
}
.slider-navigation--client-testimonial .slider-navigation__item--prev{
display: none!important;
}
.slider-navigation--client-testimonial .slider-navigation__item--next{
position: absolute;
top: 50%;
right: 6px;
z-index: 10;
}
}
/* Components */
/* Looking for .insight-card? - You can find this in css/elements/_cards.css */
.insight-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
align-items: stretch;
}
@media (max-width: 1023px) {
.insight-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.insight-cards {
grid-template-columns: 1fr;
gap: 30px;
}
}
/* Looking for .location-card? - You can find this in css/elements/_cards.css */
.location-cards {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 80px 50px;
align-items: stretch;
}
@media (max-width: 1023px) {
.location-cards {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.location-cards {
grid-template-columns: 1fr;
gap: 30px;
}
}
.book-a-demo {
display: flex;
flex-direction: row;
align-items: center;
gap: 160px;
}
.book-a-demo__column {
width: 50%;
}
/* Content column */
.book-a-demo__column:first-of-type h1 {
line-height: 1;
margin-bottom: 36px;
word-break: break-word;
}
.book-a-demo__column--content h2.h1{
word-break: break-word;
}
/* Form column */
.book-a-demo__column:last-of-type {
padding-left: 60px;
}
.book-a-demo__column.book-a-demo__column--form {
position: relative;
background-color: var(--kelly-green-light);
padding: 50px;
border-radius: 8px;
}
.book-a-demo__column-title{
display: flex;
flex-direction:column;
justify-content: center;
text-align: center;
}
/* Product Grid */
.book-a-demo__product-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 12px;
}
.product-grid__product {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
padding: 10px;
border-radius: 8px;
background-color: var(--white);
transition: var(--transition);
cursor: pointer;
gap: 20px;
}
.product-grid__product.product-grid__product--hide{
display: none;
}
.product-grid__product.product-grid__product--active,
.product-grid__product:hover {
background-color: var(--teal);
}
.product-grid__product .product-checkbox input[type=checkbox]:before {
left: -20px;
transform: translateY(-30%);
transition: background-image var(--transition);
}
.product-grid__product:hover .product-checkbox input[type=checkbox]:before {
background-image: url('data:image/svg+xml,');
}
.product-grid__product .product-checkbox input[type=checkbox]:checked:before {
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='0.5' y='0.5' width='19' height='19' rx='2.5' fill='white' stroke='white'/%3E%3Crect x='4' y='4' width='12' height='12' rx='2' fill='%23008D7F'/%3E%3C/svg%3E%0A");
}
.product-grid__product-content {
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.product-grid__product-content img{
max-width: 48px;
min-width: 48px;
width: 100%;
}
.product-grid__product h6{
color: inherit;
margin-bottom: 0px;
transition: var(--transition);
}
.product-grid__product.product-grid__product--active h6,
.product-grid__product:hover h6 {
color: var(--white)!important;
}
.product-grid__product.product-grid__product--full {
grid-column: 1 / -1;
padding: 20px 10px;
}
/* Load More */
.book-a-demo__load-more{
display: flex;
flex-direction: row;
gap: 14px;
justify-content: center;
align-items: stretch;
margin-top: 24px;
}
.book-a-demo__load-more-content{
display: flex;
flex-direction: row;
gap: 14px;
justify-content: center;
align-items: center;
min-width: max-content;
cursor: pointer;
}
.book-a-demo__load-more-content svg{
transform: rotate(0deg);
transition: var(--transition);
}
.book-a-demo__load-more-content.book-a-demo__load-more-content--load-less svg{
transform: rotate(180deg);
}
.book-a-demo__load-more-seperator{
position: relative;
width: 100%;
}
.book-a-demo__load-more-seperator::before {
content: '';
position: absolute;
top: 50%;
left: 0;
width: 100%;
height: 1px;
background-color: var(--dark-teal-green);
transform: translateY(-50%);
opacity: 0.2;
}
/* Custom messaging */
.book-a-demo__column.book-a-demo__column--form .custom-message {
position: absolute;
left: 60px;
bottom: 20px;
}
/* After-submit */
.book-a-demo__column .submitted-message {
background: transparent;
border: none;
padding: 0;
color: #fff;
}
.book-a-demo__column .actions {
display: flex;
justify-content: flex-end;
pointer-events: none;
margin-top: 32px;
}
.book-a-demo__column .multistep-form .swiper-slide:not(.swiper-slide-active) .actions input[type='submit'] {
pointer-events: none !important;
}
.book-a-demo__column .multistep-form .swiper-slide.swiper-slide-active .actions input[type='submit'] {
pointer-events: auto !important;
}
.multistep-form .swiper-slide:not(.swiper-slide-active) .hs-form-booleancheckbox-display{
pointer-events: none !important;
}
.multistep-form__step__label {
font-size: 20px;
color: #fff;
}
.multistep-form__step__progress {
font-size: 14px;
color: #fff;
}
.multistep-form__step input,
.multistep-form__step textarea {
width: 100%;
}
.multistep-form__step .hs-fieldtype-select .input {
position: relative;
}
.multistep-form__step .hs-fieldtype-select .input::after {
content: "";
position: absolute;
width: 14px;
height: 14px;
right: 16px;
top: 50%;
transform: translateY(-50%);
background-image: url("data:image/svg+xml,%3Csvg width='16' height='9' viewBox='0 0 16 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 0.499999L8 7.5L15 0.5' stroke='%2307272D' stroke-linecap='round'/%3E%3C/svg%3E%0A");
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}
.multistep-form.submitted .multistep-form__navigation {
display: none;
}
.multistep-form__navigation {
display: flex;
justify-content: center;
margin: 24px 0px 0px 0px;
}
.multistep-form__navigation:has(.swiper-button-disabled){
display: none;
}
.multistep-form__pagination{
margin-top: 32px;
}
.mulistep-form__navigation__navigation-item {
background-color: #79D101;
border: 1px solid #79D101;
}
.mulistep-form__navigation__navigation-item.swiper-button-disabled,
.mulistep-form__navigation__navigation-item--next.disabled {
opacity: 0;
pointer-events: none;
}
.multistep-form__pagination{
display: flex;
justify-content: center;
gap: 32px;
}
.multistep-form__pagination .swiper-pagination-bullet-active{
background: var(--tiber-green);
}
/* Responsive */
@media screen and (max-width: 1080px) {
.book-a-demo {
gap: 64px;
}
.book-a-demo__column:first-of-type {
padding-right: 30px;
}
.book-a-demo__product-grid{
grid-template-columns: repeat(1, 1fr);
}
.product-grid__product{
width: 100%;
}
.book-a-demo__column:last-of-type {
padding: 50px 20px;
}
}
@media screen and (max-width: 767px) {
.book-a-demo {
flex-direction: column;
gap: 60px;
}
.book-a-demo__column:first-of-type {
width: 100%;
border: none;
}
.book-a-demo__column:last-of-type {
width: 100%;
}
.book-a-demo__column .hs-button,
.book-a-demo__column input[type='submit'] {
width: 100%;
max-width: none;
text-align: center;
}
.book-a-demo__column.book-a-demo__column--form .custom-message {
left: 0;
}
.multistep-form__pagination {
gap: 8px;
}
}
/* 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: 40px;
overflow-y: clip;
}
.switchback.switchback--reverse{
flex-direction: row-reverse;
}
.switchback-column{
width: 50%;
}
.switchback-gradient{
display: none;
}
/* If full width */
.switchback.switchback--full-width{
padding-top: 80px;
}
.switchback.switchback--full-width .switchback-gradient{
display: block;
position: absolute;
bottom: -5px;
left: 50%;
height: 100%;
width: 100%;
z-index: 5;
pointer-events: none;
}
.switchback.switchback--full-width .video-media{
box-shadow: 24px 0px 54px rgba(0, 57, 52, 0.08), -24px 0px 54px rgba(0, 57, 52, 0.08);
}
.switchback.switchback--full-width .video-media video{
object-position: top left;
}
.switchback.switchback--reverse.switchback.switchback--full-width .switchback-gradient{
left: unset;
right: 50%;
}
.switchback.switchback--full-width{
position: relative;
max-width: 1550px;
margin: 0 auto;
}
.switchback.switchback--full-width .content-wrapper{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
gap: 120px;
padding: 0px;
width: 100%;
}
.switchback.switchback--reverse.switchback.switchback--full-width .content-wrapper{
flex-direction: row-reverse;
}
.switchback.switchback--dual-image .switchback-column.switchback-column--media{
display: flex;
flex-direction: row;
align-items: stretch;
gap: 24px;
}
.switchback.switchback--dual-image .switchback-column.switchback-column--media img{
max-width: 50%;
height: 100%;
object-fit: cover;
object-position: center;
min-height: 545px;
}
.switchback.switchback--dual-image .switchback-column.switchback-column--content{
padding: 0px;
width: 45%;
}
.switchback.switchback--dual-image .switchback-column.switchback-column--media{
width: 55%;
}
/* If Full width -> Handle Media */
.switchback.switchback--full-width .switchback-column.switchback-column--media{
min-height: 450px;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media{
position: absolute;
top: 50%;
transform: translate(60px, -50%);
left: 50%;
max-width: 60%;
object-fit: cover;
object-position: top left;
width: 100%;
height: 100%;
min-height: 450px;
max-height: 500px;
}
.switchback.switchback--reverse.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--reverse.switchback--full-width .switchback-column.switchback-column--media .video-media{
left: unset;
right: 50%;
transform: translate(-60px, -50%);
object-position: top left;
}
.switchback.switchback--full-width .switchback-column.switchback-column--content{
padding: 80px 0px;
}
@media screen and (max-width: 1440px){
.switchback.switchback--full-width .content-wrapper{
padding: 100px 20px;
}
}
@media screen and (max-width: 1100px){
.switchback.switchback--full-width .content-wrapper{
gap: 64px;
padding: 64px 20px;
}
.switchback.switchback--full-width .switchback-column.switchback-column--content{
padding: 40px 0px;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media{
transform: translate(32px, -50%);
height: 100%;
}
.switchback.switchback--reverse.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--reverse.switchback--full-width .switchback-column.switchback-column--media .video-media{
transform: translate(-32px, -50%);
}
.switchback.switchback--dual-image .switchback-column.switchback-column--content{
width: 100%;
}
.switchback.switchback--dual-image .switchback-column.switchback-column--media{
width: 100%;
}
}
@media screen and (max-width: 900px){
.switchback.switchback--full-width{
padding-top: 40px;
}
.switchback.switchback--full-width .switchback-gradient{
display: none;
}
.switchback.switchback--full-width .content-wrapper{
flex-direction: column;
gap: 40px;
padding: 0px;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media{
padding-left: 20px;
min-height: unset;
position: relative;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media::after{
content: "";
z-index: 5;
position: absolute;
bottom: -20%;
left: 20px;
height: 70%;
width: 100%;
z-index: 5;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 15%, rgba(0, 0, 0, 0) 100%);
pointer-events: none;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media__thumbnail{
left: 20px;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media__controls{
left: 20px;
}
.switchback.switchback--full-width .switchback-column.switchback-column--content{
padding: 0px 20px;
position: relative;
z-index: 6;
}
.switchback.switchback--full-width.switchback--media-top .content-wrapper{
flex-direction: column-reverse!important;
}
.switchback.switchback--full-width.switchback--media-top .switchback-gradient{
top: 0px;
bottom: unset;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media img,
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media{
border-radius: 8px 0px 0px 8px;
min-height: unset;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media,
.switchback.switchback--full-width.switchback--reverse .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--full-width.switchback--reverse .switchback-column.switchback-column--media .video-media{
position: static;
top: unset;
transform: unset;
left: unset;
height: 100%;
max-width: unset;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--full-width.switchback--reverse .switchback-column.switchback-column--media img:not(.video-media__thumbnail){
position: static;
}
.switchback.switchback--full-width .switchback-column.switchback-column--media .video-media{
position: relative;
}
.switchback.switchback--reverse.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.switchback.switchback--reverse.switchback--full-width .switchback-column.switchback-column--media .video-media{
transform: unset;
}
.switchback.switchback--dual-image .switchback-column.switchback-column--media img {
max-height: 300px;
min-height: 300px!important;
}
}
/* Content */
.switchback-column.switchback-column--content{
display: flex;
flex-direction: column;
justify-content: center;
padding: 0px 80px;
}
/* Removing the above if the switchback is inside a centered content dnd section*/
[class*="max-width-section-centering"] .switchback-column.switchback-column--content{
padding: 0px!important;
}
[class*="max-width-section-centering"] .switchback {
gap: 60px;
}
.switchback-column__cta-wrapper{
margin-top: 40px;
}
/* Content -> List Items */
.switchback-column__list-item{
display: flex;
flex-direction: column;
}
.switchback ul li h5{
margin-bottom: 12px;
}
.switchback ul li p:last-of-type{
margin-bottom: 0px;
}
/* Media */
.switchback-column.switchback-column--media{
display: flex;
justify-content: center;
align-items: center;
}
.switchback-column.switchback-column--media img{
border-radius: 8px;
}
@media screen and (max-width: 1023px){
.switchback{
gap: 44px;
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__cta-wrapper{
margin-top: 30px;
}
}
.icon-cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.icon-cards--two-per-row {
grid-template-columns: repeat(2, 1fr);
}
.icon-cards--four-per-row {
grid-template-columns: repeat(4, 1fr);
}
.icon-card {
display: flex;
flex-direction: column;
background-color: white;
padding: 32px 32px 64px 32px;
border-radius: 8px;
align-items: flex-start;
}
.icon-card.icon-card--none{
padding: 0px;
}
.icon-card.icon-card--small{
padding: 20px;
}
.icon-card.icon-card--large{
padding: 32px 32px 64px 32px;
}
.icon-card.icon-card--extra-large{
padding: 50px 60px;
}
.icon-card.icon-card--horizontal {
flex-direction: row;
gap: 20px;
}
.icon-card .icon-card__step-icon{
display: flex;
justify-content: center;
align-items: center;
border-radius: var(--radius);
background-color: var(--teal);
width: 48px;
height: 48px;
margin-bottom: 16px;
}
.icon-card .icon-card__step-icon span{
display: block;
color: var(--white);
font-weight: 500;
font-size: 24px;
}
.icon-card .icon-card__icon {
max-height: 38px;
width: auto;
max-width: 38px;
object-fit: contain;
margin-bottom: 16px;
}
.icon-card.icon-card--horizontal .icon-card__icon{
margin-bottom: 0px!important;
}
.icon-card h3,
.icon-card h4 {
margin-bottom: 16px;
}
.icon-card p:last-of-type:last-child {
margin-bottom: 0;
}
.icon-card__footer{
margin-top: 32px;
display: flex;
flex-direction: column;
justify-content: flex-end;
flex-grow: 1;
width: 100%;
}
.icon-card__footer .primary-cta,
.icon-card__footer .secondary-cta{
max-width: unset;
width: 100%;
}
@media screen and (max-width: 1200px) {
.icon-cards {
grid-template-columns: repeat(2, 1fr);
}
/* only apply stagger to default 3-col grid, not four-per-row */
.icon-cards:not(.icon-cards--two-per-row):not(.icon-cards--four-per-row) .icon-card:nth-child(3n) {
grid-column: 1 / -1;
}
.icon-cards.icon-cards--two-per-row {
grid-template-columns: repeat(2, 1fr);
}
.icon-cards.icon-cards--four-per-row {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 767px) {
.icon-cards {
grid-template-columns: 1fr;
gap: 24px;
}
.icon-cards.icon-cards--two-per-row {
grid-template-columns: 1fr;
}
.icon-cards.icon-cards--four-per-row {
grid-template-columns: 1fr;
}
.icon-card.icon-card--horizontal{
align-items: center;
}
}
.attendee-roles{
display: flex;
flex-direction: row;
gap: 20px 40px;
flex-wrap: wrap;
justify-content: flex-start;
}
.attendee-roles__role{
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
min-width: calc(100% / 4 - 30px);
}
.role__icon{
display: flex;
border-radius: 100%;
border: 1px solid var(--kelly-green);
background-color: transparent;
min-width: 48px;
min-height: 48px;
align-items: center;
justify-content: center;
}
.role__icon svg{
width: 20px;
height: 20px;
}
.role__icon svg path{
fill: var(--kelly-green);
}
@media screen and (max-width: 767px){
.attendee-roles{
grid-template-columns: repeat(1, 1fr);
}
}
.course-structure{
container-type: inline-size;
container-name: structure-container;
}
.course-structure__structure-items{
display: flex;
flex-direction: row;
flex-wrap: wrap;
gap: 20px;
}
.structure-item{
display: flex;
flex-direction: row;
gap: 16px;
padding: 24px 32px;
border-radius: 12px;
background-color: #e5f1ee;
width: 100%;
max-width: calc(50% - 10px);
}
.course-structure__summary{
margin-bottom: 16px;
}
.course-structure__summary span{
font-size: 18px;
}
.structure-item__column.structure-item__column--icon{
min-width: 32px;
}
.structure-item__column.structure-item__column--content{
width: 100%;
}
.structure-item__column.structure-item__column--content h3{
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 1;
margin-bottom: 8px;
color: #07272D;
}
@container structure-container (max-width: 760px){
.course-structure__structure-items{
flex-direction: column;
gap: 10px;
}
.structure-item{
max-width: unset;
}
}
.alumni-testimonial{
background-color: #ecf8fd;
border-radius: var(--radius);
padding: 30px;
display: flex;
flex-direction: column;
gap: 30px;
}
.alumni-testimonial__content p{
margin-bottom: 0px;
font-size: 22px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
.alumni-testimonial__profile{
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.profile__headshot{
width: 44px;
height: 44px;
overflow: hidden;
border-radius: 100%;
}
.profile__headshot__img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.profile__content__name{
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;
}
.profile__content__name span{
display: block;
}
.profile__content__name__social{
position: relative;
}
.profile__content__name__social span{
color: #07272D;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 1;
}
.profile__content__name__social .cover-link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.profile__content__role{
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
.profile__content__role span{
display: block;
font-weight: 400;
}
.profile__content__role__img{
max-height: 20px;
width: max-content;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 500px){
.profile__content__role{
flex-direction: column;
align-items: flex-start;
}
}
.academy-summary{
padding: 48px;
position: relative;
display: flex;
flex-direction: row;
gap: 60px;
position: relative;
border-radius: 6px;
overflow: hidden;
}
.academy-summary svg{
position: absolute;
bottom: -20px;
right: -20px;
pointer-events: none;
}
.academy-summary__column{
width: 50%;
}
/* Content */
.academy-summary__column.academy-summary__column--content{
}
.academy-summary__column.academy-summary__column--content h2{
font-size: 28px;
font-weight: 600;
line-height: 1.3;
}
.academy-summary__cta{
margin-top: 60px;
}
.academy-summary__cta.academy-summary__cta--mobile{
display: none;
}
/* Statistics */
.academy-summary__column.academy-summary__column--stats{
display: flex;
flex-direction: column;
gap: 24px;
}
.academy-summary__statistic{
display: flex;
flex-direction: row;
gap: 12px;
}
.statistic__content__title{
font-size: 32px;
font-style: normal;
font-weight: 500;
line-height: 1;
display: block;
margin-bottom: 4px;
}
.statistic__content__description{
color: #415d62;
font-size: 14px;
font-weight: 500;
line-height: 1.6;
}
@media screen and (max-width: 1023px){
.academy-summary__cta.academy-summary__cta--desktop{
display: none;
}
.academy-summary__cta.academy-summary__cta--mobile{
display: flex;
margin-top: 0px;
}
.academy-summary__cta.academy-summary__cta--mobile .primary-cta,
.academy-summary__cta.academy-summary__cta--mobile .secondary-cta{
width: 100%;
}
.academy-summary{
flex-direction: column;
gap: 24px;
padding: 32px 24px;
}
.academy-summary__column{
width: 100%;
}
}
/* Setup */
.academy-header{
display: flex;
flex-direction: row;
align-items: stretch;
justify-content: center;
gap: 200px;
}
.academy-header__column{
width: 50%;
}
.academy-header__column.academy-header__column--media{
display: flex;
justify-content: center;
align-items: center;
}
.academy-header__column.academy-header__column--media img{
object-position: center;
object-fit: contain;
height: 100%;
}
/* Content */
.academy-header__column.academy-header__column--content{
color: white;
}
.academy-header__eyebrow{
font-weight: 700;
font-size: 16px;
line-height: 24px;
text-transform: uppercase;
opacity: 0.8;
mix-blend-mode: multiply;
display: block;
margin-bottom: 10px;
}
.academy-header__column.academy-header__column--content h1{
color: var(--white)!important;
}
.academy-header__column.academy-header__column--content p:last-of-type{
margin-bottom: 0px;
}
.academy-header__ctas{
display: flex;
flex-direction: row;
width: 100%;
align-items: center;
gap: 12px;
margin-top: 28px;
margin-bottom: 40px;
}
.academy-header__partner img{
max-width: 150px;
min-width: 150px;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 1100px){
.academy-header{
gap: 100px;
}
}
@media screen and (max-width: 1000px){
.academy-header{
gap: 24px;
flex-direction: column-reverse;
}
.academy-header__column{
width: 100%;
}
.academy-header__ctas{
flex-direction: column;
gap: 8px;
margin-top: 20px;
}
.academy-header__ctas .primary-cta,
.academy-header__ctas .secondary-cta{
width: 100%;
}
}
.academy-sidebar{
padding: 40px 30px;
border-radius: var(--radius);
position: sticky;
top: 150px;
left: 0;
width: 100%;
height: max-content;
pointer-events: all;
}
/* Themes */
/* Themes -> Light */
.academy-sidebar.academy-sidebar--light{
background: #e6f0ef;
}
.academy-sidebar.academy-sidebar--light .academy-sidebar__dates__date,
.academy-sidebar.academy-sidebar--light .academy-sidebar__dates__additional,
.academy-sidebar.academy-sidebar--light .list__list-item__text,
.academy-sidebar.academy-sidebar--light .academy-sidebar__title__content{
color: #07272D;
}
/* Themes -> Dark */
.academy-sidebar.academy-sidebar--dark{
background: #07272D;
}
.academy-sidebar.academy-sidebar--dark .academy-sidebar__dates__date,
.academy-sidebar.academy-sidebar--dark .academy-sidebar__dates__additional,
.academy-sidebar.academy-sidebar--dark .list__list-item__text,
.academy-sidebar.academy-sidebar--dark .academy-sidebar__title__content{
color: white;
}
/* Content */
.academy-sidebar__content{
display: flex;
flex-direction: column;
gap: 16px;
width: 100%;
}
/* Title */
.academy-sidebar__title{
display: flex;
flex-direction: row;
align-items: center;
}
.academy-sidebar__title__icon{
padding-right: 16px;
border-right: 1px solid #CDEEEC;
}
.academy-sidebar__title__content{
padding-left: 16px;
}
.academy-sidebar__title__content span{
color: #CDEEEC;
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 1.5;
letter-spacing: 1.12px;
text-transform: uppercase;
}
/* Dates */
.academy-sidebar__dates{
display: flex;
flex-direction: column;
}
.academy-sidebar__dates__date{
color: #07272D;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 1.5; /* 27px */
}
.academy-sidebar__dates__additional{
color: #07272D;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
/* CTAS */
.academy-sidebar__ctas{
display: flex;
flex-direction: column;
gap: 12px;
width: 100%;
}
.academy-sidebar__ctas .primary-cta,
.academy-sidebar__ctas .secondary-cta{
width: 100%;
max-width: unset;
}
/* List */
.academy-sidebar__list{
display: flex;
flex-direction: column;
gap: 8px;
}
.academy-sidebar__list__list-item{
display: flex;
flex-direction: row;
align-items: center;
gap: 8px;
}
@media screen and (max-width: 1000px){
.academy-sidebar{
padding: 20px;
border-radius: 12px 12px 0px 0px;
position: fixed;
bottom: -1px;
transform: translateY(100%);
transition: 0.3s ease-in-out;
top: unset;
left: 0;
width: 100%;
height: max-content;
box-shadow: 0px -10px 20px 0px rgba(0, 57, 52, 0.10);
text-align: center;
}
.academy-sidebar.show-mobile{
transform: translateY(0%);
}
.academy-sidebar__list{
display: none;
}
.academy-sidebar__ctas{
align-items: center;
}
}
/* Setup */
.academy-case-study{
border-radius: 12px;
overflow: hidden;
}
/* Upper */
.academy-case-study__upper{
position: relative;
display: flex;
flex-direction: column;
gap: 160px;
padding: 60px 64px 40px 64px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.academy-case-study__upper::before{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
.academy-case-study__upper::after{
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 1;
}
/* Upper -> Header */
.academy-case-study__upper__header{
display: flex;
flex-direction: row;
align-items: center;
position: relative;
z-index: 2;
}
.academy-case-study__upper__header img{
border-right: 1px solid #cdeeec;
padding-right: 22px;
width: 100%;
height: auto;
max-width: 210px;
}
.academy-case-study__upper__header span{
display: block;
padding-left: 22px;
color: #cdeeec;
font-size: 16px;
font-style: normal;
font-weight: 700;
letter-spacing: 1.12px;
line-height: 1.5;
text-transform: uppercase;
}
/* Upper -> Content */
.academy-case-study__upper__content{
position: relative;
z-index: 2;
max-width: 90%;
}
.academy-case-study__upper__content h2{
color: white;
font-size: 32px;
font-style: normal;
font-weight: 600;
line-height: 1;
margin-bottom: 12px;
}
.academy-case-study__upper__content p:last-of-type{
color: white;
margin-bottom: 0px;
}
/* Lower */
.academy-case-study__lower{
display: flex;
flex-direction: column;
gap: 16px;
padding: 0px 64px 64px 64px;
}
/* Lower -> Segments */
.academy-case-study__segment{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
width: 100%;
}
.segment__index{
min-width: 56px;
min-height: 56px;
display: flex;
justify-content: center;
align-items: center;
border: 1px solid #81b0b1;
border-radius: 16px;
}
.segment__index span{
display: block;
color: #FFF;
font-family: Barlow;
font-size: 24px;
font-style: normal;
font-weight: 600;
line-height: 1;
}
.segment__content h3{
color: white;
font-size: 20px;
font-style: normal;
font-weight: 600;
line-height: 1;
margin-bottom: 4px;
line-height: 1.5;
}
.segment__content p{
color: white;
margin-bottom: 0px;
color: white;
}
@media screen and (max-width: 1023px){
.academy-case-study__upper{
padding: 24px 24px 40px 24px;
gap: 60px;
}
.academy-case-study__lower{
padding: 0px 24px 24px 24px;
gap: 24px;
}
.academy-case-study__upper__content{
max-width: 100%;
}
}
.boxed-width-switchback{
display: flex;
flex-direction: row;
justify-content: center;
align-items: stretch;
border-radius: var(--radius);
overflow: hidden;
}
.boxed-width-switchback.boxed-width-switchback--reverse{
flex-direction: row-reverse;
}
.boxed-content-switchback__column{
width: 50%;
}
.boxed-content-switchback__column.boxed-content-switchback__column--content{
display: flex;
flex-direction: column;
justify-content: center;
padding: 40px clamp(32px, 10vw, 120px);
transition: padding var(--transition);
}
.boxed-content-switchback__column.boxed-content-switchback__column--content ul{
margin-bottom: 24px;
}
[class*="max-width-section-centering"] .boxed-content-switchback__column.boxed-content-switchback__column--content{
padding: 60px;
}
.boxed-content-switchback__column.boxed-content-switchback__column--image{
min-height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.boxed-content-switchback__column.boxed-content-switchback__column--image img{
width: 100%;
height: 100%;
object-fit: contain;
}
@media screen and (max-width: 1200px){
.boxed-content-switchback__column.boxed-content-switchback__column--content{
padding: 40px clamp(32px, 10vw, 60px);
}
}
@media screen and (max-width: 900px){
.boxed-width-switchback{
flex-direction: column!important;
}
.boxed-width-switchback.boxed-width-switchback--media-top{
flex-direction: column-reverse!important;
}
.boxed-content-switchback__column{
width: 100%;
}
.boxed-content-switchback__column.boxed-content-switchback__column--content{
padding: 30px!important;
}
.boxed-content-switchback__column.boxed-content-switchback__column--image{
min-height: 300px;
}
}
.academy-compliance{
padding: 32px 32px 32px 48px;
display: flex;
flex-direction: row;
gap: 64px;
border-radius: 12px;
align-items: flex-start;
}
.academy-compliance__column.academy-compliance__column--content h3{
color: #07272D;
font-size: 20px;
font-style: normal;
font-weight: 500;
line-height: 150%; /* 30px */
margin-bottom: 4px;
}
/* Content -> Points */
.academy-compliance__point{
display: flex;
flex-direction: row;
gap: 8px;
align-items: flex-start;
}
.academy-compliance__point:first-of-type{
margin-top: 10px;
}
.academy-compliance__point__icon{
width: 20px;
height: 20px;
}
.academy-compliance__point p{
margin-bottom: 8px;
color: #07272D;
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
.academy-compliance__point:last-of-type p{
margin-bottom: 0px;
}
/* Image */
.academy-compliance__column.academy-compliance__column--image{
width: 33.3%;
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
}
.academy-compliance__column.academy-compliance__column--image img{
width: 100%;
height: auto;
object-fit: contain;
}
@media screen and (max-width: 767px){
.academy-compliance{
padding: 24px;
flex-direction: column-reverse;
gap: 20px;
}
.academy-compliance__column.academy-compliance__column--image{
justify-content: center;
align-items: center;
width: 100%;
}
.academy-compliance__column.academy-compliance__column--image img{
max-width: 160px;
max-height: unset;
}
}
.academy-skills{
display: flex;
flex-direction: row;
gap: 8px;
flex-wrap: wrap;
}
.academy-skills__skill{
padding: 12px 24px;
border-radius: 32px;
max-width: max-content;
}
@media screen and (max-width: 767px){
.academy-skills{
flex-direction: column;
gap: 14px;
}
}
.course-summary{
border-radius: 6px;
padding: 32px 40px;
background-color: white;
box-shadow: 0px 10px 20px 0px rgba(0, 57, 52, 0.10);
display: flex;
flex-direction: row;
}
.course-summary__summary-item{
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
padding: 0px 50px;
border-left: 1px solid #ced6d6;
max-width: 33.3%;
width: 33.3%;
}
.course-summary__summary-item:first-of-type{
padding-left: 0px;
border-left: 0px solid transparent;
}
.course-summary__summary-item:last-of-type{
padding-right: 0px;
}
.summary-item__icon{
width: 48px;
height: 48px;
}
.summary-item__icon img{
width: 100%;
height: 100%;
object-fit: contain;
}
.summary-item__content{
display: flex;
flex-direction: column;
}
.summary-item__content__title{
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.summary-item__content__description{
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
@media screen and (max-width: 1200px){
.course-summary{
padding: 24px;
justify-content: center;
}
.course-summary__summary-item{
padding: 0px 24px;
}
.summary-item__content__title{
font-size: 18px;
}
.summary-item__content__description{
font-size: 16px;
}
}
@media screen and (max-width: 1000px){
.course-summary{
flex-direction: column;
gap: 24px;
}
.course-summary__summary-item{
display: flex;
flex-direction: row;
gap: 16px;
padding: 0px;
border-left: 0px solid transparent;
max-width: unset;
width: 100%;
}
.summary-item__icon{
width: 32px;
height: 32px;
}
.summary-item__content__title{
font-size: 16px;
}
.summary-item__content__description{
font-size: 14px;
}
}
.all-products {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}
@media (max-width: 1023px) {
.all-products {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.all-products {
grid-template-columns: 1fr;
}
}
.all-solutions{
display: flex;
flex-direction: column;
gap: 120px;
width: 100%;
}
.all-solutions__categories{
display: flex;
flex-direction: row;
gap: 16px;
flex-wrap: wrap;
width: 100%;
align-items: center;
}
.all-solutions__category{
padding: 16px;
border-radius: 30px;
background-color: var(--white);
text-transform: uppercase;
font-weight: 500!important;
font-size: 14px;
line-height: 1;
letter-spacing: 2px;
color: var(--dark-teal-green)!important;
transition: var(--transition);
}
.all-solutions__category:hover{
background-color: var(--dark-teal-green);
color: var(--white)!important;
}
.all-solutions__category::before{
display: none;
}
.all-solutions__solution-section{
display: flex;
flex-direction: column;
width: 100%;
}
.all-solutions__solution-section h2{
margin-bottom: 40px;
}
.all-solutions__solution-section .label{
margin-bottom: 32px;
}
.all-sections__solution-section-type {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 18px;
margin-bottom: 50px;
}
.solution-card{
padding: 34px;
border-radius: 10px;
background-color: var(--white);
display: flex;
flex-direction: column;
gap: 16px;
}
.solution-card h3, .solution-card p{
margin-bottom: 0px;
}
.solution-card .text-cta{
margin-top: 8px;
max-width: max-content;
}
@media (max-width: 1024px) {
.all-sections__solution-section-type {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 768px) {
.all-sections__solution-section-type {
grid-template-columns: 1fr;
}
.all-solutions{
gap: 64px;
}
.all-sections__solution-section-type {
margin-bottom: 32px;
}
}
.academy-subscription-banner{
background-color: #003934;
border-radius: var(--radius);
padding: 80px 100px;
display: flex;
align-items: center;
flex-direction: row;
gap: 120px;
}
.academy-subscription-banner__column{
width: 50%;
}
.academy-subscription-banner__column.academy-subscription-banner__column--testimonial{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.academy-subscription-banner__testimonial-image{
width: 100px;
height: 100px;
object-fit: contain;
object-position: center;
margin-bottom: 24px;
}
.academy-subscription-banner__column.academy-subscription-banner__column--testimonial blockquote{
color: white;
text-align: center;
margin-bottom: 24px;
}
.academy-subscription-banner__column.academy-subscription-banner__column--testimonial p{
color: white;
margin-bottom: 0px;
}
/* Modal Content */
.academy-subscription-banner__form{
padding: 40px;
background-color: white;
}
@media screen and (max-width: 1100px){
.academy-subscription-banner{
padding: 50px;
}
}
@media screen and (max-width: 900px){
.academy-subscription-banner{
padding: 32px;
}
.academy-subscription-banner__testimonial-image{
width: 80px;
height: 80px;
}
}
@media screen and (max-width: 800px){
.academy-subscription-banner{
flex-direction: column-reverse;
}
.academy-subscription-banner__column{
width: 100%;
}
.academy-subscription-banner__column.academy-subscription-banner__column--content{
text-align: center;
}
.academy-subscription-banner__column.academy-subscription-banner__column--testimonial{
display: none;
}
}
.certifications {
display: grid;
gap: 40px;
}
.certifications.certifications--two-per-row{
grid-template-columns: repeat(2, 1fr);
}
.certifications.certifications--three-per-row{
grid-template-columns: repeat(3, 1fr);
}
.certifications.certifications--four-per-row{
grid-template-columns: repeat(4, 1fr);
}
.certification {
display: flex;
flex-direction: row;
align-items: center;
gap: 20px;
}
.certification-logo{
max-width: 120px;
max-height: 120px;
width: 100%;
aspect-ratio: 1/1;
}
.certification-logo img{
min-width: 100px;
min-height: 100px;
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
}
.certification-content h5{
margin-bottom: 4px;
}
.certification-content p:last-of-type{
margin-bottom: 0px;
}
@media (max-width: 1200px) {
.certifications.certifications--two-per-row{
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 1023px) {
.certifications.certifications--four-per-row {
grid-template-columns: repeat(2, 1fr);
}
.certifications.certifications--three-per-row {
grid-template-columns: repeat(2, 1fr);
}
.certifications.certifications--three-per-row .certification:nth-child(3) {
grid-column: 1 / span 2;
}
}
@media (max-width: 767px) {
.certifications {
grid-template-columns: 1fr !important;
}
.certifications .certification {
grid-column: auto !important;
}
}
.cta-banner{
padding: 80px 70px;
border-radius: var(--radius);
display: flex;
flex-direction: row;
align-items: center;
gap: 100px;
}
.cta-banner__header h2{
margin-bottom: 50px;
}
.cta-banner.cta-banner--light h1,
.cta-banner.cta-banner--light h2,
.cta-banner.cta-banner--light h3,
.cta-banner.cta-banner--light h4,
.cta-banner.cta-banner--light h5,
.cta-banner.cta-banner--light h6,
.cta-banner.cta-banner--light p{
color: white!important;
}
.cta-banner__column{
width: 50%;
}
.cta-banner__column img{
width: 100%;
height: 100%;
object-fit: contain;
object-position: center;
max-height: 400px;
}
@media screen and (max-width: 1080px) {
.cta-banner{
padding: 60px 40px;
gap: 50px;
}
}
@media screen and (max-width: 900px) {
.cta-banner{
flex-direction: column-reverse;
padding: 60px 30px;
}
.cta-banner__column{
width: 100%;
}
}
.event-header{
display: flex;
flex-direction: row;
gap: 50px;
}
.event-header__column.event-header__column--content{
width: 40%;
}
.event-header__column.event-header__column--iframe{
max-width: 60%;
width: 60%;
border-radius: var(--radius);
min-height: max-content;
overflow: clip;
}
.event-header__column.event-header__column--iframe iframe{
width: 100%;
}
@media screen and (max-width: 1023px){
.event-header{
gap: 24px;
}
.event-header__column.event-header__column--content{
width: 50%;
}
.event-header__column.event-header__column--iframe{
max-width: 50%;
width: 50%;
}
}
@media screen and (max-width: 767px){
.event-header{
flex-direction: column;
}
.event-header__column.event-header__column--content{
width: 100%;
}
.event-header__column.event-header__column--iframe{
max-width: 100%;
width: 100%;
}
}
.feature-cards{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
}
.feature-cards__card{
display: flex;
flex-direction: column;
gap: 8px;
border-radius: 12px;
border: 1px solid rgba(7, 39, 45, 0.10);
background-color: white;
box-shadow: 0px 5px 10px 0px rgba(0, 57, 52, 0.10);
padding: 24px 32px 32px 32px;
position: relative;
overflow: hidden;
}
.feature-cards__card svg{
position: absolute;
bottom: 0px;
right: 0px;
pointer-events: none;
}
.feature-card__content h3{
color: #07272D;
font-size: 16px;
font-weight: 600;
line-height: 1.5;
margin-bottom: 8px;
}
@media screen and (max-width: 767px){
.feature-cards{
grid-template-columns: repeat(1, 1fr);
}
}
.featured-case-study{
border-radius: var(--radius);
padding: 32px 32px 90px 120px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: relative;
overflow: hidden;
}
.featured-case-study::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: linear-gradient(260deg, rgba(7, 39, 45, 0.00) 45.44%, var(--tiber-green) 95.5%);
z-index: 2;
pointer-events: none;
}
.featured-case-study__header,
.featured-case-study__body{
position: relative;
z-index: 3;
}
.featured-case-study__header{
display: flex;
justify-content: flex-end;
margin-bottom: 120px;
}
.featured-case-study__header .featured-card__upper-content-logo{
width: 134px;
height: 134px;
}
.featured-case-study__header .featured-card__upper-content-logo .featured-card__upper-content-logo img {
max-width: 110px;
}
.featured-case-study__body{
display: flex;
flex-direction: column;
gap: 20px;
}
.featured-case-study__body-tags{
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
.featured-case-study__body h3,
.featured-case-study__body p{
margin-bottom: 0px;
color: white;
max-width: 500px;
}
@media screen and (max-width: 1200px){
.featured-case-study{
padding: 64px 32px;
}
}
@media screen and (max-width: 767px){
.featured-case-study{
padding: 32px;
}
}
.summary-bar {
border-radius: 6px;
padding: 32px 40px;
background-color: white;
box-shadow: 0px 19px 24px 0px rgba(0, 104, 94, 0.08), 0px 10px 30px 0px rgba(0, 104, 94, 0.05);
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 24px;
margin-top: -50px;
z-index: 3;
position: relative;
}
.summary-bar__summary-item {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 20px;
padding: 0 24px;
border-left: 1px solid #ced6d6;
}
.summary-bar__summary-item:first-of-type {
padding-left: 0;
border-left: 0;
}
.summary-bar__summary-item:last-of-type {
padding-right: 0;
}
.summary-item-icon {
width: 48px;
height: 48px;
}
.summary-item__icon img {
width: 100%;
height: 100%;
object-fit: contain;
}
.summary-item__logo{
max-height: 64px;
object-fit: contain;
height: 100%;
}
.summary-item__logo img{
max-height: 100%;
}
.summary-item__content {
display: flex;
flex-direction: column;
}
.summary-item__content-title {
font-size: 20px;
font-weight: 600;
line-height: 1.4;
}
.summary-item__content-description {
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
@media screen and (max-width: 1023px) {
.summary-bar {
grid-template-columns: repeat(2, 1fr);
padding: 24px;
}
.summary-bar__summary-item {
padding: 0 24px;
}
.summary-item__content-title {
font-size: 18px;
}
.summary-item__content-description {
font-size: 16px;
}
}
@media screen and (max-width: 767px) {
.summary-bar {
grid-template-columns: 1fr;
gap: 16px;
}
.summary-bar__summary-item {
padding: 0;
border-left: 0;
}
.summary-item-icon {
width: 32px;
height: 32px;
}
.summary-item__content-title {
font-size: 16px;
}
.summary-item__content-description {
font-size: 14px;
}
}
.home-hero{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}
.home-hero__content h1{
line-height: 1em;
margin: 0;
}
.home-hero__prefix{
display: inline-block;
margin-bottom: 6px;
}
.home-hero__slider {
display: inline-block;
overflow: hidden;
vertical-align: bottom;
height: 1em; /* exactly 60px now */
}
.home-hero__slider-inner{
display: inline-block;
will-change: transform;
}
.home-hero__slider-inner span {
display: block;
height: 1em;
line-height: 0.8em;
overflow: hidden;
width: max-content;
}
.home-hero__content p:first-of-type{
margin-top: 24px;
}
.home-hero__content p{
max-width: 1100px;
}
.home-hero__ctas{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 32px;
margin-top: 32px;
width: 100%;
}
.home-hero__image{
margin-top: 90px;
max-width: 900px;
}
.home-hero__image img{
width: 100%;
object-fit: contain;
}
@media screen and (max-width: 900px){
.home-hero{
flex-direction: column-reverse;
}
.home-hero__ctas{
flex-direction: column;
gap: 16px;
}
.home-hero__image{
margin-top: 0px;
margin-bottom: 32px;
}
}
.image-cards {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.image-cards:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
.image-cards:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, auto);
}
.image-cards:has(> :nth-child(3):last-child) > :nth-child(3) {
grid-column: 2;
grid-row: 1 / span 2;
}
/* === REVERSE MODIFIER === */
.image-cards--reverse {
display: grid;
gap: 20px;
grid-template-columns: 1fr;
}
.image-cards--reverse:has(> :nth-child(2):last-child) {
grid-template-columns: repeat(2, 1fr);
}
.image-cards--reverse:has(> :nth-child(3):last-child) {
grid-template-columns: 1fr 1fr;
grid-template-rows: repeat(2, auto);
}
/* Mirror the large card in 3 card layout: big card on the left instead of right */
.image-cards--reverse:has(> :nth-child(3):last-child) > :nth-child(3) {
grid-column: 1;
grid-row: 1 / span 2;
}
/* === CARDS === */
.image-card {
display: flex;
gap: 24px;
border-radius: 8px;
align-items: stretch;
box-shadow: var(--box-shadow--hidden);
transition: box-shadow var(--transition);
position: relative;
isolation: isolate;
padding: 60px 40px;
overflow: clip;
}
.image-card:hover{
box-shadow: var(--box-shadow);
}
.image-card__column {
display: flex;
flex-direction: column;
}
.image-card__column.image-card__column--image{
display: none;
}
/* Cards -- If vertical */
.image-card.image-card--vertical .image-card__column.image-card__column--content {
width: 75%;
}
.image-card.image-card--vertical .image-card__column.image-column--image {
padding-right: 0px;
}
.image-card.image-card--vertical .image-card__column.image-card__column--image {
align-items: flex-end;
}
/* Cards -- If horizontal */
.image-card .image-card__column.image-card__column--content {
width: 60%;
}
.image-card.image-card--horizontal .image-card__column.image-card__column--image {
width: 30%;
padding-right: 24px;
}
.image-card .image-card__column.image-column--image {
padding-right: 24px;
}
.image-card__column.image-card__column--image.image-card__column--image--center {
justify-content: center;
}
.image-card__column.image-card__column--image.image-card__column--image--bottom {
justify-content: flex-end;
}
.image-card .image-card__image{
position: absolute;
width: max-content;
object-fit: cover;
object-position: top right;
z-index: -1;
pointer-events: none;
transition: var(--transition);
}
.image-card.image-card--horizontal .image-card__image {
height: 100%;
top: 0;
right: 0;
}
.image-card.image-card--vertical .image-card__image{
bottom: 0;
right: 0;
height: 300px;
}
.image-card.image-card--single{
min-height: 400px;
align-items: center;
}
.image-card.image-card--single .image-card__image{
right: 50px;
}
/* === MEDIA QUERIES === */
@media (max-width: 1023px) {
.image-cards:has(> :nth-child(3):last-child),
.image-cards--reverse:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto);
}
.image-cards:has(> :nth-child(3):last-child) > :nth-child(3),
.image-cards--reverse:has(> :nth-child(3):last-child) > :nth-child(3) {
grid-column: 1 / span 2;
grid-row: 2;
}
.image-card .image-card__image{
opacity: 0.8;
}
.image-card.image-card--vertical .image-card__image{
height: 100%;
}
}
@media (max-width: 767px) {
.image-card{
padding: 0px;
flex-direction: column;
}
.image-cards:has(> :nth-child(3):last-child),
.image-cards--reverse:has(> :nth-child(3):last-child) {
grid-template-columns: repeat(1, 1fr);
grid-template-rows: auto;
}
.image-cards:has(>:nth-child(2):last-child),
.image-cards--reverse:has(>:nth-child(2):last-child) {
grid-template-columns: auto;
}
.image-cards:has(> :nth-child(3):last-child) > :nth-child(3),
.image-cards--reverse:has(> :nth-child(3):last-child) > :nth-child(3) {
grid-column: auto;
grid-row: auto;
}
.image-card.image-card--horizontal .image-card__image,
.image-card.image-card--vertical .image-card__image{
display: none;
}
.image-cards,
.image-cards--reverse {
grid-template-rows: 1fr;
grid-template-columns: 1fr;
}
.image-card.image-card .image-card__column.image-card__column--content {
padding: 32px 24px 0px 24px;
width: 100%;
}
.image-card .image-card__column.image-card__column--image{
display: flex;
}
.image-card .image-card__column.image-card__column--image img{
max-height: 250px;
}
.image-card.image-card--horizontal .image-card__column.image-card__column--image {
width: 100%;
padding-right: 0px;
align-items: center;
}
.image-card__column.image-card__column--image.image-card__column--image--bottom {
align-items: center;
}
}
.testimonial-listing{
display: flex;
flex-direction: column;
width: 100%;
}
/* Filters */
.testimonial-listing__filters{
display: flex;
flex-direction: row;
gap: 16px;
width: 100%;
align-items: center;
justify-content: flex-start;
gap: 50px;
margin-bottom: 50px;
}
.testimonial-listing__filters__filter-wrapper{
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
}
.testimonial-listing__filters__filter-wrapper p{
display: block;
min-width: max-content;
margin-bottom: 0px;
}
.testimonial-listing__filters__filter-wrapper select{
min-width: 240px;
border-top: 0px solid transparent;
border-left: 0px solid transparent;
border-right: 0px solid transparent;
border-radius: var(--radius);
padding: 10px 16px;
}
.testimonial-listing__filters__tag{
border: .1rem solid #003934;
border-radius: 10px;
cursor: pointer;
font-size: 15px;
line-height: 1.4;
padding: 10px 22px;
color: #003934;
font-weight: var(--font_weight_medium);
text-transform: uppercase;
background-color: transparent;
box-shadow: none;
}
.testimonial-listing__filters__tag:hover,
.testimonial-listing__filters__tag.active{
background: transparent linear-gradient(270deg, #009036, #00752c 38%, #00481b) 0 0 no-repeat padding-box;
border: .1rem solid transparent;
color: var(--white_color);
box-shadow: none;
}
.testimonial-listing__filters__mobile-select{
display: none;
}
@media screen and (max-width: 767px){
.testimonial-listing__filters{
flex-direction: column;
margin-bottom: 40px;
}
.testimonial-listing__filters__search{
min-width: unset;
width: 100%;
}
.testimonial-listing__filters__tag{
display: none;
}
.testimonial-listing__filters__mobile-select{
appearance: none; /* For most browsers */
-webkit-appearance: none; /* For Safari and Chrome */
-moz-appearance: none; /* For Firefox */
display: initial;
width: 100%;
padding: 16px;
border: none;
border-radius: 8px;
background: transparent linear-gradient(270deg,#009036,#00752c 38%,#00481b) 0 0 no-repeat padding-box;
color: white;
}
}
.testimonial-listing__cards__no-results{
display: none;
}
.testimonial-listing__cards__no-results.show-message{
display: initial;
}
/* Cards */
.testimonial-listing__cards{
display: flex;
width: 100%;
flex-direction: column;
gap: 32px;
}
.testimonial-card.show-card{
display: flex;
width: 100%
}
.testimonial-card.hide-card{
display: none;
}
.testimonial-card{
display: flex;
flex-direction: row;
gap: 50px;
padding: 32px;
border-radius: var(--radius);
border: 1px solid var(--grey);
box-shadow: var(--box-shadow--hidden);
transition: var(--transition);
}
.testimonial-card:hover{
box-shadow: var(--box-shadow);
}
.testimonial-card__column--image{
width: 20%;
display: flex;
justify-content: center;
align-items: center;
}
.testimonial__image{
width: 100%;
height: auto;
aspect-ratio: 1/1;
border-radius: 100%;
object-fit: cover;
object-position: center;
}
.testimonial-card__column--content{
width: 80%;
}
.testimonial-content{
display: block;
text-wrap: balance;
font-size: 20px;
margin-bottom: 24px;
font-style: italic;
color: #737373;
}
.testimonial-name{
display: block;
text-wrap: balance;
font-size: 24px;
margin-bottom: 4px;
font-weight: bold;
color: black;
line-height: 1;
}
.testimonial-role{
display: block;
text-wrap: balance;
font-size: 16px;
margin-bottom: 24px;
color: #737373;
}
.testimonial-programme{
display: block;
text-wrap: balance;
font-size: 20px;
margin-bottom: 12px;
font-weight: bold;
color: black;
}
.testimonial-programme a{
color: #003e3b;
text-decoration: underline;
}
.testimonial__review{
display: flex;
flex-direction: row;
justify-content: flex-end;
align-items: center;
gap: 12px;
}
.testimonial__review img{
width: 20px;
height: 20px;
object-position: center;
object-fit: contain;
}
.testimonial__review a{
color: #003e3b;
text-decoration: underline;
}
.testimonial-listing .pagination{
margin-top: 40px;
}
@media screen and (max-width: 767px){
.testimonial-card{
flex-direction: column;
gap: 24px;
}
.testimonial-card__column--image{
width: 100%;
}
.testimonial-card__column--image img{
max-height: 240px;
width: auto;
}
.testimonial-card__column--content{
width: 100%;
}
.testimonial-content{
text-align: center;
margin-bottom: 32px;
}
.testimonial-name{
text-wrap:unset;
}
.testimonial-role{
text-wrap:unset;
}
.testimonial-programme{
text-wrap:unset;
display: flex;
flex-direction: column;
}
.testimonial__review{
margin-top: 32px;
justify-content: flex-start;
}
}
/* Pagination */
.testimonial-listing__pagination{
margin-top: 100px;
display: flex;
flex-direction: row;
justify-content: center;
gap: 20px;
}
.blog-pagination__link{
background-color: #fff;
border-radius: 0;
box-shadow: unset;
color: var(--tertiary_color);
font-size: var(--body_font_font_size);
height: 48px;
line-height: 1.5;
padding-bottom: 0;
padding-left: var(--gutter_width);
padding-right: var(--gutter_width);
padding-top: 0;
text-transform: unset;
transition: background-color var(--default_transition);
}
.blog-pagination__link.active,
.blog-pagination__link:hover{
background-color: hsla(195, 9%, 91%, .5);
box-shadow: unset;
}
/* Responsive Styling */
@media screen and (max-width: 767px){
.testimonial-listing__pagination{
margin-top: 64px;
}
.testimonial-listing__filters__filter-wrapper{
display: flex;
flex-direction: column;
width: 100%;
}
.testimonial-listing__filters__filter-wrapper p{
margin-bottom: 16px;
}
.testimonial-listing__filters__filter-wrapper select{
min-width: unset;
width: 100%;
}
.testimonial-listing__filters {
gap: 20px;
}
.testimonial-card .resource-post {
align-items: center;
flex-direction: column;
gap: 20px;
}
.testimonial-card .blog-post-listing__card__image-wrapper {
min-height: unset;
}
.testimonial-card .blog-post-listing__card__image-wrapper img {
min-height: unset;
}
}
.info-banner{
display: flex;
flex-direction: row;
gap: 8px;
border-radius: 6px;
background: #F2F9F8;
padding: 16px 24px 16px 16px;
}
.info-banner__column.info-banner__column--icon{
min-width: 24px;
}
.info-banner__column.info-banner__column--content span{
font-size: 14px;
display: block;
margin-top: -6px;
}
.mixed-content {}
.mixed-content.mixed-content--boxed {
padding: 80px 50px;
border-radius: var(--radius);
}
.mixed-content__header h2 {
margin-bottom: 50px;
}
.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 {
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: 500px;
width: 100%;
height: auto;
object-fit: cover;
}
@media screen and (max-width: 1023px) {
.mixed-content__columns {
grid-template-columns: repeat(2, 1fr);
}
}
@media screen and (max-width: 768px) {
.mixed-content__columns {
grid-template-columns: 1fr;
gap: 32px;
}
.mixed-content.mixed-content--boxed {
padding: 50px 30px;
}
}
/* two-per-row */
.mixed-content--two-per-row .mixed-content__columns {
grid-template-columns: repeat(2, 1fr);
}
@media screen and (max-width: 768px) {
.mixed-content--two-per-row .mixed-content__columns {
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;
}
}
.portal-login{
width: 100%;
display: flex;
flex-direction: row;
align-items: stretch;
border-radius: var(--radius);
overflow: hidden;
box-shadow: 0 94px 104px 0 rgba(0, 57, 52, 0.10), 0 24px 54px 0 rgba(0, 57, 52, 0.08), 0 4px 100px 0 rgba(0, 57, 52, 0.05);
}
.portal-login__column{
width: 50%;
padding: 80px 70px;
text-align: center;
}
.portal-login__column.portal-login__column--customer-portal{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.portal-login__column.portal-login__column--single-applications{
background-color: white;
}
.portal-login__column.portal-login__column--customer-portal .secondary-cta{
max-width: unset;
width: 100%;
margin-top: 32px;
}
.portal-login__column.portal-login__column--customer-portal h3,
.portal-login__column.portal-login__column--customer-portal p{
color: white;
}
.portal-login__column.portal-login__column--single-applications .login-button{
margin-bottom: 6px;
}
/* Login Buttons */
.login-button{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
background-color: var(--light-grey);
border-radius: var(--radius);
transition: var(--transition);
position: relative;
padding: 10px;
cursor: pointer;
}
.login-button:hover{
background-color: var(--dark-teal-green);
}
.login-button__content{
display: flex;
flex-direction: row;
align-items: center;
gap: 10px;
}
.login-button .login-button__content h6{
margin-bottom: 0px;
color: inherit;
transition: var(--transition);
}
.login-button:hover .login-button__content h6{
color: white;
}
.login-button .login-button__content img{
width: 40px;
height: 40px;
object-fit: contain;
}
/* Modal */
.portal-login__modal-content{
max-width: 420px;
}
.portal-login__modal-content h3,
.portal-login__modal-content p{
text-align: center;
}
.portal-login__modal-content .simple-form{
margin-top: 32px;
}
.portal-login__modal-content .simple-form .hs-button{
width: 100%;
margin-top: 32px;
}
.ecs-modal.ecs-modal--portalLogin .ecs-modal__content{
width: max-content;
padding: 50px 40px;
}
.ecs-modal .simple-form .hs-form-booleancheckbox-display {
pointer-events: none!important;
}
.ecs-modal.ecs-modal--show .simple-form .hs-form-booleancheckbox-display{
pointer-events: all!important;
}
@media screen and (max-width: 767px){
.portal-login{
flex-direction: column;
}
.portal-login__column{
width: 100%;
padding: 32px 24px;
}
}
.pricing-table-wrapper{
overflow-x:scroll;
}
.pricing-table-th{
border-right: 0px;
border-radius: var(--radius) var(--radius) 0px 0px;
padding: 20px;
text-align: center;
vertical-align: middle;
min-width: 360px;
}
.pricing-table-th:first-of-type{
text-align: left;
}
.pricing-table-th--light h5,
.pricing-table-th--light p{
color: white!important;
margin-bottom: 0px;
}
.pricing-table tbody tr:first-of-type{
border-top: 1px solid var(--grey);
}
.pricing-table tr td{
text-align: center;
vertical-align: middle;
}
.pricing-table tr td h5,
.pricing-table tr td p{
margin-bottom: 0px;
}
.pricing-table tr td:first-of-type{
text-align: left;
}
.pricing-table tr:last-of-type{
background-color: transparent;
border-bottom: 0px;
}
.pricing-table tr:last-of-type td{
border: 0px;
}
.pricing-table tbody tr:first-of-type td {
border: 1px solid var(--grey)!important;
}
.pricing-table tbody tr:first-of-type td:first-of-type{
border-left: 0px!important;
}
.pricing-table tbody tr:first-of-type td:last-of-type{
border-right: 0px!important;
}
.portal-overview-header{
position: relative;
isolation: isolate;
}
.portal-overview-header .content-wrapper {
display: grid;
grid-template-columns: 1fr;
align-items: center;
padding: 0px;
gap: 90px;
}
.portal-overview-header__content p:last-of-type{
margin-bottom: 32px;
}
@media screen and (min-width: 950px) {
.portal-overview-header .content-wrapper {
grid-template-columns: 1.3fr 0.7fr;
}
}
/* ****************************************
SOLAR SYSTEM IMAGE STYLES
**************************************** */
.circle {
--size: 80;
--animation_timer: 40s;
position: relative;
width: calc(var(--size) * 1vw);
height: calc(var(--size) * 1vw);
margin: 0 auto;
border-radius: 50%;
animation: orbit var(--animation_timer) linear infinite;
user-select: none;
}
.circle.circle--large{
--size: 100;
--animation_timer: 110s;
animation: orbit var(--animation_timer) linear infinite;
}
.logo-solar-system{
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
align-items: center;
justify-content: center;
max-width: 360px;
width: 100%;
margin: 0 auto
}
.logo-solar-system svg, .circle{
grid-column: -1 / 1;
grid-row: -1 / 1;
margin: 0 auto;
width: 100%;
}
.orbit {
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
transform-origin: center center;
}
.img-wrapper {
--imgWidth: 36;
position: absolute;
top: calc((var(--size) * 2) * 1px - 10px);
left: -17px;
width: calc(var(--imgWidth) * 1px);
height: calc(var(--imgWidth) * 1px);
transform-origin: center center;
border-radius: 16px;
}
.img-wrapper img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
max-width: calc(var(--imgWidth) * 1px);
max-height: calc(var(--imgWidth) * 1px);
box-shadow: var(--box-shadow);
border-radius: 16px;
}
.center-logo{
animation: orbit 60s linear infinite;
max-width: 140px;
}
.orbit-lines{
opacity: 0.5;
animation: orbit 120s linear infinite;
max-width: 100%;
}
/* Static orbit positions */
.orbit1 { transform: rotate(0deg); }
.orbit2 { transform: rotate(72deg); }
.orbit3 { transform: rotate(144deg); }
.orbit4 { transform: rotate(216deg); }
.orbit5 { transform: rotate(288deg); }
/* Counter-rotation per image */
.orbit1 .img-wrapper {
animation: counterOrbit0 var(--animation_timer) linear infinite;
}
.orbit2 .img-wrapper {
animation: counterOrbit72 var(--animation_timer) linear infinite;
}
.orbit3 .img-wrapper {
animation: counterOrbit144 var(--animation_timer) linear infinite;
}
.orbit4 .img-wrapper {
animation: counterOrbit216 var(--animation_timer) linear infinite;
}
.orbit5 .img-wrapper {
animation: counterOrbit288 var(--animation_timer) linear infinite;
}
/* Main orbit rotation */
@keyframes orbit {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* Individual counter-rotations */
@keyframes counterOrbit0 {
from { transform: rotate(0deg); }
to { transform: rotate(-360deg); }
}
@keyframes counterOrbit72 {
from { transform: rotate(-72deg); }
to { transform: rotate(-432deg); }
}
@keyframes counterOrbit144 {
from { transform: rotate(-144deg); }
to { transform: rotate(-504deg); }
}
@keyframes counterOrbit216 {
from { transform: rotate(-216deg); }
to { transform: rotate(-576deg); }
}
@keyframes counterOrbit288 {
from { transform: rotate(-288deg); }
to { transform: rotate(-648deg); }
}
@media screen and (min-width: 500px){
.circle {
--size: 100;
}
.circle.circle--large{
--size: 120;
}
.img-wrapper {
--imgWidth: 48;
}
.center-logo{
animation: orbit 60s linear infinite;
max-width: none;
}
}
@media screen and (min-width: 768px){
.circle {
--size: 340;
--animation_timer: 24s;
width: calc(var(--size) * 1px);
height: calc(var(--size) * 1px);
}
.circle.circle--large{
--size: 540;
--animation_timer: 45s;
}
.img-wrapper {
--imgWidth: 64;
top: calc(((var(--size) / 2) - calc(var(--imgWidth) / 2)) * 1px);
}
.logo-solar-system{
max-width: 640px;
}
.portal-overview-header .content-wrapper{
gap: 180px;
}
}
@media screen and (min-width: 950px) {
.circle.circle--large{
--size: 380;
}
.img-wrapper {
--imgWidth: 50;
}
}
@media screen and (min-width: 1024px) {
.circle.circle--large{
--size: 430;
}
.img-wrapper {
--imgWidth: 50;
}
}
@media screen and (min-width: 1280px) {
.circle.circle--large{
--size: 500;
}
.img-wrapper {
--imgWidth: 50;
}
}
.product-bundles {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.product-bundle__modal{
display: flex;
flex-direction: row;
align-items: stretch;
}
.product-bundle__modal-column{
width: 50%;
position: relative;
}
.product-bundle__modal-column.product-bundle__modal-column--form{
background-color: #e5f3ea;
padding: 64px;
}
.product-bundle__modal-column.product-bundle__modal-column--form h3{
margin-bottom: 12px;
text-align: center;
}
.product-bundle__modal-column.product-bundle__modal-column--form p{
margin-bottom: 40px;
text-align: center;
}
.product-bundle__modal-column.product-bundle__modal-column--form .hs_submit{
display: flex;
justify-content: center;
margin-top: 32px;
}
.product-bundle__modal__bundle-content{
padding: 64px;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max-content;
pointer-events: none;
transition: var(--transition);
display: none;
}
.product-bundle__modal__bundle-content.product-bundle__modal__bundle-content--active{
display: block;
}
.product-bundle__modal__bundle-content .logo-slider{
overflow: clip;
margin-top: 80px;
}
.product-bundle__modal__bundle-content h2,
.product-bundle__modal__bundle-content h5{
margin-bottom: 40px;
word-break: break-word;
}
.modal-product{
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 16px;
margin-bottom: 24px;
}
.modal-product img{
width: 28px;
height: 28px;
object-fit: contain;
margin-top: 6px;
}
.modal-product p:last-of-type{
margin-bottom: 0px;
}
@media screen and (max-width: 1060px) {
.product-bundles {
grid-template-columns: repeat(2, 1fr);
}
.product-bundles > *:nth-child(3) {
grid-column: auto;
}
.product-bundle__modal{
flex-direction: column;
}
.product-bundle__modal-column{
width: 100%;
}
.product-bundle__modal__bundle-content{
padding: 32px;
}
.product-bundle__modal__bundle-content h2.h1{
font-size: 30px!important;
}
.product-bundle__modal-column.product-bundle__modal-column--form{
padding: 32px;
}
}
@media screen and (max-width: 767px) {
.product-bundles {
grid-template-columns: 1fr;
}
.product-bundles > *:nth-child(3) {
grid-column: 1 / -1;
}
.product-bundle__modal__bundle-content{
padding: 32px;
}
}
.product-summary-cards {
display: grid;
gap: 28px;
grid-template-columns: repeat(2, 1fr);
}
.product-summary-card {
display: flex;
gap: 40px;
border-radius: 8px;
align-items: stretch;
box-shadow: var(--box-shadow--hidden);
transition: box-shadow var(--transition);
background-color: #e5f1f0;
}
.product-summary-card:hover {
box-shadow: var(--box-shadow);
}
.product-summary-card__column {
display: flex;
flex-direction: column;
}
.product-summary-card__cta{
display: flex;
flex-direction: column;
flex-grow: 1;
justify-content: flex-end;
}
/* Content column */
.product-summary-card__column.product-summary-card__column--content {
padding: 40px 0px 60px 40px;
flex: 1;
}
.product-summary-card__product{
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: 10px;
margin-bottom: 24px;
}
.product-summary-card__product img{
min-width: 40px;
max-width: 40px;
min-height: 40px;
max-height: 40px;
}
.product-summary-card__product h6{
margin-bottom: 0px;
}
.product-summary-card__column.product-summary-card__column--content ul{
margin-bottom: 20px;
}
.product-summary-card__column.product-summary-card__column--content ul li{
align-items: flex-start;
}
.product-summary-card__column.product-summary-card__column--content ul li::before {
margin-top: 6px;
}
.product-summary-card__column.product-summary-card__column--content a{
width: max-content;
}
/* Image column */
.product-summary-card__column--image{
position: relative;
max-width: 270px;
}
.product-summary-card__column--image--center {
justify-content: center;
}
.product-summary-card__column--image--bottom {
justify-content: flex-end;
}
.product-summary-card__image {
width: max-content;
object-fit: contain;
position: relative;
z-index: 2;
}
.product-summary-card__decoration{
position: absolute;
top: 0;
right: 0;
height: 100%;
width: max-content;
object-fit: contain;
object-position: top;
z-index: 1;
}
@media screen and (max-width: 767px) {
.product-summary-cards {
grid-template-columns: 1fr;
}
.product-summary-card {
flex-direction: column;
}
.product-summary-card__column.product-summary-card__column--content {
padding: 64px 32px 0px 32px;
}
.product-summary-card__column--image {
width: 100%;
padding: 0;
align-items: flex-end;
}
.product-summary-card__column--image--center {
padding-bottom: 40px;
}
.product-summary-card__image {
max-height: 400px;
width: 90%;
object-position: right;
}
.product-summary-card__column--content {
padding: 32px 24px 0 24px;
}
.product-summary-card__column--image {
max-width: unset;
}
}
.article-share__wrapper{
margin-top: 40px;
}
.article-share__wrapper .article-share-column__title p{
margin-bottom: 0px;
}
.article-share__wrapper .article-share-column__links{
display: flex;
flex-direction: row-reverse;
justify-content: flex-end;
align-items: center;
gap: 24px;
}
.article-share__wrapper .article-share-column__links .article-share-icon{
display: flex;
justify-content: center;
align-items: center;
width: 45px;
height: 45px;
position: relative;
border-radius: 100%;
background-color: var(--teal);
transform: translateY(0);
transition: var(--transition);
}
.article-share__wrapper .article-share-column__links .article-share-icon:hover{
transform: translateY(-5px);
}
.article-share__wrapper .article-share-column__links .article-share-icon svg{
max-height: 20px;
height: 20px;
}
.article-share__wrapper .article-share-column__links .article-share-icon svg path{
fill: var(--white);
transition: var(--transition);
}
@media screen and (max-width: 767px) {
.article-share__wrapper{
flex-direction: column;
gap: 32px;
align-items: flex-start;
margin-top: 32px;
}
}
.academy-related-articles {
display: grid;
gap: 20px;
grid-template-columns: repeat(2, 1fr);
margin: 0 auto;
max-width: 100%;
}
.academy-related-articles .article-card{
display: flex;
opacity: 1;
}
@media screen and (max-width: 767px){
.academy-related-articles {
grid-template-columns: repeat(1, 1fr);
}
}
.simple-header{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
width: 100%;
}
.simple-header__ctas{
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 32px;
margin-top: 20px;
width: 100%;
}
@media screen and (max-width: 900px){
.simple-header__ctas{
flex-direction: column;
gap: 16px;
}
}
.partners {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.simple-partner-card{
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
border: 1px solid var(--grey);
border-radius: var(--radius);
box-shadow: var(--box-shadow--hidden);
transition: var(--transition);
background-color: var(--white);
}
.simple-partner-card:hover{
box-shadow: var(--box-shadow);
}
.simple-partner-card__column.simple-partner-card__column--logo{
max-width: 164px;
width: 100%;
padding: 0px 24px;
}
.simple-partner-card__column.simple-partner-card__column--content{
padding: 40px 0px;
width: 100%;
}
.simple-partner-card__column.simple-partner-card__column--content p:last-of-type{
margin-bottom: 0px;
}
@media screen and (max-width: 767px) {
.partners {
grid-template-columns: 1fr;
}
.simple-partner-card{
gap: 24px;
padding: 24px;
}
.simple-partner-card__column.simple-partner-card__column--logo{
max-width: 100px;
padding: 0px;
}
.simple-partner-card__column.simple-partner-card__column--content{
padding: 0px;
}
}
.simple-testimonial{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
text-align: center;
}
.simple-testimonial.simple-testimonial--boxed{
padding: 50px 30px;
border-radius: var(--radius);
}
.simple-testimonial.simple-testimonial--light h1,
.simple-testimonial.simple-testimonial--light h2,
.simple-testimonial.simple-testimonial--light h3,
.simple-testimonial.simple-testimonial--light h4,
.simple-testimonial.simple-testimonial--light h5,
.simple-testimonial.simple-testimonial--light h6,
.simple-testimonial.simple-testimonial--light blockquote,
.simple-testimonial.simple-testimonial--light p{
color: white!important;
}
.simple-testimonial p:last-of-type{
margin-bottom: 0px;
}
.simple-testimonial img:not(.simple-testimonial__logo){
border-radius: 100%;
min-width: 100px;
max-width: 100px;
min-height: 100px;
max-height: 100px;
aspect-ratio: 1/1;
object-fit: cover;
object-position: center;
margin-bottom: 40px;
}
.simple-testimonial__logo{
width: 100%;
max-height: 50px;
object-fit: contain;
object-position: center;
margin-bottom: 40px;
}
.simple-testimonial blockquote{
margin-bottom: 40px;
}
.simple-testimonial .label{
margin-bottom: 10px;
}
.speakers{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.speaker-card{
position: relative;
display: flex;
flex-direction: row;
align-items: center;
gap: 30px;
border: 1px solid var(--grey);
border-radius: var(--radius);
box-shadow: var(--box-shadow--hidden);
transition: var(--transition);
background-color: var(--white);
overflow: clip;
}
.speaker-card:hover{
box-shadow: var(--box-shadow);
}
.speaker-card__column.speaker-card__column--headshot{
width: 100%;
max-width: 160px;
height: 100%;
}
.speaker-card__column.speaker-card__column--headshot img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.speaker-card__column.speaker-card__column--content{
padding: 20px 0px;
width: 100%;
}
.speaker-card__column.speaker-card__column--content h6{
margin-bottom: 16px;
}
.speaker-card__column.speaker-card__column--content p:last-of-type{
margin-bottom: 0px;
}
.speaker-card__column.speaker-card__column--content a{
margin-top: 16px;
display: block;
width: max-content;
}
.speaker-card__column.speaker-card__column--logo{
max-width: 164px;
width: 100%;
padding-right: 20px;
}
@media screen and (max-width: 1160px){
.speaker-card__column.speaker-card__column--logo{
display: none;
}
}
@media screen and (max-width: 767px) {
.speakers{
grid-template-columns: 1fr;
}
.speaker-card__column.speaker-card__column--logo{
max-width: 100px;
padding: 0px;
}
.speaker-card__column.speaker-card__column--content{
padding: 20px 20px 20px 0px;
}
}
.step-card-grid{
padding: 0px;
position: relative;
}
.step-card-grid__title{
margin-bottom: 50px;
}
.step-card-grid__title h2.no-margin{
margin-bottom: 0px;
}
.step-card-grid__title p{
margin-bottom: 0px;
}
.step-card-grid__cards{
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
@media screen and (max-width: 1023px){
.step-card-grid__cards {
grid-template-columns: repeat(2, 1fr);
}
.step-card-grid__cards > *:nth-child(3) {
grid-column: 1 / -1;
}
}
@media screen and (max-width: 767px){
.step-card-grid__cards {
grid-template-columns: 1fr;
}
}
.statistics{
display: flex;
flex-direction: column;
}
.statistics.statistics--content{
flex-direction: row;
gap: 100px;
gap: clamp(100px, 10vw, 200px);
width: 100%;
}
.statistics.statistics--content .statistics__content{
width: 30%;
}
.statistics.statistics--content .statistics__content h2{
margin-bottom: 0px;
}
.statistics.statistics--content .statistics__list{
width: 70%;
flex-wrap: wrap;
}
.statistics .statistics__list{
width: 100%;
justify-content: flex-start;
flex-wrap: wrap;
}
.statistics__list{
display: flex;
flex-direction: row;
gap: 50px 70px;
justify-content: flex-end;
}
.statistics__list .statistic-number__number{
font-size: 70px;
}
.statistics .statistic::after{
content: "";
position: absolute;
top: 50%;
right: -35px; /* Set to half value of gap */
width: 2px;
height: 70%;
transform: translate(50%, -50%);
background: linear-gradient(0deg,rgba(0, 104, 94, 0.75) 0%, rgba(0, 104, 94, 1) 50%, rgba(0, 104, 94, 0.6) 100%);
}
.statistics .statistic:last-of-type::after{
display: none;
}
.statistics.statistics--content.statistics--four-per-row .statistics__content{
width: 25%;
}
.statistics.statistics--content.statistics--four-per-row .statistics__list{
width: 75%;
gap: 40px;
}
.statistics.statistics--content.statistics--four-per-row .statistic-number__number,
.statistics.statistics--content.statistics--four-per-row .statistic-number__prefx,
.statistics.statistics--content.statistics--four-per-row .statistic-number__suffix{
font-size: 56px;
}
.statistics.statistics--content.statistics--four-per-row .statistic{
align-items: center;
text-align: center;
}
.statistics.statistics--content.statistics--four-per-row .statistic:after {
right: -20px;
}
@media screen and (max-width: 1023px){
.statistics.statistics--content{
flex-direction: column;
gap: 40px!important;
}
.statistics.statistics--content .statistics__content{
width: 100%!important;
text-align: center;
}
.statistics.statistics--content .statistics__list{
width: 100%!important;
justify-content: center;
}
.statistics .statistic{
justify-content: center;
align-items: center;
}
.statistics .statistic p{
text-align: center;
}
.statistics.statistics--content.statistics--four-per-row .statistic:after {
right: -20px;
}
}
@media screen and (max-width: 767px){
.statistics__list{
flex-direction: column;
gap: 64px;
justify-content: center;
align-items: center;
}
.statistics .statistic{
text-align: center;
}
.statistics .statistic{
text-align: center;
}
.statistics .statistic .statistic-number{
justify-content: center;
text-align: center;
}
.statistics .statistic::after{
width: 100%;
height: 2px;
top: unset;
bottom: -24px; /* Set to half value of gap */
right: 0!important;
transform: translate(0%, -50%);
}
}
.subscription-form{
display: flex;
flex-direction: row;
gap: 30px;
}
.subscription-form__column{
width: 50%;
}
.subscription-form__column form .legal-consent-container{
display: flex;
height: 50px;
}
.subscription-form__column form .hs_submit{
position: absolute;
bottom: 0;
right: 0;
}
.subscription-form__column form .hs_submit .hs-button{
background-color: var(--teal);
border-color: var(--teal);
color: var(--white);
}
.subscription-form__column form .hs_submit .hs-button:hover{
background-color: var(--hunter-green);
}
@media screen and (max-width: 1023px){
.subscription-form{
flex-direction: column;
}
.subscription-form__column{
width: 100%;
}
}
@media screen and (max-width: 500px){
.subscription-form__column form .hs_submit{
position: relative;
}
.subscription-form__column form .hs_submit .hs-button{
width: 100%;
}
.subscription-form__column form .legal-consent-container {
justify-content: center;
margin-bottom: 30px;
height: max-content;
}
}
.switchback-header .switchback {
align-items: stretch;
gap: 120px;
}
.switchback-header .switchback-column.switchback-column--content {
width: 45%;
padding: 0px;
}
.switchback-header .switchback-column.switchback-column--media{
width: 55%;
min-height: 695px;
max-height: 695px;
}
.switchback-header .switchback-column.switchback-column--media img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.switchback-header .switchback-column__cta-wrapper{
margin-top: 0px;
}
@media screen and (max-width: 1023px) {
.switchback-header .switchback {
align-items: stretch;
gap: 50px;
}
.switchback-header .switchback-column.switchback-column--content {
width: 100%;
padding: 0px;
}
.switchback-header .switchback-column.switchback-column--media{
width: 100%;
min-height: unset;
}
}
@media screen and (max-width: 900px){
.switchback-header .switchback-column.switchback-column--media,
.switchback-header .switchback-column.switchback-column--media img{
max-height: 350px;
}
}
.tabbed-dnd-navigation{
display: flex;
flex-direction: row;
gap: 50px;
border-radius: 50px;
background-color: var(--hunter-green-light);
justify-content: center;
align-items: center;
width: max-content;
padding: 8px;
margin: auto;
}
.tabbed-dnd-navigation__item{
border-radius: 50px;
padding: 16px 32px;
cursor: pointer;
background-color: transparent;
transition: background-color var(--transition);
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
}
.tabbed-dnd-navigation__item.tabbed-dnd-navigation-item--active{
background-color: var(--white);
box-shadow: 0px 16.733px 21.136px 0px rgba(0, 104, 94, 0.08), 0px 8.807px 26.42px 0px rgba(0, 104, 94, 0.05)
}
.tabbed-dnd-navigation__item span{
display: inline-block;
font-weight: 600;
transition: color var(--transition);
}
.tabbed-dnd-navigation__item.tabbed-dnd-navigation-item--active span{
color: var(--teal);
}
.tabbed-dnd-navigation__item-icon{
width: 24px;
height: 24px;
object-fit: contain;
}
.tabbed-dnd-navigation__mobile{
display: none;
}
@media screen and (max-width: 1023px){
.tabbed-dnd-navigation{
display: none;
}
.tabbed-dnd-navigation__mobile{
display: block;
position: relative;
width: 100%;
}
.tabbed-dnd-navigation__mobile select{
width: 100%;
min-height: 70px;
padding: 10px;
background-color: #e5f1f0;
border-radius: 50px;
background-image: url('data:image/svg+xml,');
background-position: right 30px center;
background-size: 16px 8px;
background-repeat: no-repeat;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
border: none;
}
.tabbed-dnd-navigation__mobile .tabbed-dnd-navigation__item{
display: none;
position: absolute;
top: 50%;
transform: translateY(-50%);
left: 10px;
width: calc(100% - 64px);
pointer-events: none;
}
.tabbed-dnd-navigation__mobile .tabbed-dnd-navigation__item.tabbed-dnd-navigation-item--active{
display: flex!important;
}
}
/* All module styles are pulled in globally from /css/modules/_modules.css - You can find the css for this module there. */
.tabbed-switchback__navigation{
display: flex;
flex-direction: row;
justify-content: center;
margin-bottom: 80px;
}
.tabbed-switchback__navigation-item{
border-bottom: 1px solid var(--grey);
padding: 24px 30px;
font-weight: 400;
cursor: pointer;
transition: 0.15s linear;
text-align: center
}
.tabbed-switchback__navigation-item.tabbed-switchback__navigation-item--active,
.tabbed-switchback__navigation-item:hover{
border-bottom: 2px solid var(--teal);
color: var(--teal);
font-weight: 600;
}
.tabbed-switchback__tab .switchback{
align-items: stretch;
}
.tabbed-switchback__tab .switchback-column{
position: relative;
}
.tabbed-switchback__tab .switchback-column.switchback-column--content{
position: relative;
z-index: 6;
padding: 0px;
}
.tabbed-switchback__tabs{
position: relative;
transition: height var(--transition);
}
.tabbed-switchback__tab{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: max-content;
opacity: 0;
pointer-events: none;
transition: var(--transition);
}
.tabbed-switchback__tab.tabbed-switchback__tab--active{
opacity: 1;
pointer-events: all;
}
.tabbed-switchback__tab .switchback{
gap: 70px;
}
.tabbed-switchback .switchback-column.switchback-column--media{
position: relative;
min-height: 420px;
align-items: flex-start;
}
.switchback-column.switchback-column--media.switchback-column--media--gradient::after{
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
background: linear-gradient(0deg,rgba(255, 255, 255, 1) 10%, rgba(0, 0, 0, 0) 100%);
transform: scale(1.2);
pointer-events: none;
}
.tabbed-switchback__tab .switchback-column.switchback-column--media.switchback-column--media--products .switchback__column__image{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
/* max-width: 540px; */
height: 100%;
border-radius: 8px;
object-fit: cover;
object-position: top left;
transition: var(--transition);
}
.tabbed-switchback__tab .switchback-column.switchback-column--media .switchback__column__image{
height: 100%;
max-height: 600px;
object-fit: cover;
object-position: center;
}
.tabbed-switchback__ctas{
display: flex;
flex-direction: row;
gap: 20px;
align-items: center;
}
.tabbed-switchback__ctas .primary-cta,
.tabbed-switchback__ctas .secondary-cta{
padding: 16px 20px;
}
.switchback__column__image.switchback__column__image--product{
opacity: 0;
}
.switchback__column__image--product.switchback__column__image--active{
opacity: 1;
}
.switchback-column:has(.switchback__column__image--active) .switchback__column__image.switchback__column__image--default{
opacity: 0;
}
.switchback-products {
display: flex;
flex-direction: row;
gap: 10px;
flex-wrap: wrap;
}
.product{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
padding: 10px;
border: 1px solid var(--grey);
border-radius: 8px;
max-width: max-content;
position: relative;
}
.product h6{
margin-bottom: 0px;
transition: var(--transition);
color: inherit;
}
.product:hover h6{
color: var(--teal);
}
.product img{
margin-bottom: 0px!important;
}
@media screen and (max-width: 767px) {
.tabbed-switchback__accordions.hide-desktop {
flex-direction: column;
}
.tabbed-switchback__ctas{
flex-direction: column;
}
}
.team-cards {
display: grid;
grid-gap: 1rem;
grid-template-columns: repeat(3, 1fr);
}
.team-cards > *:nth-child(3) {
grid-column: auto;
}
@media screen and (max-width: 1023px) {
.team-cards {
grid-template-columns: repeat(2, 1fr);
}
.team-cards > *:nth-child(3) {
grid-column: 1 / -1;
}
}
@media screen and (max-width: 767px) {
.team-cards {
grid-template-columns: 1fr;
}
.team-cards > *:nth-child(3) {
grid-column: auto;
}
}
.text-and-form {
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 160px;
}
.text-and-form__column {
width: 50%;
}
/* Content column */
.text-and-form__column:first-of-type h1 {
line-height: 1;
margin-bottom: 36px;
}
/* Form column */
.text-and-form__column:last-of-type {
padding-left: 60px;
}
.text-and-form__column.text-and-form__column--form {
position: relative;
background-color: var(--kelly-green-light);
padding: 50px;
border-radius: 8px;
}
.text-and-form__column-title{
display: flex;
flex-direction:column;
justify-content: center;
text-align: center;
}
.text-and-form__column ul{
margin-bottom: 24px;
}
/* Custom messaging */
.text-and-form__column.text-and-form__column--form .custom-message {
position: absolute;
left: 60px;
bottom: 20px;
}
/* After-submit */
.text-and-form__column .submitted-message {
background: transparent;
border: none;
padding: 0;
color: #fff;
}
.text-and-form__column .actions {
display: flex;
justify-content: center;
pointer-events: auto;
margin-top: 32px;
}
.text-and-form__column .hs-form-booleancheckbox-display{
position: relative !important;
transform: unset !important;
}
.text-and-form__column .hs-form-field:not(.hs-fieldtype-checkbox),
label:not(.hs-error-msg):not(.hs-form-radio-display) {
pointer-events: all !important;
}
/* Responsive */
@media screen and (max-width: 1080px) {
.text-and-form {
gap: 64px;
}
.text-and-form__column:first-of-type {
padding-right: 30px;
}
.text-and-form__product-grid{
grid-template-columns: repeat(1, 1fr);
}
.product-grid__product{
width: 100%;
}
.text-and-form__column:last-of-type {
padding: 50px 20px;
}
}
@media screen and (max-width: 767px) {
.text-and-form {
flex-direction: column;
gap: 60px;
}
.text-and-form__column:first-of-type {
width: 100%;
border: none;
}
.text-and-form__column:last-of-type {
width: 100%;
}
.text-and-form__column .hs-button,
.text-and-form__column input[type='submit'] {
width: 100%;
max-width: none;
text-align: center;
}
.text-and-form__column.text-and-form__column--form .custom-message {
left: 0;
}
.multistep-form__pagination {
gap: 8px;
}
}
.boxed-width-switchback.boxed-width-switchback--video-banner .secondary-cta{
display: flex;
flex-direction: row;
gap: 10px;
}
.boxed-width-switchback.boxed-width-switchback--video-banner .secondary-cta:hover svg path{
fill: var(--tiber-green);
}
.timestamped-video{
width: 100%;
display: flex;
flex-direction: column;
gap: 90px;
justify-content: center;
align-items: center;
}
.timestamped-video__timestamps{
padding: 30px 40px;
border-radius: var(--radius);
background-color: var(--light-grey);
width: 100%;
}
.timestamped-video__timestamps ul{
display: grid;
grid-template-rows: repeat(3, auto);
grid-auto-flow: column;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
.timestamped-video__timestamps ul li{
list-style: none;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: 20px;
}
.timestamped-video__timestamps ul li::before{
display: none;
}
.timestamped-video__timestamps ul li a{
}
.timestamped-video__timestamps ul li p{
margin-bottom: 0px;
}
@media screen and (max-width: 800px){
.timestamped-video{
gap: 40px;
}
.timestamped-video__timestamps ul{
display: flex;
flex-direction: column;
gap: 20px;
list-style: none;
margin: 0;
padding: 0;
}
}
.webinar-header__datetime{
display: flex;
flex-direction: row;
gap: 10px;
align-items: center;
border-radius: var(--radius);
background-color: var(--white);
padding: 10px 20px;
margin: auto;
margin-top: 20px;
width: max-content;
}
.webinar-header__datetime p{
margin-bottom: 0px;
}
.single-testimonial{
background-color: white;
border-radius: 12px;
padding: 48px;
display: flex;
flex-direction: column;
background-color: #eaf3fa;
gap: 16px;
position: relative;
}
.single-testimonial__image{
position: absolute;
bottom: 0;
right: 32px;
}
.single-testimonial__content{
max-width: 60%;
}
.single-testimonial__content p{
margin-bottom: 0px;
font-size: 20px;
font-style: normal;
font-weight: 400;
line-height: 1.5;
}
.single-testimonial__profile{
display: flex;
flex-direction: row;
gap: 16px;
align-items: center;
}
.profile__headshot{
width: 64px;
height: 64px;
overflow: hidden;
border-radius: 100%;
}
.profile__headshot__img{
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
.profile__content__name{
display: flex;
flex-direction: row;
gap: 5px;
align-items: center;
}
.profile__content__name span{
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 1;
}
.profile__content__name__social{
position: relative;
}
.profile__content__name__social span{
color: #07272D;
font-size: 18px;
font-style: normal;
font-weight: 600;
line-height: 1;
}
.profile__content__name__social .cover-link{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.profile__content__role{
display: flex;
flex-direction: row;
gap: 4px;
align-items: center;
}
.profile__content__role span{
display: block;
font-weight: 400;
opacity: 0.8;
}
.profile__content__role__img{
max-height: 20px;
width: max-content;
height: auto;
object-fit: contain;
}
.single-testimonial__content .profile__headshot.profile__headshot--mobile{
display: none;
}
@media screen and (max-width: 767px){
.single-testimonial{
padding: 24px;
}
.single-testimonial__image{
display: none;
}
.single-testimonial__content .profile__headshot.profile__headshot--mobile{
display: flex;
margin-bottom: 16px;
width: 100%;
justify-content: center;
height: auto;
border-radius: 0px;
}
.single-testimonial__content .profile__headshot.profile__headshot--mobile img{
width: 110px;
height: auto;
object-fit: contain;
}
.single-testimonial__content{
max-width: unset;
}
}
/* Utility */
.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(--teal);
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;
}
.section-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(--tiber-green);
padding: 8px 12px;
}
.section-indicator .section-indicator__icon {
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.section-indicator .hs_cos_wrapper_type_icon{
width: 28px;
height: 28px;
display: flex;
justify-content: center;
align-items: center;
}
.section-indicator .section-indicator__icon svg{
width: 16px;
}
.section-indicator .section-indicator__icon svg path{
fill: white;
}
.section-indicator .section-indicator__label span{
font-size: 12px;
color: white;
display: block;
}
/* Rules specifically created for the tabbed-dnd-sections */
.tabbed-dnd-section{
display: block;
opacity: 1;
transition: var(--transition);
}
.tabbed-dnd-section.tabbed-dnd-section--hidden{
opacity: 0;
display: none;
}
/* utilise .tabbed-dnd-section[class*="PARTIAL-CLASS-MATCH] rules
to adjust module styling if anything isn't looking quite right
I'm using this here to override some of the styling applied to modules
based on what the section settings are.
These will be very theme specific to Euronext so if moved themes, delete the below.
*/
/* Swithcback Rules */
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback{
gap: 80px;
}
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback-column.switchback-column--content{
padding: 0px;
}
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback.switchback--full-width .switchback-column.switchback-column--media .video-media{
max-width: 70%;
}
@media screen and (max-width: 900px) {
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback.switchback--full-width .switchback-column.switchback-column--media img:not(.video-media__thumbnail),
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback.switchback--full-width .switchback-column.switchback-column--media .video-media{
max-width: unset;
}
.tabbed-dnd-section[class*="max-width-section-centering"] .switchback--full-width .switchback-column.switchback-column--content{
padding: 0px 20px!important;
}
}
@media screen and (max-width: 767px){
.tabbed-dnd-section[class*="max-width-section-centering"]{
padding-left: 0px;
padding-right: 0px;
}
.hs_cos_wrapper_type_module:not(.hs_cos_wrapper_type_module.has:(.switchback.switchback--full-width)){
padding: 0px 24px;
}
/* This is a very specific rule about if the section has been centered and width adjusted,
and there's a switchback set to full width inside it, then remove the L/R padding from
the section but re-apply it to all module wrappers that aren't the full width switchback
*/
.tabbed-dnd-section[class*="max-width-section-centering"] .hs_cos_wrapper_type_module:not(:has(.switchback.switchback--full-width)) {
padding: 0 24px;
}
}
/* Add other module rules below if needed */
/* Macro */
/* Filterable Card Listing Skeleton */
.filterable-listing {
display: flex;
flex-direction: row;
align-items: stretch;
gap: 40px;
}
.filterable-listing__filters-panel {
width: 100%;
max-width: 300px;
position: relative;
display: flex;
flex-direction: column;
}
.filterable-listing__cards-panel{
display: flex;
flex-direction: column;
justify-content: space-between;
gap: 64px;
width: 100%;
}
/* Search */
.filterable-listing__search-input{
padding: 10px 16px 10px 20px;
width: 100%;
border-radius: 55px;
background-color: transparent;
border: 1px solid var(--tiber-green);
background-image: url('data:image/svg+xml,');
background-size: 20px;
background-position: center right 20px;
background-repeat: no-repeat;
}
/* Filters */
.filterable-listing__filters {
position: sticky;
top: 120px;
left: 0px;
display: flex;
flex-direction: column;
gap: 30px;
}
.filterable-listing__filter-title {
position: relative;
display: flex;
justify-content: space-between;
cursor: pointer;
}
.filterable-listing__filter-title svg {
transform: rotate(180deg);
transition: var(--transition);
}
.filterable-listing__filter.filterable-listing__filter--active .filterable-listing__filter-title svg {
transform: rotate(0deg);
}
.filterable-listing__filter-options {
display: flex;
flex-direction: column;
gap: 8px;
height: 0px;
max-height: 0px;
overflow: hidden;
opacity: 0;
transition: var(--transition);
}
.filterable-listing__filter.filterable-listing__filter--active .filterable-listing__filter-options {
height: 100%;
max-height: 1000px;
overflow: visible;
opacity: 1;
}
.filterable-listing__filter-option {
display: flex;
flex-direction: row;
align-items: center;
gap: 12px;
cursor: pointer;
color: inherit;
transition: var(--transition);
text-transform: capitalize;
}
.filterable-listing__filter-option:hover {
color: var(--teal);
}
.filterable-listing__filter-option input[type="checkbox"]::before {
background-image: url('data:image/svg+xml,');
}
.filterable-listing__filter-option input[type="checkbox"]:checked::before {
background-image: url('data:image/svg+xml,');
}
/* Cards Grid */
.filterable-listing__no-results{
display: flex;
justify-content: center;
align-items: center;
text-align: center;
opacity: 1;
pointer-events: all;
}
.filterable-listing__no-results.filterable-listing__no-results--hidden{
display: none;
opacity: 0;
pointer-events: none;
}
/* Card Grid: Base layout */
.filterable-listing__cards {
display: grid;
gap: 50px 30px;
grid-template-columns: repeat(3, 1fr); /* fallback/default */
}
/* Modifier: 2 per row */
.filterable-listing__cards--two {
grid-template-columns: repeat(2, 1fr);
gap: 30px;
}
.filterable-listing__cards.filterable-listing__cards--even-gap{
gap: 30px;
}
/* Responsive Overrides */
@media screen and (max-width: 1165px) {
.filterable-listing__cards{
grid-template-columns: repeat(2, 1fr);
}
.filterable-listing__cards--two {
grid-template-columns: repeat(1, 1fr);
}
}
@media screen and (max-width: 1000px) {
.filterable-listing {
flex-direction: column;
gap: 32px;
}
.filterable-listing__filters-panel {
width: 100%;
max-width: unset;
}
.filterable-listing__cards-panel {
width: 100%;
gap: 32px;
}
}
@media screen and (max-width: 767px) {
.filterable-listing__cards{
grid-template-columns: repeat(1, 1fr);
gap: 20px;
}
}
/* Setup */
.filterable-listing-vertical {
display: flex;
flex-direction: column;
width: 100%;
gap: 70px;
}
/* Filters */
.filterable-listing-vertical__filters {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.filterable-listing-vertical__filters p {
margin-bottom: 0px;
}
.checkbox-filter {
display: flex;
flex-direction: row;
border-radius: 8px;
padding: 8px 10px;
background-color: #cfe5df;
align-items: center;
gap: 12px;
transition: var(--transition);
cursor: pointer;
min-width: max-content;
}
.checkbox-filter p {
color: inherit;
transition: var(--transition);
}
.checkbox-filter.checkbox-filter--active,
.checkbox-filter:hover {
background-color: var(--tiber-green);
}
.checkbox-filter.checkbox-filter--active p,
.checkbox-filter:hover p {
color: white;
}
.checkbox-filter input[type="checkbox"]::before {
background-image: url('data:image/svg+xml,');
}
.checkbox-filter:hover input[type="checkbox"]::before {
background-image: url('data:image/svg+xml,');
}
.checkbox-filter input[type="checkbox"]:checked::before {
background-image: url('data:image/svg+xml,');
}
.filterable-listing-vertical__select{
display: none;
}
/* Card Grid */
.filterable-listing-vertical__cards {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 40px;
}
@media (max-width: 1023px) {
.filterable-listing-vertical__cards:not(.filterable-listing-vertical__cards--two) {
grid-template-columns: repeat(2, 1fr);
}
.filterable-listing-vertical__cards:not(.filterable-listing-vertical__cards--two) > *:nth-child(3) {
grid-column: 1 / -1;
}
.filterable-listing-vertical__cards--two {
grid-template-columns: repeat(2, 1fr);
}
.filterable-listing-vertical__cards--two > *:nth-child(3) {
grid-column: auto;
}
}
@media (max-width: 767px) {
.filterable-listing-vertical__filters {
justify-content: flex-start;
}
.filterable-listing-vertical__cards {
grid-template-columns: 1fr;
gap: 16px;
}
}
@media (max-width: 1023px) {
.filterable-listing-vertical__cards--two {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 767px) {
.filterable-listing-vertical {
gap: 40px;
}
.filterable-listing-vertical__filters {
display: none;
}
.filterable-listing-vertical__select {
display: block;
font-size: 20px;
padding: 10px;
background-color: transparent;
border-top: 0;
border-left: 0;
border-right: 0;
border-radius: 4px;
}
.filterable-listing-vertical__cards{
grid-template-columns: repeat(1, 1fr)!important;
gap: 16px;
}
}
.latest-articles__title{
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 50px;
margin-bottom: 50px;
}
.latest-articles__title h2{
margin-bottom: 0px;
}
.latest-articles__articles {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 50px;
align-items: stretch;
}
.latest-articles__articles .article-card{
display: flex;
opacity: 1;
}
@media (max-width: 1023px) {
.latest-articles__articles {
grid-template-columns: repeat(2, 1fr);
}
}
@media (max-width: 819px) {
.latest-articles__title .secondary-cta{
display: none;
}
}
@media (max-width: 767px) {
.latest-articles__articles {
grid-template-columns: 1fr;
gap: 30px;
}
}
.ecs-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;
}
.ecs-modal.ecs-modal--show {
opacity: 1;
pointer-events: all;
}
.ecs-modal::before {
content: "";
position: absolute;
inset: 0;
background-color: var(--tiber-green);
opacity: 0.7;
pointer-events: none;
}
.ecs-modal__content{
position: relative;
max-width: 85vw;
width: 85vw;
max-height: 90vh;
background: white;
border-radius: var(--radius);
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;
}
.ecs-modal__content * {
max-width: 100%;
box-sizing: border-box;
}
.ecs-modal__content iframe,
.ecs-modal__content video {
width: 100% !important;
height: auto !important;
max-height: 60vh;
display: block;
}
.ecs-modal__content video{
max-height: unset;
}
.ecs-modal__content:has(video){
padding: 0px;
}
.ecs-modal__content .video-media{
z-index: 1;
}
.ecs-modal__content:has(video) .ecs-modal-close-icon svg path{
fill: white!important;
}
.ecs-modal-close-icon {
position: absolute;
top: 16px;
right: 16px;
cursor: pointer;
z-index: 2;
}
.ecs-modal-close-icon:hover svg path {
fill: var(--teal);
transition: var(--transition);
}
/* Custom Macro Behaviours */
.ecs-modal .video-media.video-media--paused .video-media__controls{
pointer-events: none;
}
.ecs-modal--show .video-media.video-media--paused .video-media__controls{
pointer-events: all;
}
/* Sections */
/* Settings */
:root {
/* Primary Colours */
--tiber-green: #07272D;
--white: #fff;
--dark-grey: #C1C9CB;
--light-grey: #F3F4F5;
--grey: #E6E9EA;
--teal: #008D7F;
--dark-teal-green: #003934;
/* Secondary Colours */
--hunter-green: #00685E;
--kelly-green: #009639;
--spring-green: #79D100;
--sky-blue: #41B6E6;
/* Light Colours */
--hunter-green-light: #e5f0ef;
--kelly-green-light: #e6f5ec;
--spring-green-light: #f3f9e6;
--sky-blue-light: #ecf7fd;
--transition: 0.3s ease-in-out;
--box-shadow: 0px 10px 23px -5px rgba(0,0,0,0.05);
--box-shadow--hidden: 0px 10px 23px -5px rgba(0,0,0,0.0);
--radius: 10px;
}
/* Helpers */
.hide-desktop{
display: none;
}
@media screen and (max-width: 767px){
.hide-desktop{
display: flex!important;
}
.hide-mobile{
display: none!important;
}
}
/* All */
html {
scroll-behavior: smooth;
}
.body-wrapper{
overflow-x: clip;
}
.cover-link{
position: absolute!important;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 5;
}
a:not(.primary-cta):not(.secondary-cta):not(.text-cta) {
color: var(--teal);
position: relative;
font-weight: 400;
text-decoration: none;
transition: var(--transition);
}
a:not(.primary-cta):not(.secondary-cta):not(.text-cta):hover {
color: var(--dark-teal-green);
}
a:not(.primary-cta):not(.secondary-cta):not(.text-cta):not(.cover-link)::before {
content: '';
position: absolute;
bottom: -4px;
left: 0;
width: 0%;
height: 1px;
background-color: var(--dark-teal-green);
transition: var(--transition);
}
a:not(.primary-cta):not(.secondary-cta):not(.text-cta):hover::before {
width: 100%;
}
.big-text{
font-size: 20px;
line-height: 1.5;
}
.small-text{
font-size: 14px;
line-height: 1.5;
}
h2{
font-weight: 700!important;
}
h3,
h4,
h5,
h6{
font-weight: 600!important;
}
blockquote {
font-size: 22px;
line-height: 1.4;
border: 0px;
padding: 0px;
margin-bottom: 0px;
}
.label{
font-size: 14px;
line-height: 1.5;
letter-spacing: 2px;
text-transform: uppercase;
font-weight: 600!important;
}
ul{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
}
ul:not(table ul){
list-style: none;
}
ol{
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 10px;
counter-reset: list;
}
ul li:not(table li),
ol li{
position: relative;
padding: 0;
margin: 0;
display: flex;
flex-direction: row;
align-items: center;
gap: 16px;
line-height: 1.5;
}
ol li{
counter-increment: list;
}
ol li::marker{
display: none;
}
ol li::before{
content: counter(list) "";
color: var(--teal);
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: 1.3;
}
ul li:not(form li):not(table li)::before{
content: '';
display: block;
min-width: 20px;
min-height: 14px;
background-image: url('data:image/svg+xml,');
background-repeat: no-repeat;
background-size: contain;
background-position: center;
}
.hs-tools-menu li::before{
display: none;
}
.hs-tools-menu li a{
width: 100%;
}
.hs-banner-optimization-animation{
inset: unset!important;
transform: translate(45%, 70%)!important;
box-shadow: none!important;
}
.hs-banner-parent{
position: relative!important;
}
body .cookie-overlay{
width: 100%;
height: 100vh;
background-color: var(--tiber-green);
position: fixed;
z-index: 1000000000;
opacity: 0;
pointer-events: none;
}
body:has(.hs-banner-optimization-animation):not(body:has(.hs-banner-optimization-animation.hs-hidden)) .cookie-overlay{
opacity: 0.7;
}
@media screen and (max-width: 768px) {
.big-text{
font-size: 20px;
line-height: 1.4;
}
blockquote {
font-size: 20px;
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 */