/* ------------------------------ */
/* ----- Typography / Colors ---- */
/* ------------------------------ */

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/vwa_shop_child/fonts/montserrat-regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Montserrat';
  src: url('/wp-content/themes/vwa_shop_child/fonts/montserrat-bold.woff') format('woff');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}



/* ------------------------------ */
/* ---------- Variables --------- */
/* ------------------------------ */

:root {

  /* Brand Fonts */
  --brand-font: 'Montserrat';

  /* Brand Colors*/
  --color-black: #000000;
  --color-white: #ffffff;
  --color-naval-blue: #072B4F;
  --color-surface-blue-1: #006096;
  --color-surface-blue-2: #0082BC;
  --color-naval-immersion-1: #034256;
  --color-naval-immersion-2: #01687F;
  --color-battelship-grey: #999999;
  --color-ss-camo: #678282;
  --color-grey: #e8e8e1;

  /* Notices */
  --color-success: #072B4F;
  --color-success-2: #00916E;
  --color-warning: #F45700;
  --color-warning-hover: #d04a00;
  --color-error: #EE2A1B;

  --box-shadow-2: 0 0 20px 0 rgb(0 0 0 / 15%);
  --box-shadow: 0 0 20px 0 rgb(0 0 0 / 10%);

  /* Font Styling */
  --font-size-9: 60px;
  --font-size-8: 48px;
  --font-size-7: 42px;
  --font-size-6: 36px;
  --font-size-5: 30px;
  --font-size-4: 26px;
  --font-size-3: 20px;
  --font-size-2: 16px;
  --font-size-1: 15px;
  --font-size-copy: 18px;
  --line-height-3: 1.2;
  --line-height-2: 1.35;
  --line-height-1: 1.5;

  /* Hover & Transition */
  --opacity-3: .85;
  --opacity-2: .5;
  --opacity-1: .7;
  --transition-4: 1s;
  --transition-3: .75s;
  --transition-2: .5s;
  --transition-1: .3s;
  --delay-1: .1s;
  --cubic-1: cubic-bezier(0, .55, .45, 1);

  /* Spacing */
  --spacing-11: 160px;
  --spacing-10: 120px;
  --spacing-9: 80px;
  --spacing-8: 60px;
  --spacing-7: 50px;
  --spacing-6-6: 40px;
  --spacing-6-5: 35px;
  --spacing-6: 30px;
  --spacing-5: 20px;
  --spacing-4: 15px;
  --spacing-3: 10px;
  --spacing-2: 7px;
  --spacing-1: 5px;

  /* Layout */
  --header-height: 80px;
  --max-width-content: 900px;
  --max-width-container: 1320px;
  --logo-width: 130px;
  --logo-height: 160px;
}



/* ------------------------------ */
/* ----------- General ---------- */
/* ------------------------------ */

::-moz-selection {
  background: var(--color-black);
  color: var(--color-white);
}

::selection {
  background: var(--color-black);
  color: var(--color-white);
}

::-moz-selection {
  background: var(--color-black);
  color: var(--color-white);
}

footer ::-moz-selection {
  background: var(--color-white);
  color: var(--color-black);
}

footer ::selection {
  background: var(--color-white);
  color: var(--color-black);
}

footer ::-moz-selection {
  background: var(--color-white);
  color: var(--color-black);
}

img::-moz-selection, video::-moz-selection, iframe::-moz-selection {
  background-color: transparent;
}

img::selection, video::selection, iframe::selection {
  background-color: transparent;
}

img::-moz-selection, video::-moz-selection, iframe::-moz-selection {
  background-color: transparent;
}

html {
  font-size: 20px;
}

body {
  font-family: var(--brand-font);
  font-size: var(--font-size-copy);
  line-height: var(--line-height-1);
  color: var(--color-black);
  background-color: var(--color-white);
  -webkit-tap-highlight-color: transparent;
}

.shop_wrapper {
  background-color: var(--color-white);
}

h1, h2:first-child, h3:first-child, h4:first-child {
  margin-top: 0;
}

h1, h2 {
  line-height: 1.15;
}

h1, .typography--h1 {
  font-size: var(--font-size-9);
}

h2, .typography--h2 {
  font-size: var(--font-size-8);
}

h2 {
  margin-top: var(--spacing-8);
}

.typography--h2-small {
  font-size: var(--font-size-7);
}

h3, .section__text--category h2, .typography--h3 {
  font-size: var(--font-size-6);
  line-height: var(--line-height-3);
}

h3 {
  margin-top: var(--spacing-6-6);
}

h1 + h3 {
  margin-top: var(--spacing-6);
}

h4, .typography--h4 {
  font-size: var(--font-size-copy);
  font-weight: bold;
  line-height: var(--line-height-1);
  margin-top: var(--spacing-6);
  margin-bottom: 0;
}

