/*------------------------------------*\
    COLOR

    Pass in a group name and a key
    to get a value.

    E.G color(field, background) will return
    the background item in the field group.

    Colors are defined in $colors in _config.scss
\*------------------------------------*/
/* roboto-slab-300 - latin */
@font-face {
  font-display: swap; /* Check https://developer.mozilla.org/en-US/docs/Web/CSS/@font-face/font-display for other options. */
  font-family: "Roboto Slab";
  font-style: normal;
  font-weight: 300;
  src: url("../px/roboto-slab-v34-latin-300.woff2") format("woff2"); /* Chrome 36+, Opera 23+, Firefox 39+, Safari 12+, iOS 10+ */
}
/* SVGs do not accept # as color code and must be encoded
https://stackoverflow.com/questions/55074106/css-background-url-svg-fill-color-not-working-not-base64-when-compiling-from-s */
::-webkit-scrollbar {
  width: 12px;
}
::-webkit-scrollbar:horizontal {
  height: 12px;
}
::-webkit-scrollbar-track {
  background: #FFFFFF;
}
::-webkit-scrollbar-thumb {
  background-color: rgb(0, 43, 69);
  border-radius: 20px;
  border: 3px solid #FFFFFF;
}

/**
 * Hide text while making it readable for screen readers
 * 1. Needed in WebKit-based browsers because of an implementation bug;
 *    See: https://code.google.com/p/chromium/issues/detail?id=457146
 */
/**
 * Hide element while making it readable for screen readers
 * Shamelessly borrowed from HTML5Boilerplate:
 * https://github.com/h5bp/html5-boilerplate/blob/master/src/css/main.css#L119-L133
 */
.is-boxed-login.articles-filter, body.is-boxed-login, .is-boxed-login.articles-actions, .is-mwg-url-ending.is-boxed-login.articles-filter, body.is-mwg-url-ending.is-boxed-login, .is-mwg-url-ending.is-boxed-login.articles-actions {
  background-color: rgb(0, 43, 69);
  background: linear-gradient(45deg, rgb(0, 43, 69) 0%, rgb(242, 244, 246) 100%);
  filter: none;
}

.is-login-captcha input[type=number], .is-boxed-login input[type=number], .is-login-captcha input[type=password], .is-boxed-login input[type=password], .is-login-captcha input[type=text], .is-boxed-login input[type=text], .is-login-captcha input[type=email], .is-boxed-login input[type=email], .is-login-captcha input[type=tel], .is-boxed-login input[type=tel], .is-login-captcha input[type=url], .is-boxed-login input[type=url], .is-login-captcha textarea, .is-boxed-login textarea, .is-login-captcha input[type=submit], .is-boxed-login input[type=submit], .button {
  border-radius: 4px;
}
body.is-mwg-url-ending .is-login-captcha input[type=number], .is-login-captcha body.is-mwg-url-ending input[type=number], body.is-mwg-url-ending .is-boxed-login input[type=number], .is-boxed-login body.is-mwg-url-ending input[type=number], body.is-mwg-url-ending .is-login-captcha input[type=password], .is-login-captcha body.is-mwg-url-ending input[type=password], body.is-mwg-url-ending .is-boxed-login input[type=password], .is-boxed-login body.is-mwg-url-ending input[type=password], body.is-mwg-url-ending .is-login-captcha input[type=text], .is-login-captcha body.is-mwg-url-ending input[type=text], body.is-mwg-url-ending .is-boxed-login input[type=text], .is-boxed-login body.is-mwg-url-ending input[type=text], body.is-mwg-url-ending .is-login-captcha input[type=email], .is-login-captcha body.is-mwg-url-ending input[type=email], body.is-mwg-url-ending .is-boxed-login input[type=email], .is-boxed-login body.is-mwg-url-ending input[type=email], body.is-mwg-url-ending .is-login-captcha input[type=tel], .is-login-captcha body.is-mwg-url-ending input[type=tel], body.is-mwg-url-ending .is-boxed-login input[type=tel], .is-boxed-login body.is-mwg-url-ending input[type=tel], body.is-mwg-url-ending .is-login-captcha input[type=url], .is-login-captcha body.is-mwg-url-ending input[type=url], body.is-mwg-url-ending .is-boxed-login input[type=url], .is-boxed-login body.is-mwg-url-ending input[type=url], body.is-mwg-url-ending .is-login-captcha textarea, .is-login-captcha body.is-mwg-url-ending textarea, body.is-mwg-url-ending .is-boxed-login textarea, .is-boxed-login body.is-mwg-url-ending textarea, body.is-mwg-url-ending .is-login-captcha input[type=submit], .is-login-captcha body.is-mwg-url-ending input[type=submit], body.is-mwg-url-ending .is-boxed-login input[type=submit], .is-boxed-login body.is-mwg-url-ending input[type=submit], body.is-mwg-url-ending .button {
  border-radius: 4px;
}

