/* Document
 * ========================================================================== */
/* https://github.com/csstools/postcss-normalize */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */

html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/* Sections
 * ========================================================================== */

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Edge, Firefox, and Safari.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
 * ========================================================================== */

/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */

dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}

/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */

ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */

hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box; /* 1 */
  height: 0; /* 1 */
  overflow: visible; /* 2 */
}

/**
 * Add the correct display in IE.
 */

main {
  display: block;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/* Text-level semantics
 * ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */

abbr[title] {
  text-decoration: underline;
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */

b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */

code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */

small {
  font-size: 80%;
}

/* Embedded content
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

audio,
video {
  display: inline-block;
}

/**
 * Add the correct display in iOS 4-7.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Remove the border on images within links in IE 10-.
 */

img {
  border-style: none;
}

/**
 * Hide the overflow in IE.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Forms
 * ========================================================================== */

/**
 * Remove the margin on controls in Safari.
 */

button,
input,
select {
  margin: 0;
}

/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */

button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}

/**
 * Correct the inability to style buttons in iOS and Safari.
 */

button,
[type='button'],
[type='reset'],
[type='submit'] {
  -webkit-appearance: button;
}

/**
 * Correct the padding in Firefox.
 */

fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * Show the overflow in Edge 18- and IE.
 */

input {
  overflow: visible;
}

/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */

legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}

/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */

progress {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Remove the inheritance of text transform in Firefox.
 */

select {
  text-transform: none;
}

/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 */

textarea {
  margin: 0; /* 1 */
  overflow: auto; /* 2 */
}

/**
 * 1. Add the correct box sizing in IE 10-.
 * 2. Remove the padding in IE 10-.
 */

[type='checkbox'],
[type='radio'] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * 1. Correct the odd appearance in Chrome, Edge, and Safari.
 * 2. Correct the outline style in Safari.
 */

[type='search'] {
  -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 */
}

/**
 * Remove the inner border and padding of focus outlines in Firefox.
 */

::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus outline styles unset by the previous rule in Firefox.
 */

:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Remove the additional :invalid styles in Firefox.
 */

:-moz-ui-invalid {
  box-shadow: none;
}

/* Interactive
 * ========================================================================== */

/*
 * Add the correct display in Edge 18- and IE.
 */

details {
  display: block;
}

/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */

dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: -moz-fit-content;
  height: -webkit-fit-content;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: -moz-fit-content;
  width: -webkit-fit-content;
  width: fit-content;
}

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

/*
 * Add the correct display in all browsers.
 */

summary {
  display: list-item;
}

/* Scripting
 * ========================================================================== */

/**
 * Add the correct display in IE 9-.
 */

canvas {
  display: inline-block;
}

/**
 * Add the correct display in IE.
 */

template {
  display: none;
}

/* User interaction
 * ========================================================================== */

/**
 * Add the correct display in IE 10-.
 */

[hidden] {
  display: none;
}

:root {
	/* Breakpoints (the point up until a new view starts) */
	--bp-xs: 36rem; /* 576px = phones portrait */
	--bp-s: 48rem; /* 768px = phones landscape / tablets portait */
	--bp-m: 62rem; /* 992px = tablets landscape / large tablets portait */
	--bp-l: 75rem; /* 1200px = large tablets portait / notebooks / desktops */
	--bp-xl: 100rem; /* 1600px = large notebooks / large desktops */
	--bp-xxl: 125rem; /* 2000px = ultra wide desktops */
}

/* Media queries (the T-shirt sizes represent views with certain ranges) */

/* MQ: 0 <-- XS --> 36rem <-- S --> 48rem <-- M --> 62rem <-- L --> 75rem <-- XL --> 100rem <-- XXL --> 125rem */
/* BP: ************** XS ************ S ************* M ************* L ************** XL ************** XXL ***/

/* Mobile-first media queries */

/* Desktop-first media queries */

/* Range media queries (can be extended with different combinations) */

:root {
  /* Three tier color system: 1. swatches, 2. semantic mapping, 3. contextual mapping */

  /* --- Tier 1: Color swatches --- */
  --color-white: #fff;
  --color-black: #000;

  --color-lightest-gray: #f8f9fa;
  --color-lighter-gray: #e9ecef;
  --color-light-gray: #dee2e6;
  --color-medium-light-gray: #ced4da;
  --color-medium-gray: #adb5bd;
  --color-medium-dark-gray: #6c757d;
  --color-dark-gray: #495057;
  --color-darker-gray: #343a40;
  --color-darkest-gray: #212529;

  /* Brand colors */
  --brand-color-1: #39b54a; /* Button, Nav-underline, h6 */
  --brand-color-2: #f5d052;
  --brand-color-3: #ded8c2;
  --brand-color-4: #6c757d;
  --brand-color-5: #1a0dab;

  /* Signal colors */
  --color-green: #00ff00;
  --color-orange: #ff9900;
  --color-red: #ff0000;

  /* Social media colors */
  --color-facebook: #3b5998;
  --color-twitter: #2aa3f0;
  --color-instagram: #ff2f5b;
  --color-youtube: red;
  --color-pinterest: #c8232c;

  /* --- Tier 2: Semantic color mapping --- */
  --primary-color: var(--brand-color-1);
  --secondary-color: var(--brand-color-2);

  --error-color: var(--color-red);
  --attention-color: var(--color-orange);
  --success-color: var(--color-green);

  /* Shadow colors */
  --shadow-color-subtle: rgba(0, 0, 0, 0.25);

  /* Background colors */
  --background-color-light: var(--color-lightest-gray);
  --background-color-medium: var(--color-medium-light-gray);
  --background-color-dark: var(--color-dark-gray);
  --background-color-brand: var(--background-color-medium);

  /* --- Tier 3: Contextual color mapping --- */
  /* Typography */
  --heading-color: var(--color-darkest-gray);
  --text-color: var(--color-darker-gray);
  --link-color: var(--brand-color-5);

  /* Generic */
  --border-color: var(--color-medium-gray);
  --nav-icon-color: var(--brand-color-1);

  /* Form elements */
  --input-text-color: var(--color-darker-gray);
  --input-placeholder-color: var(--color-medium-gray);
  --input-border-color: var(--color-medium-gray);
  --input-focus-border-color: var(--primary-color);

  /* Specific */
  --tag-color: var(--brand-color-2);
  --header-color: var(--primary-color);
  --header-text-color: var(--color-white);
  --header-text-color-mobile: var(--header-text-color);
  --footer-color: var(--color-darkest-gray);
  --footer-text-color: var(--color-white);
  --meta-header-color: var(--brand-color-1);
}

:root {
  /* Transition duration */
  --duration: 0.2s; /* default duration */

  --duration-s: calc(var(--duration) / 2); /* short/fast */
  --duration-m: var(--duration); /* normal */
  --duration-l: calc(var(--duration) * 2); /* long/slow */
  --duration-xl: calc(var(--duration) * 3); /* extra long/extra slow */

  /* Easings: basic */
  --linear: cubic-bezier(0.25, 0.25, 0.75, 0.75);
  --ease: cubic-bezier(0.25, 0.1, 0.25, 1);
  --ease-in: cubic-bezier(0.42, 0, 1, 1);
  --ease-out: cubic-bezier(0, 0, 0.58, 1);
  --ease-in-out: cubic-bezier(0.42, 0, 0.58, 1);

  /* Easings: ease in */
  --ease-in-quad: cubic-bezier(0.55, 0.085, 0.68, 0.53);
  --ease-in-cubic: cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-in-quart: cubic-bezier(0.895, 0.03, 0.685, 0.22);
  --ease-in-quint: cubic-bezier(0.755, 0.05, 0.855, 0.06);
  --ease-in-sine: cubic-bezier(0.47, 0, 0.745, 0.715);
  --ease-in-expo: cubic-bezier(0.95, 0.05, 0.795, 0.035);
  --ease-in-circ: cubic-bezier(0.6, 0.04, 0.98, 0.335);
  --ease-in-back: cubic-bezier(0.6, -0.28, 0.735, 0.045);

  /* Easings: ease out */
  --ease-out-quad: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --ease-out-cubic: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-out-quart: cubic-bezier(0.165, 0.84, 0.44, 1);
  --ease-out-quint: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-out-sine: cubic-bezier(0.39, 0.575, 0.565, 1);
  --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);
  --ease-out-circ: cubic-bezier(0.075, 0.82, 0.165, 1);
  --ease-out-back: cubic-bezier(0.175, 0.885, 0.32, 1.275);

  /* Easings: ease in-out */
  --ease-in-out-quad: cubic-bezier(0.455, 0.03, 0.515, 0.955);
  --ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1);
  --ease-in-out-quart: cubic-bezier(0.77, 0, 0.175, 1);
  --ease-in-out-quint: cubic-bezier(0.86, 0, 0.07, 1);
  --ease-in-out-sine: cubic-bezier(0.445, 0.05, 0.55, 0.95);
  --ease-in-out-expo: cubic-bezier(1, 0, 0, 1);
  --ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.15, 0.86);
  --ease-in-out-back: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* Easings: default */
  --easing: var(--ease-in-out); /* transition timing (easing) */

  /* Transition default */
  --transition: all var(--duration) var(--easing); /* transition */

  /* Transition timings (to be combine with properties */
  --transition-timing-slow: var(--duration-l) var(--easing);
  --transition-timing-fast: var(--duration-s) var(--easing);
}

:root {
  /* Spacing relative to document, i.e. for paddings, etc. */
  --s: 1rem; /* Default spacing value */

  --s-xs: calc(var(--s) * 0.3125); /* 5px */
  --s-s: calc(var(--s) * 0.5); /* 8px */
  --s-m: var(--s); /* 16px */
  --s-l: calc(var(--s) * 1.5); /* 24px */
  --s-xl: calc(var(--s) * 2); /* 32px */
  --s-xxl: calc(var(--s) * 3); /* 48px */
  --s-xxxl: calc(var(--s) * 4); /* 64px */
  --s-xxxxl: calc(var(--s) * 8); /* 128px */
  --s-xxxxxl: calc(var(--s) * 14); /* 192px */

  /* Spacing relative to parent, i.e. for margins */
  --m: 1.5em; /* Default margin value */

  --m-xs: calc(var(--m) / 3);
  --m-s: calc(var(--m) / 2);
  --m-m: var(--m);
  --m-l: calc(var(--m) * 2);
  --m-xl: calc(var(--m) * 3);
}

