/*------------------------------------*\
    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
\*------------------------------------*/
@font-face {
  font-family: "BrandonTextWeb";
  src: url("../px/BrandonTextWeb-Bold.woff2") format("woff2"), url("../px/BrandonTextWeb-Bold.woff") format("woff");
  font-style: normal;
  font-weight: 600;
  font-display: auto;
  font-stretch: normal;
}
@font-face {
  font-family: "BrandonTextWeb";
  src: url("../px/BrandonTextWeb-Regular.woff2") format("woff2"), url("../px/BrandonTextWeb-Regular.woff") format("woff");
  font-style: normal;
  font-weight: 100;
  font-display: auto;
  font-stretch: normal;
}
/* 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: #CB4E02;
  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
 */
.split-screen__col--visual, .is-boxed-login.articles-filter, body.is-boxed-login, .is-mwg-url-ending.is-boxed-login.articles-filter, body.is-mwg-url-ending.is-boxed-login {
  background-color: #CB4E02;
  background: linear-gradient(45deg, #CB4E02 0%, #e09814 100%);
  filter: none;
}

.button {
  border-radius: 4px;
}
body.is-mwg-url-ending .button {
  border-radius: 4px;
}

.checkout__change-bonus,
.content-overlay__subtitle, .articles-filter, body {
  font-family: "BrandonTextWeb", 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: "BrandonTextWeb", 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: "BrandonTextWeb", 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: "BrandonTextWeb", 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 {
  background: #EDEDEF;
}
.is-mwg-url-ending.articles-filter, body.is-mwg-url-ending {
  background: #EDEDEF;
}
::-moz-selection, ::selection {
  color: #FFFFFF;
  background-color: #973B00;
}
body.is-mwg-url-ending ::-moz-selection, body.is-mwg-url-ending ::selection {
  background-color: #973B00;
}

.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 {
  color: #3F3F3F;
}
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 {
  color: #3F3F3F;
}

.button {
  background: #CB4E02;
  color: #FFFFFF;
}
body.is-mwg-url-ending .button {
  border-color: #CB4E02;
  background: #CB4E02;
  color: #FFFFFF;
}
.button:hover {
  background: #FFFFFF;
  color: #973B00;
  border-color: #973B00;
}
body.is-mwg-url-ending .button:hover {
  background: #FFFFFF;
  color: #973B00;
  border-color: #973B00;
}

.button--light {
  background: #FFFFFF;
  border-color: #FFFFFF;
  color: #3F3F3F;
}
.button--light:hover {
  background: #FFFFFF;
  border-color: #3F3F3F;
  color: #3F3F3F;
}

body.is-login-captcha.is-mwg-url-ending .header, .is-login-captcha .header, .is-boxed-login .header, .header {
  background: #FFFFFF;
  -webkit-box-shadow: 0px 4px 15px 0px rgba(63, 63, 63, 0.2);
  box-shadow: 0px 4px 15px 0px rgba(63, 63, 63, 0.2);
}

.is-boxed-login .header__col:last-child {
  display: none;
}
@media (max-width: 700px) {
  .header__col:first-child {
    height: 30px;
  }
  .is-boxed-login .header {
    height: 60px;
  }
}
@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;
  }
}

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

.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: 180px;
  }
}
@media (min-width: 701px) {
  .logo--header,
  .client-logo {
    max-width: 250px;
  }
}

.button {
  text-transform: none;
  font-weight: 500;
  border: 2px solid transparent;
  font-family: "BrandonTextWeb", 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";
}
.is-boxed-login .panel .button:not(.button--light) {
  background: #3F3F3F;
}
.is-boxed-login .panel .button:not(.button--light):hover {
  color: #FFFFFF;
}
.button--streched {
  width: 100%;
}
.button--wide {
  padding: 0.8125rem 3.75rem;
}
.is-boxed-login .panel .button--light {
  background: #FFFFFF;
}
.is-boxed-login .panel .button--light:hover {
  border-color: #973B00;
}
.button:hover {
  text-decoration: none !important;
}
.is-split-screen-login .panel .button:hover, .is-boxed-login .panel .button:hover {
  border-color: #973B00;
}

* {
  scrollbar-width: thin;
  scrollbar-color: #CB4E02 #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,
a {
  color: #973B00;
}
.checkout__change-bonus:hover,
.checkout__toggle-information:hover,
a:hover {
  color: #973B00;
  text-decoration: underline;
}
body.is-mwg-url-ending .checkout__change-bonus,
body.is-mwg-url-ending .checkout__toggle-information,
body.is-mwg-url-ending a {
  color: #973B00;
}
body.is-mwg-url-ending .checkout__change-bonus:hover,
body.is-mwg-url-ending .checkout__toggle-information:hover,
body.is-mwg-url-ending a:hover {
  color: #973B00;
  text-decoration: underline;
}

.submit__link {
  color: #3F3F3F;
}
.submit__link:hover {
  color: #3F3F3F;
  text-decoration: underline;
}
body.is-mwg-url-ending .submit__link {
  color: #3F3F3F;
}
body.is-mwg-url-ending .submit__link:hover {
  color: #3F3F3F;
  text-decoration: underline;
}

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

.footer {
  background: #3F3F3F;
}
@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 .panel__text,
.is-boxed-login .panel__text b {
  color: #FFFFFF;
}

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