p.lead {
  font-size: var(--font-size-4);
}

.no-margin {
  margin-bottom: 0 !important;
}

a {
  color: var(--color-black);
  text-decoration: none;
}

main p > a, main span > a, main li > a, main address a, .form_item--checkbox label a {
  border-bottom: 1px solid;
  -webkit-transition: opacity var(--transition-2);
  -o-transition: opacity var(--transition-2);
  transition: opacity var(--transition-2);
}

.no-touchevents main p > a:hover, .no-touchevents main span > a:hover, .no-touchevents main li > a:hover, .no-touchevents main address a:hover, .no-touchevents .form_item--checkbox label a:hover {
  opacity: var(--opacity-1);
}

p {
  margin: 0 0 var(--spacing-5);
}

p:last-child, ul:last-child {
  margin-bottom: 0;
}

p em {
  font-size: var(--font-size-3);
  font-style: normal;
  opacity: var(--opacity-1);
}

main ul, main ol {
  margin: 0 0 var(--spacing-6);
}

main p + ul, main p + ol {
  margin-top: calc(var(--spacing-3) * -1);
}

main ul li {
  position: relative;
}

main ul li + li, main ol li + li {
  margin-top: var(--spacing-1);
}

main section ul li::before {
  content: "";
  position: absolute;
  left: 0;
  width: 8px;
  height: 1px;
  background-color: var(--color-black);
}

a.full {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  max-width: 100%;
  text-indent: -30000px;
  z-index: 10;
  text-decoration: none;
  text-align: left;
}

.section__title {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

.section__title + div {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

.section__text > img {
  margin-bottom: var(--spacing-4);
}

span[class$="--hide-text"], span.hide-text {
  position: absolute;
  height: 1px;
  width: 1px;
  clip: rect(1px,1px,1px,1px);
  border: 0;
  overflow: hidden;
}


/* Logo */
.logo a {
  display: inline-block;
}


/* Visually hidden */
a.visually-hidden:not(.skip-link):focus-visible, a.visually-hidden:not(.skip-link):focus {
  position: static !important;
  display: block;
  overflow: visible;
  clip: auto;
  height: auto;
  width: auto;
  margin: var(--spacing-0) 0;
  text-decoration: underline;
}

a.skip-link:focus-visible, a.skip-link:focus {
  overflow: visible;
  clip: auto;
  width: auto;
  height: auto;
  z-index: 10000;
  font-size: var(--font-size-1);
  font-weight: normal;
  color: var(--color-white);
  padding: 5px 12px;
  outline: 1px solid !important;
}



/* ------------------------------ */
/* ----------- Layout ----------- */
/* ------------------------------ */

.shop_wrapper {
  position: relative;
  margin: 0 auto;
}

h1, h2, h3, h4, h5, main p, main ul {
  max-width: var(--max-width-content);
}

.section {
  padding-top: var(--spacing-10);
}

.section:last-child, .section.section--color, .section.section--light {
  padding-bottom: var(--spacing-10);
}

.section.section--color, .section.section--light {
  margin-top: var(--spacing-10);
}

.section.section--color {
  background-color: var(--color-black);
  color: var(--color-white);
}

.section.section--light {
  background-color: var(--color-grey);
}

.header.header--no-cover .section:first-child {
  padding-top: var(--spacing-11);
}

.header:not(.header--no-cover) .section:first-child {
  padding-top: var(--spacing-8);
}

.section > div, .inside {
  margin: 0 auto;
  max-width: var(--max-width-container);
}

.section > div {
  padding-top: var(--spacing-9);
}

.section > div:first-child {
  padding-top: 0;
}

.section.section--footer_teaser {
  border-top: 1px solid var(--color-grey);
  margin-top: var(--spacing-11);
}

.section.section--footer_teaser h3 {
  font-size: var(--font-size-5);
}


/* Center */
.section > div[class*="--center"] {
  text-align: center;
}

.section > div[class*="--center"] h1, .section > div[class*="--center"] h2, .section > div[class*="--center"] h3, .section > div[class*="--center"] h4, .section > div[class*="--center"] p, .section > div[class*="--center"] ul {
  margin-right: auto;
  margin-left: auto;
}

.section > div[class*="--center"] ul {
  white-space: pre-line;
  line-height: 0;
}

.section > div[class*="--center"] ul li {
  display: inline-block; 
  line-height: var(--line-height-1);
}


/* ------------------------------ */
/* ------------ Media ----------- */
/* ------------------------------ */

/* Images */
.picture_container {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1;
}

.picture_container--cover img, .picture_container--cover img {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.picture_container--cover, .picture_container--cover picture {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}

img[data-lazyloaded]{
  opacity: 0;
}

img.litespeed-loaded{
  -webkit-transition: opacity .15s;
  -o-transition: opacity .15s;
  transition: opacity .15s;
  opacity: 1;
}


/* Position */
.picture_container--center-center img {
  -o-object-position: center center;
     object-position: center center;
}

.picture_container--left-center img {
  -o-object-position: left center;
     object-position: left center;
}

.picture_container--right-center img {
  -o-object-position: right center;
     object-position: right center;
}

.picture_container--center-top img {
  -o-object-position: center top;
     object-position: center top;
}

.picture_container--left-top img {
  -o-object-position: left top;
     object-position: left top;
}

.picture_container--right-top img {
  -o-object-position: right top;
     object-position: right top;
}

.picture_container--center-bottom img {
  -o-object-position: center bottom;
     object-position: center bottom;
}

.picture_container--left-bottom img {
  -o-object-position: left bottom;
     object-position: left bottom;
}

.picture_container--right-bottom img {
  -o-object-position: right bottom;
     object-position: right bottom;
}


/* Overlay */
.picture_container--overlay::before {
  content: "";
  position: absolute;
  z-index: 1;
  bottom: 0;
  left: 0;
  height: 25%;
  width: 100%;
  background: -o-linear-gradient(top, rgba(66, 66, 65, 0) 0%, rgba(66, 66, 65, 0.8) 100%);
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(66, 66, 65, 0)), to(rgba(66, 66, 65, 0.8)));
  background: linear-gradient(180deg, rgba(66, 66, 65, 0) 0%, rgba(66, 66, 65, 0.8) 100%);
}


/* Videos */
.video_container {
  position: relative;
  display: block;
  overflow: hidden;
  line-height: 1;
}

.video_container--embed {
  position: relative;
  overflow: hidden;
  padding-top: 56.25%;
}

.video_container--embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video_container--cover iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
}