:root {
  /* Font families */
  --ff-body: Arial, Helvetica, sans-serif;
  --ff-headings: 'Oswald', Arial, Helvetica, sans-serif;
  --ff-navigation: var(--ff-body);

  /* Font sizes */
  --fs-xs: 0.75rem;
  --fs-s: 0.9375rem;
  --fs-m: 1rem;
  --fs-l: 1.25rem;
  --fs-xl: 1.5rem;
  --fs-xxl: 2rem;
  --fs-xxxl: 3rem;
  --fs-xxxxl: 4rem;

  --fs-navigation: var(--fs-m);

  /* Line heights */
  --lh-xs: 1.125;
  --lh-s: 1.25;
  --lh-m: 1.5;
  --lh-l: 1.75;
  --lh-xl: 2;

  /* Font weights (constants) */
  --fw-thin: 100; /* aka hairline */
  --fw-extra-light: 200;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semi-bold: 600;
  --fw-bold: 700;
  --fw-extra-bold: 800;
  --fw-black: 900; /* aka heavy or ultra bold */
  --fw-extra-black: 1000; /* aka ultra heavy */

  --fw-normal: var(--fw-regular); /* alias; normal is same as regular */
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: var(--fw-regular);
  src: local('Rubik'), local('Rubik-Regular'),
    url(//fonts.gstatic.com/s/rubik/v7/iJWKBXyIfDnIV7nBrXw.woff2)
      format('woff2'),
    url(//fonts.gstatic.com/s/rubik/v7/iJWKBXyIfDnIV7nBrXo.woff) format('woff');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-weight: var(--fw-bold);
  src: local('Rubik Bold'), local('Rubik-Bold'),
    url(//fonts.gstatic.com/s/rubik/v7/iJWHBXyIfDnIV7F6iGmd8WA.woff2)
      format('woff2'),
    url(//fonts.gstatic.com/s/rubik/v7/iJWHBXyIfDnIV7F6iGmd8WY.woff)
      format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: var(--fw-regular);
  src: local('Oswald Regular'), local('Oswald-Regular'),
    url(//fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8G.woff2)
      format('woff2'),
    url(//fonts.gstatic.com/s/oswald/v16/TK3iWkUHHAIjg752GT8A.woff)
      format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-weight: var(--fw-bold);
  src: local('Oswald Bold'), local('Oswald-Bold'),
    url(//fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-ohoTus9C.woff2)
      format('woff2'),
    url(//fonts.gstatic.com/s/oswald/v16/TK3hWkUHHAIjg75-ohoTus9E.woff)
      format('woff');
}

:root {
  --header-height-mobile: 80px;
  --header-height-desktop: 120px;

  --product-card-height: 450px;
  --product-card-img-height: 200px;
  --recipe-card-img-height-mobile: 350px;
  --recipe-card-img-height-desktop: 500px;
}
:root {
  --opacity-xs: 0.9;
  --opacity-s: 0.6;
  --opacity-m: 0.5;
  --opacity-l: 0.35;
  --opacity-xl: 0.2;
}

:root {
  --box-shadow-hairline: 0 1px 0 0 var(--shadow-color-subtle);
  --box-shadow-subtle: 0 0.25rem 0.25rem 0 var(--shadow-color-subtle);
  --box-shadow-narrow-light: 0 1rem 2.5rem -0.625rem var(--color-light-gray);
  --box-shadow-narrow-medium: 0 1rem 2.5rem -0.625rem var(--color-dark-gray);
}

:root {
  --border-radius-s: 0.3125rem; /* 5px */
  --border-radius-m: 0.625rem; /* 10px */
  --border-radius-l: 0.9375; /* 15px */
  --border-radius-xl: 1.25rem; /* 20px */

  --border-radius-rounded: 999rem;
}

:root {
  --z-index-header: 300;
  --z-index-footer: 100;
  --z-index-language-selector: 400;
}

:root {
  /* Icon Sizes */
  --icon-size-s: 1rem;
  --icon-size-m: 2rem;
  --icon-size-l: 2.5rem;
}

:root {
  /* logo */
  --logo-width: 180px; /* included padding */
  --logo-width-desktop: 240px;
}

:root {
  --pattern: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/images/bg-pattern.jpg');
  --curve: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/images/swoosh.svg');
  --curve-mobile: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/images/swoosh-mobile.svg');
}







a {
  text-decoration: none;
  color: var(--link-color);
  -webkit-transition-property: color;
  transition-property: color;
}

  a:hover {
    text-decoration: underline;
  }

.btn,
button,
input[type="submit"],
input[type="button"] {
  position: relative;
  background-color: var(--primary-color);
  color: var(--color-white);
  padding: var(--s-m) var(--s-l);
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  font-family: var(--ff-body);
	font-size: var(--fs-m);
	line-height: var(--lh-m);
  text-decoration: none;
  text-align: center;
  text-transform: uppercase;
  -webkit-transition: all var(--transition-timing-fast);
  transition: all var(--transition-timing-fast);
}

  .btn:hover,
  .btn:focus,
  button:hover,
  button:focus,
  input[type="submit"]:hover,
  input[type="submit"]:focus,
  input[type="button"]:hover,
  input[type="button"]:focus {
    opacity: var(--opacity-xs);
    text-decoration: none;
    -webkit-transform: translate(0px, -2px);
            transform: translate(0px, -2px);
  }

  .btn:active, button:active, input[type="submit"]:active, input[type="button"]:active {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px);
  }

.btn-rounded {
    border-radius: var(--border-radius-s);
  }

.btn-round {
    border-radius: var(--border-radius-rounded);
  }

.btn-medium {
    padding: var(--s-s) var(--s-xl);
    font-size: var(--fs-s);
  }

.btn-text {
    background-color: transparent;
    color: var(--primary-color);
  }

/* Note: This should be removed; an anchor element should never be wrapped by a .btn class. */

.btn a {
    color: var(--color-white);
    text-decoration: none;
  }

@charset "UTF-8";

html {
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  -webkit-text-size-adjust: 100%; /* prevent font scaling when orientation change */
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*::before,
*::after {
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
  margin: 0;
  padding: 0;
  border: 0;
}

body {
  -webkit-overflow-scrolling: auto;
  overflow-y: scroll; /* to keep scrollbar and prevent jumping pages */
  overflow-x: hidden;
  position: relative;
  background-color: var(--color-white);
  color: var(--text-color);
  line-height: var(--lh-m);
  font-size: var(--fs-m);
  font-family: var(--ff-body);
  font-weight: var(--fw-regular);

  padding-top: var(--header-height-mobile);
}

body.disable-scroll-y {
    overflow-y: hidden;
  }

body.on-page-editor,
  body.preview {
    padding-top: 0;
  }

body.on-page-editor .header,
    body.on-page-editor .header-logo-center,
    body.on-page-editor .header-logo-left,
    body.on-page-editor .header-language-selector-wrapper,
    body.on-page-editor #header > .container,
    body.preview .header,
    body.preview .header-logo-center,
    body.preview .header-logo-left,
    body.preview .header-language-selector-wrapper,
    body.preview #header > .container {
      position: static;
    }

body.on-page-editor .header.has-moved-up, body.on-page-editor .header-logo-center.has-moved-up, body.on-page-editor .header-logo-left.has-moved-up, body.on-page-editor .header-language-selector-wrapper.has-moved-up, body.on-page-editor #header > .container.has-moved-up, body.preview .header.has-moved-up, body.preview .header-logo-center.has-moved-up, body.preview .header-logo-left.has-moved-up, body.preview .header-language-selector-wrapper.has-moved-up, body.preview #header > .container.has-moved-up {
        -webkit-transform: translateY(0);
                transform: translateY(0);
      }

body.on-page-editor .header-nav-icon, body.preview .header-nav-icon {
      position: relative;
      -webkit-transform: translateY(0);
              transform: translateY(0);
    }

@media (min-width: 62rem) {

body.on-page-editor .header-nav-icon, body.preview .header-nav-icon {
        display: block
    }
      }

@media (min-width: 62rem) {

body {
    padding-top: var(--header-height-desktop)
}
  }

main {
  overflow-x: hidden;
}
legend {
  margin-bottom: var(--m-m);
}

fieldset {
  margin: 0 0 var(--m-s);
  padding: 0;
  border: none;
}

label {
  font-family: var(--ff-body);
}

input[type='text'],
input[type='color'],
input[type='date'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='number'],
input[type='password'],
input[type='range'],
input[type='search'],
input[type='tel'],
input[type='time'],
input[type='url'],
input[type='week'],
select,
textarea {
  width: 100%;
  padding: var(--s-s) var(--s-m);
  border: solid 1px var(--input-border-color);
  font-family: var(--ff-body);
  font-size: var(--fs-m);
  line-height: var(--lh-m);
  color: var(--input-text-color);
}

input[type='text']:focus, input[type='color']:focus, input[type='date']:focus, input[type='datetime-local']:focus, input[type='email']:focus, input[type='month']:focus, input[type='number']:focus, input[type='password']:focus, input[type='range']:focus, input[type='search']:focus, input[type='tel']:focus, input[type='time']:focus, input[type='url']:focus, input[type='week']:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--input-focus-border-color);
  }

input[type='text'].has-error:not(:focus), input[type='color'].has-error:not(:focus), input[type='date'].has-error:not(:focus), input[type='datetime-local'].has-error:not(:focus), input[type='email'].has-error:not(:focus), input[type='month'].has-error:not(:focus), input[type='number'].has-error:not(:focus), input[type='password'].has-error:not(:focus), input[type='range'].has-error:not(:focus), input[type='search'].has-error:not(:focus), input[type='tel'].has-error:not(:focus), input[type='time'].has-error:not(:focus), input[type='url'].has-error:not(:focus), input[type='week'].has-error:not(:focus), select.has-error:not(:focus), textarea.has-error:not(:focus) {
    border-color: var(--error-color);
    -webkit-box-shadow: 0 0 0.5rem 0 var(--error-color);
            box-shadow: 0 0 0.5rem 0 var(--error-color);
  }

input[type='text'].is-correct:not(:focus), input[type='color'].is-correct:not(:focus), input[type='date'].is-correct:not(:focus), input[type='datetime-local'].is-correct:not(:focus), input[type='email'].is-correct:not(:focus), input[type='month'].is-correct:not(:focus), input[type='number'].is-correct:not(:focus), input[type='password'].is-correct:not(:focus), input[type='range'].is-correct:not(:focus), input[type='search'].is-correct:not(:focus), input[type='tel'].is-correct:not(:focus), input[type='time'].is-correct:not(:focus), input[type='url'].is-correct:not(:focus), input[type='week'].is-correct:not(:focus), select.is-correct:not(:focus), textarea.is-correct:not(:focus) {
    border-color: var(--success-color);
    -webkit-box-shadow: 0 0 0.5rem 0 var(--success-color);
            box-shadow: 0 0 0.5rem 0 var(--success-color);
  }

textarea {
  height: calc(
    (1px * 2) + (var(--s-s) * 2) + ((var(--lh-m) * 1rem) * 5)
  ); /* Note: 5 lines high, calculated using vertical borders plus padding combined with 5 times the line-height converted to rems. */
  line-height: var(--lh-m);
}

::-webkit-input-placeholder {
  /* Note: For Chrome, Firefox, Opera, Safari 10.1+. */
  color: var(--input-placeholder-color);
  opacity: 0.5; /* Firefox */
}

::-moz-placeholder {
  /* Note: For Chrome, Firefox, Opera, Safari 10.1+. */
  color: var(--input-placeholder-color);
  opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder {
  /* Note: For Chrome, Firefox, Opera, Safari 10.1+. */
  color: var(--input-placeholder-color);
  opacity: 0.5; /* Firefox */
}

::-ms-input-placeholder {
  /* Note: For Chrome, Firefox, Opera, Safari 10.1+. */
  color: var(--input-placeholder-color);
  opacity: 0.5; /* Firefox */
}

::placeholder {
  /* Note: For Chrome, Firefox, Opera, Safari 10.1+. */
  color: var(--input-placeholder-color);
  opacity: 0.5; /* Firefox */
}

:-ms-input-placeholder {
  /* Note: For Internet Explorer 10-11. */
  color: var(--input-placeholder-color);
  opacity: 0.5;
}

::-ms-input-placeholder {
  /* Note: For Microsoft Edge. */
  color: var(--input-placeholder-color);
  opacity: 0.5;
}

form input[type='text'],
  form input[type='email'],
  form select {
    border: 0;
    padding: var(--s-s) 0;
    border-bottom: solid 1px var(--input-border-color);
    margin-bottom: var(--s-s);

    /* &:focus {
      border-bottom: solid 2px var(--input-border-color);
      font-weight: var(--fw-bold);
    } */
  }

form label.label-with-input {
      margin: var(--s-m) 0;
      padding-left: var(--s-l);
      position: relative;
      display: block;
    }

form label.label-with-input input[type='checkbox'],
      form label.label-with-input input[type='radio'] {
        position: absolute;
        top: 8px;
        left: 0;
      }

form label.label-with-input.text-is-small {
        font-size: var(--fs-xs);
      }

form label.label-with-input.text-is-small input[type='checkbox'],
        form label.label-with-input.text-is-small input[type='radio'] {
          position: absolute;
          top: 4px;
          left: 0;
        }

form .checkbox-list label {
      padding: var(--s-s);
      display: block;
      border-bottom: 1px solid var(--border-color);
    }

form .checkbox-list label:last-child {
        border-bottom: none;
      }

form .custom-checkbox {
    position: relative;
    cursor: pointer;
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
  }

form .custom-checkbox input {
      position: absolute;
      opacity: 0;
      cursor: pointer;
    }

form .custom-checkbox .checkmark {
      height: 25px;
      width: 25px;
      display: inline-block;
      vertical-align: middle;
      border: 1px solid var(--border-color);
    }

form .custom-checkbox input:checked ~ .checkmark {
      background-color: green;
    }

form .inline-radio-button-group {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

form .inline-radio-button-group .cell {
      max-width: 25%;
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
    }

form .inline-radio-button-group .cell label {
        position: relative;
        cursor: pointer;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
      }

form .inline-radio-button-group .cell label input {
          position: absolute;
          right: 0;
          left: 0;
          opacity: 0;
          cursor: pointer;
        }

form .inline-radio-button-group .cell label .inline-radio-button {
          display: block;
          border-top: 1px solid var(--border-color);
          border-bottom: 1px solid var(--border-color);
          border-right: 1px solid var(--border-color);
          padding: var(--s-s) var(--s-xs);
          font-size: 11px;
          text-align: center;
        }

@media (min-width: 48rem) {

form .inline-radio-button-group .cell label .inline-radio-button {
            padding: var(--s-s);
            font-size: var(--fs-xs)
        }
          }

form .inline-radio-button-group .cell label input:checked ~ .inline-radio-button {
          background-color: var(--brand-color-1);
          color: var(--color-white);
        }

form .inline-radio-button-group .cell:first-child label .inline-radio-button {
            border-radius: 21px 0 0 21px;
            border-left: 1px solid var(--border-color);
          }

form .inline-radio-button-group .cell:last-child label .inline-radio-button {
            border-radius: 0 21px 21px 0;
          }

.form-container {
  padding: var(--s-xxl);
}

.form-container.no-padding-mobile {
    padding: var(--s-xxl) 0;
  }

@media (min-width: 48rem) {

.form-container.no-padding-mobile {
      padding: var(--s-xxl)
  }
    }

.form-row {
  margin-bottom: var(--s-xxl);
}

.form-row-small {
  margin-bottom: var(--s-l);
}

.related-fields {
  display: none;
  padding-left: var(--s-l);
}

.related-fields.expand {
    display: block;
  }

h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0 0 var(--m-s);
  font-family: var(--ff-headings);
  font-weight: var(--fw-bold);
  line-height: var(--lh-s);
  color: var(--heading-color);
}

  h1:empty, .h1:empty, h2:empty, .h2:empty, h3:empty, .h3:empty, h4:empty, .h4:empty, h5:empty, .h5:empty, h6:empty, .h6:empty {
    margin: 0;
  }

  h1 a, .h1 a, h2 a, .h2 a, h3 a, .h3 a, h4 a, .h4 a, h5 a, .h5 a, h6 a, .h6 a {
    display: block;
    color: var(--heading-color);
  }

  h1 a:hover, .h1 a:hover, h2 a:hover, .h2 a:hover, h3 a:hover, .h3 a:hover, h4 a:hover, .h4 a:hover, h5 a:hover, .h5 a:hover, h6 a:hover, .h6 a:hover {
      text-decoration: none;
    }

  h1 > p, .h1 > p, h2 > p, .h2 > p, h3 > p, .h3 > p, h4 > p, .h4 > p, h5 > p, .h5 > p, h6 > p, .h6 > p {
    margin-bottom: 0;
  }

h1,
.h1 {
  font-size: var(--fs-xxl);
  line-height: var(--lh-xs);
}

@media (min-width: 62rem) {

h1,
.h1 {
    font-size: var(--fs-xxxl)
}
  }

h2,
.h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xs);
}

@media (min-width: 62rem) {

h2,
.h2 {
    font-size: var(--fs-xxl)
}
  }

h3,
.h3 {
  font-size: var(--fs-l);
}

@media (min-width: 62rem) {

h3,
.h3 {
    font-size: var(--fs-xl)
}
  }

h4,
.h4 {
  font-size: var(--fs-m);
}

@media (min-width: 62rem) {

h4,
.h4 {
    font-size: var(--fs-l)
}
  }

h5,
.h5 {
  font-size: var(--fs-s);
}

@media (min-width: 62rem) {

h5,
.h5 {
    font-size: var(--fs-m)
}
  }

h6,
.h6 {
  font-size: var(--fs-m);
  color: var(--primary-color);
}

.plus {
  position: relative;
  width: 16px;
  height: 16px;
  display: inline-block;
}

  .plus:before,
  .plus:after {
    content: '';
    position: absolute;
    background-color: black;
    -webkit-transition: -webkit-transform 0.25s ease-out;
    transition: -webkit-transform 0.25s ease-out;
    transition: transform 0.25s ease-out;
    transition: transform 0.25s ease-out, -webkit-transform 0.25s ease-out;
  }

  /* Vertical line */

  .plus:before {
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    margin-left: -1px;
  }

  /* horizontal line */

  .plus:after {
    top: 50%;
    left: 0;
    width: 100%;
    height: 2px;
    margin-top: -1px;
  }

ul,
ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

  ul:empty, ol:empty {
    margin: 0 !important;
  }

li {
  padding: 0;
  margin: 0;
}

.check-list ul li, .check-list-horizontal ul li {
    padding: 0 0 var(--s-m) var(--s-xl);
    background: url(`../../../Images/check.svg`) top left no-repeat;
    background-size: var(--s-l);
  }

@media (min-width: 48rem) {

.check-list-horizontal ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap
  }
    }

.check-list-horizontal ul li {
      padding: 0 var(--s-xl);
    }

@media (min-width: 48rem) {

.check-list-horizontal ul li {
        padding: 0 var(--s-l)
    }
      }

@media (min-width: 62rem) {

.check-list-horizontal ul li {
        padding: 0 var(--s-xl)
    }
      }

.check-list.rich-text ul, .check-list-horizontal.rich-text ul {
    margin: 0;
    list-style: none;
  }

[dir='rtl'] .check-list ul li, [dir='rtl'] .check-list-horizontal ul li {
    padding: 0 var(--s-xl) var(--s-m) 0;
    background: url(`../../../Images/check-reversed.svg`) top right no-repeat;
    background-size: var(--s-l);
  }

[dir='rtl'] .check-list-horizontal ul li {
      padding: 0 var(--s-xl);
    }

@media (min-width: 48rem) {

[dir='rtl'] .check-list-horizontal ul li {
        padding: 0 var(--s-l)
    }
      }

@media (min-width: 62rem) {

[dir='rtl'] .check-list-horizontal ul li {
        padding: 0 var(--s-xl)
    }
      }

img, embed, object, video, svg {
	max-width: 100%;
	height: auto;
}
img {
	display: inline-block;
    vertical-align: top;
    border: none;
    -ms-interpolation-mode: bicubic;
}
iframe {
	width: 100%;
}

/* IE10 and IE11 hack */
@media all and (-ms-high-contrast:none){
	img[src*=".svg"] {
        width: 100%;
        height: 100%;
    }
}
.nav-icon {
  width: 18px;
  height: 16px;
  position: relative;
  cursor: pointer;
}

  .nav-icon span {
    display: block;
    position: absolute;
    height: 3px;
    width: 100%;
    background: var(--nav-icon-color);
    opacity: 1;
    left: 0;
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
    -webkit-transition: all var(--duration-m) var(--ease-in-out);
    transition: all var(--duration-m) var(--ease-in-out);
  }

  .nav-icon span:nth-child(1) {
      top: 0;
    }

  .nav-icon span:nth-child(2) {
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }

  .nav-icon span:nth-child(3) {
      bottom: 0;
    }

  .nav-icon.is-open span:nth-child(1) {
      top: 50%;
      -webkit-transform: rotate(135deg);
              transform: rotate(135deg);
    }

  .nav-icon.is-open span:nth-child(2) {
      opacity: 0;
    }

  .nav-icon.is-open span:nth-child(3) {
      top: 50%;
      -webkit-transform: rotate(-135deg);
              transform: rotate(-135deg);
    }

table {
  border-collapse: collapse;
  border-spacing: 0;
  width: 100%;
  overflow-x: auto;
  margin: var(--s-xxl) 0;
}

tr:nth-child(odd) {
    background-color: var(--background-color-light);
  }

td,
th {
  padding: var(--s-s) var(--s-l);
  vertical-align: top;
  text-align: left;
  border: none;
}

/* Mobile only*/
@media (max-width: 47.9375rem) {
  table,
  thead,
  tbody,
  th,
  td,
  tr {
    display: block;
  }

  thead tr {
    position: absolute;
    top: -999rem;
    left: -999rem;
  }

  tr {
    padding: var(--s-m);
  }

  td {
    border-bottom: 1px solid var(--color-medium-gray);
    position: relative;
    white-space: normal;
    text-align: left;
    padding: 0;
  }

    td:last-child {
      border: none;
    }

  td:before {
    position: absolute;
    top: var(--s-s);
    left: var(--s-s);
    padding-right: var(--s-s);
    white-space: nowrap;
    text-align: left;
  }

  td:before {
    content: attr(data-title);
  }
}

[dir='rtl'] table td,
  [dir='rtl'] table th {
    text-align: right;
  }

.tag-text {
  background-color: var(--tag-color);
  padding: var(--s-s) var(--s-m);
  border-radius: var(--border-radius-l);
  margin: var(--s-s);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  font-size: var(--fs-xs);
}

p {
  margin: 0 0 var(--s-xl) 0;
}

address {
  font-style: normal;
}

small {
  font-size: var(--fs-xs);
}

big {
  font-size: var(--fs-xl);
}

sup {
  font-size: 0.8em;
  vertical-align: top;
  position: relative;
  top: -0.25em;
}

blockquote,
q {
  display: block;
  background: var(--color-lighter-gray);
  border-left: var(--s-s) solid var(--color-medium-gray);
  margin: var(--s-l) var(--s-s);
  padding: var(--s-s) var(--s-m);
}

figcaption {
  font-size: var(--fs-xs);
}

.rich-text img,
  .rich-text ol,
  .rich-text ul {
    margin-bottom: var(--m-m);
  }

.rich-text ol,
  .rich-text ul {
    list-style-position: outside;
  }

.rich-text ol {
    margin-left: 1.5em; /* Note: No CSS variable used since this should not be influenced by those settings. */
    list-style-type: decimal;
  }

[dir="rtl"] .rich-text ol {
      margin-right: 1.5em;
      margin-left: 0;
    }

.rich-text ul {
    margin-left: 1em; /* Note: No CSS variable used since this should not be influenced by those settings. */
    list-style-type: disc;
  }

[dir="rtl"] .rich-text ul {
      margin-right: 1em;
      margin-left: 0;
    }

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

  @media (min-width: 62rem) {.padding-top-s {
    padding-top: var(--s-xxl)
}
  }

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

@media (min-width: 62rem) {

.padding-bottom-s {
    padding-bottom: var(--s-xxl)
}
  }

.padding-top-m {
  padding-top: var(--s-xxl);
}

@media (min-width: 62rem) {

.padding-top-m {
    padding-top: var(--s-xxxl)
}
  }

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

@media (min-width: 62rem) {

.padding-bottom-m {
    padding-bottom: var(--s-xxxl)
}
  }

.padding-top-l {
  padding-top: var(--s-xxxl);
}

@media (min-width: 62rem) {

.padding-top-l {
    padding-top: var(--s-xxxxl)
}
  }

.padding-bottom-l {
  padding-bottom: var(--s-xxxl);
}

@media (min-width: 62rem) {

.padding-bottom-l {
    padding-bottom: var(--s-xxxxl)
}
  }

.text-align-left {
		text-align: left;
	}
	.text-align-center {
		text-align: center;
	}
	.text-align-right {
		text-align: right;
	}

.hidden {
  display: none;
}

.glide{position:relative;width:100%;-webkit-box-sizing:border-box;box-sizing:border-box}.glide *{-webkit-box-sizing:inherit;box-sizing:inherit}.glide__track{overflow:hidden}.glide__slides{position:relative;width:100%;list-style:none;-webkit-backface-visibility:hidden;backface-visibility:hidden;-webkit-transform-style:preserve-3d;transform-style:preserve-3d;-ms-touch-action:pan-Y;touch-action:pan-Y;overflow:hidden;padding:0;white-space:nowrap;display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:nowrap;flex-wrap:nowrap;will-change:transform}.glide__slides--dragging{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.glide__slide{width:100%;height:100%;-ms-flex-negative:0;flex-shrink:0;white-space:normal;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}.glide__slide a{-webkit-user-select:none;user-select:none;-webkit-user-drag:none;-moz-user-select:none;-ms-user-select:none}.glide__arrows{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.glide__bullets{-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.glide--rtl{direction:rtl}



.header-language-selector-wrapper {
  position: absolute;
  left: 50%;
  -webkit-transform: translateX(-50%);
          transform: translateX(-50%);
  top: 10px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: end;
      -ms-flex-pack: end;
          justify-content: flex-end;
  z-index: var(--z-index-language-selector);
}

  @media (max-width: 74.9375rem) {.header-language-selector-wrapper {
    width: auto;
    top: 50%;
    left: 0;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-transform: translate(0, -50%);
            transform: translate(0, -50%)
}
  }

.language-selector {
  position: relative;
  color: var(--color-white);
  font-size: var(--fs-xs);
}

.language-selector .language-selector-select-link {
    color: var(--color-white);
    cursor: pointer;
    position: relative;
    padding-right: 16px;
    display: inline-block;
  }

.language-selector .language-selector-select-link::after {
      position: absolute;
      content: '';
      top: 50%;
      right: 0;
      width: 0;
      height: 0;
      border-left: 6px solid transparent;
      border-right: 6px solid transparent;
      border-top: 6px solid #fff;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%);
    }

.language-selector-item-container {
    position: absolute;
    background: var(--color-white);
    -webkit-box-shadow: var(--box-shadow-subtle);
            box-shadow: var(--box-shadow-subtle);
    margin: 0;
    display: none;
  }

.language-selector-item-container .language-selector-item a {
      display: block;
      padding: var(--s-s);
    }

.language-selector-item-container .language-selector-item a:hover {
        background: var(--color-light-gray);
      }



.recipe-ingredient-list {
  font-size: var(--fs-l);
}

  .recipe-ingredient-list > ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

  .recipe-ingredient-list > ul > li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 calc(12 / 12 * 100%);
              flex: 0 0 calc(12 / 12 * 100%);
      width: calc(12 / 12 * 100%);
      max-width: calc(12 / 12 * 100%);
      padding-left: 15px;
      padding-right: 15px;
    }

  @media (min-width: 48rem) {

  .recipe-ingredient-list > ul > li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(6 / 12 * 100%);
                flex: 0 0 calc(6 / 12 * 100%);
        width: calc(6 / 12 * 100%);
        max-width: calc(6 / 12 * 100%);
        padding-left: 15px;
        padding-right: 15px
    }
      }

  /* hide title if there is only one column */

  .recipe-ingredient-list > ul > li:only-child h5 {
          display: none;
        }

  .recipe-ingredient-list li {
    padding: var(--s-s) 0;
  }

  .recipe-ingredient-list h5 {
    padding: var(--s-s) 0;
    color: var(--brand-color-7);
    border-bottom: solid 1px var(--brand-color-8);
    text-transform: none;
    font-size: var(--fs-l);
  }

  .recipe-ingredient-list a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .recipe-ingredient-list a span {
      -webkit-box-flex: 1;
          -ms-flex: 1;
              flex: 1;
      max-width: 20rem;
    }

  .recipe-ingredient-list img {
    max-width: 80px;
    margin-right: var(--s-s);
  }

[dir='rtl'] .recipe-ingredient-list img {
    margin-right: 0;
    margin-left: var(--s-s);
  }

.recipe-filter-container .results-count {
    font-size: var(--fs-m);
    text-align: center;
  }
    @media(min-width: 62rem) {.recipe-filter-container .results-count {
      font-size: var(--fs-l);
      text-align: left
  }
    }
  .recipe-filter-container .link {
    text-align: center;
    font-size: var(--fs-m);
  }
  @media(min-width: 62rem) {
  .recipe-filter-container .link {
      text-align: right
  }
    }
  .recipe-filter-container .facet-single-selection-list {
    margin: var(--m-s) 0;
  }
  @media(min-width: 62rem) {
  .recipe-filter-container .facet-single-selection-list {
      margin-top: var(--m-m)
  }
    }
  .recipe-filter-container .facet-heading {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }
  .recipe-filter-container .clear-filter {
    background-color: var(--color-light-gray);
    cursor: pointer;
    height: 25px;
    width: 25px;
    text-align: center;
    border-radius: var(--border-radius-rounded);
  }
  .recipe-filter-container .facet-search-filter .facet-value { 
      position: relative;
      padding: var(--s-s) var(--s-xl);
      margin: 0;
      border-bottom: 1px dotted var(--border-color);
    }
  .recipe-filter-container .facet-search-filter .facet-value::before {
        content: "";
        position: absolute;
        height: 16px;
        width: 16px;
        border: 1px solid var(--color-black);
        top: 12px;
        left: var(--s-xs);
      }
  .recipe-filter-container .facet-search-filter .active-facet::after {
        position: absolute;
        height: 8px;
        width: 18px;
        border-left: 2px solid;
        border-bottom: 2px solid;
        -webkit-transform: rotate(-45deg);
                transform: rotate(-45deg);
        left: 8px;
        top: 12px;
        content: "";
      }
  .recipe-filter-container .page-selector {
    text-align: center;
  }
  .recipe-filter-container .page-selector .page-selector-list li {
        display: inline-block;
        padding: 0 var(--s-s);
      }
  @media(min-width: 62rem) {
  .recipe-filter-container .page-selector .page-selector-list li {
          padding: 0 var(--s-m)
      }
        }
  .recipe-filter-container .page-selector .page-selector-list li a {
          color: var(--text-color);
          font-size: var(--fs-m);
        }
  .recipe-filter-container .page-selector .page-selector-list .page-selector-item-link.active {
          background-color: var(--brand-color-1);
          font-weight: var(--fw-bold);
          border-radius: var(--border-radius-rounded);
          color: var(--color-white);
          padding: var(--s-s) var(--s-m);
        }
.wholesaler-image-list {
    background: var(--brand-color-2);
    text-align: center;
    margin-bottom: var(--s-l);
}

    .wholesaler-image-list.bgc-texture-mask--top {
        padding-top: 0;
        padding-bottom: var(--s-xl);
        overflow: hidden;
    }

    .wholesaler-image-list.bgc-texture-mask--top:after {
            bottom: calc(100% - 70px);
        }

    @media (max-width: 47.9375rem) {

    .wholesaler-image-list.bgc-texture-mask--top:after {
                bottom: calc(100% - 33px)
        }
            }

    .wholesaler-image-list.bgc-texture-mask--top:before {
            display: none;
        }

    .wholesaler-image-list .component-content {
        z-index: 1;
    }

    .wholesaler-image-list .container-image {
        margin-bottom: var(--s-xxl);
        max-width: 15vw;
    }

    @media (max-width: 61.9375rem) {

    .wholesaler-image-list .container-image {
            margin-bottom: var(--s-xl);
            max-width: 20vw
    }
        }

    @media (max-width: 47.9375rem) {

    .wholesaler-image-list .container-image {
            margin-bottom: var(--s-l);
            max-width: 25vw
    }
        }

    @media (max-width: 35.9375rem) {

    .wholesaler-image-list .container-image {
            max-width: 35vw
    }
        }

    .wholesaler-image-list h2,
    .wholesaler-image-list h3 {
        color: var(--color-white);
    }

    .wholesaler-image-list ul.list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: stretch;
            -ms-flex-align: stretch;
                align-items: stretch;
    }

    .wholesaler-image-list ul.list li {
            --item-width: calc(20% - 2*var(--s-l));
            -webkit-box-flex: 1;
                -ms-flex: 1 1 var(--item-width);
                    flex: 1 1 var(--item-width);
            max-width: var(--item-width);
            margin: var(--s-l);
        }

    @media (max-width: 74.9375rem) {

    .wholesaler-image-list ul.list li {
                --item-width: calc(25% - 2*var(--s-m));
                margin: var(--s-m)
        }
            }

    @media (max-width: 61.9375rem) {

    .wholesaler-image-list ul.list li {
                --item-width: calc(33.3% - 2*var(--s-m))
        }
            }

    @media (max-width: 47.9375rem) {

    .wholesaler-image-list ul.list li {
                --item-width: calc(50% - 2*var(--s-m))
        }
            }

    @media (max-width: 35.9375rem) {

    .wholesaler-image-list ul.list li {
                --item-width: 50vw;
                margin: var(--s-m) 0
        }
            }

    .wholesaler-image-list ul.list a {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            border-radius: var(--s-m);
            background: var(--color-white);
            width: 100%;
            height: 100%;
            padding: var(--s-m) var(--s-l);
        }

    .wholesaler-image-list ul.list a:hover {
                -webkit-box-shadow: var(--box-shadow-card-hover);
                        box-shadow: var(--box-shadow-card-hover);
            }

    .wholesaler-image-list ul.list img {
            -webkit-box-flex: 0;
                -ms-flex: 0 1 auto;
                    flex: 0 1 auto;
        }

.carouselbanner {
  position: relative;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center center;
  background-size: cover;
}

  @media (max-width: 74.9375rem) {.carouselbanner {
    background-image: none !important
}
  }

  .carouselbanner li {
    position: relative;
  }

  @media (min-width: 62rem) {

  .carouselbanner li {
      padding: var(--s-m) var(--s-xxxxl)
  }
    }

  .carouselbanner .carousel-image {
    width: 100%;
  }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-image {
      border-radius: var(--border-radius-s)
  }
    }

  .carouselbanner .carousel-content {
    padding: var(--s-l);
  }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content {
      padding: var(--s-xxl)
  }
    }

  @media (max-width: 61.9375rem) {

  .carouselbanner .carousel-content {
      text-align: center
  }
    }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content {
      z-index: 10;
      position: absolute
  }
    }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content.is-left-aligned {
        left: var(--s-xxxxl);
        text-align: left
    }
      }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content.is-center-aligned {
        left: 50%;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        text-align: center
    }
      }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content.is-right-aligned {
        right: var(--s-xxxxl);
        text-align: right
    }
      }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content.is-top-aligned {
        top: var(--s-m)
    }
      }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content.is-middle-aligned {
        top: 50%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%)
    }

        .carouselbanner .carousel-content.is-middle-aligned.is-center-aligned {
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
        }
      }

  @media (min-width: 62rem) {

  .carouselbanner .carousel-content.is-bottom-aligned {
        bottom: var(--s-m)
    }
      }

  .carouselbanner .carousel-content h2:empty, .carouselbanner .carousel-content h3:empty, .carouselbanner .carousel-content p:empty, .carouselbanner .carousel-content .btn-primary:empty {
        display: none;
      }

  @media (max-width: 61.9375rem) {

  .carouselbanner .glide__arrows {
      display: none
  }
    }

  .carouselbanner .glide__arrow {
    background-color: rgba(255, 255, 255, 0.7);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    line-height: 40px;
    display: block;
    z-index: 20;
    position: absolute;
    top: 40px;
    text-align: center;
    font-size: var(--fs-xl);
    color: var(--primary-color);
    cursor: pointer;
  }

  @media (min-width: 62rem) {

  .carouselbanner .glide__arrow {
      width: 50px;
      height: 50px;
      line-height: 50px;
      top: 50%;
      -webkit-transform: translateY(-50%);
              transform: translateY(-50%)
  }
    }

  .carouselbanner .glide__arrow::after {
      position: absolute;
      top: 50%;
    }

  .carouselbanner .glide__arrow.glide__arrow--left {
      left: var(--s-l);
    }

  .carouselbanner .glide__arrow.glide__arrow--left::after {
        content: '\00276C';
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
      }

  .carouselbanner .glide__arrow.glide__arrow--right {
      right: var(--s-l);
    }

  .carouselbanner .glide__arrow.glide__arrow--right::after {
        content: '\00276D';
        right: 50%;
        -webkit-transform: translate(50%, -50%);
                transform: translate(50%, -50%);
      }

  .carouselbanner .glide__bullets {
    text-align: center;
  }

  .carouselbanner .glide__bullet {
    display: inline-block;
    width: var(--s-s);
    height: var(--s-s);
    margin: 0 var(--s-xs);
    background: var(--color-medium-light-gray);
    border-radius: var(--s-xs);
    cursor: pointer;
  }

  .carouselbanner .glide__bullet--active {
      background: var(--primary-color);
    }



