/* CSS variables */

:root {
  --column-gap: 2.13%;
  --column-width-multiplier: 8.333;
}

/* Mobile layout */

.row-fluid {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
}


  .row-fluid .span1,
  .row-fluid .span2,
  .row-fluid .span3,
  .row-fluid .span4,
  .row-fluid .span5,
  .row-fluid .span6,
  .row-fluid .span7,
  .row-fluid .span8,
  .row-fluid .span9,
  .row-fluid .span10,
  .row-fluid .span11,
  .row-fluid .span12{
  min-height: 1px;
  width: 100%;
}

/* Desktop layout */

@media (min-width: 768px) {
  .row-fluid {
    flex-wrap: nowrap;
    justify-content: space-between;
  }

  
    .row-fluid .span1 {
      width: calc(var(--column-width-multiplier) * 1% * 1 - var(--column-gap) * (11 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span2 {
      width: calc(var(--column-width-multiplier) * 1% * 2 - var(--column-gap) * (10 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span3 {
      width: calc(var(--column-width-multiplier) * 1% * 3 - var(--column-gap) * (9 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span4 {
      width: calc(var(--column-width-multiplier) * 1% * 4 - var(--column-gap) * (8 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span5 {
      width: calc(var(--column-width-multiplier) * 1% * 5 - var(--column-gap) * (7 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span6 {
      width: calc(var(--column-width-multiplier) * 1% * 6 - var(--column-gap) * (6 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span7 {
      width: calc(var(--column-width-multiplier) * 1% * 7 - var(--column-gap) * (5 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span8 {
      width: calc(var(--column-width-multiplier) * 1% * 8 - var(--column-gap) * (4 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span9 {
      width: calc(var(--column-width-multiplier) * 1% * 9 - var(--column-gap) * (3 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span10 {
      width: calc(var(--column-width-multiplier) * 1% * 10 - var(--column-gap) * (2 * var(--column-width-multiplier) / 100));
    }
  
    .row-fluid .span11 {
      width: calc(var(--column-width-multiplier) * 1% * 11 - var(--column-gap) * (1 * var(--column-width-multiplier) / 100));
    }
  
}
/* ===== Material Design Inspired Responsive Grid ===== */

/* Gutter + Container width setup */
:root {
  --gutter-default: 40px;
  --gutter-medium: 80px;
  --gutter-large: 160px;

  --container-xs: 100%;
  --container-sm: 600px;
  --container-md: 83.00233281493003%;
  --container-lg: 83.00233281493003%;
  --container-xl: 83.00233281493003%;

  --grid-gutter: var(--gutter-default);
}

.grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  margin: calc(-1 * (var(--grid-gutter) / 2));
}

.grid-gutter-xs {
  padding: calc(var(--grid-gutter) / 2);
}

/* Base container */
.container {
  width: 100%;
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);
  box-sizing: border-box;
}

/* Container max-widths per breakpoint */
/* @media (min-width: 600px) {
  :root { --grid-gutter: var(--gutter-sm); }
  .container {
    max-width: var(--container-sm);
  }
}
@media (min-width: 840px) {
  :root { --grid-gutter: var(--gutter-md); }
  .container {
    max-width: var(--container-md);
  }
}
@media (min-width: 960px) {
  :root { --grid-gutter: var(--gutter-lg); }
  .container {
    max-width: var(--container-lg);
  }
}
@media (min-width: 1280px) {
  :root { --grid-gutter: var(--gutter-xl); }
  .container {
    max-width: var(--container-xl);
  }
} */

/* .grid-container {
  display:grid !important;
  grid-column: 2 / span 1;
} */

.row.no-gutters {
  margin-left: 0;
  margin-right: 0;
}

.row.no-gutters > [class*="col-"] {
  padding-left: 0;
  padding-right: 0;
}

.no-gutters {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.d-flex {
  display: flex;
}
.center-center {
  justify-content: center;
  align-items: center;
}

/* Grid row */
.row {
  display: flex;
  flex-wrap: wrap;
  margin-left: calc(-1 * var(--grid-gutter));
  margin-right: calc(-1 * var(--grid-gutter));
}

/* Grid columns */
[class*="col-"] {
  padding-left: var(--grid-gutter);
  padding-right: var(--grid-gutter);

  padding-left:0;
  padding-right:0;
  box-sizing: border-box;
}

/* Optional: Visual aid */
[class*="col-"] {
 /*  background-color: lightcoral; */
 /*  outline: 1px dashed #333; */
}

.mb-bottom-0 {
  margin-bottom: 0;
}

.pd-bottom-0 {
  padding-bottom: 0;
}

.mg-col-1-right {
  margin-right:8.3333%;
}

.mg-col-2-right {
  margin-right:16.6666%;
}

.mg-col-3-right {
  margin-right:25%
}

.mg-col-1-left {
  margin-left:8.3333%;
}

.mg-col-2-left {
  margin-left:16.6666%;
}

.mg-col-3-left {
  margin-left:25%
}

.mobile-section {
  width:87.3333% !important;
  margin:0 auto;
}

.mobile-col-2_desk-col-6 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--gap-global);
}

.mobile-col-3_desk-col-6 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--gap-global);
}

@media screen and (min-width: 1020px) {
  .mobile-col-2_desk-col-6, .mobile-col-3_desk-col-6 {
    grid-template-columns: repeat(6, 1fr);
  }


}

/* 12-column layout base (xs) */
.col-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
.col-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
.col-3 { flex: 0 0 25%; max-width: 25%; }
.col-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
.col-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
.col-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
.col-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
.col-9 { flex: 0 0 75%; max-width: 75%; }
.col-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
.col-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
.col-12 { flex: 0 0 100%; max-width: 100%; }

/* SM breakpoint */
@media (min-width: 760px) {
  .col-sm-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-sm-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-sm-3 { flex: 0 0 25%; max-width: 25%; }
  .col-sm-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-sm-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-sm-6 { flex: 0 0 50%; max-width: 50%; }
  .col-sm-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-sm-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-sm-9 { flex: 0 0 75%; max-width: 75%; }
  .col-sm-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-sm-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-sm-12 { flex: 0 0 100%; max-width: 100%; }
}

/* MD breakpoint */
@media (min-width: 1020px) {
  .col-md-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-md-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-md-3 { flex: 0 0 25%; max-width: 25%; }
  .col-md-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-md-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-md-6 { flex: 0 0 50%; max-width: 50%; }
  .col-md-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-md-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-md-9 { flex: 0 0 75%; max-width: 75%; }
  .col-md-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-md-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-md-12 { flex: 0 0 100%; max-width: 100%; }

  .mg-col-md-1-right {
    margin-right:8.3333%;
  }

  .mg-col-md-2-right {
    margin-right:16.6666%;
  }

  .mg-col-md-3-right {
    margin-right:25%
  }

  .mg-col-md-1-left {
    margin-left:8.3333%;
  }

  .mg-col-md-2-left {
    margin-left:16.6666%;
  }

  .mg-col-md-3-left {
    margin-left:25%
  }


  .mobile-section {
    width:83.3333% !important;
    margin:0 auto;
  }
}

/* LG breakpoint */
@media (min-width: 1240px) {
  .col-lg-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-lg-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-lg-3 { flex: 0 0 25%; max-width: 25%; }
  .col-lg-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-lg-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-lg-6 { flex: 0 0 50%; max-width: 50%; }
  .col-lg-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-lg-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-lg-9 { flex: 0 0 75%; max-width: 75%; }
  .col-lg-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-lg-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-lg-12 { flex: 0 0 100%; max-width: 100%; }
}

/* XL breakpoint */
@media (min-width: 1440px) {
  .col-xl-1 { flex: 0 0 8.3333%; max-width: 8.3333%; }
  .col-xl-2 { flex: 0 0 16.6666%; max-width: 16.6666%; }
  .col-xl-3 { flex: 0 0 25%; max-width: 25%; }
  .col-xl-4 { flex: 0 0 33.3333%; max-width: 33.3333%; }
  .col-xl-5 { flex: 0 0 41.6666%; max-width: 41.6666%; }
  .col-xl-6 { flex: 0 0 50%; max-width: 50%; }
  .col-xl-7 { flex: 0 0 58.3333%; max-width: 58.3333%; }
  .col-xl-8 { flex: 0 0 66.6666%; max-width: 66.6666%; }
  .col-xl-9 { flex: 0 0 75%; max-width: 75%; }
  .col-xl-10 { flex: 0 0 83.3333%; max-width: 83.3333%; }
  .col-xl-11 { flex: 0 0 91.6666%; max-width: 91.6666%; }
  .col-xl-12 { flex: 0 0 100%; max-width: 100%; }
}

.image {
    height:100%;
    object-fit: cover;
    max-width: 100%;
    width: 100%;
}

.full_section_image {
    width:100% !important;
    height:100% !important;
    object-fit: cover;
}

.hero-image {
  object-position: right;
}

@media(min-width: 1020px) {
  .hero-image {
    object-position: top;
  }
}

.iconTeaser-title {
  margin-top: 8px!important
}

.teaser-image img,.teaser-image video {
  aspect-ratio: 18/17;
  object-fit: cover;
}

.teaser-image img {
  aspect-ratio: 1/1 !important;
}

.teaser-img, .scale-img {
  transition: scale .5s ease,opacity .5s ease
}


@media(min-width: 1020px) {
  .teaser-image-wrapper:hover .teaser-img, .scale-img-animation:hover .scale-img {
    scale: 1.05;
  }
}



@media(min-width: 1280px) {
    .iconTeaser-title {
      margin-top:12px!important
    }
}

.logo {
  width:100%;
  padding:20px;
}

.logo-right-left-padding {
  padding:0 20px;
  padding-bottom:20px;
}

.logo-right-left-padding:nth-last-of-type(-n+2) {
  padding-bottom:0;
}


@media screen and (min-width: 1440px) {
    .logo {
      padding:16px 36px;
    }

    .logo-right-left-padding {
      padding:0 36px;
    }
}

.contentJourney-journey-image {
  overflow:hidden;
}
:root {
  /* Font Weights */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;
  --font-weight-medium: 500;
  --font-weight-thin: 300;
}

@font-face {
    font-family: 'Depot New Bold';
    src: url('https://5441101.fs1.hubspotusercontent-na1.net/hubfs/5441101/Sitoo%20Theme/Fonts/DepotNew-Bd.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Depot New Body';
    src: url('https://5441101.fs1.hubspotusercontent-na1.net/hubfs/5441101/Sitoo%20Theme/Fonts/DepotNew-Lt.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Depot New thin';
    src: url('https://5441101.fs1.hubspotusercontent-na1.net/hubfs/5441101/Sitoo%20Theme/Fonts/DepotNew-Th.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

.h1, h1,.h2, h2,.h3, h3,.h4, h4,.h5, h5,.h6, h6,dt {
    font-family: 'Depot New Bold', sans-serif;
    font-weight:700;
    color: var(--brand-dark_blue);
}

.p, p, li, a, span, option, label, dd {
    font-family: 'Depot New Body', sans-serif;
    color: var(--brand-dark_blue);
}

option {
    font-weight: 700;
}

html {
  font-size: 16px; 
  overflow-x: hidden;
}

body {
  margin:0;
 /*  overflow-x: hidden; */
}

/* ***** TYPOGRAPHY STYLES ***** */

.h1,h1, .display-l {
    font-size: clamp(40px,2.2535211268vw + 1.9718309859rem,64px);
    letter-spacing: -.02em;
    margin-bottom: .22em
}

.heading, .teaser-h2, .display-m {
  font-size:clamp(32px, 1.5023474178vw + 1.6478873239rem, 48px);
  font-weight:var(--font-weight-bold);
  line-height:0.96;
  margin-top:0;
  margin-bottom: .22em;
}

.h2,h2, .heading-xl {
    font-size: clamp(28px,.7511737089vw + 1.573943662rem,36px)
}

.h3,h3, .heading-l {
    font-size: clamp(24px,.1877934272vw + 1.4559859155rem,26px)
}

.h4,h4, .heading-m {
    font-size: clamp(22px,.1877934272vw + 1.3309859155rem,24px);
    line-height: 1.12;
}

.h5,h5, .heading-s {
    font-size: clamp(20px,.1877934272vw + 1.2059859155rem,22px);
    line-height: 1.12
}

.h6,h6, .heading-xs {
    font-size: clamp(18px,0vw + 1.125rem,18px);
    line-height: 1.12
}

.ingress, .text-xl {
  font-size: clamp(20px, 0vw + 1.25rem, 20px);
  font-weight:var(--font-weight-thin);
  line-height:1.4;
  margin-top:0;
  margin-bottom: .8em
}

.text,p, body, .text-l {
    font-size: clamp(18px,0vw + 1.125rem,18px);
    margin-top: 0;
    font-weight:var(--font-weight-thin);
    line-height: 1.4;
    margin-bottom: 1em;
}

.small-text, .text-s {
  font-size:clamp(16px, .1877934272vw + .9559859155rem, 18px);
  font-weight:var(--font-weight-thin);
  line-height:1.4;
  margin-top:0;
  margin-bottom: .5em;
}

.text-xs {
    font-size: clamp(14px,0vw + .875rem,14px);
    letter-spacing: .02em;
    font-weight:var(--font-weight-thin);
}

@media(min-width: 1440px) {
    .text-xs {
        font-size:clamp(14px,.3571428571vw + .5535714286rem,18px)
    }
}

@media(min-width: 1440px) {
    .h1,h1, .display-l {
        font-size:clamp(64px,4.2857142857vw + .1428571429rem,112px)
    }

    .heading, .teaser-h2, .display-m {
      font-size:clamp(48px,5vw + -1.5rem,104px)
    }

    .h2,h2, .heading-xl {
        font-size:2.5vw
    }

    .h3,h3, .heading-l {
        font-size:clamp(26px,1.4285714286vw + .3392857143rem,42px)
    }

    .h4,h4, .heading-m {
        font-size:clamp(24px,.4464285714vw + 1.0982142857rem,29px)
    }

    .h5,h5, .heading-s {
        font-size:clamp(22px,.3571428571vw + 1.0535714286rem,26px)
    }

    .h6,h6, .heading-xs {
        font-size:clamp(18px,.5357142857vw + .6428571429rem,24px)
    }

    .ingress, .text-xl {
        font-size: clamp(20px, .8928571429vw + .4464285714rem, 30px);
    }

    .text,p, .text-l {
        font-size:clamp(18px,.5357142857vw + .6428571429rem,24px)
    }
}



.small-title, .pretitle {
  font-size:clamp(10px, .0938967136vw + .6029929577rem, 11px);
  font-weight:var(--font-weight-thin);
  line-height:1.2;
  margin-top:0;
  margin-bottom: .5em;
  letter-spacing: .04em;
  text-transform: uppercase;
}



.button {
  font-size:clamp(16px, .1877934272vw + .9559859155rem, 18px);
  font-weight:var(--font-weight-bold);
  line-height:1.4;
}

.heading-small, h2, .h2 {
  font-size:clamp(28px, .7511737089vw + 1.573943662rem, 36px);
  font-weight:var(--font-weight-bold);
  line-height:0.96;
  margin-top:0;
  margin-bottom: .33em;
}

.h1,.h2,.h3,.h4,.h5,.h6,.submitted-message,h1,h2,h3,h4,h5,h6 {
    margin-top: 0;
    margin-bottom: .18em;
    font-weight: 700;
    line-height: .98
}

.h1 a,.h2 a,.h3 a,.h4 a,.h5 a,.h6 a,.submitted-message a,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a {
    color: inherit
}

.line-height-08 {
    line-height:0.8 !important;
}
.text-font-bold {
    font-weight:var(--font-weight-bold) !important;
    font-family: 'Depot New Bold' !important;
}

@media(min-width: 1440px) {
    .text:last-child,p:last-child {
        margin-bottom: 0
    }
}

li p,ol p {
    margin-bottom: 1em
}

.keyNumber-number {
    font-size: clamp(64px,3.0046948357vw + 3.2957746479rem,96px);
    line-height: 1.2
}

.keyNumber-unit {
    font-size: clamp(18px,0vw + 1.125rem,18px);
    margin-bottom: 8px;
    font-weight: 700
}


@media(min-width: 1440px) {
  .text, p, body {
    font-size:clamp(18px,.5357142857vw + .6428571429rem,24px)
  }

  body {
    font-size:clamp(18px,.5357142857vw + .6428571429rem,24px)
  }

  .heading-small, h2 {
    font-size:2.5vw
  }

  .button {
    font-size: clamp(18px, .4464285714vw + .7232142857rem, 23px);
  }

  .small-title, .pretitle  {
    font-size:clamp(11px,.2678571429vw + .4464285714rem,14px)
  }

   .keyNumber-number {
    font-size:clamp(96px,5.7142857143vw + .8571428571rem,160px)
  }

  .keyNumber-unit {
    font-size:clamp(18px,.5357142857vw + .6428571429rem,24px)
  }

}

.text--pretitle, .pretitle {
    font-size: clamp(10px,.0938967136vw + .6029929577rem,11px);
    line-height: 1.12rem;
    letter-spacing: .04em;
    font-weight: 700;
    text-transform: uppercase;
    margin-bottom: .3em;
    font-family: 'Depot New Bold';
}

@media(min-width: 1440px) {
    .text--pretitle, .pretitle {
        font-size:clamp(11px,.2678571429vw + .4464285714rem,14px)
    }
}

.text--preamble {
    font-size: clamp(20px,0vw + 1.25rem,20px);
    letter-spacing: .01em
}

@media(min-width: 1440px) {
    .text--preamble {
        font-size:clamp(20px,.8928571429vw + .4464285714rem,30px)
    }
}

.text--preambleLarge {
    font-size: clamp(24px,0vw + 1.5rem,24px);
    letter-spacing: .04em
}

@media(min-width: 1440px) {
    .text--preambleLarge {
        font-size:clamp(24px,.7142857143vw + .8571428571rem,32px)
    }
}

.text--extraSmall {
    font-size: clamp(12px,0vw + .75rem,12px);
    letter-spacing: .02em
}

@media(min-width: 1440px) {
    .text--extraSmall {
        font-size:clamp(12px,0vw + .75rem,12px)
    }
}

.text--button {
    font-size: clamp(16px,.1877934272vw + .9559859155rem,18px);
    line-height: 1;
    font-weight: 700
}

@media(min-width: 1440px) {
    .text--button {
        font-size:clamp(18px,.4464285714vw + .7232142857rem,23px)
    }
}

.text--buttonSmall {
    font-size: clamp(14px,0vw + .875rem,14px);
    line-height: 1;
    font-weight: 700
}

@media(min-width: 1440px) {
    .text--buttonSmall {
        font-size:clamp(14px,.4464285714vw + .4732142857rem,19px)
    }
}

.text--citeLarge {
    font-size: clamp(32px,.9389671362vw + 1.7799295775rem,42px);
    letter-spacing: -.02em;
    line-height: 1.2;
    font-weight: 700
}

@media(min-width: 1440px) {
    .text--citeLarge {
        font-size:clamp(42px,2.9464285714vw + -.0267857143rem,75px)
    }
}

.text--cite {
    font-size: clamp(26px,.9389671362vw + 1.4049295775rem,36px);
    letter-spacing: -.02em;
    line-height: 1.2;
    font-weight: 700;
    margin-bottom: .75em
}

@media(min-width: 1440px) {
    .text--cite {
        font-size:2.5vw
    }
}

@media(min-width: 1024px) {
    .text--cite {
        margin-bottom:1em
    }
}

.text--italic {
    font-style: italic
}

.bleed--full {
    grid-column: 1/-1
}

.text--normal {
    font-weight: 400
}

.text--medium {
    font-weight: 500
}

.text--semibold {
    font-weight: 600
}

.text--bold {
    font-weight: 700
}

.text--uppercase {
    text-transform: uppercase
}

.text--left {
    text-align: left
}

.text--right {
    text-align: right
}

.text--center {
    text-align: center
}
* {
    box-sizing: border-box;
    margin:0;
   /*  color:var(--brand-dark_blue);  */
}

button, input, select, textarea {
    font: inherit;
}

a, button {
    text-decoration: none;
    background-color: unset;
    border: none;
}

button {
    padding:0;
}

body {
    margin:0;
}

canvas, img, picture, svg, video {
    display: block;
}

ul li {
    list-style: none;
}

ul {
    padding:0;
}

.relative {
    position:relative;
}

.section {
    position: relative;
}

.relative {
    position: relative;
}

.full_screen_section {
    position: relative;
    width: 100%;
    height: auto;        /* Modern browsers */
    overflow: hidden;
}

.full_screen_section_norel {
    width: 100%;
    height: auto;        /* Modern browsers */ 
}

.text-button-wrapper {
    display:flex;
    flex-direction: column;
    gap:.9em;
}

/* FLEX CLASSES */

.flex {
    display:flex !important;
}

.flex-column {
    display:flex;
    flex-direction: column;
}

.flex-column-mobile-desk-row {
    display:flex;
    flex-direction: column;
}

.flex-column-gap-margin-m {
    display:flex;
    flex-direction: column;
    gap: var(--margin-m);
}

.align-baseline {
    align-items: baseline;
}

.align-center {
    align-items: center;
}

.margin-bt-0 {
    margin-bottom:0;
}

.divider-with-margin-m {
    height:1px;
    width:100%;
    background-color: var(--gray-25);
    margin:var(--margin-m) 0;
}

.divider-with-margin-l {
    height:1px;
    width:100%;
    background-color: var(--gray-25);
    margin:var(--margin-l) 0;
}

.bg-color-gray-10_hover-white {
    background-color: var(--gray-10);
    transition: background-color .5s ease;
}

.bg-color-gray-10_hover-white:hover {
    background-color: white;
    cursor:pointer;
}

.border-right {
    border-right: 1px solid var(--gray-25);
}

.border-left {
    border-left: 1px solid var(--gray-25);
}

.border-bottom {
    border-bottom: 1px solid var(--gray-25);
}

.border-top {
    border-top: 1px solid var(--gray-25);
}

.border-right-left {
    border-right: 1px solid var(--gray-25);
    border-left: 1px solid var(--gray-25);
}

.divider {
    height: 1px;
    background-color: var(--gray-20);
    margin:0;
}

/* .section {
  padding: var(--space_section_margin) 0;
}
 */

.content-sticky {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0;
  z-index: 10; /* Ensure it's above other content */
}

.overflow-hide {
    overflow:hidden;
}


@media(min-width: 1020px) {
    .quote span {
        width: 40px;
        height: 40px;
    }

    .flex-column-mobile-desk-row {
        flex-direction: row;
    }

    .desktop-margin-bt-0 {
        margin-bottom:0;
    }
}

.quote p {
    margin-top: .75em
}

@media(min-width: 1024px) {
    .quote p {
        margin-top:1em
    }
}


@media (min-width: 1020px) {
    .flex_section {
        display:flex;
    }

    .full_screen_section, .full_screen_section_norel {
        height: 100svh;        /* Modern browsers */
        height: 100dvh;        /* Fallback */
    }
}
.arrow_icon_big {
    width:32px;
    height:32px;
}

/* @media(min-width: 1020px) {
    .arrow_icon_big {
        width:px;
        height:54px;
    }
} */

@media(min-width: 1500px) {
    .arrow_icon_big {
        width:54px;
        height:54px;
    }
}


.teaser-cta {
  position: absolute !important; 
  bottom: 0;
  right: 0;
  line-height: 0;
}

.icon-arrow-links {
    display:none;
    flex-direction: row;
    position: relative;
    justify-content: space-between;
}

.icon-arrow-links:hover {
    cursor: pointer;
}

.icon-arrow-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    line-height: 0;
    pointer-events: none;
}

.play-btn {
    width:64px;
    height:64px;
    display:flex !important;
    align-items: center;
    justify-content: center;
}

@media(min-width: 1020px) {
    .icon-arrow-links {
        display:flex;
        justify-content: space-between;
        align-items: center;
    }

    .icon-arrow-links:hover .button-icon-image {
        transform: translate(0, 0);
    }

    .button-icon-image {
        transform: translate(-100%, 100%);
        transition: transform 0.4s ease-in-out;
    }
}

button:hover {
  cursor: pointer;
}

.button {
  text-decoration: none;
  display:inline-block;
  line-height: 1;
  transition: background-color .5s ease;
}

.button-icon {
  width:32px;
  height:32px;
  translate .5s ease;
}

.button-wrapper {
  margin-top:var(--space_base_margin);
  overflow: hidden;
  display: flex;
}

.button-small {
    padding:var(--padding-s);
}

.button-medium {
    padding:var(--padding-m);
}

.button-large {
    padding:var(--padding-l) var(--padding-2xl);
}

.primary-button {
    line-height: 1;
    font-family: 'Depot New Bold';
    /* BUTTONS */
    display:flex;
    align-items: center;
    gap:var(--gap-xs);
    transition: opacity 0.5s ease, background-color 0.5s ease;
}

button.primary-button.theme-yellow-btn:hover, button.primary-button.theme-white-btn:hover, button.primary-button.theme-gray-btn:hover {
    background-color:var(--state-hover);
}

.secondary-button {
    line-height: 1;
    font-family: 'Depot New Bold';
    transition: opacity 0.5s ease, background-color 0.5s ease;
}

.secondary-button:hover {
    opacity:0.8;
}

.tertiary-button {
    line-height: 1;
    background: transparent !important;
    background-color: transparent !important;
    border: 1px solid var(--brand-dark_blue) !important;
    color:var(--brand-dark_blue) !important;
    font-family: 'Depot New Bold';
    transition: opacity 0.5s ease, background-color 0.5s ease;
}

.tertiary-button.white-tertiary {
    color:var(--brand-white) !important;
    border: 1px solid var(--brand-white) !important;
}

.tertiary-button.white-tertiary:hover {
    background-color:var(--brand-white) !important;
    color:var(--brand-dark_blue) !important;
}

.tertiary-button.dark-tertiary {
    color:var(--brand-dark_blue) !important;
    border: 1px solid var(--brand-dark_blue) !important;
}

.tertiary-button.dark-tertiary:hover {
    background-color:var(--state-hover) !important;
    color:var(--brand-white) !important;
}

.image-video-btn:hover {
    opacity:0.8
}

.slider-step-left , .slider-step-right {
    transition: translate .5s ease
}

@media (min-width: 1200px) {
  .button-wrapper {
    display: flex;
  }

 /*  .button {
    text-decoration: none;
    padding:22px 41px;
    display:inline-block;
  } */

}

@media (min-width: 1440px) {
  .button-icon {
    width:54px;
    height:54px;
  }

}

.icon {
    width: 16px;
    height: 16px;
    position: relative;
    overflow: hidden;
    display: inline-block;
    vertical-align: middle
}

.icon svg {
    fill: currentColor;
    position: absolute;
    inset: 0
}

.icon-yellow {
    fill:var(--brand-yellow);
}

.icon-arrow-medium,.icon-arrow-small {
    width: 16px;
    height: 16px
}

@media(min-width: 1024px) {
    .icon-arrow-medium {
        width:20px;
        height: 20px
    }
}

.icon-arrow-large {
    width: 20px;
    height: 20px
}

@media(min-width: 1024px) {
    .icon-arrow-large {
        width:28px;
        height: 28px
    }
}

.icon-arrow-extra-large {
    width: 32px;
    height: 32px
}

.icon-arrow-big {
    width: 28px;
    height: 28px
}

@media(min-width: 1024px) {
    .icon-arrow-big {
      width:48px;
      height: 48px
    }
}

.icon-arrow-extra-big {
  width: 32px;
  height: 32px
}

@media(min-width: 1024px) {
    .icon-arrow-extra-big {
      width:48px;
      height: 48px
    }
}

.icon-mini {
    width: 16px;
    height: 16px
}

.icon-small {
    width: 18px;
    height: 18px
}

.icon-medium {
    width: 24px;
    height: 24px
}

.ctaIndicator-medium {
    height:32px;
    width:32px;
}

.icon-medium-2 {
    width: 28px;
    height: 28px
}

@media(min-width: 1020px) {
    .icon-medium-2 {
        width: 36px;
        height: 36px
    }
    
}

.icon-large {
    width: 40px;
    height: 40px
}

.icon-extra-large {
    width: 56px;
    height: 56px
}

.Icon_big___xSWf {
    width: 84px;
    height: 84px
}

.Icon_primary__z0e4n {
    color: #fdca29
}

.Icon_secondary__Usut4 {
    color: blue
}

.Icon_error___Mj1O {
    color: red
}

.Icon_dark__JRqa6 {
    color: #102228
}

.Icon_light__Kec_5 {
    color: #fefefe
}

.button-icon-wrapper {
    width: 32px;
    height: 32px;
    position: relative;
}

.icon-wrapper {
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    display: grid;
    place-content: center;
    overflow: hidden;
}

.button-icon-first {
  translate:-100% 100%;
}

/* Icon animation */
.button-icon {
  position: relative;
  display: inline-block;
  animation: none;
}

.ctaIndicator {
    cursor: pointer;
    overflow: hidden;
    display: inline-block;
    position: relative;
    bottom: 0;
    opacity: 1;
    transition: opacity .5s ease
}

.ctaIndicator-inactive {
    opacity: 0
}

.ctaIndicator-active {
    opacity: 1
}

.ctaIndicator-smallArrowContainer {
    width: 28px;
    height: 28px
}

.ctaIndicator-largeArrowContainer, .ctaIndicator-mediumArrowContainer {
    width: 32px;
    height: 32px
}

@media(min-width: 1024px) {
    .ctaIndicator-largeArrowContainer {
        width:45px;
        height: 45px
    }
    
}


.ctaIndicator-xLargeArrowContainer {
    width: 45px;
    height: 45px
}

.ctaIndicator-bigArrowContainer {
    background-color: #fdca29;
    width: 64px;
    height: 64px
}

.ctaIndicator-icon {
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    display: grid;
    place-content: center
}

.ctaIndicator-icon svg {
    transition: translate .5s ease
}

.ctaIndicator-primary-arrow svg {
    translate: -100% 100%
}

.ctaIndicator-primary-arrow-active svg {
    translate: 0 0
}

.ctaIndicator-inactive svg {
    translate: 100% -100%
}

.ctaIndicator-hideArrow svg {
    opacity: 0;
    width: 0;
    height: 0
}


/* Keyframes */
@keyframes icon-move-in-screen {
    0% {
        translate: -100% 100%;
    }
    100% {
        translate: 0 0;
    }
}

@keyframes icon-move-out-screen {
    0% {
        translate: 0 0;
    }
    100% {
        translate: 100% -100%;
    }
}

@keyframes icon-move-out-reverse {
    0% {
        translate: 100% -100%;
    }
    100% {
        translate: 0 0;
    }
}

@keyframes icon-move-in-reverse {
    0% {
        translate: 0 0;
    }
    100% {
        translate: -100% 100%;
    }
}

@keyframes fade-in {
    0% {
        opacity:0;
    }
    100% {
        opacity: 1;
    }
}

@keyframes fade-out {
    0% {
        opacity:1;
    }
    100% {
        opacity: 0;
    }
}


/* Hover animations */
.primary-button:hover .btn-icon-animation-first {
    animation-name: icon-move-in-screen;
}

.primary-button:hover .btn-icon-animation-second {
    animation-name: icon-move-out-screen;
}

/* Reverse animations when not hovering */
.primary-button:not(:hover) .btn-icon-animation-first {
    animation-name: icon-move-in-reverse;
}

.primary-button:not(:hover) .btn-icon-animation-second {
    animation-name: icon-move-out-reverse;
}

 
@media(min-width: 1020px) {
    .button-icon-wrapper  {
        width:45px;
        height: 45px
    }

    /* Base animation properties */
    .button-icon-first,
    .button-icon-second, .btn-icon-animation-first, .btn-icon-animation-second {
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }

    .ctaIndicator {
        animation-duration: 0.4s;
        animation-fill-mode: forwards;
        animation-timing-function: ease-in-out;
    }

    /* Hover animations */
    .text-wrapper-icon-animation:hover .button-icon-first {
        animation-name: icon-move-in-screen;
    }

    .text-wrapper-icon-animation:hover .button-icon-second {
        animation-name: icon-move-out-screen;
    }

    /* Reverse animations when not hovering */
    .text-wrapper-icon-animation:not(:hover) .button-icon-first {
        animation-name: icon-move-in-reverse;
    }

    .text-wrapper-icon-animation:not(:hover) .button-icon-second {
        animation-name: icon-move-out-reverse;
    }

    /* Hover animations */
    .teaser-image-wrapper:hover .button-icon-first {
        animation-name: icon-move-in-screen;
    }

/*     .teaser-image-wrapper:hover .button-icon-second {
        animation-name: icon-move-out-screen;
    } */

    .teaser-image-wrapper:not(:hover) .button-icon-first {
        animation-name: icon-move-in-reverse;
    }

  /*   .teaser-image-wrapper:not(:hover) .button-icon-second {
        animation-name: icon-move-out-reverse;
    }  */

    .teaser-image-wrapper:hover .ctaIndicator-inactive {
        animation-name: fade-in;
    }

    .teaser-image-wrapper:not(:hover) .ctaIndicator-inactive {
        animation-name: fade-out;
    } 
}
.hbspt-form form fieldset, .hbspt-form form fieldset input, .hbspt-form .hs-input {
    width:100% !important;
    max-width:100% !important;
}

.hs-input {
    width: 100% !important;
    padding: 17px 22px;
    border: 1px solid rgba(16, 34, 40, .2);
    background-color: transparent;
}


.hbspt-form label:not(.hs-form-booleancheckbox-display,.hs-error-msg, .hs-form-booleancheckbox-display) {
    font-size: 17px !important;
}

.hbspt-form .hs-fieldtype-textarea {
    height: 152px;
}

.hbspt-form .hs-form-field label:not(.hs-form-booleancheckbox-display,.hs-error-msg, .hs-form-booleancheckbox-display) {
    position: absolute;
    top: 18px;
    left: 12px;
    transition: all 0.2s ease;
    padding-inline: 7px;
    pointer-events: none;
    background-color: var(--brand-white);
}

.hbspt-form .hs-form-field:focus-within > label:not(.hs-form-booleancheckbox-display,.hs-error-msg, .hs-form-booleancheckbox-display) {
    position: absolute;
    top: -8px;
    left: 12px;
    font-size: 12px;
    color: #666;              /* optional */
    transition: top .2s ease, font-size .2s ease, color .2s ease;
}

.hbspt-form .hs-error-msgs, .hbspt-form .hs-error-msg {
    list-style: none;
    -webkit-padding-start: 0;
    padding-inline-start: 0;
    margin-block: 8px;
    font-size: 16px;
    color: #d54561;
}

.hbspt-form .hs-input.error, .hbspt-form .hs-input.invalid {
    border-color: #d54561;
}

.hbspt-form .hs-form-field {
    position: relative;
}

.hbspt-form form {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
}

/* Keep label floated when the input/textarea has content */
.hbspt-form .hs-form-field:has(.hs-input:not(:placeholder-shown)) > label:not(.hs-form-booleancheckbox-display, .hs-error-msg),
.hbspt-form .hs-form-field:has(textarea.hs-input:not(:placeholder-shown)) > label:not(.hs-form-booleancheckbox-display, .hs-error-msg) {
  top: -8px;
  color: #666; /* optional */
}

.hbspt-form .form-columns-1 .input, .hbspt-form .form-columns-2 .input {
    margin-right: 0 !important;
}
@media (min-width: 1020px) {
    .hbspt-form .input {
        margin-bottom: 0;
    }
}

.hbspt-form .inputs-list {
    list-style-type: none;
    padding-left: unset;
}

@media (min-width: 1020px) {
    .hbspt-form .hs-form-booleancheckbox-display {
        margin-top: 0;
    }
}
.hbspt-form .hs-form-booleancheckbox-display {
    display: block;
    margin-top: 24px;
}

.hs-richtext {
    font-size: clamp(16px, .1877934272vw + .9559859155rem, 18px);
}

.hbspt-form input[type=submit] {
    cursor: pointer;
    font-size: clamp(16px, .1877934272vw + .9559859155rem, 18px);
    width: 100%;
    line-height: 1;
    font-weight: 700;
    border: none;
    border-radius: 0;
    padding: 21px 24px;
    color: #fefefe;
    background-color: #102228;
    transition: background-color .5s ease;
    margin-top: 24px;
}

.hbspt-form input[type=submit]:hover {
    background-color: rgba(16, 34, 40, .8);
}

.hbspt-form .form-columns-2 {
    display: flex;
    flex-direction: column;
    gap: var(--gap-xl);
}

@media (min-width: 1020px) {
    .hbspt-form input[type=submit] {
        width: auto;
        margin-top: 0;
    }

    .hbspt-form .form-columns-2 {
        gap: var(--gap-xs);
    }
}

@media (min-width: 1020px) {
    .hbspt-form .form-columns-2 {
        flex-direction: row;
    }
}

.hbspt-form .hs-input[type=checkbox]:before {
    content: "";
    display: inline-block;
    width: 24px;
    height: 24px;
    border: 1px solid rgba(16, 34, 40, .2);
    vertical-align: middle;
    cursor: pointer;
}

.hbspt-form .hs-input[type=checkbox]:checked:after {
    content: "";
    background-color: #102228;
    display: inline-block;
    width: 14px;
    height: 14px;
    vertical-align: middle;
    cursor: pointer;
    position: absolute;
    top: 8px;
    left: 5px;
}

.hbspt-form .hs-form-booleancheckbox-display input {
    -webkit-appearance: none;
    -moz-appearance: none;
    height: 0;
    width: 0;
    padding: 0;
    border: none;
    position: relative;
}

.legal-consent-container .hs-form-booleancheckbox-display>span {
    margin-left: 36px !important;
}


.filter-container {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-inline:12px;
    background-color: #f5f6f7;
    max-height: 0;
    opacity: 0;
    transition: max-height .5s ease,opacity .5s ease
}

.filter-container-mobile-show {
    max-height: 1000px;
    opacity: 1;
    display: flex;
    padding-bottom:16px;
}

.hbspt-form .form-columns-2 .hs-form-field {
    width: 100% !important;
}

@media(min-width: 1020px) {
    .filter-container {
        display: flex;
        padding-inline:0;
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
        background-color: transparent;
        max-height: 1000px;
        opacity: 1;
        display: flex;
        padding-bottom:0;
    }

    .filter-container-mobile-show {
        display:none
    }
}


.filter-container-mobile {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 20px;
    background-color: #f5f6f7;
}

.filter-container-mobile button {
    background: none;
    border: none;
    margin: 0;
    padding: 0;
    cursor: pointer;
    transition: opacity .3s ease
}

@media(min-width: 1024px) {
    .filter-container-mobile {
        display: none
    }
}

.dropdownSelector-select {
    position: relative;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 0;
    padding: 17px 40px 17px 17px;
    background-color: white;
    width: 100%;
    cursor: pointer;
    font-family: 'Depot New Body', sans-serif;
    font-weight:700;
}

@media(min-width: 1020px) {
    .dropdownSelector-select {
        transition:border .5s ease;
        border: 1px solid rgba(16,34,40,.2);
        margin: 10px 10px 10px 0;
        min-width: 300px;
        background-color: transparent;
    }
}

.dropdownSelector-item {
    position: relative
}

@media(max-width: 623px) {
    .dropdownSelector-item {
        display:flex;
        align-items: center
    }
}


.dropdownSelector-select:focus {
    outline: none
}

.dropdownSelector-select:hover {
    border: 1px solid #102228
}

.dropdownSelector-label {
    position: absolute;
    z-index: 1;
    top: -8px;
    left: 12px;
    background-color: #fefefe;
    padding-inline:7px;font-size: 12px
}

@media(min-width: 1024px) {
    .dropdownSelector-label {
        top:0;
    }
}

.dropdown-container {
    position: relative
}

@media(max-width: 623px) {
    .dropdown-container {
        display:flex;
        align-items: center
    }
}

.dropdown-container:after {
    content: "";
    position: absolute;
    width: 24px;
    height: 20px;
    background-image: url('https://5441101.fs1.hubspotusercontent-na1.net/hubfs/5441101/Sitoo%20Theme/Icons/chevron_down.svg');
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    pointer-events: none
}

.border-bottom {
    border-bottom: 1px solid var(--gray-10);
}

.container-spacing-both-extra-small {
    padding-top: 16px
}

@media(min-width: 624px) {
    .container-spacing-both-extra-small {
        padding-top:17px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-extra-small {
        padding-top:18px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-extra-small {
        padding-top:19px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-extra-small {
        padding-top:20px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-extra-small {
        padding-top:21px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-extra-small {
        padding-top:22px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-extra-small {
        padding-top:24px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-extra-small {
        padding-top:26px
    }
}

.container-spacing-both-small {
    padding-top: 24px
}

@media(min-width: 624px) {
    .container-spacing-both-small {
        padding-top:26px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-small {
        padding-top:28px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-small {
        padding-top:30px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-small {
        padding-top:32px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-small {
        padding-top:34px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-small {
        padding-top:38px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-small {
        padding-top:40px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-small {
        padding-top:44px
    }
}

.container-spacing-both-medium {
    padding-top: 48px
}

@media(min-width: 624px) {
    .container-spacing-both-medium {
        padding-top:52px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-medium {
        padding-top:54px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-medium {
        padding-top:56px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-medium {
        padding-top:58px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-medium {
        padding-top:60px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-medium {
        padding-top:62px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-medium {
        padding-top:64px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-medium {
        padding-top:68px
    }
}

.container-spacing-both-large {
    padding-top: 64px
}

@media(min-width: 624px) {
    .container-spacing-both-large {
        padding-top:72px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-large {
        padding-top:80px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-large {
        padding-top:88px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-large {
        padding-top:96px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-large {
        padding-top:112px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-large {
        padding-top:120px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-large {
        padding-top:160px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-large {
        padding-top:180px
    }
}

.container-spacing-both-extra-large {
    padding-top: 80px
}

@media(min-width: 624px) {
    .container-spacing-both-extra-large {
        padding-top:84px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-extra-large {
        padding-top:88px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-extra-large {
        padding-top:96px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-extra-large {
        padding-top:112px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-extra-large {
        padding-top:120px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-extra-large {
        padding-top:132px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-extra-large {
        padding-top:180px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-extra-large {
        padding-top:240px
    }
}

.container-spacing-both-extra-small {
    padding-bottom: 16px
}

@media(min-width: 624px) {
    .container-spacing-both-extra-small {
        padding-bottom:17px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-extra-small {
        padding-bottom:18px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-extra-small {
        padding-bottom:19px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-extra-small {
        padding-bottom:20px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-extra-small {
        padding-bottom:21px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-extra-small {
        padding-bottom:22px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-extra-small {
        padding-bottom:24px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-extra-small {
        padding-bottom:26px
    }
}

.container-spacing-both-small {
    padding-bottom: 24px
}

@media(min-width: 624px) {
    .container-spacing-both-small {
        padding-bottom:26px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-small {
        padding-bottom:28px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-small {
        padding-bottom:30px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-small {
        padding-bottom:32px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-small {
        padding-bottom:34px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-small {
        padding-bottom:38px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-small {
        padding-bottom:40px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-small {
        padding-bottom:44px
    }
}

.container-spacing-both-medium {
    padding-bottom: 48px
}

@media(min-width: 624px) {
    .container-spacing-both-medium {
        padding-bottom:52px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-medium {
        padding-bottom:54px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-medium {
        padding-bottom:56px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-medium {
        padding-bottom:58px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-medium {
        padding-bottom:60px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-medium {
        padding-bottom:62px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-medium {
        padding-bottom:64px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-medium {
        padding-bottom:68px
    }
}

.container-spacing-both-large {
    padding-bottom: 64px
}

@media(min-width: 624px) {
    .container-spacing-both-large {
        padding-bottom:72px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-large {
        padding-bottom:80px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-large {
        padding-bottom:88px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-large {
        padding-bottom:96px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-large {
        padding-bottom:112px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-large {
        padding-bottom:120px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-large {
        padding-bottom:160px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-large {
        padding-bottom:180px
    }
}

.container-spacing-both-extra-large {
    padding-bottom: 80px
}

@media(min-width: 624px) {
    .container-spacing-both-extra-large {
        padding-bottom:84px
    }
}

@media(min-width: 768px) {
    .container-spacing-both-extra-large {
        padding-bottom:88px
    }
}

@media(min-width: 1024px) {
    .container-spacing-both-extra-large {
        padding-bottom:96px
    }
}

@media(min-width: 1280px) {
    .container-spacing-both-extra-large {
        padding-bottom:112px
    }
}

@media(min-width: 1440px) {
    .container-spacing-both-extra-large {
        padding-bottom:120px
    }
}

@media(min-width: 1680px) {
    .container-spacing-both-extra-large {
        padding-bottom:132px
    }
}

@media(min-width: 1920px) {
    .container-spacing-both-extra-large {
        padding-bottom:180px
    }
}

@media(min-width: 2560px) {
    .container-spacing-both-extra-large {
        padding-bottom:240px
    }
}



.container-spacing-top-extra-small {
    padding-top: 16px
}

@media(min-width: 624px) {
    .container-spacing-top-extra-small {
        padding-top:17px
    }
}

@media(min-width: 768px) {
    .container-spacing-top-extra-small {
        padding-top:18px
    }
}

@media(min-width: 1024px) {
    .container-spacing-top-extra-small {
        padding-top:19px
    }
}

@media(min-width: 1280px) {
    .container-spacing-top-extra-small {
        padding-top:20px
    }
}

@media(min-width: 1440px) {
    .container-spacing-top-extra-small {
        padding-top:21px
    }
}

@media(min-width: 1680px) {
    .container-spacing-top-extra-small {
        padding-top:22px
    }
}

@media(min-width: 1920px) {
    .container-spacing-top-extra-small {
        padding-top:24px
    }
}

@media(min-width: 2560px) {
    .container-spacing-top-extra-small {
        padding-top:26px
    }
}

.container-spacing-top-small {
    padding-top: 24px
}

@media(min-width: 624px) {
    .container-spacing-top-small {
        padding-top:26px
    }
}

@media(min-width: 768px) {
    .container-spacing-top-small {
        padding-top:28px
    }
}

@media(min-width: 1024px) {
    .container-spacing-top-small {
        padding-top:30px
    }
}

@media(min-width: 1280px) {
    .container-spacing-top-small {
        padding-top:32px
    }
}

@media(min-width: 1440px) {
    .container-spacing-top-small {
        padding-top:34px
    }
}

@media(min-width: 1680px) {
    .container-spacing-top-small {
        padding-top:38px
    }
}

@media(min-width: 1920px) {
    .container-spacing-top-small {
        padding-top:40px
    }
}

@media(min-width: 2560px) {
    .container-spacing-top-small {
        padding-top:44px
    }
}

.container-spacing-top-medium {
    padding-top: 48px
}

@media(min-width: 624px) {
    .container-spacing-top-medium {
        padding-top:52px
    }
}

@media(min-width: 768px) {
    .container-spacing-top-medium {
        padding-top:54px
    }
}

@media(min-width: 1024px) {
    .container-spacing-top-medium {
        padding-top:56px
    }
}

@media(min-width: 1280px) {
    .container-spacing-top-medium {
        padding-top:58px
    }
}

@media(min-width: 1440px) {
    .container-spacing-top-medium {
        padding-top:60px
    }
}

@media(min-width: 1680px) {
    .container-spacing-top-medium {
        padding-top:62px
    }
}

@media(min-width: 1920px) {
    .container-spacing-top-medium {
        padding-top:64px
    }
}

@media(min-width: 2560px) {
    .container-spacing-top-medium {
        padding-top:68px
    }
}

.container-spacing-top-large {
    padding-top: 64px
}

@media(min-width: 624px) {
    .container-spacing-top-large {
        padding-top:72px
    }
}

@media(min-width: 768px) {
    .container-spacing-top-large {
        padding-top:80px
    }
}

@media(min-width: 1024px) {
    .container-spacing-top-large {
        padding-top:88px
    }
}

@media(min-width: 1280px) {
    .container-spacing-top-large {
        padding-top:96px
    }
}

@media(min-width: 1440px) {
    .container-spacing-top-large {
        padding-top:112px
    }
}

@media(min-width: 1680px) {
    .container-spacing-top-large {
        padding-top:120px
    }
}

@media(min-width: 1920px) {
    .container-spacing-top-large {
        padding-top:160px
    }
}

@media(min-width: 2560px) {
    .container-spacing-top-large {
        padding-top:180px
    }
}

.container-spacing-top-extra-large {
    padding-top: 80px
}

@media(min-width: 624px) {
    .container-spacing-top-extra-large {
        padding-top:84px
    }
}

@media(min-width: 768px) {
    .container-spacing-top-extra-large {
        padding-top:88px
    }
}

@media(min-width: 1024px) {
    .container-spacing-top-extra-large {
        padding-top:96px
    }
}

@media(min-width: 1280px) {
    .container-spacing-top-extra-large {
        padding-top:112px
    }
}

@media(min-width: 1440px) {
    .container-spacing-top-extra-large {
        padding-top:120px
    }
}

@media(min-width: 1680px) {
    .container-spacing-top-extra-large {
        padding-top:132px
    }
}

@media(min-width: 1920px) {
    .container-spacing-top-extra-large {
        padding-top:180px
    }
}

@media(min-width: 2560px) {
    .container-spacing-top-extra-large {
        padding-top:240px
    }
}

.container-spacing-bottom-extra-small {
    padding-bottom: 16px
}

@media(min-width: 624px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:17px
    }
}

@media(min-width: 768px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:18px
    }
}

@media(min-width: 1024px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:19px
    }
}

@media(min-width: 1280px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:20px
    }
}

@media(min-width: 1440px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:21px
    }
}

@media(min-width: 1680px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:22px
    }
}

@media(min-width: 1920px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:24px
    }
}

@media(min-width: 2560px) {
    .container-spacing-bottom-extra-small {
        padding-bottom:26px
    }
}

.container-spacing-bottom-small {
    padding-bottom: 24px
}

@media(min-width: 624px) {
    .container-spacing-bottom-small {
        padding-bottom:26px
    }
}

@media(min-width: 768px) {
    .container-spacing-bottom-small {
        padding-bottom:28px
    }
}

@media(min-width: 1024px) {
    .container-spacing-bottom-small {
        padding-bottom:30px
    }
}

@media(min-width: 1280px) {
    .container-spacing-bottom-small {
        padding-bottom:32px
    }
}

@media(min-width: 1440px) {
    .container-spacing-bottom-small {
        padding-bottom:34px
    }
}

@media(min-width: 1680px) {
    .container-spacing-bottom-small {
        padding-bottom:38px
    }
}

@media(min-width: 1920px) {
    .container-spacing-bottom-small {
        padding-bottom:40px
    }
}

@media(min-width: 2560px) {
    .container-spacing-bottom-small {
        padding-bottom:44px
    }
}

.container-spacing-bottom-medium {
    padding-bottom: 48px
}

@media(min-width: 624px) {
    .container-spacing-bottom-medium {
        padding-bottom:52px
    }
}

@media(min-width: 768px) {
    .container-spacing-bottom-medium {
        padding-bottom:54px
    }
}

@media(min-width: 1024px) {
    .container-spacing-bottom-medium {
        padding-bottom:56px
    }
}

@media(min-width: 1280px) {
    .container-spacing-bottom-medium {
        padding-bottom:58px
    }
}

@media(min-width: 1440px) {
    .container-spacing-bottom-medium {
        padding-bottom:60px
    }
}

@media(min-width: 1680px) {
    .container-spacing-bottom-medium {
        padding-bottom:62px
    }
}

@media(min-width: 1920px) {
    .container-spacing-bottom-medium {
        padding-bottom:64px
    }
}

@media(min-width: 2560px) {
    .container-spacing-bottom-medium {
        padding-bottom:68px
    }
}

.container-spacing-bottom-large {
    padding-bottom: 64px
}

@media(min-width: 624px) {
    .container-spacing-bottom-large {
        padding-bottom:72px
    }
}

@media(min-width: 768px) {
    .container-spacing-bottom-large {
        padding-bottom:80px
    }
}

@media(min-width: 1024px) {
    .container-spacing-bottom-large {
        padding-bottom:88px
    }
}

@media(min-width: 1280px) {
    .container-spacing-bottom-large {
        padding-bottom:96px
    }
}

@media(min-width: 1440px) {
    .container-spacing-bottom-large {
        padding-bottom:112px
    }
}

@media(min-width: 1680px) {
    .container-spacing-bottom-large {
        padding-bottom:120px
    }
}

@media(min-width: 1920px) {
    .container-spacing-bottom-large {
        padding-bottom:160px
    }
}

@media(min-width: 2560px) {
    .container-spacing-bottom-large {
        padding-bottom:180px
    }
}

.container-spacing-bottom-extra-large {
    padding-bottom: 80px
}

@media(min-width: 624px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:84px
    }
}

@media(min-width: 768px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:88px
    }
}

@media(min-width: 1024px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:96px
    }
}

@media(min-width: 1280px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:112px
    }
}

@media(min-width: 1440px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:120px
    }
}

@media(min-width: 1680px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:132px
    }
}

@media(min-width: 1920px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:180px
    }
}

@media(min-width: 2560px) {
    .container-spacing-bottom-extra-large {
        padding-bottom:240px
    }
}

.container--size-default {
  grid-template-columns: 6.4vw 1fr 6.4vw;
}


/* .container {
  display: grid;
}

@media(min-width: 1440px) {
  .page.page--default-page > .container--spacing-top-large:first-child {
    padding-top: 120px;
  }
}

.page.page--hardware-page > .container--size-default {
  margin-bottom: calc(64px - 2.5em);
}

@media(min-width: 624px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(72px - 2.5em);
  }
}

@media(min-width: 768px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(80px - 2.5em);
  }
}

@media(min-width: 1024px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(88px - 2.5em);
  }
}

@media(min-width: 1280px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(96px - 2.5em);
  }
}

@media(min-width: 1440px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(112px - 2.5em);
  }
}

@media(min-width: 1680px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(120px - 2.5em);
  }
}

@media(min-width: 1920px) {
  .page.page--hardware-page > .container--size-default {
    margin-bottom: calc(160px - 2.5em);
  }
}

.container--size-full {
  grid-template-columns: 1fr;
}

.container--size-full > * {
  grid-column: revert;
}



@media(min-width: 1024px) {
  .container--size-default {
    grid-template-columns: 8.5vw 1fr 8.5vw;
  }
}

.container--size-default > * {
  grid-column: 2 / span 1;
}
 */

:root {
  /* Margins */
  --margin-xs:                  24px;
  --margin-s:                   32px;
  --margin-m:                   36px;
  --margin-l:                   40px;
  --margin-xl:                  56px;

  --gap-xxs:                      4px;
  --gap-xs:                       8px;
  --gap-s:                      12px;
  --gap-m:                      16px;
  --gap-l:                     20px;
  --gap-xl:                    24px;
  --gap-2xl:                    32px;
  --gap-global:                 16px;

  --section-gap:                16px;

  --padding-xs:                  8px;
  --padding-s:                  12px;
  --padding-m:                  16px;
  --padding-l:                  20px;
  --padding-xl:                 24px;
  --padding-2xl:                32px;

  --padding-bottom-container:   118px;

  --padding-section-vert-s:     24px;
  --padding-section-vert-m:     48px;
  --padding-section-vert-l:     64px;

  --padding-section-horiz-s:  24px;
  --padding-section-horiz-m:  24px;
  --padding-section-horiz-l:  24px;

  --padding-transition-left-s:24px;
  --padding-transition-left-m:28px;
  --padding-transition-left-l:38px;

  --padding-section-horiz-global: 6.15%;
}

@media (min-width: 760px) {
  :root {
    /* Font Weights */
    --margin-xs:              24px;
    --margin-s:               32px;
    --margin-m:               40px;
    --margin-l:               48px;
    --margin-xl:              64px;

    --padding-section-vert-s: 40px;
    --padding-section-vert-m: 56px;
    --padding-section-vert-l: 72px;

    --padding-section-horiz-s:  32px;
    --padding-section-horiz-m:  40px;
    --padding-section-horiz-l:  48px;
  }
}

@media (min-width: 1020px) {
  :root {
    /* Font Weights */
    --margin-xs:              28px;
    --margin-s:               36px;
    --margin-m:               44px;
    --margin-l:               56px;
    --margin-xl:              72px;

    --padding-section-vert-s: 40px;
    --padding-section-vert-m: 64px;
    --padding-section-vert-l: 96px;

    --section-gap:            32px;
    
    --padding-section-horiz-m:  80px;
    --padding-section-horiz-l:  112px;

    --gap-global:               32px;

    --padding-section-horiz-global: 8.35%;
  }
}

@media (min-width: 1920px) {
  :root {
    /* Font Weights */
    --margin-xs:              32px;
    --margin-s:               40px;
    --margin-m:               48px;
    --margin-l:               64px;
    --margin-xl:              80px;

    --padding-section-vert-s: 80px;
    --padding-section-vert-m: 112px;
    --padding-section-vert-l: 160px;

    --section-gap:            40px;

    --padding-section-horiz-l:  160px;

    --gap-global:               40px;
  }
}

.section-padding-horiz-global {
  padding-right: var(--padding-section-horiz-global);
  padding-left: var(--padding-section-horiz-global);
}

.gap-s {
  gap: var(--gap-s);
}
.gap-m {
  gap: var(--gap-m);
}
.gap-l {
  gap: var(--gap-l);
}
.gap-xl {
  gap: var(--gap-xl);
}
.gap-xxl {
  gap: var(--gap-xxl);
}

.mx-auto {
  margin-left: auto;
  margin-right: auto;
}

.mx-right {
  margin-right: auto;
}

.mx-left {
  margin-left: auto;
}

/* SECTION PADDING */
.section-padding-both-none {
  padding-top: 0;
  padding-bottom: 0;
}

.section-padding-top-none {
  padding-top: 0;
}

.section-padding-bottom-none {
  padding-bottom: 0;
}

.section-padding-top-s {
  padding-top: var(--padding-section-vert-s);
}

.section-padding-top-m {
  padding-top: var(--padding-section-vert-m);
}

.section-padding-top-l {
  padding-top: var(--padding-section-vert-l);
}

.section-padding-both-s {
  padding-top: var(--padding-section-vert-s);
  padding-bottom: var(--padding-section-vert-s);
}

.section-padding-both-m {
  padding-top: var(--padding-section-vert-m);
  padding-bottom: var(--padding-section-vert-m);
}

.section-padding-both-l {
  padding-top: var(--padding-section-vert-l);
  padding-bottom: var(--padding-section-vert-l);
}

.section-padding-bottom-s {
  padding-bottom: var(--padding-section-vert-s);
}

.section-padding-bottom-m {
  padding-bottom: var(--padding-section-vert-m);
}

.section-padding-bottom-l {
  padding-bottom: var(--padding-section-vert-l);
}

.gap-m-padding-bottom {
  padding-bottom:var(--gap-m);
}

/* Margin & Padding Utility Classes */
.padding-section-vert-top-m {
  padding-top: var(--padding-section-vert-m);
}
.padding-section-vert-bottom-m {
  padding-bottom: var(--padding-section-vert-m);
}
/* .padding-section-vert-both-m {
  padding-right: var(--padding-section-vert-m);
  padding-left: var(--padding-section-vert-m);
} */
.padding-section-vert-both-m {
  padding-top: var(--padding-section-vert-m);
  padding-bottom: var(--padding-section-vert-m);
}

.padding-section-vert-top-s {
  padding-top: var(--padding-section-vert-s);
}
.padding-section-vert-bottom-s {
  padding-bottom: var(--padding-section-vert-s);
}
/* .padding-section-vert-both-s {
  padding-right: var(--padding-section-vert-m);
  padding-left: var(--padding-section-vert-m);
} */
.padding-section-vert-both-s {
  padding-top: var(--padding-section-vert-s);
  padding-bottom: var(--padding-section-vert-s);
}

.padding-section-vert-top-l {
  padding-top: var(--padding-section-vert-l);
}
.padding-section-vert-bottom-l {
  padding-bottom: var(--padding-section-vert-l);
}
/* .padding-section-vert-both-l {
  padding-right: var(--padding-section-vert-m);
  padding-left: var(--padding-section-vert-m);
} */
.padding-section-vert-both-l {
  padding-top: var(--padding-section-vert-l);
  padding-bottom: var(--padding-section-vert-l);
}
.padding-section-horiz-right-s {
  padding-right: var(--padding-section-horiz-s);
}
.padding-section-horiz-left-s {
  padding-left: var(--padding-section-horiz-s);
}
.padding-section-horiz-both-s {
  padding-right: var(--padding-section-horiz-s);
  padding-left: var(--padding-section-horiz-s);
}
.padding-section-horiz-right-l {
  padding-right: var(--padding-section-horiz-l);
}
.padding-section-horiz-left-l {
  padding-left: var(--padding-section-horiz-l);
}
.padding-section-horiz-both-l {
  padding-right: var(--padding-section-horiz-s);
  padding-left: var(--padding-section-horiz-s);
}
.padding-section-horiz-right-m {
  padding-right: var(--padding-section-horiz-m);
}
.padding-section-horiz-left-m {
  padding-left: var(--padding-section-horiz-m);
}
.padding-section-horiz-both-m {
  padding-right: var(--padding-section-horiz-m);
  padding-left: var(--padding-section-horiz-m);
}


.margin-bottom-0 {
  margin-bottom: 0;
}
.margin-top-0 {
  margin-top: 0;
}

.margin-bottom-gap-xs {margin-bottom:var(--gap-xs);}
.margin-bottom-gap-s {margin-bottom:var(--gap-s);}
.margin-bottom-gap-m {margin-bottom:var(--gap-m);}
.margin-bottom-gap-l {margin-bottom:var(--gap-l);}
.margin-bottom-gap-xl {margin-bottom:var(--gap-xl);}
.margin-bottom-gap-2xl {margin-bottom:var(--gap-2xl);}

.margin-top-gap-xs {margin-top:var(--gap-xs);}
.margin-top-gap-s {margin-bottom:var(--gap-s);}
.margin-top-gap-m {margin-bottom:var(--gap-m);}
.margin-top-gap-l {margin-bottom:var(--gap-l);}
.margin-top-gap-xl {margin-bottom:var(--gap-xl);}
.margin-top-gap-2xl {margin-bottom:var(--gap-2xl);}

/* .margin-bottom-gap-s:last-of-type, .margin-bottom-gap-m:last-of-type, .margin-bottom-gap-l:last-of-type, .margin-bottom-gap-xl:last-of-type, .margin-bottom-gap-2xl:last-of-type, .margin-bottom-gap-3xl:last-of-type {
  margin-bottom:0;
} */


.mg-pd-right-xs      { margin-right: var(--padding-xs); }
.mg-pd-right-s       { margin-right: var(--padding-s); }
.mg-pd-right-m       { margin-right: var(--padding-m); }
.mg-pd-right-l       { margin-right: var(--padding-l); }
.mg-pd-right-xl      { margin-right: var(--padding-xl); }

.mg-pd-left-xs       { margin-left: var(--padding-xs); }
.mg-pd-left-s        { margin-left: var(--padding-s); }
.mg-pd-left-m        { margin-left: var(--padding-m); }
.mg-pd-left-l        { margin-left: var(--padding-l); }
.mg-pd-left-xl       { margin-left: var(--padding-xl); }

.padding-right-xs    { padding-right: var(--padding-xs); }
.padding-right-s     { padding-right: var(--padding-s); }
.padding-right-m     { padding-right: var(--padding-m); }
.padding-right-l     { padding-right: var(--padding-l); }
.padding-right-xl    { padding-right: var(--padding-xl); }

.padding-left-xs     { padding-left: var(--padding-xs); }
.padding-left-s      { padding-left: var(--padding-s); }
.padding-left-m      { padding-left: var(--padding-m); }
.padding-left-l      { padding-left: var(--padding-l); }
.padding-left-xl     { padding-left: var(--padding-xl); }

.padding-top-xs      { padding-top: var(--padding-xs); }
.padding-top-s       { padding-top: var(--padding-s); }
.padding-top-m       { padding-top: var(--padding-m); }
.padding-top-l       { padding-top: var(--padding-l); }
.padding-top-xl      { padding-top: var(--padding-xl); }

.padding-bottom-xs   { padding-bottom: var(--padding-xs); }
.padding-bottom-s    { padding-bottom: var(--padding-s); }
.padding-bottom-m    { padding-bottom: var(--padding-m); }
.padding-bottom-l    { padding-bottom: var(--padding-l); }
.padding-bottom-xl   { padding-bottom: var(--padding-xl); }

.margin-top-xs       { margin-top: var(--margin-xs); }
.margin-top-s        { margin-top: var(--margin-s); }
.margin-top-m        { margin-top: var(--margin-m); }
.margin-top-l        { margin-top: var(--margin-l); }
.margin-top-xl       { margin-top: var(--margin-xl); }

.margin-bottom-xs    { margin-bottom: var(--margin-xs); }
.margin-bottom-s     { margin-bottom: var(--margin-s); }
.margin-bottom-m     { margin-bottom: var(--margin-m); }
.margin-bottom-l     { margin-bottom: var(--margin-l); }
.margin-bottom-xl    { margin-bottom: var(--margin-xl); }

.margin-both-xs      { margin: var(--margin-xs) 0; }
.margin-both-s       { margin: var(--margin-s) 0; }
.margin-both-m       { margin: var(--margin-m) 0; }
.margin-both-l       { margin: var(--margin-l) 0; }
.margin-both-xl      { margin: var(--margin-xl) 0; }

.margin-right-xs     { margin-right: var(--margin-xs); }
.margin-right-s      { margin-right: var(--margin-s); }
.margin-right-m      { margin-right: var(--margin-m); }
.margin-right-l      { margin-right: var(--margin-l); }
.margin-right-xl     { margin-right: var(--margin-xl); }

.margin-left-xs      { margin-left: var(--margin-xs); }
.margin-left-s       { margin-left: var(--margin-s); }
.margin-left-m       { margin-left: var(--margin-m); }
.margin-left-l       { margin-left: var(--margin-l); }
.margin-left-xl      { margin-left: var(--margin-xl); }

.padding-left-icon-l {
  padding-left: var(--padding-transition-left-l) !important;
}

.padding-left-icon-m {
  padding-left: var(--padding-transition-left-m) !important;
}

.padding-left-icon-s {
  padding-left: var(--padding-transition-left-s) !important;
}
:root {
    /* Font Weights */
    --brand-yellow: #FDCA29;
    --brand-green:#193A30;
    --brand-dark_blue:#102228;
    --brand-white:#FFFFFF;

    --gray-80:#2D3D42;
    --gray-70:#49575C;
    --gray-60:#667276;
    --gray-50:#838C90;
    --gray-40:#9FA7A9;
    --gray-30:#BCC1C3;
    --gray-25:#CACFD0;
    --gray-20:#D8DCDD;
    --gray-15:#E7E9EA;
    --gray-10:#F5F6F7;

    --positive-50: #0000004D, 30%;
    --positive-40: ;
    --positive-30: #0000004D, 30%;
    --positive-20: ;
    --positive-10: ;

    
    --state-hover : #2D3D42;

    /* Variables for use */
    /* Core */
    --core-accent-primary:var(--brand-yellow);
    --core-accent-secondary:var(--brand-green);

    /* Background */
    --background-base: var(--brand-white);
    --background-surface: var(--gray-10);
    --background-shading: var(--gray-10);
    --background-foreground: var(---gray-10);
    --background-accent: var(--brand-white);
}

.bg_brand_yellow {
    background-color: var(--brand-yellow);
}
.bg_brand_green {
    background-color: var(--brand-green);
}
.bg_brand_dark_blue {
    background-color: var(--brand-dark_blue);
}
.bg_brand_white {
    background-color: var(--brand-white);
}

.text_gray-10 {
    color: var(--gray-10);
}
.text_gray-15 {
    color: var(--gray-15);
}
.text_gray-20 {
    color: var(--gray-20);
}
.text_gray-25 {
    color: var(--gray-25);
}
.text_gray-30 {
    color: var(--gray-30);
}
.text_gray-40 {
    color: var(--gray-40);
}
.text_gray-50 {
    color: var(--gray-50);
}
.text_gray-60 {
    color: var(--gray-60);
}
.text_gray-70 {
    color: var(--gray-70);
}
.text_gray-80 {
    color: var(--gray-80);
}

.bg_gray-10 {
    background-color: var(--gray-10);
}
.bg_gray-15 {
    background-color: var(--gray-15);
}
.bg_gray-20 {
    background-color: var(--gray-20);
}
.bg_gray-25 {
    background-color: var(--gray-25);
}
.bg_gray-30 {
    background-color: var(--gray-30);
}
.bg_gray-40 {
    background-color: var(--gray-40);
}
.bg_gray-50 {
    background-color: var(--gray-50);
}
.bg_gray-60 {
    background-color: var(--gray-60);
}
.bg_gray-70 {
    background-color: var(--gray-70);
}
.bg_gray-80 {
    background-color: var(--gray-80);
}