.objectfit .video_container--cover video,
.object-fit .video_container--cover video {
  -o-object-fit: cover;
  object-fit: cover;
  width: 100%;
  height: 100%;
}

/* Video thumbs */
.video_container--cover {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}


/* iFrames */
.iframe_container {
  position: relative;
  overflow: hidden;
}

.iframe_container iframe {
  max-width: 100%;
}



/* ------------------------------ */
/* ---------- Animations -------- */
/* ------------------------------ */

.intro-animation {
  -webkit-transform-origin: center;
  -ms-transform-origin: center;
  transform-origin: center;
} 

.intro-animation.intro-animation--visible {
  opacity: 1;
  -webkit-transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s;
  -o-transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s;
  -webkit-transition: opacity 1s, -webkit-transform 1s cubic-bezier(0,.55,.45,1);
  transition: opacity 1s, -webkit-transform 1s cubic-bezier(0,.55,.45,1);
  transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s;
  transition: transform 1s cubic-bezier(0,.55,.45,1), opacity 1s, -webkit-transform 1s cubic-bezier(0,.55,.45,1);
  -webkit-transform: translateZ(0) !important;
  transform: translateZ(0) !important;
  will-change: opacity,transform;
}



/* ------------------------------ */
/* ------------ Icons ----------- */
/* ------------------------------ */

.icon--black {
  fill: var(--color-black);
}

.icon--white {
  fill: var(--color-white);
}

.icon--orange {
  fill: var(--color-warning);
}

.icon--arrow {
  width: 14px;
  height: 14px;
  fill: transparent;
}

.icon--social:not(.icon--social-youtube) {
  width: 18px;
  height: 18px;
}

.icon--social-youtube {
  width: 19px;
  height: 13px;
}

.icon--feature {
  width: 38px;
  height: 38px;
}


/* ------------------------------ */
/* ----------- Teaser ----------- */
/* ------------------------------ */

.section > .section__teaser + .section__teaser {
  margin-top: 0;
}

.section__teaser .teaser {
  max-width: 1080px;
}

.teaser__media {
  position: relative;
  overflow: hidden;
}

.row.reverse:not(.teasers_below) .teaser__media {
  padding-left: 0;
}

.row:not(.reverse):not(.teasers_below) .teaser__media {
  padding-right: 0;
}

.teaser__media img {
  -webkit-transition: transform 5s cubic-bezier(.19,1,.22,1);
  -o-transition: transform 5s cubic-bezier(.19,1,.22,1);
  transition: transform 5s cubic-bezier(.19,1,.22,1);
}

.no-touchevents .teaser__media:hover img {
  -webkit-transform: scale3d(1.05,1.05,1);
          transform: scale3d(1.05,1.05,1);
}

.row.reverse:not(.teasers_below) .teaser__content {
  padding-right: var(--spacing-8);
}

.row:not(.reverse):not(.teasers_below) .teaser__content {
  padding-left: var(--spacing-8);
}

.teaser__media--vimeo_preview {
  min-height: 400px;
}