.link-list-with-image.country-language-selection {
  
  margin-bottom: var(--s-l);

}
  
  .link-list-with-image.country-language-selection .list-image,
  .link-list-with-image.country-language-selection .list-title {
    display: inline-block;
    margin-bottom: var(--s-xs);
    line-height: 1.5rem;
  }
  
  .link-list-with-image.country-language-selection .list-image {
    vertical-align: middle;
    width: 30px;
  }
  
  .link-list-with-image.country-language-selection .list-title {
    vertical-align: top;
    max-width: calc(100% - 30px - 0.33em);
    font-size: var(--fs-m);
    text-transform: none;
    font-family: var(--ff-body);
    font-weight: 400;
  }
  
  .link-list-with-image.country-language-selection .list {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-left: calc(30px + 0.33em);
  }
  
  .link-list-with-image.country-language-selection [class^=item] {
    -webkit-box-flex: 1;
        -ms-flex: 1 1 100%;
            flex: 1 1 100%;
    margin-bottom: var(--m-xs);
    font-size: var(--fs-s);
    line-height: normal;
  }
  
  @media (min-width: 48rem) {
  
  .link-list-with-image.country-language-selection [class^=item] {
      margin-right: var(--m);
      -ms-flex-preferred-size: calc(50% - var(--m));
          flex-basis: calc(50% - var(--m))
  }
    }
  
  .link-list-with-image.country-language-selection .field-link a {
    color: var(--color-medium-gray);
  }




.header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--header-color);
}

  .header .header-nav-icon {
    position: absolute;
    top: 50%;
    right: var(--s-l);
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    z-index: 10;
    height: 40px;
    width: 40px;
    cursor: pointer;
  }

  .header .header-nav-icon .component-content {
      position: relative;
      width: 100%;
      height: 100%;
    }

  .header .header-nav-icon .nav-icon {
      position: absolute;
      top: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
      left: 50%;
    }

  .header .navigation {
    padding: 0;
  }

  @media (max-width: 61.9375rem) {

  .header .navigation nav {
        opacity: 0;
        -webkit-transition: opacity var(--transition-timing-fast);
        transition: opacity var(--transition-timing-fast)
    }

        .header .navigation nav a {
          color: var(--color-white);
          padding: var(--s-m) var(--s);
          display: block;
          font-size: var(--fs-s);
        }
      }

  @media (max-width: 61.9375rem) {

  .header .navigation .meta-navigation-mobile {
        opacity: 0;
        -webkit-transition: opacity var(--transition-timing-fast);
        transition: opacity var(--transition-timing-fast);
        padding-top: var(--s-s);
        padding-bottom: var(--m-xl);
        border-top: solid 1px var(--background-color-light);
        margin-top: var(--s-s)
    }

        .header .navigation .meta-navigation-mobile a {
          display: block;
          color: var(--color-white);
          -webkit-transition-property: color;
          transition-property: color;
          padding: var(--s-xs) var(--s-s);
          font-size: var(--fs-s);
        }
      }

[dir='rtl'] .header .header-nav-icon {
    left: var(--s-l);
    right: auto;
  }

.header-logo-center {
  width: 100%;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform var(--transition-timing-fast);
  transition: -webkit-transform var(--transition-timing-fast);
  transition: transform var(--transition-timing-fast);
  transition: transform var(--transition-timing-fast), -webkit-transform var(--transition-timing-fast);
  -webkit-box-shadow: var(--box-shadow-hairline);
          box-shadow: var(--box-shadow-hairline);
}

  @media (min-width: 62rem) {.header-logo-center {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    height: var(--header-height-desktop);
    width: 100%
}
  }

  @media (min-width: 62rem) {

  .header-logo-center .header-nav-icon {
      display: none
  }
    }

  /* ftw */

  .header-logo-center > .component-content {
    width: 100%;
  }

  .header-logo-center .header-logo-wrapper {
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    height: var(--header-height-mobile);
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    margin: auto;
    z-index: 200;
  }

  .header-logo-center .header-logo-wrapper .image--logo {
      text-align: center;
    }

  .header-logo-center .header-logo-wrapper .image--logo a {
        display: inline-block;
        width: var(--logo-width);
      }

  @media (min-width: 62rem) {

  .header-logo-center .header-logo-wrapper .image--logo a {
          width: var(--logo-width-desktop)
      }
        }

  @media (min-width: 62rem) {

  .header-logo-center .header-logo-wrapper {
      padding: 0;
      width: var(--logo-width)
  }
    }

  @media (max-width: 61.9375rem) {

  .header-logo-center .navigation {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      background: var(--primary-color);
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: center;
      -webkit-transition: height var(--transition-timing-slow);
      transition: height var(--transition-timing-slow);
      height: 0;
      z-index: 0;
      overflow: auto
  }
    }

  @media (min-width: 62rem) {

  .header-logo-center .navigation {
      max-width: 960px;
      margin: 0 auto
  }
    }

  @media (min-width: 75rem) {

  .header-logo-center .navigation {
      max-width: 1140px
  }
    }

  @media (max-width: 61.9375rem) {

  .header-logo-center .navigation.is-open {
        height: calc(100vh - var(--header-height-mobile))
    }
      }

  .header-logo-center .navigation.is-open nav, .header-logo-center .navigation.is-open .meta-navigation-mobile {
        opacity: 1;
      }

  @media (min-width: 62rem) {

  .header-logo-center .navigation {
      text-align: center
  }

      .header-logo-center .navigation ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
        .header-logo-center .navigation ul li {
          -ms-flex-item-align: center;
              align-self: center;
        }

      .header-logo-center .navigation a {
        position: relative;
        display: inline-block;
        text-decoration: none;
        padding-top: var(--s-m);
        padding-bottom: var(--s-m);
        color: var(--color-darkest-gray);
      }

        .header-logo-center .navigation a::after {
          content: '';
          width: 100%;
          height: 3px;
          background-color: var(--primary-color);
          position: absolute;
          bottom: 8px;
          left: 0;
          -webkit-transform: scaleX(0);
                  transform: scaleX(0);
          -webkit-transition: all var(--duration-m) var(--ease-in-out);
          transition: all var(--duration-m) var(--ease-in-out);
        }

        .header-logo-center .navigation a:hover::after {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
        }
        .header-logo-center .navigation .active a::after {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
        }
    }

  .header-logo-center .header-bottom {
    position: relative;
  }

  @media (min-width: 62rem) {
        .header-logo-center .header-bottom.has-centered-logo .header-logo-wrapper {
          position: absolute;
          top: 50%;
          left: 0;
          right: 0;
          margin: auto;
          z-index: 100;
          -webkit-transform: translateY(-50%);
                  transform: translateY(-50%);
        }
          /* base width of all li items */
          .header-logo-center .header-bottom.has-centered-logo .navigation li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(25% - (var(--logo-width) / 4));
                    flex: 0 0 calc(25% - (var(--logo-width) / 4));
          }

          /* space in the middle to make room for logo */
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(1),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(2),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:nth-of-type(2),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(4) ~ li:nth-of-type(2),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(6) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7) ~ li:nth-of-type(4) {
            margin-right: var(--logo-width);
          }
            [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(1), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(2), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:nth-of-type(2), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(4) ~ li:nth-of-type(2), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:nth-of-type(3), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(6) ~ li:nth-of-type(3), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7) ~ li:nth-of-type(4) {
              margin-right: 0;
              margin-right: initial;
              margin-left: var(--logo-width);
            }

          /* if uneven amount of items, add ghost space at and of line */
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:last-child {
            margin-right: calc(25% - (var(--logo-width) / 4));
          }
            [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:last-child {
                margin-right: 0;
                margin-right: initial;
                margin-left: calc(25% - (var(--logo-width) / 4));
            }
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:last-child {
            margin-right: calc(16.6667% - (var(--logo-width) / 6));
          }
            [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:last-child {
              margin-right: 0;
              margin-right: initial;
              margin-left: calc(16.6667% - (var(--logo-width) / 6));
            }
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(7) ~ li:last-child {
            margin-right: calc(12.5% - (var(--logo-width) / 8));
          }
            [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(7) ~ li:last-child {
              margin-right: 0;
              margin-right: initial;
              margin-left: calc(12.5% - (var(--logo-width) / 8));
            }

          /* if 5 or 6 items, set width of items to 1/6 minus logo width divided by amount of items */
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 5):nth-last-of-type(-n + 6),
          .header-logo-center .header-bottom.has-centered-logo .navigation
            li:first-child:nth-last-of-type(n + 5):nth-last-of-type(-n + 6)
            ~ li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(16.6667% - (var(--logo-width) / 6));
                    flex: 0 0 calc(16.6667% - (var(--logo-width) / 6));
          }
          /* if 7 or more items, set width of items to 1/8 minus logo width divided by amount of items */
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7) ~ li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(12.5% - (var(--logo-width) / 8));
                    flex: 0 0 calc(12.5% - (var(--logo-width) / 8));
          }

          /* if 5 or more items, decrease padding and font size */
            .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 5) a, .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 5) ~ li a {
              font-size: var(--fs-m);
            }

          /* if 9 or more items, hide them, does not fit */
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 9) ~ li:nth-of-type(n + 9) {
            display: none;
          }
      }

#header.has-moved-up .header-logo-center {
    -webkit-transform: translate3d(0px, -170px, 0px);
            transform: translate3d(0px, -170px, 0px);
  }

.header-logo-left {
  background: var(--header-color);
  min-height: var(--header-height-mobile);
  z-index: 1000;
}

  @media (min-width: 62rem) {.header-logo-left {
    min-height: var(--header-height-desktop);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    width: 100%
}
  }

  .header-logo-left .header-nav-icon {
    top: 40px;
  }

  @media (min-width: 62rem) {

  .header-logo-left .header-nav-icon {
      display: none
  }
    }

  .header-logo-left .file-type-icon-media-link {
    position: absolute;
    top: 10px;
    left: 30px;
    z-index: 1000;
  }

  [dir="rtl"] .header-logo-left .file-type-icon-media-link {
      right: 30px;
      left: auto;
    }

  @media (min-width: 75rem) {

  .header-logo-left .file-type-icon-media-link {
      padding: 0;
      width: auto
  }
      [dir="rtl"] .header-logo-left .file-type-icon-media-link {
        left: auto;
        right: 30px;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
      }
    }

  @media (min-width: 62rem) {

  .header-logo-left .file-type-icon-media-link img {
        width: var(--logo-width-desktop)
    }
      }

  @media (max-width: 74.9375rem) {

  .header-logo-left .file-type-icon-media-link img {
        max-width: var(--logo-width);
        max-height: 60px;
        width: auto;
        height: auto
    }
      }

  @media (max-width: 61.9375rem) {

  .header-logo-left .navigation {
      margin-top: var(--header-height-mobile);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      background: var(--primary-color);
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: center;
      -webkit-transition: height var(--transition-timing-slow);
      transition: height var(--transition-timing-slow);
      height: 0;
      z-index: 0;
      overflow: auto
  }
    }

  @media (max-width: 74.9375rem) {

  .header-logo-left .navigation nav {
        width: 100vw
    }

        .header-logo-left .navigation nav a {
          color: var(--header-text-color-mobile);
          padding: var(--s-m) var(--s);
          display: block;
          font-size: var(--fs-s);
        }
      }

  @media (max-width: 74.9375rem) {

  .header-logo-left .navigation.is-open {
        height: calc(100vh - var(--header-height-mobile))
    }
      }

  .header-logo-left .navigation.is-open nav, .header-logo-left .navigation.is-open .meta-navigation-mobile {
        opacity: 1;
      }

  @media (min-width: 62rem) {
      .header-logo-left .navigation ul {
        height: 6.25rem;
        padding: 0 var(--s-m);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }

      .header-logo-left .navigation a {
        position: relative;
        display: inline-block;
        text-decoration: none;
        padding: var(--s-l) 0;
        margin: var(--s-l);
        color: var(--header-text-color);
        font-family: var(--ff-navigation);
        font-size: var(--fs-navigation);
      }

        .header-logo-left .navigation a::after {
          content: '';
          width: 100%;
          height: 3px;
          background-color: var(--header-text-color);
          position: absolute;
          bottom: 8px;
          left: 0;
          -webkit-transform: scaleX(0);
                  transform: scaleX(0);
          -webkit-transition: all var(--duration-m) var(--ease-in-out);
          transition: all var(--duration-m) var(--ease-in-out);
        }

        .header-logo-left .navigation a:hover::after {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
        }
        .header-logo-left .navigation .active a::after {
          -webkit-transform: scaleX(1);
                  transform: scaleX(1);
        }
    }

