:root {
  --font-default: "Strawford", sans-serif;
  --font-headline: "Strawford", sans-serif;
  --grid-columns: 12;
  --grid-width-max: 1920px;
  --grid-color: 190, 100%, 50%;
  --color-blue-1: #222D3B;
  --color-green-1: #3EFFB0;
  --color-red-1: #CB1F1F;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey-border: #efefef;
  --color-grey-search: #F6F6F6;
}
:root {
  --grid-gutter: 10px;
}
@media only screen and (min-width: 375px) {
  :root {
    --grid-gutter: calc(10px + 6 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  :root {
    --grid-gutter: 16px;
  }
}
:root {
  --grid-offset: 20px;
}
@media only screen and (min-width: 375px) {
  :root {
    --grid-offset: calc(20px + 20 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  :root {
    --grid-offset: 40px;
  }
}

:root {
  --g-media_query: "viewport: xs";
}

@media (min-width: 768px) {
  :root {
    --g-media_query: "viewport: s";
  }
}
@media (min-width: 1024px) {
  :root {
    --g-media_query: "viewport: m";
  }
}
@media (min-width: 1366px) {
  :root {
    --g-media_query: "viewport: l";
  }
}
@media (min-width: 1920px) {
  :root {
    --g-media_query: "viewport: xl";
  }
}
:root {
  --grid-color-line: hsla(var(--grid-color), 0.2);
  --grid-color-column: hsla(var(--grid-color), 0.2);
  --grid-color-gutter: transparent;
  --grid-color-baseline: hsla(var(--grid-color), 0.2);
  --line-thickness: 1px;
  --column-start: 0;
  --column-start-line: var(--line-thickness);
  --column-end: calc((100% / var(--grid-columns)) - var(--grid-gutter) - var(--line-thickness));
  --column-end-line: calc((100% / var(--grid-columns)) - var(--grid-gutter));
  --gutter-end: calc(100% / var(--grid-columns));
  --g-gradient-column:
          repeating-linear-gradient(
                          to right,
                          var(--grid-color-line) var(--column-start),
                          var(--grid-color-line) var(--column-start-line),
                          var(--grid-color-column) var(--column-start-line),
                          var(--grid-color-column) var(--column-end),
                          var(--grid-color-line) var(--column-end),
                          var(--grid-color-line) var(--column-end-line),
                          var(--grid-color-gutter) var(--column-end-line),
                          var(--grid-color-gutter) var(--gutter-end)
          );
  --g-gradient-baseline:
          repeating-linear-gradient(
                          to bottom,
                          var(--grid-color-baseline),
                          var(--grid-color-baseline) var(--line-thickness),
                          transparent var(--line-thickness),
                          transparent 20px
          );
}

html.helper-grid {
  display: flex;
  z-index: 1000;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: var(--document-height, auto);
  justify-content: center;
}

.helper-grid-toggle::after {
  display: inline-block;
  content: var(--g-media_query);
  bottom: 0;
  right: 0;
  white-space: pre;
  text-transform: uppercase;
  background-color: #0c88b4;
  color: #fff;
  padding: 4px 8px;
  cursor: pointer;
  z-index: 9999999;
  position: fixed;
  font-size: 14px;
}

html.helper-grid::after {
  position: fixed;
  z-index: 1000;
  content: "";
  width: calc(100% - 2 * var(--grid-offset));
  max-width: var(--grid-width-max);
  min-height: 100vh;
  background-image: var(--g-gradient-column), var(--g-gradient-baseline);
  background-position: 0 0;
  background-size: calc(100% + var(--grid-gutter)) 100vh;
  pointer-events: none;
}

html.helper-grid body { /* todo: find another way, leads to errors in certain layouts */
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
}

.otgs-development-site-front-end {
  display: none;
}

/* Document
 * ========================================================================== */
/**
 * 1. Add border box sizing in all browsers (opinionated).
 * 2. Backgrounds do not repeat by default (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box; /* 1 */
  background-repeat: no-repeat; /* 2 */
}

/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}

/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Breaks words to prevent overflow in all browsers (opinionated).
 * 4. Use a 4-space tab width in all browsers (opinionated).
 * 5. Remove the grey highlight on links in iOS (opinionated).
 * 6. Prevent adjustments of font size after orientation changes in iOS.
 */
:where(:root) {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */
  overflow-wrap: break-word; /* 3 */
  -moz-tab-size: 4; /* 4 */
  tab-size: 4; /* 4 */
  -webkit-tap-highlight-color: transparent; /* 5 */
  -webkit-text-size-adjust: 100%; /* 6 */
  text-size-adjust: 100%; /* 6 */
}

/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
:where(body) {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */
:where(h1) {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, and Safari.
 */
:where(dl, ol, ul) :where(dl, ol, ul) {
  margin: 0;
}

/**
 * 1. Correct the inheritance of border color in Firefox.
 * 2. Add the correct box sizing in Firefox.
 */
:where(hr) {
  color: inherit; /* 1 */
  height: 0; /* 2 */
}

/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
:where(nav) :where(ol, ul) {
  list-style-type: none;
  padding: 0;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 * 3. Prevent overflow of the container in all browsers (opinionated).
 */
:where(pre) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
  overflow: auto; /* 3 */
}

/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Safari.
 */
:where(abbr[title]) {
  text-decoration: underline;
  text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
:where(b, strong) {
  font-weight: 700;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
:where(code, kbd, samp) {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
:where(small) {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
:where(audio, canvas, iframe, img, svg, video) {
  vertical-align: middle;
}

/**
 * Remove the border on iframes in all browsers (opinionated).
 */
:where(iframe) {
  border-style: none;
}

/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
:where(svg:not([fill])) {
  fill: currentColor;
}

/* Tabular data
 * ========================================================================== */
/**
 * 1. Collapse border spacing in all browsers (opinionated).
 * 2. Correct table border color in Chrome, Edge, and Safari.
 * 3. Remove text indentation from table contents in Chrome, Edge, and Safari.
 */
:where(table) {
  border-collapse: collapse; /* 1 */
  border-color: currentColor; /* 2 */
  text-indent: 0; /* 3 */
}

/* Forms
 * ========================================================================== */
/**
 * Remove the margin on controls in Safari.
 */
:where(button, input, select) {
  margin: 0;
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */
:where(button, [type=button i], [type=reset i], [type=submit i]) {
  -webkit-appearance: button;
}

/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
:where(fieldset) {
  border: 1px solid #a0a0a0;
}

/**
 * Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
:where(progress) {
  vertical-align: baseline;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 3. Change the resize direction in all browsers (opinionated).
 */
:where(textarea) {
  margin: 0; /* 1 */
  resize: vertical; /* 3 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */
:where([type=search i]) {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */
::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */
::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

/* Interactive
 * ========================================================================== */
/*
 * Add the correct styles in Safari.
 */
:where(dialog) {
  background-color: white;
  border: solid;
  color: black;
  height: -moz-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: fit-content;
}

:where(dialog:not([open])) {
  display: none;
}

/*
 * Add the correct display in Safari.
 */
:where(details > summary:first-of-type) {
  display: list-item;
}

/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
:where([aria-busy=true i]) {
  cursor: progress;
}

/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
:where([aria-disabled=true i], [disabled]) {
  cursor: not-allowed;
}

/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
:where([aria-hidden=false i][hidden]) {
  display: initial;
}

:where([aria-hidden=false i][hidden]:not(:focus)) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}

/*
 * agency defaults
 *
 */
a {
  color: inherit;
  text-decoration: none;
}

ul {
  margin: 0;
  padding: 0;
}

nav ul {
  list-style-type: none;
}

img {
  width: 100%;
  height: auto;
}

/*
 * todo: check if paracticable
 */
button, [type=button i], [type=reset i], [type=submit i] {
  background: transparent;
  border: none;
  border-radius: unset;
  padding: 0;
}

@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 100;
  src: url("../fonts/strawford/strawford-thin-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-thin-webfont.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 200;
  src: url("../fonts/strawford/strawford-extralight-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-extralight-webfont.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/strawford/strawford-light-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-light-webfont.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/strawford/strawford-regular-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-regular-webfont.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/strawford/strawford-medium-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-medium-webfont.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/strawford/strawford-bold-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-bold-webfont.woff") format("woff");
}
@font-face {
  font-display: swap;
  font-family: "Strawford";
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/strawford/strawford-black-webfont.woff2") format("woff2"), url("../fonts/strawford/strawford-black-webfont.woff") format("woff");
}
@font-face {
  font-family: "icons";
  src: url("../fonts/icons/icons.ttf?a25q55") format("truetype"), url("../fonts/icons/icons.woff?a25q55") format("woff"), url("../fonts/icons/icons.svg?a25q55#icons") format("svg");
  font-weight: normal;
  font-style: normal;
  font-display: block;
}
.icon {
  font-family: "icons" !important;
  speak: never;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-transform: none;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-shopping-cart-full:before {
  content: "\e919";
}

.icon-add:before {
  content: "\e900";
}

.icon-arrow-down-1:before {
  content: "\e901";
}

.icon-arrow-left-1:before {
  content: "\e902";
}

.icon-arrow-right-1:before {
  content: "\e903";
}

.icon-arrow-up-1:before {
  content: "\e904";
}

.icon-award-ribbon-star-1:before {
  content: "\e905";
}

.icon-bin-2:before {
  content: "\e906";
}

.icon-check-badge:before {
  content: "\e907";
}

.icon-clothes-design-tape-measure:before {
  content: "\e908";
}

.icon-delete:before {
  content: "\e909";
}

.icon-delivery-truck-2:before {
  content: "\e90a";
}

.icon-delivery-truck-3:before {
  content: "\e90b";
}

.icon-ecology-globe-message:before {
  content: "\e90c";
}

.icon-ecology-globe-message-1:before {
  content: "\e90d";
}

.icon-ecology-globe-nature:before {
  content: "\e90e";
}

.icon-email-action-at:before {
  content: "\e90f";
}

.icon-family-heart:before {
  content: "\e910";
}

.icon-keyboard-arrow-down:before {
  content: "\e911";
}

.icon-keyboard-arrow-left:before {
  content: "\e912";
}

.icon-keyboard-arrow-right:before {
  content: "\e913";
}

.icon-keyboard-arrow-up:before {
  content: "\e914";
}

.icon-laundry-machine-2:before {
  content: "\e915";
}

.icon-love-it:before {
  content: "\e916";
}

.icon-messages-bubble-square-text:before {
  content: "\e917";
}

.icon-messaging-whatsapp:before {
  content: "\e918";
}

.icon-pencil-1:before {
  content: "\e91a";
}

.icon-phone:before {
  content: "\e91b";
}

.icon-rating-half-star:before {
  content: "\e91c";
}

.icon-rating-star:before {
  content: "\e91d";
}

.icon-remove:before {
  content: "\e91e";
}

.icon-search:before {
  content: "\e91f";
}

.icon-single-man-shield:before {
  content: "\e921";
}

.icon-single-neutral:before {
  content: "\e922";
}

.icon-social-instagram:before {
  content: "\e923";
}

.icon-social-media-facebook-1:before {
  content: "\e924";
}

.icon-technology-privacy-consent-profile-browser-shield:before {
  content: "\e926";
}

.icon-tiktok-2:before {
  content: "\e927";
}

body {
  color: var(--color-black);
  font-family: var(--font-default);
  font-weight: 400;
  line-height: 1.28;
  overflow-x: hidden;
  background-color: var(--color-white);
}
body {
  font-size: 16px;
}
@media only screen and (min-width: 375px) {
  body {
    font-size: calc(16px + 4 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  body {
    font-size: 20px;
  }
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-headline);
  line-height: 1.44;
  font-weight: 400;
  margin-bottom: 0;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-size: 22px;
}
@media only screen and (min-width: 375px) {
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: calc(22px + 14 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    font-size: 36px;
  }
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  margin-top: 20px;
}
@media only screen and (min-width: 375px) {
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: calc(20px + 20 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    margin-top: 40px;
  }
}

nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
}

.noscroll {
  overflow-y: hidden;
}

.header {
  position: sticky;
  top: 0;
  z-index: 30;
  background-color: var(--color-white);
}
.header {
  padding-left: var(--grid-offset);
  padding-right: var(--grid-offset);
}
.header__inner {
  padding: 10px 0 5px;
  display: flex;
  flex-flow: row wrap;
  align-items: center;
}
.header__inner {
  max-width: var(--grid-width-max);
  margin: 0 auto;
}
.header__break {
  order: 6;
  width: 100%;
  margin: 10px 0 5px;
}
.header__break .line {
  height: 1px;
  background-color: var(--color-grey-border);
  width: 200vw;
  transform: translateX(-50%);
}
.header__logo {
  order: 1;
  margin-right: auto;
}
.header__logo img {
  max-height: 25px;
  width: auto;
}
.header__account {
  order: 3;
}
.header__wishlist {
  order: 4;
}
.header__cart {
  order: 5;
}
.header__cart .icon {
  position: relative;
}
.header__cart .icon .count {
  position: absolute;
  top: 0;
  right: 0;
  background-color: var(--color-green-1);
  border-radius: 50%;
  font-size: 12px;
  line-height: 1;
  width: 20px;
  aspect-ratio: 1;
  transform: translate(50%, -50%);
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-default);
}
.header .icon {
  font-size: 18px;
}
.header__account, .header__wishlist, .header__cart {
  margin-left: 16px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
}
.header__account a, .header__wishlist a, .header__cart a {
  display: flex;
  text-align: center;
  justify-content: center;
  width: 100%;
}
.header__account span, .header__wishlist span, .header__cart span {
  display: none;
  font-size: 14px;
  margin-top: 4px;
}
.header__toggle {
  order: 8;
}
.header__toggle button {
  width: 26px;
  height: 18px;
  display: flex;
  flex-flow: column;
  justify-content: space-between;
  cursor: pointer;
}
.header__toggle button span {
  width: 100%;
  background-color: #000000;
  height: 2px;
}
.header__toggle--close button span {
  position: relative;
}
.header__toggle--close button span:first-child {
  top: 50%;
  transform: rotate(45deg) translateY(-1px);
}
.header__toggle--close button span:last-child {
  bottom: 50%;
  transform: rotate(-45deg) translateY(1px);
}
.header__search {
  order: 9;
  margin-left: 20px;
  flex-grow: 1;
}
.header__search form {
  background-color: var(--color-grey-border);
  height: 30px;
  border-radius: 4px;
  padding: 5px 15px;
  display: flex;
  flex-flow: row nowrap;
}
.header__search form input[type=search] {
  background: none;
  border: none;
  height: 20px;
  padding: 0;
  flex-grow: 1;
}
.header__search form input[type=search]::placeholder {
  color: var(--color-black);
  opacity: 1;
}
.header__search form button {
  cursor: pointer;
}
.header__search form button .icon {
  margin-left: 16px;
  font-size: 18px;
}

@media (min-width: 1024px) {
  .header__inner {
    padding: 20px 0 0;
  }
  .header__logo {
    margin-right: auto;
  }
  .header__logo img {
    max-height: 40px;
    width: auto;
  }
  .header__break {
    width: 100%;
    margin: 20px 0 0;
  }
  .header__cart, .header__account, .header__wishlist {
    margin-left: 32px;
  }
  .header__cart span, .header__account span, .header__wishlist span {
    display: block;
  }
  .header__search {
    order: 2;
    margin-left: 32px;
    flex-grow: 0;
    width: 400px;
  }
  .header__search form {
    height: 40px;
    border-radius: 5px;
    padding: 10px 20px;
    display: flex;
    flex-flow: row nowrap;
  }
  .header__toggle {
    display: none;
  }
}
@media (max-width: 1023.98px) {
  .header__navigation {
    background-color: var(--color-white);
    position: fixed;
    height: 100%;
    max-height: 100%;
    overflow: hidden;
    top: 46px;
    left: 100%;
    right: 0;
    bottom: 0;
    z-index: 10;
    width: 100%;
    display: block;
    opacity: 0;
    transition: opacity 0.4s ease, left 0s 0.2s;
    font-weight: 500;
  }
  .header__navigation.active {
    transition: opacity 0.4s ease, left 0s;
    opacity: 1;
    left: 0;
  }
  .header__navigation_inner {
    height: calc(100% - 80px);
    position: relative;
  }
  .header__navigation__scrollable {
    overflow-y: auto;
    height: 100%;
    display: flex;
    flex-flow: column;
  }
  .header__navigation__scrollable .navigation__header {
    height: 64px;
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    font-size: 18px;
    padding: 12px 0;
    line-height: 1;
  }
  .header__navigation__scrollable .navigation__header {
    padding-left: var(--grid-offset);
    padding-right: var(--grid-offset);
  }
  .header__navigation__scrollable .header__navigation__scrollable_inner {
    width: 100%;
    height: 100%;
    position: relative;
    overflow-y: auto;
    flex-grow: 1;
  }
  .header__navigation__scrollable .menu, .header__navigation__scrollable .sub-menu {
    position: absolute;
    inset: 0;
    z-index: 0;
    left: 100%;
    background-color: var(--color-white);
    transition: left 0.2s ease;
  }
  .header__navigation__scrollable .menu, .header__navigation__scrollable .sub-menu {
    padding-left: var(--grid-offset);
    padding-right: var(--grid-offset);
  }
  .header__navigation__scrollable .menu, .header__navigation__scrollable .sub-menu.active {
    z-index: 1;
    left: 0;
  }
  .header__navigation__scrollable .menu li, .header__navigation__scrollable .submenu li {
    display: flex;
    flex-flow: row nowrap;
    border-top: 1px solid var(--color-grey-border);
  }
  .header__navigation__scrollable .menu li:last-child, .header__navigation__scrollable .submenu li:last-child {
    border-bottom: 1px solid var(--color-grey-border);
  }
  .header__navigation__scrollable .menu li a, .header__navigation__scrollable .submenu li a {
    flex-grow: 1;
    display: block;
    padding: 16px 0;
    font-size: 18px;
  }
  .header__navigation__scrollable .menu li i, .header__navigation__scrollable .submenu li i {
    border-left: 1px solid var(--color-grey-border);
    width: 32px;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    cursor: pointer;
  }
  .header__navigation__scrollable .menu .sub-menu-parent-title, .header__navigation__scrollable .submenu .sub-menu-parent-title {
    display: flex;
    flex-flow: row nowrap;
    justify-content: space-between;
    cursor: pointer;
  }
  .header__navigation__scrollable .menu .sub-menu-parent-title i, .header__navigation__scrollable .submenu .sub-menu-parent-title i {
    border-left: 0;
    justify-content: flex-start;
  }
  .header__navigation__scrollable .menu .sub-menu-parent-title span, .header__navigation__scrollable .submenu .sub-menu-parent-title span {
    padding: 16px 0;
    font-size: 18px;
    text-align: center;
    display: block;
    flex-grow: 1;
    padding-right: 32px;
  }
  .mobile-primary {
    height: 100%;
  }
  .mobile-primary > div {
    position: relative;
    overflow-x: hidden;
    height: 100%;
  }
  .mobile-secondary {
    display: none;
  }
  .mobile-secondary a {
    font-weight: 300;
  }
  .header__navigation.navigation--seconday {
    display: none;
  }
}
@media (min-width: 1024px) {
  .header__navigation {
    display: flex;
    flex-flow: row nowrap;
    order: 8;
  }
  .header__navigation .navigation__header {
    display: none;
  }
  .header__navigation .mobile-secondary {
    display: none;
  }
  .header__navigation ul {
    display: flex;
    flex-flow: row nowrap;
  }
  .header__navigation ul li {
    margin-left: 40px;
  }
  .header__navigation ul li:first-child {
    margin-left: 0;
  }
  .header__navigation ul li i {
    display: none;
  }
  .header__navigation ul li a {
    display: inline-flex;
    flex-flow: row nowrap;
    font-size: 18px;
    line-height: 60px;
  }
  .header__navigation ul li a:hover {
    color: var(--color-green-1);
  }
  .header__navigation ul li.wpml-ls-first-item {
    position: relative;
  }
  .header__navigation ul li.wpml-ls-first-item img {
    width: 24px;
    height: auto;
  }
  .header__navigation ul li.wpml-ls-first-item .wpml-ls-native {
    margin-left: 12px;
  }
  .header__navigation ul li.wpml-ls-first-item .wpml-ls-item {
    margin: 0;
  }
  .header__navigation ul li.wpml-ls-first-item .wpml-ls-item a {
    display: inline-flex;
    flex-flow: row nowrap;
    line-height: 40px;
  }
  .header__navigation ul li.wpml-ls-first-item ul {
    position: absolute;
    right: 0;
    top: calc(100% - 1px);
    display: flex;
    flex-flow: column;
    opacity: 0;
    visibility: hidden;
  }
  .header__navigation ul li.wpml-ls-first-item:hover ul {
    opacity: 1;
    visibility: visible;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu {
    position: absolute;
    left: 0;
    top: calc(100% - 1px);
    opacity: 0;
    visibility: hidden;
    background-color: rgba(0, 0, 0, 0.5);
    width: 100%;
    height: calc(100vh - 100%);
    display: block;
    border-top: 1px solid var(--color-grey-border);
    pointer-events: none;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background {
    pointer-events: all;
    background: var(--color-white);
    width: 100%;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background {
    padding-left: var(--grid-offset);
    padding-right: var(--grid-offset);
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background {
    padding-bottom: 48px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background {
    padding-bottom: calc(48px + 48 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background {
    padding-bottom: 96px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width {
    width: 100%;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width {
    max-width: var(--grid-width-max);
    margin: 0 auto;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul {
    display: flex;
    flex-flow: row wrap;
    margin-left: calc(var(--grid-gutter) / 2 * -1);
    margin-right: calc(var(--grid-gutter) / 2 * -1);
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li {
    margin-left: 0;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 2) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    line-height: 1;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    font-size: 18px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    font-size: calc(18px + 10 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    font-size: 28px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    margin-top: 24px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    margin-top: calc(24px + 24 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a {
    margin-top: 48px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > a:hover {
    color: var(--color-green-1);
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul {
    margin: 0;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li {
    width: 100%;
    margin: 0;
    word-wrap: break-word;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li {
    margin-top: 10px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li {
    margin-top: calc(10px + 10 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li {
    margin-top: 20px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li a {
    display: block;
    line-height: 1.4;
    word-wrap: break-word;
    margin-top: 0;
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li a {
    font-size: 16px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li a {
    font-size: calc(16px + 4 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li a {
    font-size: 20px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li a:hover {
    color: var(--color-green-1);
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li:first-child {
    margin-top: 24px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li:first-child {
    margin-top: calc(24px + 24 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li:first-child {
    margin-top: 48px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul > li > ul > li:hover > a {
    color: var(--color-green-1);
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul li.all-link a {
    line-height: 2;
    border-bottom: 2px solid var(--color-black);
  }
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul li.all-link a {
    font-size: 14px;
  }
}
@media only screen and (min-width: 1024px) and (min-width: 375px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul li.all-link a {
    font-size: calc(14px + 4 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1024px) and (min-width: 1920px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul li.all-link a {
    font-size: 18px;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li > .sub-menu .sub-menu-background .sub-menu-width ul li.all-link a:hover {
    border-bottom: 2px solid var(--color-green-1);
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--primary ul.menu > li:hover .sub-menu {
    opacity: 1;
    visibility: visible;
  }
}
@media (min-width: 1024px) {
  .header__navigation.navigation--seconday {
    margin-left: auto;
  }
}
@media (min-width: 1024px) {
  .sub-menu-parent-title {
    display: none;
  }
}
.footer {
  border-top: 1px solid var(--color-grey-border);
}
.footer {
  padding-left: var(--grid-offset);
  padding-right: var(--grid-offset);
}
.footer__inner {
  max-width: var(--grid-width-max);
  margin: 0 auto;
}
.footer__logo {
  display: flex;
  justify-content: center;
}
.footer__logo {
  padding-top: 96px;
}
@media only screen and (min-width: 375px) {
  .footer__logo {
    padding-top: calc(96px + 32 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .footer__logo {
    padding-top: 128px;
  }
}
.footer__logo {
  padding-bottom: 96px;
}
@media only screen and (min-width: 375px) {
  .footer__logo {
    padding-bottom: calc(96px + -48 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .footer__logo {
    padding-bottom: 48px;
  }
}
.footer__logo a, .footer__logo span {
  width: 128px;
}
.footer__widgets {
  padding-top: 16px;
}
.footer__widgets {
  display: flex;
  flex-flow: row wrap;
  margin-left: calc(var(--grid-gutter) / 2 * -1);
  margin-right: calc(var(--grid-gutter) / 2 * -1);
}
.footer__widget_column {
  min-height: 1px;
}
.footer__widget_column {
  width: 1px;
  min-width: calc((100% / var(--grid-columns) * 12) - var(--grid-gutter) - 0.1px);
  margin-right: calc(var(--grid-gutter) / 2);
  margin-left: calc(var(--grid-gutter) / 2);
}
.footer__widget_column.column-1, .footer__widget_column.column-2, .footer__widget_column.column-3, .footer__widget_column.column-4 {
  width: 1px;
  min-width: calc((100% / var(--grid-columns) * 6) - var(--grid-gutter) - 0.1px);
  margin-right: calc(var(--grid-gutter) / 2);
  margin-left: calc(var(--grid-gutter) / 2);
}

@media (min-width: 768px) {
  .footer__widget_column.column-5 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 12) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-6, .footer__widget_column.column-7, .footer__widget_column.column-8, .footer__widget_column.column-9, .footer__widget_column.column-10 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 6) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
}
@media (min-width: 1024px) {
  .footer__widget_column {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 4) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-1, .footer__widget_column.column-2, .footer__widget_column.column-3, .footer__widget_column.column-4 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 4) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-5, .footer__widget_column.column-6, .footer__widget_column.column-7, .footer__widget_column.column-8, .footer__widget_column.column-9, .footer__widget_column.column-10 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 4) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-5 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 8) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
}
@media (min-width: 1366px) {
  .footer__widget_column.column-1, .footer__widget_column.column-2, .footer__widget_column.column-3, .footer__widget_column.column-4, .footer__widget_column.column-5, .footer__widget_column.column-6, .footer__widget_column.column-7, .footer__widget_column.column-8, .footer__widget_column.column-9, .footer__widget_column.column-10 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 2.4) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-9 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 2.4) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc((100% / var(--grid-columns) * 2.4) + var(--grid-gutter) / 2);
  }
}
@media (min-width: 1920px) {
  .footer__widget_column.column-1, .footer__widget_column.column-2, .footer__widget_column.column-3, .footer__widget_column.column-4, .footer__widget_column.column-5, .footer__widget_column.column-6, .footer__widget_column.column-7, .footer__widget_column.column-8, .footer__widget_column.column-9, .footer__widget_column.column-10 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 2) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc(var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-1, .footer__widget_column.column-6 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 2) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc((100% / var(--grid-columns) * 1) + var(--grid-gutter) / 2);
  }
  .footer__widget_column.column-9 {
    width: 1px;
    min-width: calc((100% / var(--grid-columns) * 2) - var(--grid-gutter) - 0.1px);
    margin-right: calc(var(--grid-gutter) / 2);
    margin-left: calc((100% / var(--grid-columns) * 2) + var(--grid-gutter) / 2);
  }
}
.block {
  margin-top: 96px;
}
@media only screen and (min-width: 375px) {
  .block {
    margin-top: calc(96px + 96 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .block {
    margin-top: 192px;
  }
}
.block__inner {
  padding-left: var(--grid-offset);
  padding-right: var(--grid-offset);
}
.block__width {
  max-width: var(--grid-width-max);
  margin: 0 auto;
}
.block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
  margin-top: 0;
  text-transform: uppercase;
  font-weight: 500;
}
.block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
  font-size: 22px;
}
@media only screen and (min-width: 375px) {
  .block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
    font-size: calc(22px + 8 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
    font-size: 30px;
  }
}
.block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
  line-height: 30px;
}
@media only screen and (min-width: 375px) {
  .block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
    line-height: calc(30px + 10 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .block h1, .block h2, .block h3, .block h4, .block h5, .block h6, .block .h1, .block .h2, .block .h3, .block .h4, .block .h5, .block .h6 {
    line-height: 40px;
  }
}
.block .headline h1.h1 {
  letter-spacing: 1px;
  color: var(--color-white);
}
.block .headline h1.h1 {
  font-size: 40px;
}
@media only screen and (min-width: 375px) {
  .block .headline h1.h1 {
    font-size: calc(40px + 20 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .block .headline h1.h1 {
    font-size: 60px;
  }
}
.block .headline h1.h1 {
  line-height: 40px;
}
@media only screen and (min-width: 375px) {
  .block .headline h1.h1 {
    line-height: calc(40px + 40 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .block .headline h1.h1 {
    line-height: 80px;
  }
}
.block .headline h2.h2 {
  text-align: center;
}

.widget {
  margin-top: 32px;
}
@media only screen and (min-width: 375px) {
  .widget {
    margin-top: calc(32px + 48 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .widget {
    margin-top: 80px;
  }
}
.widget__inner {
  padding: 0;
}
.widget ul {
  list-style-type: none;
}
.widget .headline {
  margin-bottom: 16px;
}
@media only screen and (min-width: 375px) {
  .widget .headline {
    margin-bottom: calc(16px + 8 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .widget .headline {
    margin-bottom: 24px;
  }
}
.widget .headline h1, .widget .headline h2, .widget .headline h3, .widget .headline h4, .widget .headline h5, .widget .headline h6, .widget .headline .h1, .widget .headline .h2, .widget .headline .h3, .widget .headline .h4, .widget .headline .h5, .widget .headline .h6 {
  font-weight: 500;
  line-height: 1.3;
  margin-top: 0;
}
.widget .headline h1, .widget .headline h2, .widget .headline h3, .widget .headline h4, .widget .headline h5, .widget .headline h6, .widget .headline .h1, .widget .headline .h2, .widget .headline .h3, .widget .headline .h4, .widget .headline .h5, .widget .headline .h6 {
  font-size: 16px;
}
@media only screen and (min-width: 375px) {
  .widget .headline h1, .widget .headline h2, .widget .headline h3, .widget .headline h4, .widget .headline h5, .widget .headline h6, .widget .headline .h1, .widget .headline .h2, .widget .headline .h3, .widget .headline .h4, .widget .headline .h5, .widget .headline .h6 {
    font-size: calc(16px + 4 * (100vw - 375px) / (1920 - 375));
  }
}
@media only screen and (min-width: 1920px) {
  .widget .headline h1, .widget .headline h2, .widget .headline h3, .widget .headline h4, .widget .headline h5, .widget .headline h6, .widget .headline .h1, .widget .headline .h2, .widget .headline .h3, .widget .headline .h4, .widget .headline .h5, .widget .headline .h6 {
    font-size: 20px;
  }
}

/*# sourceMappingURL=styles.css.map */