.teaser_below .teaser__content {
  margin-top: var(--spacing-5);
}


/* ------------------------------ */
/* ------------ Tile ------------ */
/* ------------------------------ */

.tiles.row_simple .tile {
  padding-right: 0;
  padding-left: 0;
}

.tile {
  position: relative;
}

.tile__container, .tile__media {
  position: relative;
  width: 100%;
  height: 100%;
}

.tile__caption {
  position: absolute;
  z-index: 4;
  -webkit-transition: -webkit-transform var(--transition-2);
  transition: -webkit-transform var(--transition-2);
  -o-transition: transform var(--transition-2);
  transition: transform var(--transition-2);
  transition: transform var(--transition-2), -webkit-transform var(--transition-2);
}

.no-touchevents .tile:hover .tile__caption {
  -webkit-transform: translateY(-10px);
      -ms-transform: translateY(-10px);
          transform: translateY(-10px);
}

.tile__caption h3.tile__title {
  display: inline-block;
  position: relative;
  margin-bottom: 0;
  color: var(--color-white);
  line-height: var(--line-height-3);
}

.tile__title::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  border-bottom: 2px solid;
  border-bottom-color: var(--color-white);
  -webkit-transform: scaleX(0);
      -ms-transform: scaleX(0);
          transform: scaleX(0);
  -webkit-transform-origin: 0 50%;
      -ms-transform-origin: 0 50%;
          transform-origin: 0 50%;
  -webkit-transition: -webkit-transform var(--transition-2) ease;
  transition: -webkit-transform var(--transition-2) ease;
  -o-transition: transform var(--transition-2) ease;
  transition: transform var(--transition-2) ease;
  transition: transform var(--transition-2) ease, -webkit-transform var(--transition-2) ease;
}

.no-touchevents .tile:hover .tile__title::after {
  -webkit-transform: scaleX(1);
      -ms-transform: scaleX(1);
          transform: scaleX(1);
}


.tile__media .picture_container::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.0)), color-stop(40%, rgba(0, 0, 0, 0.0)), to(rgba(0, 0, 0, 0.62)));
  background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.62) 100%);
  background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.0) 0%, rgba(0, 0, 0, 0.0) 40%, rgba(0, 0, 0, 0.62) 100%);
}

.tile__media img {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
      transform: scale(1);
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  -webkit-transition: transform 5s cubic-bezier(.19,1,.22,1);
  -o-transition: transform 5s cubic-bezier(.19,1,.22,1);
  transition: transform 5s cubic-bezier(.19,1,.22,1);
}

.no-touchevents .tile:hover .tile__media img {
  -webkit-transform: scale3d(1.05,1.05,1);
          transform: scale3d(1.05,1.05,1);
}



/* ------------------------------ */
/* ----------- Features --------- */
/* ------------------------------ */

.features_container {
  margin-top: var(--spacing-3);
  margin-bottom: var(--spacing-6);
}

.features {
  display: -ms-flexbox;
  display: -webkit-box;
  display: flex;
  -webkit-box-flex: 0;
  -ms-flex: 0 1 auto;
  flex: 0 1 auto;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -ms-flex-direction: row;
  flex-direction: row;
  -ms-flex-wrap: wrap;
  flex-wrap: wrap;
}

.section__text > .features {
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
  text-align: center;
}

.features > div {
  position: relative;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  -webkit-box-flex: 0;
  -ms-flex: 0 0 auto;
  flex: 0 0 auto;
}

.features .feature {
  cursor: pointer;
  margin-right: var(--spacing-4);
}

.features .feature:last-child {
  margin-right: 0;
}

.features .feature .feature__tooltip {
  position: absolute;
  z-index: -1;
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
  min-height: 20px;
  text-align: center;
  line-height: var(--line-height-2);
  color: var(--color-white);
  background-color: var(--color-naval-blue);
  visibility: hidden;
  opacity: 0;

  -webkit-transition: var(--transition-1);
  -o-transition: var(--transition-1);
  transition: var(--transition-1);
}

.features .feature:hover .feature__tooltip {
  z-index: 10;
  visibility: visible;
  opacity: 1;
}

.features .feature::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 7px 7px 0 7px;
  border-color: var(--color-naval-blue) transparent transparent transparent;
  visibility: hidden;
  opacity: 0;
  -webkit-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
          transform: translateX(-50%);
  -webkit-transition: var(--transition-1);
  -o-transition: var(--transition-1);
  transition: var(--transition-1);
}

.features .feature:hover::after {
  visibility: visible;
  opacity: 1;
}

.section__feature_explanation .feature__tooltip {
  display: none;
}



/* ------------------------------ */
/* ------------- Eco ------------ */
/* ------------------------------ */

.eco_info__content {
  position: relative;
}