:root {
  --meta-header-height: 40px;
}

body.has-meta-nav {
  padding-top: var(--header-height-mobile);
}

@media (min-width: 62rem) {

body.has-meta-nav {
    padding-top: calc(var(--header-height-desktop) + 40px);
    padding-top: calc(var(--header-height-desktop) + var(--meta-header-height))
}
  }

.meta-header {
  position: fixed;
  background-color: var(--meta-header-color);
  z-index: 1000;
  height: 40px;
  height: var(--meta-header-height);
  line-height: 40px;
  line-height: var(--meta-header-height);
  overflow: hidden;
  -webkit-transform: translate3d(0px, 0px, 0px);
          transform: translate3d(0px, 0px, 0px);
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform var(--transition-timing-fast);
  transition: -webkit-transform var(--transition-timing-fast);
  transition: transform var(--transition-timing-fast);
  transition: transform var(--transition-timing-fast), -webkit-transform var(--transition-timing-fast);
}

@media (max-width: 61.9375rem) {

.meta-header {
    display: none
}
  }

@media (min-width: 48rem) {

.meta-header {
    top: 0
}
  }

.meta-header .link-list li {
      display: inline-block;
      margin-right: var(--s-m);
      position: relative;
    }

[dir="rtl"] .meta-header .link-list li {
        margin-right: 0;
        margin-left: var(--s-m);
      }

.meta-header .link-list li:last-child {
        margin-right: 0;
      }

.meta-header .link-list li:last-child::after {
          width: 0;
        }

[dir="rtl"] .meta-header .link-list li:last-child {
          margin-left: 0;
        }

.meta-header .link-list li::after {
        content: '';
        width: 2px;
        position: absolute;
        height: calc(40px / 2);
        height: calc(var(--meta-header-height) / 2);
        top: calc(40px / 4);
        top: calc(var(--meta-header-height) / 4);
        right: -12px; /* hard value for positioning */
        background: var(--color-white);
      }

[dir="rtl"] .meta-header .link-list li::after {
          right: auto;
          right: initial;
          left: -12px;
        }

.meta-header .link-list li a {
        color: var(--color-white);
      }

[dir="rtl"] .meta-header .link-list.text-align-right {
        text-align: left;
      }

/* Add top margin if meta header is added */
@media (min-width: 62rem) {
.has-meta-nav .header-logo-center,
  .has-meta-nav .header-logo-left {
      top: 40px;
      top: var(--meta-header-height)
  }
    }

#header.has-moved-up .meta-header {
    -webkit-transform: translate3d(0px, -40px, 0px);
            transform: translate3d(0px, -40px, 0px);
  }

body.on-page-editor .meta-header {
  position: relative;
  height: 100px;
  background: var(--meta-header-color);
}

footer {
  background-color: var(--footer-color);
  color: var(--footer-text-color);
  font-size: var(--fs-xs);
  padding-top: var(--s-xxxl);
  padding-bottom: var(--s-xxxl);
}

  @media (max-width: 47.9375rem) {
      footer [class*=' col-'] [class*=' col-'],
      footer [class*=' col-'] [class^='col-'],
      footer [class^='col-'] [class*=' col-'],
      footer [class^='col-'] [class^='col-'] {
        padding-left: 0;
        padding-right: 0;
      }
  }

  footer a {
    color: var(--footer-text-color);
    opacity: var(--opacity-m);
  }

  footer a:hover {
      color: var(--footer-text-color);
      opacity: 1;
    }

  footer h3 {
    color: var(--footer-text-color);
    font-size: var(--fs-m);
  }

  footer hr {
    border-bottom: 1px solid var(--footer-text-color);
    opacity: var(--opacity-xl);
  }

  @media (max-width: 61.9375rem) {

  footer ul {
      margin-bottom: var(--s-m)
  }
    }

  footer .footer-logo {
    margin-bottom: var(--s-m);
    max-width: 150px;
  }

  @media (max-width: 35.9375rem) {

  footer .footer-logo {
      margin-right: auto;
      margin-left: auto
  }
    }

  footer .footer-logo a {
      opacity: 1;
    }

  footer .footer-logo img {
      min-width: 100px;
    }

  footer .rich-text {
    opacity: var(--opacity-s);
  }

  footer .footer-top {
    padding-bottom: var(--s-m);
  }

  @media (max-width: 35.9375rem) {

  footer .footer-top {
      text-align: center
  }
    }

  footer .footer-top .rich-text {
      margin-bottom: var(--s-xl);
    }

  @media (min-width: 62rem) {

  footer .footer-top .rich-text {
        padding-right: var(--s-xxxl)
    }
        [dir="rtl"] footer .footer-top .rich-text {
          padding-right: 0;
          padding-left: var(--s-xxxl);
        }
      }

  footer .footer-bottom {
    padding-top: var(--s-m);
    text-align: center;
  }

  @media (min-width: 48rem) {

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

      footer .footer-bottom .rich-text {
        text-align: right;
      }
    }

  footer .social-icons-link-list {
    margin-bottom: var(--s-m);
  }

  footer .social-icons-link-list li {
      display: inline-block;
    }

  footer .social-icons-link-list li:empty {
        display: none;
      }

  footer .social-icons-link-list li a {
        opacity: 1;
        position: relative;
        overflow: hidden;
        width: var(--icon-size-m);
        height: var(--icon-size-m);
        display: inline-block;
        white-space: nowrap;
        text-indent: -99999px;
      }

  footer .social-icons-link-list li a::before {
          content: '';
          text-indent: 0;
          line-height: 0;
          width: var(--icon-size-s);
          height: var(--icon-size-s);
          position: absolute;
          top: 50%;
          left: 50%;
          -webkit-transform: translate(-50%, -50%);
                  transform: translate(-50%, -50%);
          z-index: 100;
        }

  footer .social-icons-link-list li a::after {
          content: '';
          border-radius: 3px;
          background-color: hsla(0, 0%, 100%, 0.15);
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          -webkit-transition: background-color var(--transition-timing-fast);
          transition: background-color var(--transition-timing-fast);
        }

  footer .social-icons-link-list li a.facebook::before {
            content: url(`../../../Images/facebook-icon.svg`);
          }

  footer .social-icons-link-list li a.facebook:hover::after {
              background-color: var(--color-facebook);
            }

  footer .social-icons-link-list li a.twitter::before {
            content: url(`../../../Images/twitter-icon.svg`);
          }

  footer .social-icons-link-list li a.twitter:hover::after {
              background-color: var(--color-twitter);
            }

  footer .social-icons-link-list li a.instagram::before {
            content: url(`../../../Images/instagram-icon-white.svg`);
          }

  footer .social-icons-link-list li a.instagram:hover::after {
              background-color: var(--color-instagram);
            }

  footer .social-icons-link-list li a.youtube::before {
            content: url(`../../../Images/youtube-icon-white.svg`);
          }

  footer .social-icons-link-list li a.youtube:hover::after {
              background-color: var(--color-youtube);
            }

  footer .social-icons-link-list li a.pinterest::before {
            content: url(`../../../Images/pinterest-icon-white.svg`);
          }

  footer .social-icons-link-list li a.pinterest:hover::after {
              background-color: var(--color-pinterest);
            }

.splash-screen a {
    position: relative;
    display: block;
    margin-bottom: var(--s-m);
    text-decoration: none;
    padding-left: 46px;
  }

    .splash-screen a img {
      position: absolute;
      top: 6px;
      left: 0;
      width: 30px;
    }

    .splash-screen a div {
      color: var(--color-medium-light-gray);
    }

/* no vars, because of missing support from IE */
.ie-message {
  text-align: center;
  display: none;
  background-color: red;
  position: relative;
  z-index: 9999;
  padding: 2rem;
  color: white;
}
.ie-message a {
    font-weight: bold;
    color: white;
    text-decoration: underline;
  }
.ie-message.visible {
    display: block;
  }

body.on-page-editor .ie-message {
  display: none;
}

body.has-notification-bar {
  --notification-bar-height: 5rem;
  --notification-speed: 600ms;
}

  @media (min-width: 62rem) {body.has-notification-bar {
    --notification-bar-height: 3.5rem
}
  }

  body.has-notification-bar-top {
    -webkit-transition: padding-top var(--notification-speed);
    transition: padding-top var(--notification-speed);
  }

  body.has-notification-bar-top .meta-header,
    body.has-notification-bar-top .header-logo-center,
    body.has-notification-bar-top .header-logo-left {
      -webkit-transition: top var(--notification-speed);
      transition: top var(--notification-speed);
    }

  body.has-notification-bar-top.show-notification-bar {
      padding-top: calc(var(--header-height-mobile) + var(--notification-bar-height));
    }

  body.has-notification-bar-top.show-notification-bar .header-logo-center,
      body.has-notification-bar-top.show-notification-bar .header-logo-left {
        top: var(--notification-bar-height);
      }

  @media (min-width: 62rem) {

  body.has-notification-bar-top.show-notification-bar {
        padding-top: calc(var(--header-height-desktop) + var(--notification-bar-height))
    }

        body.has-notification-bar-top.show-notification-bar.has-meta-nav { 
          padding-top: calc(var(--header-height-desktop) + var(--meta-header-height) + var(--notification-bar-height));
        }

          body.has-notification-bar-top.show-notification-bar.has-meta-nav .meta-header {
            top: var(--notification-bar-height);
          }
          
          body.has-notification-bar-top.show-notification-bar.has-meta-nav .header-logo-center,
          body.has-notification-bar-top.show-notification-bar.has-meta-nav .header-logo-left {
            top: calc(var(--meta-header-height) + var(--notification-bar-height));
          }
      }

.notification-bar {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  -webkit-transition: height var(--notification-speed);
  transition: height var(--notification-speed);
  height: 0;
  background: var(--background-color-brand);
  overflow: hidden;
  z-index: 2000;
}

.notification-bar.align-bottom {
    top: auto;
    bottom: 0;
  }

.show-notification-bar .notification-bar {
    height: var(--notification-bar-height);
  }

.notification-bar .notification-content {
    padding: 1rem;
    margin-right: 1rem;
    line-height: 1.5rem;
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

.notification-bar .notification-content * {
      margin: 0;
    }

.notification-bar .btn-cta {
    margin-right: 1rem;
  }

.notification-bar .btn-close {
    margin: 0 1rem;
    padding: 0;
    color: var(--text-color);
    font-weight: bold;
    font-size: var(--fs-xl);
    line-height: var(--fs-xl);
  }
:root {
  --accordion-toggle-header-inidcator-size: 3rem;
}

.accordion {
  margin-bottom: var(--s-m);
}

.accordion .items .item {
      margin-bottom: var(--s-l);
    }

.accordion .items .item.active .toggle-header::after {
        -webkit-transform: rotate(45deg) translateY(-50%);
                transform: rotate(45deg) translateY(-50%);
      }

.accordion .toggle-header {
    position: relative;
    background-color: var(--color-lighter-gray);
    border-radius: var(-- --border-radius-m);
    padding: var(--s-l) calc(var(--s-m) + var(--s-m) + var(--s-m)) var(--s-l)
      var(--s-m);
    -webkit-box-shadow: var(--box-shadow-hairline);
            box-shadow: var(--box-shadow-hairline);
    cursor: pointer;
    -webkit-transition: all var(--transition-timing-fast);
    transition: all var(--transition-timing-fast);
  }

[dir="rtl"] .accordion .toggle-header {
      padding-left: 0;
    }

.accordion .toggle-header:hover {
      background-color: var(--color-light-gray);
      -webkit-box-shadow: var(--box-shadow-subtle);
              box-shadow: var(--box-shadow-subtle);
    }

.accordion .toggle-header:focus {
      outline: 0;
    }

.accordion .toggle-header::after {
      content: '+';
      position: absolute;
      top: 50%;
      right: var(--s-m);
      background-color: var(--color-white);
      width: 3rem;
      width: var(--accordion-toggle-header-inidcator-size);
      height: 3rem;
      height: var(--accordion-toggle-header-inidcator-size);
      line-height: calc(3rem - 0.1rem);
      line-height: calc(var(--accordion-toggle-header-inidcator-size) - 0.1rem);
      border-radius: var(--border-radius-rounded);
      font-size: var(--fs-xl);
      text-align: center;
      color: var(--primary-color);
      -webkit-transform: rotate(0deg) translateY(-50%);
              transform: rotate(0deg) translateY(-50%);
      -webkit-transform-origin: 50% 0%;
              transform-origin: 50% 0%;
      -webkit-transition: -webkit-transform 0.4s ease-out;
      transition: -webkit-transform 0.4s ease-out;
      transition: transform 0.4s ease-out;
      transition: transform 0.4s ease-out, -webkit-transform 0.4s ease-out;
    }

[dir="rtl"] .accordion .toggle-header::after {
        right: auto;
        right: initial;
        left: var(--s-m);
      }

.accordion .toggle-header div.field-heading {
      font-size: var(--fs-m);
      font-weight: var(--fw-bold);
      color: var(--color-black);
    }

.accordion .toggle-header p {
      margin-bottom: 0;
    }

.accordion .toggle-content > .content {
      padding: var(--s-l) var(--s-xl);
      font-size: var(--fs-m);
    }

.accordion p:last-child {
    margin-bottom: 0;
  }

.accordion.nutrition-facts-accordion .toggle-header {
    background: none;
    -webkit-box-shadow: none;
            box-shadow: none;
    padding-bottom: var(--s-m);
    padding-left: 0;
    border-bottom: 2px solid var(--primary-color);
  }

    [dir="rtl"] .accordion.nutrition-facts-accordion .toggle-header {
      padding-left: calc(var(--s-m) + var(--s-m) + var(--s-m));
      padding-right: 0;
    }

    .accordion.nutrition-facts-accordion .toggle-header .field-heading {
      margin-bottom: 0;
    }



.carousel {
  position: relative;
  text-align: center;
}
  .carousel .slides {
    width: 100%;
  }
  .carousel .slides .slide {
      overflow: hidden;
      text-align: center;
    }
  .carousel .slides .slide img {
        height: 45vh;
        -o-object-fit: cover;
           object-fit: cover;
        width: 100%;
      }
  @media (min-width: 62rem) {
  .carousel .slides .slide img {
          height: 40vh
      }
        }
  .carousel .slides .slide .slide-info {
        position: absolute;
        z-index: 500;
        top: 0;
        left: 10%;
        width: 80%;
        height: 80%;
      }
  .carousel .slides .slide .slide-info .field-slidetext {
          font-size: var(--fs-xl);
          margin-top: 10%;
        }
  @media (min-width: 62rem) {
  .carousel .slides .slide .slide-info .field-slidetext {
            font-size: var(--fs-xxl)
        }
          }
  .carousel .slides .slide .slide-info .field-slidelink a {
          background-color: var(--primary-color);
          color: var(--color-white);
          padding: var(--s-s) var(--s-m);
          display: inline-block;
          cursor: pointer;
          vertical-align: middle;
          font-family: var(--ff-body);
          font-size: var(--fs-s);
          line-height: var(--lh-s);
          text-decoration: none;
          text-align: center;
          text-transform: uppercase;
        }
  .carousel .nav {
    position: absolute;
    bottom: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: 100%;
    height: 100%;
    padding: var(--s-m);
  }
  .carousel .nav .nav-items {
      width: 100%;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      -ms-flex-item-align: end;
          align-self: flex-end;
    }
  .carousel .nav .nav-items .sxa-bullets {
        margin: var(--s-xs);
        background: var(--color-darker-gray);
        width: 10px;
        height: 10px;
        border-radius: var(--border-radius-rounded);
        cursor: pointer;
      }
  .carousel .nav .nav-items .sxa-bullets.active {
          background: var(--primary-color);
          cursor: default;
        }
  .carousel .nav .prev-text {
      display: block;
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-right: 15px solid var(--primary-color);
      -ms-flex-item-align: center;
          align-self: center;
    }
  [dir="rtl"] .carousel .nav .prev-text {
        border-right: 0;
        border-right: initial;
        border-left: 15px solid var(--primary-color);
      }
  @media (max-width: 47.9375rem) {
  .carousel .nav .prev-text {
        display: none
    }
      }
  .carousel .nav .next-text {
      display: block;
      width: 0;
      height: 0;
      border-top: 15px solid transparent;
      border-bottom: 15px solid transparent;
      border-left: 15px solid var(--primary-color);
      -ms-flex-item-align: center;
          align-self: center;
    }
  [dir="rtl"] .carousel .nav .next-text {
        border-left: 0;
        border-left: initial;
        border-right: 15px solid var(--primary-color);
      }
  @media (max-width: 47.9375rem) {
  .carousel .nav .next-text {
        display: none
    }
      }



.breadcrumb {
  padding: var(--s-m) var(--s-m) var(--s-m) 0;
}
  [dir="rtl"] .breadcrumb {
    padding-right: 0;
    padding-left: var(--s-m);
  }
  .breadcrumb ol {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
  .breadcrumb li {
    font-size: var(--fs-xs);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: var(--s-s);
  }
  .breadcrumb li a {
      margin-right: var(--s-s);
      color: var(--color-darker-gray);
    }
  [dir="rtl"] .breadcrumb li a {
        margin-right: 0;
        margin-left: var(--s-s);
      }
  .breadcrumb li:not(:nth-last-of-type(-n + 2)) {
    display: none;
  }
  .breadcrumb li:last-child {
    pointer-events: none;
  }
  .breadcrumb li:last-child .separator {
      display: none;
    }
  @media (min-width: 62rem) {.breadcrumb {
    display: inline-block
}
    .breadcrumb li:not(:nth-last-of-type(-n + 2)) {
      display: inherit;
    }
  }



.manual-teaser-list {
  text-align: center;
}

  .manual-teaser-list .component-content > h3 {
    font-size: var(--fs-xxl); /* Note: Needs to be as large as h2, but apparently there is no way to change this in the HTML structure. */
  }

.country-select-link-list {
  font-size: var(--fs-xs);
  margin-bottom: var(--s-s);
}

  @media (min-width: 62rem) {.country-select-link-list {
    font-size: var(--fs-m);
    margin-bottom: var(--s-l)
}
  }

  .country-select-link-list h6 {
    font-size: var(--fs-s);
  }

  @media (min-width: 62rem) {

  .country-select-link-list h6 {
      font-size: var(--fs-m)
  }
    }

  .country-select-link-list li a::before {
        content: url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/Images/marker.svg);
        margin-right: var(--s-s);
        display: inline-block;
        width: var(--icon-size-s);
        height: var(--icon-size-s);
      }

.inpage-navigation ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

    @media (max-width: 35.9375rem) {.inpage-navigation ul {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column
  }
    }

    @media (min-width: 36rem) {

    .inpage-navigation ul li {
        margin-right: var(--s-s)
    }

        .inpage-navigation ul li.last {
          margin-right: 0;
        }
      }

    @media (max-width: 35.9375rem) {

    .inpage-navigation ul li {
        margin-bottom: var(--s-m)
    }

        .inpage-navigation ul li.last {
          margin-bottom: 0;
        }
      }

@media (min-width: 36rem) {

[dir='rtl'] .inpage-navigation ul li {
        margin-left: var(--s-s);
        margin-right: 0
    }

        [dir='rtl'] .inpage-navigation ul li.last {
          margin-left: 0;
        }
      }

/* used for logo list */
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) {
    text-align: center;
    margin-bottom: var(--s-l);
}
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin: auto;
    }
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) li {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 20%;
                flex: 0 1 20%;
        margin: 0 var(--s-xs) var(--s-s);
    }
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) li:first-child:nth-last-of-type(n+5),
        .image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) li:first-child:nth-last-of-type(n+5)~li {
            -webkit-box-flex: 0;
                -ms-flex: 0 1 15%;
                    flex: 0 1 15%;
        }