.checkout__change-bonus,
.content-overlay__subtitle, .articles-filter, body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body.is-mwg-url-ending .checkout__change-bonus,
body.is-mwg-url-ending .content-overlay__subtitle, body.is-mwg-url-ending .articles-filter, body.is-mwg-url-ending body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

#cookieRequestArea__heading, .cookie-consent__heading, .panel__text, .message-header, h1, h2, h3, h4, .content-overlay__title, .hero-slider__text-wrap, h3.vendor {
  font-family: "Roboto Slab", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body.is-mwg-url-ending #cookieRequestArea__heading, body.is-mwg-url-ending .cookie-consent__heading, body.is-mwg-url-ending .panel__text, body.is-mwg-url-ending .message-header, body.is-mwg-url-ending h1, body.is-mwg-url-ending h2, body.is-mwg-url-ending h3, body.is-mwg-url-ending h4, body.is-mwg-url-ending .content-overlay__title, body.is-mwg-url-ending .hero-slider__text-wrap {
  font-family: "Roboto Slab", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}

.articles-filter, body, .articles-actions {
  background: rgb(242, 244, 246);
}
.is-mwg-url-ending.articles-filter, body.is-mwg-url-ending, .is-mwg-url-ending.articles-actions {
  background: rgb(242, 244, 246);
}
::-moz-selection, ::selection {
  color: #FFFFFF;
  background-color: rgb(0, 43, 69);
}
body.is-mwg-url-ending ::-moz-selection, body.is-mwg-url-ending ::selection {
  background-color: rgb(0, 43, 69);
}

.alert--info {
  background: rgb(154, 155, 156);
  color: #FFFFFF;
}
body.is-mwg-url-ending .alert--info {
  background: rgb(154, 155, 156);
  color: #FFFFFF;
}

.article__additional, .form__element--just-text, .form__element--radio, .form__message, .form__txt, .form__element--radio label, label, input[type=number], input[type=password], input[type=text], input[type=email], input[type=tel], input[type=url], textarea, .cookie_content, .cookie-consent, #cookieRequestArea__heading, #cookieRequestArea__paragraph, .cookie-consent__heading, .cookie-consent__paragraph, #cookieRequestArea__link, .cookie-consent__link, .panel__text b, .panel__text, .nav--sub__link---active, .nav--sub__link:not(.nav--sub__link---active), table th, table td, .message-header, .message-title, .list, p:not(.light):not(.cookie-consent__paragraph), h1, h2, h3, h4, .content-overlay__title, .content-overlay__subtitle, .article-summary--list, .article-summary--checkout, .is-boxed-login .form__element--just-text {
  color: rgb(0, 43, 69);
}
body.is-mwg-url-ending .article__additional, body.is-mwg-url-ending .form__element--just-text, body.is-mwg-url-ending .form__element--radio, body.is-mwg-url-ending .form__message, body.is-mwg-url-ending .form__txt, body.is-mwg-url-ending label, body.is-mwg-url-ending input[type=number], body.is-mwg-url-ending input[type=password], body.is-mwg-url-ending input[type=text], body.is-mwg-url-ending input[type=email], body.is-mwg-url-ending input[type=tel], body.is-mwg-url-ending input[type=url], body.is-mwg-url-ending textarea, body.is-mwg-url-ending .cookie_content, body.is-mwg-url-ending .cookie-consent, body.is-mwg-url-ending #cookieRequestArea__heading, body.is-mwg-url-ending #cookieRequestArea__paragraph, body.is-mwg-url-ending .cookie-consent__heading, body.is-mwg-url-ending .cookie-consent__paragraph, body.is-mwg-url-ending #cookieRequestArea__link, body.is-mwg-url-ending .cookie-consent__link, body.is-mwg-url-ending .panel__text b, .panel__text body.is-mwg-url-ending b, body.is-mwg-url-ending .panel__text, body.is-mwg-url-ending .nav--sub__link---active, body.is-mwg-url-ending .nav--sub__link:not(.nav--sub__link---active), body.is-mwg-url-ending table th, table body.is-mwg-url-ending th, body.is-mwg-url-ending table td, table body.is-mwg-url-ending td, body.is-mwg-url-ending .message-header, body.is-mwg-url-ending .message-title, body.is-mwg-url-ending .list, body.is-mwg-url-ending p:not(.light):not(.cookie-consent__paragraph), body.is-mwg-url-ending h1, body.is-mwg-url-ending h2, body.is-mwg-url-ending h3, body.is-mwg-url-ending h4, body.is-mwg-url-ending .content-overlay__title, body.is-mwg-url-ending .content-overlay__subtitle, body.is-mwg-url-ending .article-summary--list, body.is-mwg-url-ending .article-summary--checkout {
  color: rgb(0, 43, 69);
}