.eco_info__certification {
  -ms-flex-preferred-size: 100%;
  flex-basis: 100%;
  max-width: 100%;
}

.eco_info__certification__info {
  line-height: var(--line-height-2);
}



/* ------------------------------ */
/* ----- Cookie notification ---- */
/* ------------------------------ */

.cookie_box {
  position: fixed;
  right: 0;
  z-index: 1026;
  width: 100%;
  background: var(--color-white);
  -webkit-box-shadow: var(--box-shadow-2);
          box-shadow: var(--box-shadow-2);
  -webkit-transition: bottom 1s cubic-bezier(0,.55,.45,1);
  -o-transition: bottom 1s cubic-bezier(0, .55, .45, 1);
  -o-transition: bottom 1s cubic-bezier(0,.55,.45,1);
  transition: bottom 1s cubic-bezier(0,.55,.45,1);
}
  
.cookie_box, .cookie_box.hide {
  bottom: -250px;
}
  
.cookie_box.is-active {
  bottom: 0;
}

.cookie_box__content a {
  border-bottom: 1px solid var(--color-black);
  -webkit-transition: opacity var(--transition-1);
  -o-transition: opacity var(--transition-1);
  transition: opacity var(--transition-1);;
}

.no-touchevents .cookie_box__content a:hover {
  opacity: var(--opacity-1);
}



/* ------------------------------ */
/* ----------- Seiten ----------- */
/* ------------------------------ */

/* AGB & Impressum */
.page-id-22 main h3, .page-id-21 main h3 {
  margin-top: var(--spacing-7);
}

.page-id-22 main h1 + h3, .page-id-21 main h1 + h3 {
  margin-top: var(--spacing-2);
}


/* Datenschutz */
.section--privacy a {
  word-break: break-all;
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 576px) {

  .section__text > .features {
    margin-bottom: var(--spacing-5);
  }

  .features .feature img {
    width: 50px;
    height: 50px;
  }

  .features .feature .feature__tooltip {
    bottom: 72px;
  }
  
  .features .feature:hover .feature__tooltip {
    bottom: 62px;
  }

  .features .feature::after {
    bottom: 66px;
  }

  .features .feature:hover::after {
    bottom: 56px;
  }

  .eco_info__content img {
    position: absolute;
    top: 0;
    left: 0;
  }

  .eco_info__content h3 {
    margin-top: 0;
  }

  /* Cookie */
  .cookie_box__button {
    margin-top: var(--spacing-1);
  }

}


@media all and (min-width: 768px) {

  .features .feature .feature__tooltip {
    min-width: 240px;
    padding: var(--spacing-3) var(--spacing-3) calc(var(--spacing-3) - 1px);
    font-size: var(--font-size-1);
  }

  .cookie_box {
    max-width: 550px;
  }

}


@media all and (min-width: 992px) {

  .section > div:not(.woocommerce_notice), .inside {
    padding-right: var(--spacing-6-6);
    padding-left: var(--spacing-6-6);
  }

  /* Tile */
  .section > div.section__tiles {
    padding-top: var(--spacing-8);
  }

  .tile__caption h3.tile__title {
      font-size: var(--font-size-5);
  }

  /* FAQ */
  .faqs_section {
    padding-top: var(--spacing-8);
  }

  .faqs_section + .faqs_section {
    margin-top: var(--spacing-5);
  }

  .faqs {
    margin-bottom: var(--spacing-7);
    padding-bottom: var(--spacing-5);
  }

}


@media all and (min-width: 1240px) {

  h1, .typography--h1 {
    margin-bottom: var(--spacing-6);
  }
  
  h2, .typography--h2, .typography--h2-small {
    margin-bottom: var(--spacing-5);
  }
  
  h3, .section__text--category h2, .typography--h3 {
    margin-bottom: var(--spacing-4);
  }

  main ol {
    padding-left: 34px;
  }

  main ul li {
    padding-left: 18px;
  }

  main section ul li::before {
    top: 12px;
  }


  /* Tile */
  .tile {
    height: 310px;
  }

  .tile__caption {
      right: var(--spacing-6);
      left: var(--spacing-6);
      bottom: var(--spacing-5);
  }

  .tile__caption h3.tile__title {
      padding-bottom: var(--spacing-1);
  }


  /* Eco */
  .eco_info__content {
    width: calc(100% - (498px + 2 * var(--spacing-4)));
  }

  .eco_info__content, .eco_info__certification__info {
    padding-left: 120px;
  }

  .eco_info__content__image {
    width: calc(498px + 2 * var(--spacing-4));
  }

  .eco_info__content__image img {
    max-width: 498px;
  }

  .eco_info__certification {
    padding-top: var(--spacing-6-6);
  }

  .eco_info__certification__info > div {
    margin-right: var(--spacing-5);
  }


  /* Cookie */
  .cookie_box {
    margin: 26px;
  }

  .cookie_box__container {
    padding: 18px 24px 24px;
  }

}