@media (max-width: 35.9375rem) {
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 35%;
                    flex: 0 0 35%
    }
        }
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) a {
        display: block;
    }
.image-list:not(.image-gallery-horizontal):not(.image-gallery-thumbnails) img {}
.image-gallery-horizontal {
    margin-left: -15px;
    margin-right: -15px;
}

    .image-gallery-horizontal .component-content>h2,
    .image-gallery-horizontal .component-content>h3 {
        display: none;
    }

    .image-gallery-horizontal .component-content {
        overflow: hidden
    }

    .image-gallery-horizontal ul {
        position: relative;
        width: 100%;
        list-style: none;
        -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
        -webkit-transform-style: preserve-3d;
                transform-style: preserve-3d;
        -ms-touch-action: pan-Y;
            touch-action: pan-Y;
        overflow: hidden;
        padding: 0;
        white-space: nowrap;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        will-change: transform
    }

    .image-gallery-horizontal li {
        height: 100%;
        width: 100%;
        position: relative;

        width: 100%;
        height: 100%;
        -ms-flex-negative: 0;
            flex-shrink: 0;
        white-space: normal;
        -webkit-user-select: none;
           -moz-user-select: none;
            -ms-user-select: none;
                user-select: none;
    }

    .image-gallery-horizontal li a {
            display: block;
            -webkit-user-select: none;
               -moz-user-select: none;
                -ms-user-select: none;
                    user-select: none;
        }

    .image-gallery-horizontal li a img {
                -o-object-fit: cover;
                   object-fit: cover;
                min-height: 350px;
                max-height: 350px;
                width: 100%;
            }

    .image-gallery-horizontal li a::after {
                content: '';
                position: absolute;
                left: 0;
                top: auto;
                right: 0;
                bottom: 0;
                height: 50%;
                background-image: -webkit-gradient(linear,
                        left bottom, left top,
                        from(var(--color-black)),
                        to(transparent));
                background-image: linear-gradient(to top,
                        var(--color-black),
                        transparent);
                opacity: var(--opacity-s);
            }

    .image-gallery-horizontal .image-caption {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: absolute;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        color: var(--color-white);
        top: 0;
        bottom: 0;
        padding: var(--s-s) var(--s-l) var(--s-l);
        width: 100%;
        text-align: left;
        font-size: var(--fs-ml);
        font-family: var(--ff-subheading);
    }

    .bgc-texture-mask .image-gallery-horizontal {
        margin-bottom: -62.5px;
    }

    @media (max-width: 47.9375rem) {

    .bgc-texture-mask .image-gallery-horizontal {
            margin-bottom: -33px
    }
        }

    .on-page-editor .image-gallery-horizontal ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }

    .on-page-editor .image-gallery-horizontal ul li {
                width: 20%;
                margin-bottom: var(--s-xs)
            }
.image-gallery-thumbnails.glide {
  --thumbnails-size: 75px;
  --thumbnails-spacing: 10px;
  --scrollbar-width: 20px;
}

  .image-gallery-thumbnails.glide .glide__slide {
    padding: 0 var(--s-xxl);
  }

  .image-gallery-thumbnails.glide .glide__bullet {
    display: inline-block;
    width: var(--s-s);
    height: var(--s-s);
    margin: 0 var(--s-xs);
    background: var(--color-medium-light-gray);
    border-radius: var(--s-xs);
    cursor: pointer;
  }

  .image-gallery-thumbnails.glide .glide__bullet--active {
      background: var(--brand-color-2);
    }

  .image-gallery-thumbnails.glide .glide__big-images {
    display: none;
  }

  @media (min-width: 62rem) {.image-gallery-thumbnails.glide {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex
}

    .image-gallery-thumbnails.glide .glide__track {
      max-height: calc(
        (var(--thumbnails-size) + 2 * (var(--thumbnails-spacing))) * 5.4
      );
      -webkit-box-flex: 0;
          -ms-flex: 0 0 calc(var(--thumbnails-size) + var(--scrollbar-width));
              flex: 0 0 calc(var(--thumbnails-size) + var(--scrollbar-width));
      padding-right: var(--scrollbar-width);
      overflow-y: auto;
    }

    .image-gallery-thumbnails.glide .glide__slides {
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      overflow: visible;
    }

    .image-gallery-thumbnails.glide .glide__slide {
      margin: var(--thumbnails-spacing) 0;
      padding: 10px;
      width: var(--thumbnails-size);
      height: var(--thumbnails-size);
      border: 1px solid var(--background-color-soft);
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      cursor: pointer;
    }

      .image-gallery-thumbnails.glide .glide__slide.active {
        border-color: var(--color-medium-gray);
      }

      .image-gallery-thumbnails.glide .glide__slide img {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 auto;
                flex: 0 1 auto;
      }

    .image-gallery-thumbnails.glide .glide__bullets {
      display: none;
    }

    .image-gallery-thumbnails.glide .glide__big-images {
      display: block;
      margin: 0 var(--m-m);
      -webkit-box-flex: 1;
          -ms-flex: 1 1 auto;
              flex: 1 1 auto;
    }

      .image-gallery-thumbnails.glide .glide__big-images li {
        position: absolute;
        bottom: 0;
        opacity: 0;
        -webkit-transition: opacity var(--duration-m) var(--linear);
        transition: opacity var(--duration-m) var(--linear);
      }

        .image-gallery-thumbnails.glide .glide__big-images li.active {
          opacity: 1;
        }
  }

.on-page-editor .image-gallery-thumbnails ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }


.pill-nav {
  text-align: center;
}
  .pill-nav ul {
    display: inline;
  }
  .pill-nav ul li {
      display: inline;
    }
  .pill-nav ul li a {
        padding: var(--s-s) var(--s-m);
        margin: var(--m-s) var(--m-s) 0 0;
        background: var(--color-medium-light-gray);
        border-radius: var(--border-radius-rounded);
        text-align: center;
        display: inline-block;
      }
  .pill-nav ul li a:hover {
          text-decoration: none;
          background: var(--color-medium-gray);
          color: var(--color-white);
        }



.hero {
  position: relative;
}

  .hero .hero-section > img {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  .hero .hero-background,
  .hero .video-link {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
  }

  .hero .hero-background img, .hero .video-link img {
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      opacity: 0.9;
    }

  @media (max-width: 47.9375rem) {

  .hero .hero-background img, .hero .video-link img {
        min-height: 70vh
    }
      }

  .hero .hero-background:before, .hero .video-link:before {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background-color: var(--color-black);
    }

  .hero .hero-background:after, .hero .video-link:after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      background: -webkit-gradient(linear,
          left top, left bottom,
          from(rgba(0, 0, 0, 0.4)),
          to(rgba(0, 0, 0, 0)));
      background: linear-gradient(to bottom,
          rgba(0, 0, 0, 0.4) 0%,
          rgba(0, 0, 0, 0) 100%);
    }

  @media (max-width: 47.9375rem) {

  .hero .video-link {
      padding-bottom: 0
  }
    }

  @media (max-width: 61.9375rem) {

  .hero .video-link {
      padding-bottom: var(--s-xxxl)
  }
    }

  .hero .video-link .video-scroll {
      z-index: 2;
    }

  @media (max-width: 61.9375rem) {

  .hero .video-link .video-scroll {
        border: none;
        left: 50%;
        -webkit-transform: translatex(-50%);
                transform: translatex(-50%)
    }
      }

  @media (min-width: 62rem) {

  .hero .video-link .video-scroll {
        position: absolute;
        left: 50%;
        top: 50%
    }
      }

  .hero .hero-content {
    position: relative;
    z-index: 2;
    background-color: var(--brand-color-2);
    color: var(--color-white);
    padding: var(--s-xxl);
    width: 30rem;
    max-width: 55%;
  }

  @media (max-width: 47.9375rem) {

  .hero .hero-content {
      max-width: 75%
  }
    }

  @media (max-width: 35.9375rem) {

  .hero .hero-content {
      max-width: 100%;
      width: auto;
      padding: var(--s-xl)
  }
    }

  /* overlay image for related product on  recipe detail, not in default Hero */

  .hero .hero-product-image {
    position: absolute;
    width: 100%;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
    left: 30rem;
    -webkit-transform: translateX(-10%);
            transform: translateX(-10%);
    max-width: 19rem;
    bottom: calc(var(--s-xxxxl) * -1.3);
    z-index: 3;
  }

  @media (max-width: 61.9375rem) {

  .hero .hero-product-image {
      max-width: 12rem;
      bottom: calc(var(--s-xxxxl) * -0.85);
      left: 29rem
  }
    }

  @media (max-width: 47.9375rem) {

  .hero .hero-product-image {
      max-width: 11rem
  }
    }

  @media (max-width: 35.9375rem) {

  .hero .hero-product-image {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      left: auto;
      right: 0
  }
    }

  .hero .hero-product-image img {
      -o-object-fit: contain;
         object-fit: contain;
      -webkit-filter: none;
              filter: none;
    }

  .hero h1 {
    color: var(--color-white);
    font-size: var(--fs-xxxl);
    margin: 0 0 calc(var(--m-xs) * 0.75);
  }

  .hero h1 a {
      color: var(--color-white);
    }

  .hero h2 {
    color: var(--color-white);
    margin: 0 0 var(--m-xs);
  }

  .hero .field-herotext {
    font-size: var(--fs-l);
  }

/* to make the placeholder visible and clickable in the Experience Editor */
.on-page-editor [data-container-title*='herovideo'] {
  z-index: 250;
  position: absolute;
  right: 0;
  top: 0;
  width: 100%;
  min-height: 100%;
}

body:not(.on-page-editor) .hero .vimeo-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
  }

body:not(.on-page-editor) .hero .vimeo-video iframe {
      height: 56.25vw;
      position: absolute;
      width: 100%;
      min-height: 100%;
      min-width: 177.77vh;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
              transform: translate(-50%, -50%);
    }

body:not(.on-page-editor) .hero .vimeo-video + img {
      display: none;
    }

body:not(.on-page-editor) .hero .vimeo-video-wrapper {
    position: absolute;
    width: 100%;
    height: 100%;
  }

@media (max-width: 61.9375rem) {

[dir='rtl'] .hero .video-link .video-scroll {
        border: none;
        right: 50%;
        left: auto;
        -webkit-transform: translatex(50%);
                transform: translatex(50%)
    }
      }

@media (min-width: 62rem) {

[dir='rtl'] .hero .video-link .video-scroll {
        right: 50%;
        left: auto
    }
      }

.article-detail h1,
  .article-detail h2,
  .article-detail h3,
  .article-detail h4,
  .article-detail h5,
  .article-detail h6 {
    color: var(--heading-color);
  }
  .article-detail ol {
    list-style: decimal;
    padding: 0 0 var(--s-l) var(--s-xl);
  }
  [dir="rtl"] .article-detail ol {
    padding-right: var(--s-l);
    padding-left: 0;
  }
  .article-detail ul {
    list-style: disc outside none;
    list-style: initial;
    padding: 0 0 var(--s-l) var(--s-xl);
  }
  [dir="rtl"] .article-detail ul {
    padding-right: var(--s-l);
    padding-left: 0;
  }
  .article-detail .article-detail-intro {
    line-height: var(--lh-l);
    margin-bottom: var(--s-l);
    font-size: var(--fs-l);
  }
  @media (min-width: 62rem) {
  .article-detail .article-detail-intro {
      padding: var(--s-xxl) var(--s-xxxxl)
  }
    }
  .article-detail .article-detail-content {
    line-height: var(--lh-l);
  }
  @media (min-width: 62rem) {
  .article-detail .article-detail-content {
      padding: 0 var(--s-xxxxxl)
  }
    }

.article-overview-intro {
    padding-bottom: var(--s-xxl);
    text-align: center;
  }

    @media (min-width: 75rem) {.article-overview-intro {
      padding: 0 var(--s-xxxxl) var(--s-xxl) var(--s-xxxxl)
  }
    }

.product-detail-header {
  position: relative;
}

  .product-detail-header::before {
    content: '';
    height: 100%;
    background: var(--color-black);
    position: absolute;
    display: block;
    top: 0;
    height: 100%;
    width: 100%;
    opacity: var(--opacity-xl);
  }

  .product-detail-header::after {
    content: '';
    height: var(--s-xxxxl);
    background-color: var(--color-white);
    background-image: var(--pattern);
    position: absolute;
    display: block;
    bottom: 0;
    left: 0;
    right: 0;
  }

  @media (max-width: 47.9375rem) {

  .product-detail-header::after {
      height: var(--s-xxxl)
  }
    }

  .product-detail-header .product-detail-bgimage {
    background-size: cover;
    background-repeat: no-repeat;
    min-height: 50vh;
  }

  .product-detail-header .product-detail-bgimage .product-detail-header-content {
      text-align: center;
      margin: 0 auto;
      padding-top: var(--s-m);
      padding-bottom: var(--s-m);
      position: relative;
      z-index: 100;
    }

  @media (max-width: 61.9375rem) {

  .product-detail-header .product-detail-bgimage .product-detail-header-content {
        top: 0
    }
      }

  .product-detail-header .product-detail-bgimage .product-detail-header-content h1 {
        margin-top: var(--m-s);
      }

  .product-detail-header .product-detail-bgimage .product-detail-header-content h1,
      .product-detail-header .product-detail-bgimage .product-detail-header-content h3 {
        color: var(--color-white);
        word-break: break-word;
      }

  .product-detail-header .product-detail-bgimage .product-detail-header-content > img {
        max-width: 500px;
        max-height: 500px;
      }

  @media (max-width: 47.9375rem) {

  .product-detail-header .product-detail-bgimage .product-detail-header-content > img {
          max-width: 80%
      }
        }

  .product-detail-header .product-detail-bgimage .product-detail-header-content .link {
        text-align: left;
        text-align: initial;
      }

  .product-detail-header .product-detail-bgimage .product-detail-header-content .link a {
          color: var(--color-white);
        }

  .product-detail-header .product-detail-bgimage .product-detail-header-content .rating-summary-widget {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }

  .product-detail-header .product-title {
    margin: 0;
  }

  @media (max-width: 47.9375rem) {

  .product-detail-header .product-title {
      margin-top: var(--s-xxxl)
  }
    }

.product-detail-body {
  background: var(--pattern);
}

.field-ingredients ul {
    list-style: disc outside none;
    list-style: initial;
    padding: 0 0 var(--s-l) var(--s-xl);
  }

[dir="rtl"] .field-ingredients ul {
    padding-right: var(--s-l);
    padding-left: 0;
  }

.field-ingredients ol {
    list-style: decimal;
    padding: 0 0 var(--s-l) var(--s-xl);
  }

[dir="rtl"] .field-ingredients ol {
    padding-right: var(--s-l);
    padding-left: 0;
  }

.on-page-editor .rating-summary-widget::after, .on-page-editor .review-widget::after, .on-page-editor .catalog-collection-widget::after {
      border: 1px dashed var(--border-color);
      padding: 0 5px;
    }

.on-page-editor .rating-summary-widget::after {
      content: 'Rating summary widget';
    }

.on-page-editor .review-widget::after {
      content: 'Review widget';
    }

.on-page-editor .catalog-collection-widget::after {
      content: 'Catalog collection widget';
    }

.on-page-editor .bazaarvoice-script-placeholder {
    position: relative;
    z-index: 10;
  }

.product-overview-intro {
    text-align: center;
  }
    @media (min-width: 75rem) {.product-overview-intro {
      padding: 0 var(--s-xxxxl) var(--s-xxl) var(--s-xxxxl)
  }
    }

.recipe-detail .related-products {
    margin: var(--s-s) 0;
  }

.recipe-detail-intro {
  text-align: center;
}

@media (max-width: 61.9375rem) {

.recipe-detail-intro {
    padding: var(--s-xs)
}
  }

.recipe-detail-specs {
  padding: var(--s-xl) 0;
  text-align: center;
}