.button {
  background: rgb(208, 235, 138);
  color: rgb(0, 43, 69);
}
body.is-mwg-url-ending .button {
  border-color: rgb(208, 235, 138);
  background: rgb(208, 235, 138);
  color: rgb(0, 43, 69);
}
.button:hover {
  background: rgb(170, 205, 80);
  color: rgb(0, 43, 69);
  border-color: rgb(170, 205, 80);
}
body.is-mwg-url-ending .button:hover {
  background: rgb(170, 205, 80);
  color: rgb(0, 43, 69);
  border-color: rgb(170, 205, 80);
}

.button--light, .button-close {
  background: rgb(0, 43, 69);
  border-color: rgb(0, 43, 69);
  color: rgb(0, 43, 69);
}
.button--light:hover, .button-close:hover {
  background: rgb(0, 43, 69);
  border-color: rgb(0, 43, 69);
  color: rgb(0, 43, 69);
}

@media (max-width: 700px) {
  .header__col:first-child {
    height: 30px;
  }
  .is-boxed-login .header {
    height: auto;
  }
}
@media (min-width: 701px) {
  .header {
    height: 80px;
  }
  .is-login-captcha .header, .is-boxed-login .header {
    height: 80px;
  }
  .is-login-captcha.is-mwg-url-ending .header {
    height: 80px;
  }
}

.panel__text {
  font-size: calc(1.3625rem + 1.35vw);
}
@media (min-width: 1200px) {
  .panel__text {
    font-size: 2.375rem;
  }
}
.is-boxed-login .panel__text {
  font-size: calc(1.2875rem + 0.45vw);
}
@media (min-width: 1200px) {
  .is-boxed-login .panel__text {
    font-size: 1.625rem;
  }
}

.logo--header svg,
.logo--header img,
.client-logo svg,
.client-logo img {
  height: auto;
  width: auto;
  position: relative;
  top: 50%;
  transform: translate(0%, -50%);
}

@media (max-width: 700px) {
  .logo--header,
  .client-logo {
    max-width: 135px;
  }
}
@media (min-width: 701px) {
  .logo--header,
  .client-logo {
    max-width: 250px;
  }
}

.hero-slider--fitted {
  height: calc(100vh - 80px - 40px);
}
@media (max-width: 700px) {
  .hero-image {
    margin-top: -80px;
  }
  .hero-image img {
    object-position: right top;
  }
}
@media (min-width: 701px) {
  .hero-image {
    margin-top: -80px;
  }
  .hero-image img {
    object-position: center center;
  }
}

@media (max-width: 900px) {
  .content-overlay__close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23gb(0, 43, 69)' fill-rule='evenodd' d='M13.806814,10 L19.4886305,15.6818195 C19.8295394,16.0227297 20,16.4393926 20,16.9318191 C20,17.4242456 19.8295394,17.8598467 19.4886305,18.2386369 L18.2386308,19.4886365 C17.8598431,19.8295472 17.4242432,20 16.931807,20 C16.4393829,20 16.0227285,19.8295472 15.6818195,19.4886365 L10,13.8068201 L4.31818051,19.4886365 C3.97727031,19.8295472 3.56060741,20 3.06818089,20 C2.57575437,20 2.14015329,19.8295472 1.7613631,19.4886365 L0.511363481,18.2386369 C0.170452797,17.8598467 0,17.4242456 0,16.9318191 C0,16.4393926 0.170452797,16.0227297 0.511363481,15.6818195 L6.19317994,10 L0.511363481,4.31818051 C0.170452797,3.97727152 0,3.5606171 0,3.06819301 C0,2.5757568 0.170452797,2.14015693 0.511363481,1.76136916 L1.7613631,0.511369542 C2.14015329,0.170460554 2.57575437,0 3.06818089,0 C3.56060741,0 3.97727031,0.170460554 4.31818051,0.511369542 L10,6.193186 L15.6818195,0.511369542 C16.0227285,0.170460554 16.4393829,0 16.931807,0 C17.4242432,0 17.8598431,0.170460554 18.2386308,0.511369542 L19.4886305,1.76136916 C19.8295394,2.14015693 20,2.5757568 20,3.06819301 C20,3.5606171 19.8295394,3.97727152 19.4886305,4.31818051 L13.806814,10 Z'/%3E%3C/svg%3E");
    background-color: rgb(208, 235, 138);
  }
  .content-overlay__close:hover {
    background-color: rgb(170, 205, 80);
  }
}
@media (min-width: 901px) {
  .content-overlay__close {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20'%3E%3Cpath fill='%23gb(0, 43, 69)' fill-rule='evenodd' d='M13.806814,10 L19.4886305,15.6818195 C19.8295394,16.0227297 20,16.4393926 20,16.9318191 C20,17.4242456 19.8295394,17.8598467 19.4886305,18.2386369 L18.2386308,19.4886365 C17.8598431,19.8295472 17.4242432,20 16.931807,20 C16.4393829,20 16.0227285,19.8295472 15.6818195,19.4886365 L10,13.8068201 L4.31818051,19.4886365 C3.97727031,19.8295472 3.56060741,20 3.06818089,20 C2.57575437,20 2.14015329,19.8295472 1.7613631,19.4886365 L0.511363481,18.2386369 C0.170452797,17.8598467 0,17.4242456 0,16.9318191 C0,16.4393926 0.170452797,16.0227297 0.511363481,15.6818195 L6.19317994,10 L0.511363481,4.31818051 C0.170452797,3.97727152 0,3.5606171 0,3.06819301 C0,2.5757568 0.170452797,2.14015693 0.511363481,1.76136916 L1.7613631,0.511369542 C2.14015329,0.170460554 2.57575437,0 3.06818089,0 C3.56060741,0 3.97727031,0.170460554 4.31818051,0.511369542 L10,6.193186 L15.6818195,0.511369542 C16.0227285,0.170460554 16.4393829,0 16.931807,0 C17.4242432,0 17.8598431,0.170460554 18.2386308,0.511369542 L19.4886305,1.76136916 C19.8295394,2.14015693 20,2.5757568 20,3.06819301 C20,3.5606171 19.8295394,3.97727152 19.4886305,4.31818051 L13.806814,10 Z'/%3E%3C/svg%3E");
    background-color: #FFFFFF;
  }
  .content-overlay__close:hover {
    background-color: rgb(154, 155, 156);
  }
}