@media all and (min-width: 1400px) {

  .section:not(.section--site_cover):first-child {
    padding-top: calc(160px + var(--header-height));
  }

  .faq__content, .account__content {
    padding-left: var(--spacing-8);
  }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

  :root {
    --spacing-11: 140px;
    --spacing-10: 110px;
  }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

  :root {
    --font-size-9: 56px;
    --font-size-8: 47px;

    --spacing-11: 120px;
    --spacing-10: 100px;
  }

  .section:not(.section--site_cover):first-child {
    padding-top: calc(150px + var(--header-height));
  }

  .section:last-child {
    padding-bottom: var(--spacing-11);
  }

  .faq__content, .account__content {
    padding-left: var(--spacing-7);
  }

}


@media all and (max-width: 1239.98px) {

  /* Features */
  .features {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }

  /* Eco */
  .eco_info__content, .eco_info__content__image {
    width: 100%;
  }

  .eco_info__content__image {
    padding-top: var(--spacing-6);
  }

  .eco_info__certification {
    padding-top: var(--spacing-6-6);
  }

  .eco_info__certification__info img {
    width: auto;
  }

}


@media all and (max-width: 1239.98px) and (min-width: 576px) {

  :root {
    --font-size-3: 19px;
    --font-size-2: 15px;
    --font-size-1: 14px;
    --font-size-copy: 17px;

    --spacing-8: 56px;
    --spacing-7: 46px;
  }

  h1, .typography--h1 {
    margin-bottom: calc(var(--spacing-6) - 5px);
  }

  .section:last-child {
    padding-bottom: var(--spacing-11);
  }

  main ol {
    padding-left: 32px;
  }

  main ul li {
    padding-left: 16px;
  }

  main section ul li::before {
    top: 12px;
  }

  .size_chart__btn > svg {
    position: relative;
    top: 1px;
  }

  .eco_info__certification__info > div {
    max-width: calc(100% - 156px);
    padding-right: var(--spacing-5);
  }

}


@media all and (max-width: 1239.98px) and (min-width: 768px) {

  h2, .typography--h2, .typography--h2-small {
    margin-bottom: var(--spacing-4);
  }

  h3, .section__text--category h2, .typography--h3 {
    margin-bottom: 12px;
  }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

  :root {
    --font-size-9: 52px;
    --font-size-8: 44px;
    --font-size-7: 38px;
    --font-size-6: 32px;
    --font-size-5: 28px;
    --font-size-4: 24px;

    --spacing-11: 100px;
    --spacing-10: 85px;
    --spacing-9: 70px;

    --header-height: 70px;
    --logo-width: 114px;
    --logo-height: 130px;
  }

  .section:not(.section--site_cover):first-child {
    padding-top: calc(140px + var(--header-height));
  }


  /* Tile */
  .tile {
    height: 280px;
  }

  .tile__caption {
    right: var(--spacing-5);
    left: var(--spacing-5);
    bottom: var(--spacing-4);
  }

  .tile__caption h3.tile__title {
    padding-bottom: 2px;
  }


  /* Eco */
  .eco_info__content, .eco_info__certification__info, .eco_info__content__image {
    padding-left: 110px;
  }

  .eco_info__content img {
    width: 81px;
    height: auto;
  }

  .eco_info__certification__info img {
    height: 78px;
  }

  /* Cookie */
  .cookie_box {
    margin: 24px;
  }

  .cookie_box__container {
    padding: 14px 20px 21px;
  }

}