.recipe-detail-specs li {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

@media (max-width: 61.9375rem) {

.recipe-detail-specs li {
      padding-top: var(--s-s);
      padding-bottom: var(--s-s)
  }
    }

.recipe-detail-specs li .recipe-specs-text {
      margin-right: var(--s-s);
    }

[dir="rtl"] .recipe-detail-specs li .recipe-specs-text {
        margin-right: unset;
        margin-left: var(--s-s);
      }

.recipe-detail-specs li img {
      width: var(--s-l);
      height: var(--s-l);
      margin-right: var(--s-s);
    }

.recipe-detail-ingredients {
  padding-right: var(--s-m);
}

.recipe-detail-ingredients h3 {
    margin-bottom: var(--s-xxl);
  }

.recipe-detail-ingredients .related-products {
    font-size: var(--fs-s);
    margin-bottom: var(--s-xl);
    line-height: var(--s-xxxl);
  }

.recipe-detail-ingredients .related-products img {
      height: 75px;
      width: 75px;
      -o-object-fit: cover;
         object-fit: cover;
      margin-right: var(--s-m);
    }

.recipe-detail-nutritional-facts .recipe-detail-nutritional-facts-toggler {
    cursor: pointer;
  }

.recipe-detail-nutritional-facts .recipe-detail-nutritional-facts-toggler::after {
      content: '▾';
      margin-left: var(--m-s);
    }

.recipe-detail-nutritional-facts .recipe-detail-nutritional-facts-panel {
    opacity: 0;
    height: 0;
    overflow: hidden;
    -webkit-transition: all var(--duration-l) var(--ease-out-cubic);
    transition: all var(--duration-l) var(--ease-out-cubic);
  }

.recipe-detail-nutritional-facts .recipe-detail-nutritional-facts-panel table {
      margin: 0;
    }

.recipe-detail-nutritional-facts.is-open .recipe-detail-nutritional-facts-panel {
      opacity: 1;
    }

.recipe-detail-nutritional-facts.is-open .recipe-detail-nutritional-facts-toggler::after {
        content: '▴';
      }

.recipe-detail-instructions h3 {
    margin-bottom: var(--s-xxl);
  }

.recipe-detail-instructions ol {
    counter-reset: my-awesome-counter;
    list-style: none;
  }

.recipe-detail-instructions ol li {
      margin: 0 0 var(--s-m) 0;
      position: relative;
      list-style-type: none;
      padding-left: var(--s-xxl);
    }

@media (min-width: 48rem) {

.recipe-detail-instructions ol li {
        padding-left: var(--m-l)
    }
      }

.recipe-detail-instructions ol li::before {
        position: absolute;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        line-height: 1;
        content: counter(my-awesome-counter, decimal);
        counter-increment: my-awesome-counter;
        color: var(--color-medium-light-gray);
        font-weight: var(--fw-bold);
        font-size: var(--fs-xs);
        left: 0;
        width: var(--s-xl);
        height: var(--s-xl);
        top: var(--s-xs);
        border: 2px solid var(--tag-color);
        border-radius: var(--border-radius-rounded);
        text-align: center;
      }

@media (max-width: 61.9375rem) {

.recipe-detail-instructions ol li::before {
          width: var(--s-l);
          height: var(--s-l)
      }
        }

.recipe-detail-tip {
  position: relative;
  margin-top: var(--m-m);
  padding-left: var(--s-xl);
}

.recipe-detail-tip img {
    position: absolute;
    top: 0;
    left: 0;
    width: var(--s-l);
    height: var(--s-l);
    display: none;
  }

.recipe-detail-tip .field-tip + img {
    display: inline-block;
  }

.recipe-detail-bgimage {
  position: relative;
  padding-bottom: 56%;
  height: 0;
  overflow: hidden;
}

.recipe-detail-bgimage .tag-list {
    position: absolute;
    top: var(--s-m);
    right: var(--s-s);
  }

.recipe-detail-bgimage img {
    width: 100%;
    position: absolute;
    top: 50%;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
  }

@media (max-width: 35.9375rem) {

.recipe-detail-bgimage img {
      padding: -15px
  }
    }

.recipe-related-product {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: var(--s-m);
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
}

.recipe-related-product:empty {
    margin-bottom: 0;
  }

.recipe-related-product img,
  .recipe-related-product .field-related-product-title {
    max-width: 50%;
    margin: 0;
  }

.recipe-related-product .field-related-product-title {
    padding-left: var(--s-m);
  }

.recipe-detail-body {
  padding-top: var(--s-xxxl);
}

@media (max-width: 61.9375rem) {

.recipe-detail-body-left {
    padding-bottom: var(--s-xl)
}
  }

body.on-page-editor .recipe-detail-body {
  top: 0;
  margin-bottom: 0;
}

[dir='rtl'] .recipe-detail-instructions ol {
    list-style-type: arabic-indic;
    padding-left: 0;
    padding-right: var(--s-l);
  }

[dir='rtl'] .recipe-detail-instructions ol li::before {
        content: counter(my-awesome-counter, arabic-indic);
        left: auto;
        right: calc(-1 * var(--s-xl) - var(--s-xl));
        font-size: var(--fs-l);
      }

[dir='rtl'] .recipe-detail-specs li img {
      margin-left: var(--s-s);
      margin-right: 0;
    }
.recipe-header-background {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  min-height: 78vh;
  text-align: center;
  position: relative;
  background: var(--color-black);
}
  @media (min-width: 36rem) {.recipe-header-background {
    padding: var(--s-xxl)
}
  }
  .recipe-header-background .recipe-header-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 200;
    padding: 0;
  }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content {
      padding: var(--s-xxxl) var(--s-m)
  }
    }
  .recipe-header-background .recipe-header-content .recipe-tag-list {
      list-style: none;
      padding: var(--s-m) 0 0 0;
      background: var(--color-white);
      margin: 0 var(--m-m);
      font-size: var(--fs-xs);
    }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content .recipe-tag-list {
        font-size: var(--fs-m);
        padding: 0;
        background: transparent
    }
      }
  .recipe-header-background .recipe-header-content .recipe-tag-list li {
        background: var(--primary-color);
        color: var(--color-white);
        padding: var(--s-xs) var(--s-m);
        display: inline-block;
        margin: 0 0 var(--m-s) var(--m-s);
        border-radius: var(--border-radius-s);
      }
  .recipe-header-background .recipe-header-content .recipe-tag-list li:first-child {
          margin: 0 0 var(--m-s) 0;
        }
  [dir="rtl"] .recipe-header-background .recipe-header-content .recipe-tag-list li:first-child {
            margin-left: var(--m-s);
          }
  .recipe-header-background .recipe-header-content .recipe-tag-list li:nth-of-type(1n + 4) {
        display: none;
      }
  .recipe-header-background .recipe-header-content h1 {
      color: var(--color-black);
      background: var(--color-white);
      margin: 0;
      padding: var(--s-m);
      font-size: var(--fs-xl);
    }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content h1 {
        font-size: var(--fs-xxxl);
        background: transparent;
        color: var(--color-white);
        padding: 0;
        margin: var(--s-m)
    }
      }
  .recipe-header-background .recipe-header-content .recipe-read-more {
      display: none;
    }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content .recipe-read-more {
        display: block;
        color: var(--color-white);
        text-decoration: underline
    }
      }
  .recipe-header-background img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
    z-index: 0;
    -webkit-filter: brightness(65%);
            filter: brightness(65%);
  }

.recipe-info-section {
  background: var(--color-white);
  padding: 0;
  z-index: 1;
  position: relative;
}

@media (min-width: 36rem) {

.recipe-info-section {
    margin-top: -5rem;
    padding: var(--s-xxl)
}
  }

@media (max-width: 35.9375rem) {

.recipe-info-section .recipe-short-summary {
      -webkit-box-ordinal-group: 0;
          -ms-flex-order: -1;
              order: -1;
      margin-top: var(--m-m)
  }
    }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin-bottom: var(--m-l);
    }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li {
        -webkit-box-flex: 1;
            -ms-flex: 1 0 50%;
                flex: 1 0 50%;
        padding: var(--s-s) var(--s-s) var(--s-s) var(--s-m);
      }

[dir="rtl"] .recipe-info-section .recipe-short-summary .recipe-short-summary-list li {
          border-right: var(--s-m);
          border-left: var(--s-s);
        }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-child(odd) {
          border-right: 1px solid var(--color-medium-gray);
        }

[dir="rtl"] .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-child(odd) {
            border-right: none;
            border-left: 1px solid var(--color-medium-gray);
          }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-last-child(n + 3) {
          border-bottom: 1px solid var(--color-medium-gray);
        }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list .recipe-short-summary-title {
        display: block;
        font-weight: var(--fw-medium);
        font-size: var(--fs-s);
      }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list .recipe-short-summary-value {
        color: var(--primary-color);
        font-size: var(--fs-s);
      }

.recipe-detail-header {
  position: relative;
  margin-bottom: 0;
}

  @media (max-width: 47.9375rem) {

  .recipe-detail-header h1 {
      font-size: var(--fs-xxl)
  }
    }

  @media (min-width: 48rem) {

  .recipe-detail-header h1 {
      font-size: calc(var(--fs-xxxl))
  }
    }

  @media (min-width: 62rem) {

  .recipe-detail-header h1 {
      font-size: var(--fs-xxxxl)
  }
    }

  .recipe-detail-header p {
    font-size: var(--fs-l);
  }

  .recipe-detail-header .hero-section {
    min-height: 70vh;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  @media all and (max-height: 570px) {

  .recipe-detail-header .hero-section {
      min-height: 80vh
  }
    }

  .recipe-detail-header .hero-content {
    background-color: var(--shadow-brand-color-2);
  }

  @media (max-width: 35.9375rem) {

  .recipe-detail-header .hero-content {
      width: auto
  }
    }

  @media (max-width: 47.9375rem) {

  .recipe-detail-header .hero-content {
      -webkit-transform: translate(var(--s-xl), var(--s-xxxl));
              transform: translate(var(--s-xl), var(--s-xxxl))
  }
    }

  @media (max-width: 35.9375rem) {

  .recipe-detail-header .hero-content {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 auto;
              flex: 0 0 auto;
      max-height: calc(70vh - 5rem - var(--header-height-mobile));
      overflow-y: auto
  }
    }

  @media (max-width: 74.9375rem) {

  .recipe-detail-header .video-link + .hero-content {
      -webkit-transform: translateX(0);
              transform: translateX(0);
      width: 26rem;
      padding-bottom: var(--s-xxxl)
  }

      .recipe-detail-header .video-link + .hero-content h1 {
        font-size: calc(var(--fs-xxl) * 1.5);
      }
    }

  @media (max-width: 61.9375rem) {

  .recipe-detail-header .video-link + .hero-content {
      width: 32rem;
      padding-bottom: var(--s-xxxl)
  }

      .recipe-detail-header .video-link + .hero-content h1 {
        font-size: calc(var(--fs-xxxl));
      }
    }

  @media (max-width: 47.9375rem) {

  .recipe-detail-header .video-link + .hero-content {
      width: auto;
      -webkit-transform: translateX(var(--s-xl));
              transform: translateX(var(--s-xl))
  }

      .recipe-detail-header .video-link + .hero-content h1 {
        font-size: calc(var(--fs-xxl));
      }
    }

  .recipe-detail-header .tag-text {
    background-color: transparent;
    border: solid 1px var(--color-white);
    color: var(--color-white);
  }

  /* this is an inline SVG */

  .recipe-detail-header .icon--play {
    position: absolute;
    z-index: 1;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    display: inline-block;
    width: 88px;
    height: 88px;
    top: 45%;
    left: 50%;

  }

  @media (max-width: 61.9375rem) {

  .recipe-detail-header .icon--play {
      top: 25%

  }
    }

  .recipe-detail-header .icon--play svg {
      fill: var(--color-white);
      -webkit-transition: -webkit-filter .25s linear;
      transition: -webkit-filter .25s linear;
      transition: filter .25s linear;
      transition: filter .25s linear, -webkit-filter .25s linear;
      -webkit-filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .2));
              filter: drop-shadow(0 2px 7px rgba(0, 0, 0, .2));
    }

  .recipe-detail-header .icon--play svg:hover {
      -webkit-filter: drop-shadow(-1px 8px 15px rgba(0, 0, 0, .6));
              filter: drop-shadow(-1px 8px 15px rgba(0, 0, 0, .6));
    }
/* Recipe Detail Header V3 styling */
.recipe-detail-header.v3 .hero-content {
          -webkit-transform: none;
                  transform: none;
          text-align: center;
          margin-right: 0;
      }
@media (min-width: 36rem) {
.recipe-detail-header.v3 .hero-content {
              text-align: left
      }
              [dir="rtl"] .recipe-detail-header.v3 .hero-content {
                  text-align: right;
              }
          }
.recipe-detail-header.v3 h1 {
        font-family: var(--ff-subheading);
        font-size: var(--fs-xxl);
      }
@media (min-width: 48rem) {
.recipe-detail-header.v3 h1 {
            font-size: calc(var(--fs-xxl)*1.5)
      }
        }
@media (min-width: 62rem) {
.recipe-detail-header.v3 h1 {
            font-size: var(--fs-xxxxl)
      }
        }
.recipe-detail-header.v3 .recipe-tag-list {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          margin-bottom: var(--m-s);
      }
.recipe-detail-header.v3 .recipe-tag-list li {            
            padding: calc(var(--s-xs)*.8) var(--s-m);
            margin: 0 var(--s-xs) var(--s-xs) 0;
            font-weight: var(--fw-regular);
            text-transform: none;
            font-size: var(--fs-s);
            background-color: transparent;
            border: solid 1px var(--color-white);
            color: var(--color-white);
            cursor: default;
            border-radius: 2px;
          }
[dir="rtl"] .recipe-detail-header.v3 .recipe-tag-list li {
                margin-right: 0;
                margin-left: var(--s-xs);
            }
.recipe-detail-header.v3 .recipe-tag-list li:nth-of-type(1n + 3) {
            display: none;
          }
.recipe-detail-header.v3 .tag-text {
          margin-right: var(--s-s);
      }
[dir="rtl"] .recipe-detail-header.v3 .tag-text {
              margin-right: 0;
              margin-left: var(--s-s);
          }
.recipe-detail-header.v3 .anchor-link.instructions {
          display: block;
        }
@media (min-width: 48rem) {
.recipe-detail-header.v3 .anchor-link.instructions {
            margin-bottom: var(--s)
        }
          }
.recipe-detail-header.v3 .btn-instructions {
          background: none;
          border: 1px solid var(--color-white);
          font-size: var(--fs-m);
          font-family: var(--ff-light);
      }
.recipe-detail-header.v3 .btn-instructions:hover {
              background-color: var(--color-white);
              color: var(--primary-color);
          }
.recipe-detail-header.v3 .video-scroll {
          display: block;
          color: var(--color-white);
          text-decoration: underline;
          border: none;
          background: none;
          font-size: var(--fs-s);
          font-family: var(--ff-light);
          text-transform: none;
      }
@media (min-width: 36rem) {
.recipe-detail-header.v3 .video-scroll {
            text-align: left;
            padding-left: 0;
            padding-right: 0
      }
          }
@media (min-width: 48rem) {.recipe-body {
        position: relative;
        margin-top: -11rem;
        padding: var(--m-l) var(--m-xl);    
        z-index: 99;
        background-color: var(--color-white)
}
    }
    .recipe-body .recipe-info {
        margin-bottom: var(--m-m);
    }
    @media (min-width: 62rem) {
    .recipe-body .recipe-info {
            margin-bottom: var(--m-l)
    }
        }
    @media (min-width: 48rem) {
    .recipe-body .recipe-info .field-shortdescription {
                display: none
        }
            }
    .recipe-body .recipe-info .field-introduction {
            display: none;
        }
    @media (min-width: 48rem) {
    .recipe-body .recipe-info .field-introduction {
                display: block
        }
            }
    .recipe-body .recipe-intro {
        font-family: var(--ff-light);
        font-size: var(--fs-l);
        text-align: center;
    }
    @media (min-width: 62rem) {
    .recipe-body .recipe-intro {
            text-align: left
    }
        }
    .recipe-body .recipe-short-summary {
        margin: var(--m-m) 0;
    }
    @media (min-width: 62rem) {
    .recipe-body .recipe-short-summary {
            margin: 0
    }
        }
    .recipe-body .recipe-short-summary-title {
        text-transform: lowercase;
    }
    .recipe-body .recipe-short-summary-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row;
    }
    .recipe-body .recipe-short-summary-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            -webkit-box-flex: 1;
                -ms-flex: 1 33%;
                    flex: 1 33%;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            text-align: center;
        }
    .recipe-body .recipe-short-summary-list li img {
                height: 34px;
                width: 34px;
                margin-bottom: var(--m-s);
            }
    @media (min-width: 62rem) {
    .recipe-body .recipe-details h3 {
                margin-bottom: var(--m-m)
        }
            }
    .recipe-body .recipe-ingredient-list ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        }
    .recipe-body .recipe-ingredient-list li {
            -webkit-box-flex: 1;
                -ms-flex: 1 auto;
                    flex: 1 auto;
            width: unset;
            max-width: unset;
        }
    .recipe-body .preperation-item .field-text, .recipe-body .time-item .field-text, .recipe-body .servings-item .field-text {
            font-size: var(--fs-xs);
        }
    .recipe-body .recipe-detail-instructions li {
            padding-left: var(--s-s);
            min-height: var(--m-l);
            margin-bottom: var(--s-s);
        }
    @media (min-width: 48rem) {
    .recipe-body .recipe-detail-instructions li {
                padding-left: var(--s-s)
        }
            }
    @media (min-width: 100rem) {
    .recipe-body .recipe-detail-instructions li {
                padding-left: var(--s-l);
                min-height: var(--m-xl)
        }
            }
    .recipe-body .recipe-detail-instructions li:before {
                top: 0;
            }
    @media (min-width: 62rem) {
    .recipe-body .recipe-detail-instructions li:before {
                    font-size: var(--fs-x);
                    width: var(--s-xl);
                    height: var(--s-xl)
            }
                }
    @media (min-width: 100rem) {
    .recipe-body .recipe-detail-instructions li:before {
                    font-size: var(--fs-m);
                    width: var(--s-xxl);
                    height: var(--s-xxl)
            }
                }

body.on-page-editor .recipe-body, body.preview .recipe-body {
        margin-top: 0;
        background: none;
    }
.nutrition-facts {
    padding: var(--s-m);
    background-color: var(--background-color-light);
    display: none;
}

    @media (min-width: 48rem) {.nutrition-facts {
        padding: var(--m-m)
}
    }

    .nutrition-facts .disclaimer {
        font-size: var(--fs-xs);
    }

.nutrition-facts-wrapper {
    padding-top: var(--m-s);
    padding-bottom: var(--m-s);
}

.nutrition-facts-wrapper .core-nutrition-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        font-size: var(--fs-s);
        padding-bottom: var(--m-s);
    }

.nutrition-facts-wrapper .core-nutrition-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            width: 50%;
            margin-bottom: var(--m-s);
        }

.nutrition-facts-wrapper .core-nutrition-list .display-value {
            font-size: var(--fs-m);
            font-weight: var(--fw-bold);
            line-height: var(--lh-xs);
            padding-right: var(--m-s);
        }

[dir="rtl"] .nutrition-facts-wrapper .core-nutrition-list .display-value {
                padding-right: 0;
                padding-right: initial;
                padding-left: var(--m-s);
            }

.nutrition-facts-wrapper .core-nutrition-list .display-unit {
            padding-right: var(--m-s);
            font-size: var(--fs-xs);
        }

[dir="rtl"] .nutrition-facts-wrapper .core-nutrition-list .display-unit {
                padding-right: 0;
                padding-right: initial;
                padding-left: var(--m-s);
            }

.nutrition-facts-wrapper .default-nutrition-list {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        opacity: 0;
        height: 0;
        overflow: hidden;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        font-size: var(--fs-s);
        -webkit-transition: all var(--duration-l) var(--ease-out-cubic);
        transition: all var(--duration-l) var(--ease-out-cubic);
    }

.nutrition-facts-wrapper .default-nutrition-list.show {
            opacity: 1
        }

.nutrition-facts-wrapper .default-nutrition-list li {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            border-top: 1px solid var(--border-color);
            padding-top: var(--m-xs);
            padding-bottom: var(--m-xs);
        }

.nutrition-facts-wrapper .default-nutrition-list li:last-of-type {
                border-bottom: 1px solid var(--border-color);
            }

.nutrition-facts-wrapper .nutrition-facts-show-more, .nutrition-facts-wrapper .nutrition-facts-show-less {
        margin-top: var(--m-s);
        margin-bottom: var(--m-s);
        text-decoration: underline;
        cursor: pointer;
    }

.nutrition-facts-wrapper .nutrition-facts-show-more.show, .nutrition-facts-wrapper .nutrition-facts-show-less.show {
            display: block;
        }

.nutrition-facts-wrapper .nutrition-facts-show-more.hide, .nutrition-facts-wrapper .nutrition-facts-show-less.hide {
            display: none;
        }

.nutrition-facts-wrapper .nutrition-facts-show-less {
        display: none;
    }

.recipe-overview-intro {
    text-align: center;
  }
    @media (min-width: 75rem) {.recipe-overview-intro {
      padding: 0 var(--s-xxxxl) var(--s-xxl) var(--s-xxxxl)
  }
    }

.related-articles {
  text-align: center;
}

  .related-articles.text-align-left {
    text-align: left;
  }

  .related-articles.text-align-right {
    text-align: right;
  }

  .related-articles .items {
    padding-top: var(--s-m);
    margin-bottom: var(--m-m);
  }

  .related-articles .item > a,
    .related-articles .item > a > div {
      height: 100%;
    }

  .related-articles .article-card-intro {
    padding: 0 var(--s-xxxxl);
    margin-bottom: var(--s-xl);
  }

  @media (max-width: 61.9375rem) {

  .related-articles .article-card-intro {
      padding: 0 var(--s-l)
  }
    }