.button {
  text-transform: none;
  font-weight: 500;
  border: 2px solid transparent;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
.button--streched {
  width: 100%;
}
.button--wide {
  padding: 0.8125rem 3.75rem;
}
.is-boxed-login .panel .button--light {
  background: #FFFFFF;
  color: rgb(0, 43, 69);
  border-color: rgb(208, 235, 138);
}
.is-boxed-login .panel .button--light:hover {
  border-color: rgb(170, 205, 80);
  color: rgb(0, 43, 69);
  background: rgb(170, 205, 80);
}
.button:hover {
  text-decoration: none !important;
}
.is-split-screen-login .panel .button:hover, .is-boxed-login .panel .button:hover {
  border-color: transparent;
}

* {
  scrollbar-width: thin;
  scrollbar-color: rgb(0, 43, 69) #FFFFFF;
}

#cookieRequestArea__heading, .cookie-consent__heading, .panel__text, .message-header, h1, h2, h3, h4, .content-overlay__title, .hero-slider__text-wrap, h3.vendor {
  text-transform: none;
}

.checkout__change-bonus,
.checkout__toggle-information,
.submit__link,
a {
  color: rgb(0, 43, 69);
}
.checkout__change-bonus:hover,
.checkout__toggle-information:hover,
.submit__link:hover,
a:hover {
  color: rgb(0, 43, 69);
  text-decoration: underline;
}
body.is-mwg-url-ending .checkout__change-bonus,
body.is-mwg-url-ending .checkout__toggle-information,
body.is-mwg-url-ending .submit__link,
body.is-mwg-url-ending a {
  color: rgb(0, 43, 69);
}
body.is-mwg-url-ending .checkout__change-bonus:hover,
body.is-mwg-url-ending .checkout__toggle-information:hover,
body.is-mwg-url-ending .submit__link:hover,
body.is-mwg-url-ending a:hover {
  color: rgb(0, 43, 69);
  text-decoration: underline;
}

.h-is-bold {
  font-weight: 600;
}

.footer {
  border-top: 1px solid #FFFFFF;
  background: rgb(0, 43, 69);
}
@media (max-width: 700px) {
  .is-boxed-login .footer {
    padding-bottom: 0;
  }
}

.nav--footer__link {
  color: #FFFFFF !important;
}
.nav--footer__link:hover {
  color: #FFFFFF !important;
  text-decoration: underline;
}

.is-boxed-login input[type=number],
.is-boxed-login input[type=password],
.is-boxed-login input[type=text],
.is-boxed-login input[type=email],
.is-boxed-login input[type=tel],
.is-boxed-login input[type=url],
.is-boxed-login textarea {
  border: 2px solid rgb(154, 155, 156);
}

.is-boxed-login .panel__text,
.is-boxed-login .panel__text b {
  color: rgb(0, 43, 69);
}

.is-boxed-login .header__col:last-child {
  display: none;
}

.column__main h3:first-of-type {
  border: none !important;
}