@media all and (max-width: 991.98px) {

  :root {
    --header-height: 80px;
    --logo-width: 160px;
    --logo-height: 80px;
  }

  .section > div:not(.woocommerce_notice), .inside {
    padding-right: var(--spacing-6-5);
    padding-left: var(--spacing-6-5);
  }

  .page-template-page-faq .section:not(.section--site_cover):first-child {
    padding-top: var(--header-height) !important;
  }

  .section > .account, .section > .faq {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

}


@media all and (max-width: 991.98px) and (min-width: 768px) { 

  .faq__content, .account__content {
    margin-top: var(--spacing-8);
  }

  .eco_info__content, .eco_info__certification__info, .eco_info__content__image {
    padding-left: 96px;
  }

  .eco_info__content img {
    width: 72px;
    height: auto;
  }

  .eco_info__certification__info img {
    height: 73px;
  }


  /* Cookie */
  .cookie_box {
    margin: 22px;
  }

  .cookie_box__container {
    padding: 14px 20px 21px;
  }

}


@media all and (max-width: 991.98px) and (min-width: 576px) { 
 
  :root {
    --font-size-6: 30px;
    --font-size-5: 26px;
    --font-size-4: 23px;

    --spacing-6-6: 36px;
    --spacing-6-5: 30px;
    --spacing-6: 26px;
  }

  .section:not(.section--site_cover):first-child {
    padding-top: calc(var(--spacing-9) + var(--header-height));
  }

  /* Teaser */
  .teasers_below.row {
    margin-right: calc(var(--spacing-3)* -1);
    margin-left: calc(var(--spacing-3)* -1);
  }

  .teasers_below.row > div {
      padding-right: var(--spacing-3);
      padding-left: var(--spacing-3);
  }


  /* Tile */
  .tile__caption h3.tile__title {
    font-size: var(--font-size-6);
  }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

  :root {
    --font-size-9: 46px;
    --font-size-8: 40px;
    --font-size-7: 36px;

    --spacing-11: 90px;
    --spacing-10: 75px;
    --spacing-9: 65px;
  }

  /* Tile */
  .section > div.section__tiles {
    padding-top: var(--spacing-7);
  }

  .tile {
    height: 350px;
  }

  .tile__caption {
    right: var(--spacing-5);
    left: var(--spacing-5);
    bottom: var(--spacing-4);
  }

  .tile__caption h3.tile__title {
    padding-bottom: 2px;
  }

}


@media all and (max-width: 767.98px) {

  .section__teasers_below .teaser_below + .teaser_below {
    margin-top: var(--spacing-8);
  }

  .features .feature .feature__tooltip {
    padding: calc(var(--spacing-2) + 1px) var(--spacing-3) var(--spacing-2);
    font-size: 13px;
  }

  /* Cookie */
  .cookie_box {
    max-width: unset;
    width: 100%;
  }

  .cookie_box__container {
    padding: 15px var(--spacing-6-5) 20px;
  }

}


@media all and (max-width: 767.98px) and (min-width: 576px) {  
  
  :root {
    --font-size-9: 44px;
    --font-size-8: 38px;
    --font-size-7: 34px;

    --spacing-11: 84px;
    --spacing-10: 70px;
    --spacing-9: 62px;
    --spacing-8: 54px;
    --spacing-7: 44px;
  }

  h2, .typography--h2, .typography--h2-small {
    margin-bottom: calc(var(--spacing-4) - 2px);
  }

  h3, .section__text--category h2, .typography--h3 {
    margin-bottom: 10px;
  }

  
  /* Tile */
  .section > div.section__tiles {
    padding-top: var(--spacing-7);
  }

  .tile {
    height: 250px;
  }

  .tile__caption {
    right: var(--spacing-4);
    left: var(--spacing-4);
    bottom: var(--spacing-4);
  }

  .features .feature .feature__tooltip {
    min-width: 205px;
  }


  /* Eco */
  .eco_info__content, .eco_info__certification__info, .eco_info__content__image {
    padding-left: 84px;
  }

  .eco_info__content img {
    width: 63px;
    height: auto;
  }

  .eco_info__certification__info img {
    height: 73px;
  }

}


@media all and (max-width: 575.98px) {

  :root {
    --font-size-3: 18px;
    --font-size-2: 15px;
    --font-size-1: 14px;
    --font-size-copy: 16px;

    --spacing-11: 60px;
    --spacing-10: 60px;
    --spacing-9: 52px;
    --spacing-8: 46px;
    --spacing-7: 36px;
    --spacing-6-6: 28px;
    --spacing-6-5: 24px;
    --spacing-6: 20px;
    --spacing-5: 16px;
    --spacing-4: 12px;
  }

  h1, .typography--h1 {
    margin-bottom: calc(var(--spacing-6) - 5px);
  }
  
  h2, .typography--h2, .typography--h2-small {
    margin-bottom: var(--spacing-4);
  }
  
  h3, .section__text--category h2, .typography--h3 {
    margin-bottom: 10px;
  }

  .section:not(.section--site_cover):first-child {
    padding-top: calc(var(--spacing-9) + var(--header-height));
  }

  .section--site_cover + .section {
    padding-top: var(--spacing-9);
  }

  .section:last-child {
    padding-bottom: calc(var(--spacing-11) + 10px);
  }

  main ol {
    padding-left: 28px;
  }

  main ul li {
    padding-left: 14px;
  }

  main section ul li::before {
    top: 11px;
    width: 7px;
  }


  /* Tile */
  .section > div.section__tiles {
    padding-top: var(--spacing-7);
  }

  .tile {
    height: 190px;
  }

  .size_chart__btn > svg {
    position: relative;
    top: 1px;
  }


  /* Features */
  .section__text > .features {
    margin-bottom: var(--spacing-6);
  }

  .features .feature:first-child .feature__tooltip {
    left: 0;
  }

  .features .feature:last-child .feature__tooltip {
    left: auto;
    right: 0;
  }


  /* Eco */
  .eco_info__content {
    padding-right: 0;
    padding-left: 0;
  }

  .eco_info__content h3 {
    margin-top: var(--spacing-4);
  }

  .eco_info__content img {
    width: 63px;
    height: auto;
  }

  .eco_info__certification__info {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    text-align: center;
  }

  .eco_info__certification__info > div {
    width: 100%;
    margin-bottom: var(--spacing-3);
  }

  .eco_info__certification__info img {
    height: 58px;
  }


  /* Cookie */
  .cookie_box__content {
    font-size: var(--font-size-2);
    margin-bottom: var(--spacing-2);
  }

}


@media all and (max-width: 575.98px) and (min-width: 360px) {

  .tile__caption {
    right: 14px;
    left: 14px;
    bottom: 14px;
  }

  .tile__caption h3.tile__title {
    font-size: var(--font-size-4);
  }

  .features .feature img {
    width: 42px;
    height: 42px;
  }

  .features .feature .feature__tooltip {
    bottom: 58px;
  }

  .features .feature::after {
    bottom: 52px;
  }

  .features .feature:hover .feature__tooltip {
    bottom: 52px;
  }

  .features .feature:hover::after {
    bottom: 46px;
  }

}


@media all and (max-width: 575.98px) and (min-width: 390px) {

  :root {
    --font-size-4: 22px;
  }

  .features .feature .feature__tooltip {
    min-width: 180px;
  }

}


@media all and (max-width: 575.98px) and (min-width: 414px) {  

  :root {
    --font-size-9: 38px;
    --font-size-8: 34px;
    --font-size-7: 30px;
    --font-size-6: 28px;
    --font-size-5: 26px;
  }

  .features .feature:first-child .feature__tooltip {
    -webkit-transform: translateX(-34px);
        -ms-transform: translateX(-34px);
            transform: translateX(-34px);
  }

  .features .feature:last-child .feature__tooltip {
    -webkit-transform: translateX(34px);
        -ms-transform: translateX(34px);
            transform: translateX(34px);
  }

}


@media all and (max-width: 413.98px) and (min-width: 390px) {

  :root {
    --font-size-9: 36px;
    --font-size-8: 33px;
    --font-size-7: 29px;
    --font-size-6: 27px;
    --font-size-5: 25px;
  }

  .features .feature:first-child .feature__tooltip {
    -webkit-transform: translateX(-20px);
        -ms-transform: translateX(-20px);
            transform: translateX(-20px);
  }

  .features .feature:last-child .feature__tooltip {
    -webkit-transform: translateX(20px);
        -ms-transform: translateX(20px);
            transform: translateX(20px);
  }

}


@media all and (max-width: 389.98px) {

  :root {
    --font-size-4: 21px;

    --spacing-11: 56px;
    --spacing-10: 56px;
    --spacing-9: 48px;
    --spacing-8: 42px;
    --spacing-7: 32px;
    --spacing-6-6: 24px;
    --spacing-6-5: 20px;
  }
  
  h1, h2, h3, h4 {
    word-break: break-word;
  }

  h3 {
    margin-top: var(--spacing-7);
  }

  p.lead {
    font-size: calc(var(--font-size-4) - 1px);
  }

  .features .feature {
    margin-right: var(--spacing-3);
  }

  .features .feature:first-child .feature__tooltip {
    -webkit-transform: translateX(-14px);
        -ms-transform: translateX(-14px);
            transform: translateX(-14px);
  }

  .features .feature:last-child .feature__tooltip {
    -webkit-transform: translateX(14px);
        -ms-transform: translateX(14px);
            transform: translateX(14px);
  }

  .features .feature .feature__tooltip {
    min-width: 160px;
  }

}


@media all and (max-width: 389.98px) and (min-width: 360px) {

  :root {
    --font-size-9: 36px;
    --font-size-8: 33px;
    --font-size-7: 29px;
    --font-size-6: 27px;
    --font-size-5: 25px;
  }

}


@media all and (max-width: 359.98px) {

  :root {
    --font-size-9: 34px;
    --font-size-8: 32px;
    --font-size-7: 28px;
    --font-size-6: 26px;
    --font-size-5: 24px;
  }

  .tile__caption {
    right: 10px;
    left: 10px;
    bottom: 10px;
  }

  .tile__caption h3.tile__title {
    font-size: calc(var(--font-size-4) - 1px);
  }

  .features .feature {
    margin-right: var(--spacing-2);
  }

  .features .feature img {
    width: 38px;
    height: 38px;
  }

  .features .feature .feature__tooltip {
    bottom: 54px;
  }

  .features .feature::after {
    bottom: 48px;
  }

  .features .feature:hover .feature__tooltip {
    bottom: 48px;
  }

  .features .feature:hover::after {
    bottom: 42px;
  }

}