.related-recipes {
  text-align: center;
}

  .related-recipes.text-align-left {
    text-align: left;
  }

  .related-recipes.text-align-right {
    text-align: right;
  }

.related-products {
  text-align: center;
}

.thumbnail-navigation > .component-content {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
  }

    @media (min-width: 48rem) {.thumbnail-navigation > .component-content {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center
  }
    }

.product-comparison .component-content > h3 {
      color: var(--text-color);
      text-align: left;
    }
    .product-comparison .component-content ul {
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
    }
    .product-comparison .component-content ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
        margin: 0;
        padding: 0 1px;
      }
  .product-comparison.text-align-left .component-content > h3 { text-align: left; }
  .product-comparison.text-align-center .component-content > h3 { text-align: center; }
  .product-comparison.text-align-right .component-content > h3 { text-align: right; }
  @media (min-width: 48rem) {
  .product-comparison .product-comparison-image {
      position: relative
  }
    }
  .product-comparison .product-comparison-image .image-caption {
      display: block;
      font-family: var(--ff-subheading);
      font-size: var(--fs-m);
      margin-top: var(--s-s);
      text-align: left;
    }
  @media (min-width: 48rem) {
  .product-comparison .product-comparison-image .image-caption {
        background: rgb(0, 0, 0);
        background: -webkit-gradient(
          linear,
          left bottom, left top,
          from(rgba(0, 0, 0, 0.4)),
          to(rgba(0, 0, 0, 0))
        );
        background: linear-gradient(
          to top,
          rgba(0, 0, 0, 0.4),
          rgba(0, 0, 0, 0)
        );
        bottom: 0;
        color: var(--color-white);
        font-size: var(--fs-l);
        left: 0;
        line-height: 1;
        margin: 0;
        padding: var(--s-m);
        position: absolute;
        width: 100%
    }
      }



/* base styles here */
.page-list-grid ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin-right: -15px;
    margin-left: -15px;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    list-style: none;
    padding: 0;
  }
.page-list-grid ul li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 calc(12 / 12 * 100%);
              flex: 0 0 calc(12 / 12 * 100%);
      width: calc(12 / 12 * 100%);
      max-width: calc(12 / 12 * 100%);
      padding-left: 15px;
      padding-right: 15px;
      margin-bottom: var(--m-m);
    }
@media (min-width: 48rem) {
.page-list-grid ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(6 / 12 * 100%);
                flex: 0 0 calc(6 / 12 * 100%);
        width: calc(6 / 12 * 100%);
        max-width: calc(6 / 12 * 100%);
        padding-left: 15px;
        padding-right: 15px
    }
      }
@media (min-width: 62rem) {
.page-list-grid ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 calc(4 / 12 * 100%);
                flex: 0 0 calc(4 / 12 * 100%);
        width: calc(4 / 12 * 100%);
        max-width: calc(4 / 12 * 100%);
        padding-left: 15px;
        padding-right: 15px
    }
      }
.page-list-grid ul li > a {
        height: 100%;
      }
/*SK: This styling should not be part of the whitelabel component*/
.page-list-grid ul li > a > [class*='-card'] {
          height: 100%;
          -webkit-box-shadow: var(--box-shadow-narrow-medium);
                  box-shadow: var(--box-shadow-narrow-medium);
          -webkit-transition: all var(--duration-l) var(--ease-out-quart);
          transition: all var(--duration-l) var(--ease-out-quart);
        }
.page-list-grid ul li > a .recipe-card-img {
          overflow: hidden;
        }
.page-list-grid ul li > a .recipe-card-img > img {
            -webkit-transition: all var(--duration-l) var(--ease-out-quart);
            transition: all var(--duration-l) var(--ease-out-quart);
          }
.page-list-grid ul li > a:hover {
          text-decoration: none;
        }
/*SK This styling should not be part of the whitelabel component*/
.page-list-grid ul li > a:hover > [class*='-card']:not(.recipe-card) {
            -webkit-box-shadow: var(--box-shadow-narrow-light);
                    box-shadow: var(--box-shadow-narrow-light);
            -webkit-transform: translateY(var(--s-s));
                    transform: translateY(var(--s-s));
          }
.page-list-grid ul li > a:hover .recipe-card-img > img {
            -webkit-transform: scale(1.05);
                    transform: scale(1.05);
          }

/* fix for enable editing in experience editor */
body.on-page-editor .page-list-grid a {
  pointer-events: none;
  cursor: crosshair;
}
body.on-page-editor .page-list-grid a [class*='-card-title'],
  body.on-page-editor .page-list-grid a [class*='-card-subtitle'] {
    pointer-events: all;
  }

.page-list-grid--two-col-mobile ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(6 / 12 * 100%);
                    flex: 0 0 calc(6 / 12 * 100%);
            width: calc(6 / 12 * 100%);
            max-width: calc(6 / 12 * 100%);
            padding-left: 15px;
            padding-right: 15px;
        }
      
            @media (min-width: 62rem) {.page-list-grid--two-col-mobile ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(4 / 12 * 100%);
                        flex: 0 0 calc(4 / 12 * 100%);
                width: calc(4 / 12 * 100%);
                max-width: calc(4 / 12 * 100%);
                padding-left: 15px;
                padding-right: 15px
        }
            }
.page-list-grid--two-col-mobile--five-col-desktop ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(6 / 12 * 100%);
                    flex: 0 0 calc(6 / 12 * 100%);
            width: calc(6 / 12 * 100%);
            max-width: calc(6 / 12 * 100%);
            padding-left: 15px;
            padding-right: 15px;
        }

            @media (min-width: 62rem) {.page-list-grid--two-col-mobile--five-col-desktop ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(5 / 12 * 100%);
                        flex: 0 0 calc(5 / 12 * 100%);
                width: calc(5 / 12 * 100%);
                max-width: calc(5 / 12 * 100%);
                padding-left: 15px;
                padding-right: 15px
        }
            }
.page-list-grid--one-col-mobile-two-tree-col-desktop .items {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
    }

        .page-list-grid--one-col-mobile-two-tree-col-desktop .items .item {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(12 / 12 * 100%);
                    flex: 0 0 calc(12 / 12 * 100%);
            width: calc(12 / 12 * 100%);
            max-width: calc(12 / 12 * 100%);
            padding-left: 15px;
            padding-right: 15px;

        }

        @media (min-width: 48rem) {

        .page-list-grid--one-col-mobile-two-tree-col-desktop .items .item {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(4 / 12 * 100%);
                        flex: 0 0 calc(4 / 12 * 100%);
                width: calc(4 / 12 * 100%);
                max-width: calc(4 / 12 * 100%);
                padding-left: 15px;
                padding-right: 15px

        }
            }

        @media (min-width: 48rem) {

        .page-list-grid--one-col-mobile-two-tree-col-desktop .items .item:nth-child(-n+2) {
                    -webkit-box-flex: 0;
                        -ms-flex: 0 0 calc(6 / 12 * 100%);
                            flex: 0 0 calc(6 / 12 * 100%);
                    width: calc(6 / 12 * 100%);
                    max-width: calc(6 / 12 * 100%);
                    padding-left: 15px;
                    padding-right: 15px
            }
                }
@media (min-width: 62rem) {.page-list-grid--4-col ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(3 / 12 * 100%);
                        flex: 0 0 calc(3 / 12 * 100%);
                width: calc(3 / 12 * 100%);
                max-width: calc(3 / 12 * 100%);
                padding-left: 15px;
                padding-right: 15px
        }
            }
@media (max-width: 61.9375rem) {.page-list-grid--horizontal-scroll ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: initial;
                flex-wrap: initial;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            -webkit-overflow-scrolling: touch;
            overflow-x: auto;
            white-space: nowrap;
            margin-right: calc(-1 * var(--s-m));
            margin-right: -30px;
            margin-left: -30px
    }
        }
        .page-list-grid--horizontal-scroll ul li {
            white-space: normal;
        }
        @media (max-width: 61.9375rem) {
        .page-list-grid--horizontal-scroll ul li:first-child {
                    /* padding-left: 0; */
            }
                }
        @media (max-width: 61.9375rem) {
        .page-list-grid--horizontal-scroll ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(12/12*85%);
                        flex: 0 0 calc(12/12*85%);
                width: calc(12/12*85%);
                max-width: calc(12/12*85%);
                padding-right: 0
        }
            }
.article-card {
  display: block;
  background: var(--color-white);
  text-align: center;
  position: relative;
  border-bottom: var(--s-xs) solid var(--primary-color);
}

  .article-card img {
    -o-object-fit: cover;
       object-fit: cover;
    width: 100%;
    min-height: 350px;
    max-height: 350px;
    margin-bottom: var(--s-s);
  }

  .article-card .article-card-title {
    text-transform: uppercase;
    text-align: left;
  }

  [dir="rtl"] .article-card .article-card-title {
      text-align: right;
    }

  .article-card .article-card-tag-container {
    padding: var(--s-s) 0 var(--s-s);
    display: block;
    margin-right: 0;
    margin-left: 0;
    -webkit-box-pack: initial;
        -ms-flex-pack: initial;
            justify-content: initial;
  }

  .article-card .article-card-tag-container li{
      display:none;
      -webkit-box-flex: initial;
          -ms-flex: initial;
              flex: initial;
      width: auto;
      max-width: none;
      padding: calc(var(--s-xs)*.8) var(--s-m);
      margin: 0;
    }

  .article-card .article-card-tag-container li:first-child{
        display: block;
      }

  .article-card .article-card-text-container {
    padding: var(--s-l) var(--s-l) var(--s-xxl);
  }

  .article-card .btn {
    position: absolute;
    bottom: var(--s-xs);
    right: 0;
  }

  [dir="rtl"] .article-card .btn {
      left: 0;
    }

.recipe-card {
  text-align: left;
  text-align: initial;
  position: relative;
  display: block;
}

  .recipe-card .recipe-card-img img {
      -o-object-fit: cover;
         object-fit: cover;
      min-height: var(--recipe-card-img-height-mobile);
      max-height: var(--recipe-card-img-height-mobile);
      width: 100%;
    }

  @media (min-width: 62rem) {

  .recipe-card .recipe-card-img img {
        min-height: var(--recipe-card-img-height-desktop);
        max-height: var(--recipe-card-img-height-desktop)
    }
      }

  .recipe-card .recipe-card-img::after {
      content: '';
      position: absolute;
      left: 0;
      top: auto;
      right: 0;
      bottom: 0;
      height: 50%;
      background-image: -webkit-gradient(linear,
          left bottom, left top,
          from(var(--color-black)),
          to(transparent));
      background-image: linear-gradient(to top,
          var(--color-black),
          transparent);
      opacity: var(--opacity-s);
    }

  .recipe-card .recipe-card-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    text-transform: uppercase;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: var(--color-white);
    top: 0;
    bottom: 0;
    padding: var(--s-s) var(--s-l);
    max-width: 90%;
  }
.recipe-card-v2 {
  overflow: hidden;
  border-radius: var(--border-radius-s);
  background-color: var(--color-white);
}

  .recipe-card-v2 .recipe-card-image-wrapper {
    width: 100%;
    padding-top: 75%;
    height: 0;
    position: relative;
  }

  .recipe-card-v2 .recipe-card-image-wrapper img {
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      -webkit-transition: all 200ms;
      transition: all 200ms;
    }

  .recipe-card-v2 .recipe-card-content-wrapper {
    position: relative;
    -webkit-transition: all 200ms;
    transition: all 200ms;
    padding: var(--s-m);
    background-color: var(--color-white);
  }

  .recipe-card-v2 .recipe-card-specs {
    display: none;
  }

  @media (min-width: 48rem) {

  .recipe-card-v2 .recipe-card-specs {
      display: block
  }
    }

  @media (min-width: 75rem) {

  .recipe-card-v2 .recipe-card-specs {
      width: 100%;
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
      left: 0;
      opacity: 0;
      -webkit-transition: all 200ms;
      transition: all 200ms;
      margin: 0;
      position: absolute;
      height: 5em;
      padding: 0 var(--s-m);
      background-color: var(--color-white)
  }
    }

  .recipe-card-v2 .recipe-card-specs img {
      width: var(--s-l);
      height: var(--s-l);
      margin-right: var(--s-s);
      vertical-align: middle;
    }

  .recipe-card-v2 .recipe-card-specs span {
      display: inline-block;
      margin-right: var(--s-s);
      vertical-align: middle;
      color: var(--text-color);
      font-size: var(--fs-s);
    }

  @media (min-width: 62rem) {
      .recipe-card-v2:hover .recipe-card-content-wrapper {
        -webkit-transform: translateY(-5em);
                transform: translateY(-5em);
      }

      .recipe-card-v2:hover .recipe-card-specs {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
      }
    }

.category-card {
  position: relative;
  display: block;
  border-radius: var(--border-radius-m);

}

  .category-card-img img {
      -o-object-fit: cover;
         object-fit: cover;
      min-height: 350px;
      max-height: 350px;
      width: 100%;
    }

  .category-card-img::after {
      content: '';
      position: absolute;
      left: 0;
      top: auto;
      right: 0;
      bottom: 0;
      height: 50%;
      background-image: -webkit-gradient(linear,
          left bottom, left top,
          from(var(--color-black)),
          to(transparent));
      background-image: linear-gradient(to top,
          var(--color-black),
          transparent);
      opacity: var(--opacity-s);
    }

  .category-card-content {
    position: absolute;
    bottom: 0;
    padding: var(--s-s) var(--s-l);
    max-width: 90%;
  }

  .category-card-title {
    text-transform: uppercase;
    color: var(--color-white);
  }

  .category-card-subtitle {
    color: var(--color-white);
  }
.product-card {
  text-align: center;
  background: var(--color-white);
  padding: var(--s-l);
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  position: relative;
  border: 1px solid var(--color-lighter-gray);
  min-height: var(--product-card-height);
}

  .product-card img {
    min-height: var(--product-card-img-height);
    max-height: var(--product-card-img-height);
    margin-bottom: var(--s-s);
    -o-object-fit: cover;
       object-fit: cover;
  }

  .product-card .product-card-title {
    text-transform: uppercase;
    text-decoration: none;
    margin-top: var(--s-l);
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

  .product-card .product-card-description {
    margin-top: var(--s-l);
    color: var(--text-color);
  }

  .product-card .rating-summary-widget {
    text-align: center !important; /* Important added for overwriting style from external css */
    -webkit-box-flex: 1;
        -ms-flex-positive: 1;
            flex-grow: 1;
  }

  .product-card .rating-summary-widget .bv_main_container .bv_button_buttonMinimalist {
        display: none !important; /* Important added for overwriting style from external css */
      }

  .product-card .rating-summary-widget .bv_main_container .bv_main_container_row_flex {
        padding-right: 0em !important; /* Important added for overwriting style from external css */
      }
  


.list-pagination {
  text-align: center;
}

  [dir="rtl"] .list-pagination nav {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

  .list-pagination span,
  .list-pagination a {
    padding: 0 var(--s-m);
    color: var(--text-color);
  }

  .list-pagination .active {
    display: inline-block;
    background: var(--brand-color-1);
    border-radius: var(--border-radius-rounded);
    padding: var(--s-s) var(--s-m);
    color: var(--color-white);
    font-weight: var(--fw-bold);
  }

  .list-pagination .inactive {
    cursor: not-allowed;
  }



:root {
  --icon-size: 3rem; /* 48px */
}

.infobox {
  padding: var(--s-m);
  max-width: 100%;
}

.infobox img {
    max-width: 3rem;
    max-width: var(--icon-size);
    float: left;
  }

.infobox .infobox-content {
    padding-left: 4rem; /* 64px */
  }

.infobox p {
    margin: 0;
    padding: 0;
  }

.infobox.text-color-light {
    color: var(--color-white);
  }

.banner {
  position: relative;
}

  .banner .banner-bgcontainer {
    position: relative;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: var(--s-xxl);
  }

  .banner .banner-bgcontainer > img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      z-index: 0;
    }

  .banner .banner-content {
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
    z-index: 200;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
    word-break: break-word;
    color: var(--color-white);
  }

  .banner .image-content {
    position: relative;
    z-index: 250;
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
  }

  .banner .banner-content-wrapper {
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }

  .banner .banner-content-title {
    margin-bottom: var(--m-xs);
  }

  .banner .banner-content-subtitle {
    color: var(--color-white);
    margin-bottom: var(--m-xs);
    text-transform: none;
    text-transform: initial;
  }

  .banner.has-overlay .banner-bgcontainer::before {
      content: '';
      height: 100%;
      background: var(--color-black);
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: var(--opacity-xl);
      z-index: 200;
    }

  .banner.has-overlay-dark .banner-bgcontainer::before {
      content: '';
      height: 100%;
      background: var(--color-black);
      position: absolute;
      display: block;
      top: 0;
      left: 0;
      height: 100%;
      width: 100%;
      opacity: var(--opacity-m);
      z-index: 200;
    }

  .banner.text-color-light .banner-content-wrapper .banner-content-title,
    .banner.text-color-light .banner-content-wrapper .banner-content-subtitle {
      color: var(--color-white);
    }

  .banner.hide-button .banner-content .btn {
    display: none;
  }

  .banner.has-left-aligned-text .banner-content {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
  }

  .banner.has-right-aligned-text .banner-content {
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
  }

  .banner.has-top-aligned-text .banner-bgcontainer {
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
  }

  .banner.has-bottom-aligned-text .banner-bgcontainer {
    -webkit-box-align: end;
        -ms-flex-align: end;
            align-items: flex-end;
  }

  .banner.promo-image-left .image-content {
    -webkit-box-ordinal-group: 0;
        -ms-flex-order: -1;
            order: -1;
  }

.promo-related-article .related-article-subtitle {
    text-transform: uppercase;
  }
  .promo-related-article .related-articles-body {
    padding-bottom: var(--s-xxl);
  }
  @media (max-width: 47.9375rem) {
  .promo-related-article .related-articles-body {
      text-align: center
  }
    }
  @media (min-width: 62rem) {
  .promo-related-article .related-articles-body {
      padding-top: var(--s-xxl);
      padding-bottom: var(--s-l)
  }
    }
  @media (max-width: 47.9375rem) {
  .promo-related-article .related-article-images {
      -webkit-box-ordinal-group: 0;
          -ms-flex-order: -1;
              order: -1;
      margin-bottom: var(--s-m)
  }
    }
  @media (min-width: 62rem) {
  .promo-related-article .related-article-images {
      padding-left: calc(100% / 12)
  }
    }
  .promo-related-article .related-article-images img {
      -webkit-box-shadow: var(--box-shadow-narrow-medium);
              box-shadow: var(--box-shadow-narrow-medium);
    }
  .promo-related-article .related-article-images img:first-child {
        width: 100%;
      }
  .promo-related-article .related-article-images img:nth-child(2) {
        width: 55%;
        -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
        float: right;
        margin-right: 10%;
      }
  @media (min-width: 62rem) {
  .promo-related-article.promo-image-left .related-article-images {
        padding-left: 15px;
        /* Note: based on bootstrap gutter */
        padding-right: calc(100% / 12)
    }
      }
  .promo-related-article.promo-image-left img:first-child {
        float: right;
      }
  .promo-related-article.promo-image-left img:nth-child(2) {
        float: none;
        margin-left: 10%;
      }
  .promo-related-article.hide-image-shadow .related-article-images img {
        -webkit-box-shadow: none;
                box-shadow: none;
      }
  .promo-related-article.hide-image-border .related-article-images img {
        border: none;
      }

.page-header {
  position: relative;
}

  .page-header .page-header-bgcontainer {
    position: relative;
    background-color: var(--color-white);
    min-height: 65vh;
    height: 100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  .on-page-editor .page-header .page-header-bgcontainer {
      display: block;
    }

  @media (min-width: 62rem) {

  .page-header .page-header-bgcontainer {
      min-height: 65vh
  }
    }

  .page-header .page-header-bgcontainer img {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      -o-object-fit: cover;
         object-fit: cover;
      z-index: 0;
    }

  .page-header .page-header-content {
    overflow: hidden;
    position: relative;
    left: 0;
    right: 0;
    z-index: 200;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    width: 100%;
    height: 100%;
    padding: var(--s-xxl) var(--s-m);
  }

  .page-header .page-header-content-wrapper {
    text-align: center;
  }

  .page-header .page-header-content-title,
  .page-header .page-header-content-subtitle,
  .page-header .page-header-content-text,
  .page-header .btn {
    opacity: 0; /* Note: Since there's a reveal animation via JS, this needs to start hidden. */
  }

  .page-header .page-header-content-title {
    margin-bottom: var(--m-xs);
  }

  .page-header .page-header-content-text {
    margin-bottom: var(--m-xs);
  }

  .page-header .page-header-content-subtitle {
    text-transform: none;
    text-transform: initial;
  }

  .page-header .page-header-content-wrapper > * {
    -webkit-transition: -webkit-transform 0s linear;
    transition: -webkit-transform 0s linear;
    transition: transform 0s linear;
    transition: transform 0s linear, -webkit-transform 0s linear; /* Note: Since the animation on the transform property is handles by JS the duration and timing function need to be reset. */
  }

  .page-header.is-small-variant .page-header-bgcontainer {
      min-height: 30vh;
    }

  @media (min-width: 62rem) {

  .page-header.is-small-variant .page-header-bgcontainer {
        min-height: 35vh
    }
      }

  @media (max-width: 61.9375rem) {

  .page-header:not(.is-small-variant):not(.mobile-content-under-image) .page-header-content {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        padding-bottom: var(--s-xxxxl)
    }
      }

  .page-header.has-overlay .page-header-bgcontainer::before {
      content: '';
      height: 100%;
      background: var(--color-black);
      position: absolute;
      display: block;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: var(--opacity-xl);
      z-index: 200;
    }

  .page-header.has-overlay-dark .page-header-bgcontainer::before {
      content: '';
      height: 100%;
      background: var(--color-black);
      position: absolute;
      display: block;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: var(--opacity-m);
      z-index: 200;
    }

  .page-header.has-overlay-white .page-header-bgcontainer::before {
      content: '';
      height: 100%;
      background: var(--color-white);
      position: absolute;
      display: block;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: var(--opacity-m);
      z-index: 200;
    }

  .page-header.text-color-light .page-header-content-wrapper .page-header-content-title,
    .page-header.text-color-light .page-header-content-wrapper .page-header-content-subtitle {
      color: var(--color-white);
    }

  .page-header.hide-button .page-header-content-wrapper .btn {
    display: none;
  }

  .page-header.has-left-aligned-text .page-header-content-wrapper {
    text-align: left;
  }

  .page-header.has-right-aligned-text .page-header-content-wrapper {
    text-align: right;
  }

  .page-header.has-top-aligned-text .page-header-content {
    -ms-flex-item-align: start;
        align-self: flex-start;
  }

  .page-header.has-bottom-aligned-text .page-header-content {
    -ms-flex-item-align: end;
        align-self: flex-end;
  }

  .page-header.has-curved-bottom::after {
      content: '';
      background-image: var(--curve-mobile);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: bottom;
      position: absolute;
      bottom: -1px;
      left: 50%;
      z-index: 200;
      -webkit-transform: translateX(-50%);
              transform: translateX(-50%);
      width: 101vw;
      height: 10vw;
      pointer-events: none;
    }

  @media (min-width: 48rem) {

  .page-header.has-curved-bottom::after {
        background-image: var(--curve)
    }
      }

  @media (max-width: 47.9375rem) {
      .page-header.mobile-content-under-image .page-header-bgcontainer {
        height: auto;
        min-height: 0;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
      }

        .page-header.mobile-content-under-image .page-header-bgcontainer img {
          position: static;
          height: 75vw; /* 4:3 fixed ratio */
        }

        .page-header.mobile-content-under-image .page-header-bgcontainer .page-header-content {
          -ms-flex-preferred-size: 100vw;
              flex-basis: 100vw;
        }
    }

.promo-video-header {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
}

  @media (min-width: 62rem) {.promo-video-header {
    min-height: 75vh;
    background-color: var(--color-white)
}
  }

  @media (max-width: 74.9375rem) and (orientation: portrait) {.promo-video-header {
    min-height: 75vw
}
  }

  .promo-video-header > .component-content {
    width: 100%;
  }

  .promo-video-header .vimeo-video {
    position: relative;
    min-height: 75vh;
  }

  /* Only apply this styling on desktop to have the text on top of the video */

  @media (min-width: 62rem) {

  .promo-video-header .vimeo-video {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      min-height: 0;
      min-height: initial;
      z-index: 0;
      pointer-events: none;
      overflow: hidden
  }
    }

  @media (max-width: 74.9375rem) and (orientation: portrait) {

  .promo-video-header .vimeo-video {
      height: 75vw; /* 4:3 ratio fixed */
      min-height: 0
  }
    }

  /* Only apply this styling on mobile to have the text below the video */

  @media (max-width: 74.9375rem) {

  .promo-video-header .vimeo-video .vimeo-video-wrapper {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        min-height: 0;
        min-height: initial;
        z-index: -1;
        pointer-events: none;
        overflow: hidden;
        background-color: var(--color-white)
    }
      }

  .promo-video-header .vimeo-video .vimeo-video-wrapper iframe {
        width: 100%;
        height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
        min-height: 100%;
        min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
        position: absolute;
        top: 50%;
        left: 50%;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
      }

  .promo-video-header .promo-text {
    padding: var(--s-xxl) var(--s-xl);
  }

  @media (min-width: 62rem) {

  .promo-video-header .promo-text {
      position: relative;
      padding: var(--s-xxl) var(--s-m);
      z-index: 200
  }

      .promo-video-header .promo-text h1,
      .promo-video-header .promo-text h3 {
        color: var(--color-white);
      }
    }

  .promo-video-header .promo-text:empty {
      display: none;
    }

  .promo-video-header.has-overlay .vimeo-video::before {
        content: '';
        height: 100%;
        background: var(--color-black);
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: var(--opacity-xl);
        z-index: 100;
      }

  .promo-video-header.has-overlay-dark .vimeo-video::before {
        content: '';
        height: 100%;
        background: var(--color-black);
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: var(--opacity-m);
        z-index: 100;
      }

  .promo-video-header.has-overlay-white .vimeo-video::before {
        content: '';
        height: 100%;
        background: var(--color-white);
        position: absolute;
        display: block;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        opacity: var(--opacity-m);
        z-index: 100;
      }

  .promo-video-header.has-left-aligned-text {
    text-align: left;
  }

  .promo-video-header.has-right-aligned-text {
    text-align: right;
  }

  .promo-video-header.is-small-variant {
    min-height: 30vh;
  }

  @media (min-width: 62rem) {

  .promo-video-header.is-small-variant {
      min-height: 35vh
  }
    }

  .promo-video-header.is-small-variant .vimeo-video {
      min-height: 30vh;
    }

  @media (min-width: 62rem) {

  .promo-video-header.is-small-variant .vimeo-video {
        min-height: 35vh
    }
      }

  .promo-video-header.has-curved-bottom .vimeo-video::after {
        content: '';
        background-image: var(--curve-mobile);
        background-size: contain;
        background-repeat: no-repeat;
        background-position: bottom;
        position: absolute;
        bottom: -1px;
        left: 50%;
        z-index: 200;
        -webkit-transform: translateX(-50%);
                transform: translateX(-50%);
        width: 101vw;
        height: 10vw;
        pointer-events: none;
      }

  @media (min-width: 48rem) {

  .promo-video-header.has-curved-bottom .vimeo-video::after {
          background-image: var(--curve)
      }
        }

.promo-thumbnail-navigation-item {
  position: relative;
  margin-bottom: var(--s-s);
}

  @media (min-width: 48rem) {.promo-thumbnail-navigation-item {
    text-align: center;
    margin-bottom: 0
}
  }

  .promo-thumbnail-navigation-item a {
    text-decoration: none;
  }

  .promo-thumbnail-navigation-item .wrapped-link {
    border-bottom: 1px solid var(--border-color);
    padding-bottom: var(--s-s);
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }

  @media (min-width: 48rem) {

  .promo-thumbnail-navigation-item .wrapped-link {
      display: block;
      border-bottom: none;
      padding-bottom: 0
  }
    }

  .promo-thumbnail-navigation-item .wrapped-link .image-wrapper {
      display: inline-block;
      width: 64px;
      height: 64px;
      overflow: hidden;
      border-radius: var(--border-radius-rounded);
      margin-right: var(--s-m);
    }

  @media (min-width: 48rem) {

  .promo-thumbnail-navigation-item .wrapped-link .image-wrapper {
        margin-right: 0;
        margin-bottom: var(--s-s);
        width: 96px;
        height: 96px
    }
      }

  @media (min-width: 62rem) {

  .promo-thumbnail-navigation-item .wrapped-link .image-wrapper {
        margin-right: 0;
        margin-bottom: var(--s-s);
        width: 128px;
        height: 128px
    }
      }

  .promo-thumbnail-navigation-item .wrapped-link .image-wrapper img {
        -o-object-fit: cover;
           object-fit: cover;
        min-height: 128px;
        max-height: 128px;
        width: 100%;
      }

  .promo-thumbnail-navigation-item .wrapped-link .field-promotext {
      margin-bottom: 0;
    }

  @media (min-width: 48rem) {

  .promo-thumbnail-navigation-item .wrapped-link .field-promotext {
        display: inline-block;
        padding-bottom: var(--s-m);
        position: relative
    }

        .promo-thumbnail-navigation-item .wrapped-link .field-promotext::after {
          position: absolute;
          bottom: 0;
          left: 0;
          content: '';
          height: 2px;
          width: 0%;
          background: var(--text-color);
          -webkit-transition-property: width;
          transition-property: width;
          -webkit-transition-duration: 0.5s;
                  transition-duration: 0.5s;
          -webkit-transition-timing-function: ease;
                  transition-timing-function: ease;
        }
      }

  .promo-thumbnail-navigation-item .wrapped-link:hover .field-promotext::after {
          width: 100%;
        }

@media (min-width: 62rem) {.promo-image-left .related-article-images {
      -webkit-box-ordinal-group: 0;
          -ms-flex-order: -1;
              order: -1
  }
    }




.rich-text--intro {
    font-size: var(--fs-l);
}



.usp-section {
  position: relative;
  overflow: hidden;
}

  .usp-section .usp {
    text-align: center;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 47.9375rem) {

  .usp-section .usp {
      padding-bottom: var(--s-xxl)
  }
    }

  .usp-section .usp-section-content {
    position: relative;
    z-index: 1;
  }

  .usp-section .usp-heading-wrapper {
    width: 100%;
    margin-bottom: var(--m-m);
  }

  .usp-section .usp-heading-wrapper .usp-section-title,
    .usp-section .usp-heading-wrapper .usp-section-intro {
      text-align: center;
      display: block;
    }

  .usp-section .usp-section-cta {
    position: relative;
    z-index: 1;
  }

  .usp-section .usp-section-background-image {
    display: none;
  }

  .usp-section.has-background-image {
    padding: var(--s-xxxxl) 0;
  }

  .usp-section.has-background-image .usp-section-background-image {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }

  .usp-section.has-background-image .usp-section-background-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

  .usp-section.has-background-overlay::after {
      content: '';
      position: absolute;
      top: 0;
      right: -15px;
      bottom: 0;
      left: -15px;
      background-color: var(--color-black);
      opacity: 0.5;
      z-index: 0;
    }

  .usp-section.has-light-text h2,
    .usp-section.has-light-text p {
      color: var(--color-white);
    }



.title a {
    font-size: var(--fs-xl);
    line-height: var(--lh-xs);
    text-decoration: none;
  }

    @media (min-width: 62rem) {.title a {
      font-size: var(--fs-xxl)
  }
    }

header .title a {
      color: var(--color-white);
    }



.tabs-controls {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style-type: none;
}

  @media (max-width: 47.9375rem) {.tabs-controls {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    overflow-x: scroll
}
  }

.tab-item a {
    cursor: pointer;
    height: 100%;
    position: relative;
    display: block;
    color: var(--text-color);
    padding: var(--s-m) var(--s-l);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    font-weight: var(--fw-bold);
    border-bottom: 4px solid var(--color-light-gray);
  }

.tab-item a.active {
      color: var(--brand-color-1);
      border-bottom: 4px solid var(--brand-color-1);
    }

.tab-item a span {
      display: block;
    }

.tab-item a:empty {
      display: none;
    }

.tab-item a img {
      margin-bottom: var(--s-m);
      max-width: var(--s-xxxl);
    }

@media (min-width: 62rem) {

.tab-item a img {
        max-width: var(--s-xxxxl)
    }
      }

.tab-panel {
  display: none;
  min-height: 100px;
  height: auto;
  margin-top: var(--s-xl);
}

.tab-panel.open {
    display: block;
    height: auto;
    padding: var(--s-m) 0;
  }

.tab-panel::empty {
    display: none;
  }





.counter {
    position: relative;
    display: block;
    padding: var(--s-m);
    background-color: #ebf5e6;
}
    .counter .count {
        display: block;
        font-size: var(--fs-m);
        margin-bottom: var(--s-m);
    }
    @media (min-width: 62rem) {
    .counter .count {
            display: inline-block;
            margin-right: var(--s-m);
            margin-bottom: 0
    }
            [dir="rtl"] .counter .count {
                margin-left: var(--s-m);
                margin-right: 0;
            }
        }
    .counter .number {
        display: inline-block;
        min-width: var(--s-xl);
        max-width: var(--s-xxl);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(48%, #4CA246),color-stop(52%, #2b9124), color-stop(52%, #4CA246));
        background: linear-gradient(to top, #4CA246 48%,#2b9124 52%, #4CA246 52%);
        border: var(--s-xs) solid #2b9124;
        border-radius: var(--border-radius-s);
        padding: var(--s-xs) 0;
        margin: 2px;
        color: var(--color-white);
        text-shadow: 2px 2px #2b9124;
        text-align: center;
    }
    .counter .character {
        display: inline-block;
        text-align: center;
    }
    .counter .counter-text {
        margin-bottom: 0;
    }
    @media (min-width: 62rem) {
    .counter .counter-text {
            display: inline-block
    }
        }

.component.login tr{
        background: none;
    }

/* presentation styles of container */
.bgc-white {
  background-color: var(--color-white);
}

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

.bgc-medium {
  background-color: var(--background-color-medium);
}

.bgc-dark {
  background-color: var(--background-color-dark);
}

.bgc-primary {
  background-color: var(--primary-color);
}

.bgc-secondary {
  background-color: var(--secondary-color);
}

.bg-pattern {
  background: var(--pattern);
}

.bgc-vert-gradient-white-light {
  background: -webkit-gradient(linear,
      left top, left bottom,
      from(var(--color-white)),
      to(var(--background-color-light)));
  background: linear-gradient(to bottom,
      var(--color-white) 0%,
      var(--background-color-light) 100%);
}

.has-bgi>div {
    background-size: cover;
    background-repeat: no-repeat;
  }

.bgi-cover {
  position: relative;
  min-height: 20vh;
}

/*todo*/

.bgi-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* presentation style of container */

.container.layout--fluid,
.layout--fluid {
    max-width: 100%;
}

.container.layout--large,
.layout--large {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container.layout--medium,
.layout--medium {
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;
}

.container.layout--small,
.layout--small {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.container.layout--extra-small,
.layout--extra-small {
    max-width: 576px;
    margin-left: auto;
    margin-right: auto;
}
.container.container--no-padding {
  padding-left: 0;
  padding-right: 0;
}

.container.container--large-padding {
  padding: var(--s-m);
}

@media (min-width: 62rem) {

.container.container--large-padding {
    padding: var(--s-xxxxl)
}
  }

.overlay {
  display: none;
  position: absolute;
  margin: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-height: 30px;
  min-width: 30px;
  z-index: 9999;
  background: var(--color-white);
  -webkit-box-shadow: var(--box-shadow-narrow-medium);
          box-shadow: var(--box-shadow-narrow-medium);
  border-radius: var(--border-radius-s);
  overflow-x: auto;
}

  .overlay .overlay-inner {
    padding: var(--s-xxxl) var(--s-xxl);
  }

  /* Specific styling for close button, so no vars */

  .overlay .overlay-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    opacity: 0.3;
    margin: var(--m-s);
  }

  .overlay .overlay-close:hover {
    opacity: 1;
  }

  .overlay .overlay-close:before,
  .overlay .overlay-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 30px;
    width: 3px;
    background-color: #333;
  }

  .overlay .overlay-close:before {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
  }

  .overlay .overlay-close:after {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
  }



.search-box {
  background: var(--color-light-gray);
  padding: var(--s-m);
}

	@media (min-width: 36rem) {.search-box {
		padding-top: var(--s-s);
		padding-bottom: var(--s-s)
}
	}

	@media (min-width: 36rem) {

	.search-box .component-content {
			display: -webkit-box;
			display: -ms-flexbox;
			display: flex;
	    -webkit-box-pack: center;
	        -ms-flex-pack: center;
	            justify-content: center;
			-webkit-box-align: center;
			    -ms-flex-align: center;
			        align-items: center
  }
		}

	.search-box label {
		margin-right: var(--m-m);
  }

	@media (max-width: 61.9375rem) {

	.search-box label {
      display: none
  }
    }

	.search-box input[type='text'] {
    width: 18rem;
    padding-top: var(--s-m);
    padding-bottom: var(--s-m);
  }

	[dir="rtl"] .search-box input[type='text'] {
      text-align: right;
    }

	@media (max-width: 35.9375rem) {

	.search-box input[type='text'] {
			width: 100%;
			margin-bottom: var(--m-xs)
  }
    }

	.search-box .search-box-button,
  .search-box .search-box-button-with-redirect {
    background-color: var(--primary-color);
	}

	@media (max-width: 35.9375rem) {

	.search-box .search-box-button,
  .search-box .search-box-button-with-redirect {
      width: 100%
	}
    }

	@media (min-width: 36rem) {

	.search-box .search-box-button,
  .search-box .search-box-button-with-redirect {
      margin-left: var(--m-s)
	}
      [dir="rtl"] .search-box .search-box-button, [dir="rtl"] .search-box .search-box-button-with-redirect {
        margin-left: unset;
        margin-right: var(--m-s);
      }
    }

	@media (max-width: 35.9375rem) {

	.search-box .twitter-typeahead {
			width: 100%
	}
    }

	.search-box .tt-menu {
    background-color: var(--color-white);
    min-width: 100%;
    border-style: solid;
    border-width: 0 1px 1px;
    border-color: var(--border-color);
  }

	.search-box .tt-menu .tt-suggestion:not(:last-child) {
        border-bottom: solid 1px var(--border-color);
      }

	.search-box .tt-menu .tt-suggestion a {
        display: block;
        padding: var(--s-s) var(--s-m);
        -webkit-transition: var(--transition);
        transition: var(--transition);
        color: var(--text-color);
      }

	.search-box .tt-menu .tt-suggestion a:hover {
          background-color: var(--primary-color);
          color: var(--color-white);
          text-decoration: none;
        }



.search-results {
	margin-top: var(--m-m);
	margin-bottom: var(--m-m);
}

	.search-results .search-result-list > li:empty {
		display: none;
	}



/* normalize */

/* Settings */

/* Mixins */

/* Elements */

/* Utility */

/* Vendors */

/* Context */

/* Custom */

/* Generic */

/* Composites */

/* Navigation */

/* page content */

/* Composites */

/* page structure */

/* search */