/* 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 */
  -webkit-font-feature-settings: none;
          font-feature-settings: none;
  -webkit-font-variant-ligatures: none;
          font-variant-ligatures: none;
}

/* 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;
  --transparent: rgba(255,255,255,0);
  --transparent-white: rgba(255,255,255,0.85882);

  --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;
  --color-rating-yellow: #F2DA04;
  --color-pale-pink: #FEEED0;
  --color-lavender: #EAE5DD;

  /* 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;
  --color-saveRecipe: #E13A2E;

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

  /* Form error color */
  --color-form-error-message: #E00000;

  /* --- 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);
  --link-hover-color: var(--link-color);

  /* 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);
  --error-message-color: var(--color-form-error-message);

  /* 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);
  --meta-header-link-color: var(--color-white);
  --notification-bar-color: var(--background-color-brand);
  --notification-content-color: var(--text-color);
  --mobile-menu-bg-color: var(--primary-color);
  --custom-banner-color: #86d075;
  --breadcrumb-text-color: var(--color-darker-gray);
  --product-detail-header-background: var(--color-black);
  --product-detail-header-content-color: var(--color-white);
  --social-post-bg-color: var(--color-white);
  --social-post-text-color: var(--text-color);
  --social-post-link-color: var(--link-color);
  --recipe-ingr-instr-subheader-title-color: var(--brand-color-7);
  --notification-bar-secondary-button-color: var(--btn-bg-color);
  --bullet-color: var(--primary-color);

  /* Overlay Background */
  --color-black-rgb: 0, 0, 0;
  --overlay-bg-dark: rgba(var(--color-black-rgb), 0.7);
  --overlay-bg-medium: rgba(var(--color-black-rgb), 0.5);
  --overlay-bg-light: rgba(var(--color-black-rgb), 0.3);
  --overlay-bg-lightest: rgba(var(--color-black-rgb), 0.1);
  --overlay-bg-color: var(--color-black);
  --page-header-overlay-color: var(--color-black);
  --page-header-content-color: var(--heading-color);

  /* Testimonial Background color */
  --testimonial-odd: var(--color-pale-pink);
  --testimonial-even: var(--color-lavender);

  /* Button Color */
  --btn-text-color: var(--color-white);
  --btn-bg-color: var(--primary-color);
  --btn-hover-text-color: var(--btn-text-color);
  --btn-hover-bg-color: var(--btn-bg-color);
  
  /* Secondary button color */
  --secondary-btn-bg-color: var(--primary-color);
  --secondary-btn-hover-bg-color: var(--btn-bg-color);
  --secondary-btn-text-color: var(--color-white);

  /* Tertiary button color */
  --tertiary-btn-bg-color: var(--primary-color);
  --tertiary-btn-hover-bg-color: var(--btn-bg-color);
  --tertiary-btn-text-color: var(--color-white);

  /* Filters */
  --filter-chevron-color: none;
  --filter-footer-social-icon-color: none;
  --filter-recipe-quick-links-color: var(--filter-chevron-color);

  /* Card */
  --product-card-background: var(--color-white);
  --product-card-hover-background: var(--product-card-background);
  --article-card-background: var(--color-white);
  --article-card-hover-background: var(--article-card-background);

  /* Footer social icons hover bg color */
  --footer-social-icons-hover-bg-color: inherit;

  /* Save Recipe Heart color */
  --save-recipe: var(--color-saveRecipe);
  --save-recipe-bg: var(--transparent-white);
  
  /* star rating colors */
  --plain-star-color: var(--color-white);
  --filled-star-color: var(--brand-color-1);
  --separator-line: var(--color-medium-light-gray);
  --avg-rating-strip: var(--color-black);

  /* climate label font color */
  --climate-label-font-color: #393D3F;

  /* Carbon Footprint calculcator */
  --cfc-bubble-font-color: var(--heading-color);
  --cfc-bubble-background: var(--color-white);
  --cfc-slider-thumb-light: #BAE5FF;
  --cfc-slider-thumb-dark: #023CAB;
  --cfc-ranger-slider-background: var(--color-white);
  --cfc-toggle-header-color: var(--color-white);
  --cfc-read-more-btnbg: var(--brand-color-2);
  --cfc-cal-section-bg-dark: var(--brand-color-1);
  --cfc-gradient1-mobile:var(--brand-color-1);
  --cfc-gradient2-mobile:rgba(46,55,115,0.12157);
  --cfc-dropdown-bg : var(--brand-color-2);
  --cfc-dropdown-bg-hover: #b3dae9;
  --cfc-dropdown-title-txtclr:#003366;
  --cfc-content-color: var(--color-white);
  --cfc-border-color: var(--color-white);

  /* Violife Foods BG */
  --violife-foods-blue: #3CCBDA; 
 
  /* Upfield.com BG */
  --upfield-waterblue: #5DA7A2;
  --Upfield-pumpkin: #FF6F3C;
  --Upfield-coconut: #FAF5EB;
  --Upfield-kale: #0A372E;
  --Upfield-mustard: #E6E6E6;
  --Upfield-sunflower: #FDBC40;
  --Upfield-freshgreen: #55BD6B;
/* global header bg color */
  --global-header-secondary-bg-color: var(--brand-color-1);
  --promo-large-banner-section-bg-color: var(--brand-color-2);
  --promo-large-banner-section-text-color: var(--brand-color-1);
  --recipie-card-slider-full-bg-color: var(--brand-color-3);
  --recipe-card-slider-image-container-bg-color: var(--brand-color-2);
  --recipe-card-title-text-color: var(--heading-color);
  --recipe-card-specs-text-color: var(--text-color);
  --global-header-megamenu-bg-color: var(--brand-color-1);
  --global-header-search-megamenu-bg-color: var(--brand-color-1);
  --global-header-search-dropdownmenu-bg-color: var(--brand-color-2);
  --global-header-ui-select-menu-bg-color:var(--brand-color-2);
  
}

: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);

  /* Card moving down on hover */
  --card-hover-transform: translateY(var(--s-s));

  /* Button moving up on hover */
  --button-hover-transform: translate(0px, -2px);
}

: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);
  --ff-heading1: var(--ff-headings);
  --ff-heading2: var(--ff-headings);
  --ff-heading3: var(--ff-headings);
  --ff-heading4: var(--ff-headings);
  --ff-heading5: var(--ff-headings);
  --ff-heading6: var(--ff-headings);
  --ff-button: var(--ff-body);
  --ff-links: var(--ff-body);
  --ff-notification-content: var(--ff-body);
  --global-fs-navigation: var(--fs-desk-headsize);
  --global-fs-submenu: var(--fs-desk-submenu-size);
  --fs-global-navigation-mobile: var(--fs-glob-nav-mobile);
  /* Font sizes */
  --fs-xxs: 0.6875rem; /* 11px */
  --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-globhamicon: 1.9375rem;
  --fs-desk-headsize: .8125rem;
  --fs-desk-submenu-size: 1rem;
  --fs-glob-nav-mobile: 1rem;
  --fs-body: var(--fs-m);
  --fs-input: var(--fs-m);
  --fs-button: var(--fs-m);
  --fs-intro: var(--fs-l);
  --fs-navigation: var(--fs-m);
  --fs-navigation-mobile: var(--fs-s);
  --fs-notification-content: var(--fs-l);
  --fs-submenu: var(--fs-m);
  --fs-footer-text: var(--fs-xs);
  --fs-recipe-ingr-instr-subheader-title: var(--fs-l);
  --fs-product-detail-title: var(--fs-xxxl);
  --fs-product-detail-title-mobile: var(--fs-xxl);

  /*carbon Footprint calculator */

  --fs-title-desktop: 85px;
  --fs-title-mobile: 55px;
  --fs-subtitle-desktop: 20px;
  --fs-subtitle-mobile: 18px;

  /* 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 */

  /* Font weight for font families */
  --fw-headings: var(--fw-bold);
  --fw-body: var(--fw-regular);
  --fw-cards: var(--fw-bold);
  --fw-navigation: var(--fw-regular);
  --fw-h1: var(--fw-headings);
  --fw-h2: var(--fw-headings);
  --fw-h3: var(--fw-headings);
  --fw-h4: var(--fw-headings);
  --fw-h5: var(--fw-headings);
  --fw-h6: var(--fw-headings);

  --fw-button: var(--fw-body);

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

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-regular);
  src: local('Rubik'), local('Rubik-Regular'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/rubik2.woff2) format('woff2'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/rubik.woff) format('woff');
}

@font-face {
  font-family: 'Rubik';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-bold);
  src: local('Rubik Bold'), local('Rubik-Bold'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/rubikBold2.woff2) format('woff2'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/rubikBold.woff) format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-regular);
  src: local('Oswald Regular'), local('Oswald-Regular'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/oswaldRegular2.woff2) format('woff2'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/oswaldRegular.woff) format('woff');
}

@font-face {
  font-family: 'Oswald';
  font-style: normal;
  font-display: swap;
  font-weight: var(--fw-bold);
  src: local('Oswald Bold'), local('Oswald-Bold'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/oswaldBold2.woff2) format('woff2'),
    url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/fonts/oswaldBold.woff)  format('woff');
}

:root {
  /* header heights */
  --header-height-mobile: 80px;
  --header-height-tablet: var(--header-height-mobile);
  --header-height-desktop: 120px;
  --global-header-height-desktop: 110px;
  --global-header-height-mobile: 74px;
  --header-with-nav-desktop: 56px;
  --header-with-nav-mobile: 48px;

  /* global header heights */
  --navigation-bar-height-d: 53px;
  --navigation-bar-height-m: 48px;

  /* product card heights */
  --product-card-height: 450px;
  --product-card-img-height: 200px;
  --product-card-v2-img-height: 150px;

  /*global product card heights */
  --product-card-height-global: 350px;
  --product-card-overview-v2-height-mobile: 271px;
  --product-card-overview-v2-height-desktop: 400px;
  --product-card-overview-v2-width: 260px;
  --product-card-overview-v2-img: 155px;
  --product-card-overview-v2-img-desktop: 260px;
  --product-card-title-width: 126px;
  --product-card-star-width: 134px;
  --product-card-image-mobile: 215px;
  --product-card-image-desktop: 232px;
  --product-category-title-width: 210px;
  --product-card-category-v2-width: 220px;

  /* recipe card heights */
  --recipe-card-img-height-mobile: 350px;
  --recipe-card-img-height-desktop: 500px;

  /* article card heights */
  --article-card-title-height: 40px;

  /* global article card heights */
  --article-card-height-desktop: 200px;
  --article-card-height-mobile: 110px;
  --article-card-width-desktop: 200px;
  --article-card-width-mobile: 110px;
  --article-card-content-width: 215px;
  --article-card-content-height: 75px;
  --article-list-width-desktop: 1440px;
  --article-list-width-mobile: 400px;
  --article-list-li-width-desktop: 500px;
  --article-list-li-width-mobile: 375px;
  --article-list-ul-desktop: 600px;
  --article-list-ul-mobile: 570px;

  /* notification bar alignment */
  --justify-content: space-between;
  --notification-bar-justify-content: var(--justify-content);

  /* padding */
  --btn-padding: var(--s-m) var(--s-l);
  --product-card-padding: var(--s-l);
  --product-card-v2-padding: var(--s-m);
  --article-card-padding: 0;

  /* social post */
  --social-post-min-width: 250px;
  --social-post-gap: 30px;
  --caption-max-text-lines: 3;

  /* Various */
  --btn-gradient: unset;
  --header-visibility: visible;

  /* Product Variant */
  --product-variant-card-width: 120px;
  --product-variant-card-height: 120px;
  /* global Product Variant */
  --product-header-img-w: 627px;



  /* global cards */
  --content-height: 75px;
  --homepage-carousel-title-width: 580px;
  --homepage-carousel-title-height: 219px;
  --homepage-content: 220px;
  --carousel-margin: 40px;
  --carousel-title-top: 142px;
  --carousel-btn-margin-left: 93px;
  --carousel-btn-width-m: 161.5px;
  --carousel-btn-width-d: 187px;
  --button-height-d: 54px;
  --page-header-image-d: 470px;
  --page-header-image-m: var(--banner-img-height-m);
  --page-teaser-image-d: 295px;
  --page-teaser-image-m: 162px;

  /* global promo */
  --related-recipe-images-height: 290px;
  --related-recipe-images-height-d: 480px;
  --related-recipe-images-width: 650px;

  /* global article banner */
  --article-banner-height-mobile: 216px;
  --article-banner-height-desktop: 409px;
  --article-banner-width-mobile: 335px;
  --article-banner-width-desktop: 568px;
  --button-margin-left: 132px;

  /* global recipe of the day */
  --recipe-of-the-day-height-m: var(--banner-img-height-m);
  --recipe-of-the-day-height-d: 402px;


  /* global recipe card heights */
  --recipe-card-img-d: var(--page-teaser-image-d);
  --recipe-card-img-m: 155px;
  /* global product Banner */
  --product-banner-height-m: 215px;
  --product-banner-width-m: 355px;
  --product-banner-height-tab: 320px;
  --product-banner-width-tab: 422px;
  --product-banner-height-d: 381px;
  --product-banner-width-d: 600px;
  --product-detail-image-d: var(--page-teaser-image-d);
  --product-detail-image-m: var(--page-teaser-image-m);

  /* global Product detail page */
  --product-header-height: 478px;
  --product-intro-width: var(--product-banner-width-d);

  /* Global Header search bar*/
  --header-search-bar-mobile: 312px;
  --header-search-bar-desktop: 600px;

  /* global Homepage large banner */
  --banner-img-height-d: 578px;
  --banner-img-height-m: 253px;
  --banner-content-height-m: 238px;

  /* global Logo */
  --logo-height-m: 50px;

  /* global cookbook */
  --btn-width-m: 161px;
  --btn-width-d: 290px;
  --btn-height-m: 42px;
  --btn-height-d: 54px;
  --content-width: 650px;
}
:root {
  --opacity-xs: 0.9;
  --opacity-s: 0.6;
  --opacity-m: 0.5;
  --opacity-l: 0.35;
  --opacity-xl: 0.2;
  --product-detail-header-background-opacity: var(--opacity-xl);
  --opacity-category-card: var(--opacity-s);
  --opacity-recipe-card: var(--opacity-s);
  --search-box-placeholder-opacity: var(--opacity-xs);
}

: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-bottom-light: 0 0.25rem 0.75rem var(--color-light-gray);
  --box-shadow-narrow-bottom: 0 .9rem 1rem -0.25rem var(--color-light-gray);
  --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);
  --box-shadow-product-card: 4px 4px 12px 6px rgba(0, 0, 0, 0.1);
  
  /* Button Shadow */
  --btn-shadow: unset;

  /* Card */
  --card-shadow: var(--box-shadow-narrow-medium);
  --card-shadow-mobile: var(--card-shadow);
  --card-hover-shadow: var(--box-shadow-narrow-light);
  --card-shadow-product: var(--box-shadow-product-card);
  --box-shadow-cards: 0px 4px 12px 6px rgba(0,0,0,0.15);
  --box-shadow-cards-hover: 0px 2px 6px 3px rgba(0,0,0,0.1);
  --card-shadow-product-variant: 0px 2px 16px rgba(0, 0, 0, 0.25);
  
  /* Promo Image */
  --promo-image-shadow: var(--box-shadow-narrow-medium);

  /* Navigation bar */
  --navigation-bar-shadow: none;

  /* Text shadow */
  --page-header-title-shadow: none;
  --product-detail-header-title-shadow: none;
  /* Popup Backgound Overlay */
  --pop-up-background-overlay: rgba(0, 0, 0, 0.3);
}

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

  --border-radius-rounded: 999rem;

  /* Button Border */
  --btn-border-width: unset;
  --btn-border-style: unset;
  --btn-border-color: unset;
  --btn-border-radius: unset;

  /* Cards */
  --product-card-border-width: 1px;
  --product-card-border-style: solid;
  --product-card-border-color: var(--color-lighter-gray); 
  --product-card-border-radius: 0;
  --product-card-img-border-radius: 0;
  --article-card-border-width: 0 0 var(--s-xs);
  --article-card-border-style: solid;
  --article-card-border-color: var(--primary-color);
  --article-card-border-radius: 0;
  --article-card-img-border-radius: 0;
  --hoz-scrollable-recipe-card-border-radius: unset;
  --recipe-card-v2-border-radius: var(--border-radius-s);
  --recipe-card-v1-border-radius: unset;
  --category-card-border-radius: var(--border-radius-m);
  --social-post-card-border-width: 0px;
  --social-post-card-border-style: solid;
  --social-post-card-border-color: transparent;
  --social-post-card-border-radius: 0;

  --article-banner-border-radius-desktop: 20px;
  --article-banner-border-radius-mobile: 9px;
  
  /* Promo Image */
  --promo-image-border-width: unset;
  --promo-image-border-style: unset;
  --promo-image-border-color: unset;
  --promo-image-border-radius: unset;

  /* Search box */
  --search-box-border-radius: unset;

  /* Navigation bar */
  --navigation-bar-border-width: unset;
  --navigation-bar-border-style: unset;
  --navigation-bar-border-color: unset;
  /* btn-ghost */
  --btn-ghost-border-width: 1px;
  --btn-ghost-border-style: solid;
  --btn-ghost-border-color: var(--primary-color);
  --btn-ghost-border-radius: var(--border-radius-rounded);
}

: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;
  --logo-width-global: 140px;
}

: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');
  --wave: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/images/wave.png');
  --waveshape: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/images/waveshape_image');
  --pattern-resize-mobile: 94px;
}

/* 
    Making webpage printer friendly for pages having print icon
    */
    @media print{
        header > #header, footer > #footer, footer, .notification-bar, .recipe-signup-btn, .addthis, 
        .at-expanding-share-button-mobile-container, .related-recipes, .at-image-sharing-mobile-icons, 
        .at-share-dock, .at-share-dock-outer, .at-expanding-share-button-desktop, 
        .at-expanding-share-button, .addthis-smartlayers, .addthis-animated, .highlighted-recipes, .related-products, 
        .vimeo-video, .full-width-video, .manual-teaser-list, .video > #video-title,
        .custom-video, .back-to-overview-link, .plain-text--underline-accent, .plain-text--underline-accent + 
        .component.page-list.page-list-grid, .component.page-list.page-list-grid + .component.link.text-align-center,
        .overlay-source.custom-popup, #recipe-download-print, .crt-widget, .crt-widget ~ center, .social-feed-title,
        .mikmak-discover, .component.page-list.page-list-grid .items, .component.page-list.page-list-grid .items, 
        #recipe-floating-widget, .my-recipe-star-rating.bg-pattern, #upfield-star-rating, .recipe-rating,
        .backToRecipes, .be-first-container, #scroll-into-view, .bg-pattern, #social-feed-wrapper, .social-feed,
        #feed-in-recipe-v5, .C2B_Widget_Key, .Widget_Key_2Buy, .hidden-print, .climate-dialog-box
        {
            display:none!important;
        }
        body{
            padding-top: 0!important;
            -webkit-print-color-adjust: exact !important;  
            color-adjust: exact !important;       
        }
        /* For Recipe detail V4 template */
        .recipe-header-background{
            min-height: 400px!important;
            width: 100vw;
        }
        .field-introduction{
            font-size: var(--fs-m)!important;
        }
        .recipe-info-section .recipe-short-summary {
            margin-top: var(--m-xs)!important;
    
        }
            .recipe-info-section .recipe-short-summary .recipe-short-summary-list {
                -ms-flex-wrap: nowrap!important;
                    flex-wrap: nowrap!important;
                -webkit-box-pack: space-evenly!important;
                    -ms-flex-pack: space-evenly!important;
                        justify-content: space-evenly!important;
                margin-bottom: var(--m-s)!important;       
            }
                .recipe-info-section .recipe-short-summary .recipe-short-summary-list li{
                    -webkit-box-flex: unset!important;
                        -ms-flex: unset!important;
                            flex: unset!important;
                    padding: 10px!important;
                    margin: unset!important;
                }
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li img{               
                        height: 30px!important;
                        width: 30px!important;
                    }
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(1){
                        max-width: 100%;
                    }
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(2),
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(2) ~ li {
                        max-width: 50%;
                    }
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(3),
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(3) ~ li {
                        max-width: calc(4/12*100%);
                    }     
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(4),
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(4) ~ li {
                        max-width: 25%;
                    }     
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(5),
                    .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:first-child:nth-last-of-type(5) ~ li {
                        max-width: 20%;
                    }
        .recipe-header-background img, .recipe-header-content{
            opacity: 1!important;
        }
        .recipe-detail-body{
            padding-top: var(--s-s)!important;
        }
            .recipe-detail-ingredients h3,.recipe-detail-instructions h3{
                margin-bottom: var(--s-m)!important;    
            }
        .recipe-detail-instructions ol li{
            margin: 0!important;
            padding-top: var(--s-s)!important;
            padding-bottom: var(--s-m)!important;
            line-height: var(--lh-xs)!important;
            font-size: var(--fs-s)!important;
        } 
            .recipe-ingredient-list h5{
                margin: var(--s-xs) 0!important;
            }
            .recipe-ingredient-list > ul > li{
                padding: var(--s-xs) var(--s-m)!important;
            }
        /* For recipe detail V1 template */
        .recipe-detail{
            padding-top: 0!important;
        }
        .recipe-detail-intro h1{
            margin: 0 0 var(--s-s)!important;
        }
        .recipe-detail-specs{
            padding: var(--s-xs) 0!important;
        }
            .recipe-detail-specs li{
                width: -webkit-fit-content!important;
                width: -moz-fit-content!important;
                width: fit-content!important;
            }
        /* For recipe detail partial design inside whitelabel */
        .recipe-detail-header{
            padding-bottom: var(--s-m)!important;
        }
            .recipe-detail-header .hero-section{
                min-height: unset!important;
            }
            .recipe-detail-header .hero-content{
                padding: var(--s-m)!important;
                padding-bottom: var(--s-xxl)!important;
            }
        .tabs-content > .tab-panel{
            margin-top: 0!important;
        }
        .hero .hero-background img, .hero .video-link img{
            min-height: 400px!important;
            height: 400px!important;
        }
    
        
        .check-list ul li, .check-list-horizontal ul li{
            padding: 0 0 var(--s-s) var(--s-xl)!important;
            font-size: var(--fs-s)!important;
        }
        .product-detail-body .accordion .toggle-content, .tabs-content > .tab-panel{
            display: block!important;
        }            
        .tabs-content > .tab-panel > div:last-child{
            border-bottom: 1px solid black;
        }    
        p{
            margin: 0 0 var(--s-s) 0!important;
        }
        [dir='rtl'] .v5 .recipe-ingredient-list.check-list ul li {
            padding: 0 var(--s-xl) var(--s-m) 0!important;
        }
    }






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

  a:hover {
    text-decoration: underline;
    color: var(--link-hover-color);
  }

.btn,
button,
input[type="submit"],
input[type="button"] {
  position: relative;
  background-color: var(--btn-bg-color);
  color: var(--btn-text-color);
  padding: var(--btn-padding);
  border-width: var(--btn-border-width);
  border-style: var(--btn-border-style);
  border-color: var(--btn-border-color);
  border-radius: var(--btn-border-radius);
  -webkit-box-shadow: var(--btn-shadow);
          box-shadow: var(--btn-shadow);
  background-image: var(--btn-gradient);
  display: inline-block;
  cursor: pointer;
  vertical-align: middle;
  font-family: var(--ff-button);
	font-size: var(--fs-button);
  font-weight: var(--fw-button);
	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: 1;
    text-decoration: none;
    -webkit-transform: var(--button-hover-transform);
            transform: var(--button-hover-transform);
  }

  .btn:hover:not(.btn-text), .btn:focus:not(.btn-text), button:hover:not(.btn-text), button:focus:not(.btn-text), input[type="submit"]:hover:not(.btn-text), input[type="submit"]:focus:not(.btn-text), input[type="button"]:hover:not(.btn-text), input[type="button"]:focus:not(.btn-text) {
      background-color: var(--btn-hover-bg-color);
      color: var(--btn-hover-text-color);
    }

  .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);
    -webkit-box-shadow: none;
            box-shadow: none;
    border: none;
    background-image: none;
  }

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

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

/* Secondary button */

.btn-secondary {
    background-color: var(--secondary-btn-bg-color);
    color: var(--secondary-btn-text-color);
  }

.btn-secondary:hover:not(.btn-text), .btn-secondary:focus:not(.btn-text) {
        background-color: var(--secondary-btn-hover-bg-color);
      }

/* Tertiary button */

.btn-tertiary {
    background-color: var(--tertiary-btn-bg-color);
    color: var(--tertiary-btn-text-color);
  }

.btn-tertiary:hover:not(.btn-text), .btn-tertiary:focus:not(.btn-text) {
        background-color: var(--tertiary-btn-hover-bg-color);
      }

/* Botton ghost*/

.btn-ghost {
    /* background-color: transparent; */
    font-weight: var(--fw-black);
    font-size: var(--fs-button);
    line-height: var(--fs-s);
    padding: var(--btn-padding);
    border-width: var(--btn-ghost-border-width);
    border-style: var(--btn-ghost-border-style);
    border-color: var(--btn-ghost-border-color);
    border-radius: var(--btn-ghost-border-radius);
  }

@media(min-width: 62rem){

.btn-ghost {
      font-size: var(--fs-button);
      line-height: var(--lh-m);
      padding: var(--btn-padding)
  }
    }

.btn-ghost:hover:not(.btn-text), .btn-ghost:focus:not(.btn-text) {
        /* background-color: transparent; */
      }


@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-body);
  font-family: var(--ff-body);
  font-weight: var(--fw-body);

  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: 75rem) {

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

main {
  overflow-x: hidden;
  overflow-y: 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='postal'],
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-input);
  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='postal']: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='postal'].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='postal'].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='password'],
  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 span.field-validation-error{
         color: red;
          font-size: var(--fs-s);
          display: block;
          -webkit-box-ordinal-group: 0;
              -ms-flex-order: -1;
                  order: -1; /* Move error msg above input */
          margin: 0px 0px 12px;
  }

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;
  } 
   
.input-group {
  margin-bottom: var(--s-xxl);
} 
   
@media (max-width: 35.9375rem) { 
   
.input-group {
    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;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center
}    
  } 
   
.input-group label.custom-file-upload {
     cursor: pointer;
  } 
   
@media (max-width: 35.9375rem) { 
   
.input-group label.custom-file-upload {
      margin-bottom: var( --s-s)
  }
    } 
   
.input-group .btn-ghost {
    display: -webkit-inline-box;
    cursor: pointer;
    border: 1px solid var(--heading-color);
    padding: 5px 5px 5px 5px;
  } 
   
.input-group #uploadFile {
    padding: var(--s-xs);
    font-family: var(--ff-body);
    font-size: var(--fs-input);
    line-height: var(--lh-m);
    margin-left: 10px;
    font-weight: inherit;
    background-color: transparent;
  } 
   
@media (max-width: 35.9375rem) { 
   
.input-group #uploadFile {
      text-align: center
  }
    } 
   
.input-group .file-validation-error{
     color: #E00000;
     font-size: var(--fs-s);
     display: block;
     margin: 12px 0px 12px;
  }       

.checkbox-label {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  cursor: pointer;
  padding-top: 15px;
}       

.checkbox-label input[type='checkbox'] {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    min-width: 18px;
    height: 18px;
    margin-right: 8px;
    border: 1px solid var(--primary-color);
    position: relative;
    cursor: pointer;
    bottom:22px;
  }       

.checkbox-label input[type='checkbox']:checked {
      background-color: var(--primary-color);
    }       

.checkbox-label input[type='checkbox']:checked::before {
        content: "";
        background: url(`../../../Images/check-white.svg`) no-repeat;
        width: 100%;
        height: 100%;
        position: absolute;
        background-size: 14px;
        background-position: center;
      }


h1,
.h1,
h2,
.h2,
h3,
.h3,
h4,
.h4,
h5,
.h5,
h6,
.h6 {
  margin: 0 0 var(--m-s);
  font-weight: var(--fw-headings);
  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);
  font-family: var(--ff-heading1);
  font-weight: var(--fw-h1);
}

@media (min-width: 62rem) {

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

h2,
.h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-xs);
  font-family: var(--ff-heading2);
  font-weight: var(--fw-h2);
}

@media (min-width: 62rem) {

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

h3,
.h3 {
  font-size: var(--fs-l);
  font-family: var(--ff-heading3);
  font-weight: var(--fw-h3);
}

@media (min-width: 62rem) {

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

h4,
.h4 {
  font-size: var(--fs-m);
  font-family: var(--ff-heading4);
  font-weight: var(--fw-h4);
}

@media (min-width: 62rem) {

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

h5,
.h5 {
  font-size: var(--fs-s);
  font-family: var(--ff-heading5);
  font-weight: var(--fw-h5);
}

@media (min-width: 62rem) {

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

h6,
.h6 {
  font-size: var(--fs-m);
  color: var(--primary-color);
  font-family: var(--ff-heading6);
  font-weight: var(--fw-h6);
}

.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)
    }
      }

.tick-wrapper {
  position: absolute;
  margin-left: -27px;
}

[dir='rtl'] .tick-wrapper {
    margin-right: -27px;
    margin-left: unset;
  }

@media (max-width: 35.9375rem) {

.tick-wrapper {
    display: -webkit-inline-box;
    display: -ms-inline-flexbox;
    display: inline-flex;
    margin: 0;
    padding: 0 var(--s-s) 0 0
}
    [dir='rtl'] .tick-wrapper {
      margin: 0;
      padding: 0 0 0 var(--s-s);
    }
  }

.tick-label {
  width: 0;
  height: 0;
  display: block;
  -webkit-user-select: none;
     -moz-user-select: none;
      -ms-user-select: none;
          user-select: none;
  color: transparent;
}
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-xxs {
  padding-top: var(--s-m);
}

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

.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)
}
  }

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

.text-align-left {
		text-align: left;
	}
	.text-align-center {
		text-align: center;
	}
	.text-align-right {
		text-align: right;
	}
	.text-align--side-on-mobile--center-on-desktop {
		padding-left: 15px;
		padding-right: 15px;
        text-align: left;
	}
	[dir='rtl'] .text-align--side-on-mobile--center-on-desktop {
            text-align: right;
        }
	@media (min-width: 62rem) {
	.text-align--side-on-mobile--center-on-desktop {
            text-align: center
	}
            [dir='rtl'] .text-align--side-on-mobile--center-on-desktop {
                text-align: center;
            }
        }

.hidden {
  display: none;
}

/* Auto Margins */
.margin-top-auto{
    margin-top: auto;
}

.margin-bottom-auto{
    margin-bottom: auto;
}

.margin-left-auto{
    margin-left: auto;
}

.margin-right-auto{
    margin-right: auto;
}
.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);
  max-width: 100%;
  padding: 0 var(--s-l);
}
  
  @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%);
    padding: 0 15px
}

    .header-language-selector-wrapper.align-near-nav-icon {
      left: auto;
      right: 100px;
    }

      [dir='rtl'] .header-language-selector-wrapper.align-near-nav-icon {
        left: 54px;
        right: auto;
      }
  }

.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(--recipe-ingr-instr-subheader-title-color);
    border-bottom: solid 1px var(--brand-color-8);
    text-transform: none;
    font-size: var(--fs-recipe-ingr-instr-subheader-title);
  }

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

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

  .recipe-ingredient-list a span.v3{
      max-width: none;
    }

  .recipe-ingredient-list img {
    max-width: 40px;
    margin-right: var(--s-s);
    margin-left: 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);
        }
#recipe-filter-options-results-container {
  max-width: 1440px;
  padding: var(--s-m) 15px 0;
  overflow: hidden;
  position: relative;
}

  @media (min-width: 62rem) {#recipe-filter-options-results-container {
    padding: var(--s-xl) 15px 0
}

    #recipe-filter-options-results-container > .component-content {
      position: relative;
    }
  }

  #recipe-filter-options-results-container #filter-results-wrapper {
    margin: 0 0 var(--s-xxxl) 0;
    -webkit-transition: margin .4s var(--ease-in-out);
    transition: margin .4s var(--ease-in-out);
    -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s;
  }

  #recipe-filter-options-results-container #filter-results-wrapper .search-results {
      margin: 0; 
    }

  #recipe-filter-options-results-container #filter-results-wrapper .load-more {
      padding-top: var(--m);
    }

  #recipe-filter-options-results-container.toggle-filter-options #filter-options-wrapper {
      margin: 0;
      padding-bottom: var(--m-l);
    }

  @media (max-width: 61.9375rem) {

  #recipe-filter-options-results-container.toggle-filter-options #filter-options-wrapper {
        height: 100%;
        width: 100%;
        padding: 0;
        margin: 0;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 999999;
        background: var(--color-white);    
        overflow: auto;
        opacity: 1
    }
      }

  #recipe-filter-options-results-container.toggle-filter-options #filter-results-wrapper {
      width: 100%;        
    }

  @media (min-width: 62rem) {

  #recipe-filter-options-results-container.toggle-filter-options #filter-results-wrapper {
        margin: 0 0 var(--s-xxxl) 25%        
    }
        [dir="rtl"] #recipe-filter-options-results-container.toggle-filter-options #filter-results-wrapper {
          margin: 0 25% var(--s-xxxl) 0;
        }
      }

  /* class is added after timeout behalf of transition */

  @media (min-width: 62rem) {

  #recipe-filter-options-results-container.toggle-filter-options.toggle-filter-results #filter-results-wrapper {
          width: 75%        
      }
        }

  @media (min-width: 62rem) {

  #recipe-filter-options-results-container.toggle-filter-options.toggle-filter-results .all-recipes.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: 75rem) {

  #recipe-filter-options-results-container.toggle-filter-options.toggle-filter-results .all-recipes.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
        }
          }

  #recipe-filter-options-results-container::before,
  #recipe-filter-options-results-container::after {
    content: "";
    opacity: 0;
    -webkit-transition: opacity .2s var(--ease-in-out);
    transition: opacity .2s var(--ease-in-out); 
  }

  @media (min-width: 62rem) {
      #recipe-filter-options-results-container.has-opaque-on-sides::before,
      #recipe-filter-options-results-container.has-opaque-on-sides::after {
        content: "";
        width: 5%;
        height: 100%;
        position: absolute;
        z-index: 1;
        top: 0;
        opacity: 1;
      }
      #recipe-filter-options-results-container.has-opaque-on-sides::before {
        left: 0;
        background: -webkit-gradient(linear, left top, right top, from(var(--color-white)), to(var(--transparent)));
        background: linear-gradient(90deg, var(--color-white), var(--transparent));
      } 
      #recipe-filter-options-results-container.has-opaque-on-sides::after {
        right: 0;
        background: -webkit-gradient(linear, right top, left top, from(var(--color-white)), to(var(--transparent)));
        background: linear-gradient(-90deg, var(--color-white), var(--transparent));         
      }
    }


#filter-options-wrapper {
  width: 0%;
  height: 0;
  opacity: 0;
  overflow: hidden;
}


@media (max-width: 61.9375rem) {


#filter-options-wrapper {
    -webkit-transition: -webkit-transform 0.4s var(--ease-in-out);
    transition: -webkit-transform 0.4s var(--ease-in-out);
    transition: transform 0.4s var(--ease-in-out);
    transition: transform 0.4s var(--ease-in-out), -webkit-transform 0.4s var(--ease-in-out);
    -webkit-transform: translateY(100%);
            transform: translateY(100%)
}
    [dir="rtl"] #filter-options-wrapper {
      -webkit-transform: translateY(100%);
              transform: translateY(100%);
    }
  }


@media (min-width: 62rem) {


#filter-options-wrapper {
    width: 25%;
    opacity: 1;
    padding: 0 15px;
    height: auto;
    position: absolute;
    margin: 0 0 0 -25%;
    -webkit-transition: margin .4s var(--ease-in-out);
    transition: margin .4s var(--ease-in-out);
    -webkit-transition-delay: 0.05s;
            transition-delay: 0.05s
}
    [dir="rtl"] #filter-options-wrapper {
      margin: 0 -25% 0 0;
    }
  }


@media (max-width: 61.9375rem) {


#filter-options-wrapper.slide-in-mobile {
      -webkit-transform: translateY(0%);
              transform: translateY(0%)
  }
    }


#filter-options-wrapper.enable-hide-filter-options-onload .hide-filter-options-onload {
      position: absolute;
      width: 100%;
      height: calc(100% - 60px);
      z-index: 2;
      top: 60px;
      background-color: var(--color-white);
      opacity: 0.6;
    }


@media (min-width: 62rem) {


#filter-options-wrapper.enable-hide-filter-options-onload .hide-filter-options-onload {
        top: 0;
        height: 100%
    }
      }


@media (max-width: 61.9375rem) {


#filter-options-wrapper > .component-content {
      padding: var(--s-l) 0 0;
      height: calc(100% - 174px);
      overflow-y: auto
  }
    }


#filter-options-wrapper .facet-component {
    margin-bottom: var(--s-l);
  }


#filter-options-wrapper .facet-component:last-child {
      margin-bottom: var(--m-l);
    }


#filter-options-wrapper .facet-component.hide-category {
      display: none;
    }


#filter-options-wrapper .facet-component .facet-heading .facet-title {
        text-transform: unset;
        margin-bottom: 12px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;
        padding: 0 20px 0 0;
        cursor: pointer;
      }


[dir="rtl"] #filter-options-wrapper .facet-component .facet-heading .facet-title {
          padding: 0 0 0 20px;
        }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-heading .facet-title {
          margin: 0 15px 12px
      }
        }


#filter-options-wrapper .facet-component .facet-heading .facet-title::after {
          content: "";
          background: url(`../../../Images/chevron-up.svg`) no-repeat;
          position: absolute;
          right: 0;
          width: 12px;
          height: 8px;
          -ms-flex-item-align: center;
              align-self: center;
        }


[dir="rtl"] #filter-options-wrapper .facet-component .facet-heading .facet-title::after {
            left: 0;
            right: unset;
          }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-heading .facet-title::after {
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
        }
          }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-heading .facet-title.disable-dropdown {
            cursor: default
        }
            #filter-options-wrapper .facet-component .facet-heading .facet-title.disable-dropdown::after {
              display: none;
            }
          }


#filter-options-wrapper .facet-component .facet-heading .clear-filter {
        display: none;
      }


#filter-options-wrapper .facet-component .bottom-remove-filter button {
      margin-bottom: 12px;
      cursor: pointer;
      text-transform: unset;
      display: none;
    }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .bottom-remove-filter button {
        margin: 0 15px 12px
    }
      }


#filter-options-wrapper .facet-component .bottom-remove-filter button::before {
        content: url(`../../../Images/close.svg`);
        -webkit-transform: scale(0.65) translateY(2px);
                transform: scale(0.65) translateY(2px);
        display: inline-block;
      }


#filter-options-wrapper .facet-component.show-clear-btn {
      
      /* 
        You can uncomment this if you need each filter category clear buttons
        */
      /*
      & .bottom-remove-filter button{      
        display: flex;
        width: fit-content;
        align-items: center;
        font-size: var(--fs-xs);
        padding: 0px 8px 0px 2px;
        background-color: var(--color-light-gray);  
        color: var(--color-black);

        [dir="rtl"] & {
          padding: 0px 2px 0px 8px;
        }

        @media (--mq-min-l) {
          font-size: var(--fs-m);

          &::before{
            transform: scale(0.65) translateY(4px);
          }
        }
      } */
    }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        overflow: auto
    }
      }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value {
        margin: 0;
        padding: 3px 0;
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
      }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter .facet-value {
          line-height: 18px;
          font-size: var(--fs-xs);
          margin: 0 5px
      }
            #filter-options-wrapper .facet-component .facet-search-filter .facet-value.active-facet label, #filter-options-wrapper .facet-component .facet-search-filter .facet-value.active-sort label {
              background-color: var(--color-black);
              color: var(--color-white);
            }
            #filter-options-wrapper .facet-component .facet-search-filter .facet-value:first-child label {
              margin: 0 0 0 10px;
            }

              [dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value:first-child label {
                margin: 0 10px 0 0;
              }
            #filter-options-wrapper .facet-component .facet-search-filter .facet-value:last-child label {
              margin: 0 15px 0 0;
            }

              [dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value:last-child label {
                margin: 0 0 0 15px;
              }
            #filter-options-wrapper .facet-component .facet-search-filter .facet-value:only-child label {
              margin: 0 15px 0 10px;
            }

              [dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value:only-child label {
                margin: 0 10px 0 15px;
              }
        }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"] {
          min-width: 16px;
          width: 16px;
          height: 16px;
          -webkit-appearance: none;
             -moz-appearance: none;
                  appearance: none;
          outline: 1px solid var(--primary-color);
          position: relative;
          margin: 0 0 0 2px;
        }


[dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"] {
            margin: 0 2px 0 0;
          }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"]:checked {
            background-color: var(--primary-color);
          }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"]:checked::before {
              content: "";
              background: url(`../../../Images/check-white.svg`) no-repeat;
              width: inherit;
              height: inherit;
              position: absolute;
              background-size: 14px;
              background-position: center;
            }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"] {
            width: 0!important;
            height: 0!important;
            min-width: 0!important;
            margin: 0;
            padding: 0;
            outline: 0;
            border: 0;
            opacity: 0
        }
          }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label {
          padding: 0 0 0 8px;
          display: -webkit-inline-box;
          display: -ms-inline-flexbox;
          display: inline-flex;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          width: 100%;
        }


[dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value label {
            padding: 0 8px 0 0;
          }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label {
            border: 1.5px solid var(--color-black);
            padding: 5px 10px;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content
        }

            [dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value label {
              padding: 5px 10px;
            }
          }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count {
            position: relative;
            display: -webkit-inline-box;
            display: -ms-inline-flexbox;
            display: inline-flex;
            -webkit-transform: translateX(6px);
                    transform: translateX(6px);
            -ms-flex-item-align: center;
                align-self: center;
          }


[dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count {
              -webkit-transform: translateX(-6px);
                      transform: translateX(-6px);
            }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count {
              display: none
          }
            }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count::before,
            #filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count::after {
              content: "";
              position: absolute;
              width: 6px;
              height: 100%;
              background-color: var(--color-white); 
            }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count::before {
              left: 0;
            }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count::after {
              right: 0;
            }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"],
        #filter-options-wrapper .facet-component .facet-search-filter .facet-value label { 
          cursor: pointer;
        }


#filter-options-wrapper .facet-component .bottom-filter-button {
      margin: 15px;
      display: none;
    }


@media (min-width: 62rem) {


#filter-options-wrapper .facet-component .bottom-filter-button {
        margin: 15px 0
    }
      }


#filter-options-wrapper .facet-component .bottom-filter-button .filterButton {
        padding: 10px 16px;
        width: 100%;
        background-color: var(--color-light-gray);
        color: var(--color-black);
        white-space: normal;
      }


#filter-options-wrapper .facet-component .contentContainer {
      opacity: 1;
      height: auto;
      -webkit-transition: height 0.25s var(--ease), opacity 0.4s var(--ease);
      transition: height 0.25s var(--ease), opacity 0.4s var(--ease);
      overflow: hidden;
    }


#filter-options-wrapper .facet-component.toggle-facet .facet-title::after {
          -webkit-transform: rotate(180deg);
                  transform: rotate(180deg);
        }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component.toggle-facet .facet-title::after {
            -webkit-transform: rotate(0deg);
                    transform: rotate(0deg)
        }
          }


@media (min-width: 62rem) {


#filter-options-wrapper .facet-component.toggle-facet .contentContainer {
          opacity: 0;
          height: 0          
      }
        }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component.toggle-facet .facet-search-filter {
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          padding: 0 10px
      }

          #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value {
            padding: 5px 0;
          }
              #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value:first-child label, #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value:last-child label, #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value:only-child label {
                margin: 0;
              }
                [dir="rtl"] #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value:first-child label, [dir="rtl"] #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value:last-child label, [dir="rtl"] #filter-options-wrapper .facet-component.toggle-facet .facet-search-filter .facet-value:only-child label {
                  margin: 0;
                }
        }


#filter-options-wrapper .facet-component.toggle-facet .bottom-filter-button,
      #filter-options-wrapper .facet-component.toggle-facet .bottom-remove-filter {
        display: none;
      }


@media (min-width: 62rem) {


#filter-options-wrapper .facet-component.facet-sort {
        display: none
    }
      }


#filter-options-wrapper .filter-options-header-mobile {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    padding: 20px 15px 15px;
  }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .filter-options-header-mobile {
      border-bottom: 1px solid var(--color-light-gray)
  }
    }


@media (min-width: 62rem) {


#filter-options-wrapper .filter-options-header-mobile {
      display: none
  }
    }


#filter-options-wrapper .filter-options-header-mobile .close-filter-button {
      cursor: pointer;
      height: 24px;
    }


@media (min-width: 62rem) {


#filter-options-wrapper .filter-options-header-mobile .close-filter-button {
        display: none
    }
      }


#filter-options-wrapper .filter-options-header-mobile .close-filter-button::before {
        content: url(`../../../Images/close.svg`);
        width: 24px;
        height: 24px;
        display: inline-block;
      }


#filter-options-wrapper .filter-options-header-mobile .reset-filter-button {
      cursor: pointer;
      color: var(--link-color);
    }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .filter-options-header-mobile .reset-filter-button {
        font-size: var(--fs-xs)
    }  
      }


#filter-options-wrapper .filter-options-footer-mobile {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: var(--s-l) var(--s) var(--s-xl);
    border-top: 1px solid var(--color-light-gray);
    z-index: 1;
    background-color: var(--color-white);
  }


@media (min-width: 62rem) {


#filter-options-wrapper .filter-options-footer-mobile {
      display: none
  }
    }


#filter-options-wrapper .filter-options-footer-mobile .show-results-button {
      padding: var(--s);
      width: 100%;
      background-color: var(--color-light-gray);
      color: var(--color-black);
      white-space: normal;
    }


#filter-options-wrapper .filter-options-footer-mobile .show-results-button.filter-applied {
        background-color: var(--btn-bg-color);
        color: var(--btn-text-color);
      }

.on-page-editor #filter-button-container {
    line-height: unset;
  }

.on-page-editor #filter-button-container > .component-content {
        display: block;
    }

.on-page-editor #filter-options-wrapper {
    position: relative;
    margin: 0;
    padding: 0;
    display: inline-block;
  }

.on-page-editor #filter-results-wrapper {
    width: 74%;
    display: inline-block;
  }

/* 
/-----------------------------
/ For loading cards animation
/-----------------------------
*/

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes {
      position: relative;
    }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes ul li .recipe-card-v2 .recipe-card-image-wrapper img {
            display: none;  
          }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes ul li .recipe-card-v2 .recipe-card-content-wrapper {
            margin: 20px;
            padding: 0;
            border-radius: 5px;
          }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes ul li .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title {
              color: var(--transparent);
              -webkit-line-clamp: 1;
            }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes ul li .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-specs {
              display: none;
            }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes ul li .recipe-card-v2 .recipe-card-image-wrapper,
          #recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes ul li .recipe-card-v2 .recipe-card-content-wrapper {
            background: linear-gradient( 110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
            background-size: 200% 100%;
            -webkit-animation: 1.5s shine linear infinite;
                    animation: 1.5s shine linear infinite;
          }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.all-recipes .search-result-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list {
      position: relative;
    }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list ul li .product-card .product-card-img img {
          visibility: hidden;
        }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list ul li .product-card .product-card-text {
          margin: var(--m-s) 0;
        }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list ul li .product-card .product-card-text .product-card-title {
            margin: 0;
            padding: var(--s-xs);
            color: var(--transparent);
            display: -webkit-box;
            text-overflow: ellipsis;
            word-break: break-word;
            overflow: hidden;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 1;
          }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list ul li .product-card .product-card-text .product-card-subtitle {
            display: none;
          }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list ul li .product-card .product-card-img,
        #recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list ul li .product-card .product-card-text {
          background: linear-gradient( 110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
          background-size: 200% 100%;
          -webkit-animation: 1.5s shine linear infinite;
                  animation: 1.5s shine linear infinite;
        }

#recipe-filter-options-results-container #filter-results-wrapper .search-results.loading-in-progress.product-list .search-result-overlay {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
      }

@-webkit-keyframes shine {
  to {
    background-position-x: -200%;
  }
}

@keyframes shine {
  to {
    background-position-x: -200%;
  }
}
.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)
  }
    }

  @media (min-width: 62rem) {

  .carouselbanner .full-width li {
        padding: 0
    }
      }

  @media (min-width: 62rem) {

  .carouselbanner .full-width .carousel-image {
        border-radius: 0
    }
      }

  .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;
      }

  .carouselbanner .carousel-controls {    
    display: -webkit-box;    
    display: -ms-flexbox;    
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    padding: var(--s-s);
    background-color: rgba(0,0,0,0.08);
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: auto;
    border-radius: 4px;    
  }

  .carouselbanner .carousel-controls input.play-pause {
      width: 0;
      height: 12px;
      -webkit-appearance: none;
         -moz-appearance: none;
              appearance: none;
      cursor: pointer;
      border-color: var(--transparent) var(--transparent) var(--transparent) var(--color-black);
      -webkit-transition: border var(--transition-timing-fast);
      transition: border var(--transition-timing-fast);
      border-style: double;
      border-width: 0px 0px 0px 12px;
    }

  .carouselbanner .carousel-controls input.play-pause:checked {
        border-style: solid;
        border-width: 6px 0 6px 12px;
      }

  .carouselbanner .auto-rotation-control {
    padding: 2px var(--s-s) 0 var(--s-m);
  }

  .carouselbanner .glide__arrows {
    padding: 0 var(--s-m);
  }

  .carouselbanner .glide__arrow {
    cursor: pointer;
  }

  .carouselbanner .glide__arrow::after {
      content: "";
      width: 24px;
      height: 24px;
      display: block;
      background: url(`../../../Images/chevron-up.svg`) no-repeat;
      background-position: center;
    }

  .carouselbanner .glide__arrow.glide__arrow--left::after {
      -webkit-transform: rotate(270deg) scale(1.3);
              transform: rotate(270deg) scale(1.3);
    }

  .carouselbanner .glide__arrow.glide__arrow--right::after {
      -webkit-transform: rotate(90deg) scale(1.3);
              transform: rotate(90deg) scale(1.3);
    }

  .carouselbanner .glide__bullet {
    display: inline-block;
    width: calc(var(--s-s) + 4px);
    height: calc(var(--s-s) + 4px);
    margin: 0 var(--s-xs);
    background: var(--transparent);
    border-radius: 50%;
    cursor: pointer;
    border: 2px solid var(--color-black);
  }

  .carouselbanner .glide__bullet--active,
    .carouselbanner .glide__bullet:hover,
    .carouselbanner .glide__bullet:focus {
      background: var(--color-black);
      border: 0;
    }

  .carouselbanner > .none .glide__arrows, .carouselbanner > .none .glide__bullets {
      display: none;
    }

  .carouselbanner > .none .auto-rotation-control {
      padding: 2px var(--s-m) 0;
    }

  .carouselbanner > .bullets .glide__arrows {
      display: none;
    }

  .carouselbanner > .bullets .glide__bullets {
      padding: 0 var(--s-s);
    }

  .carouselbanner > .previous-next .glide__bullets {
      display: none;
    }

  .carouselbanner > .previous-next .auto-rotation-control {
      padding: 2px var(--s-s) 0;
      -webkit-box-ordinal-group: 3;
          -ms-flex-order: 2;
              order: 2;
    }

  .carouselbanner > .previous-next .glide__arrows {
      padding: 0 var(--s-s);
    }

  .carouselbanner > .previous-next .left-arrow {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1;
    }

  .carouselbanner > .previous-next .right-arrow {
      -webkit-box-ordinal-group: 4;
          -ms-flex-order: 3;
              order: 3;
    }

  .carouselbanner > .previous-next .glide__arrow.glide__arrow--left::after {
      -webkit-transform: rotate(270deg) scale(1.3) translateX(-1px);
              transform: rotate(270deg) scale(1.3) translateX(-1px);
    }

  .carouselbanner > .transition-none .glide__slides {
      -webkit-transition: none!important;
      transition: none!important;
    }

  .carouselbanner > .fade-in .glide__slides {
      -webkit-transform: none!important;
              transform: none!important;
      width: auto!important;
      display: grid;
      grid-template-areas: 'slide';
    }

  .carouselbanner > .fade-in .glide__slide {
      grid-area: slide;
      position: relative;
      opacity: 0;
      -webkit-transition: opacity 0.5s ease;
      transition: opacity 0.5s ease;
    }

  .carouselbanner > .fade-in .glide__slide--active {
      z-index: 1;
      opacity: 1;
    }



.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);
  }


.exit-popup{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 100000;
    background: var(--overlay-bg-light);
    top: 0;
    left: 0;
    padding: 20px;
    display: none;    
}
    .exit-popup > .slide-down-popup, .exit-popup .slide-up-popup{
        -webkit-animation-timing-function: linear;
                animation-timing-function: linear;
        -webkit-animation-duration: 0.2s;
                animation-duration: 0.2s;
        -webkit-animation-fill-mode: both;
                animation-fill-mode: both;
        -webkit-transition: -webkit-transform 0.3s ease-out 0s;
        transition: -webkit-transform 0.3s ease-out 0s;
        transition: transform 0.3s ease-out 0s;
        transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s;
    }
    .exit-popup > .slide-down-popup{
        -webkit-animation-name: slide-down;
                animation-name: slide-down;
    }
    .exit-popup > .slide-up-popup{
        -webkit-animation-name: slide-up;
                animation-name: slide-up;
    }
    .exit-popup .exit-popup-container{
        overflow: auto;
        -webkit-box-shadow: 0px 4px 15px var(--overlay-bg-light);
                box-shadow: 0px 4px 15px var(--overlay-bg-light);
        border-radius: var(--border-radius-s);
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-width: 450px;
        max-height: calc(100vh - 20px);
        padding: 20px;
        left: 50%;
        top: 50%;
        position: relative;
        -webkit-transform: translate(-50%, -50%);
                transform: translate(-50%, -50%);
        background: var(--color-white);   
        scrollbar-width: thin;
    }
    [dir="rtl"] .exit-popup .exit-popup-container {
            left: unset;
            right: 50%;
            -webkit-transform: translate(50%,-50%);
                    transform: translate(50%,-50%);
        }
    .exit-popup .exit-popup-container::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }
    .exit-popup .exit-popup-container::-webkit-scrollbar-track {
            -webkit-box-shadow: inset 0 0 6px var(--overlay-bg-lightest);
                    box-shadow: inset 0 0 6px var(--overlay-bg-lightest);
            border-radius: var(--border-radius-m);
            background-color: var(--color-lightest-gray);
        }
    .exit-popup .exit-popup-container::-webkit-scrollbar-thumb {
            border-radius: var(--border-radius-m);
            background-color: var(--color-light-gray);	
        }
    .exit-popup .exit-popup-container::-webkit-scrollbar-thumb:hover{
                background-color: var(--color-medium-light-gray);
            }
    .exit-popup .exit-popup-container .popup-header h3{
                margin: var(--s-m) var(--s-xxl) var(--s-m) var(--s-s);
                text-transform: capitalize!important;
            }
    [dir="rtl"] .exit-popup .exit-popup-container .popup-header h3 {
                    margin: var(--s-m) var(--s-s) var(--s-m) var(--s-xxl);
                }
    .exit-popup .exit-popup-container .popup-header button{
                position: absolute;
                right: 0;
                top: 0;
                padding: var(--s-s) var(--s-m);
                border-radius: var(--border-radius-s);
                border: none;
                -webkit-box-shadow: none;
                        box-shadow: none;
                background-image: none;
                background-color: transparent;
                color: var(--color-black);
                -webkit-transform: none;
                        transform: none;
                font-weight: bold;
            }
    [dir="rtl"] .exit-popup .exit-popup-container .popup-header button {
                    left: 0;
                    right: unset;
                }
    .exit-popup .exit-popup-container .popup-body .popup-content p{
                    margin: 0 0 var(--s-l) var(--s-s);                   
                }
    [dir="rtl"] .exit-popup .exit-popup-container .popup-body .popup-content p {
                       margin:  0  var(--s-s) var(--s-l) 0;
                    }
    .exit-popup .exit-popup-container .popup-body .popup-image{
                margin: var(--s-s) var(--s-l) var(--s-l);
            }
    .exit-popup .exit-popup-container .popup-body .popup-image img{
                    padding: 5px;                                    
                    max-height: 250px;
                    margin: 0 auto;
                    display: block;
                }
    .exit-popup .exit-popup-container .popup-cta-btn-wrapper{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
        }
    .exit-popup .exit-popup-container .popup-cta-btn-wrapper a{
                -webkit-animation-name: cta-dancing;
                        animation-name: cta-dancing;
                -webkit-animation-duration: 6s;
                        animation-duration: 6s;
                -webkit-animation-delay: 4s;
                        animation-delay: 4s;
                -webkit-animation-fill-mode: both;
                        animation-fill-mode: both;
                -webkit-animation-iteration-count: infinite;
                        animation-iteration-count: infinite;
                -webkit-transform: scale(1);
                        transform: scale(1);
                -webkit-transition: -webkit-transform 0.3s ease-out 0s;
                transition: -webkit-transform 0.3s ease-out 0s;
                transition: transform 0.3s ease-out 0s;
                transition: transform 0.3s ease-out 0s, -webkit-transform 0.3s ease-out 0s;
                overflow: visible;
                text-transform: capitalize;
                border-radius: 44px;
                padding: var(--s-s) var(--s-l);
                -webkit-box-shadow: 0px 4px 15px var(--overlay-bg-light);
                        box-shadow: 0px 4px 15px var(--overlay-bg-light);
            }


@-webkit-keyframes cta-dancing{        
    0%{
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
    1.7%, 3.4%{
        -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    }
    5.1%, 8.5%, 11.9%, 15.3%{
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    }
    6.8%, 10.2%, 13.6%{
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    }
    17%, 100%{
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}


@keyframes cta-dancing{        
    0%{
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
    1.7%, 3.4%{
        -webkit-transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
        transform: scale3d(.9,.9,.9) rotate3d(0,0,1,-3deg);
    }
    5.1%, 8.5%, 11.9%, 15.3%{
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,3deg);
    }
    6.8%, 10.2%, 13.6%{
        -webkit-transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
        transform: scale3d(1.1,1.1,1.1) rotate3d(0,0,1,-3deg);
    }
    17%, 100%{
        -webkit-transform: scale3d(1,1,1);
        transform: scale3d(1,1,1);
    }
}

@-webkit-keyframes slide-down{
    0% { top: -50%; }
    50% { top: 0%; }
    100% { top: 50%; }
}

@keyframes slide-down{
    0% { top: -50%; }
    50% { top: 0%; }
    100% { top: 50%; }
}

@-webkit-keyframes slide-up{
    0% { top: 50%; }
    50% { top: 0%; }
    100% { top: -50%; }
}

@keyframes slide-up{
    0% { top: 50%; }
    50% { top: 0%; }
    100% { top: -50%; }
}
.customized-popup.overlay-wrapper{
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    background: var(--overlay-bg-light);
    top: 0;
    left: 0;
    padding: 20px;
}

    .customized-popup.overlay-wrapper > .overlay{
        position: relative;
        margin: unset;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        max-height: calc(100vh - 40px);
    }

    @media(max-width: 47.9375rem){

    .customized-popup.overlay-wrapper > .overlay{
            max-width: calc(100vw - 40px)
    } 
        }

    @media(min-width: 48rem){

    .customized-popup.overlay-wrapper > .overlay{
            max-width: calc(100vw - 150px)
    } 
        }

    @media(min-width: 62rem){

    .customized-popup.overlay-wrapper > .overlay{
            max-width: calc(100vw - 300px)
    } 
        }

    @media(min-width: 75rem){

    .customized-popup.overlay-wrapper > .overlay{
            max-width: calc(100vw - 500px)
    }
        }

    [dir="rtl"] .customized-popup.overlay-wrapper > .overlay {
            left: unset;
            right: 50%;
            -webkit-transform: translate(50%,-50%);
                    transform: translate(50%,-50%);
        }

    @media (min-width: 36rem) {

    .customized-popup.overlay-wrapper > .overlay{
            scrollbar-width: thin /* Firefox */
    }
            .customized-popup.overlay-wrapper > .overlay::-webkit-scrollbar {
                width: 6px;
            }    
            .customized-popup.overlay-wrapper > .overlay::-webkit-scrollbar-thumb {
                border-radius: var(--border-radius-xs);
                background-color: var(--color-light-gray);	
            }
                .customized-popup.overlay-wrapper > .overlay::-webkit-scrollbar-thumb:hover {
                    background-color: var(--color-medium-light-gray);
                }
        }

    .customized-popup.overlay-wrapper > .overlay.overlay-hide{
            display: none!important;
        }

    .customized-popup.overlay-wrapper > .overlay.overlay-show{
            display: block!important;
            opacity: 1!important;
        }

    .customized-popup.overlay-wrapper > .overlay > .component-content{
            max-height: unset!important;
        }

    .customized-popup.overlay-wrapper > .overlay .overlay-inner{
            padding: var(--s-l) var(--s-l);            
        }

    @media(min-width: 48rem){

    .customized-popup.overlay-wrapper > .overlay .overlay-inner{
                padding: var(--s-xl) var(--s-xl);
                max-width: 490px            
        }
            }

    .customized-popup.overlay-wrapper > .overlay .overlay-close{
            cursor: pointer;
        }

    .customized-popup.overlay-wrapper.close-with-opacity{
        -webkit-animation-name: closeWithOpacity;
                animation-name: closeWithOpacity;
        -webkit-animation-duration: 350ms;
                animation-duration: 350ms;
        -webkit-animation-iteration-count: 1;
                animation-iteration-count: 1;
    }

    /* For signup form styling */

    .customized-popup.overlay-wrapper p{
        margin: 0 0 var(--s-m) 0;
    }

    .customized-popup.overlay-wrapper .form-row{
        margin-bottom: var(--s-s);
    }

    .customized-popup.overlay-wrapper #SubmitForm{
        margin-top: var(--s-xl);
    }

    .customized-popup.overlay-wrapper .component.rich-text{
        line-height: var(--lh-s);
    }

.hide-window-scrollbar{
    overflow: hidden;
}

@-webkit-keyframes closeWithOpacity{
    0% { opacity: 1; }
    100% { opacity: 0; }
}

@keyframes closeWithOpacity{
    0% { opacity: 1; }
    100% { opacity: 0; }
}
@media (max-width: 61.9375rem) {.sort-results {
        display: none
}
    }
    .sort-results > .component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;           
        position: relative;
    }
    .sort-results .facet-title {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
    }
    .sort-results .facet-title::before {
            content: url(`../../../Images/sort.svg`);
            width: 24px;
            height: 24px;
            -webkit-transform: translateY(-4px) scale(1.1);
                    transform: translateY(-4px) scale(1.1);
        }
    .sort-results select {
        -webkit-appearance: none;
           -moz-appearance: none;
                appearance: none;
        background: var(--transparent);
        padding: var(--s-xs);
        border: 0;
        width: auto;
        cursor: pointer;
    }
    .sort-results select option {
            color: var(--color-black);
        }
    .sort-results .facet-title label,
    .sort-results select {
        font-size: var(--fs-l);
        line-height: 25px;
        font-family: var(--ff-headings);
    }

#filter-header-details {
    margin: var(--s) auto 0;
    max-width: 1440px;
    padding: 0 15px;
}

@media (min-width: 36rem) {

#filter-header-details {
        padding: 0 30px
}
    }

@media (min-width: 62rem) {

#filter-header-details {
        margin: var(--s-xl) auto 0
}
    }

#filter-header-details > .component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

@media (min-width: 62rem) {

#filter-header-details > .component-content {            
            display: block
    }
        }

@media (max-width: 61.9375rem) {

#filter-header-details.align-inline > .component-content {
            display: block
    }
        }

#filter-header-details .search-results-count {
        padding: 0 var(--s-m) 0 0;
        opacity: 0;
    }

[dir='rtl'] #filter-header-details .search-results-count {
            padding: 0 0 0 var(--s-m);
        }

#filter-header-details #only-count {
        display: none;
    }

@media (max-width: 61.9375rem) {

#filter-button-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -ms-flex-item-align: end;
            align-self: flex-end;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: 0 0 0 auto
}

        [dir='rtl'] #filter-button-container {
            margin: 0 auto 0 0;
        }

        #filter-button-container .active-filters-mobile {
            font-size: 12px;
            line-height: 18px;
            padding: 0 var(--s-s) 0 0;
            margin: 0 auto 0 0;
            cursor: pointer;
        }

            [dir='rtl'] #filter-button-container .active-filters-mobile {
                padding: 0 0 0 var(--s-s);
                margin: 0 0 0 auto;
            }

            #filter-button-container .active-filters-mobile .active-filters-title {
                font-family: var(--ff-headings);
            }

            #filter-button-container .active-filters-mobile .active-filters-content {
                -webkit-line-clamp: 1;
                text-overflow: ellipsis;
                word-break: break-word;
                overflow: hidden;
                display: -webkit-box;
                -webkit-box-orient: vertical;
            }

        #filter-button-container.show-active-filters {
            width: auto;
            padding-top: var(--s);
        }            
            #filter-button-container.show-active-filters .active-filters-mobile {
                display: block;
            }
    }

@media (min-width: 62rem) {

#filter-button-container {
        line-height: 30px;
        width: auto;
        margin: var(--m-m) 0 0
}
    }

#filter-button-container > .component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-item-align: end;
            align-self: flex-end;    
    }

@media (min-width: 62rem) {

#filter-button-container > .component-content {
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            -ms-flex-item-align: unset;
                align-self: unset    
    }
        }

#filter-button-container .active-filters-mobile {
        display: none;
    }

#filter-button-container .toggle-filter-button,
    #filter-button-container .toggle-filter-button-fixed-mobile {
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0;
        font-family: var(--ff-headings);
    }

@media (max-width: 61.9375rem) {

#filter-button-container .toggle-filter-button,
    #filter-button-container .toggle-filter-button-fixed-mobile {
            padding: 0 0 0 var(--s-s)
    }

            [dir='rtl'] #filter-button-container .toggle-filter-button, [dir='rtl'] #filter-button-container .toggle-filter-button-fixed-mobile {
                padding: 0 var(--s-s) 0 0;
            }
        }

#filter-button-container .toggle-filter-button::before, #filter-button-container .toggle-filter-button-fixed-mobile::before {
            content: url(`../../../Images/filter.svg`);
            display: inline-block;
            width: 24px;
            height: 24px;
            margin: 0 2px 0 -4px;            
        }

[dir='rtl'] #filter-button-container .toggle-filter-button::before, [dir='rtl'] #filter-button-container .toggle-filter-button-fixed-mobile::before {
                margin: 0 -4px 0 2px;
            }

@media (max-width: 61.9375rem) {

#filter-button-container .toggle-filter-button::before, #filter-button-container .toggle-filter-button-fixed-mobile::before {
                margin: 0 var(--s-xs) 0 calc(var(--s-xs) * -1)            
        }
    
                [dir='rtl'] #filter-button-container .toggle-filter-button::before, [dir='rtl'] #filter-button-container .toggle-filter-button-fixed-mobile::before {
                    margin: 0  calc(var(--s-xs) * -1) 0 var(--s-xs);
                }
            }

#filter-button-container .toggle-filter-button:hover, #filter-button-container .toggle-filter-button-fixed-mobile:hover {
            opacity: 0.7;
        }

#filter-button-container .toggle-filter-button.hide, #filter-button-container .toggle-filter-button-fixed-mobile.hide {
            visibility: hidden;
        }

#filter-button-container .toggle-filter-button,
    #filter-button-container .toggle-filter-button-fixed-mobile,
    #filter-button-container .reset-filter-button {
        font-size: var(--fs-l);
        line-height: 25px;
    }

@media (max-width: 61.9375rem) {

#filter-button-container .toggle-filter-button-fixed-mobile {
            position: fixed;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            bottom: -100px;
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            padding: 0;
            opacity: 0;
            z-index: -1;
            visibility: hidden;
            -webkit-transition: bottom .4s var(--ease-in-out), opacity .4s var(--ease-in-out);
            transition: bottom .4s var(--ease-in-out), opacity .4s var(--ease-in-out)
    }
            [dir="rtl"] #filter-button-container .toggle-filter-button-fixed-mobile {
                padding: 0;
            }

            #filter-button-container .toggle-filter-button-fixed-mobile::before {
                -webkit-filter: invert(1);
                        filter: invert(1);
                position: absolute;
                z-index: 1;
                margin: 0 0 0 var(--s-s);
            }
                [dir="rtl"] #filter-button-container .toggle-filter-button-fixed-mobile::before {
                    margin: 0 var(--s-s) 0 0;
                }
            #filter-button-container .toggle-filter-button-fixed-mobile.toggle {
                opacity: 1;
                z-index: 101;
                visibility: visible;
                bottom: 32px;
            }
            #filter-button-container .toggle-filter-button-fixed-mobile.move-out {
                bottom: -100px;
            }
            #filter-button-container .toggle-filter-button-fixed-mobile .btn {
                padding-left: var(--s-xl);
                -webkit-box-shadow: var(--box-shadow-narrow-medium);
                        box-shadow: var(--box-shadow-narrow-medium);
            }
                [dir="rtl"] #filter-button-container .toggle-filter-button-fixed-mobile .btn {
                    padding-right: var(--s-xl);
                    padding-left: var(--s-m); /* making invalid css property to restore button padding */
                }
        }

@media (min-width: 62rem) {

#filter-button-container .toggle-filter-button-fixed-mobile {
            display: none
    }
        }

#filter-button-container .toggle-filter-button-fixed-mobile.hide {
            visibility: hidden;
        }

@media (min-width: 62rem) {

#filter-button-container.show-reset-btn .plain-html > .component-content {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center
        }
            }

#filter-button-container.show-reset-btn .plain-html > .component-content .reset-filter-button {
                padding: 0 var(--s-l);
                cursor: pointer;
                color: var(--link-color);
                display: block;
            }

#filter-button-container.show-reset-btn .plain-html > .component-content .reset-filter-button:hover {
                    text-decoration: underline;
                }

@media (max-width: 61.9375rem) {

#filter-button-container.show-reset-btn .plain-html > .component-content .reset-filter-button {                        
                    display: none
            }
                }

#filter-button-container .reset-filter-button {
        display: none;
    }
#nav-search #siteSearchIcon {
        cursor: pointer;
    }
        [dir='rtl'] #nav-search #siteSearchIcon > img {
                -webkit-transform: scaleX(-1);
                        transform: scaleX(-1);
            }

    #nav-search .component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

    #nav-search .component.plain-html {
        height: 20px;
        width: 20px;
    }

    @media (max-width: 74.9375rem) {
        #nav-search .component.plain-html {
            position: absolute;
            top: calc(var(--header-height-mobile) / 2);
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
            right: calc(var(--s-xxxl) + var(--s-m));
        }
            [dir='rtl'] #nav-search .component.plain-html {
                left: calc(var(--s-xxxl) + var(--s-m));
                right: unset;
            }
    }

    @media (min-width: 48rem) and (max-width: 74.9375rem) {
        #nav-search .component.plain-html {
            top: calc(var(--header-height-tablet) / 2);
        }
    }

    @media (min-width: 75rem) {
        #nav-search .component.plain-html {
            margin-right: 40px;
        }
            [dir='rtl'] #nav-search .component.plain-html {
                margin-left: 40px;
                margin-right: 0;
            }
    }

#site-search-wrapper ::-webkit-input-placeholder {
        color: var(--color-dark-gray);
    }

#site-search-wrapper ::-moz-placeholder {
        color: var(--color-dark-gray);
    }

#site-search-wrapper :-ms-input-placeholder {
        color: var(--color-dark-gray);
    }

#site-search-wrapper ::-ms-input-placeholder {
        color: var(--color-dark-gray);
    }

#site-search-wrapper ::placeholder {
        color: var(--color-dark-gray);
    }

@media (max-width: 61.9375rem) {

#site-search-wrapper .tt-menu.tt-open {
            height: 100vh;
            width: 100vw
    }

            [dir='rtl'] #site-search-wrapper .tt-menu.tt-open {
                right: 0;
            }
        }

#site-search-wrapper #clear-search-box {
        z-index: 202;
        background: url(/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/Images/close.png) center no-repeat;
        display: none;
        width: 24px;
        height: 24px;
        margin-left: auto;
        position: relative;
        margin-right: 42px;
        cursor: pointer;
        -webkit-transform: translateY(-60px);
                transform: translateY(-60px);
        background-size: 16.5px;
    }

[dir='rtl'] #site-search-wrapper #clear-search-box {
            margin-right: auto;
            margin-left: 42px;
        }

@media (min-width: 48rem) {

#site-search-wrapper #clear-search-box {
            margin-right: 32px
    }

            [dir='rtl'] #site-search-wrapper #clear-search-box {
                margin-left: 32px;
            }
        }

@media (min-width: 62rem) {

#site-search-wrapper #clear-search-box {
            margin-right: 42px
    }
            
            [dir='rtl'] #site-search-wrapper #clear-search-box {
                margin-left: 42px;
            }
        }

@media (min-width: 75rem) {

#site-search-wrapper #clear-search-box {
            max-width: 650px
    }
        }

#site-search-wrapper .search-box.search-box-with-icon {
        padding-top: var(--s-xl);
    }

@media (min-width: 62rem) {

#site-search-wrapper .search-box.search-box-with-icon {
            padding-top: var(--s-xxxl)
    }
        }

#site-search-wrapper .search-box.search-box-with-icon >.component-content {
            -webkit-box-shadow: none;
                    box-shadow: none;
            max-width: 675px;
        }

@media (min-width: 62rem) {

#site-search-wrapper .search-box.search-box-with-icon >.component-content {
                width: 640px
        }
            }

#site-search-wrapper .search-box.search-box-with-icon >.component-content >button.search-box-button-with-redirect {
                padding-right: 0;
            }

#site-search-wrapper .search-box.search-box-with-icon >.component-content input[type='text'].search-box-input {
                border: none;
                padding-left: 0;
                border-bottom: 1px solid black;
                padding: 1.125rem 5.75rem 1.125rem 0;
                line-height: 24px;
            }

[dir='rtl'] #site-search-wrapper .search-box.search-box-with-icon >.component-content input[type='text'].search-box-input {
                    padding: 1.125rem 0 1.125rem 5.75rem;
                }

#site-search-wrapper .search-box.search-box-with-icon + .plain-html {
            max-width: 650px;
            margin: auto;
            height: 0;
        }

#site-search-wrapper .search-box .tt-menu {
        border: none;
        padding: 16px 0;
    }

@media (min-width: 75rem) {

#site-search-wrapper .search-box .tt-menu {
            -webkit-box-shadow: 0px 6px 20px rgba(102, 102, 102, 0.30);
                    box-shadow: 0px 6px 20px rgba(102, 102, 102, 0.30)
    }
        }

#site-search-wrapper .search-box .tt-menu .tt-suggestion {
            border: none;
            padding: 16px 16px 16px 0;
            cursor: pointer;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }

@media(min-width: 48rem) {

#site-search-wrapper .search-box .tt-menu .tt-suggestion span.recipesearch-icon,  
            #site-search-wrapper .search-box .tt-menu .tt-suggestion span.productsearch-icon,  
            #site-search-wrapper .search-box .tt-menu .tt-suggestion span.recipeoverviewsearch-icon {
                    margin-left: 10px
            }
                }

#site-search-wrapper .search-box .tt-menu .tt-suggestion .suggestionText {
                line-height: 24px;
                margin-left: 34px;
            }

[dir="rtl"] #site-search-wrapper .search-box .tt-menu .tt-suggestion .suggestionText {
                    margin-right: 34px;
                }

#site-search-wrapper .search-box .tt-menu .tt-suggestion:hover {
                text-decoration: underline;
            }

#site-search-wrapper .search-box .tt-menu .tt-suggestion .productsearch-icon::before {
                    content: "";
                    background-image: url(`../../../Images/arrow-right.svg`);
                    width: 24px;
                    height: 24px;
                    position: absolute;

                }

#site-search-wrapper .search-box .tt-menu .tt-suggestion .recipeoverviewsearch-icon::before {
                    content: "";
                    background-image: url(`../../../Images/category-icon.svg`);
                    width: 24px;
                    height: 24px;
                    position: absolute;

                }

#site-search-wrapper .search-box .tt-menu .tt-suggestion .recipesearch-icon::before {
                    content: "";
                    background-image: url(`../../../Images/recipe-icon.svg`);
                    width: 24px;
                    height: 24px;
                    position: absolute;
                }

#search-container {
    display: none;

    margin-bottom: 80px;
}

@media (min-width: 62rem) {

#search-container {
        margin-bottom: 124px
}
    }

#search-container .highlighter {
        font-weight: 800;
    }

#search-container #page-count-header h2.no-search-headings {
        text-align: left;
    }

@media (min-width: 62rem) {

#search-container #page-count-header h2.no-search-headings {
            text-align: center
    }
        }

#search-container.loading-in-progress .component.plain-html h2,
        #search-container.loading-in-progress .component.plain-html h3 {
            width: 80%;
            margin: 0 auto;
            padding: 5px;
            background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
            background-size: 200% 100%;
            -webkit-animation: 1.5s shine linear infinite;
                    animation: 1.5s shine linear infinite;
            border-radius: 4px;
            color: transparent;
        }

@media (min-width: 75rem) {

#search-container.loading-in-progress .component.plain-html h2,
        #search-container.loading-in-progress .component.plain-html h3 {
                width: 30%
        }
            }

#search-container.loading-in-progress #page-count-header h2 {
            color: transparent;
        }

#search-container .search-results {
        margin-top: 0;
    }

#search-container .no-results {
        display: none;
    }

#search-container #recipe-count-header {
        margin-top: 48px;
        margin-bottom: 16px;
    }

@media (min-width: 62rem) {

#search-container #recipe-count-header {
            margin-top: 64px;
            margin-bottom: 24px
    }
        }

#search-container #product-count-header,
    #search-container #page-count-header {
        margin-top: 64px;
        margin-bottom: 16px;
    }

@media (min-width: 62rem) {

#search-container #product-count-header,
    #search-container #page-count-header {
            margin-bottom: 24px
    }
        }

#search-container #page-count-header h2 {
            color: black;
            text-align: left;
            margin: 0 auto;
        }

@media (min-width: 62rem) {

#search-container #page-count-header h2 {
                max-width: 49%
        }
            }

#search-container #page-count-header + .search-results {
            padding-left: 15px;
            padding-right: 15px;
        }

#search-container .search-results.loading-in-progress {
        position: relative;
    }

#search-container .search-results.loading-in-progress ul li .recipe-card-v2 .recipe-card-image-wrapper img {
                    display: none;
                }

#search-container .search-results.loading-in-progress ul li .recipe-card-v2 .recipe-card-content-wrapper {
                    margin: 20px;
                    padding: 0;
                    border-radius: 5px;
                }

#search-container .search-results.loading-in-progress ul li .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title {
                        color: transparent;
                        -webkit-line-clamp: 1;
                    }

#search-container .search-results.loading-in-progress ul li .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-specs {
                        display: none;
                    }

#search-container .search-results.loading-in-progress ul li .recipe-card-v2 .recipe-card-image-wrapper,
                #search-container .search-results.loading-in-progress ul li .recipe-card-v2 .recipe-card-content-wrapper {
                    background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
                    background-size: 200% 100%;
                    -webkit-animation: 1.5s shine linear infinite;
                            animation: 1.5s shine linear infinite;
                }

#search-container .search-results.loading-in-progress .search-result-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

#search-container .search-results.page-list-grid.loading-in-progress {
        position: relative;
    }

#search-container .search-results.page-list-grid.loading-in-progress ul li .product-card-img img {
                display: none;
            }

#search-container .search-results.page-list-grid.loading-in-progress ul li .product-card {
                height: 300px;
                margin: 10px;
                background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
                background-size: 200% 100%;
                -webkit-animation: 1.5s shine linear infinite;
                        animation: 1.5s shine linear infinite;
            }

#search-container .search-results.page-list-grid.loading-in-progress ul li .product-card-text .product-card-title {
                    color: transparent;
                    margin: 20px;
                    padding: 0;
                    border-radius: 5px;
                }

#search-container .search-results.page-list-grid.loading-in-progress .search-result-overlay {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 0;
        }

#search-container .search-results.vertical.loading-in-progress ul li .field-title,
            #search-container .search-results.vertical.loading-in-progress ul li .field-metadescription {
                background: linear-gradient(110deg, #ececec 8%, #f5f5f5 18%, #ececec 33%);
                background-size: 200% 100%;
                -webkit-animation: 1.5s shine linear infinite;
                        animation: 1.5s shine linear infinite;
                color: transparent;
            }

#search-container .search-results.vertical.loading-in-progress ul li .field-title a {
                color: transparent;
            }

#default-container {
    margin-bottom: 80px;
}

@media (min-width: 62rem) {

#default-container {
        margin-bottom: 124px
}
    }

#default-container h3:not(.recipe-card-title) {
        margin-bottom: 0;
        text-align: left;
        padding: 0 15px;
    }

[dir='rtl'] #default-container h3:not(.recipe-card-title) {
            text-align: right;
        }

@media (min-width: 62rem) {

#default-container h3:not(.recipe-card-title) {
            text-align: center
    }
            
            [dir='rtl'] #default-container h3:not(.recipe-card-title) {
                text-align: center;
            }    
        }

#default-container .recipe-category-tile h3:not(.recipe-card-title) {
            margin-bottom: 16px;
        }

@media (min-width: 62rem) {

#default-container .recipe-category-tile h3:not(.recipe-card-title) {
                margin-bottom: 24px
        }
            }

#default-container .component.plain-html {
        margin-bottom: 64px;
    }

#search-details-wrapper {
    padding: 30px 0 15px;
}

#search-details-wrapper .recipe-category-tile {
        padding: 0;

    }

@media (min-width: 62rem) {

#search-details-wrapper .recipe-category-tile {
            padding: 0 15px

    }
        }

#search-details-wrapper .recipe-category-tile ul li {
            margin-top: 8px;
            margin-bottom: 32px;
        }

#search-details-wrapper .recipe-category-tile ul li >a>.recipe-card-v2 {
                -webkit-box-shadow: 0px 6px 20px rgb(102 102 102 / 30%);
                        box-shadow: 0px 6px 20px rgb(102 102 102 / 30%);
            }

#search-details-wrapper .page-list-products .product-card-subtitle {
            display: none;
        }

#search-details-wrapper .page-list-grid ul {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

#search-details-wrapper .page-list-grid ul li {
            width: 180px;
            -webkit-box-flex: unset;
                -ms-flex: unset;
                    flex: unset;
            padding: 0 16px;
        }

@media (min-width: 48rem) {

#search-details-wrapper .page-list-grid ul li {
                width: 260px
        }
            }

@media (min-width: 62rem) {

#search-details-wrapper .page-list-grid ul li {
                width: 250px
        }
            }

@media (min-width: 75rem) {

#search-details-wrapper .page-list-grid ul li {
                width: 330px
        }
            }

#search-details-wrapper .page-list-grid ul li>a>[class*='-card'] {
        -webkit-box-shadow: none;
                box-shadow: none;
        border: none;
    }

#search-details-wrapper .product-card {
        padding: 0;
        min-height: 0;
        background-color: transparent;
    }

#search-details-wrapper .product-card img {
            -o-object-fit: contain;
               object-fit: contain;
        }

#search-details-wrapper .recipe-card-list h2 {
        text-align: left;
    }

@media (min-width: 62rem) {

#search-details-wrapper .recipe-card-list h2 {
            text-align: center
    }
        }

#search-details-wrapper .search-results {
        margin-bottom: 0;
    }

#search-details-wrapper .search-results.vertical .search-result-list .field-title {
                    font-family: var(--ff-headings);
                }

#search-details-wrapper .search-results.vertical .search-result-list .field-title a {
                        color: var(--color-black);
                        line-height: 25px;
                    }

@media (min-width: 62rem) {

#search-details-wrapper .search-results.vertical {
                max-width: 49%;
                margin: 0 auto
        }
            }

#search-details-wrapper .component.plain-html .component-content {
            text-align: center;
        }

#search-details-wrapper .component.plain-html .component-content h2,
            #search-details-wrapper .component.plain-html .component-content h3 {
                text-align: left;
                padding: 0 15px;
            }

[dir='rtl'] #search-details-wrapper .component.plain-html .component-content h2, [dir='rtl'] #search-details-wrapper .component.plain-html .component-content h3 {
                    text-align: right;
                }

@media (min-width: 62rem) {

#search-details-wrapper .component.plain-html .component-content h2,
            #search-details-wrapper .component.plain-html .component-content h3 {
                    text-align: center
            }

                    [dir='rtl'] #search-details-wrapper .component.plain-html .component-content h2, [dir='rtl'] #search-details-wrapper .component.plain-html .component-content h3 {
                        text-align: center;
                    }
                }

#search-details-wrapper .search-result-list {
        text-align: left;
    }

[dir='rtl'] #search-details-wrapper .search-result-list {
            text-align: right;
        }

#search-details-wrapper .search-result-list li {
            margin-bottom: 24px;
        }

#search-details-wrapper .search-result-list .field-title {
            font-size: 20px;
            margin-bottom: 4px;
            margin-top: 0;
        }

#search-details-wrapper .search-result-list .field-metadescription {
            font-size: 12px;
            line-height: 18px;
        }

@media (min-width: 48rem) {

#search-details-wrapper .search-result-list .field-metadescription {
                font-size: 16px;
                line-height: 24px
        }
            }

.on-page-editor #search-container { 
    display: block; 
}
.auto-load-more {
    padding: var(--s-l) 0;
    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;
    overflow: hidden;
}

    .auto-load-more > .component-content {
        position: relative;
        left: -10004px;
        width: 10px;
        height: 10px;
        border-radius: 5px;
        background-color: var(--primary-color);
        color: var(--primary-color);
        -webkit-box-shadow: 10004px 0 0 -5px var(--primary-color);
                box-shadow: 10004px 0 0 -5px var(--primary-color);
        -webkit-animation: dotPulse 1.5s infinite linear;
                animation: dotPulse 1.5s infinite linear;
        -webkit-animation-delay: .25s;
                animation-delay: .25s;
    }

    [dir="rtl"] .auto-load-more > .component-content {
            left: -9995px;
            -webkit-box-shadow: 9995px 0 0 -5px var(--primary-color);
                    box-shadow: 9995px 0 0 -5px var(--primary-color);
            -webkit-animation: dotPulseRTL 1.5s infinite linear;
                    animation: dotPulseRTL 1.5s infinite linear;
        }

    .auto-load-more > .component-content::before, 
        .auto-load-more > .component-content::after {
            content: '';
            display: inline-block;
            position: absolute;
            top: 0;
            width: 10px;
            height: 10px;
            border-radius: 5px;
            background-color: var(--primary-color);
            color: var(--primary-color);
        }

    .auto-load-more > .component-content::before {
            -webkit-box-shadow: 9984px 0 0 -5px var(--primary-color);
                    box-shadow: 9984px 0 0 -5px var(--primary-color);
            -webkit-animation: dotPulseBefore 1.5s infinite linear;
                    animation: dotPulseBefore 1.5s infinite linear;
            -webkit-animation-delay: 0s;
                    animation-delay: 0s;
        }

    .auto-load-more > .component-content::after {
            -webkit-box-shadow: 10014px 0 0 -5px var(--primary-color);
                    box-shadow: 10014px 0 0 -5px var(--primary-color);
            -webkit-animation: dotPulseAfter 1.5s infinite linear;
                    animation: dotPulseAfter 1.5s infinite linear;
            -webkit-animation-delay: .5s;
                    animation-delay: .5s;
        }

    .auto-load-more input[type="button"] {
        display: none;
    }


@-webkit-keyframes dotPulseBefore {
    0% {
        -webkit-box-shadow: 9984px 0 0 -5px var(--primary-color);
                box-shadow: 9984px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 9984px 0 0 2px var(--primary-color);
                box-shadow: 9984px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 9984px 0 0 -5px var(--primary-color);
                box-shadow: 9984px 0 0 -5px var(--primary-color);
    }
}


@keyframes dotPulseBefore {
    0% {
        -webkit-box-shadow: 9984px 0 0 -5px var(--primary-color);
                box-shadow: 9984px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 9984px 0 0 2px var(--primary-color);
                box-shadow: 9984px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 9984px 0 0 -5px var(--primary-color);
                box-shadow: 9984px 0 0 -5px var(--primary-color);
    }
}
  
@-webkit-keyframes dotPulse {
    0% {
        -webkit-box-shadow: 10004px 0 0 -5px var(--primary-color);
                box-shadow: 10004px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 10004px 0 0 2px var(--primary-color);
                box-shadow: 10004px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 10004px 0 0 -5px var(--primary-color);
                box-shadow: 10004px 0 0 -5px var(--primary-color);
    }
}
  
@keyframes dotPulse {
    0% {
        -webkit-box-shadow: 10004px 0 0 -5px var(--primary-color);
                box-shadow: 10004px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 10004px 0 0 2px var(--primary-color);
                box-shadow: 10004px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 10004px 0 0 -5px var(--primary-color);
                box-shadow: 10004px 0 0 -5px var(--primary-color);
    }
}
  
@-webkit-keyframes dotPulseAfter {
    0% {
        -webkit-box-shadow: 10014px 0 0 -5px var(--primary-color);
                box-shadow: 10014px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 10014px 0 0 2px var(--primary-color);
                box-shadow: 10014px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 10014px 0 0 -5px var(--primary-color);
                box-shadow: 10014px 0 0 -5px var(--primary-color);
    }
}
  
@keyframes dotPulseAfter {
    0% {
        -webkit-box-shadow: 10014px 0 0 -5px var(--primary-color);
                box-shadow: 10014px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 10014px 0 0 2px var(--primary-color);
                box-shadow: 10014px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 10014px 0 0 -5px var(--primary-color);
                box-shadow: 10014px 0 0 -5px var(--primary-color);
    }
}

@-webkit-keyframes dotPulseRTL {
    0% {
        -webkit-box-shadow: 9995px 0 0 -5px var(--primary-color);
                box-shadow: 9995px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 9995px 0 0 2px var(--primary-color);
                box-shadow: 9995px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 9995px 0 0 -5px var(--primary-color);
                box-shadow: 9995px 0 0 -5px var(--primary-color);
    }
}

@keyframes dotPulseRTL {
    0% {
        -webkit-box-shadow: 9995px 0 0 -5px var(--primary-color);
                box-shadow: 9995px 0 0 -5px var(--primary-color);
    }
    30% {
        -webkit-box-shadow: 9995px 0 0 2px var(--primary-color);
                box-shadow: 9995px 0 0 2px var(--primary-color);
    }
    60%,
    100% {
        -webkit-box-shadow: 9995px 0 0 -5px var(--primary-color);
                box-shadow: 9995px 0 0 -5px var(--primary-color);
    }
}
.search-results.hide-no-results-page-load .no-results {
            display: none;
        }
@media (min-width: 62rem) {#product-filter .toggle-filter-options.toggle-filter-results .product-list ul li {
                width: calc((100% - 60px) / 2);
                margin: 0 15px var(--s-m)
        }
            }
            @media (min-width: 75rem) {#product-filter .toggle-filter-options.toggle-filter-results .product-list ul li {
                width: calc((100% - 90px) / 3);
                margin: 0 15px var(--s-xl)
        }
            }
.toast {
    position: fixed;
    margin: var(--s-m);
    width: calc(100% - 32px);
    visibility: hidden;
    opacity: 0;
    z-index: 9999;
    -webkit-transition: opacity var(--transition-timing-slow);
    transition: opacity var(--transition-timing-slow);
}
    
    .toast-wrapper {
        padding: var(--s-m);
        margin: auto;
        background-color: var(--color-white);
        -webkit-box-shadow: var(--box-shadow-cards);
                box-shadow: var(--box-shadow-cards);
        text-align: center;
        max-width: 600px;
    }
    
    .toast-wrapper .close-button {
            display: none;
        }
    
    .toast.show {
        visibility: visible;
        opacity: 1;
    }
    
    .toast.has-close-btn .toast-wrapper {
            position: relative;
            padding: var(--s-m) var(--s-xxl) var(--s-m) var(--s-l);
        }
    
    .toast.has-close-btn .toast-wrapper .close-button {
                display: block;
            }
    
    .toast.has-close-btn .toast-wrapper .close-button::after {
                    content: "✕";
                    position: absolute;
                    right: var(--s-m);
                    top: 0;
                    bottom: 0;
                    margin: auto;
                    width: 16px;
                    height: 24px;
                    cursor: pointer;
                }
    
    .toast.success .toast-wrapper {
            color: var(--color-green);
        }
    
    .toast.error .toast-wrapper {
            color: var(--color-red);
        }
/* CSS for slider range */
.carbon-calc {
  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: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto;
}
@media (min-width: 36rem) {
.carbon-calc {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row
}
  }
.carbon-calc .carbon-calc-section {
    background-color: var(--cfc-cal-section-bg-dark);
    width: 100%;
    color: var(--cfc-content-color);
  }
@media (max-width: 35.9375rem) {
.carbon-calc .carbon-calc-section {
      background: -webkit-gradient( linear, left bottom, left top, from(var(--cfc-gradient1-mobile)), color-stop(var(--cfc-gradient1-mobile)), color-stop(var(--cfc-gradient1-mobile)), to(var(--cfc-gradient2-mobile)));
      background: linear-gradient( to top, var(--cfc-gradient1-mobile), var(--cfc-gradient1-mobile), var(--cfc-gradient1-mobile), var(--cfc-gradient2-mobile));
      padding: 0 var(--s-l) var(--s-l);
      position: relative;
      z-index: 200
  }
    }
@media (max-width: 375px) {
.carbon-calc .carbon-calc-section {
      padding-top: var(--s-xxl)
  }
    }
@media only screen and (min-device-width: 375px) 
                   and (max-device-width: 667px) 
                   and (orientation: landscape) {
.carbon-calc .carbon-calc-section {
                    padding: var(--s-xxl) var(--s-xxxl) var(--s-xxl) var(--s-xxl); 
                    background-color: var(--cfc-cal-section-bg-dark)
  }   
      }
@media (min-width: 36rem) {
.carbon-calc .carbon-calc-section {
        padding: var(--s-xxl) var(--s-xxl) var(--s-xxl) var(--s-xl)
  }
      }
@media (min-width: 62rem) {
.carbon-calc .carbon-calc-section {
        padding: var(--s-xxl) var(--s-xxxxl) var(--s-xxl) var(--s-xl)
  }
        
        [dir="rtl"] .carbon-calc .carbon-calc-section {
          padding: var(--s-xxl) var(--s-xl) var(--s-xxl) var(--s-xxxxl);
        }
      }
.carbon-calc .carbon-calc-section .calc-question {
      text-align: left;
    }
@media (max-width: 47.9375rem) {
.carbon-calc .carbon-calc-section .calc-question {
        text-align: center
    }
      }
.carbon-calc .carbon-calc-section .read-more {
        text-align: right;
    }
[dir="rtl"] .carbon-calc .carbon-calc-section .read-more {
          text-align: left;
        }
@media (max-width: 47.9375rem) {
.carbon-calc .carbon-calc-section .read-more {
          text-align: center
    }

          [dir="rtl"] .carbon-calc .carbon-calc-section .read-more {
            text-align: center;
          }
        }
.carbon-calc .carbon-calc-section .read-more .read-morebtn {
          background-color: var(--cfc-read-more-btnbg);
          border-radius: 5px;
        }
.carbon-calc .carbon-calc-section .disc-text {
      font-size: var(--fs-xs);
      text-align: left;
    }
[dir="rtl"] .carbon-calc .carbon-calc-section .disc-text {
        text-align: right;
      }
@media (max-width: 47.9375rem) {
.carbon-calc .carbon-calc-section .disc-text {
        text-align: center
    }    
        
        [dir="rtl"] .carbon-calc .carbon-calc-section .disc-text {
          text-align: center;
        }
      }
.carbon-calc .carbon-calc-banner {
    width:100%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
  }
@media (max-width: 35.9375rem) {
.carbon-calc .carbon-calc-banner {
      position: relative;
      height: 310px
  }
    }
.carbon-calc .carbon-calc-banner .banner-bgcontainer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      position: relative;
      height: 100%;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      padding: var(--s-xxl) var(--s-xxl) var(--s-xxl) var(--s-xxl);
    }
@media(max-width: 47.9375rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer {
        padding: var(--s-m);
        min-height: 155vh
    }
      }
@media (min-width: 62rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer {
        padding: var(--s-xxl) var(--s-xl) var(--s-xxl) var(--s-xxxxl)
    }

        [dir="rtl"] .carbon-calc .carbon-calc-banner .banner-bgcontainer {
          padding: var(--s-xxl) var(--s-xxxxl) var(--s-xxl) var(--s-xl);
        }
      }
.carbon-calc .carbon-calc-banner .banner-bgcontainer::before {
          content: '';
          height: 100%;
          background: var(--color-black);
          position: absolute;
          display: block;
          top: 0;
          left: 0;
          height: 100%;
          width: 100%;
          opacity: 0.7;
          z-index: 200;
      }
.carbon-calc .carbon-calc-banner .banner-bgcontainer>img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
        object-fit: cover;
        z-index: 0;
      }
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper {
        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);
        text-align: center;
      }
@media (min-width: 48rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper {
          text-align: left
      }
        }
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper .banner-content-subtitle {
          font-size: var(--fs-subtitle-mobile);
        }
@media (max-width: 47.9375rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper .banner-content-subtitle {
            margin: var(--s-xl) 0 var(--s-m)
        }
          }
@media (min-width: 75rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper .banner-content-subtitle {
            font-size: var(--fs-subtitle-desktop)
        }
          }
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper .banner-content-title {
          color: var(--color-white);
          font-size: var(--fs-title-mobile);
          text-transform: none;
        }
@media (max-width: 47.9375rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper .banner-content-title {
            margin-bottom: var(--s-l);
            line-height: 1
        }
          }
@media (min-width: 75rem) {
.carbon-calc .carbon-calc-banner .banner-bgcontainer .content-wrapper .banner-content-title {
            font-size: var(--fs-title-desktop)
        }
          }
.carbon-calc .slider-range {
    position: relative;
    margin: 0 auto 3rem;
  }
.carbon-calc .slider-range .range {
      -webkit-appearance: none;
      height: 6px;
      border-radius: 4px;
      background: var(--cfc-ranger-slider-background);
      outline: none;
      padding: 0;
      margin: 0;
    }
/* Range Handle */
.carbon-calc .slider-range .range::-webkit-slider-thumb {
        -webkit-appearance: none;
                appearance: none;
        width: 34px;
        height: 34px;
        border-radius: 50%;
        background: radial-gradient(75% 75% at 50%, at 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        background: radial-gradient(75% 75% at 50% 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
        cursor: pointer;
        -webkit-transition: var(--cfc-slider-thumb-light) .15s ease-in-out;
        transition: var(--cfc-slider-thumb-light) .15s ease-in-out;
      }
.carbon-calc .slider-range .range:active::-webkit-slider-thumb {
        background: radial-gradient(75% 75% at 50%, at 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        background: radial-gradient(75% 75% at 50% 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
                box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
      }
.carbon-calc .slider-range .range::-moz-range-thumb {
        width: 34px;
        height: 34px;
        border: 0;
        border-radius: 50%;
        background: radial-gradient(75% 75% at 50%, at 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        background: radial-gradient(75% 75% at 50% 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
        cursor: pointer;
        -webkit-transition: #BAE5FF .15s ease-in-out;
        transition: #BAE5FF .15s ease-in-out;
      }
.carbon-calc .slider-range .range:active::-moz-range-thumb {
        background: radial-gradient(75% 75% at 50%, at 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        background: radial-gradient(75% 75% at 50% 25%, var(--cfc-slider-thumb-light) 0%, var(--cfc-slider-thumb-dark) 100%);
        box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8);
      }
.carbon-calc .slider-range .bubble {
      background: var(--cfc-bubble-background);
      position: absolute;
      width: 44px;
      height: 36px;
      text-align: center;
      color: var(--cfc-bubble-font-color);
      border-radius: 10px;
      display: inline-block;
      top: 170%;
      font-size: 22px;
      line-height: var(--lh-m);
      font-weight: bold;
      -webkit-filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
              filter: drop-shadow(0px 0px 10px rgba(0, 0, 0, 0.8));
    }
.carbon-calc .slider-range .bubble::after {
        content: "";
        position: absolute;
        width: 0;
        height: 0;
        border-bottom: 7px solid var(--cfc-bubble-background);
        border-left: 7px solid transparent;
        border-right: 7px solid transparent;
        top: -16%;
        left: 46%;
        margin-left: -5px;
      }
.carbon-calc .toggle-section .toggle-content {
      display: none;
      margin-top: 20px;
    }
.carbon-calc .toggle-section .toggle-content .toggle-subheader, .carbon-calc .toggle-section .toggle-content .calculated-values {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -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;
        border-bottom: 1px solid var(--cfc-border-color);
        padding: 8px 0 3px;
      }
.carbon-calc .toggle-section .toggle-content .toggle-subheader:first-child, .carbon-calc .toggle-section .toggle-content .calculated-values:first-child {
          border-bottom: 2px solid var(--cfc-border-color);
        }
.carbon-calc .toggle-section .toggle-content .toggle-subheader:last-child, .carbon-calc .toggle-section .toggle-content .calculated-values:last-child {
          border-bottom: 4px solid var(--cfc-border-color);
        }
@media(min-width: 36rem) {
.carbon-calc .toggle-section .toggle-content .toggle-subheader, .carbon-calc .toggle-section .toggle-content .calculated-values {
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          -webkit-box-orient: horizontal;
          -webkit-box-direction: normal;
              -ms-flex-direction: row;
                  flex-direction: row;
          -webkit-box-align: baseline;
              -ms-flex-align: baseline;
                  align-items: baseline;
          -webkit-box-pack: justify;
              -ms-flex-pack: justify;
                  justify-content: space-between;
          padding: 1px 0
      }
        }
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-value, .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-value {
          font-size : var(--fs-xl);
          width: 100%;
          text-align: center;
        }
@media (min-width: 62rem) {
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-value, .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-value {
            text-align: right;
            width: 22.5%
        }

            [dir="rtl"] .carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-value, [dir="rtl"] .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-value {
              text-align: left;
              width: 20%;
            }
          }
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-title, .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-title {
          width: 100%;
          text-align: center;
        }
@media (min-width: 62rem) {
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-title, .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-title {
            width: 55%;
            text-align: left
        }

            [dir="rtl"] .carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-title, [dir="rtl"] .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-title {
              text-align: right;
              width: 59%;
            }
            
          }
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-unit, .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-unit {
          text-align: center;
          width: 100%;
          margin-left: 0px;
        }
@media (min-width: 62rem) {
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-unit, .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-unit {
            text-align: left;  
            margin-left: 10px;   
            width: 22.5%
        } 

            [dir="rtl"] .carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-unit, [dir="rtl"] .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-unit {
              text-align: right;
              margin: 0 10px 0 0;
              width: 21%;
            }
          }
.carbon-calc .toggle-section .toggle-content .toggle-subheader .carbonCalc-title {
        text-transform: uppercase;
      }
.carbon-calc .toggle-section .toggle-content .carbonCalc-default {
        font-size : var(--fs-xl);
      }
.carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-img {
            margin-right: 10px;
        }
[dir="rtl"] .carbon-calc .toggle-section .toggle-content .calculated-values .carbonCalc-img {
              margin:0 0 0 10px;
            }

.select-dropdown .selectlist {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    width:100%;
    position:relative;
    border: none;
    border-bottom: 2px solid var(--cfc-border-color);
    color: var(--cfc-toggle-header-color);
  }

.select-dropdown .option {
    padding: 0 30px 0 0;
    min-height:40px;
    display:none;
    color: var(--cfc-dropdown-title-txtclr);
    background-color: var(--cfc-dropdown-bg);
    border-top:var(--cfc-border-color) solid 1px;
    position:relative;
    top:0;
    width: 100%;
    pointer-events:none;
    -webkit-box-ordinal-group:3;
        -ms-flex-order:2;
            order:2;
    z-index:-2;
    -webkit-transition:background .4s ease-in-out;
    transition:background .4s ease-in-out;
    -webkit-box-sizing:border-box;
            box-sizing:border-box;
    overflow:hidden;
    
  }

[dir="rtl"] .select-dropdown .option {
      padding: 0 0 0 30px;
    }

.select-dropdown .selectlist:focus .option {
    position:relative;
    pointer-events:all;
    color: var(--cfc-dropdown-title-txtclr);
    background-color: var(--cfc-dropdown-bg);
    text-transform: uppercase;
    text-align: center;
    display: inline-block;
    padding: 8px 15px;
    z-index: 1;
  }

@media (min-width: 48rem) {

.select-dropdown .selectlist:focus .option {
      padding: 8px 40px
  }
    }

.select-dropdown .selectlist:focus .option::before {
      display: none;
    }

.select-dropdown .selectlist:focus .option::after {
      display: none;
    }

.select-dropdown .selectlist:focus .option:hover {
    background-color: var(--cfc-dropdown-bg-hover);
  }

.select-dropdown input {
    opacity:0;
    position:absolute;
  }

.select-dropdown input:checked + label {
    -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
            order: 1;
    z-index:2;
    border-top:none;
    position:relative;
    background-color: transparent;
    color: var(--cfc-toggle-header-color);
    text-transform: uppercase;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align:center;
        -ms-flex-align:center;
            align-items:center;
  }

.select-dropdown input:checked + label.option::after {
      content:'';
      width: 0; 
      height: 0; 
      border-left: 8px solid transparent;
      border-right: 8px solid transparent;
      border-top: 10px solid var(--cfc-border-color);
      position:absolute;
      right:2px;
      pointer-events:none;
      z-index:3;
    }

[dir="rtl"] .select-dropdown input:checked + label.option::after {
        left: 2px;
        right: unset;
      }

.select-dropdown input:checked + label.option::before {
      content: '';
      position:absolute;
      right:0;
      height: 40px;
      width: 40px;
    }

[dir="rtl"] .select-dropdown input:checked + label.option::before {
        left: 0;
        right: unset;
      }
.sustainability-calc {
    padding: var(--s-xxxl);
    color: var(--color-white);
    font-family: var(--ff-headings);
    background-color: var(--primary-color);
    border-radius: var(--border-radius-xl);
    background-image: url(`../../../Images/top-arrow.png`);
    background-size: 150px;
    background-repeat: no-repeat;
    background-position: top -35px right 50px;
}
    [dir='rtl'] .sustainability-calc {
        background-position: top -35px left 50px;
    }
    @media (max-width: 47.9375rem) {.sustainability-calc {
        padding: var(--s-xl);
        background-image: none
}
    }

.calc-top {
        max-width: calc(100% - 250px);
    }

@media (max-width: 47.9375rem) {

.calc-top {
            max-width: 100%;
            text-align: center
    }
        }

.calc-title {
        color: var(--color-white);
    }

.calc-input-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
    }

@media (max-width: 47.9375rem) {

.calc-input-wrapper {
            display: block
    }
        }

.calc-input-wrapper .input-text {
            -webkit-box-flex: 60%;
                -ms-flex: 60%;
                    flex: 60%;
            min-width: 200px;
            padding-right: var(--s-m);
            font-size: var(--fs-m);
            font-family: var(--ff-headings);
        }

@media (max-width: 47.9375rem) {

.calc-input-wrapper .input-text {
                padding: var(--s-m) 0 var(--s-l);
                display: block
        }
            }

.calc-input-wrapper .calc-input {
            -webkit-box-flex: 40%;
                -ms-flex: 40%;
                    flex: 40%;
            border: 0;
            margin: auto;
            line-height: 1;
            min-width: 100px;
            text-align: center;
            height: -webkit-min-content;
            height: -moz-min-content;
            height: min-content;
            color: var(--text-color);
            font-size: var(--fs-xxxl);
            padding: 0 0 var(--s-s) 0;
            font-family: var(--ff-headings);
            border-radius: var(--border-radius-s);
            background-color: var(--brand-color-3);
        }

.calc-input-wrapper .calc-input:focus {
                outline: 1px solid var(--color-white);
                border: 0;
            }

.calc-input-wrapper .calc-input::-webkit-input-placeholder {
                opacity: 1;
                color: var(--text-color);
            }

.calc-input-wrapper .calc-input::-moz-placeholder {
                opacity: 1;
                color: var(--text-color);
            }

.calc-input-wrapper .calc-input:-ms-input-placeholder {
                opacity: 1;
                color: var(--text-color);
            }

.calc-input-wrapper .calc-input::-ms-input-placeholder {
                opacity: 1;
                color: var(--text-color);
            }

.calc-input-wrapper .calc-input::placeholder {
                opacity: 1;
                color: var(--text-color);
            }

.calc-input-wrapper .calc-input::-webkit-inner-spin-button,
            .calc-input-wrapper .calc-input::-webkit-outer-spin-button {
                -webkit-appearance: none;
                        appearance: none;
            }

.calc-results {
        height: 0;
        opacity: 0;
        padding: 0;
        -webkit-transition: all var(--transition-timing-slow);
        transition: all var(--transition-timing-slow);
    }

.calc-results.show {
            opacity: 1;
        }

.calc-results.padd {
            padding-top: var(--s-xxxxl);
        }

@media (max-width: 47.9375rem) {

.calc-results.padd {
                padding-top: var(--s-xxl)
        }
            }

.on-page-editor .calc-results {
            height: auto;
            opacity: 1;
            padding-top: var(--s-xxxxl);
        }

.calc-mainresult {
        font-size: var(--fs-m);
        color: var(--secondary-color);
    }

.calc-otherresult {
        height: 0;
        opacity: 0;
        -webkit-transition: all var(--transition-timing-slow);
        transition: all var(--transition-timing-slow);
    }

.calc-otherresult.show {
            opacity: 1;
            padding-top: var(--s-xxxl);
        }

.on-page-editor .calc-otherresult {
            height: auto;
            opacity: 1;
            padding-top: var(--s-xxxl);
        }

@media (max-width: 47.9375rem) {

.calc-totalpollutant {
            display: none
    }
        }

.calc-totalpollutant-img {
            margin-bottom: var(--s-m);
        }

.calc-pollutants {
        font-size: var(--fs-m);
    }

.calc-pollutants-list {
        width: 100%;
    }

.calc-pollutants-title {
        margin-bottom: var(--s-xl);
    }

.calc-pollutants-flex {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        text-align: center;
        padding-bottom: var(--s-xxl);
    }

.calc-pollutants-flex img {
            max-width: 100px;
            max-height: 100px;
        }

.calc-pollutant {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        padding: var(--s-s);
    }

@media (max-width: 47.9375rem) {

.calc-pollutant {
            -webkit-box-orient: vertical;
            -webkit-box-direction: reverse;
                -ms-flex-flow: column-reverse;
                    flex-flow: column-reverse
    }
        }

.calc-pollutant-text {
            margin: 0;
            width: 100%;
            padding: var(--s-s);
        }

.calc-pollutant-img {
            padding: var(--s-s);
        }

.calc-springimg img {
        min-width: 40px;
        max-width: unset;
        max-height: unset;
        padding: 0 0 0 var(--s-m);
    }

@media (max-width: 47.9375rem) {

.calc-springimg img {
            display: none
    }
        }

.calc-source {
        font-size: var(--s-m);
        color: var(--secondary-color);
    }

.ebook {
    --page-height: 400px;
    --page-height-desktop: 400px; /* Used in ebook.js fit() to compute image height, replica of --page-height var */
    --page-height-mobile: 220px;
}
    .ebook .intro {
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: 100%;
        position: absolute;
    }
    .ebook .intro picture img {
            width: 100%;
            height: 100%;
            -o-object-fit: cover;
               object-fit: cover;
            position: absolute;
            -o-object-position: center;
               object-position: center;
        }
    .ebook .intro-content {
            top: 50%;
            margin: auto;
            max-width: 800px;
            padding: var(--s);
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
            text-align: center;
            position: relative;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
        }
    @media (max-width: 47.9375rem) {
    .ebook .intro-content {
                padding: var(--s-xxxl)
        }
            }
    @media (max-width: 47.9375rem) {
    .ebook .intro-title {
                font-size: var(--fs-xl)
        }
            }
    .ebook .intro-text {
            margin: auto;
            max-width: 600px;
        }
    .ebook .pages {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: 0 30%;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        overflow: visible;
        width: -webkit-max-content;
        width: -moz-max-content;
        width: max-content;
    }
    @media (max-width: 47.9375rem) {
    .ebook .pages {
            padding: 0 50px
    }
        }
    .ebook .pages .page {
            list-style: none;
            -ms-flex-negative: 0;
                flex-shrink: 0;
            padding: 15px;
        }
    @media (max-width: 47.9375rem) {
    .ebook .pages .page {
                padding: 6px
        }
            }
    .ebook .pages .page.active img, .ebook .pages .page:hover img, .ebook .pages .page:focus img {
                    -webkit-box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
                            box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
                }
    .ebook .pages .page img {
                position: relative;
                min-height: var(--page-height);
                max-height: var(--page-height);
            }
    @media (max-width: 47.9375rem) {
    .ebook .pages .page img {
                    --page-height: 220px
            }
                }
    .ebook .pages .page img:hover {
                    cursor: pointer;
                }
    .ebook .pages .page img:active {
                    cursor: default;
                }
    .ebook .carousel-controls {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        padding: var(--s-xl) var(--s-xs);
    }
    .ebook .carousel-controls .scroll-left, 
        .ebook .carousel-controls .scroll-right {
            line-height: 1;
            cursor: pointer;
            text-align: center;
            -ms-flex-item-align: end;
                align-self: flex-end;
            color: var(--primary-color);
        }
    @media (max-width: 47.9375rem) {
    .ebook .carousel-controls .scroll-left, 
        .ebook .carousel-controls .scroll-right {
                font-size: 12px
        }
            }
    .ebook .carousel-controls .scroll-left:empty, .ebook .carousel-controls .scroll-right:empty {
                display: none;
            }
    .ebook .carousel-controls .bullets {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            margin: 0 24px;
        }
    @media (max-width: 47.9375rem) {
    .ebook .carousel-controls .bullets {
                margin: 0 16px
        }
            }
    .ebook .carousel-controls .bullet {
            width: 12px;
            height: 32px;
            cursor: pointer;
            position: relative;
        }
    @media (max-width: 47.9375rem) {
    .ebook .carousel-controls .bullet {
                width: 8px;
                height: 30px
        }
            }
    .ebook .carousel-controls .bullet .line {
                left: 50%;
                width: 2px;
                height: 100%;
                opacity: 0.8;
                position: absolute;
                -webkit-transform: scaleY(0.6);
                        transform: scaleY(0.6);
                background: var(--primary-color);
                -webkit-transform-origin: center bottom;
                        transform-origin: center bottom;
            }
    .ebook .download-btn {
        text-align: center;
        padding-bottom: var(--s-xxl);
    }
    @media (max-width: 47.9375rem) {
    .ebook .download-btn {
            padding-bottom: var(--s-xl)
    }
        }
    .ebook .download-btn a.underline {
            text-decoration: underline;
            text-underline-offset: 6px;
            color: var(--primary-color);
        }
    .ebook .download-btn a.underline:hover, 
            .ebook .download-btn a.underline:focus {
                text-decoration-thickness: 2px;
                -webkit-text-decoration-skip-ink: none;
                        text-decoration-skip-ink: none;
            }
    .ebook.fit-in-full-view {
        height: 100vh;
    }
    .ebook:not(.fit-in-full-view) .ebook-wrapper {
        position: relative;
    }
    .ebook .carousel-wrapper {
        opacity: 0;
        pointer-events: none;
    }

.ebook-popup {
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
    display: none;
    position: fixed;
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
    background: var(--pattern);
    background-color: white;
}

.ebook-popup.show {
        display: block;
    }

.ebook-popup .popup-close {
        top: 24px;
        right: 20px;
        width: 32px;
        height: 32px;
        z-index: 999999;
        cursor: pointer;
        padding: 7px 15px;
        position: absolute;
    }

@media (min-width: 48rem) {

.ebook-popup .popup-close {
            top: 40px;
            right: 40px;
            width: 40px;
            height: 40px;
            padding: 6px 19px
    }
        }

.ebook-popup .popup-close::before,
        .ebook-popup .popup-close::after {
            content: "";
            width: 3px;
            height: 20px;
            position: absolute;
            background-color: var(--primary-color);
        }

@media (min-width: 48rem) {

.ebook-popup .popup-close::before,
        .ebook-popup .popup-close::after {
                width: 4px;
                height: 28px
        }
            }

.ebook-popup .popup-close::before {
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
        }

.ebook-popup .popup-close::after {
            -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg);
        }

.ebook-popup .popup-content {
        width: 100vw;
        height: 100vh;
        overflow: auto;
        text-align: center;
        white-space: nowrap;
    }

@media (min-width: 48rem) {

.ebook-popup .popup-content {
            overflow: visible
    }
        }

.ebook-popup .popup-content img {
            position: relative;
            vertical-align: middle;
            margin: var(--s-xxxl) var(--s-xl);
            -webkit-box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
                    box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
        }

@media (min-width: 48rem) {

.ebook-popup .popup-content img {
                margin: var(--s-xxxxl) var(--s-xxl)
        }
            }

.ebook-popup .popup-content .align-middle {
            height: 100%;
            display: inline-block;
            vertical-align: middle;
        }

.ebook-popup .nav-controls {
        bottom: 48%;
        width: 100%;
        position: absolute;
    }

@media (max-width: 47.9375rem) {

.ebook-popup .nav-controls {
            bottom: 26px
    }
            .ebook-popup .nav-controls svg {
                width: 40px;
                height: 40px;
            }
        }

.ebook-popup .nav-controls > a {
            cursor: pointer;
            z-index: 99999;
            margin: 4px 32px;
            position: relative;
        }

@media (max-width: 47.9375rem) {

.ebook-popup .nav-controls > a {
                margin: 4px 24px
        }
            }

.ebook-popup .nav-controls .prev-page {
            float: left;
        }

.ebook-popup .nav-controls .next-page {
            float: right;
        }

.ebook-popup .zoom-controls {
        bottom: 26px;
        width: 100%;
        position: absolute;
        text-align: center;
    }

.ebook-popup .zoom-controls > a {
            cursor: pointer;
            z-index: 99999;
            margin: 4px 16px;
            position: relative;
        }

@media (max-width: 47.9375rem) {

.ebook-popup .zoom-controls > a {
                opacity: 0;
                pointer-events: none
        }
                .ebook-popup .zoom-controls > a:focus {
                    opacity: 1;
                    pointer-events: all;
                }
            }

body.on-page-editor .ebook .carousel-wrapper {
        opacity: 1;
        pointer-events: all;
    }

body.on-page-editor .ebook.fit-in-full-view {
        height: auto;
    }

body.on-page-editor .ebook .intro {
        position: relative;
    }

body.on-page-editor .ebook .intro-content {
        top: 0;
        -webkit-transform: unset;
                transform: unset;
    }

body:not(.on-page-editor).no-footer footer {
        display: none;
    }

body:not(.on-page-editor).hide-scroll {
        overflow: hidden;
    }

#home-drag-carousel
{
  position: relative;
  margin-top: 0rem;
  margin-bottom: 0rem;
}
  @media only screen and (min-width:900px)
  {#home-drag-carousel
{
    margin-top: 70px;
    margin-bottom: 140px
}
  }
  
  .visuallyhidden {
    position: absolute;
    z-index: -1;
    right: 0;
    opacity: 0;
    
  }
  
  #home-drag-carousel ul {
    --card-width: 80%;
    --card-max-width: 280px;
    --card-height: 350px;
    --carousel-min-width: 600px;
    z-index: 1;
    position: relative;
    margin: 0 auto;
    width: 100%;
    height: var(--card-height);
    min-width: var(--carousel-min-width);
    -webkit-transition: -webkit-filter .3s ease;
    transition: -webkit-filter .3s ease;
    transition: filter .3s ease;
    transition: filter .3s ease, -webkit-filter .3s ease;
  }
  
  @media screen and (max-width: 640px) {
    #home-drag-carousel ul {
      margin-left: calc((100vw - var(--carousel-min-width) - 40px) / 2);
      --card-max-width:200px;
      --card-height:200px;
    }
    .card-controller > *
    {
      top: 40% !important;
      width: 30px !important;
      height: 30px !important;
    }
  
    .card-controller .left
    {
      left: -15px !important;
    }
  
    .card-controller .right
    {
      right: -12px !important;
    }
  }
  
  #home-drag-carousel ul.smooth-return {
    -webkit-transition: all .2s ease;
    transition: all .2s ease;
  }
  
  #home-drag-carousel ul li {
    background: transparent;
    width: var(--card-width);
    max-width: var(--card-max-width);
    text-align: center;
    min-width: 250px;
    height: var(--card-height);
    position: absolute;
    margin: 0 auto;
    -webkit-transition: inherit;
    transition: inherit;
    -webkit-filter: brightness(.9);
            filter: brightness(.9);
  }
  
  @media only screen and (max-width:900px)
    {
  
  #home-drag-carousel ul li {
      min-width: 200px
  }
    }
  
  li.highlight {
    -webkit-filter: brightness(1);
            filter: brightness(1)
  }

  #home-drag-carousel ul li img{
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }

  #home-drag-carousel ul li a
  {
    width: 100%;
    height: 100%;
  }
  .card-controller > *
  {
    cursor: pointer;
    position:absolute;
    top: 50%;
    width: 60px;
    height: 60px;
    z-index: 10;
  }

  .card-controller .left
  {
    left: -15px;
    background: url(`../../../images/brand-arrow-left.svg`);
    background-repeat: no-repeat;
    background-size: cover;
  }

  
  .card-controller .right
  {
    right: -15px;
    background: url(`../../../images/brand-arrow-right.svg`);
    background-repeat: no-repeat;
    background-size: cover;
  }

  .background-kale  #title-text, .background-kale #tag-text 
  {
    color: #FAF5EB;
    color: var(--color-white, #FAF5EB);
  }
  
  #brand-header {
    padding: 50px 0px 40px 0px;
  
  }
  
  @media (min-width: 62rem) {
  
  #brand-header {
      padding: 70px 0px 40px 0px
  
  }
    }
  
  @media (max-width: 47.9375rem) {
  
  #brand-header {
      padding: 50px 0px 0px 0px
  
  }
    }
  
  #brand-header #tag-text .component-content {
        font-family: var(--ff-body);
        font-size: 10px;
        font-style: normal;
        font-weight: 500;
        line-height: normal;
        text-transform: uppercase;
        text-align: center;
        padding-bottom: 5px;
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        border-bottom: 4px solid var(--brand-color-1);
        margin: auto;
      }
  
  @media (min-width: 62rem) {
  
  #brand-header #tag-text .component-content {
          font-size: 15px;
          padding-bottom: 4px
      }
        }
  
  #brand-header #title-text .component-content {
        text-align: center;
        /* M-H1 */
        font-family: var(--ff-body);
        font-size: 39px;
        font-style: normal;
        font-weight: 500;
        line-height: 110%;
        margin-top: 15px;
      }
  
  /* 42.9px */
  
  @media (min-width: 62rem) {
  
  #brand-header #title-text .component-content {
          font-size: 54px;
          margin-top: 20px
      }
        }
  
  #brand-header #title-text .component-content em {
          color: #55BD6B;
          color: var(--brand-color-1, #55BD6B);
          /* M-H1-Serif */
          font-family: var(--ff-headings);
          font-size: 41px;
          font-style: normal;
          line-height: 110%;
        }
  
  @media (min-width: 62rem) {
  
  #brand-header #title-text .component-content em {
            font-size: 56px
        }
          }

  #brand-drag-carousel #home-drag-carousel
  {
    margin-top: 0rem;
    margin-bottom: 0rem;
  }

  @media only screen and (min-width:900px)
    {

  #brand-drag-carousel #home-drag-carousel
  {
      margin-top: 70px;
      margin-bottom: 70px
  }
    }

  #upfield-homepage-banner #brand-header #title-text .component-content
  {
    font-size: 39px;

  }

  @media only screen and (min-width:900px)
    {

    }


  @media only screen and (min-width: 1440px)
    {


  #home-drag-carousel
  {
      max-width: 1440px;
      margin-left: auto;
      margin-right: auto
  }
    }


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

  .header.visible {
    visibility: visible;
  }

  .header.scroll-away {
    position: absolute;
  }

  .header.fixed {
    position: fixed;
  }

  .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% !important;
    }

  @media (max-width: 74.9375rem) {
      .header.header-logo-left .navigation.anime-config {
        top: 0;
      }
    }

  .header .navigation {
    padding: 0;
  }

  @media (max-width: 74.9375rem) {
      .header .navigation.anime-config {
        position: absolute;
      }
          .header .navigation.anime-config nav a {
            opacity: 0;
            -webkit-transition: opacity var(--transition-timing-slow);
            transition: opacity var(--transition-timing-slow);
          }

      .header .navigation.hoz {
        -webkit-transition: width var(--transition-timing-slow);
        transition: width var(--transition-timing-slow);
        height: calc(100vh - var(--header-height-mobile));
        width: 0;
      }
    }

  @media (max-width: 74.9375rem) {
        .header .navigation.is-open.hoz {
          width: 100%;
        }
            .header .navigation.is-open.anime-config nav a {
              opacity: 1;
            }
      }

  .header .navigation nav a {
        display: inline-block !important;
        font-weight: var(--fw-navigation);
      }

  @media (max-width: 74.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-navigation-mobile);
        }
      }

  .header .navigation .meta-navigation-mobile ul {
        margin-top: var(--s-l);
      }

  @media (max-width: 74.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-left: var(--s-xl)
    }

        .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);
        }
      }

  .header #nav-search > .component-content {
    position: relative;
  }

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

.email-validation-error {
    color: var(--color-form-error-message);
    font-size: 16px;
    margin-bottom: 0;
}
.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);
  border-width: var(--navigation-bar-border-width);
  border-style: var(--navigation-bar-border-style);
  border-color: var(--navigation-bar-border-color);
  -webkit-box-shadow: var(--navigation-bar-shadow);
          box-shadow: var(--navigation-bar-shadow);
}

  @media (min-width: 75rem) {.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%
}
  }

  .header-logo-center .header-nav-icon {
    top: 0;
    -webkit-transform: none;
            transform: none;
    z-index: 201;
    height: var(--header-height-mobile);
  }

  @media (min-width: 75rem) {

  .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;
    max-width: 100%;
  }

  .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: 75rem) {

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

  @media (min-width: 75rem) {

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

  @media (max-width: 74.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(--mobile-menu-bg-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: left;
      -webkit-transition: height var(--transition-timing-slow);
      transition: height var(--transition-timing-slow);
      height: 0;
      z-index: 0;
      overflow: auto
  }

      [dir='rtl'] .header-logo-center .navigation {
        text-align: right;
      }

      .header-logo-center .navigation > .component-content > nav,
      .header-logo-center .navigation > .meta-navigation-mobile > ul {
        display: none;
      }
    }

  @media (min-width: 75rem) {

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

  @media (max-width: 74.9375rem) {
        .header-logo-center .navigation.show > .component-content > nav,
        .header-logo-center .navigation.show > .meta-navigation-mobile > ul {
          display: block;
        }
      }

  @media (max-width: 74.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: 75rem) {

  .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 ul li.level1 > .navigation-title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin: 0 20px;
          }

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

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

        .header-logo-center .navigation a::after {
          content: '';
          width: 100%;
          height: 3px;
          background-color: var(--primary-color);
          position: absolute;
          bottom: 2px;
          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: 75rem) {
        .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%);
        }

        .header-logo-center .header-bottom.has-centered-logo .navigation li.level1 {
          
          /* base width of all li items */          
          -webkit-box-flex: 0;          
              -ms-flex: 0 0 calc(25% - (var(--logo-width-desktop) / 4));          
                  flex: 0 0 calc(25% - (var(--logo-width-desktop) / 4));
        }

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

          /* Giving z-index for item after logo*/
          .header-logo-center .header-bottom.has-centered-logo .navigation li.level1:first-child:nth-last-of-type(3) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li.level1:first-child:nth-last-of-type(4) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li.level1:first-child:nth-last-of-type(5) ~ li:nth-of-type(4),
          .header-logo-center .header-bottom.has-centered-logo .navigation li.level1:first-child:nth-last-of-type(6) ~ li:nth-of-type(4),
          .header-logo-center .header-bottom.has-centered-logo .navigation li.level1:first-child:nth-last-of-type(n + 7) ~ li:nth-of-type(5) {
            z-index: 1001;
          }

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

          /* if 5 or more items, decrease padding and font size */
            .header-logo-center .header-bottom.has-centered-logo .navigation li.level1:first-child:nth-last-of-type(n + 5) a, .header-logo-center .header-bottom.has-centered-logo .navigation li.level1: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.level1:first-child:nth-last-of-type(n + 9) ~ li:nth-of-type(n + 9) {
            display: none;
          }
      }

  .header-logo-center .submenu.active ul li a::after {
            -webkit-transform: scaleX(0);
                    transform: scaleX(0);
          }

  .header-logo-center .submenu div span {
        background: url(`../../../Images/chevron.svg`) no-repeat;
        display: inline-block;
        height: 20px;
        width: 20px;
        float: right;
        margin-top: 20px;
        margin-right: 30px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        -webkit-transform-origin: 20% 40%;
                transform-origin: 20% 40%;
      }

  @media (max-width: 74.9375rem) {

  [dir='rtl'] .header-logo-center .submenu div span {
            float: left;
            margin-left: 25px;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
        }
          }

  @media (min-width: 75rem) {

  .header-logo-center .submenu div span {
          width: 19px;
          height: 25px;
          margin: var(--s-xs) 0;
          padding: var(--s-s) 2px;
          background: none;
          cursor: pointer
      }

          .header-logo-center .submenu div span::before {
            content: "";
            width: 10px;
            height: 10px;
            display: block;
            border-style: solid;
            border-width: 0 2px 2px 0;
            border-color: var(--header-text-color);
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transform-origin: 124% 60%;
                    transform-origin: 124% 60%;
          }

            [dir='rtl'] .header-logo-center .submenu div span::before {
              -webkit-transform-origin: 90% 10%;
                      transform-origin: 90% 10%;
            }
        }

  .header-logo-center .submenu div span.chevron {
          -webkit-filter: var(--filter-chevron-color);
                  filter: var(--filter-chevron-color);
        }

  @media (min-width: 75rem) {

  .header-logo-center .submenu div span.chevron {
            -webkit-filter: none;
                    filter: none
        }
          }

  @media (max-width: 74.9375rem) {

  .header-logo-center .submenu div span.expanded {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg)
      }
        }

  @media (min-width: 75rem) {
        .header-logo-center .submenu:hover ul,.header-logo-center .submenu:focus ul{
          display:block;
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
        }
    }

  .header-logo-center .submenu ul.show {
      max-height: 1000px;
      -webkit-transition: max-height 900ms ease-in-out;
      transition: max-height 900ms ease-in-out;
    }

  @media (max-width: 74.9375rem) {

  .header-logo-center .submenu ul.show li {
          display: block
      }
        }

  @media (min-width: 75rem) {

  .header-logo-center .submenu ul.focus {
        display: block
    }
      }

  .header-logo-center .submenu ul {
      margin: 0 var(--s-l) !important;
      display: block;
      max-height: 0;
      overflow: hidden;
      -webkit-transition: max-height 100ms ease-in-out;
      transition: max-height 100ms ease-in-out;
    }

  [dir='rtl'] .header-logo-center .submenu ul {
        margin-right: 15px;
        text-align: right;
      }

  @media (min-width: 75rem) {

  .header-logo-center .submenu ul {
        position: absolute;
        display: none;
        max-height: none;
        max-height: initial;
        max-width: 230px;
        -webkit-box-shadow: var(--box-shadow-subtle);
                box-shadow: var(--box-shadow-subtle);
        padding: 20px 24px;
        height: auto;
        margin-top: -16px;
        background: var(--color-white);
        text-align: left
    }
      }

  @media (min-width: 75rem) {

  .header-logo-center .submenu ul li:first-child {
          margin-top: 0
       }
        }

  .header-logo-center .submenu ul li {
        padding: 0;
        margin-right: 0 !important;
      }

  @media (max-width: 74.9375rem) {

  .header-logo-center .submenu ul li {
          display: none
      }
        }

  @media (min-width: 75rem) {

  .header-logo-center .submenu ul li {
          padding: 0;
          margin-top:16px
      }
        }

  .header-logo-center .submenu ul li div a {
            margin-left: 0 !important;
            padding: 0;
            font-size: var(--fs-submenu);
            text-transform: none;
            font-family: var(--ff-body);
          }

  .header-logo-center .submenu ul li div a::after {
              height: 1px;
            }

  .header-logo-center .submenu ul li div a:hover::after {
              -webkit-transform: scaleX(1);
                      transform: scaleX(1);
              bottom: 2px;
            }

  .header-logo-center #nav-search {
    position: absolute;
    top: 0;
    right: calc(var(--s-xxxl) + var(--s-m));
    z-index: 201;
    height: var(--header-height-mobile);
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }

  [dir='rtl'] .header-logo-center #nav-search {
      left: calc(var(--s-xxxl) + var(--s-m));
      right: unset;
    }

  @media (min-width: 75rem) {

  .header-logo-center #nav-search {
      right: var(--s-l);
      height: 100%
  }

      [dir='rtl'] .header-logo-center #nav-search {
        left: var(--s-l);
        right: unset;
      }
    }

  .header-logo-center #nav-search .component-content {
      display: block;
      height: 24px;
    }

  [dir='rtl'] .header-logo-center #nav-search a#siteSearchIcon > img {
          -webkit-transform: scaleX(-1);
                  transform: scaleX(-1);
        }

#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;
  border-width: var(--navigation-bar-border-width);
  border-style: var(--navigation-bar-border-style);
  border-color: var(--navigation-bar-border-color);
  -webkit-box-shadow: var(--navigation-bar-shadow);
          box-shadow: var(--navigation-bar-shadow);
}

  @media (min-width: 48rem) {.header-logo-left {
    min-height: var(--header-height-tablet)
}
  }

  @media (min-width: 75rem) {.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: 75rem) {

  .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: 74.9375rem) {

  .header-logo-left.header-logo-left-with-submenu .navigation {
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        text-align: left
    }
        [dir='rtl'] .header-logo-left.header-logo-left-with-submenu .navigation {
          text-align: right;
        }
      }

  @media (max-width: 74.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(--mobile-menu-bg-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
  }

      .header-logo-left .navigation > .component-content > nav,
      .header-logo-left .navigation > .meta-navigation-mobile > ul {
        display: none;
      }
    }

  @media (max-width: 74.9375rem) {
        .header-logo-left .navigation.show > .component-content > nav,
        .header-logo-left .navigation.show > .meta-navigation-mobile > ul {
          display: block;
        }
      }

  .header-logo-left .navigation nav a {
        font-family: var(--ff-navigation);
        display: inline-block !important;
      }

  @media (min-width: 75rem) {

  .header-logo-left .navigation nav a {
          margin: 0 2px !important
      }
        }

  @media (max-width: 74.9375rem) {

  .header-logo-left .navigation nav {
        width: 100vw;
        margin-left: var(--s-xl)
    }

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

  .header-logo-left .navigation nav ul {
        margin: var(--s-l) 0;
      }

  @media (min-width: 48rem) {

  .header-logo-left .navigation nav ul {
          margin: 0
      }
        }

  @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: 75rem) {
      .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 ul li.level1 > .navigation-title {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: center;
              -ms-flex-align: center;
                  align-items: center;
          margin: 0 20px;
        }

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

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

        .header-logo-left .navigation a::after {
          content: '';
          width: 100%;
          height: 3px;
          background-color: var(--header-text-color);
          position: absolute;
          bottom: 1px;
          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);
        }
    }

  .header-logo-left .submenu.active ul li a::after {
            -webkit-transform: scaleX(0);
                    transform: scaleX(0);
          }

  .header-logo-left .submenu div span {
        background: url(`../../../Images/chevron.svg`) no-repeat;
        display: inline-block;
        height: 20px;
        width: 20px;
        float: right;
        margin-top: 25px;
        margin-right: 60px;
        -webkit-transition: all 0.2s;
        transition: all 0.2s;
        -webkit-transform-origin: 20% 40%;
                transform-origin: 20% 40%;
      }

  @media (max-width: 74.9375rem) {

  [dir='rtl'] .header-logo-left .submenu div span {
            float: left;
            margin-left: 25px;
            -webkit-transform: rotate(180deg);
                    transform: rotate(180deg)
        }
          }

  @media (min-width: 75rem) {

  .header-logo-left .submenu div span {
          width: 19px;
          height: 25px;
          margin: var(--s-xs) 0;
          padding: var(--s-s) 2px;
          background: none;
          cursor: pointer
      }

          .header-logo-left .submenu div span::before {
            content: "";
            width: 10px;
            height: 10px;
            display: block;
            border-style: solid;
            border-width: 0 2px 2px 0;
            border-color: var(--header-text-color);
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
            -webkit-transform-origin: 124% 60%;
                    transform-origin: 124% 60%;
          }

            [dir='rtl'] .header-logo-left .submenu div span::before {
              -webkit-transform-origin: 90% 10%;
                      transform-origin: 90% 10%;
            }
        }

  .header-logo-left .submenu div span.chevron {
          -webkit-filter: var(--filter-chevron-color);
                  filter: var(--filter-chevron-color);
        }

  @media (min-width: 75rem) {

  .header-logo-left .submenu div span.chevron {
            -webkit-filter: none;
                    filter: none
        }
          }

  @media (max-width: 74.9375rem) {

  .header-logo-left .submenu div span.expanded {
          -webkit-transform: rotate(90deg);
                  transform: rotate(90deg)
      }
        }

  @media (min-width: 75rem) {
        .header-logo-left .submenu:hover ul,.header-logo-left .submenu:focus ul{
          display:block;
          -webkit-transition: all .3s ease;
          transition: all .3s ease;
        }
    }

  .header-logo-left .submenu ul.show {
      max-height: 1000px;
      -webkit-transition: max-height 900ms ease-in-out;
      transition: max-height 900ms ease-in-out;
    }

  @media (max-width: 74.9375rem) {

  .header-logo-left .submenu ul.show li {
          display: block
      }
        }

  @media (min-width: 75rem) {

  .header-logo-left .submenu ul.focus {
        display: block
    }
      }

  .header-logo-left .submenu ul {
      margin: 0 var(--s-l) !important;
      display: block;
      max-height: 0;
      height: auto !important;
      overflow: hidden;
      -webkit-transition: max-height 100ms ease-in-out;
      transition: max-height 100ms ease-in-out;
    }

  [dir='rtl'] .header-logo-left .submenu ul {
        margin-right: 15px;
      }

  @media (min-width: 75rem) {

  .header-logo-left .submenu ul {
        position: absolute;
        display: none;
        max-height: none;
        max-height: initial;
        max-width: 230px;
        -webkit-box-shadow: var(--box-shadow-subtle);
                box-shadow: var(--box-shadow-subtle);
        padding: 20px 24px;
        height: auto;
        margin-top: -16px;
        background: var(--color-white)
    }
      }

  @media (min-width: 75rem) {

  .header-logo-left .submenu ul li:first-child {
          margin-top: 0
       }
        }

  .header-logo-left .submenu ul li {
        padding: 0;
      }

  @media (max-width: 74.9375rem) {

  .header-logo-left .submenu ul li {
          display: none
      }
        }

  @media (min-width: 75rem) {

  .header-logo-left .submenu ul li {
          padding: 0;
          margin-top:16px
      }
        }

  .header-logo-left .submenu ul li div a {
            margin-left: 0 !important;
            padding: 0;
            font-size: var(--fs-submenu);
            text-transform: none;
            font-family: var(--ff-body);
          }

  .header-logo-left .submenu ul li div a::after {
              height: 1px;
            }

  .header-logo-left .submenu ul li div a:hover::after {
              -webkit-transform: scaleX(1);
                      transform: scaleX(1);
            }

#header.has-moved-up .header-logo-left.dynamic {
    -webkit-transform: translate3d(0px, -170px, 0px);
            transform: translate3d(0px, -170px, 0px);
  }
: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-mobile) + 40px);
    padding-top: calc(var(--header-height-mobile) + var(--meta-header-height))
}
  }

@media (min-width: 75rem) {

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(--meta-header-link-color);
      }

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

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

[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)
  }
    }
@media (min-width: 62rem) {
.has-meta-nav .menu-drawer {
      top: calc(var(--header-height-desktop) + 40px);
      top: calc(var(--header-height-desktop) + 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: var(--footer-color);
  color: var(--footer-text-color);
  font-size: var(--fs-footer-text);
  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);
    font-family: var(--ff-body);
  }

  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;
          -webkit-filter: var(--filter-footer-social-icon-color);
                  filter: var(--filter-footer-social-icon-color);
        }

  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);
            }

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

  [dir="rtl"] footer .social-icons-link-list li a.linkedin::before {
              left: 60%;
            }

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

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

  footer .social-icons-link-list li a.tiktok:hover::after {
              background-color: var(--color-tiktok);
            }
.image-list-logo#footer-social-links ul{
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start; 
    -webkit-box-pack: start; 
        -ms-flex-pack: start; 
            justify-content: flex-start;
  }
@media (max-width: 61.9375rem) {
.image-list-logo#footer-social-links ul{
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center
  }
    }
.image-list-logo#footer-social-links li {
    display: inline-block;
    -webkit-box-flex: 0;
        -ms-flex: 0 1 8%;
            flex: 0 1 8%;
    margin: 0;
    margin-right: 5px;
  }
@media (max-width: 61.9375rem) {
.image-list-logo#footer-social-links li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0  8%;
              flex: 0 0  8%
  }
    }
.image-list-logo#footer-social-links li a {
      position: relative;
      overflow: hidden;
      width: var(--icon-size-m);
      height: var(--icon-size-m);
      display: inline-block;
      white-space: nowrap;
      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;
    }
.image-list-logo#footer-social-links li a:hover img{
                  -webkit-transform: scale(1.05);
                          transform: scale(1.05);
              }
.image-list-logo#footer-social-links li a img{
          -webkit-transition: 0.3s all;
          transition: 0.3s all;
          width: 16px;
      }
.image-list-logo#footer-social-links 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);
      }
.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-mobile) + var(--notification-bar-height))
    }

        body.has-notification-bar-top.show-notification-bar.has-meta-nav { 
          padding-top: calc(var(--header-height-mobile) + 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));
          }
      }

  @media (min-width: 75rem) {

  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));
        }
      }

.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(--notification-bar-color);
  overflow: hidden;
  z-index: 2000;
  -webkit-box-pack: var(--notification-bar-justify-content);
      -ms-flex-pack: var(--notification-bar-justify-content);
          justify-content: var(--notification-bar-justify-content); 
}

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

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

.notification-bar .notification-content {
    padding: 1rem;
    line-height: 1.5rem;
    color: var(--notification-content-color);
    font-size: var(--fs-notification-content);
    font-family: var(--ff-notification-content);
  }

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

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

.notification-bar .btn-close {
    margin: 0 1rem;
    padding: 0;
    color: var(--text-color);
    font-weight: bold;
    position: absolute;
    right: 0;
    font-size: var(--fs-xl);
    line-height: var(--fs-xl);
    background-image: none;
    border: none;
    -webkit-box-shadow: none;
            box-shadow: none;
  }

.notification-bar .btn-close:hover, 
    .notification-bar .btn-close:focus {
      color: var(--text-color);
      background-color: transparent;
    }

.notification-bar .notification-button .btn{
    background-color: var(--notification-bar-secondary-button-color);
    }

.notification-bar .notification-button .btn::before{
        border-top-color:var(--notification-bar-secondary-button-color);
      }

.notification-bar .notification-button .btn::after{
        border-color:var(--notification-bar-secondary-button-color);
        border-right-color: transparent;
      }
body.has-notification-bar-top.show-notification-bar .global-header {
  top: calc(var(--notification-bar-height));
}
body.has-notification-bar-top.show-notification-bar.has-globalHeader-nav{
  padding-top: calc(var(--global-header-height-mobile) + var(--notification-bar-height) + var(--header-with-nav-mobile));
}
@media (min-width: 62rem) {
body.has-notification-bar-top.show-notification-bar.has-globalHeader-nav{
   padding-top: calc(var(--global-header-height-desktop) + var(--notification-bar-height) + var(--header-with-nav-desktop))
}
  }
body.has-globalHeader-nav{
  padding-top: calc(var(--global-header-height-mobile) + var(--header-with-nav-mobile));
}
@media (min-width: 62rem) {
body.has-globalHeader-nav{
    padding-top: calc(var(--global-header-height-desktop) + var(--header-with-nav-desktop))
}
  }
.skip-to-main-content {
    position: absolute;
    top: -20em;
    width: 100%;
    z-index: 9999;
    text-align: center;
}

    .skip-to-main-content .skip-link {
        background-color: var(--color-white);
        padding: var(--s-m);
        position: absolute;
        left: 0;
        right: 0;
    }

    .skip-to-main-content .skip-link:active,
        .skip-to-main-content .skip-link:focus {
            -webkit-box-shadow: var(--box-shadow-subtle);
                    box-shadow: var(--box-shadow-subtle);
            text-decoration: none;
            top: 20em;
        }
.menu-drawer {
    left: 0;
    right: 0;
    z-index: 1;
    width: 64px;
    height: 64px;
    margin: auto;
    display: none;
    cursor: pointer;    
    position: fixed;
    padding-top: 37px;
    border-radius: 50%;
    visibility: visible;
    -webkit-transform: translateY(-50%);
            transform: translateY(-50%);
    top: var(--header-height-desktop);
    background-color: var(--primary-color);
}
    @media (min-width: 75rem) {.menu-drawer {
        display: block
}
    }
    .menu-drawer .hamburger {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }
    .menu-drawer .hamburger span {
            width: 24px;
            height: 2px;
            margin: 2px;
            -ms-flex-item-align: center;
                align-self: center;
            background-color: white;
        }

@media (min-width: 75rem) {

body.has-menu-drawer:not(.on-page-editor) {
        padding: 0
}
        body.has-menu-drawer:not(.on-page-editor) header {
            z-index: 1;
            opacity: 0;
            position: relative;
            pointer-events: none;
        }
            body.has-menu-drawer:not(.on-page-editor) header.menu-drawer-loaded {
                opacity: 1;
                pointer-events: all;
            }
        body.has-menu-drawer:not(.on-page-editor) .notification-bar {
            display: none;
        }
    }

.invisible {
    visibility: hidden!important;
}

.invisible .header, 
    .invisible .meta-header {
        visibility: hidden;
    }
.global-header {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  background-color: var(--header-color);
  visibility: var(--header-visibility);
  z-index: 1000;
  border-width: var(--navigation-bar-border-width);
  border-style: var(--navigation-bar-border-style);
  border-color: var(--navigation-bar-border-color);
  -webkit-box-shadow: var(--navigation-bar-shadow);
  box-shadow: var(--navigation-bar-shadow);
}

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

  .global-header.visible {
      visibility: visible;
  }

  .global-header.scroll-away {
      position: absolute;
  }

  .global-header.fixed {
      position: fixed;
  }

  @media (min-width: 75rem) {.global-header {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    width: 100%
}
  }

  @media (min-width: 48rem){

  .global-header.is-scrolled-down .header-with-icons{
        min-height: 70px
    }
      }

  .global-header.is-scrolled-down .header-with-icons .file-type-icon-media-link{
        max-width: 200px;
        max-height: 80px;
      }

  .global-header.is-scrolled-down .header-with-icons .file-type-icon-media-link img{
          max-height: 60px;
        }

  @media (min-width: 48rem){

  .global-header.is-scrolled-down .header-with-icons .file-type-icon-media-link img{
          min-height: 60px
        }
          }

  @media (min-width: 48rem){

  .global-header.is-scrolled-down .header-with-icons #global-icons{
          margin: 12px 0px

      }
        }

  @media (min-width: 48rem) and (max-width: 74.9375rem){

  .global-header.is-scrolled-down #global-nav-search .component.plain-html{
          top: calc(var(--fs-xxxl)* 2.2)
      }
        }

  .global-header .header-with-icons {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    /* background-color: var(--brand-color-1); */
    -webkit-transition: top var(--notification-speed);
    transition: top var(--notification-speed);
    min-height: var(--global-header-height-mobile);
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
  }

  @media (min-width: 48rem){

  .global-header .header-with-icons {
      min-height: var(--global-header-height-desktop)
  }
    }

  .global-header .header-with-icons .file-type-icon-media-link {
        position: absolute;
        top: 0px;
        left: 20px;
        z-index: 1000;
    }

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

  @media (min-width: 75rem) {

  .global-header .header-with-icons .file-type-icon-media-link {
          max-width: var(--logo-width-desktop);
          left: 50px;
          max-height: var(--header-height-desktop);
          -webkit-transition: all .5s ease-in-out;
          transition: all .5s ease-in-out
    }

          [dir="rtl"] .global-header .header-with-icons .file-type-icon-media-link {
            left: auto;
            right: 50px;
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
          }
        }

  @media (min-width: 48rem) {

  .global-header .header-with-icons .file-type-icon-media-link img {
            width: auto;
            max-height: 80px;
            min-height: 80px;
            margin-bottom: 15px;
            margin-top: 15px;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out
        }
          }

  @media (max-width: 47.9375rem) {

  .global-header .header-with-icons .file-type-icon-media-link img {
            max-width: var(--logo-width-global);
            max-height: 60px;
            margin: 12px 0px;
            width: auto;
            height: var(--logo-height-m)
        }

            [dir='rtl'] .global-header .header-with-icons .file-type-icon-media-link img{
              margin-right: 15px;
            }
          }

  .global-header .header-with-nav{
    min-height: var(--header-with-nav-mobile);
  }

  @media (min-width: 48rem){

  .global-header .header-with-nav{
      min-height: var(--header-with-nav-desktop)
  }
    }

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

  [dir='rtl'] .global-header .nav-icon.is-open{
      right: 50%;
    }

  .global-header .header-with-nav .navigation {
    padding: 0;
  }

  @media (max-width: 74.9375rem) {
      .global-header .header-with-nav .navigation.anime-config {
        position: absolute;
        top: 30px;
      }
          .global-header .header-with-nav .navigation.anime-config nav a {
            opacity: 0;
            -webkit-transition: opacity var(--transition-timing-slow);
            transition: opacity var(--transition-timing-slow);
          }

      .global-header .header-with-nav .navigation.hoz {
        -webkit-transition: width var(--transition-timing-slow);
        transition: width var(--transition-timing-slow);
        height: calc(100vh - var(--header-height-mobile));
        width: 0;
      }
    }

  @media (max-width: 74.9375rem) {
        .global-header .header-with-nav .navigation.is-open.hoz {
          width: 100%;
        }
            .global-header .header-with-nav .navigation.is-open.anime-config nav a {
              opacity: 1;
            }
      }

  .global-header .header-with-nav .navigation nav a {
        display: inline-block !important;
        font-weight: var(--ff-headings);
        text-transform: uppercase;
      }

  @media (max-width: 74.9375rem) {

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

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

#global-icons {
    position: relative;
    max-width: inherit;
    margin-top: 3px;
    -webkit-transition: all .5s ease-in-out;
    transition: all .5s ease-in-out;
    margin-bottom: 0px;
}
    @media (min-width: 48rem){#global-icons {
        margin: 15px 0px;
        min-height: 65px
}
    }
    #global-icons ul {
        padding-top: 15px;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        margin-right: 20px;
    }
    [dir='rtl'] #global-icons ul {
            margin-left: 20px;
        }
    @media (min-width: 48rem) {
    #global-icons ul {
            margin-right: 50px;
            padding-top: 10px
    }
        }
    #global-icons li {
        -webkit-box-flex: 0;
            -ms-flex: 0 1 5%;
                flex: 0 1 5%;
        margin: 10px;
    }
    @media (min-width: 48rem) {
    #global-icons li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 10%;
                    flex: 0 0 10%;
            margin: 15px
    }
        }
    #global-icons img {
        max-width: 25px;
        max-height: 25px;
    }
    @media (min-width: 48rem) {
    #global-icons img {
            max-width: 30px;
            max-height: 30px
    }
        }
#global-nav-search > .component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        background-color: var(--global-header-secondary-bg-color);
        /* border-bottom: 1px solid var(--brand-color-1); */
    }
    #global-nav-search .component.plain-html {
        height: 20px;
        width: 20px;
    }
    @media (max-width: 74.9375rem) {
        #global-nav-search .component.plain-html {
            position: absolute;
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
            top: calc(var(--fs-globhamicon)* 3.2);
            left: 23px;
            -webkit-transition: all .5s ease-in-out;
            transition: all .5s ease-in-out;
        }
            [dir='rtl'] #global-nav-search .component.plain-html {
                right: var(--fs-xl);
                left: unset;
            }
    }
    @media (min-width: 48rem) and (max-width: 74.9375rem) {
        #global-nav-search .component.plain-html {
            /* top: calc(var(--fs-xxxl)* 3.5); */
            top: calc(var(--fs-globhamicon)* 4.3);
            padding-top: 5px;
        }
    }
    @media (min-width: 75rem) {
        #global-nav-search .component.plain-html {
            display: none;
        }
    }
    @media (max-width: 74.9375rem) {
    #global-nav-search.header-with-nav .navigation {
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start;
          text-align: left
      }
          [dir='rtl'] #global-nav-search.header-with-nav .navigation {
            text-align: right;
          }
        }
    @media (max-width: 74.9375rem) {
    #global-nav-search .navigation {
        margin-top : 48px;
        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(--mobile-menu-bg-color);
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-transition: height var(--transition-timing-slow);
        transition: height var(--transition-timing-slow);
        height: 0;
        z-index: 0;
        overflow: auto;
        text-align: left
    }
        [dir='rtl'] #global-nav-search .navigation {
          text-align: right;
        }          
  
        #global-nav-search .navigation > .component-content > nav {
          display: none;
        }
      }
    @media (max-width: 74.9375rem) {
          #global-nav-search .navigation.show > .component-content > nav {
            display: block;
          }
        }
    #global-nav-search .navigation nav a {
          font-family: var(--ff-headings);
          display: inline-block !important;
        }
    @media (min-width: 75rem) {
    #global-nav-search .navigation nav a {
            margin: 0 2px !important
        }
          }
    @media (max-width: 74.9375rem) {
    #global-nav-search .navigation nav {
          width: 100vw;
          padding-left: 20px;
          padding-right: 36px
      }
  
          #global-nav-search .navigation nav a {
            color: var(--header-text-color-mobile);
            padding: var(--s-m) var(--s);
            padding-left: 0px;
            display: block;
            font-size: var(--fs-global-navigation-mobile);
          }
        }
    #global-nav-search .navigation nav ul {
          margin: 24px 0;
        }
    @media (min-width: 48rem) {
    #global-nav-search .navigation nav ul {
            margin: 0
        }
          }
    @media (max-width: 74.9375rem) {
    #global-nav-search .navigation.is-open {
          height: calc(100vh - var(--header-height-mobile))
      }
        }
    #global-nav-search .navigation.is-open nav {
          /* margin: var(--s-xxxl) 0; */
          margin: 28px 0;
          opacity: 1;
        }
    #global-nav-search .navigation.is-open ul li:first-child {
          border-top: 1px solid var(--brand-color-3);
        }
    #global-nav-search .navigation.is-open ul li {
          border-bottom: 1px solid var(--brand-color-3);
        }
    #global-nav-search .navigation.is-open li .level2{
          border-bottom: none;
        }
    @media (min-width: 75rem) {
        #global-nav-search .navigation ul {
          padding-left: 31px;
          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;
        }
          [dir='rtl'] #global-nav-search .navigation ul {
            padding-right: 31px;
          } 

          #global-nav-search .navigation ul li.level1 > .navigation-title {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin: 0 11px;
            border: none;
          }
  
        #global-nav-search .navigation a {
          position: relative;
          display: inline-block;
          text-decoration: none;
          margin: var(--s-l);
          color: var(--header-text-color);
          font-family: var(--ff-navigation);
          font-size: var(--global-fs-navigation);
          line-height: 16px;
        }
  
          #global-nav-search .navigation a.current::after {
            content: '';
            width: 100%;
            height: 3px;
            background-color: var(--primary-color);
            position: absolute;
            bottom: 1px;
            left: 0;
            -webkit-transition: all var(--duration-m) var(--ease-in-out);
            transition: all var(--duration-m) var(--ease-in-out);
            -webkit-transform: scaleX(1);
                    transform: scaleX(1);
          }
  
          #global-nav-search .navigation a::after {
            display: none;
            content: '';
            width: 100%;
            height: 3px;
            background-color: var(--header-text-color);
            position: absolute;
            bottom: 1px;
            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);
          }
  
          #global-nav-search .navigation a:hover::after {
            -webkit-transform: scaleX(1);
                    transform: scaleX(1);
          }
          #global-nav-search .navigation .active a::after {
            -webkit-transform: scaleX(1);
                    transform: scaleX(1);
          }
      }
    #global-nav-search .navigation-title.field-navigationtitle  {
        border: none;
      }
    #global-nav-search .submenu.active ul li a::after {
              -webkit-transform: scaleX(0);
                      transform: scaleX(0);
            }
    #global-nav-search .submenu div span {
          background: url(`../../../Images/chevron.svg`) no-repeat;
          height: 20px;
          width: 20px;
          float: right;
          margin-top: 16px;
          -webkit-transition: all 0.2s;
          transition: all 0.2s;
          -webkit-transform-origin: 20% 40%;
                  transform-origin: 20% 40%;
        }
    @media (max-width: 74.9375rem) {
    [dir='rtl'] #global-nav-search .submenu div span {
              float: left;
              margin-left: 12px;
              -webkit-transform: rotate(180deg);
                      transform: rotate(180deg)
          }
            }
    @media (min-width: 62rem) {
    #global-nav-search .submenu div span {
            width: 20px;
            height: 20px;
            margin: var(--s-xs) 0;
            padding: var(--s-s) 2px;
            background: none;
            cursor: pointer
        }
            
            #global-nav-search .submenu div span::before {
              content: "";
              width: 10px;
              height: 10px;
              display: block;
              border-style: solid;
              border-width: 0 2px 2px 0;
              border-color: var(--header-text-color);
              -webkit-transform: rotate(-45deg);
                      transform: rotate(-45deg);
              -webkit-transform-origin: 124% 60%;
                      transform-origin: 124% 60%;
            }
  
              [dir='rtl'] #global-nav-search .submenu div span::before {
                -webkit-transform-origin: 90% 10%;
                        transform-origin: 90% 10%;
              } 
          }
    #global-nav-search .submenu div span.chevron {
            -webkit-filter: var(--filter-chevron-color);
                    filter: var(--filter-chevron-color);
          }
    @media (min-width: 75rem) {
    #global-nav-search .submenu div span.chevron {
              -webkit-filter: none;
                      filter: none;
              display: none
          }
            }
    #global-nav-search .submenu div span.chevron.expanded {
              -webkit-transform: rotate(90deg);
                      transform: rotate(90deg);
            }
    @media (min-width: 75rem) {
          #global-nav-search .submenu:hover ul,#global-nav-search .submenu:focus ul{
            display:block;
            -webkit-transition: all .3s ease;
            transition: all .3s ease;
          }
      }
    #global-nav-search .submenu ul.show {
        max-height: 1000px;
        -webkit-transition: max-height 900ms ease-in-out;
        transition: max-height 900ms ease-in-out;
      }
    @media (max-width: 74.9375rem) {
    #global-nav-search .submenu ul.show li {
            display: block
        }
          }
    @media (min-width: 75rem) {
    #global-nav-search .submenu ul.focus {
          display: block
      }
        }
    #global-nav-search .submenu ul {
        margin: 0 var(--s-l) !important;
        display: block;
        max-height: 0;
        height: auto !important;
        overflow: hidden;
        -webkit-transition: max-height 100ms ease-in-out;
        transition: max-height 100ms ease-in-out;
      }
    [dir='rtl'] #global-nav-search .submenu ul {
          margin-right: 15px;
        }
    @media (min-width: 75rem) {
    #global-nav-search .submenu ul {
          position: absolute;
          display: none;
          max-height: none;
          max-height: initial;
          max-width: 230px;
          -webkit-box-shadow: var(--box-shadow-subtle);
                  box-shadow: var(--box-shadow-subtle);
          padding: 20px 24px;
          height: auto;
          margin-top: -16px;
          background: var(--color-white)
      }
        }
    @media (min-width: 48rem) {
    #global-nav-search .submenu ul li:first-child {
            margin-top: 0
          }
          }
    #global-nav-search .submenu ul li {
          padding: 0;
        }
    @media (max-width: 74.9375rem) {
    #global-nav-search .submenu ul li {
            display: none
        }
          }
    @media (min-width: 75rem) {
    #global-nav-search .submenu ul li {
            padding: 0;
            margin-top:16px
        }
          }
    #global-nav-search .submenu ul li div a {
              margin-left: 0 !important;
              font-size: var(--global-fs-submenu);
              text-transform: uppercase;
              font-family: var(--ff-headings);
              color: #000;
              color: var(--heading-color, #000);
            }
    @media (max-width: 74.9375rem) {
    #global-nav-search .submenu ul li div a {
                color: var(--header-text-color-mobile)
            }
              }
    #global-nav-search .submenu ul li div a::after {
                height: 1px;
              }
    #global-nav-search .submenu ul li div a:hover::after {
                -webkit-transform: scaleX(1);
                        transform: scaleX(1);
              }
    #global-nav-search .search-box.search-box-with-icon {
      margin: 0px;
    }
    #global-nav-search .search-box.search-box-with-icon > .component-content{
          height: auto;
          top: 24px; 
          -webkit-box-shadow : none; 
                  box-shadow : none;
          width: var(--header-search-bar-mobile); 
      }
    [dir='rtl'] #global-nav-search .search-box.search-box-with-icon > .component-content {
            top: 28px;
          }
    @media (min-width: 62rem) {
    #global-nav-search .search-box.search-box-with-icon > .component-content{
            width: var(--header-search-bar-desktop);
            margin-right: 50px;
            max-width: calc((100%/1) - 30px) 
      }
            [dir='rtl'] #global-nav-search .search-box.search-box-with-icon > .component-content {
              margin-left: 50px;
              margin-right: auto;
            }
          }
    @media (min-width: 48rem) and (max-width: 74.9375rem){
    #global-nav-search .search-box.search-box-with-icon > .component-content{
            top: 26px 
      }
          }
    @media (min-width: 62rem){
    #global-nav-search .search-box.search-box-with-icon > .component-content{
            top: 28px 
      }
          }
    #global-nav-search .search-box.search-box-with-icon > .component-content > .search-box-button-with-redirect {
          padding: 0.8rem;
        }
    #global-nav-search .search-box.search-box-with-icon .search-box-input{
          padding: 0.6rem 3rem 0.6rem 1.25rem;
          border: none;
          font-family: var(--ff-headings);
          font-size: 17px;
          line-height: 28px;
          font-weight: 400;
          border-left: 1px solid #8A8A8A;
          border-right: 1px solid #8A8A8A;
          border-bottom: 1px solid transparent;
      }
    [dir='rtl'] #global-nav-search .search-box.search-box-with-icon .search-box-input {
            padding: 0.8125rem 0.875rem 0.8125rem 3rem;
          }
    @media (min-width: 62rem){
    #global-nav-search .search-box.search-box-with-icon .search-box-input{
            padding: 0.8125rem 3rem 0.8125rem 1.875rem
      }
          }


: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 .toggle-button::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 .toggle-button::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 .toggle-button::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-header .label {
      padding-right: 60px;
    }

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

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

.show-more .show-more-link,
    .show-more .show-less-link {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
        .show-more .show-more-link .btn::after, .show-more .show-less-link .btn::after {
            content: "";
            background: url(`../../../Images/chevron-up.svg`) no-repeat;
            position: absolute;
            width: 12px;
            height: 8px;
        }
    .show-more .show-more-link {
        display: block;
    }
    .show-more .show-more-link .btn::after {
            -webkit-transform: scaleY(-1);
                    transform: scaleY(-1);
        }
    .show-more .show-less-link {
        display: none;
    }
    .show-more .show-more-content {
        height: 0;
        opacity: 0;
        overflow: hidden;
        -webkit-transition: all var(--transition-timing-slow);
        transition: all var(--transition-timing-slow);
    }
    .show-more .show-more-content.expand {
            opacity: 1;
        }
    .show-more .align-btn-center .show-more-link,
        .show-more .align-btn-center .show-less-link { 
            margin: auto;
        }
    @media (min-width: 62rem) {
            .show-more .hide-btn-desktop .show-more-link,
            .show-more .hide-btn-desktop .show-less-link { 
                display: none !important;
            }
            .show-more .hide-btn-desktop .show-more-content {
                height: 100%;
                opacity: 1;
            }
        }
    .on-page-editor .show-more .show-more-link,
        .on-page-editor .show-more .show-less-link {
            display: block;           
        }
    .on-page-editor .show-more .show-more-content {
            height: auto;
            opacity: 1;
            overflow: auto;
        }
    @media (min-width: 62rem) {
                .on-page-editor .show-more .hide-btn-desktop .show-more-link,
                .on-page-editor .show-more .hide-btn-desktop .show-less-link { 
                    display: block !important;       
                }
                .on-page-editor .show-more .hide-btn-desktop .show-more-content {
                    height: auto;
                }
            }


.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
    }
      }

@media (min-width: 62rem) {.has-slider {
        position: relative
} /* Need to add double selector to increase specificity */
            .has-slider.has-slider ul {
                -ms-flex-wrap: nowrap !important;
                    flex-wrap: nowrap !important; /* Need to add important rule since this slider can be used across many components so to override those component specific styles */
                overflow: scroll !important;
                -webkit-box-pack: start !important;
                    -ms-flex-pack: start !important;
                        justify-content: flex-start !important;
                scrollbar-width: none;
            }
                .has-slider.has-slider ul::-webkit-scrollbar {
                    display: none;
                }
    }
    .has-slider .arrow-left,
    .has-slider .arrow-right {
        width: 32px;
        height: 32px;
        background-color: var(--color-white);
        position: absolute;
        bottom: 50%;
        z-index: 2;
        opacity: 0.8 !important; /* To override inline style added by plugin */
        -webkit-transform: translateY(50%) !important;
                transform: translateY(50%) !important;
        -webkit-box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
                box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.4);
        cursor: pointer;
        border-radius: 50%;
    }
    @media (max-width: 61.9375rem) {
    .has-slider .arrow-left,
    .has-slider .arrow-right {
            display: none
    }
        }
    .has-slider .arrow-left::before, .has-slider .arrow-right::before {
            content: "";
            width: 32px;
            height: 100%;
            display: block;
            background: url(`../../../Images/chevron-up.svg`) no-repeat;
            background-position: center;
        }
    .has-slider .arrow-left.disabled, .has-slider .arrow-right.disabled {
            /* cursor: not-allowed; */
        }
    .has-slider .arrow-left {
        left: 30px;
    }
    .has-slider .arrow-left::before {
            -webkit-transform: rotate(270deg);
                    transform: rotate(270deg);
        }
    .has-slider .arrow-right {
        right: 30px;
    }
    .has-slider .arrow-right::before {
            -webkit-transform: rotate(90deg);
                    transform: rotate(90deg);
        }
    .has-slider .bullets {
        text-align: center;
        padding: 0 var(--s-m) var(--s-m);
        display: none;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .has-slider .bullets .dot {
            width: 12px;
            height: 12px;
            border-radius: 50%;
            display: block;
            margin: var(--s-xs);
            background-color: var(--transparent);
            cursor: pointer;
            border: 1px solid var(--color-medium-dark-gray);
        }
    .has-slider .bullets .dot.active {
                background-color: var(--bullet-color);
                border: 0;
            }
    @media (min-width: 62rem) {
    .has-slider .bullets .dot:hover,
            .has-slider .bullets .dot:focus {
                    background-color: var(--bullet-color);
                    border: 0
            }
                }
    .has-slider.has-bullets .arrow-left,
        .has-slider.has-bullets .arrow-right {
            display: none;
        }
    .has-slider.has-bullets .bullets {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    .has-slider.has-bullets-and-arrows .bullets {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
    .has-slider.promo-list .bullets {
            padding: var(--s-m);
        }
    @media (max-width: 61.9375rem) {
    .has-slider.promo-list .bullets {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex
        }
            }
    .has-slider.promo-list .arrow-left,
        .has-slider.promo-list .arrow-right {
            -webkit-box-shadow: none;
                    box-shadow: none;
            background-color: var(--transparent);
            opacity: 1 !important;
        }
    .has-slider.promo-list .arrow-left::before, .has-slider.promo-list .arrow-right::before {
                -webkit-filter: var(--filter-primary-color);
                        filter: var(--filter-primary-color);
            }
    .has-slider.promo-list .arrow-left {
            left: -48px;
        }
    .has-slider.promo-list .arrow-left::before {
                -webkit-transform: rotate(270deg) scale(3.5);
                        transform: rotate(270deg) scale(3.5);
            }
    .has-slider.promo-list .arrow-right {
            right: -48px;
        }
    .has-slider.promo-list .arrow-right::before {
                -webkit-transform: rotate(90deg) scale(3.5);
                        transform: rotate(90deg) scale(3.5);
            }
    @media (max-width: 61.9375rem) {
    .has-slider.hide-bullets-on-mobile .bullets {
                display: none
        }
            }

.has-slider {
    position: relative;
}

.has-slider.promo-list ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            overflow: scroll;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            scrollbar-width: none;
        }

.has-slider.promo-list ul::-webkit-scrollbar {
                display: none;
            }

.has-slider.promo-list ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                padding: 0;
            }
.scrollbar {
    width: 100%;
    height: 5px;
    margin-bottom: var(--s);
    border-radius: 5px;
    background-color: var(--color-lighter-gray);
} 
       
    .scrollbar .thumb {
        height: 5px;
        width: 100px;
        display: block;
        border-radius: 5px;
        background-color: var(--primary-color);
    }

.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(--breadcrumb-text-color);
    }
  [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. */
  }

.manual-teaser-list-v2 > .component-content > h1, .manual-teaser-list-v2 > .component-content > h2, .manual-teaser-list-v2 > .component-content > h3, .manual-teaser-list-v2 > .component-content > h4, .manual-teaser-list-v2 > .component-content > h5, .manual-teaser-list-v2 > .component-content > h6 {
      padding: 0 15px;
      text-align: left;
      margin-bottom: var(--s-s);
    }

[dir='rtl'] .manual-teaser-list-v2 > .component-content > h1, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h2, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h3, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h4, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h5, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h6 {
        text-align: right;
      }

@media (min-width: 62rem) {

.manual-teaser-list-v2 > .component-content > h1, .manual-teaser-list-v2 > .component-content > h2, .manual-teaser-list-v2 > .component-content > h3, .manual-teaser-list-v2 > .component-content > h4, .manual-teaser-list-v2 > .component-content > h5, .manual-teaser-list-v2 > .component-content > h6 {
        text-align: center
    }
        [dir='rtl'] .manual-teaser-list-v2 > .component-content > h1, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h2, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h3, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h4, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h5, [dir='rtl'] .manual-teaser-list-v2 > .component-content > h6 {
          text-align: center;
        }
      }
.recipe-card-list > .component-content > h3 {
    text-align: center;
}
.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;
    }

.link-list.list-horizontal{
    margin-bottom: var(--s);
}
    .link-list.list-horizontal ul{
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    .link-list.list-horizontal ul li{
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            margin: 4px auto;
        }
    .link-list.list-horizontal ul li a.recipes-quick-link{
                padding: 0 35px 0 15px;
                position: relative;
                color: var(--color-black);
                line-height: 24px;
                display: -webkit-inline-box;
                display: -ms-inline-flexbox;
                display: inline-flex;
            }
    [dir='rtl'] .link-list.list-horizontal ul li a.recipes-quick-link{
                    padding: 0 15px 0 35px;
                }
    .link-list.list-horizontal ul li a.recipes-quick-link::after{
                    content: url(`../../../Images/arrow.svg`);
                    width: 24px;
                    height: 24px;
                    position: absolute;
                    -webkit-transform: scale(.03) scaleX(-1);
                            transform: scale(.03) scaleX(-1);
                    margin: -6px 0 0;
                    right: 0;
                    -webkit-filter: var(--filter-recipe-quick-links-color);
                            filter: var(--filter-recipe-quick-links-color);
                }
    [dir='rtl'] .link-list.list-horizontal ul li a.recipes-quick-link::after{
                        left: 0;
                        right: unset;
                        -webkit-transform: scale(.03);
                                transform: scale(.03);
                        margin: -6px 0 0 var(--m-s);
                    }
    .link-list.list-horizontal ul li a.recipes-quick-link:hover, .link-list.list-horizontal ul li a.recipes-quick-link:focus{
                    color: var(--link-color);                   
                }
    .link-list.list-horizontal ul li a.recipes-quick-link:hover::after,.link-list.list-horizontal ul li a.recipes-quick-link:focus::after{
                        -webkit-filter: invert(13%) sepia(98%) saturate(3043%) hue-rotate(237deg) 
                                brightness(87%) contrast(113%);
                                filter: invert(13%) sepia(98%) saturate(3043%) hue-rotate(237deg) 
                                brightness(87%) contrast(113%); /* To link color */
                    }
    .link-list.list-horizontal ul li a.btn{
                margin: 0 8px 8px;
            }
.horizontal-navigation h3 {
        /* font-size: var(--fs-h2-m);
        font-family : var(--ff-body); */
        line-height: var(--fs-xxl);
    }

        @media (min-width: 62rem){.horizontal-navigation h3 {
            /* font-size: var(--fs-xxxl);
            line-height: calc(var(--fs-m)*2); */
            padding-bottom: 15px
    }
        }

        @media (max-width: 35.9375rem) {.horizontal-navigation h3 {
            text-align: left;
            padding-left: 20px
    }
        }
    .horizontal-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;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
    @media (max-width: 47.9375rem) {
    .horizontal-navigation ul {
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        overflow: auto;
        -webkit-box-pack: left;
            -ms-flex-pack: left;
                justify-content: left;
        padding-left: 20px;
        scrollbar-width : thin
    }
        .horizontal-navigation ul::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        } 
      }
    .horizontal-navigation ul li {
        margin: var(--s-xs) var(--s-m) var(--s-m) 0;
      }
    .horizontal-navigation ul li a {
            white-space: nowrap;
        }
    .horizontal-navigation ul li a.is-restricted {
                width: 200px;
                overflow: hidden;
                text-overflow: ellipsis;
            }
    @media (max-width: 61.9375rem) {
    .horizontal-navigation ul li a.is-restricted {
                    width: 176px
            }
                }
    @media (max-width: 35.9375rem) {
    .horizontal-navigation ul li a.is-restricted {
                    width: 182px
            }
                }
  
  @media (max-width: 35.9375rem) {
  
  [dir='rtl'] .horizontal-navigation h3 {
            text-align: right
    }
        }
  
  [dir='rtl'] .horizontal-navigation ul {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }
  
  [dir='rtl'] .horizontal-navigation ul li {
        margin: 0 0 var(--s-m) var(--s-m);
      }
  
.title-link {
    max-height: calc(var(--s-xl)*2);
    line-height: 34px;
}

    @media (min-width: 62rem) {.title-link {
        margin-bottom: 8px
}
    }

    .title-link >.component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .title-link >.component-content h3 {
            /* font-size: 24px;
            font-weight: var(--fw-black);
            line-height: 34px; */
            margin-bottom: 8px;
        }

    @media (min-width: 62rem) {

    .title-link >.component-content h3 {
                /* font-size: 31px; */
        }
            }

    .title-link h2 {
        margin: 0;
    }

    .title-link ul {
        -ms-flex-item-align: end;
            align-self: flex-end;
    }

    /* padding: 0 0 var(--s-s) var(--s-m); */

    [dir="rtl"] .title-link .field-link {
            padding: 0 var(--s-s) var(--s-s) 0;
        }

    .title-link .field-link a.btn {
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
        }

    @media (max-width: 61.9375rem) {

    .title-link .field-link a.btn {
                /* font-size: var(--fs-xxs);
                font-family: var(--ff-content); */
                margin-bottom: 12px;
                font-weight: var(--fw-regular);
                padding: 0;
                color: var(--text-color);
                border: none;
                -webkit-transform: none;
                        transform: none;
                background: none;
                -webkit-box-shadow: none;
                        box-shadow: none;
                border-radius: 0;
                line-height: var(--lh-s);
                text-decoration: underline;
                text-underline-offset: 6px;
                -webkit-text-decoration-skip-ink: none;
                        text-decoration-skip-ink: none;
                text-decoration-thickness: 2px
        }

                .title-link .field-link a.btn:hover,
                .title-link .field-link a.btn:focus {
                    /* background: none; */
                    text-decoration-thickness: 3px;
                }

                .title-link .field-link a.btn::before {
                    content: "";
                    position: absolute;
                    z-index: -1;
                    top: 0;
                    left: 0;
                    right: 0;
                    bottom: 0;
                    background: var(--primary-color);
                    -webkit-transform: scale(0);
                    transform: scale(0);
                    -webkit-transition-property: -webkit-transform;
                    transition-property: -webkit-transform;
                    transition-property: transform;
                    transition-property: transform, -webkit-transform;
                    -webkit-transition-duration: 0.3s;
                    transition-duration: 0.3s;
                    -webkit-transition-timing-function: ease-out;
                    transition-timing-function: ease-out;
                    color: #000;
                    color: var(--btn-primary-color, #000);
                }
                .title-link .field-link a.btn:after{
                    display: none;
                }
            }
.title-link-btn {
    line-height: 34px;
}

    @media (min-width: 62rem){.title-link-btn {
        margin-bottom: 8px
}
    }

    .title-link-btn > .component-content {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    @media (max-width: 61.9375rem)
        {

    .title-link-btn > .component-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
    }
        }

    .title-link-btn > .component-content h2, .title-link-btn > .component-content h3{
            color:var(--color-black);
            margin-bottom: 8px;
            -webkit-box-flex: 3.1;
                -ms-flex: 3.1;
                    flex: 3.1;
        }

    @media (min-width: 48rem){

    .title-link-btn > .component-content h2, .title-link-btn > .component-content h3{
                line-height: 120%;
                -webkit-box-flex: 3;
                    -ms-flex: 3;
                        flex: 3
        }
            }

    .title-link-btn > .component-content h2 em,.title-link-btn > .component-content h3 em{
                color: var(--brand-color-1);
                font-family:var(--ff-headings);
                font-style: normal;

            
            }

    .title-link-btn h2 {
        margin: 0;
    }

    .title-link-btn ul {
        -ms-flex-item-align: end;
            align-self: flex-end;
        display:-webkit-box;
        display:-ms-flexbox;
        display:flex;
        -webkit-box-flex: 2.5;
            -ms-flex: 2.5;
                flex: 2.5;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
    }

    @media(max-width: 61.9375rem)
        {

    .title-link-btn ul {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1
    }
        }

    .title-link-btn ul li.item1{
            width: 48px;
            height: 48px;
            background-color:var(--brand-color-2);
            margin-right: 10px;
            margin-left: 10px;
            position: relative;
            cursor: pointer;
            opacity: 1;
        }

    @media (max-width: 61.9375rem)
            {

    .title-link-btn ul li.item1{
                display: none
        }
            }

    .title-link-btn ul li.item1::after
            {
                content: "";
                background:url(`../../../images/arrow-left.svg`) no-repeat;
                position: absolute;
                width: 100%;
                height: 100%;
            }

    .title-link-btn ul li.item1.disabled{
                opacity: 0.4;
                cursor: not-allowed;
             }

    .title-link-btn ul li.item2{
            width: 48px;
            height: 48px;
            background-color: var(--brand-color-2);
            position: relative;
            cursor: pointer;
            opacity: 1;


        }

    @media (max-width: 61.9375rem)
            {

    .title-link-btn ul li.item2{
                display: none


        }
            }

    .title-link-btn ul li.item2::after
            {
                content: "";
                background:url(`../../../Images/arrow-right.svg`) no-repeat;
                position: absolute;
                width: 100%;
                height: 100%;
            }

    .title-link-btn ul li.item2.disabled{
                opacity: 0.4;
                cursor: not-allowed;
             }

    .title-link-btn .field-link {
        padding: 0 0 var(--s-s) var(--s-m);
    }

    @media (max-width: 61.9375rem) {

    .title-link-btn .field-link {
            padding-bottom: 0px
    }
        }

    [dir="rtl"] .title-link-btn .field-link {
            padding: 0 var(--s-s) var(--s-s) 0;
        }

    .title-link-btn .field-link a.btn {
            width: -webkit-max-content;
            width: -moz-max-content;
            width: max-content;
            font-family: var(--ff-headings);
            color: var(--color-black);
            padding: 13px 20px 15px 20px;
            font-size: var(--fs-h6-d);
            border: none;
            font-weight: 500;
            margin-top: 0px !important;
            text-transform: inherit;
        }

    @media (max-width: 61.9375rem) {

    .title-link-btn .field-link a.btn {
                margin-bottom: 0px;
                padding: 0;
                -webkit-transform: none;
                        transform: none;
                background: none;
                -webkit-box-shadow: none;
                        box-shadow: none;
                border-radius: 0;
                font-size: 10px;
                line-height: 1.7;
                text-decoration: underline;
                text-underline-offset: 6px;
                -webkit-text-decoration-skip-ink: none;
                        text-decoration-skip-ink: none;
                text-decoration-thickness: 4px;
                -webkit-text-decoration-color: var(--brand-color-1);
                        text-decoration-color: var(--brand-color-1);
                min-width: 10px
        }

                .title-link-btn .field-link a.btn:hover
                {
                    color: var(--color-black) !important;
                }
            }

    .title-link-btn .field-link a.btn:hover
            {

                color: var(--color-white);
            }
.brand-label {
    position: relative;
    display: inline-block;
    color: var(--color-black);
    font-weight: var(--fw-medium);
    text-transform: uppercase;
    font-family: var(--ff-body);
    margin-bottom: 15px;
}

    .brand-label::before {
        content: "";
        position: absolute;
        bottom: -4px;
        background: var(--brand-color-1);
        height: 4px;
        display: inline-block;
        opacity: 1;
        right: 0;
        left: 0;
        width: 100%;
    }

    @media (max-width: 47.9375rem) {

    .brand-label::before {
            height: 4px;
            bottom: -6px
    }
        }
/*global horizontal nav */
.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);
        }

/* fallback if :focus-visible pseudo is not supported */ 
body.keyboard-navigation-in-use *:focus {
        outline: 4px auto Highlight; /* Firefox */
        outline: 4px auto -webkit-focus-ring-color; /* Chrome, Edge, Safari */
    }

.focus-visible {
    outline: 4px auto Highlight;
    outline: 4px auto -webkit-focus-ring-color;
}

:focus-visible {
    outline: 4px auto Highlight;
    outline: 4px auto -webkit-focus-ring-color;
}


.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)
  }
    }

  .hero .hero-content .field-herotitle:empty{
        display: none;
      }

  /* 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) var(--s)
  }
    }
  .article-detail .article-detail-content {
    line-height: var(--lh-l);
  }
  @media (min-width: 62rem) {
  .article-detail .article-detail-content {
      padding: 0 var(--s)
  }
    }

.article-detail.v2 .article-header-background {
        position: relative;
        height: 56vw;
        max-height: 520px;
    }
        
        .article-detail.v2 .article-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: none;
                    filter: none;
        }
    .article-detail.v2 .back-to-articles {
        margin-top: 8px;
    }
    @media (min-width: 48rem) {
    .article-detail.v2 .back-to-articles {
            padding: 0 var(--s-xxxl)
    }
        }
    [dir='rtl'] .article-detail.v2 .back-to-articles .link {
                padding-right: var(--s-l);
            }
    .article-detail.v2 .back-to-articles .link a {
                color: var(--text-color);
                padding: 0 20px;
                position: relative;
            }
    .article-detail.v2 .back-to-articles .link a::before {
                    content:  "";
                    background-image: url(`../../../Images/arrow.svg`);
                    background-size: cover;
                    position: absolute;
                    width: 12px;
                    height: 12px;
                    left: 0;
                    margin-top: 8px;
                }
    [dir='rtl'] .article-detail.v2 .back-to-articles .link a::before {
                        right: 0;
                        -webkit-transform: rotate(180deg);
                                transform: rotate(180deg);
                    }
    .article-detail.v2 .article-header-content {
        padding: var(--s-m) var(--s-m) var(--s-l);
        text-align: center;
    }
    .article-detail.v2 .article-header-content .article-title {
            margin: 0 auto var(--s-l);
            max-width: 760px;
        }
    @media (min-width: 62rem) {
    .article-detail.v2 .article-header-content .article-title {
                font-size: var(--fs-xxxxl)
        }
            }
    .article-detail.v2 .article-header-content .article-subtitle {
            margin: 0 auto var(--s-l);
            max-width: 760px;
        }
    .article-detail.v2 .article-header-content .article-detail-intro {
            padding: 0;
            margin: 0;
            text-align: left;
            text-align: initial;    
            max-width: 730px;
            margin: 0 auto;
        }
    @media (min-width: 36rem) {
    .article-detail.v2 .article-header-content .article-detail-intro {
                text-align: center
        }
            }
    .article-detail.v2 .article-body .article-detail-content {
            line-height: unset;
            padding: 0;
            max-width: 540px;
            margin: 0 auto;
        }
    .article-detail.v2 .article-detail-content h1, .article-detail.v2 .article-detail-content h2, .article-detail.v2 .article-detail-content h3, .article-detail.v2 .article-detail-content h4, .article-detail.v2 .article-detail-content h5, .article-detail.v2 .article-detail-content h6, .article-detail.v2 .article-detail-content p, .article-detail.v2 .article-detail-content ol li {
            margin-bottom: var(--s);
        }
    @media (min-width: 62rem) {
    .article-detail.v2 .article-detail-content h1, .article-detail.v2 .article-detail-content h2, .article-detail.v2 .article-detail-content h3, .article-detail.v2 .article-detail-content h4, .article-detail.v2 .article-detail-content h5, .article-detail.v2 .article-detail-content h6, .article-detail.v2 .article-detail-content p, .article-detail.v2 .article-detail-content ol li {
                margin-bottom: var(--s-l)
        }
            }
    .article-detail.v2 ol {
        padding: 0 0 0 var(--s-l);
    }
.article-detail.v3 .article-detail-intro,
    .article-detail.v3 .article-detail-content {
        padding: 0;
    }
    .article-detail.v3 .promo-related-article {
        padding-bottom: var(--s);
    }
    @media (min-width: 48rem) {
    .article-detail.v3 .promo-related-article {
            padding-bottom: var(--s-xxxxl)
    }
        }
.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)
  }
    }

.article-overview.v2 .article-overview-intro {
    margin: auto;
    padding: 0 15px;
  }

@media (min-width: 36rem) {

.article-overview.v2 .article-overview-intro {
      padding: 0 30px
  }
    }

@media (min-width: 62rem) {

.article-overview.v2 .article-overview-intro {
      padding: 0
  }
    }

.article-overview.v3 .field-introduction {
    padding: var(--s-l) 0;
  }

@media (min-width: 62rem) {

.article-overview.v3 .field-introduction {
      padding: var(--s-l) var(--s-l) var(--s-xl)
  }
    }

@media (min-width: 36rem) {

.article-overview.v3 .back-to-overview-link {
      padding: 0 var(--s-m)
  }
    }
.product-detail-header {
  position: relative;
}

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

  .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;
    }

  @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(--product-detail-header-content-color);
        word-break: break-word;
        text-shadow: var(--product-detail-header-title-shadow);
      }

  .product-detail-header .product-detail-bgimage .product-detail-header-content > img {
        max-width: 500px;
        max-height: 500px;
        z-index: 100;
        position: relative;
      }

  @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;
        padding-bottom: 30px;
      }

  .product-detail-header .product-detail-bgimage .product-detail-header-content .link a {
          color: var(--product-detail-header-content-color);
          z-index: 100;
          position: absolute;
        }

  .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);
}

.product-schema-hidden {
  display: none;
}

.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;
  }
.body-product-page.header-no-opacity .product-detail-header:before{
        background: transparent;
      }
.product-header-v2 {
    position: relative;
}
    
    .product-header-v2 .product-detail-bgimage {
        background-size: cover;
        background-repeat: no-repeat;
    }
    
    .product-header-v2 .product-header-wrapper {
        color: var(--product-detail-header-content-color);
        background-color: var(--product-detail-header-background);
    }
    
    .product-header-v2 .product-detail-header-content .product-title {
            margin: 0 0 var(--s-xs);
            font-size: var(--fs-product-detail-title-mobile);
        }
    
    @media (min-width: 62rem) {
    
    .product-header-v2 .product-detail-header-content .product-title {
                font-size: var(--fs-product-detail-title)
        }
            }
    
    .product-header-v2 .product-detail-header-content .product-title,
        .product-header-v2 .product-detail-header-content .product-subtitle {
            word-break: break-word;
            color: var(--product-detail-header-content-color);
            text-shadow: var(--product-detail-header-title-shadow);
        }
    
    .product-header-v2 .product-detail-header-content .link {
            text-align: left;
            text-align: initial;
            padding-bottom: 30px;
        }
    
    .product-header-v2 .product-detail-header-content .link a {
                z-index: 100;
                position: absolute;
                color: var(--product-detail-header-content-color);
            }
    
    .product-header-v2 .product-detail-header-content > .row {
            margin: 0;
        }
    
    @media (min-width: 48rem) {
    
    .product-header-v2 .product-detail-header-content > .row > .col-12 {
                    padding-left: var(--s-m);
                    padding-right: var(--s-m)
            }
                }
    
    .product-header-v2 .product-title-wrapper {
        margin-bottom: var(--s-l);
    }
    
    @media (max-width: 47.9375rem) {
    
    .product-header-v2 .product-title-wrapper {
            text-align: center
    }
        }
    
    @media (min-width: 48rem) {
    
    .product-header-v2 .product-title-wrapper {
            padding: 0 var(--s-m);
            width: 41.666667%;
            margin-left: auto
    }
            .product-header-v2 .product-title-wrapper[data-alignment="Center"] {
                width: 60%;
                margin-right: auto;
                text-align: center;
            }
            .product-header-v2 .product-title-wrapper[data-alignment="Left"] {
                width: 58.333333%;
                margin-right: auto;
                margin-left: unset;
            }
        }
    
    .product-header-v2 .rating-summary-widget:empty {
        display: none;
    }
    
    .product-header-v2 .image-gallery-thumbnails {
        --thumbnails-size: 90px;
    }
    
    .product-header-v2 .image-gallery-thumbnails .glide__big-images li {
            width: 0;
            height: 0;
            position: relative;
        }
    
    .product-header-v2 .image-gallery-thumbnails .glide__big-images li.active {
                width: auto;
                height: auto;
            }
    
    @media (min-width: 62rem) {
    
    .product-header-v2 .image-gallery-thumbnails .glide__slide {
                padding: 4px;
                border: none
        }
                
                .product-header-v2 .image-gallery-thumbnails .glide__slide.first {
                    margin-top: 0;
                    padding-top: 0;
                }                
            }
    
    @media (min-width: 62rem) {
    
    .product-header-v2 .image-gallery-thumbnails .glide__track {
                margin-top: -2px;
                padding-left: var(--s-xs);
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(var(--thumbnails-size) + var(--scrollbar-width) + var(--s-xs));
                        flex: 0 0 calc(var(--thumbnails-size) + var(--scrollbar-width) + var(--s-xs))
        }
            }
    
    .product-header-v2 .image-gallery-thumbnails .slider-controls {
            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;
            margin-bottom: var(--s-m);
        }
    
    @media (min-width: 62rem) {
    
    .product-header-v2 .image-gallery-thumbnails .slider-controls {
                display: none
        }                
            }
    
    .product-header-v2 .image-gallery-thumbnails .glide__bullets {
            margin: var(--s-s) 0;
            text-align: center;
        }
    
    .product-header-v2 .image-gallery-thumbnails .glide__bullet {
            display: inline-block;
            width: calc(var(--s-s) + 4px);
            height: calc(var(--s-s) + 4px);
            margin: 0 var(--s-xs);
            background: var(--transparent);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid var(--color-black);
        }
    
    .product-header-v2 .image-gallery-thumbnails .glide__bullet--active,
            .product-header-v2 .image-gallery-thumbnails .glide__bullet:hover,
            .product-header-v2 .image-gallery-thumbnails .glide__bullet:focus {
                background: var(--color-black);
                border: 0;
            }
    
    .product-header-v2 .image-gallery-thumbnails .glide__arrows {
            padding: 0 var(--s-m);
        }
    
    .product-header-v2 .image-gallery-thumbnails .glide__arrow {
            cursor: pointer;
        }
    
    .product-header-v2 .image-gallery-thumbnails .glide__arrow::after {
                content: "";
                width: 24px;
                height: 24px;
                display: block;
                background: url(`../../../Images/chevron-up.svg`) no-repeat;
                background-position: center;
            }
    
    .product-header-v2 .image-gallery-thumbnails .glide__arrow.glide__arrow--left::after {
                -webkit-transform: rotate(270deg) scale(1.3);
                        transform: rotate(270deg) scale(1.3);
            }
    
    .product-header-v2 .image-gallery-thumbnails .glide__arrow.glide__arrow--right::after {
                -webkit-transform: rotate(90deg) scale(1.3);
                        transform: rotate(90deg) scale(1.3);
            }
    
    .product-header-v2 .image-gallery-thumbnails.show-next-image-on-click .glide__big-images {
            cursor: pointer;
        }
    
    /* all specifications link */
    
    .product-header-v2 .component.link a:not(.btn) {
        text-decoration: underline;
        font-family: var(--ff-headings);
    }
    
    .product-header-v2 .component.link a:not(.btn):hover {
            text-decoration: none;
        }
    
    .product-header-v2 .check-list {
        margin-bottom: var(--s-l);
    }
    
    .product-header-v2 .check-list ul li {
            padding: 0 0 var(--s-m) 27px;
            background: none;
        }
    
    [dir='rtl'] .product-header-v2 .check-list ul li {
                padding: 0 27px var(--s-m) 0;
            }
    
    .product-header-v2 .check-list ul li::before {
                content: "";
                width: 8px;
                height: 16px;
                position: absolute;
                margin-left: -24px;
                margin-top: 3px;
                -webkit-transform: rotate(45deg);
                        transform: rotate(45deg);
                border-bottom: 2px solid var(--product-detail-header-content-color);
                border-right: 2px solid var(--product-detail-header-content-color);
            }
    
    [dir='rtl'] .product-header-v2 .check-list ul li::before {
                    margin-right: -24px;
                    margin-left: unset;
                }

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

.product-body-v2 .tabs > .component-content {
        position: relative;
    }

.product-body-v2 .tabs-controls { 
        -webkit-box-pack: start; 
            -ms-flex-pack: start; 
                justify-content: flex-start;
        border-bottom: solid 1px var(--secondary-color);
    }

.product-body-v2 .tabs-controls .tab-item a {
            border: none;
            color: var(--primary-color);
            font-family: var(--ff-headings);
            margin-right: var(--s-xl);
            padding: var(--s-s) 0;
            font-size: var(--fs-xl);
            line-height: 30px;
            font-weight: var(--fw-regular);
        }

@media (min-width: 62rem) {

.product-body-v2 .tabs-controls .tab-item a {
                font-size: var(--fs-xxl);
                line-height: 40px;
                margin-right: var(--s-xxl)
        }
            }

.product-body-v2 .tabs-controls .tab-item a.active:before, .product-body-v2 .tabs-controls .tab-item a:hover:before {
                    left: 0;
                    right: 0;
                }

.product-body-v2 .tabs-controls .tab-item a:before {
                content: "";
                position: absolute;
                z-index: -1;
                left: 51%;
                right: 51%;
                bottom: 0;
                background: var(--secondary-color);
                height: 4px;
                -webkit-transition: left var(--transition-timing-fast),
                right var(--transition-timing-fast);
                transition: left var(--transition-timing-fast),
                right var(--transition-timing-fast);
            }

.product-body-v2 .tabs-content .tab-panel {
        margin-top: var(--s-m);
    }

.product-body-v2 .tabs-content .tab-panel table {
            margin: 0;            
        }

.product-body-v2 .tabs-content .tab-panel p {
             margin-bottom: var(--s);
        }
.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 .backToRecipes {
    padding-bottom: var(--s-xl);
  }
  .recipe-detail .backToRecipes .linkText a {
      color: var(--text-color);
    }
  @media (min-width: 62rem) {
  .recipe-detail .backToRecipes {
      padding-bottom: var(--s-xxl)
  }
    }

.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);
  margin-bottom: 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;
  margin-top: 2%;
}

.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);
  }

.v5 .recipe-detail-body {
    padding: 0 0 var(--s-xl);
  }

@media (min-width: 48rem) {

.v5 .recipe-detail-body {
      padding: 0 var(--s-xxl) var(--s-xxxl)
  }
    }

.v5 .recipe-detail-body .recipe-detail-ingredients h3, .v5 .recipe-detail-body .recipe-detail-instructions h3 {
      margin-bottom: var(--s-m);
      margin-top: var(--s-m);
    }

@media (min-width: 36rem) {

.v5 .recipe-detail-body .recipe-detail-ingredients h3, .v5 .recipe-detail-body .recipe-detail-instructions h3 {
        margin-top: 0
    }
      }

.v5 .recipe-detail-body .recipe-detail-body-left {
      padding-bottom: var(--s-m);
    }

.v5 .recipe-detail-instructions ol li{
        padding-left: 34px;
        margin-bottom: 0;
      }

@media (min-width: 62rem) {

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

.v5 .recipe-detail-instructions ol li::before {
          font-family: var(--ff-headings);
          top: var(--s-s);
          padding-top: 3px;
        }

.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, decimal);
        left: auto;
        right: calc(-1 * var(--s-l) - var(--s-l));
        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: 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;
      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
    }
      }
  .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 .field-title {
      display: none;
    }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content .field-title {
        display: block
    }
      }
  .recipe-header-background .recipe-header-content .field-shorttitle {
      display: block;
    }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content .field-shorttitle {
        display: none
    }
      }
  .recipe-header-background .recipe-header-content .mobile-title.field-title {
      display: block !important;
    }
  @media (min-width: 36rem) {
  .recipe-header-background .recipe-header-content .mobile-title.field-title {
        display: none !important
    }
      }
  .recipe-header-background .recipe-header-content h1 {
      color: var(--color-white) !important;;
      background: transparent;
      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-experience .backToRecipes {
    padding: var(--s-m) var(--s-m) var(--s-xl);
    color: var(--text-color);
  }

@media (max-width: 35.9375rem) {

.recipe-experience .backToRecipes {
      -webkit-box-ordinal-group: 2;
          -ms-flex-order: 1;
              order: 1
  }
    }

@media (min-width: 48rem) {

.recipe-experience .backToRecipes {
      -webkit-box-flex: 1;
          -ms-flex: 1 0 100%;
              flex: 1 0 100%
  }
    }

.recipe-experience .backToRecipes .linkText a {
      color: var(--text-color);
      width: 100%;
      display: block;
    }

.recipe-info-section {  
  background: var(--color-white);
  z-index: 1;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

.recipe-info-section .recipe-intro .field-introduction {
      display: none;
    }

@media (min-width: 36rem) {

.recipe-info-section .recipe-intro .field-introduction {
        display: block
    }
      }

.recipe-info-section .recipe-intro .field-shortdescription {
      display: block;
    }

@media (min-width: 36rem) {

.recipe-info-section .recipe-intro .field-shortdescription {
        display: none
    }
      }

.recipe-info-section .recipe-intro .mobile-desc.field-introduction {
      display: block !important;
    }

@media (min-width: 36rem) {

.recipe-info-section .recipe-intro .mobile-desc.field-introduction {
        display: none !important
    }
      }

@media (min-width: 36rem) {

.recipe-info-section {
    margin-top: -5rem;
		padding: 0 var(--s-xxl) var(--s-xxl) var(--s-xxl);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex; 
    -ms-flex-wrap: wrap; 
        flex-wrap: wrap;
		-webkit-box-orient: horizontal;
		-webkit-box-direction: normal;
		    -ms-flex-direction: row;
		        flex-direction: row
}
  }

@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);
      -webkit-box-pack: space-evenly;
          -ms-flex-pack: space-evenly;
              justify-content: space-evenly;
    }

@media (min-width: 62rem) {

.recipe-info-section .recipe-short-summary .recipe-short-summary-list {
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important
    }
      }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-child(3), .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-child(4) {
        margin-top: 20px;
      }

@media (min-width: 62rem) {

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-child(3), .recipe-info-section .recipe-short-summary .recipe-short-summary-list li:nth-child(4) {
          margin-top: 0
      }
        }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li {
        text-align: center;
        -webkit-box-flex: 1;
            -ms-flex: 1 0 50%;
                flex: 1 0 50%;
      }

@media (min-width: 62rem) {

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li {
          -webkit-box-flex: unset !important;
              -ms-flex: unset !important;
                  flex: unset !important
      }
        }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li img {
          height: 50px;
          width: 50px;
        }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li span {
          margin: 5px 0;
        }

.recipe-info-section .recipe-short-summary .recipe-short-summary-list li .field-yieldmeasure {
          margin-left: 5px !important;
        }

.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-xxs);
      }

.recipe-new-experience .recipe-header-background {
    min-height: 100vw;
  }

    @media (min-width: 48rem) {.recipe-new-experience .recipe-header-background {
      min-height: 64vh
  }
    }

    .recipe-new-experience .recipe-header-background img {
        -webkit-filter: none;
                filter: none;
    }
  .recipe-new-experience .backToRecipes {
    margin-top: 10px;
  }
  @media (min-width: 48rem) {
  .recipe-new-experience .backToRecipes {
      padding: 0 var(--s-xxxl) var(--s-xxxl)
  }
    }
  [dir='rtl'] .recipe-new-experience .backToRecipes .linkText {
        padding-right: var(--s-l);
      }
  .recipe-new-experience .backToRecipes .linkText a {
        color: var(--text-color);
        padding: 0 20px;
        position: relative;
      }
  .recipe-new-experience .backToRecipes .linkText a::before {
          content:  "";
          background-image: url(`../../../Images/arrow.svg`);
          background-size: cover;
          position: absolute;
          width: 12px;
          height: 12px;
          left: 0;
          margin-top: 4px;
        }
  [dir='rtl'] .recipe-new-experience .backToRecipes .linkText a::before {
              right: 0;
              -webkit-transform: rotate(180deg);
                      transform: rotate(180deg);
          }
  @media (min-width: 48rem) {
  .recipe-new-experience .backToRecipes .linkText a::before {
            margin-top: 5px
        } 
          }
  .recipe-new-experience .recipe-header-content {
    -webkit-box-flex: 1;
        -ms-flex: 1;
            flex: 1;
    overflow: hidden;
    position: relative;
    z-index: 200;
    padding: var(--s-xl) var(--s-s) 0;
  }
  @media (min-width: 62rem) {
  .recipe-new-experience .recipe-header-content {
    padding: var(--s-l) var(--s-s)
  }
    }
  .recipe-new-experience .recipe-header-content .field-title {
      display:none;
      font-size: var(--fs-xl);
      text-align: center;
      margin-left: auto;
      margin-right: auto;
    }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-header-content .field-title {
        display: block;
        text-align: center;
        max-width: 600px
    }
      }
  @media (min-width: 75rem) {
  .recipe-new-experience .recipe-header-content .field-title {
        display: block;
        text-align: center;
        font-size: var(--fs-xxxl);
        margin: var(--s-s) auto 0;
        max-width: 774px
    }
      }
  .recipe-new-experience .recipe-header-content .field-shorttitle {
      display:block;
      font-size: var(--fs-xl); 
      text-align: center;
      margin-bottom: 0;
    }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-header-content .field-shorttitle {
        display:none
    }
      }
  .recipe-new-experience .recipe-header-content .mobile-title.field-title {
      display: block !important;
      margin-bottom: 0;
    }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-header-content .mobile-title.field-title {
        display: none !important
    }
      }
  .recipe-new-experience .recipe-header-content .recipe-read-more {
      display: none;
    }
  .recipe-new-experience .recipe-info-section {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    padding: 0;
    text-align: center;
  }
  @media (min-width: 36rem) {
  .recipe-new-experience .recipe-info-section {
      margin-top: 0
  }
    }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-info-section {
      -webkit-box-orient: horizontal;
      -webkit-box-direction: normal;
          -ms-flex-direction: row;
              flex-direction: row;
      -webkit-box-align: start;
          -ms-flex-align: start;
              align-items: flex-start;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center
  }
    }
  .recipe-new-experience .recipe-info-section .recipe-intro {
      padding: var(--s-l) 0 0;
    }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-info-section .recipe-intro {
        padding: var(--s-l) 0 var(--s-l) var(--s-xxl)
    }
      }
  .recipe-new-experience .recipe-info-section .recipe-intro .field-introduction {
        display: none;
      }
  @media (min-width: 36rem) {
  .recipe-new-experience .recipe-info-section .recipe-intro .field-introduction {
          display: block
      }
        }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-info-section .recipe-intro .field-introduction {
          text-align: left;
          max-width: 445px
      }
        }
  .recipe-new-experience .recipe-info-section .recipe-intro .field-shortdescription {
        margin-top: var(--s-l);
        display: block;
      }
  @media (min-width: 36rem) {
  .recipe-new-experience .recipe-info-section .recipe-intro .field-shortdescription {
          display: none
      }
        }
  .recipe-new-experience .recipe-info-section .recipe-intro .mobile-desc.field-introduction {
        display: block !important;
      }
  @media (min-width: 36rem) {
  .recipe-new-experience .recipe-info-section .recipe-intro .mobile-desc.field-introduction {
          display: none !important
      }
        }
  .recipe-new-experience .recipe-info-section .recipe-short-summary {
      margin-top:0;
      padding: var(--s-l) 0 0;
    }
  @media (max-width: 47.9375rem) {
  .recipe-new-experience .recipe-info-section .recipe-short-summary {
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1
    }
      }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-info-section .recipe-short-summary {
        padding: var(--s-l) var(--s-xxl) var(--s-l) 0
    }
      }
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list {
        margin-bottom: 0;
      }
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .spec-title {
          display: inline;
        }
  @media (min-width: 75rem) {
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .spec-title {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-align: start;
              -ms-flex-align: start;
                  align-items: flex-start
        }
          }
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .spec-title img {
            height: auto;
            width: auto;
            margin-right: 5px;
          }
  @media (min-width: 75rem) {
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .spec-title img {
              position: relative;
              top: 3px
          }
            }
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .spec-title .recipe-short-summary-title {
            display: none;
          }
  @media (min-width: 75rem) {
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .spec-title .recipe-short-summary-title {
              display: block;
              font-size: var(--fs-s);
              font-weight: normal;
              font-family: var(--ff-body)
          }
            }
  .recipe-new-experience .recipe-info-section .recipe-short-summary .recipe-short-summary-list .recipe-short-summary-value {
          font-size: var(--fs-s);
          color: var(--text-color);
        }
  .recipe-new-experience .recipe-info-section div.recipe-short-summary:only-child{
      padding: var(--s-l) 0 var(--s-xl);
    }
  @media (min-width: 48rem) {
  .recipe-new-experience .recipe-info-section div.recipe-short-summary:only-child{
        padding: var(--s-s) 0 var(--s-xxxl)
    }
      }
.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 .field-title {
        display:none;
      }
@media (min-width: 36rem) {
.recipe-detail-header.v3 .field-title {
          display:block
      }
        }
.recipe-detail-header.v3 .field-shorttitle {
        display:block;
      }
@media (min-width: 36rem) {
.recipe-detail-header.v3 .field-shorttitle {
          display:none
      }
        }
.recipe-detail-header.v3 .mobile-title.field-title {
        display: block !important;
      }
@media (min-width: 36rem) {
.recipe-detail-header.v3 .mobile-title.field-title {
          display: none !important
      }
        }
.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-xl);
      }
@media (min-width: 48rem) {
.recipe-detail-header.v3 h1 {
            font-size: calc(var(--fs-xl)*1.5)
      }
        }
@media (min-width: 62rem) {
.recipe-detail-header.v3 h1 {
            font-size: var(--fs-xxl)
      }
        }
.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
      }
          }
#product-overview-v3 {
    max-width: 1440px;
}
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 {
            padding: 0 1rem;
        }
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul {
                -webkit-box-pack: left;
                    -ms-flex-pack: left;
                        justify-content: left;
            }
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul li {
                    -webkit-box-flex: 0;
                        -ms-flex: 0 0 calc(12 / 12 * 100%);
                            flex: 0 0 calc(12 / 12 * 100%);
                    max-width: calc(12 / 12 * 100%);
                    margin-top: var(--s-xl);
                    margin-bottom: 0;
                }
    @media (min-width: 36rem) {
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul li {
                        -webkit-box-flex: 0;
                            -ms-flex: 0 0 calc(6 / 12 * 100%);
                                flex: 0 0 calc(6 / 12 * 100%);
                        max-width: calc(6 / 12 * 100%)
                }
                    }
    @media (min-width: 75rem) {
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul li {
                        -webkit-box-flex: 0;
                            -ms-flex: 0 0 calc(3 / 12 * 100%);
                                flex: 0 0 calc(3 / 12 * 100%);
                        max-width: calc(3 / 12 * 100%)
                }
                    }
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul li .product-card {
                        padding: var(--product-card-v2-padding);
                    }
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul li .product-card img {
                            min-height: var(--product-card-v2-img-height);
                            max-height: var(--product-card-v2-img-height);
                            margin-bottom: 0;
                        }
    #product-overview-v3 .page-list-grid.page-list-product-overview.v2 ul li .product-card .product-card-title {
                            margin-bottom: var(--s-l);
                        }
@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)
    }
        }
    .recipe-body .recipe-info .field-shortdescription {
            display: block;
        }
    @media (min-width: 36rem) {
    .recipe-body .recipe-info .field-shortdescription {
                display: none
        }
            }
    .recipe-body .recipe-info .field-introduction {
            display: none;
        }
    @media (min-width: 36rem) {
    .recipe-body .recipe-info .field-introduction {
                display: block
        }
            }
    .recipe-body .recipe-info .mobile-desc.field-introduction {
            display: block;
        }
    @media (min-width: 36rem) {
    .recipe-body .recipe-info .mobile-desc.field-introduction {
                display: none
        }
            }
    .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: 7px;
            }
    @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)
  }
    }

@media (min-width: 62rem) {

.recipe-category-tile ul li > a:hover > .article-card-v2.recipe-card-v2 .recipe-card-content-wrapper, .recipe-category-tile ul li > a:focus > .article-card-v2.recipe-card-v2 .recipe-card-content-wrapper {
              -webkit-transform: none;
                      transform: none
          }
            }
.related-recipes {
  text-align: center;
}

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

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

.related-recipes.v4 {
  padding: var(--s-m) 0;
}

.related-recipes.v4 .recipe-category-tile {
    padding: 0;
  }

@media (min-width: 48rem) {

.related-recipes.v4 .recipe-category-tile {
      padding: 0 15px
  }
    }

.related-recipes.v4 .recipe-category-tile .recipe-card-v2 {
      -webkit-box-shadow: 4px 4px 12px 6px rgba(0, 0, 0, 0.1);
              box-shadow: 4px 4px 12px 6px rgba(0, 0, 0, 0.1);
    }

@media (min-width: 75rem) {
          a:hover .related-recipes.v4 .recipe-category-tile .recipe-card-v2 .recipe-card-specs,a:focus .related-recipes.v4 .recipe-category-tile .recipe-card-v2 .recipe-card-specs{
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row;
          }
        }

.related-recipes.v4 .related-recipe-subtitle,
  .related-recipes.v4 .related-recipes-title,
  .related-recipes.v4 .link {
    text-align: left;
    padding: 0 15px;
  }

@media (min-width: 48rem){

.related-recipes.v4 .related-recipe-subtitle,
  .related-recipes.v4 .related-recipes-title,
  .related-recipes.v4 .link {
      padding: 0 30px
  }
    }

[dir='rtl'] .related-recipes.v4 .related-recipe-subtitle,[dir='rtl'] .related-recipes.v4 .related-recipes-title,[dir='rtl'] .related-recipes.v4 .link{
      text-align: right;
    }

@media (min-width: 62rem) {

.related-recipes.v4 .related-recipe-subtitle,
  .related-recipes.v4 .related-recipes-title,
  .related-recipes.v4 .link {
      text-align: center
  }
      [dir='rtl'] .related-recipes.v4 .related-recipe-subtitle,[dir='rtl'] .related-recipes.v4 .related-recipes-title,[dir='rtl'] .related-recipes.v4 .link{
        text-align: center;
      }
    }

.related-recipes.v4 .related-recipes-title {
    margin-bottom: 8px;
  }
.related-products {
    text-align: center;
}

.related-products.v2 {
  max-width: 1440px;
}

.related-products.v2 .page-list ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 calc(12 / 12 * 100%);
                        flex: 0 0 calc(12 / 12 * 100%);
                max-width: calc(12 / 12 * 100%);
                margin-top: var(--s-xl);
                margin-bottom: 0;
            }

@media (min-width: 36rem) {

.related-products.v2 .page-list ul li {
                    -webkit-box-flex: 0;
                        -ms-flex: 0 0 calc(6 / 12 * 100%);
                            flex: 0 0 calc(6 / 12 * 100%);
                    max-width: calc(6 / 12 * 100%)
            }
                }

@media (min-width: 75rem) {

.related-products.v2 .page-list ul li {
                    -webkit-box-flex: 0;
                        -ms-flex: 0 0 calc(3 / 12 * 100%);
                            flex: 0 0 calc(3 / 12 * 100%);
                    max-width: calc(3 / 12 * 100%)
            }
                }

.related-products.v2 .page-list ul li .product-card {
                    padding: var(--product-card-v2-padding);
                }

.related-products.v2 .page-list ul li .product-card img {
                        min-height: var(--product-card-v2-img-height);
                        max-height: var(--product-card-v2-img-height);
                        margin-bottom: 0;
                    }

.related-products.v2 .page-list ul li .product-card .product-card-title {
                        margin-bottom: var(--s-l);
                    }

.related-products.v2 .link {
      padding-top: var(--s-l);
    }

.related-products.V3 {
    padding: var(--s-m) 0;
  }

.related-products.V3 .related-products-title {
        margin-bottom: 0;
    }

.related-products.V3 .related-products-subtitle,
    .related-products.V3 .related-products-title,
    .related-products.V3 .link {
      text-align: left;
      padding: 0 15px;
    }

@media (min-width: 48rem){

.related-products.V3 .related-products-subtitle,
    .related-products.V3 .related-products-title,
    .related-products.V3 .link {
        padding: 0 30px
    }
      }

[dir='rtl'] .related-products.V3 .related-products-subtitle,[dir='rtl'] .related-products.V3 .related-products-title,[dir='rtl'] .related-products.V3 .link{
        text-align: right;
      }

@media (min-width: 62rem) {

.related-products.V3 .related-products-subtitle,
    .related-products.V3 .related-products-title,
    .related-products.V3 .link {
        text-align: center
    }
        [dir='rtl'] .related-products.V3 .related-products-subtitle,[dir='rtl'] .related-products.V3 .related-products-title,[dir='rtl'] .related-products.V3 .link{
          text-align: center;
        }
      }

.related-products.V3 .related-recipes-title {
      margin-bottom: 8px;
    }
  .related-products-global .related-products{
      text-align: left;
      
    }
  [dir='rtl'] .related-products-global .related-products{
    text-align: revert;
      }
.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%
    }
      }

.recipe-category-tile{
    padding: 16px 0;
    overflow: hidden;
    max-width: 1440px;
    margin: 0 auto;
}

    @media (min-width: 62rem) {.recipe-category-tile{
        padding: 24px 15px
}
    }

    .recipe-category-tile .recipe-category-title,
    .recipe-category-tile .more-recipes-btn {
        padding: 0 15px;
        text-align: left;
    }

    [dir='rtl'] .recipe-category-tile .recipe-category-title,[dir='rtl'] .recipe-category-tile .more-recipes-btn{
            text-align: right;
        }

    @media (min-width: 62rem) {

    .recipe-category-tile .recipe-category-title,
    .recipe-category-tile .more-recipes-btn {
            text-align: center
    }
            [dir='rtl'] .recipe-category-tile .recipe-category-title,[dir='rtl'] .recipe-category-tile .more-recipes-btn{
                text-align: center;
            }
        }

    .recipe-category-tile .recipe-category-title {
        margin-bottom: var(--s-s);
    }

    .recipe-category-tile ul{       
        display: -webkit-box;       
        display: -ms-flexbox;       
        display: flex;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        list-style: none;
        padding: 0;
        overflow: scroll;
    }

    @media (min-width: 62rem){

    .recipe-category-tile ul{
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            overflow: unset
    }
        }

    .recipe-category-tile ul li{
            margin: 8px 5px 24px 5px;
            width: 286px;
            min-width: 286px;   
        }

    /* Equal space for 4 cards */

    @media (min-width: 62rem){

    .recipe-category-tile ul li{
                width: calc((100% - 120px) / 4);
                min-width: calc((100% - 120px) / 4);
                margin: 16px 15px 32px   
        }
            }

    @media (min-width : 1440px){

    .recipe-category-tile ul li{
                width: calc((1440px - 150px) / 4);
                min-width: calc((1440px - 150px) / 4)   
        }
            }

    .recipe-category-tile ul li > a {
                height: 100%;
                text-decoration: none;
            }

    .recipe-category-tile ul li > a > .recipe-card-v2 {
                    height: 100%;
                    -webkit-box-shadow: 0px 16px 20px rgba(102, 102, 102, 0.3);
                            box-shadow: 0px 16px 20px rgba(102, 102, 102, 0.3);
                    -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                    transition: all var(--duration-l) var(--ease-out-quart);
                    border-radius: var(--hoz-scrollable-recipe-card-border-radius);
                }

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-image-wrapper{
                        padding-top: 56%;
                    }

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-content-wrapper > .recipe-card-title{
                            -webkit-line-clamp: 2;
                            text-transform: unset;
                        }

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs > div{
                            position: relative;
                            padding-left: 28px;
                            padding-right: 5px;
                        }

    [dir='rtl'] .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs > div{
                                padding-right: 28px;
                                padding-left: 5px;
                            }

    @media (min-width: 62rem) and (max-width: 74.9375rem){

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs > div{
                                margin: 2px 0
                        }
                            }

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs > div img{
                                position: absolute;
                                left: 0;
                                padding: 1px 0;
                            }

    [dir='rtl'] .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs > div img{
                                    left: unset;
                                    right: 0;
                                }

    @media (max-width: 61.9375rem){

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs{
                            display: none
                    }
                        }

    @media (min-width: 48rem) and (max-width: 74.9375rem){

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs{
                            height: unset
                    }
                        }

    @media (min-width: 75rem){

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs{
                            -webkit-transition: unset;
                            transition: unset
                    }
                        }

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs span.recipe-specs-value{
                                font-size: 12px;
                                line-height: 18px;
                                display: block;
                                padding-top: 4px;
                            }

    .recipe-category-tile ul li > a > .recipe-card-v2 .recipe-card-specs span.recipe-specs-text{
                                display: none;
                            }

    .recipe-category-tile ul li > a:hover > .recipe-card-v2,
            .recipe-category-tile ul li > a:focus > .recipe-card-v2 {
                -webkit-box-shadow: var(--box-shadow-narrow-light);
                        box-shadow: var(--box-shadow-narrow-light);
                -webkit-transform: var(--card-hover-transform);
                        transform: var(--card-hover-transform);
            }

    @media (min-width: 62rem) {

    .recipe-category-tile ul li > a:hover > .recipe-card-v2 .recipe-card-content-wrapper, .recipe-category-tile ul li > a:focus > .recipe-card-v2 .recipe-card-content-wrapper {
                        -webkit-transform: translateY(-3.4em);
                                transform: translateY(-3.4em)
                }
                    }

    @media (min-width: 75rem) {
                        .recipe-category-tile ul li > a:hover > .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-specs, .recipe-category-tile ul li > a:focus > .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-specs {
                            -webkit-box-orient: horizontal;
                            -webkit-box-direction: normal;
                                -ms-flex-direction: row;
                                    flex-direction: row;
                            -webkit-box-pack: start;
                                -ms-flex-pack: start;
                                    justify-content: flex-start;
                            padding-top: 8px;
                        }        
                    }

    .recipe-category-tile ul li > a:hover > .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title, .recipe-category-tile ul li > a:focus > .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title {
                        -webkit-line-clamp: unset;
                        word-break: keep-all;
                    }

    @media (max-width: 61.9375rem){
            .recipe-category-tile ul li:first-child{
                margin-left: 15px;
            }
                [dir='rtl'] .recipe-category-tile ul li:first-child{
                    margin-right: 15px;
                    margin-left: 5px;
                }

            .recipe-category-tile ul li:last-child{
                min-width: 301px;
                padding-right: 15px;
                margin-right: 0px;
            }

                [dir='rtl'] .recipe-category-tile ul li:last-child{
                    padding-left: 15px;
                    padding-right: 0;
                    margin-left: 0px;
                    margin-right: 5px;
                }
        }

    .recipe-category-tile ul{
        scrollbar-width: none;
    }

    .recipe-category-tile ul::-webkit-scrollbar {
            display: none;
        }


.more-categories {
    padding: 48px 15px;
    background-color: var(--background-color-light);
}

    @media (min-width: 62rem) {.more-categories {
        max-width: none;
        max-width: initial
}
    }

    @media (min-width: 48rem) {.more-categories {
        text-align: center;
        padding: 48px 30px
}
    }

    .more-categories .page-list-grid {
        max-width: 1440px;
        margin: auto;
    }

    .more-categories .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(--s-m);
        }

    @media (min-width: 48rem) {

    .more-categories .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;
                margin-bottom: var(--s-l)
        }
            }

    @media (min-width: 62rem) {

    .more-categories .page-list-grid 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
        }
            }

    .more-categories .page-list-grid ul li .recipe-card .recipe-card-img img {
                        min-height: 325px;
                        max-height: 325px;
                    }

    /* dot pattern style for stork site */

    .more-categories.bg-pattern-mobile-resize {
        padding: var(--s-xxxl) calc(var(--s-m) - 1px) var(--s-xxl);
        position: relative;
    }

    @media (min-width: 75rem) {

    .more-categories.bg-pattern-mobile-resize {
            padding: var(--s-xxxl) calc(var(--s-m) - 1px) calc(var(--s-xxl) + 6px)
    }   
        }

    .more-categories.bg-pattern-mobile-resize>.component-content {
            margin: 0 -30px;
            padding: 0 30px;
            background-color: var(--background-color-light);
        }

    @media (min-width: 48rem) {

    .more-categories.bg-pattern-mobile-resize>.component-content {
                padding: 0 45px
        }
            }

    .more-categories.bg-pattern-mobile-resize .related-recipes-title {
            position: absolute;
            top: 68px;
            background-color: var(--background-color-light);
            left: 50%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            padding: 0 var(--s-s) var(--s-xl);
        }

    @media (max-width: 47.9375rem) {

    .more-categories.bg-pattern-mobile-resize .related-recipes-title {
                top: 60px;                
                -webkit-transform: none;                
                        transform: none;
                left: 0;
                padding: var(--s-s) var(--s-s) var(--s-xl) 15px
        }

                [dir='rtl'] .more-categories.bg-pattern-mobile-resize .related-recipes-title{
                    right: 0;
                    left: unset;
                    padding: var(--s-s) 15px var(--s-xl) 15px;
                }
            }

    .more-categories.bg-pattern-mobile-resize .page-list-grid {
            margin: calc(var(--m-xl) - 12px) auto var(--m-xl);            
        }

    @media (min-width: 48rem) {

    .more-categories.bg-pattern-mobile-resize .page-list-grid {
                padding-top: var(--s-m)            
        }
            }

    .more-categories.bg-pattern-mobile-resize .component.link {
            position: relative;
            background-color: var(--background-color-light);
        }

    .more-categories.bg-pattern-mobile-resize .component.link>.component-content {
                position: absolute;
                top: -74px;
                left: 50%;
                -webkit-transform: translateX(-50%);
                        transform: translateX(-50%);
                background-color: var(--background-color-light);
                padding: 0 var(--s-xxxl) var(--m-s);
            }

    .more-categories.bg-pattern-mobile-resize .component.link>.component-content a.btn {
                    width: -webkit-max-content;
                    width: -moz-max-content;
                    width: max-content;
                }

    @media (max-width: 47.9375rem) {

    .more-categories.bg-pattern-mobile-resize .component.link>.component-content {              
                    -webkit-transform: none;              
                            transform: none;
                    padding: 0 var(--s) var(--s-m) 15px;
                    left: -15px
            }
    
                    [dir='rtl'] .more-categories.bg-pattern-mobile-resize .component.link>.component-content{
                        right: -15px;
                        left: unset;
                        padding: 0 15px var(--s-m) var(--s);
                    }
                }
.all-recipes {
    max-width: 1440px;
    margin: auto;
}
    @media (min-width: 36rem) {.all-recipes {
        padding: 0 0.9375rem
}
    }
    .all-recipes.page-list-grid ul {
            -webkit-box-pack: left;
                -ms-flex-pack: left;
                    justify-content: left;
        }
    [dir='rtl'] .all-recipes.page-list-grid ul {
                -webkit-box-pack: right;
                    -ms-flex-pack: right;
                        justify-content: right;
            }
    .all-recipes.page-list-grid ul li {
                margin-bottom: var(--s-m);                
            }
    @media (min-width: 36rem) {
    .all-recipes.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;
                    margin-bottom: var(--s-xl)                
            }
                }
    @media (min-width: 62rem) {
    .all-recipes.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                
            }
                }
    @media (min-width: 75rem) {
    .all-recipes.page-list-grid 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                
            }
                }
    /* style for recipe card */
    @media (min-width: 62rem) {
    .all-recipes.page-list-grid ul li > a:hover .recipe-card-v2 .recipe-card-content-wrapper, .all-recipes.page-list-grid ul li > a:focus .recipe-card-v2 .recipe-card-content-wrapper {
                            -webkit-transform: translateY(-3.4em);
                                    transform: translateY(-3.4em);
                            height: inherit
                    }
                        }
    .all-recipes.page-list-grid ul li > a:hover .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title, .all-recipes.page-list-grid ul li > a:focus .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title {
                            -webkit-line-clamp: unset;
                            word-break: keep-all;
                        }
    .all-recipes.page-list-grid ul li .recipe-card-v2 {
                    border-radius: unset;
                }
    .all-recipes.page-list-grid ul li .recipe-card-v2 .recipe-card-image-wrapper {
                        padding-top: 56%;
                    }
    .all-recipes.page-list-grid ul li .recipe-card-v2 .recipe-card-content-wrapper > .recipe-card-title {
                            text-transform: unset;
                            font-weight: normal;
                        }
    .all-recipes.page-list-grid ul li .recipe-card-specs {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;                       
                    padding-top: 8px;
                }
    .all-recipes.page-list-grid ul li .recipe-card-specs > div {
                        position: relative;
                        padding-left: 28px;  
                        padding-right: 5px;
                    }
    [dir='rtl'] .all-recipes.page-list-grid ul li .recipe-card-specs > div {
                            padding-right: 28px;
                            padding-left: 5px;
                        }
    .all-recipes.page-list-grid ul li .recipe-card-specs > div > img {
                            position: absolute;
                            left: 0;
                        }
    [dir='rtl'] .all-recipes.page-list-grid ul li .recipe-card-specs > div > img {
                                left: unset;
                                right: 0;
                            }
    .all-recipes.page-list-grid ul li .recipe-card-specs > div .recipe-specs-value {
                            display: block;
                            padding-top: 4px;
                        }
    @media (min-width: 48rem) {
    .all-recipes.page-list-grid ul li .recipe-card-specs {
                        -webkit-box-orient: horizontal;
                        -webkit-box-direction: normal;
                            -ms-flex-direction: row;
                                flex-direction: row;
                        -webkit-box-pack: start;
                            -ms-flex-pack: start;
                                justify-content: flex-start;
                        height: auto
                }
                    }
    .all-recipes.page-list-grid ul li .recipe-card-specs .recipe-specs-text {
                        display: none;
                    }
    .all-recipes.page-list-grid ul li .recipe-card-specs .recipe-specs-value {
                        font-size: 12px;
                        line-height: 18px;
                        display: inline-block;
                    }
    /* style for category card */
    .all-recipes.page-list-grid ul li > a .category-card .category-card-img {
                            overflow: hidden;
                        }
    .all-recipes.page-list-grid ul li > a .category-card .category-card-img img {                               
                                -webkit-transition: all var(--duration-l) var(--ease-out-quart);                               
                                transition: all var(--duration-l) var(--ease-out-quart);
                            }
    .all-recipes.page-list-grid ul li > a .category-card .category-card-content .category-card-title {
                                text-transform: none;
                                font-size: var(--fs-m);
                                line-height: 25px;                               
                            }
    @media (min-width: 62rem) {
    .all-recipes.page-list-grid ul li > a .category-card .category-card-content .category-card-title {
                                    font-size: var(--fs-l);
                                    line-height: 32px                               
                            }
                                }
    .all-recipes.page-list-grid ul li > a:hover .category-card .category-card-img img {
                            -webkit-transform: scale(1.05);
                                    transform: scale(1.05);                            
                        }

.recipe-overview .all-recipes {
        padding: unset;
        max-width: 1380px;                    
    }

@media (max-width: 35.9375rem) {

.recipe-overview .all-recipes.page-list-grid ul li {
                        padding: 0
                }
                    }
.article-list.search-results {
        margin: 0;
    }
    .article-list.page-list-grid ul li {
        margin-bottom: var(--s-xl);
        -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) {
    .article-list.page-list-grid ul li {
            margin-bottom: var(--s-xxxl)
    }
        }
    @media (min-width: 36rem) {
    .article-list.page-list-grid ul li:nth-child(even) .article-card-v3 {
                -webkit-box-orient: horizontal;
                -webkit-box-direction: reverse;
                    -ms-flex-flow: row-reverse;
                        flex-flow: row-reverse;
                --article-card-border-width: 0 30px 0 0
        }
            }
@media (min-width: 62rem) {
.order-sm-first:nth-child(1) .page-list.article-banner{
                margin-right: 15px
        }
            }
.article-list-v2 {
    max-width: 1440px;
    margin: auto;
    padding: var(--s-xl) 15px 0;
}
    @media (min-width: 36rem) {.article-list-v2 {
        padding: var(--s-xxl) 30px 0
}
    }
    .article-list-v2.page-list-grid ul {
            -webkit-box-pack: left;
                -ms-flex-pack: left;
                    justify-content: left;
        }
    [dir='rtl'] .article-list-v2.page-list-grid ul {
                -webkit-box-pack: right;
                    -ms-flex-pack: right;
                        justify-content: right;
            }
    .article-list-v2.page-list-grid ul li {
                margin-bottom: var(--s-m);  
            }
    @media (min-width: 36rem) {
    .article-list-v2.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;
                    margin-bottom: var(--s-xl)  
            }
                }
    @media (min-width: 62rem) {
    .article-list-v2.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  
            }
                }
    @media (min-width: 75rem) {
    .article-list-v2.page-list-grid 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  
            }
                }
    /* style for category card */
    .article-list-v2.page-list-grid ul li > a .category-card .category-card-img {
                            overflow: hidden;
                        }
    .article-list-v2.page-list-grid ul li > a .category-card .category-card-img img {
                                -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                                transition: all var(--duration-l) var(--ease-out-quart);
                            }
    .article-list-v2.page-list-grid ul li > a .category-card .category-card-content .category-card-title {
                                text-transform: none;
                                font-size: var(--fs-m);
                                line-height: 25px;                               
                            }
    @media (min-width: 62rem) {
    .article-list-v2.page-list-grid ul li > a .category-card .category-card-content .category-card-title {
                                    font-size: var(--fs-l);
                                    line-height: 32px                               
                            }
                                }
    .article-list-v2.page-list-grid ul li > a:hover .category-card .category-card-img img {
                            -webkit-transform: scale(1.05);
                                    transform: scale(1.05);                            
                        }

.recipe-landing-banner.page-header a.recipe-link{
            width: 100%;
            height: 100%;
            text-decoration: none;
        }

            .recipe-landing-banner.page-header a.recipe-link img{
                -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                transition: all var(--duration-l) var(--ease-out-quart);
            }

            .recipe-landing-banner.page-header a.recipe-link:hover .page-header-bgcontainer img,.recipe-landing-banner.page-header a.recipe-link:focus .page-header-bgcontainer img{
                        -webkit-transform: scale(1.05);
                                transform: scale(1.05);
                    }

            .recipe-landing-banner.page-header a.recipe-link::after{
                height: 50%;
                background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--overlay-bg-medium)));
                background-image: linear-gradient(transparent, var(--overlay-bg-medium));
                content: '';
                display: block;
                position: absolute;
                bottom: 0;
                width: 100%;
            }
        .recipe-landing-banner.page-header .page-header-bgcontainer{
            min-height: unset;
            height: 100vw;
            overflow: hidden;
            max-height: 520px;          
        }
        @media (min-width: 36rem){
        .recipe-landing-banner.page-header .page-header-bgcontainer{
                height: 42vw          
        }
            }
        @media (min-width: 48rem){
        .recipe-landing-banner.page-header .page-header-bgcontainer{
                height: 80vw          
        }                
            }
        @media (min-width: 62rem){
        .recipe-landing-banner.page-header .page-header-bgcontainer{
                height: 48vw          
        }
            }
        @media (min-width: 75rem){
        .recipe-landing-banner.page-header .page-header-bgcontainer{
                height: 36.12vw          
        }
            }
        .recipe-landing-banner.page-header .page-header-content{
            padding-bottom: 42px!important;
            -ms-flex-item-align: end;
                align-self: flex-end;
            justify-self: flex-end;
            place-self: flex-end;
            height: -webkit-fit-content;
            height: -moz-fit-content;
            height: fit-content;
        }
        @media (min-width: 62rem){
        .recipe-landing-banner.page-header .page-header-content{
                padding-bottom: var(--s-xl)!important;
                max-width: 850px
        }
            }
        .recipe-landing-banner.page-header .page-header-content .page-header-content-wrapper .page-header-content-title{
                    color: var(--color-white);
                    margin-bottom: var(--s-m);
                }
        @media (min-width: 62rem) {
        .recipe-landing-banner.page-header .page-header-content .page-header-content-wrapper .page-header-content-title{
                        margin-bottom: var(--s-xl)
                }
                    }


.brand-overview .component.title {
            text-align: center;
            margin: 0 auto var(--s-m);
        }
            @media (min-width: 62rem) {.brand-overview .component.title {
                margin: 0 auto var(--s-l)
        }
            }
        .brand-overview .intro {
            text-align: center;
            font-size: var(--fs-intro);
            max-width: 620px;
            margin: auto;
        }
        .brand-overview .promo-related-article.v2 .related-article-intro {
                font-size: var(--fs-body);
            }
        .brand-overview .promo-related-article.v2 .related-article-images img:nth-child(2) {
                    width: 77%;
                    float: none;
                    margin: 0 0 -45px 50%;
                    margin-bottom: -45px;
                    -webkit-transform: translate(-50%, -50%);
                            transform: translate(-50%, -50%);
                }
        [dir='rtl'] .brand-overview .promo-related-article.v2 .related-article-images img:nth-child(2) {
                        margin-right: 50%;
                        margin-left: 0;
                        -webkit-transform: translate(50%, -50%);
                                transform: translate(50%, -50%);
                    }
        @media (min-width: 36rem) {
        .brand-overview .promo-related-article.v2 .related-article-images img:nth-child(2) {
                        margin-bottom: -65px
                }
                    }
        @media (min-width: 48rem) {
        .brand-overview .promo-related-article.v2 .related-article-images img:nth-child(2) {
                        width: 57%;
                        margin-bottom: -45px
                }
                    }
        @media (min-width: 62rem) {
        .brand-overview .promo-related-article.v2 .related-article-images img:nth-child(2) {
                        margin-bottom: -55px
                }
                    }
        @media (min-width: 75rem) {
        .brand-overview .promo-related-article.v2 .related-article-images img:nth-child(2) {
                        margin-bottom: -65px
                }
                    }
        @media (max-width: 47.9375rem) {
        .brand-overview .promo-related-article.v2 .related-articles-body {
                    text-align: center
            }                    
                }
        .brand-overview .line {
            border-top: 1px solid var(--brand-color-2);
        }
    .brand.promo-list.promo-image-left--odd li:nth-child(odd) .related-article-images img:nth-child(2) {
            margin-left: 50%;
        }
    [dir='rtl'] .brand.promo-list.promo-image-left--odd li:nth-child(odd) .related-article-images img:nth-child(2) {
                margin-left: 0;
            }
.brand-detail .back-to-overview-link {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
    }
        .brand-detail .back-to-overview-link .link-icon:before {
            border-color: var(--text-color);
        }
        .brand-detail .back-to-overview-link .link-text {
            color: var(--text-color);
            font-family: var(--ff-body);
        }
        .brand-detail .back-to-overview-link a > span {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
    .brand-detail .brand-detail-body .brand-content:last-child .brand-detail-content{
                margin-bottom: var(--s-xxxl);
            }
    @media(min-width: 62rem){
    .brand-detail .brand-detail-body .brand-content:last-child .brand-detail-content{
                    margin-bottom: 5rem
            }
                }

.brand-content.column-splitter {
        margin: 0;
    }

.brand-content .logo-wrapper {
        margin-bottom: var(--s-m);
        margin-top: var(--s);
    }

@media (min-width: 62rem) {

.brand-content .logo-wrapper {
            margin-bottom: var(--s-l); 
            margin-top: 0
    }           
        }

.brand-content .logo-wrapper img {
            width: 100%;
        }

.brand-content .logo-wrapper:empty
        {
            display: none;
        }

.brand-content .brand-title {
        margin-bottom: var(--s-s);
    }

.brand-content .brand-subtitle {
        max-width: 610px;
        margin: 0 auto var(--s-l);
    }

.brand-content .brand-detail-content {
        max-width: 690px;
        margin: 0 auto var(--s-xxl);
    }

.brand-content .brand-detail-content p {
            margin-bottom: var(--s-m);
        }
.channel-overview {
    padding-bottom: var(--s-m);
}
    @media (min-width: 62rem) {
    .channel-overview-list {
            padding: 0 var(--s-xs)
    }
        }
    .channel-overview-list ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        }
    .channel-overview-list ul li {
                width: 100%;
                margin-bottom: calc(var(--s-xxl) + 8px);
            }
    @media (min-width: 48rem) {
    .channel-overview-list ul li {
                    width: 50%;
                    padding: 0 var(--m-s) 0;
                    margin-bottom: var(--s-xxxxl)
            }
                }
    .channel-overview-list ul li > a:hover {
                    text-decoration: none;
                }
    .channel-overview-list ul li > a:hover .channel-card-img {
                        -webkit-box-shadow: var(--box-shadow-cards-hover);
                                box-shadow: var(--box-shadow-cards-hover);
                    }
    .channel-overview-list ul li > a:hover .channel-card-img img {
                            -webkit-transform: scale(1.05);
                                    transform: scale(1.05);
                        }
    .channel-overview-list ul li > a:hover .channel-card-title {
                        color: var(--link-color);
                    }
    .channel-overview-intro {
        text-align: center;
        font-size: var(--fs-intro);
        margin-bottom: var(--s-xl);
    }
    @media (min-width: 62rem) {
    .channel-overview-intro {
            margin-bottom: var(--s-xxl)
    }
        }
.channel-detail .promo-related-article .row, .channel-detail .promo-related-article.v2 .row {
            padding-top: 0;
        }
        @media (min-width: 62rem) {
            .channel-detail .promo-related-article .related-articles-body, .channel-detail .promo-related-article.v2 .related-articles-body {
                padding: var(--s-xxxl) var(--s-m);
            }
        }
    .channel-detail .promo-related-article .related-article-intro {
        font-size: var(--fs-intro);
    }
@media(min-width: 62rem){.product-variant .variant-title{
            margin-left: calc(var(--s-s)/2)
    }
        }
    .product-variant .page-list-grid ul {
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            overflow: scroll;
            -webkit-box-pack: unset;
                -ms-flex-pack: unset;
                    justify-content: unset;
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
    .product-variant .page-list-grid ul::-webkit-scrollbar { 
                display: none;
            }
    @media(min-width: 62rem){
    .product-variant .page-list-grid ul {
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                -webkit-box-pack: left;
                    -ms-flex-pack: left;
                        justify-content: left;
                padding-left: 15px;
                padding-right: 15px
        }
                [dir='rtl'] .product-variant .page-list-grid ul {
                    -webkit-box-pack: right;
                        -ms-flex-pack: right;
                            justify-content: right;
                }
            }
    .product-variant .page-list-grid ul li {
                margin: 8px calc(var(--s-s)/2) var(--s);
                -webkit-box-flex:0;
                    -ms-flex:none;
                        flex:none;
                max-width: var(--product-variant-card-width);
                max-height: var(--product-variant-card-height);
                padding: 0;
            }
    @media(min-width: 62rem){
    .product-variant .page-list-grid ul li {
                    max-width: 115px;
                    max-height: 115px
            }
                }
    @media (max-width: 61.9375rem) {
    .product-variant .page-list-grid ul li:first-child {
                        margin-left: var(--s)
                }
                        [dir='rtl'] .product-variant .page-list-grid ul li:first-child {
                            margin-right: var(--s);
                            margin-left: calc(var(--s-s)/2);
                        }
                    }
    @media(min-width: 62rem){
    .product-variant .page-list-grid ul li:first-child {
                        margin: 8px calc(var(--s-s)/2) var(--s)
                }
                    }
    @media (max-width: 61.9375rem) {
    .product-variant .page-list-grid ul li:last-child {
                        margin-right: var(--s)
                }
                        [dir='rtl'] .product-variant .page-list-grid ul li:last-child {
                            margin-left: var(--s);
                            margin-right: calc(var(--s-s)/2);
                        }
                    }
    @media(min-width: 62rem){
    .product-variant .page-list-grid ul li:last-child {
                        margin: 8px calc(var(--s-s)/2) var(--s)
                }
                    }
    .product-variant .page-list-grid ul li a .product-card {
                        -webkit-box-pack: center;
                            -ms-flex-pack: center;
                                justify-content: center;
                        padding: var(--s);
                        border-radius: unset;
                        -webkit-box-shadow: var(--card-shadow-product-variant);
                                box-shadow: var(--card-shadow-product-variant);
                        max-width: var(--product-variant-card-width);
                        max-height: var(--product-variant-card-height);
                        min-width: var(--product-variant-card-height);
                        min-height: var(--product-variant-card-height);
                    }
    @media(min-width: 62rem){
    .product-variant .page-list-grid ul li a .product-card {
                            max-width: 115px;
                            max-height: 115px;
                            min-width: 115px;
                            min-height: 115px
                    }
                        }
    .product-variant .page-list-grid ul li a .product-card .product-card-img img {
                                min-height: unset;
                                -o-object-fit: unset;
                                   object-fit: unset;
                                border-radius: unset;
                                margin-bottom: 0;
                                --product-card-img-height: 80px;
                                -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);
                            }
    .product-variant .page-list-grid ul li a:hover div.product-card, .product-variant .page-list-grid ul li a:focus div.product-card {
                            -webkit-transform: scale(1.08);
                                    transform: scale(1.08);
                            -webkit-box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
                        }
    .product-variant .page-list-grid ul li a:hover .product-card-img img, .product-variant .page-list-grid ul li a:focus .product-card-img img {
                            -webkit-transform: scale(1.4);
                                    transform: scale(1.4);
                       }
.product-variant-parent-container{
    padding:0;
}
@media(max-width: 61.9375rem){
.product-detail-intro p:last-child {
        margin: 0 0 var(--s-l) 0
}
    }
.climate-label-container {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    z-index: 1;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    position: absolute;
    right: calc(var(--s) + 4px);
    bottom: var(--s-xxxl);
    background:var(--transparent-white);
    border-radius: 50px;
    padding: 5px;
    cursor: pointer;
    -webkit-box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.2);
}
    @media(min-width: 62rem){.climate-label-container {
        padding: 7px;
        bottom: calc(var(--s-xxxxl) + var(--s));
        right: var(--s-xxxxxl)
}
    }
    .climate-label-container .climate-label-image {
        position: relative;
        width: 26px;
        height: 26px;
    }
    @media(min-width: 62rem){
    .climate-label-container .climate-label-image {
            width: 42px;
            height: 42px
    }
        }
    .climate-label-container .climate-more-info {
        width: 16px;
        height: 16px;
        -webkit-transform: translateY(-3px);
                transform: translateY(-3px);
    }
    @media(min-width: 62rem){
    .climate-label-container .climate-more-info {
            width: 20px;
            height: 20px;
            -webkit-transform: unset;
                    transform: unset
    }
        }
    .climate-label-container .climate-title {
        color: var(--climate-label-font-color); 
        margin: 0 var(--s-s);
    }
    @media(min-width: 62rem){
    .climate-label-container .climate-title {
            margin: 0 12px
    }
        }
    .climate-label-container+.climate-dialog-box {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
        text-align: left;
        background: var(--transparent-white);
        padding: 20px 20px 10px;
        z-index: 500;
        max-width: 345px;
        min-width: 345px;
        position: absolute;
        left: 50%;
        -webkit-box-shadow: 0 4px 12px 6px rgba(0,0,0,.2);
                box-shadow: 0 4px 12px 6px rgba(0,0,0,.2);
        border-radius: var(--s);
    }
    @media(min-width: 48rem){
    .climate-label-container+.climate-dialog-box {
            right: calc(var(--s) + 4px);
            left: unset
    }
        }
    @media(min-width: 62rem){
    .climate-label-container+.climate-dialog-box {
            right: var(--s-xxxxxl)
    }
        }
    .climate-label-container+.climate-dialog-box.show{
            -webkit-animation: zoomIn .5s ease forwards;
                    animation: zoomIn .5s ease forwards;
        }
    @media(min-width: 48rem){
    .climate-label-container+.climate-dialog-box.show{
                -webkit-animation: zoomIn48 .5s ease forwards;
                        animation: zoomIn48 .5s ease forwards
        }
            }
    @media(min-width: 62rem){
    .climate-label-container+.climate-dialog-box.show{
                -webkit-animation: zoomIn62 .5s ease forwards;
                        animation: zoomIn62 .5s ease forwards
        }
            }
    .climate-label-container+.climate-dialog-box.hide{
            -webkit-animation: zoomOut .5s ease forwards;
                    animation: zoomOut .5s ease forwards;
        }
    @media(min-width: 48rem){
    .climate-label-container+.climate-dialog-box.hide{
                -webkit-animation: zoomOut48 .5s ease forwards;
                        animation: zoomOut48 .5s ease forwards
        }
            }
    @media(min-width: 62rem){
    .climate-label-container+.climate-dialog-box.hide{
                -webkit-animation: zoomOut62 .5s ease forwards;
                        animation: zoomOut62 .5s ease forwards
        }
            }
    .climate-label-container+.climate-dialog-box .climate-label-container {
            border-radius: unset;
            background: none;
            position: unset;
            padding: 0;
            margin-bottom: 10px;
            -webkit-box-shadow: unset;
                    box-shadow: unset;
        }
    .climate-label-container+.climate-dialog-box .climate-label-container .climate-label-image{
                margin-left: 0;
                width: 42px;
                height: 42px;
            }
    .climate-label-container+.climate-dialog-box .climate-description {
            margin-bottom: 20px;
            color: var(--climate-label-font-color);
        }
    .climate-label-container+.climate-dialog-box .climate-description ~ .climate-label-container{
                margin: 0 0 12px 0;
                padding: 0;
            }
    .climate-label-container+.climate-dialog-box .climate-description ~ .climate-label-container:last-child{
                    margin-bottom: 20px;
                }
    .climate-label-container+.climate-dialog-box .climate-description ~ .climate-label-container .climate-title{
                    margin: 0 0 0 12px;
                }
    .climate-label-container+.climate-dialog-box .climate-description ~ .climate-label-container .climate-label-image {
                    width: 26px;
                    height: 26px;
                }
    .climate-label-container+.climate-dialog-box .close-btn{
            background: none;
            position: absolute;
            top: 0;
            right: 0;
            -webkit-transform: translate(50%, -40%);
                    transform: translate(50%, -40%);
        }
    [class*='-card'] .climate-label-container{
        right: unset;
        left: var(--s);
        bottom: var(--s);
        z-index: unset;
        padding: 5px;
    }
    [class*='-card'] .climate-label-container .climate-label-image {
            width:26px;
            height: 26px;
        }
    [class*='-card'] .climate-label-container .climate-title {
            font-size: var(--fs-xs);
            margin-left: var(--s-s);
            margin-right: 5px;
        }
.climate-label-overlay{
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--transparent-white);
    opacity: 0.7;
    z-index: 201;
}

@-webkit-keyframes zoomIn {
    0% {
        -webkit-transform: translate(-50%,70%) scale(0);
                transform: translate(-50%,70%) scale(0);
    }
    100% {
        -webkit-transform: translate(-50%,70%) scale(1);
                transform: translate(-50%,70%) scale(1);
    }
}

@keyframes zoomIn {
    0% {
        -webkit-transform: translate(-50%,70%) scale(0);
                transform: translate(-50%,70%) scale(0);
    }
    100% {
        -webkit-transform: translate(-50%,70%) scale(1);
                transform: translate(-50%,70%) scale(1);
    }
}

@-webkit-keyframes zoomIn48{
    0%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right: 0;
    }
    100%{
        -webkit-transform: translateY(88%) scale(1);
                transform: translateY(88%) scale(1);
        
    }
}

@keyframes zoomIn48{
    0%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right: 0;
    }
    100%{
        -webkit-transform: translateY(88%) scale(1);
                transform: translateY(88%) scale(1);
        
    }
}

@-webkit-keyframes zoomIn62{
    0%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right:0
    }
    100%{
        -webkit-transform: translateY(75%) scale(1);
                transform: translateY(75%) scale(1);
        
    }
}

@keyframes zoomIn62{
    0%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right:0
    }
    100%{
        -webkit-transform: translateY(75%) scale(1);
                transform: translateY(75%) scale(1);
        
    }
}

@-webkit-keyframes zoomOut {
    0% {
        -webkit-transform: translate(-50%,70%) scale(1);
                transform: translate(-50%,70%) scale(1);
    }
    100% {
        -webkit-transform: translate(-50%,70%) scale(0);
                transform: translate(-50%,70%) scale(0);
        visibility: hidden;
    }
}

@keyframes zoomOut {
    0% {
        -webkit-transform: translate(-50%,70%) scale(1);
                transform: translate(-50%,70%) scale(1);
    }
    100% {
        -webkit-transform: translate(-50%,70%) scale(0);
                transform: translate(-50%,70%) scale(0);
        visibility: hidden;
    }
}

@-webkit-keyframes zoomOut48{
    0%{
        -webkit-transform: translateY(88%) scale(1);
                transform: translateY(88%) scale(1);
    }
    100%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right: 0;
        visibility:hidden;
    }
}

@keyframes zoomOut48{
    0%{
        -webkit-transform: translateY(88%) scale(1);
                transform: translateY(88%) scale(1);
    }
    100%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right: 0;
        visibility:hidden;
    }
}

@-webkit-keyframes zoomOut62{
    0%{
        -webkit-transform: translateY(75%) scale(1);
                transform: translateY(75%) scale(1);
    }
    100%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right:0;
        visibility:hidden;        
    }
}

@keyframes zoomOut62{
    0%{
        -webkit-transform: translateY(75%) scale(1);
                transform: translateY(75%) scale(1);
    }
    100%{
        -webkit-transform: translateY(0%) scale(0);
                transform: translateY(0%) scale(0);
        right:0;
        visibility:hidden;        
    }
}

#how-we-lead-container .recipe-category-tile {
      padding: 0px 15px 0px 15px;
      margin: 0px auto;
      max-width: 100%;
    }
      @media(max-width: 61.9375rem) {#how-we-lead-container .recipe-category-tile {
        padding: 0px 15px 0px 15px
    }
      }
      @media only screen and (min-width:900px) {#how-we-lead-container .recipe-category-tile {
        padding: 20px 80px 20px 80px
    }
      }
      #how-we-lead-container .recipe-category-tile ul {
        margin-left: 0px;
        display: block;
  
        margin-bottom: 0;
    }
      @media only screen and (min-width:900px) {
      #how-we-lead-container .recipe-category-tile ul {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -ms-flex-wrap: wrap;
              flex-wrap: wrap;
          grid-gap: 40px;
          gap: 40px
    }
        }
      #how-we-lead-container .recipe-category-tile ul li {
          -webkit-box-flex: 1;
              -ms-flex: 1;
                  flex: 1;
          background-color: var(--color-white);
          position: relative;
          padding-bottom: 0px;
          width: 100%;
          margin: 0px;
          margin-left: 0px !important;
          padding-right: 0px !important;
          -webkit-box-shadow: none;
                  box-shadow: none;
      }
      @media only screen and (max-width:900px) {
      #how-we-lead-container .recipe-category-tile ul li {
            margin-bottom: 30px
      }
          }
      #how-we-lead-container .recipe-category-tile ul li .product-card .product-card-text {
            padding-left: 15px;
            padding-right: 15px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
            padding-top: 0px;
          }
      @media only screen and (min-width:900px) {
      #how-we-lead-container .recipe-category-tile ul li .product-card .product-card-text {
              padding-left: 20px;
              padding-right: 20px
          }
            }
      #how-we-lead-container .recipe-category-tile ul li .product-card .product-card-text .field-item-title {
              color: var(--color-black);
              margin-bottom: 15px;
              margin-top: 20px;
  
            }
      #how-we-lead-container .recipe-category-tile ul li .product-card .product-card-text .field-item-heading {
              color: var(--brand-color-2);
              margin-bottom: 15px;
  
            }
      @media only screen and (min-width:900px) {
      #how-we-lead-container .recipe-category-tile ul li .product-card .product-card-text .field-item-heading {
                margin-bottom: 20px
  
            }
              }
      #how-we-lead-container .recipe-category-tile ul li .product-card .product-card-text .field-item-description {
              margin-bottom: 10px;
              text-align: left;
            }
  
.recipe-category-tile.ourPeople {
        max-width: 100%;
        padding: 10px 0;
    }

        .recipe-category-tile.ourPeople .product-card {
            text-align: left;
        }

        .recipe-category-tile.ourPeople .product-card .product-card-text {
                padding: 20px;
            }

        @media(max-width: 47.9375rem) {

        .recipe-category-tile.ourPeople .product-card .product-card-text {
                    padding: 20px 15px
            }
                }

        .recipe-category-tile.ourPeople.otherPiller .product-card {
                min-height: 255px;
                padding-bottom: 30px;
            }

        @media(max-width: 74.9375rem) {

        .recipe-category-tile.ourPeople.otherPiller .product-card {
                    min-height: auto;
                    padding-bottom: 15px
            }
                }

        .recipe-category-tile.ourPeople.otherPiller .product-card .product-card-text {
                    padding: 20px 20px 40px;
                }

        @media(max-width: 74.9375rem) {

        .recipe-category-tile.ourPeople.otherPiller .product-card .product-card-text {
                        padding: 15px 15px 0px
                }
                    }

        .recipe-category-tile.ourPeople.otherPiller .btn.btn-primary {
                position: absolute;
                bottom: 0;
                margin: 20px 20px 25px;
            }

        @media(max-width: 74.9375rem) {

        .recipe-category-tile.ourPeople.otherPiller .btn.btn-primary {
                    margin: 20px 15px 15px
            }
                }

        @media(max-width: 74.9375rem) {

        .recipe-category-tile.ourPeople.otherPiller .btn.btn-primary {
                    position: static
            }
                }

        .recipe-category-tile.ourPeople ul.items {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: start;
                -ms-flex-pack: start;
                    justify-content: flex-start;
            padding: 0px;
            list-style-type: none;
            margin: 0px;
            grid-gap: 40px;
            gap: 40px;
        }

        .recipe-category-tile.ourPeople ul.items li.item {
                min-width: inherit;
                background-color: var(--color-white);
                position: relative;
                padding-bottom: 0px;
                -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
                        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.10);
                -webkit-box-flex: 1;
                    -ms-flex: 1 1 300px;
                        flex: 1 1 300px;
            }

        @media(max-width: 74.9375rem) {

                    .recipe-category-tile.ourPeople ul.items li.item:not(:last-child) {
                        margin-bottom: 20px;
                    }
                }

        @media(max-width: 61.9375rem) {

        .recipe-category-tile.ourPeople ul.items li.item {
                    margin-right: 0;
                    padding-right: 0px
            }
                }

        .recipe-category-tile.ourPeople ul.items li.item:nth-of-type(3) {
                    margin-right: 0;
                }

        @media(max-width: 61.9375rem) {

        .recipe-category-tile.ourPeople ul.items {
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                grid-gap: 5px;
                gap: 5px
        }
            }

        .recipe-category-tile.ourPeople .btn.btn-primary {
            margin: 20px 20px 25px;
        }

        @media(max-width: 47.9375rem) {

        .recipe-category-tile.ourPeople .btn.btn-primary {
                margin: 20px 15px 25px;
                font-size: var(--fs-button-m)
        }
            }
    .recipe-category-tile .product-card {
        padding: 0;
        border-radius: 0;
        border: 0;
        display: block;
    }
    .recipe-category-tile .product-card img {
            max-height: 400px;
            min-height: auto;
            width: 100%;
            border-radius: 0;
            border: 0;
            margin: 0px;
        }
    @media(max-width: 74.9375rem) {
    .recipe-category-tile .product-card img {
                min-height: 350px
        }
            }
    .recipe-category-tile .product-card .product-card-title {
            text-align: left;
            margin-bottom: 20px;
            margin-top: 0;
        }
    .recipe-category-tile .product-card .product-card-text {
            padding-left: 15px;
            padding-right: 15px;
        }
    .recipe-category-tile .product-card .product-card-text p {
                font-weight: var(--fw-regular);
                margin-bottom: 10px;
                bottom: 0px;
            }

[id^='promo-related-video'] {
    border-right: 1px solid var(--brand-color-1);
    border-left: 1px solid var(--brand-color-1);
    background: var(--brand-color-1);
}

    @media only screen and (min-width: 900px) {

            [id^='promo-related-video'].promo-video-left .video-box {
                -webkit-box-ordinal-group: 3;
                    -ms-flex-order: 2;
                        order: 2
            }

            [id^='promo-related-video'].promo-video-left .video-desc-box {
                -webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                        order: 1;
            }

            [id^='promo-related-video'].promo-video-left .video-desc-box {
                padding-right: 40px;
                -webkit-box-align: start;
                    -ms-flex-align: start;
                        align-items: flex-start;
                padding-left: 100px;
                text-align: right;
            }
                [id^='promo-related-video'].promo-video-left .video-desc-box p, [id^='promo-related-video'].promo-video-left .video-desc-box h3{
                    text-align: right;
                }



        }

    [id^='promo-related-video'] .row {
        display: block;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin: 0 auto;
    }

    @media only screen and (min-width:900px)
        {

    [id^='promo-related-video'] .row {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex
    }
        }

    @media only screen and (min-width:900px) {

    [id^='promo-related-video'] .video-box {
            -ms-flex-preferred-size: 50%;
                flex-basis: 50%;
            width: 50%;
            -webkit-box-flex: unset;
                -ms-flex-positive: unset;
                    flex-grow: unset
    }
        }

    [id^='promo-related-video'] .video-box video {
            width: 100%;
            height: 100%;
            -o-object-fit: fill;
               object-fit: fill;
        }

    [id^='promo-related-video'] .video-desc-box {
        text-align: center;
        padding: 30px 15px 30px 15px;
        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;
        -ms-flex-preferred-size: 400px;
            flex-basis: 400px;
        -webkit-box-flex: 1;
            -ms-flex: 1;
                flex: 1;
    }

    @media only screen and (min-width:900px) {

    [id^='promo-related-video'] .video-desc-box {
            padding-left: 40px;
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            padding-right: 100px;
            text-align: left;
            width: 50%
    }
        }

    [id^='promo-related-video'] .video-desc-box>p {
            width: 100%;
            /* font-size: var(--fs-h6-d); */
            margin-bottom: 5px;
            margin-top: 0px;
            text-align: center;
        }

    @media only screen and (min-width:900px) {

    [id^='promo-related-video'] .video-desc-box>p {
                /* font-size: var(--fs-h2-m); */
                text-align: left
        }
            }

    [id^='promo-related-video'] .video-desc-box>h3 {
            /* font-family:var(--ff-body);
            /* font-size: var(--fs-h3-d); */
            /* font-style: normal; */
            /* font-weight: 400; */
            /* line-height: 110%; */
            margin-bottom: 20px;
        }

    /* 33px */

    [id^='promo-related-video'] .video-desc-box>h3 em{
                font-style: normal;
            }

    @media only screen and (min-width: 900px) {

    [id^='promo-related-video'] .video-desc-box>h3 {
                /* font-size: var(--fs-xxlg); */
        }
            }

    [id^='promo-related-video'] .video-desc-box > .author-name{
            font-weight: var(--fw-medium);
            line-height: var(--fs-xxlg);
        }

    [id^='promo-related-video'] .video-desc-box>.author-post {
            font-size: var(--fs-xs);
            text-align: center;
            font-weight: var(--fw-medium);
            line-height: var(--lh-m);
        }

    @media only screen and (min-width:900px) {

    [id^='promo-related-video'] .video-desc-box>.author-post {
                font-size: var(--fs-m);
                text-align: left
        }
            }

.background-freshgreen {
    background-color: var(--brand-color-1);
}

    .background-freshgreen .rich-text h3 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 34px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

    /* 37.4px */

    @media(min-width: 62rem) {

    .background-freshgreen .rich-text h3 {
                font-size: 54px
        }
            }

    .background-freshgreen .rich-text h3 em {
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                line-height: 110%;
            }

    @media(min-width: 62rem) {

    .background-freshgreen .rich-text h3 em {
                    font-size: 56px
            }
                }

    .background-freshgreen .rich-text h4 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 25px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

    /* 37.4px */

    @media(min-width: 62rem) {

    .background-freshgreen .rich-text h4 {
                font-size: 40px
        }
            }

    .background-freshgreen .rich-text h4 em {
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 27px;
                font-style: normal;
                line-height: 110%;
            }

    @media(min-width: 62rem) {

    .background-freshgreen .rich-text h4 em {
                    font-size: 42px
            }
                }

    .background-freshgreen .rich-text p {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-Intro */
            font-family: var(--ff-body);
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%;
        }

    .background-freshgreen .rich-text p a{
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
            }

    /* 24px */

    @media(min-width: 62rem) {

    .background-freshgreen .rich-text p {
                font-size: 18px
        }
            }

.background-waterblue {
    background-color: var(--upfield-waterblue);
}

.background-waterblue .rich-text h3 {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 34px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-waterblue .rich-text h3 {
                font-size: 54px
        }
            }

.background-waterblue .rich-text h3 em {
                color: #0D3B30;
                color: var(--heading-color, #0D3B30);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-waterblue .rich-text h3 em {
                    font-size: 56px
            }
                }

.background-waterblue .rich-text h4 {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 25px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-waterblue .rich-text h4 {
                font-size: 40px
        }
            }

.background-waterblue .rich-text h4 em {
                color: #0D3B30;
                color: var(--heading-color, #0D3B30);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-waterblue .rich-text h4 em {
                    font-size: 56px
            }
                }

.background-waterblue .rich-text p {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-Intro */
            font-family: var(--ff-body);
            font-size: 16px;
            font-style: normal;
            line-height: 150%;
        }

/* 24px */

@media(min-width: 62rem) {

.background-waterblue .rich-text p {
                font-size: 18px
        }
            }

.background-kale {
    background-color: var(--heading-color);
}

.background-kale .rich-text a{
            color: #faf5eb;
            color: var(--color-white,#faf5eb);
        }

.background-kale .rich-text h3 {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 34px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-kale .rich-text h3 {
                font-size: 54px
        }
            }

.background-kale .rich-text h3 em {
                color: var(--brand-color-1);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-kale .rich-text h3 em {
                    font-size: 56px
            }
                }

.background-kale .rich-text h4 {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 25px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-kale .rich-text h4 {
                font-size: 40px
        }
            }

.background-kale .rich-text h4 em {
                color: var(--brand-color-1);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 27px;
                font-style: normal;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-kale .rich-text h4 em {
                    font-size: 43px
            }
                }

.background-kale .rich-text p {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-Intro */
            font-family: var(--ff-body);
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%;
        }

/* 24px */

@media(min-width: 62rem) {

.background-kale .rich-text p {
                font-size: 18px
        }
               
            }

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

.background-coconut .rich-text h3 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 34px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-coconut .rich-text h3 {
                font-size: 54px
        }
            }

.background-coconut .rich-text h3 em {
                color: #55BD6B;
                color: var(--brand-color-1, #55BD6B);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 27px;
                font-style: normal;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-coconut .rich-text h3 em {
                    font-size: 42px
            }
                }

.background-coconut .rich-text h4 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 25px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-coconut .rich-text h4 {
                font-size: 40px
        }
            }

.background-coconut .rich-text h4 em {
                color: #55BD6B;
                color: var(--brand-color-1, #55BD6B);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-coconut .rich-text h4 em {
                    font-size: 43px
            }
                }

.background-coconut .rich-text p {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-Intro */
            font-family: var(--ff-body);
            font-size: 16px;
            font-style: normal;
            font-weight: 600;
            line-height: 150%;
        }

/* 24px */

@media(min-width: 62rem) {

.background-coconut .rich-text p {
                font-size: 18px
        }
            }

.background-pumpkin {
    background-color: var(--Upfield-pumpkin);
}

.background-pumpkin .rich-text a{
            color: #faf5eb;
            color: var(--color-white,#faf5eb);
        }

.background-pumpkin .rich-text h3 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 34px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-pumpkin .rich-text h3 {
                font-size: 54px
        }
            }

.background-pumpkin .rich-text h3 em {
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                font-weight: 400;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-pumpkin .rich-text h3 em {
                    font-size: 56px
            }
                }

.background-pumpkin .rich-text h4 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 25px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-pumpkin .rich-text h4 {
                font-size: 40px
        }
            }

.background-pumpkin .rich-text h4 em {
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                font-weight: 400;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-pumpkin .rich-text h4 em {
                    font-size: 56px
            }
                }

.background-pumpkin .rich-text p {
            color: #FAF5EB;
            color: var(--color-white, #FAF5EB);
            /* M-Intro */
            font-family: var(--ff-body);
            font-size: 16px;
            font-style: normal;
            line-height: 150%;
        }

/* 24px */

@media(min-width: 62rem) {

.background-pumpkin .rich-text p {
                font-size: 18px
        }
            }

.background-marigold {
    background-color: #FDBC40;
    background-color: var(--upfield-marigold, #FDBC40);
}

.background-marigold .instagram-profile-feed h2 em{
                color: var(--color-white);
            }

.background-marigold .rich-text h3 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 34px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-marigold .rich-text h3 {
                font-size: 54px
        }
            }

.background-marigold .rich-text h3 em {
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                font-weight: 400;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-marigold .rich-text h3 em {
                    font-size: 56px
            }
                }

.background-marigold .rich-text h4 {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);
            /* M-H1-Sub */
            font-family: var(--ff-body);
            font-size: 25px;
            font-style: normal;
            font-weight: 500;
            line-height: 110%;
        }

/* 37.4px */

@media(min-width: 62rem) {

.background-marigold .rich-text h4 {
                font-size: 40px
        }
            }

.background-marigold .rich-text h4 em {
                color: #FAF5EB;
                color: var(--color-white, #FAF5EB);
                /* M-H1-Sub-Serif */
                font-family: var(--ff-headings);
                font-size: 36px;
                font-style: normal;
                font-weight: 400;
                line-height: 110%;
            }

@media(min-width: 62rem) {

.background-marigold .rich-text h4 em {
                    font-size: 56px
            }
                }

.background-marigold .rich-text p {
            color: #0D3B30;
            color: var(--heading-color, #0D3B30);;
            /* M-Intro */
            font-family: var(--ff-body);
            font-size: 16px;
            font-style: normal;
            font-weight: 500;
            line-height: 150%;
        }

/* 24px */

@media(min-width: 62rem) {

.background-marigold .rich-text p {
                font-size: 18px
        }
            }

.background-marigold .brand-content .brand-title em{
                color: var(--color-white);
            }
.background-waterblue h2{
        color: var(--heading-color);    
    }
@media (min-width: 100rem) {.recipe-v3 > .component-content {
      overflow: hidden
  }
    }
  .recipe-v3 ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
    margin: 0 -5px;
  }
  @media (min-width: 48rem) {
  .recipe-v3 ul {
      margin: 0 -10px
  }
    }
  .recipe-v3 ul li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 100%;
              flex: 0 0 100%;
      padding: 0 5px;
    }
  @media (min-width: 48rem) {
  .recipe-v3 ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
        padding: 0 10px
    }
      }
  @media (min-width: 62rem) {
  .recipe-v3 ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 33.33%;
                flex: 0 0 33.33%
    }
      }
  .recipe-v3 ul li > a.active,
        .recipe-v3 ul li > a:hover,
        .recipe-v3 ul li > a:focus {
          text-decoration: none;
        }
  .recipe-v3.small-card ul li {
    -webkit-box-flex: 0;
        -ms-flex: 0 0 50%;
            flex: 0 0 50%;
  }
  @media (min-width: 48rem) {
  .recipe-v3.small-card ul li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 33.33%;
              flex: 0 0 33.33%
  }
    }
  @media (min-width: 62rem) {
  .recipe-v3.small-card ul li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 25%;
              flex: 0 0 25%
  }
    }
  .recipe-v3.recipe-carousel ul {
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
    overflow: visible;
  }
  @media (max-width: 47.9375rem) {
  .recipe-v3.recipe-carousel ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 89%;
                flex: 0 0 89%
    }
      }

.recipe-card-v3 {
  /* border-radius: var(--border-radius-xl); */
  margin-bottom: var(--s);
  background: var(--recipie-card-slider-full-bg-color);
}

.recipe-card-v3.active,
  .recipe-card-v3:hover,
  .recipe-card-v3:focus {
    -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
  }

.recipe-card-v3 .recipe-card-image-container {
    /* border-radius: var(--border-radius-xl); */
    background: var(--recipe-card-slider-image-container-bg-color);
  }

.recipe-card-v3 .recipe-image-wrapper {
    padding-top: 56%;
    position: relative;
  }

.recipe-card-v3 .recipe-image-wrapper > img {
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      -o-object-fit: cover;
         object-fit: cover;
      /* border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0; */
    }

.recipe-card-v3 .recipe-card-content-wrapper {
    padding: var(--m-s) 20px;
    text-align: center;
    min-height: 108px;
  }

@media (min-width: 62rem) {

.recipe-card-v3 .recipe-card-content-wrapper {
      text-align: left;
      min-height: 120px
  }
    }

@media (max-width: 61.9375rem) {

.recipe-card-v3 .recipe-card-content-wrapper {
      text-align: left;
      padding: 15px 14px
  }
      .recipe-card-v3 .recipe-card-content-wrapper .star-rating-card-container {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
      }
    }

a:hover .recipe-card-v3 .recipe-card-content-wrapper .recipe-card-title,
    a:focus .recipe-card-v3 .recipe-card-content-wrapper .recipe-card-title {
      /* word-break: keep-all; */
      -webkit-line-clamp: unset;
    }

.recipe-card-v3 .recipe-card-content-wrapper .recipe-card-title {
      margin: 0;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      /* font-weight: 900; */
      height: 40px;
      /* font-family: var(--ff-body); */
      font-size: 18px;
      line-height: 19.8px;
      text-align: center;
      color: var(--recipe-card-title-text-color);
    }

@media (min-width: 62rem) {

.recipe-card-v3 .recipe-card-content-wrapper .recipe-card-title {
        font-size: 25px;
        height: 57px;
        line-height: 27.5px;
        text-align: center
    }
      }

.recipe-card-v3 .recipe-card-specs {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 13px 0;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    font-family: var(--ff-body);
    border-radius: 0 0 var(--border-radius-xl) var(--border-radius-xl);
  }

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

.recipe-card-v3 .recipe-card-specs span {
      display: -webkit-inline-box;
      display: -ms-inline-flexbox;
      display: inline-flex;
      /* margin-right: var(--s-m); */
      vertical-align: middle;
      color: var(--recipe-card-specs-text-color);
      /* font-size: var(--fs-small-m);
      line-height: 15px; */
      font-weight: 900;
      margin-right: 8px;
    }

@media (max-width: 47.9375rem) {

.recipe-card-v3 .recipe-card-specs span {
        font-size: 11px
    }
      }

@media (min-width: 62rem) {

.recipe-card-v3 .recipe-card-specs span {
        /* font-size: var(--fs-small-d);
        line-height: 17px; */
    }
      }

.recipe-card-v3 .recipe-card-specs .recipe-specs-value.field-cooktime {
      display: none;
    }

.recipe-card-v3 .recipe-card-specs .recipe-specs-value.field-readyin {
      display: none;
    }

.recipe-card-v3 .recipe-card-specs .recipe-specs-text {
      display: none;
    }

.recipe-card-v3 .badge-recipecard {
    left: var(--s-xs);
    bottom: var(--s-xs);
    position: absolute;
  }

.small-card .recipe-card-v3 .recipe-image-wrapper {
    padding-top: 100%;
   
  }

@media (min-width: 75rem) {

.small-card .recipe-card-v3 .recipe-image-wrapper {
      padding-top: 69%
   
  }
    }

@media (max-width: 74.9375rem) {

.small-card .recipe-card-v3 .recipe-image-wrapper > img {
        border-radius: var(--border-radius-xl)
    }
      }

.small-card .recipe-card-v3 .recipe-card-content-wrapper {
    text-align: center;
    min-height: 105px;
    padding: 15px 14px;
  }

@media (min-width: 62rem) {

.small-card .recipe-card-v3 .recipe-card-content-wrapper {
      padding: 15px 20px;
      min-height: 120px
  }
    }

.small-card .recipe-card-v3 .recipe-card-content-wrapper .star-rating-card-container {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }

@media (max-width: 61.9375rem) {

.small-card .recipe-card-v3 .recipe-card-content-wrapper .recipe-card-title {
        font-size: var(--fs-l)
    }
      }

.small-card .recipe-card-v3 .recipe-card-specs {
    display: none;
  }

@media (min-width: 75rem) {

.small-card .recipe-card-v3 .recipe-card-specs {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      padding-left: 5px;
      padding-right: 5px
  }
    }

@media (min-width: 62rem) {

.small-card .recipe-card-v3 .recipe-card-specs span{
        font-size: 13px
    }
      }

@media (max-width: 74.9375rem) {

.small-card .recipe-card-v3 .recipe-card-specs span{
        font-size: 11px
    }
      }

/* search result property for recipe search pages */

@media (min-width: 62rem) {

#filter-results-wrapper .recipe-v3.small-card ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 33.33%;
                  flex: 0 0 33.33%
      }
        }

@media (min-width: 62rem) {

#filter-results-wrapper .recipe-v3.small-card.show ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 25%;
                  flex: 0 0 25%
      }
        }
.related-recipes-global .related-recipes{
  text-align: left;
  background: none;
  margin-bottom: 12px;
  padding: 0;
}
@media (min-width: 62rem) {
.related-recipes-global .related-recipes{
  margin-bottom: 24px
}
  }
[dir='rtl'] .related-recipes-global .related-recipes{
  text-align: revert;
}
#recipe-download-print{
    padding-top: var(--s-m);
    padding-left: 0;
    padding-right: 0;
}
    #recipe-download-print ul{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
    }
    @media (max-width: 61.9375rem) {
    #recipe-download-print ul{
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center
    }
        }
    @media (min-width: 62rem) {
    #recipe-download-print ul{
            margin-left: var(--s-xxl);
            margin-left: 0
    }
        }
    #recipe-download-print ul > li{
            margin: 0 var(--s-s) var(--s-m);
        }
    @media (min-width: 62rem) {
    #recipe-download-print ul > li{
                margin: 0 var(--s-m) var(--s-m) 0
        }
            }
    #recipe-download-print ul > li a.btn{
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
            }
    #recipe-download-print ul > li a.btn::after{
                    height: 16px;
                    margin-left: var(--s-s);
                    margin-bottom: 10px;
                }
    [dir='rtl'] #recipe-download-print ul > li a.btn::after {
                        margin-right: var(--s-s);
                        margin-left: 0;
                    }
    #recipe-download-print ul > li a.btn:focus {
                    opacity: 1;
                }
    #recipe-download-print ul > li a.btn.download-recipe::after{
                    content: url(`../../../Images/download.svg`);
                    -webkit-filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
                            filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
                }
    #recipe-download-print ul > li a.btn.print-recipe::after{
                    content: url(`../../../Images/print.svg`);
                    -webkit-filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
                            filter: invert(100%) sepia(100%) saturate(13%) hue-rotate(237deg) brightness(104%) contrast(104%);
                }

.logo-for-pdf {
    visibility: hidden;
    width: 0;
    height: 0;
}
.my-rating,
.my-product-rating {
    list-style: none;
    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;
    margin: 0;
}
    
    .my-rating .star, .my-product-rating .star {
        position: relative;
    }
    
    .my-rating .star svg, .my-product-rating .star svg {
            stroke: var(--filled-star-color);
            stroke-width: 2px;
        }
    
    @media (max-width: 47.9375rem) {
    
    .my-rating .star svg, .my-product-rating .star svg {
                width: 32px
        }
            }
    
    .my-rating:not(.rated) .star svg, .my-product-rating:not(.rated) .star svg {
                fill: var(--color-white);
            }
    
    .my-rating:not(.rated):hover .star svg, .my-product-rating:not(.rated):hover .star svg {
                    fill: var(--filled-star-color);
                }
    
    .my-rating:not(.rated):hover .star:hover~.star svg, .my-product-rating:not(.rated):hover .star:hover~.star svg {
                        fill: var(--color-white);
                    }
    
    .my-rating.rated .star svg, .my-product-rating.rated .star svg {
                fill: var(--filled-star-color);
            }
    
    .my-rating.rated .star.active~.star svg, .my-product-rating.rated .star.active~.star svg {
                fill: var(--color-white);
            }

.star-rating-container {
    margin-bottom: 24px;
}

.star-rating-container,
.avg-rating {
    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;
}

.avg-rating {
    margin-right: var(--s-s);
}

.avg-rating .star {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.avg-rating .star svg {
            fill: var(--filled-star-color);
            stroke: var(--filled-star-color);
        }

[dir='rtl'] .avg-rating .star svg {
                -webkit-transform: scaleX(-1);
                        transform: scaleX(-1);
            }

.avg-rating .star.active~.star svg {
            fill: var(--plain-star-color);
        }

.be-first-container,
#upfield-star-rating {
    display: none;
}

.be-first-container {
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    padding-bottom: var(--s-m);
    cursor: pointer;
}

.be-first-container .star {
        margin-right: 5px;
        height: 24px;
    }

.be-first-container .star svg {
            fill: var(--plain-star-color);
            stroke: var(--filled-star-color);
            stroke-width: 2px;
        }

.be-first-container .be-first-text {
        margin-bottom: 0;
    }

.starrating.starrating--small,
.average-count-container,
.add-rating-container {
    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;
}

.add-rating-container .star {
        margin-right: var(--s-s);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
    }

.add-rating-container .star svg {
            fill: var(--plain-star-color);
            stroke: var(--filled-star-color);
        }

.add-rating-container .star.filled svg {
                fill: var(--filled-star-color);
            }

.add-rating-container .star-count {
        margin-right: var(--s-xs);
    }

.rating-separator {
    height: 40px;
    margin: 0 10px;
    width: 1px;
    background-color: var(--separator-line);
}

@media (min-width: 62rem) {

.rating-separator {
        margin: 0 24px
}
    }

.average-count-container p {
        font-size: 15px;
        margin-bottom: 0;
        margin-right: var(--s-xs);
    }

.scroll-to-view {
    color: var(--text-color);
    font-size: var(--fs-xs);
}

[dir='rtl'] .scroll-to-view {
        margin-right: 4px;
    }

@media (min-width: 48rem) {

.scroll-to-view {
        font-size: var(--fs-s)
}
    }

.scroll-to-view:hover {
        color: var(--text-color);
        text-decoration: none;
    }


.my-recipe-star-rating {
    padding: 32px 15px;
}


.my-recipe-star-rating .rate-here-container {
        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;
        -webkit-box-orient: vertical;
        -webkit-box-direction: normal;
            -ms-flex-direction: column;
                flex-direction: column;
    }


@media (min-width: 62rem) {


.my-recipe-star-rating .rate-here-container {
            -webkit-box-orient: horizontal;
            -webkit-box-direction: normal;
                -ms-flex-direction: row;
                    flex-direction: row
    }
        }


.my-recipe-star-rating .rate-here-container .rate-here-text {
            margin-bottom: 16px;
            text-align: center;
            padding: 0 14px;
        }


@media (min-width: 62rem) {


.my-recipe-star-rating .rate-here-container .rate-here-text {
                margin-right: 32px;
                margin-bottom: 0;
                padding: 0
        }
            }

.loading-in-progress .star-rating-recipe-card {
    display: none !important;
}



.star-rating-recipe-card {
    max-width: 120px;
    display: none;
}



.star-rating-recipe-card .star-rating-card-container {
        position: absolute;
        color: var(--color-white);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        bottom: 8px;
        right: 8px;
        padding: 7px 9px;
        background-color: var(--color-black);
    }



.star-rating-recipe-card .star-rating-card-container .star {
            margin-right: 4px;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }



[dir='rtl'] .star-rating-recipe-card .star-rating-card-container .star {
                margin-right: 0px; 
            }



.star-rating-recipe-card .star-rating-card-container .star svg {
                fill: var(--color-rating-yellow);
            }



.star-rating-recipe-card .star-rating-card-container .star-icon {
            background-image: url(`../../../Images/star.svg`);
            width: 20px;
            height: 19px;
            background-size: cover;
            margin-right: 5px;
            -webkit-filter: invert(66%) sepia(86%) saturate(489%) hue-rotate(9deg) brightness(210%) contrast(97%);
                    filter: invert(66%) sepia(86%) saturate(489%) hue-rotate(9deg) brightness(210%) contrast(97%);
        }



.star-rating-recipe-card .star-rating-card-container .star-count {
            margin-right: 4px;
            font-size: var(--fs-xs);
        }



.star-rating-recipe-card .star-rating-card-container .total-count {
            font-size: var(--fs-xs);
        }



[dir='rtl'] .star-rating-recipe-card .star-rating-card-container .total-count {
                margin-right: 4px; 
            }



.star-rating-recipe-card.v2 {
        max-width: none;
    }



.star-rating-recipe-card.v2 .star-rating-card-container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            position: unset;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            background-color: unset;
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            color: var(--text-color);
            padding: var(--m-s) 0 var(--s-s);
        }



.star-rating-recipe-card.v2 .star-rating-card-container .star {
                margin-right: 6px;
            }



.star-rating-recipe-card.v2 .star-rating-card-container .star svg {
                    margin: 1px;
                    fill: var(--filled-star-color);
                }



.star-rating-recipe-card.v2 .star-rating-card-container .star svg.active ~ svg {
                        fill: var(--plain-star-color);
                    }



.star-rating-recipe-card.v2 .star-rating-card-container .star svg path {
                        stroke: var(--filled-star-color);
                    }



.star-rating-recipe-card.v2 .star-rating-card-container .star-count {
                display: none;
            }



.star-rating-recipe-card.v2 .star-rating-card-container .total-count {
                font-family:Trade Gothic Next LT Pro;
                -webkit-transform: translateY(2px);
                        transform: translateY(2px);
            }

/* V1 templates */
.recipe-rating {
    padding-top: var(--s-xl);
}

.v4-star-card ul li .recipe-card-specs > div {
        width: 25%;
    }

@media (min-width: 62rem) and (max-width: 74.9375rem) {

.v4-star-card ul li .recipe-card-specs > div {
            width: auto
    }
        }

.v4-star-card .star-rating-recipe-card {
        padding-left: 13px !important;
        padding-top: 4px;
    }

@media (min-width: 62rem) and (max-width: 74.9375rem) {

.v4-star-card .star-rating-recipe-card {
            padding-left: 2px !important
    }
        }

[dir='rtl'] .v4-star-card .star-rating-recipe-card {
            padding-right: 26px !important;
            padding-left: 0px !important;
        }

@media (min-width: 62rem) and (max-width: 74.9375rem) {

[dir='rtl'] .v4-star-card .star-rating-recipe-card {
                padding-right: 4px !important
        }
            }

.v4-star-card .star-rating-recipe-card .star-rating-card-container {
            background: none;
            color: var(--text-color);
            position: unset;
            padding: 0;
        }

.v4-star-card .star-rating-recipe-card .star-rating-card-container .star-icon {
                background-image: url(`../../../Images/Starline.svg`);
                width: var(--s-l);
                height: var(--s-l);
                margin-right: var(--s-xs);
                vertical-align: middle;
            }

.v4-star-card .star-rating-recipe-card .star-rating-card-container .star-count {
                font-size: var(--fs-xs);
            }

.v4-star-card .star-rating-recipe-card .star-rating-card-container .total-count {
                display: none;
            }

.v4-star-card .star-rating-recipe-card .star-rating-card-container .total-count-label {
                display: none;
            }

.v4-star-card .star-rating-recipe-card .star-rating-card-container .star svg {
                fill: var(--color-white);
                stroke: var(--filled-star-color);
                stroke-width: 1px;
                width: 20px;
                height: 20px;
            }

.label-hidden,
.label-hidden--star {
    width: 0px;
    height: 0px;
    margin: 0;
    padding: 0;
    font-size: 0;
    color: var(--transparent);
    -webkit-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;
}

.label-hidden--star {
    position: absolute;
}

.input-radio-hidden {
    -webkit-appearance: none;
       -moz-appearance: none;
            appearance: none;
    width: 100%;
    height: 100%;
    position: absolute;
}
.save-recipe-container {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 40px;
    height: 40px;
    display: block;
    text-align: -webkit-center;
    background: rgba(255, 255, 255, 0.8);
    -webkit-box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.15);
            box-shadow: 0px 4px 12px 6px rgba(0, 0, 0, 0.15);
    border-radius: 20px;
    cursor: pointer;
}
    .save-recipe-container.detail-page {
        position: static;
        position: initial;
        min-width: -webkit-fit-content;
        min-width: -moz-fit-content;
        min-width: fit-content;
        background-color: var(--save-recipe-bg);
        border-radius: 8px;
        padding: 8px 12px;
        -webkit-transform: none;
                transform: none;
        margin-left: auto;
        margin-right: 10px;
        z-index: 1;
        margin-bottom: 10px;
    }
    @media(min-width: 36rem){
    .save-recipe-container.detail-page {
            margin-right: -40px;
            margin-bottom: -40px
    }
        }
    [dir='rtl'] .save-recipe-container.detail-page{
            margin-left: 10px;
            margin-right: auto;
        }
    @media(min-width: 36rem){
    [dir='rtl'] .save-recipe-container.detail-page{
                margin-right: auto;
                margin-left: -40px
        }
            }
    .save-recipe-container.detail-page .save-icon-text {
            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;
        }
    .save-recipe-container.detail-page .save-icon-text .heart-icon{
                top: 0;
                margin-right: 10px;
            }
    [dir='rtl'] .save-recipe-container.detail-page .save-icon-text .heart-icon{
                    margin-left: 10px;
                    margin-right: 0;
                }
    .save-recipe-container.detail-page .save-icon-text .save-text {
                display: block;
            }
    .save-recipe-container.detail-page .save-icon-text .saved-text {
                display: none;
            }
    .save-recipe-container.detail-page .notification-section{
            display: none;
            position: absolute;
            left: 10px;
            right: 10px;
            top: 5vw;
            background: var(--save-recipe-bg);
            padding: 16px;
            max-width: -webkit-fit-content;
            max-width: -moz-fit-content;
            max-width: fit-content;
            margin-left: auto;
            margin-right: auto;
        }
    .save-recipe-container.detail-page .notification-section .saved-notification-text {
                display: none;
            }
    .save-recipe-container.detail-page .notification-section.fadein-fadeout {
                -webkit-animation: fadeinout 4s;
                        animation: fadeinout 4s;
                display: block;
            }
    .save-recipe-container.detail-page.saved .save-icon-text .save-text {
                    display: none;
                }
    .save-recipe-container.detail-page.saved .save-icon-text .saved-text {
                    display: block;
                }
    .save-recipe-container.detail-page.saved .notification-section .saved-notification-text {
                    display: block;
                }
    .save-recipe-container.detail-page.saved .notification-section .unsave-notification-text {
                    display: none;
                }
    .save-recipe-container .heart-icon {
        position: relative;
        top: 10px;
        width: 21px;
        height: 20px;
        background: url('/-/media/Themes/Upfield/Brands/Solo/Solo/images/heart-icon') no-repeat;
    }
    .save-recipe-container.saved .heart-icon{
            background: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/Images/Filled-heart-icon') no-repeat;
          }
    .save-recipe-container:hover{
       -webkit-box-shadow: 0px 4px 12px 3px rgba(0, 0, 0, 0.15);
               box-shadow: 0px 4px 12px 3px rgba(0, 0, 0, 0.15);
    }
    .save-recipe-container:focus{
        -webkit-box-shadow: 0px 4px 12px 3px rgba(0, 0, 0, 0.15);
                box-shadow: 0px 4px 12px 3px rgba(0, 0, 0, 0.15);
    }
    .save-recipe-container:focus .heart-icon{
            background: url('/-/media/Themes/Upfield/Whitelabels/Whitelabel/Whitelabel/Images/Filled-heart-icon') no-repeat;
        }

@-webkit-keyframes fadeinout {
    0%,100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}

@keyframes fadeinout {
    0%,100% {
        opacity: 0;
    }

    50% {
        opacity: 1;
    }
}
.bg-overlay {
    position: fixed;
    top: 0;
    bottom: 0;
    right: 0;
    left: 0;
    background: var(--pop-up-background-overlay);
    z-index: 2000;
}
.bg-overlay .anonymous-user{
        height: -webkit-fit-content;
        height: -moz-fit-content;
        height: fit-content;
        width: 345px;
        max-width: 345px;
        min-width: 345px;
        position: fixed;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        background-color: var(--color-white);
        -webkit-box-shadow: var(--box-shadow-cards);
                box-shadow: var(--box-shadow-cards);
        z-index: 500;
        padding: var(--s-l) var(--s);
        margin: auto;
        cursor: pointer;
    }
@media(min-width: 62rem){
.bg-overlay .anonymous-user{
            width: 648px;
            min-width: 648px;
            max-width: 648px
    }
        }
.bg-overlay .anonymous-user .btn-close {
            text-align: right;
            line-height: 0;
            margin-bottom: var(--s-s);
            margin-right: calc(var(--s-s)/2);
            margin-top: calc(var(--s-s)/2);
        }
.bg-overlay .anonymous-user .pop-up-msg {
            margin-top: calc(var(--s-s)/2);
        }
.bg-overlay .anonymous-user .pop-up-msg h4{
                margin-bottom: calc(var(--s-s)/2);
            }
.bg-overlay .anonymous-user .btn-section {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
        }
.bg-overlay .anonymous-user .btn-section .btn-create{
                padding-left: var(--s);
                padding-right: var(--s);
            }
.overflw-hd{
    overflow: hidden;
    pointer-events: none;
}
.p-events{
    pointer-events: visible;
}
.review {
    text-align: center;
}

    .review .feedback-heading .title {
            padding: var(--s-xl) 0 2px;
        }

    .review .feedback-heading .title .rating-title {
                margin-bottom: var(--s-xxl);
            }

    .review .feedback-heading .title .rating-title * {
                    margin-bottom: 0;
                }

    .review .feedback-heading .title .review-title * {
                margin-bottom: 0;
            }

    .review .feedback-heading .description {
            padding-bottom: var(--s-l);
        }

    .review .feedback-content .review-text {
            width: 100%;
            height: 144px;
            resize: none;
            border: 0;
            -webkit-appearance: none;
               -moz-appearance: none;
                    appearance: none;
            margin-bottom: var(--s-s);
            padding: var(--s-m) var(--s-l);
            -webkit-box-shadow: var(--box-shadow-textarea);
                    box-shadow: var(--box-shadow-textarea);
            --box-shadow-textarea: 0px 4px 12px rgba(0, 0, 0, 0.25);
        }

    .review .feedback-content .review-text::-webkit-scrollbar {
                width: 6px;
            }

    .review .feedback-content .review-text::-webkit-scrollbar-thumb {
                border-radius: var(--border-radius-xs);
                background-color: var(--color-light-gray);
            }

    .review .feedback-content .review-text::-webkit-scrollbar-thumb:hover {
                    background-color: var(--color-medium-light-gray);
                }

    .review .feedback-content .submit[disabled] {
            opacity: 0.5;
            cursor: default;
            -webkit-transform: none;
                    transform: none;
        }

    .review .feedback-content .skip-link {
            display: block;
            margin: var(--s-l) auto 0;
            cursor: pointer;
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
            color: var(--text-color);
            font-size: var(--fs-button);
            text-decoration: none;
        }

    .review .feedback-content .skip-link:hover {
                opacity: 0.8;
            }

    .review .feedback-content .validation {
            color: var(--error-color);
            text-align: left;
        }

    [dir='rtl'] .review .feedback-content .validation {
                text-align: right;
            }

    .review .feedback-content .validation .status {
                padding-bottom: var(--s-m);
                display: inline-block;
            }

    .review .feedback-content .validation .status:empty {
                    display: none;
                }

    .review .feedback-success {
        min-height: calc(100vh - 96px);
        padding: var(--s-xl) 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        opacity: 1;
    }

    @media (min-width: 48rem) {

    .review .feedback-success {
            min-height: 446px;
            max-height: calc(100% - 96px)
    }
        }

    .review .feedback-success.opac-0 {
            opacity: 0;
        }

    .review .feedback-success .thank-you {
            margin: auto;
        }

    .review .feedback-success .title * {
            margin-bottom: 2px;
        }

    .review .feedback-request.move {
        margin-left: -100%;
    }

    .review .screen {
        min-width: 100%;
        -webkit-transition: margin-left var(--transition-timing-slow), 
                    opacity var(--transition-timing-slow);
        transition: margin-left var(--transition-timing-slow), 
                    opacity var(--transition-timing-slow);
    }

    @media (min-width: 48rem) {

    .review .screen {
            min-width: 634px
    }
        }

/* Modal styles */

.modal-wrapper {
    top: 0;
    left: 0;
    padding: 0;
    opacity: 1;
    width: 100%;
    height: 100%;
    z-index: 99999;
    position: fixed;
    -webkit-transition: opacity var(--transition-timing-slow);
    transition: opacity var(--transition-timing-slow);
    background: var(--overlay-bg-light);
    --overlay-bg-light: rgba(var(--color-black-rgb), 0.2);        
}

.modal-wrapper.opac-0 {
        opacity: 0;
    }

.modal {
    top: 50%;
    left: 50%;
    opacity: 1;
    position: relative;
    max-width: 730px;
    overflow-y: scroll;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
    background: var(--color-white);
    -webkit-transition: opacity var(--transition-timing-slow);
    transition: opacity var(--transition-timing-slow);
    -webkit-box-shadow: var(--box-shadow-narrow-medium);
            box-shadow: var(--box-shadow-narrow-medium);
    --box-shadow-narrow-medium: 0 1rem 1.25rem rgba(102, 102, 102, 0.3);
}

[dir="rtl"] .modal {
        left: unset;
        right: 50%;
        -webkit-transform: translate(50%,-50%);
                transform: translate(50%,-50%);
    }

@media (max-width: 47.9375rem) {

.modal {
        min-width: 100%;
        min-height: 100%;
        height: 100%
}
    }

@media (min-width: 48rem) {

.modal {
        max-height: calc(100vh - 32px);
        scrollbar-width: thin /* Firefox */
}
        .modal::-webkit-scrollbar {
            width: 6px;
        }    
        .modal::-webkit-scrollbar-thumb {
            border-radius: var(--border-radius-xs);
            background-color: var(--color-light-gray);	
        }
            .modal::-webkit-scrollbar-thumb:hover {
                background-color: var(--color-medium-light-gray);
            }
    }

.modal.opac-0 {
        opacity: 0;
    }

.modal .modal-inner {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding: var(--s-xxl);
        -webkit-transform: none;
                transform: none;
        opacity: 1;
        -webkit-transition: opacity var(--transition-timing-slow), 
                    -webkit-transform var(--transition-timing-slow);
        transition: opacity var(--transition-timing-slow), 
                    -webkit-transform var(--transition-timing-slow);
        transition: transform var(--transition-timing-slow), 
                    opacity var(--transition-timing-slow);
        transition: transform var(--transition-timing-slow), 
                    opacity var(--transition-timing-slow), 
                    -webkit-transform var(--transition-timing-slow);
    }

@media (max-width: 47.9375rem) {

.modal .modal-inner {
            padding: var(--s-xxl) var(--s-m)
    }
        }

.modal .modal-inner.reveal {
            -webkit-transform: translateY(-32px);
                    transform: translateY(-32px);
            opacity: 0;
        }

.modal .modal-inner.hide-scroll {
            overflow: hidden;
        }

.modal .close {
        position: absolute;
        right: 0;
        top: 0;
        width: 24px;
        height: 24px;
        opacity: 1;
        margin: var(--s-m);
        padding: var(--s-xs);
        cursor: pointer;
    }

.modal .close:before,
        .modal .close:after {
            content: '';
            position: absolute;
            left: 10px;
            top: 4px;
            height: 17px;
            width: 2px;
            background-color: var(--color-black);
        }

.modal .close:before {
            -webkit-transform: rotate(45deg);
                    transform: rotate(45deg);
        }

.modal .close:after {
            -webkit-transform: rotate(-45deg);
                    transform: rotate(-45deg);
        }

#upfield-product-star-rating {
    display: none;
    margin: var(--m) 0;
}
    
    #upfield-product-star-rating > .star-rating-container {
        margin-bottom: 0;
    }
    
    #upfield-product-star-rating .average-count-container, 
    #upfield-product-star-rating .add-rating-container {
        font-size: var(--fs-s);
        font-weight: var(--fw-bold);
    }
    
    #upfield-product-star-rating .average-count-container p {
            font-size: var(--fs-s);
            margin: 0!important;            
        }
    
    #upfield-product-star-rating .average-count-container p#AvgRating {
                margin: 0 4px!important;
            }
    
    #upfield-product-star-rating .rating-separator {
        height: 48px;
        background-color: var(--overlay-bg-medium);
    }
    
    @media (max-width: 74.9375rem) {
    
    #upfield-product-star-rating .rating-separator {
            height: 25px
    }
        }
    
    @media (min-width: 75rem) {
    
    #upfield-product-star-rating .rating-separator {
            margin: 0 32px 0 24px
    }
        }
    
    #upfield-product-star-rating .avg-rating .star,
    #upfield-product-star-rating .add-rating-container .star {
        height: 24px;
    }
    
    #upfield-product-star-rating .add-rating-container .star {
        margin-right: 4px;
    }

.be-first-container.product-rating {
    cursor: unset;    
}

.be-first-container.product-rating .be-first-text {
        cursor: pointer;
        font-weight: var(--fw-bold);
        margin: var(--s-m) 0;
    }

.my-product-star-rating {
    text-align: center;
    padding: var(--s-xxl) var(--s-xl) var(--s-xl);
}

@media (min-width: 75rem) {

.my-product-star-rating {
        padding: var(--m-l) var(--s-xl) var(--s-xxl)
}
    }

.my-product-star-rating .rate-here-text {
        padding-bottom: var(--s-m);
        font-size: var(--fs-l);
        font-weight: var(--fw-bold);
        font-family: var(--ff-headings);
    }

@media (min-width: 75rem) {

.my-product-star-rating .rate-here-text {
            font-size: var(--fs-xl)
    }
        }

.my-product-star-rating .my-product-rating {
        width: -webkit-fit-content;
        width: -moz-fit-content;
        width: fit-content;
        margin: auto;
    }

.my-product-star-rating .my-product-rating .star {
            padding: 0 3px;
            cursor: pointer;
        }

@media (min-width: 75rem) {

.my-product-star-rating .my-product-rating .star {
                padding: 0 var(--s-xs)
        }
            }

.page-list-grid .star-rating-product-card ul{
        margin-right: 8px
    }

.star-rating-product-card {
    margin-bottom: 0;
}

.star-rating-product-card.hide {
        display: none;
    }

.star-rating-product-card .avg-rating .star {
            -webkit-box-flex: 1;
                -ms-flex: 1;
                    flex: 1;
            padding: 3px;
            margin-bottom: 0;
            margin-top: 0;
        }

.star-rating-product-card .product-rating-card-container {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        color: var(--text-color);
        font-weight: var(--fw-bold);
        font-size: var(--fs-s);
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
    }

.star-rating-product-card .product-rating-card-container .star {
            padding: 0;
            width: 18px;
            height: 18px;
            margin: 0 2px;
        }

@media (max-width: 61.9375rem) {

.star-rating-product-card .product-rating-card-container .star {
                width: 14px;
                height: 14px;
                margin: 0 1px
        }
            }

.star-rating-product-card .product-rating-card-container .star svg {
                fill: var(--filled-star-color);
            }

.star-rating-product-card .product-rating-card-container .star-icon {
            background-image: url(`../../../Images/star.svg`);
            width: 24px;
            height: 24px;
            background-size: cover;
            margin-right: 5px;
            -webkit-filter: invert(66%) sepia(86%) saturate(489%) hue-rotate(9deg) brightness(210%) contrast(97%);
                    filter: invert(66%) sepia(86%) saturate(489%) hue-rotate(9deg) brightness(210%) contrast(97%);
        }

.star-rating-product-card .product-rating-card-container .star-count {
            padding: 0 3px;
        }

.star-rating-product-card.show {
        padding-bottom: var(--s-l);
    }

.star-rating-product-card .average-count-container p {
        font-size: var(--fs-xs);
    }

.product-card .product-card-title.rating-below {
        -webkit-box-flex: unset;
            -ms-flex-positive: unset;
                flex-grow: unset; 
        margin-bottom: var(--m-xs);   
    }

.loading-in-progress .star-rating-product-card {
        display: none !important;
    }
.recipe-of-the-day .img-container img {
            border-radius: 20px;
            max-height: 215px;
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
        }

            @media (min-width: 48rem) {.recipe-of-the-day .img-container img {
                max-height: 402px
        }
            }
       .recipe-of-the-day .img-container .save-recipe-container {
            display: none;
            background: none;
            -webkit-box-shadow: none;
                    box-shadow: none;
            right: 22px;
            top: 8px;
        }
       .recipe-of-the-day .img-container .save-recipe-container::hover {
                -webkit-box-shadow: none;
                        box-shadow: none;
            }

    .recipe-of-the-day .content-container {

        margin-top: var( --s-m);
        text-align: center;
    }

    @media (min-width: 48rem) {

    .recipe-of-the-day .content-container {
            margin: auto 0;
            text-align: left
    }

            [dir='rtl'] .recipe-of-the-day .content-container {
                text-align: right;
            }
        }

    .recipe-of-the-day .content-container .star-rating-recipe-card.v2 .star-rating-card-container {
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center;
            padding: 0 0 14px;
        }

    @media (min-width: 48rem) {

    .recipe-of-the-day .content-container .star-rating-recipe-card.v2 .star-rating-card-container {
                -webkit-box-pack: left;
                    -ms-flex-pack: left;
                        justify-content: left
        }
            }

    .recipe-of-the-day .content-container .tag-name span {
            font-size: var(--fs-s);
            font-weight: var(--fw-h2);
            text-transform: capitalize;
            border-bottom: 1px solid;
            line-height: 22px;
        }

    .recipe-of-the-day .content-container .recipe-title {
            margin-top: 13px;
            margin-bottom: 8px;
        }

    .recipe-of-the-day .content-container .recipe-intro .field-shortdescription {
                display: block;
                overflow: hidden;
                max-width: 75ch;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 16px;
                font-size: var(--fs-l);
            }

    @media (min-width: 36rem) {

    .recipe-of-the-day .content-container .recipe-intro .field-shortdescription {
                    display: none
            }
                }

    .recipe-of-the-day .content-container .recipe-intro .field-introduction {
                /* display: none; */
                overflow: hidden;
                max-width: 75ch;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 16px;
                font-size: var(--fs-l);
            }

    @media (min-width: 36rem) {

    .recipe-of-the-day .content-container .recipe-intro .field-introduction {
                    display: block
            }
                }

    .recipe-of-the-day .content-container .recipe-intro .mobile-desc.field-introduction {
                display: block;
                overflow: hidden;
                max-width: 75ch;
                text-overflow: ellipsis;
                white-space: nowrap;
                margin-bottom: 12px;
                font-size: var(--fs-l);
            }

    @media (min-width: 36rem) {

    .recipe-of-the-day .content-container .recipe-intro .mobile-desc.field-introduction {
                    display: none
            }
                }

    .recipe-of-the-day .content-container .recipe-short-summary {
            padding-bottom: 12px;
        }

    .recipe-of-the-day .content-container .recipe-short-summary-value {
            margin-left: 6px;
            font-weight: var(--fw-h2);
        }

    .recipe-of-the-day .content-container .star-rating-recipe-card {
            max-width: -webkit-fill-available;
        }

    .recipe-of-the-day .content-container .star-rating-recipe-card .star-rating-card-container{
                position: static;
                position: initial;
                background-color : transparent;
            }

    .recipe-of-the-day .content-container .star-rating-recipe-card .star-rating-card-container .star svg{
                    width: 22px;
                    height: 22px;
                }
.recipe-header {
  -webkit-box-orient: vertical;
  -webkit-box-direction: reverse;
      -ms-flex-direction: column-reverse;
          flex-direction: column-reverse;
}

  @media (min-width: 48rem) {.recipe-header {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row
}
  }

  @media (min-width: 62rem) {

  .recipe-header .img-container {
      padding-left: 10px
  }
    }

  .recipe-header .img-container img {
      max-height: 215px;
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
    }

  @media (min-width: 48rem) {

  .recipe-header .img-container img {
        border-radius: var(--border-radius-xl);
        max-height: 512px;
        width: 610px
    }
      }

  .recipe-header .img-container .save-recipe-container {
      background: none;
      -webkit-box-shadow: none;
              box-shadow: none;
      right: var(--fs-xl);
      top: var(--s-s);
    }

  .recipe-header .img-container .save-recipe-container::hover {
        -webkit-box-shadow: none;
                box-shadow: none;
      }

  .recipe-header .content-container {
    text-align: center;
  }

  @media (min-width: 48rem) {

  .recipe-header .content-container {
      text-align: left;
      padding-right: 10px
  }
    }

  .recipe-header .content-container .star-rating-recipe-card.v2 .star-rating-card-container {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      padding: 0 0 var(--s-m);
    }

  @media (min-width: 62rem) {

  .recipe-header .content-container .star-rating-recipe-card.v2 .star-rating-card-container {
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center
    }
      }

  .recipe-header .content-container .tag-name {
      padding: 13px;
      text-align: center;
    }

  @media (min-width: 62rem) {

  .recipe-header .content-container .tag-name {
        padding: 0;
        margin-bottom: 13px;
        margin-top: -5px
    }
      }

  .recipe-header .content-container .tag-name span {
      font-size: 11px;
      font-weight: 900;
      text-transform: capitalize;
      border-bottom: 1px solid;
      line-height: 15.13px;
      text-align: center;
    }

  @media (min-width: 48rem) {

  .recipe-header .content-container .tag-name span {
        font-size: 13px;
        line-height: 17.88px
    }
      }

  .recipe-header .content-container .recipe-title {
      margin: 0 20px;
      text-transform: uppercase;
      text-align: center;
      margin-bottom: var(--s-s);
    }

  /* font-family: var(--ff-heading1);
      font-size: 38px;
      line-height: 41.8px;
      font-weight: var(--fw-regular); */

  @media (min-width: 48rem) {

  .recipe-header .content-container .recipe-title {
        /* font-size: 66px;
        line-height: 100%; */
    }
      }

  .recipe-header .content-container .recipe-intro .field-shortdescription {
        display: none;
      }

  .recipe-header .content-container .recipe-intro .field-introduction {
        display: none;
        overflow: hidden;
        max-width: 75ch;
        font-family: var(--ff-content);
        text-overflow: ellipsis;
        text-align: center;
        white-space: wrap;
        margin-bottom: var(--s-m);
        font-size: 18px;
        line-height: 28px;
        font-weight: 700px;
      }

  @media (min-width: 36rem) {

  .recipe-header .content-container .recipe-intro .field-introduction {
          display: block
      }
        }

  .recipe-header .content-container .recipe-intro .mobile-desc.field-introduction {
        display: none;
        overflow: hidden;
        max-width: 75ch;
        text-overflow: ellipsis;
        font-family: var(--ff-content);
        white-space: wrap;
        margin-bottom: var(--s-m);
        font-size: 16px;
        font-weight: 700px;
        line-height: 24px;
      }

  .recipe-header .content-container .recipe-short-summary {
      font-family: var(--ff-content);
      font-weight: 400px;
      font-size: 15px;
      line-height: 24px;
      text-align: center;
      padding-bottom: 24px;
    }

  @media (min-width: 48rem) {

  .recipe-header .content-container .recipe-short-summary {
        font-size: 17px;
        line-height: 28px;
        font-weight: 400px;
        padding-bottom: 24px
    }
      }

  .recipe-header .content-container .recipe-short-summary .recipe-short-summary-list li {
          display: -webkit-box;
          display: -ms-flexbox;
          display: flex;
          -webkit-box-pack: center;
              -ms-flex-pack: center;
                  justify-content: center;
        }

  .recipe-header .content-container .recipe-short-summary .recipe-short-summary-title {
        padding-left: var(--s-s);
      }

  [dir="rtl"] .recipe-header .content-container .recipe-short-summary .recipe-short-summary-title {
          padding-left: 0px;
          padding-right: var(--s-s);
        }

  .recipe-header .content-container .recipe-short-summary .recipe-short-summary-value {
        padding-left: var(--s-xs);
        font-weight: 700;
      }

  [dir="rtl"] .recipe-header .content-container .recipe-short-summary .recipe-short-summary-value {
          padding-left: 0px;
          padding-right: var(--s-xs);
        }

  .recipe-header .content-container .btn.btn-primary.recipe-link {
      margin-top: 20px;
    }

#specifications {
/* .tabs{
  .tabs-controls{
    border-bottom: 1px solid var(--brand-color-1);
    padding: 0;
    &:before{
      display: none;
    }
    .tab-item{
      background: none;
      margin-bottom: 0;
      a{
        padding: 12px 0;
        font-size: 17px;
        font-weight: 700;
        margin-right: 12px;
        border: none;
        &.active{
          color: var(--brand-color-1);
          border: none;
          border-bottom: 4px solid var(--brand-color-1);
          box-shadow: none;
          background: none;
          }
      }
      
    }
  }
} */
}

#specifications .recipe-detail-ingredients {
    font-family: var(--ff-content);
    font-size: 15px;
    line-height: 28px;
    font-weight: 400;
    margin-left: 13px;
  }

@media (min-width: 48rem) {

#specifications .recipe-detail-ingredients {
      width: 500px;
      font-size: 18px;
      line-height: 34px
  }
    }

[dir="rtl"] #specifications .recipe-detail-ingredients {
      padding-right: 0px;
    }

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

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

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

#specifications .recipe-detail-ingredients .recipe-ingredient-list li {
      font-family: var(--ff-content);
      font-size: 15px;
      line-height: 28px;
      font-weight: 400;
      margin-left: 0px;
    }

/* background: none; */

@media (min-width: 48rem) {

#specifications .recipe-detail-ingredients .recipe-ingredient-list li {
        width: 500px;
        font-size: 18px;
        line-height: 24px
    }
      }

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

#specifications .recipe-detail-instructions ol {
      counter-reset: my-awesome-counter;
      list-style: none;
      width: 348px;
      padding-top: 20px;
    }

#specifications .recipe-detail-instructions ol li {
        position: relative;
        list-style-type: none;
        line-height: 24px;
        font-family: var(--ff-content);
        font-weight: 400;
        font-size: 15px;
        padding-left: 44px;
        margin: 0 20px 12px 0;
      }

@media (min-width: 48rem) {

#specifications .recipe-detail-instructions ol li {
          margin: 0 0 20px 0;
          width: 566px;
          font-size: 17px;
          line-height: 28px;
          padding-left: 42px
      }

          [dir="rtl"] #specifications .recipe-detail-instructions ol li {
            padding-left: 0px;
            padding-right: 50px;
          }
        }

#specifications .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;
          font-family: var(--ff-content);
          line-height: 20px;
          content: counter(my-awesome-counter, decimal);
          counter-increment: my-awesome-counter;
          padding: 15px;
          font-weight: 400;
          font-size: 11px;
          width: 8px;
          left: 0;
          height: 23px;
          color: var(--brand-color-1);
          background-color: var(--brand-color-2);
          top: var(--s-xs);
          border-radius: var(--border-radius-rounded);
          text-align: center;
          border: none;
          margin-right: 12px;
          margin-top: -6px;
        }

@media (min-width: 48rem) {

#specifications .recipe-detail-instructions ol li::before {
            width: var(--s-l);
            height: var(--s-l);
            font-size: 13px;
            line-height: 23px
        }
          }

#specifications .my-recipe-star-rating {
    padding: 20px 15px;
  }

@media (min-width: 62rem) {

#specifications .my-recipe-star-rating {
      padding: 25px 15px
  }
    }

#specifications .my-recipe-star-rating .rate-here-container {
      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;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      border: 1px solid;
      border-radius: 20px;
      padding: 20px 0px;
    }

#specifications .my-recipe-star-rating .rate-here-container .rate-here-text {
        margin-bottom: 16px;
        text-align: center;
        font-family: var(--ff-content);
        font-weight: 900;
        padding: 0 14px;
        font-size: 15px;
        line-height: 24px;
      }

@media (min-width: 62rem) {

#specifications .my-recipe-star-rating .rate-here-container .rate-here-text {
          margin-right: 32px;
          font-size: 17px;
          line-height: 28px;
          text-align: center;
          margin-bottom: 14px;
          padding: 0
      }
        }

#specifications .my-recipe-star-rating .rate-here-container .my-rating .star {
        position: relative;
        width: 41px;
        padding: 8px;
      }

#specifications .my-recipe-star-rating {
    margin: 0 -15px;
    padding: 20px 0px;
  }

@media (min-width: 62rem) {

#specifications .my-recipe-star-rating {
      padding: 20px 15px
  }
    }

#specifications div#star-rating-title {
    font-weight: 900;
    font-size: 24px;
    line-height: 26.4px;
  }

@media (min-width: 62rem) {

#specifications div#star-rating-title {
      font-size: 31px;
      line-height: 34.1px
  }
    }

#specifications .component.rich-text.text-align-center {
    margin: 0 -15px;
  }

#specifications .check-list.field-ingredientstext.recipe-ingredient-list {
    margin-left: -15px;
  }

/* padding-top: 24px; */

#specifications .check-list.field-ingredientstext.recipe-ingredient-list ul{
      padding-left: 0;
    }

#specifications .check-list ul li,
  #specifications .check-list-horizontal ul li {
    /* padding: 0; */
}

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

#specifications .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;
  }

#specifications .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) {

#specifications .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 */

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

#specifications .recipe-ingredient-list > ul +h5{
      margin-top: 30px;
    }

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

#specifications .recipe-ingredient-list h5 {
    margin: 5px 0 20px 0;
    color: var(--recipe-ingr-instr-subheader-title-color);
    border-bottom: solid 1px var(--brand-color-8);
    text-transform: none;
    font-size: var(--fs-recipe-ingr-instr-subheader-title);
  }

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

#specifications .recipe-ingredient-list a span {
      max-width: 20rem;
      font-family: var(--ff-content);
      font-size: 15px;
      line-height: 28px;
      font-weight: 700;
    }

@media(min-width: 62rem){

#specifications .recipe-ingredient-list a span {
        font-size: 18px;
        line-height: 34px
    }
              
      }

#specifications .recipe-ingredient-list a span.v3{
      max-width: none;
    }

#specifications .recipe-ingredient-list img {
    max-width: 40px;
    margin-right: var(--s-s);
    margin-left: var(--s-s);
  }

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

#specifications .tab-panel.open{
    /* padding: 0px;    
    padding-left: 28px; 
    margin: 0; */
  }


#specifications .row.component.column-splitter {
    margin-left: 0px;
    margin-right: 0px;
  }


#specifications .tabs-controls {
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;

  }


[dir="rtl"] #specifications .tabs-controls {
      -webkit-box-pack: right;
          -ms-flex-pack: right;
              justify-content: right;
    }

#products-in-recipes {
  padding-top: 10px;
  padding-left: 0px;
  padding-right: 0px;
}

@media (min-width: 62rem) {

#products-in-recipes .title-link {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 0px
  }
    }

#products-in-recipes p {

    display: none;
  }

@media (min-width: 62rem) {

#products-in-recipes p {
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      margin-bottom: 32px;
  }
    }

@media (min-width: 62rem) {

#products-in-recipes .page-teaser-overview ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 50%;
                  flex: 0 0 50%
      }
        }
.recipe-header-tags {
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
      -ms-flex-direction: row;
          flex-direction: row;
  -ms-flex-wrap: wrap;
      flex-wrap: wrap;
  -ms-flex-line-pack: center;
      align-content: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  padding-bottom: 20px;
}
@media (min-width: 62rem) {
.recipe-header-tags {
    padding-bottom: 0px
}
  }
.recipe-header-tags .recipe-tags.field-name {
    margin: 6px 3px;
    border: 1px solid;
    border-radius: 50px;
    padding: 7px 20px 6px 20px;
    font-size: 14px;
    line-height: 19.25px;
    font-weight: 900;
  }
@media (min-width: 62rem) {
.recipe-header-tags .recipe-tags.field-name {
      font-size: 17px;
      line-height: 23.38px;
      padding: 5px 19px;
      margin: 8px 4px
  }
    }
div#specifications .tabs-controls li:first-child a {
  padding-left: 0;
}
.article-list-v3 {
    max-width: var(--article-list-width-mobile);
    margin-left: -15px;
}

    @media (min-width: 48rem) {.article-list-v3 {
        max-width: var(--article-list-width-desktop);
        margin-left: 0px
}
    }

    .article-list-v3.page-list-grid ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            margin-top: 20px;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            margin-left: 0px;
            margin-right: 0;
            padding-right: 20px;
            overflow-x: scroll;
            -ms-overflow-style: none;
            /* Internet Explorer 10+ */
            scrollbar-width: none;
            /* Firefox */
            padding: 0px;
            -webkit-box-align: stretch;
                -ms-flex-align: stretch;
                    align-items: stretch;

                display: block;
                overflow: hidden;
                margin-top: 0px;
        }

    .article-list-v3.page-list-grid ul::-webkit-scrollbar {
                display: none;
                /* Safari and Chrome */
            }

    @media (min-width: 62rem) {

    .article-list-v3.page-list-grid ul {
                margin-left: 0px;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -ms-flex-wrap: nowrap;
                    flex-wrap: nowrap;
                -webkit-box-pack: justify;
                    -ms-flex-pack: justify;
                        justify-content: space-between;
                margin-right: -20px;
                padding-right: 0px;

                display: block
        }
            }

    @media screen and (min-width: 1441px) {

    .article-list-v3.page-list-grid ul {
                margin-right: 0px
        }

            }

    [dir='rtl'] .article-list-v3.page-list-grid ul {
                margin-right: 0px;
                margin-left: auto;
            }

    .article-list-v3.page-list-grid ul li {
                padding-left: 0px;
                min-width: 566px;
                min-height: 282px;
                padding: 0px;
                padding-right: 0px;

                min-width: 100%;
                min-height: auto;
            }

    /* margin-right: 0px !important; */

    @media only screen and (max-width:900px) {

    .article-list-v3.page-list-grid ul li {
                    min-width: 290px;
                    min-height: 357px;
                    min-width: 100%;
                    min-height: auto
            }
    
                    .article-list-v3.page-list-grid ul li:last-child {
                        margin-right: 20px;
                    }
                }

    @media (min-width: 62rem) and (max-width:1441px) {
                    .article-list-v3.page-list-grid ul li:last-child {
                        margin-right: 20px;
                    }
                }

    .article-list-v3.page-list-grid ul li:not(:last-child) {
                    margin-right: 40px;
                }

    @media only screen and (max-width:900px) {

    .article-list-v3.page-list-grid ul li:not(:last-child) {
                        margin-right: 15px
                }
                    }

    /* style for category card */

    .article-list-v3.page-list-grid ul li >a {
                    color: inherit;
                }

    .article-list-v3.page-list-grid ul li >a .category-card {
                        display: grid;
                        grid-template-columns: 1fr 1fr;
                        grid-column-gap: 30px;
                    }

    @media only screen and (max-width:900px) {

    .article-list-v3.page-list-grid ul li >a .category-card {
                            grid-template-columns: 1fr;
                            grid-column-gap: 0px
                    }
                        }

    .article-list-v3.page-list-grid ul li >a .category-card .category-card-img {
                            min-width: 100%;
                            width: 100%;
                            max-width: 100%;
                            min-height: 100%;
                            height: 100%;
                        }

    .article-list-v3.page-list-grid ul li >a .category-card .category-card-img img {
                                -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                                transition: all var(--duration-l) var(--ease-out-quart);
                                height: 282px;
                                -o-object-fit: cover;
                                   object-fit: cover;
                                width: 100%;

                            }

    @media only screen and (max-width:900px) {

    .article-list-v3.page-list-grid ul li >a .category-card .category-card-img img {
                                    height: 206px

                            }
                                }

    .article-list-v3.page-list-grid ul li >a .category-card .category-card-content {
                            min-width: 100%;
                            width: 100%;
                            max-width: 100%;
                            min-height: 100%;
                            height: 100%;
                        }

    .article-list-v3.page-list-grid ul li >a .category-card .category-card-content .category-card-title {
                                text-transform: none;
                                font-size: var(--fs-m);
                                line-height: var(--fs-xxl);
                                width: 100%;
                            }

    @media (min-width: 62rem) {

    .article-list-v3.page-list-grid ul li >a .category-card .category-card-content .category-card-title {
                                    font-size: var(--fs-l);
                                    line-height: var(--fs-xxxl)
                            }
                                }

    .article-list-v3.page-list-grid ul li >a:hover .category-card .category-card-img img {
                            -webkit-transform: scale(1.05);
                                    transform: scale(1.05);
                        }

.page-list-grid.article-list-v3 ul li>a:hover>[class*='-card']:not(.recipe-card) {
    -webkit-transform: none;
            transform: none;
}


@media only screen and (min-width:1400px) {
    #arrow-story-carousel.container {
        padding-left: 25px;
        padding-right: 25px;
    }
}

/* #newsarticle {
    .page-list-grid {
        &.article-list-v3 {
            ul {
                flex-wrap: wrap;
                margin-top: 0px;

                li {
                    width: 100%;
                    max-width: 100%;
                    flex: auto;
                    min-width: inherit;
                    margin-right: 0;

                    .article-card-v4 {
                        box-shadow: none;
                    }

                    .article-card-image-wrapper {
                        height: 200px;
                        img {
                            height: 100%;
                            width: 100%;
                            border-radius: var(--article-banner-border-radius-desktop);
                            margin-right: 10px;
                            object-fit: cover;
                        }

                    }

                    .article-card-content-wrapper {
                        .tag-name {
                            margin-top: 32px;
                            padding-bottom: var(--s-xl);
                            
                            @media (--mq-min-l) {
                                padding-bottom: var(--s-m);
                            }
                        }
                            span{
                            font-size: var(--fs-s);
                            font-weight: var(--fw-h2);
                            text-transform: capitalize;
                            border-bottom: 1px solid;
                            line-height: var(--fs-xl);

                        }

                      
                        .field-title{
                            text-transform: capitalize;
                            font-size: 18px;
                            line-height: 19.8px;
                            font-weight: 900;
                            margin-bottom: 8px;

                            @media (--mq-min-l) {
                                font-size: 25px;
                                line-height: 27.5px;
                            }
                        }
                        

                        .field-introduction {
                            color: var(--heading-color);
                        }
                    }
                }
            }
        }
    }
} */
.page-header-global .page-header .img-container img{  
        -o-object-fit: cover;  
           object-fit: cover;
        max-height: var(--product-card-image-mobile);
        width: 100%;
      }
  
        @media (min-width: 48rem){.page-header-global .page-header .img-container img{
          border-radius: var(--border-radius-xl);
          max-height: var(--page-header-image-d);
          max-width: var(--product-header-img-w)
      }
        }
  
      .page-header-global .page-header .content-container{
        margin-top: var(--s-m);
        text-align: center;
      }
  
      @media (min-width: 48rem){
  
      .page-header-global .page-header .content-container{
          margin: auto 0;
          text-align: left;
          padding-left: 0px
      }
        }
  
      .page-header-global .page-header .content-container .tag-name {
          padding-bottom: 13px;
        }
  
      .page-header-global .page-header .content-container .tag-name > span{
            font-size: var(--fs-xxs);
            font-weight: var(--fw-h2);
            text-transform: capitalize;
            border-bottom: 1px solid;
            line-height: 15px;
          }
  
      @media (min-width: 62rem){
  
      .page-header-global .page-header .content-container .tag-name > span{
              line-height: 18px;
              font-size: var(--fs-s)
          }
            }
  
      .page-header-global .page-header .content-container .page-header-title{
          margin-bottom: var(--s-s);
          text-transform: uppercase;
          font-weight: var(--fw-regular);
          line-height: 100%;
          padding: 0 20px;
  
        }
  
      @media (min-width: 48rem){
  
      .page-header-global .page-header .content-container .page-header-title{
            padding: 0px
  
        }
          }
  
      .page-header-global .page-header .content-container .page-header-intro{
          text-align: center;
          font-family: var(--ff-subtitles);
          font-weight: var(--fw-regular);
          font-size: 15px;
          line-height: 24px;
          margin-bottom: 4px;
          padding: 0 20px;
        }
  
      @media (min-width: 48rem){
  
      .page-header-global .page-header .content-container .page-header-intro{
            font-size: 18px;
            font-weight: var(--fw-bold);
            line-height: 28px;
            padding: 0px;
            margin-bottom: 0px;
            text-align: left
        }
          }
  
      .page-header-global .page-header .content-container .mobile-desc{
          font-family: var(--ff-body);
          font-weight: var(--fw-black);
          font-size: 19px;
          line-height: 26.13px;
          margin-bottom: 30px;
          display: none;
        }
  
      @media (min-width: 48rem){
  
      .page-header-global .page-header .content-container .mobile-desc{
            display: block;
            font-size: 19px;
            line-height: 26.13px;
            padding: 0px;
            margin-top: 24px;
            margin-bottom: 0px
        }
          }


#article-header .page-header-global .img-container img {
      -o-object-fit: fill;
         object-fit: fill;
    }


@media (min-width: 48rem) {


#article-header .page-header-global .img-container img {
        max-width: -webkit-fill-available
    }
      }


@media (min-width: 48rem) {


#article-header .page-header-global .content-container {
        padding-left: 5px

    }
      }


#article-header .page-header-global .content-container .page-header-intro {
        margin-bottom: 60px;
      }


#article-header .page-header-global .content-container .mobile-desc {
        display: none;
      }

#overview-header .page-header-global .img-container img {
      padding-top: 20px;
    }

@media (min-width: 48rem) {

#overview-header .page-header-global .img-container img {
        padding-top: 0px
    }
      }

#overview-header .page-header-global .content-container {
      margin-top: var(--s-xxl);
    }
.store-locator{
    /*height: 537px;*/
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

    @media (max-width: 47.9375rem){.store-locator{
        width: 100%
}
    }

    .store-locator .store-list-container .image-list{
            margin-bottom: 0px;
        }

    .store-locator .drop-down-list h3{
            font-weight: var(--fw-black);
            font-size: var(--fs-h4-m);
            line-height: 26px;
            border: 1px solid var(--brand-color-1);
            width: 100%;
            height: 54px;
            padding: 14px 13px 14px 16px;
            display:-webkit-box;
            display:-ms-flexbox;
            display:flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            margin-bottom: 0px;
            /* background: var(--brand-color-3); */
            border-radius: 10px;
            cursor: pointer;


        }

    @media (max-width: 47.9375rem){

    .store-locator .drop-down-list h3{
                padding: 10px 13px 10px 16px;
                font-size: var(--fs-m);
                line-height: 22px;
                border-radius: 5px


        }
            }

    .store-locator .drop-down-list h3.show{
                border-radius: 10px 10px 0px 0px;
            }

    .store-locator .drop-down-list h3 span {
                background: url(`../../../Images/chevron-black.svg`) no-repeat;
                height: 20px;
                width: 20px;
                margin-right: 14px;
                margin-top: 16px;
                float: right;
                -webkit-transform: rotate(90deg);
                        transform: rotate(90deg);
                cursor: pointer;
            }

    @media (max-width: 47.9375rem){

    .store-locator .drop-down-list h3 span {
                    margin-top: 12px
            }
                }

    @media (max-width: 47.9375rem) {

    [dir='rtl'] .store-locator .drop-down-list h3 span {
                    float: left
                }
                  }

    .on-page-editor .store-locator .drop-down-list h3 span {
                    background: none;
                    -webkit-transform: rotate(0deg);
                            transform: rotate(0deg);
                }

    .store-locator .drop-down-list ul {
            display: none !important;
            height: 0;
            -webkit-transition: height var(--transition-timing-slow);
            transition: height var(--transition-timing-slow);
        }

    .store-locator .drop-down-list ul.show{
                display: -webkit-box !important;
                display: -ms-flexbox !important;
                display: flex !important;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                height: auto; 
                -webkit-box-align: inherit; 
                    -ms-flex-align: inherit; 
                        align-items: inherit;
            }

    .store-locator .drop-down-list ul li {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                padding: 18px;
                -webkit-box-align: center;
                    -ms-flex-align: center;
                        align-items: center;
                /* background: var(--brand-color-3); */
                border-bottom: 1px solid var(--brand-color-1);
                border-left: 1px solid var(--brand-color-1);
                border-right: 1px solid var(--brand-color-1);
                margin: 0px !important;
            }

    .store-locator .drop-down-list ul li:last-child{
                    border-radius: 0px 0px 10px 10px;
                }

    @media (max-width: 47.9375rem){

    .store-locator .drop-down-list ul li:last-child{
                        border-radius: 0px 0px 5px 5px
                }
                    }

    .store-locator .drop-down-list ul li:hover, .store-locator .drop-down-list ul li:focus, .store-locator .drop-down-list ul li:active{
                    background: var(--color-lighter-blue);  
                }

    @media (max-width: 47.9375rem){

    .store-locator .drop-down-list ul li {
                    padding: 10px 16px
            }
                }

    .store-locator .drop-down-list ul li a{
                    pointer-events: none;
                    cursor: default;
                }

    .store-locator .drop-down-list ul li img{
                    width: 25px;
                    height: 25px;
                    
                }

    @media (max-width: 47.9375rem){

    .store-locator .drop-down-list ul li img{
                        margin-top: 3px;
                        width: 20px;
                        height: 20px
                    
                }
                    }

    .store-locator .drop-down-list ul li .store-title{
                    margin-left: 10px;
                    font-weight: var(--fw-black);
                    font-size: var(--fs-h4-m);
                    line-height: 26px;
                    cursor: pointer;
                }

    [dir='rtl'] .store-locator .drop-down-list ul li .store-title {
                        margin-right: 10px; 
                        margin-left: auto;
                    }

    @media (max-width: 47.9375rem){

    .store-locator .drop-down-list ul li .store-title{
                        font-size: var(--fs-m);
                        line-height: 22px
                }
                    }

    .store-locator .drop-down-list a{
            pointer-events: none;
        }

    .store-locator .store-link{
        height: auto;
        background-color: var(--brand-color-1);
        margin-top: 12px;
        padding: 14px 0px;
        font-size: var(--fs-h4-m);
        line-height: 26px;
        text-align: center;
        width: 100%;
        margin-left: 0px;
    }

    @media (max-width: 47.9375rem){

    .store-locator .store-link{
            font-size: var(--fs-m);
            line-height: 22px;
            margin-bottom: 4px
    }
        }

    .store-locator .store-link:hover, .store-locator .store-link:focus, .store-locator .store-link:active{
            background-color: var(--brand-color-1);
        }
.product-header .img-container img {
    border-radius: 0px;
    -o-object-fit: contain;
    object-fit: contain;
    width: 100%;
    min-height: var(--product-card-image-mobile);
    max-height: var(--product-card-image-mobile);
  }

    @media (min-width: 48rem) {.product-header .img-container img {
      border-radius: var(--border-radius-xl);
      max-width: var(--product-banner-width-d);
      min-height: var(--product-header-height)
  }
    }
  .product-header .content-container {
    margin-top: var(--s-m);
    text-align: center;
  }
  @media (min-width: 48rem) {
  .product-header .content-container {
      min-height: var(--product-header-height);
      margin: auto 0;
      text-align: left;
      padding-left: 5px
  }
    }
  .product-header .content-container .tag-name {
      padding-bottom: 13px;
    }
  .product-header .content-container .tag-name > span {
        font-size: var(--fs-s);
        font-weight: var(--fw-h2);
        text-transform: capitalize;
        border-bottom: 1px solid;
        line-height: 18px;
      }
  @media (min-width: 62rem) {
  .product-header .content-container .tag-name > span {
          line-height: 18px;
          font-size: var(--fs-s)
      }
        }
  .product-header .content-container .product-title {
      margin-bottom: var(--s-s);
      text-transform: uppercase;
      font-weight: var(--fw-regular);
      font-size: 38px;
      line-height: 100%;
    }
  @media (min-width: 62rem) {
  .product-header .content-container .product-title {
        padding: 0px;
        font-size: 66px;
        line-height: 100%
    }
        [dir='rtl'] .product-header .content-container .product-title {
          text-align: right;
        }
      }
  .product-header .content-container .product-subtitle {
      font-family: var(--ff-card-details);
      font-weight: 400;
      font-size: 15px;
      line-height: 24px;
      font-weight: 400;
      text-align: center;
      margin-bottom: 24px;
    }
  @media (min-width: 62rem) {
  .product-header .content-container .product-subtitle {
        font-size: 17px;
        line-height: 28px;
        padding: 0px;
        text-align: left
    }
        [dir='rtl'] .product-header .content-container .product-subtitle {
          text-align: right;
        }
      }
  .product-header .content-container .mobile-desc {
      font-family: var(--ff-body);
      font-weight: var(--fw-black);
      font-size: 19px;
      line-height: 26.13px;
      padding-left: 20px;
      padding-right: 20px;
      display: none;
    }
  @media (min-width: 62rem) {
  .product-header .content-container .mobile-desc {
        display: none;
        font-size: 19px;
        line-height: 26.13px;
        padding: 0px;
        margin-bottom: 0px
    }
      }

.product-detail-introduction.field-introduction {
  font-family: var(--ff-card-details);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  padding-left: 20px;
  padding-right: 20px;
  text-align: left;
}

@media (min-width: 62rem) {

.product-detail-introduction.field-introduction {
    text-align: left;
    margin-left: 10%;
    max-width: var(--product-intro-width);
    font-size: 17px;
    line-height: 28px;
    padding: 0px;
    margin-bottom: 0px
}
    [dir='rtl'] .product-detail-introduction.field-introduction {
      text-align: right;
      margin-right: 21px;
    }
  }

.field-ingredients {
  font-family: var(--ff-card-details);
  font-weight: 400;
  font-size: 15px;
  line-height: 24px;
  margin-top: 12px;
}

@media (min-width: 62rem) {

.field-ingredients {
    text-align: left;
    font-size: 17px;
    line-height: 28px;
    padding: 0px;
    margin-bottom: 0px;
    margin-top: 20px
}
  }

#product-page-store-locator {
  padding-right: 0;
  padding-left: 0;
}

@media (max-width: 47.9375rem) {

#product-page-store-locator {
    padding-bottom: 12px
}
  }

#product-page-store-locator .store-locator {
    width: 99%;
  }



.faq-search{
    -webkit-box-pack: left;
        -ms-flex-pack: left;
            justify-content: left;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
}

    .faq-search .faq-header-section {
        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: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
    }

    .faq-search .faq-header-section div.faq-heading {
            text-align: left;
            font-size: 16px;
            line-height: 24px;
            font-weight: 700;
            font-family: var(--ff-content1);
            margin-top: 11px;
            margin-bottom: 11px;
            width: 96%;
        }

    [dir="rtl"] .faq-search .faq-header-section div.faq-heading {
                text-align: right;
            }

    @media (min-width: 62rem) {

    .faq-search .faq-header-section div.faq-heading {
                margin-top: 15px;
                margin-bottom: 18px;
                font-size: 18px;
                line-height: 28px
        } 
            }

    .faq-search .faq-header-section .faq-chevron{
            background: url(`../../../images/faqChevron.svg`) no-repeat;
            display: inline-block;
            position: relative;
            margin-top: 15px;
            width: 18px;
            height: 18px;
        }

    @media (min-width: 62rem) {

    .faq-search .faq-header-section .faq-chevron{
                margin-top: 20px
        }    
            }

    .faq-search .faq-header-section .faq-chevron.open{
                -webkit-transform: rotate(180deg);
                        transform: rotate(180deg);
            }

    .faq-search div.faq-content.field-content{
            text-align: left;
            font-size: 15px;
            line-height: 24px;
            font-weight: 400;
            font-family: var(--ff-content);
            margin-bottom: 10px;
            display: none;
        }

    [dir="rtl"] .faq-search div.faq-content.field-content {
                text-align: right;
            }

    @media (min-width: 62rem) {

    .faq-search div.faq-content.field-content{
                margin-bottom: 20px;
                font-size: 17px;
                line-height: 28px
        } 
            }

    .faq-search div.faq-content.show {
            display:block;
        }

#faq-tabs{
    margin-top: 0px; 
}

@media (min-width: 62rem) {
    }

#faq-tabs .tabs-controls li{
            padding: 0 10px; 
        }

@media (min-width: 62rem) {

#faq-tabs .tabs-controls li{
                padding:0 25px 
        } 
            }

#faq-tabs .tabs-controls li:first-child {
            padding-left: 0px;
        }

@media (min-width: 62rem) {

#faq-tabs .tabs-controls li:first-child {
                padding-left: 0px
        } 
            }

#faq-tabs .tabs-controls li:last-child {
            padding-right: 0px;
        }

@media (min-width: 62rem) {

#faq-tabs .tabs-controls li:last-child {
                padding-right: 0px
        } 
            }

#faq-tabs .search-results ul {
            border-bottom: 1px solid;
        }

#faq-tabs .search-results li{
            border-top: 1px solid;
        } 

#faq-search-box{
    margin-top:30px;
} 

@media (min-width: 62rem) { 

#faq-search-box .search-box > .component-content {
                margin-top: 20px;
                height: 57px;
                max-width: calc((100%/1.86) - 30px)
        } 
            } 

@media (min-width : 1440px) { 

#faq-search-box .search-box > .component-content {
                margin-top: 20px;
                height: 57px;
                max-width: calc((100%/1.86) - 30px)
        } 
            } 

@media (min-width: 62rem){ 

#faq-search-box .search-box.search-box-with-icon>.component-content input[type='text'].search-box-input {
            padding-left: 30px;
            padding-bottom: 16px
    }
        } 

@media (min-width: 62rem){ 

#faq-search-box .search-box.search-box-with-icon>.component-content>button.search-box-button {
            padding: 16.5px 20px
    }
            [dir="rtl"] #faq-search-box .search-box.search-box-with-icon>.component-content>button.search-box-button {
                padding: 18.5px 20px;
            }
        }

@media (min-width: 62rem) {

#faq-results-container {
        max-width: calc((100%/1.86) - 50px)
} 
    }

@media (min-width : 1440px) {

#faq-results-container {
        max-width: calc((100%/1.86) - 50px)
} 
    }

#faq-results-container >.component-content .search-results{
        margin-top: 38px;
        margin-bottom: 50px;
       }

@media (min-width: 48rem){

#faq-results-container >.component-content .search-results{
            margin: 0 -10px;
            margin-top: 40px;
            margin-bottom: 50px
       }
        }

#tabs-container .row{
        margin: 0px;
    }

#tabs-container .col-12{
        padding: 0px;
    } 
.related-articles-global .title-link {
        padding-bottom: 0px;
        max-height : calc(var(--s-xl)*2);
        line-height: 34px;
    }

        .related-articles-global .title-link h3, .related-articles-global .title-link h2{
            font-size: 24px;
            font-weight: var(--fw-black);
            line-height: 34px;
        }

        @media (min-width: 62rem){

        .related-articles-global .title-link h3, .related-articles-global .title-link h2{
              line-height: 34px;
              font-size: 31px
        }
            }

    .related-articles-global .related-articles {
        text-align: left;
        margin-bottom : 20px;
    }

    @media (min-width: 62rem){

    .related-articles-global .related-articles {
          margin-bottom : 24px
    }
        }

    .related-articles-global .related-articles > span{
          font-family: var(--ff-content);
          font-weight: var(--fw-bold);
          font-size: var(--fs-m);
          line-height: var(--lh-m);
        }

    @media (min-width: 62rem) {

    .related-articles-global .related-articles > span{
            font-size: var(--fs-l)
        }
          }

    .related-articles-global .related-article-cards ul {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            margin-right: -5px;
            margin-left: -5px;
        }

    @media (min-width: 62rem) {

    .related-articles-global .related-article-cards ul {
                margin-right: -10px;
                margin-left: -10px
        }
            }

    .related-articles-global .related-article-cards ul li {
              -webkit-box-flex: 0;
                  -ms-flex: 0 0 50%;
                      flex: 0 0 50%;
              padding: 0 10px;
            }

    @media (min-width: 48rem) {

    .related-articles-global .related-article-cards ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 33.33%;
                        flex: 0 0 33.33%;
                padding: 0 10px
            }
              }

    @media (min-width: 62rem) {

    .related-articles-global .related-article-cards ul li {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 25%;
                        flex: 0 0 25%
            }
              }

    .related-articles-global .related-article-cards ul li > a:hover {
                text-decoration: none;
              }

    .related-articles-global .related-articles-v2 {
        border-radius: var(--border-radius-l);
        border: var(--card-border-width) solid;
        margin-bottom: 12px;
        background: var(--brand-color-3);
    }

    .related-articles-global .related-articles-v2.active,
        .related-articles-global .related-articles-v2:hover,
        .related-articles-global .related-articles-v2:focus {
          -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
                  box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
        }

    .related-articles-global .related-articles-v2 .related-articles-image-container {
          border-radius: var(--border-radius-l);      
        }

    .related-articles-global .related-articles-v2 .related-articles-img-wrapper {
          padding-top: 100%;
          position: relative;
          padding-right: 100%;
        }

    [dir="rtl"] .related-articles-global .related-articles-v2 .related-articles-img-wrapper {
            padding-right: 0;
          }

    .related-articles-global .related-articles-v2 .related-articles-img-wrapper > img {
            top: 0;
            width: 100%;
            height: 100%;
            position: absolute;
            -o-object-fit: cover;
               object-fit: cover;
            border-radius: var(--border-radius-l);
            }

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper {
          padding: 14px;
          padding-bottom: 20px;
          text-align: center;
        }

    @media (max-width: 61.9375rem) {

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper {
            text-align: center
        }
            .related-articles-global .related-articles-v2 .related-articles-content-wrapper .star-rating-card-container {
              -webkit-box-pack: start;
                  -ms-flex-pack: start;
                      justify-content: flex-start;
            }
          }

    @media (min-width: 62rem){

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper {
            padding: var(--s-l) var(--s-xl) var(--s-xl) var(--s-xl)
        }
          }

    a:hover .related-articles-global .related-articles-v2 .related-articles-content-wrapper .related-articles-title,
          a:focus .related-articles-global .related-articles-v2 .related-articles-content-wrapper .related-articles-title {
            word-break: keep-all;
            -webkit-line-clamp: unset;
          }

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper .tag-name {
            padding-bottom: var(--s-m);
          }

    @media (min-width: 62rem){

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper .tag-name {
                padding-bottom: 15px
          }
            }

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper .tag-name > span {
                font-size: var(--fs-xxs);
                font-weight: var(--fw-h2);
                text-transform: capitalize;
                border-bottom: 1px solid;
                line-height: 18px;
            }

    @media (min-width: 62rem){

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper .tag-name > span {
                  font-size: var(--fs-xs)
            }
              }

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper .related-articles-title {
            margin: 0;
            word-break: break-word;
            overflow: hidden;
            text-overflow: ellipsis;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            font-size: 18px;
            line-height: 19px;            
            font-weight: var(--fw-black);
            display: -webkit-box;
          }

    @media (min-width: 62rem) {

    .related-articles-global .related-articles-v2 .related-articles-content-wrapper .related-articles-title {
              font-size: 25px;
              line-height: 27px
          }
            }
/* @import './variants/press-and-media.css'; */
/* global recipe v3*/

/* global */
/* 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(--card-shadow);
                  box-shadow: var(--card-shadow);
          -webkit-transition: all var(--duration-l) var(--ease-out-quart);
          transition: all var(--duration-l) var(--ease-out-quart);
        }
@media (max-width: 61.9375rem) {
.page-list-grid ul li > a > [class*='-card'] {
            -webkit-box-shadow: var(--card-shadow-mobile);
                    box-shadow: var(--card-shadow-mobile)
        }
          }
.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(--card-hover-shadow);
                    box-shadow: var(--card-hover-shadow);
            -webkit-transform: var(--card-hover-transform);
                    transform: var(--card-hover-transform);
          }
.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
        }
            }
@media (min-width: 62rem) {.page-list-grid--one-col-mobile-two-col-desktop ul li.item {
                -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;
                padding-left: var(--m-s);
                padding-right: var(--m-s)
        }
            }
.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
        }
            }
.overview-swippable {
    padding: 0;
}
    @media (min-width: 62rem) {.overview-swippable {
        padding: 0 15px
}  
    }
    .overview-swippable ul li {
            margin: 8px 4px 24px 4px;
        }
    @media (max-width: 61.9375rem) {
    .overview-swippable ul li {
                min-width: 240px
        }
            }
    @media (max-width: 47.9375rem) {
    .overview-swippable ul li {
                min-width: 200px
        }
            }
    @media (max-width: 35.9375rem) {
    .overview-swippable ul li {
                min-width: 160px
        }
            }
    @media (min-width: 62rem) {
    .overview-swippable ul li {
                margin: 16px 15px 24px
        }
            }
    .overview-swippable ul li .category-card {
                margin: 0;
                height: 100%;
                -webkit-box-shadow: var(--box-shadow-cards);
                        box-shadow: var(--box-shadow-cards);
                -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                transition: all var(--duration-l) var(--ease-out-quart);
                border-radius: var(--border-radius-s);
            }
    @media (min-width: 62rem) {
    .overview-swippable ul li .category-card {
                    border-radius: var(--border-radius-m)
            }
                }
    .overview-swippable ul li .category-card .category-card-img {
                    height: 100%;
                }
    .overview-swippable ul li .category-card .category-card-img img {
                        height: 100%;
                        -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                        transition: all var(--duration-l) var(--ease-out-quart);
                        border-radius: var(--border-radius-s);
                        min-height: 220px;
                        max-height: 220px;
                    }
    @media (min-width: 62rem) {
    .overview-swippable ul li .category-card .category-card-img img {
                            min-height: 240px;
                            max-height: 240px
                    }
                        }
    .overview-swippable ul li .category-card .category-card-content {
                    padding: var(--s-m) var(--s-xs);
                }
    @media (min-width: 62rem) {
    .overview-swippable ul li .category-card .category-card-content {
                        padding: var(--s-m)
                }                        
                    }
    .overview-swippable ul li .category-card .category-card-content .category-card-title {
                        font-size: var(--fs-xxl);
                        margin-bottom: 0;
                    }
    @media (max-width: 61.9375rem) {
    .overview-swippable ul li .category-card .category-card-content .category-card-title {
                            font-size: var(--fs-s);
                            line-height: 1.125
                    }
                        }
    .overview-swippable ul li .category-card .category-card-content .category-card-subtitle {
                        font-size: var(--fs-body);
                        font-family: var(--ff-body);
                        margin-bottom: 0;
                    }
    @media (max-width: 61.9375rem) {
    .overview-swippable ul li .category-card .category-card-content .category-card-subtitle {
                            display: none
                    }
                        }
    .overview-swippable ul li > a:hover .category-card {
                    -webkit-box-shadow: var(--box-shadow-cards-hover);
                            box-shadow: var(--box-shadow-cards-hover);
                }
    .overview-swippable ul li > a:hover .category-card .category-card-img img {
                        -webkit-transform: scale(1.05);
                                transform: scale(1.05);
                    }
    @media (max-width: 61.9375rem) {
    .overview-swippable ul li:last-child {
                min-width: 255px
        }
            }
    @media (max-width: 47.9375rem) {
    .overview-swippable ul li:last-child {
                min-width: 215px
        }
            }
    @media (max-width: 35.9375rem) {
    .overview-swippable ul li:last-child {
                min-width: 175px
        }
            }
.overview-swippable-career {
    padding: 0;
}

    .overview-swippable-career.has-slider .arrow-right {
            right: 12px;
        }

    @media screen and (max-width:1365px) {

    .overview-swippable-career.has-slider .arrow-right {
                right: -60px
        }
            }

    @media (min-width: 62rem) {.overview-swippable-career {
        padding: 0 15px
}
    }

    .overview-swippable-career ul {
        display: -webkit-box !important;
        display: -ms-flexbox !important;
        display: flex !important;
        -ms-flex-wrap: nowrap !important;
            flex-wrap: nowrap !important;
        overflow-x: scroll !important;
        overflow-y: hidden;
        -webkit-box-pack: start !important;
            -ms-flex-pack: start !important;
                justify-content: flex-start !important;
        -ms-overflow-style: none;
        scrollbar-width: none;
    }

    .overview-swippable-career ul::-webkit-scrollbar {
            display: none
        }

    @media(max-width: 61.9375rem) {

    .overview-swippable-career ul {
            grid-gap: 40px;
            gap: 40px
    }
        }

    .overview-swippable-career ul li {
            margin: 8px 4px 24px 0px;
        }

    @media (max-width: 74.9375rem) {

    .overview-swippable-career ul li {
                min-width: 100%;
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                grid-gap: 20px;
                gap: 20px
        }
            }

    @media (max-width: 47.9375rem) {

    .overview-swippable-career ul li {
                min-width: 100%
        }
            }

    @media (max-width: 35.9375rem) {

    .overview-swippable-career ul li {
                min-width: 100%
        }
            }

    @media (min-width: 62rem) {

    .overview-swippable-career ul li {
                margin: 16px 100px 24px 40px;
                padding: 0px 100px 0px 100px;
                width: 1090px
        }
            }

    .overview-swippable-career ul li .career-card {
                margin: 0;
                height: 100%;
                width: 100%;
                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-shadow: none;
                        box-shadow: none;
                -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                transition: all var(--duration-l) var(--ease-out-quart);
                border-radius: var(--border-radius-s);
                grid-gap: 20px;
                gap: 20px;
            }

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card {
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: row;
                            flex-direction: row;
                    border-radius: var(--border-radius-m);
                    width: 1031px;
                    grid-gap: 0;
                    gap: 0
            }
                }

    .overview-swippable-career ul li .career-card .career-card-img {
                    height: auto;
                }

    .overview-swippable-career ul li .career-card .career-card-img img {
                        -webkit-transition: all var(--duration-l) var(--ease-out-quart);
                        transition: all var(--duration-l) var(--ease-out-quart);
                        border-radius: 0px;
                        min-height: 268px;
                        width: 100%;
                        height: 268px;
                        max-height: 268px;
                        -o-object-fit: cover;
                           object-fit: cover;
                    }

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-img img {
                            min-height: 368px;
                            min-width: 291px;
                            max-height: 368px
                    }
                        }

    .overview-swippable-career ul li .career-card .career-card-container {
                    position: relative;
                    padding: 0;
                    height: auto;
                    width: 100%;
                }

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-container {
                        padding: 40px 0px 0px 40px;
                        width: 760px;
                        height: 366px
                }
                    }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-title {
                        color: #0D3B30;
                        color: var(--upfield-kale, #0D3B30);
                        /* M-H2 */
                        font-family: var(--ff-body);
                        font-size: 25px;
                        font-style: normal;
                        font-weight: 500;
                        line-height: 110%;
                        /* 27.5px */
                        bottom: 0px;
                        margin-bottom: 25px;
                    }

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-container .career-card-title {
                            font-size: 30px
                    }
                        }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-title em {
                            color: #FAF5EB;
                            color: var(--Upfield-coconut, #FAF5EB);
                            /* M-Quotes */
                            font-family: var(--ff-headings);
                            font-size: 25px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 110%;
                        }

    /* 27.5px */

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-container .career-card-title em {
                                font-size: 30px
                        }
                            }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content {
                        font-size: var(--fs-body);
                        font-family: var(--ff-body);
                        margin-bottom: 0;
                    }

    @media (max-width: 61.9375rem) {

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content {
                            display: contents
                    }
                        }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content p {
                            color: #0D3B30;
                            color: var(--Upfield-kale, #0D3B30);
                            /* M-Text */
                            font-family: var(--ff-body);
                            font-size: 16px;
                            font-style: normal;
                            font-weight:var(--fw-normal);
                            line-height: 150%;
                            margin-bottom: 10px;
                        }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content p:last-child {
                                font-size: 16px;
                                font-weight: var(--fw-medium);
                            }

    /* 24px */

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content p {
                                font-size: 18px;
                                margin-bottom: 20px
                        }
                            }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content em {
                            color: #FAF5EB;
                            color: var(--Upfield-coconut, #FAF5EB);
                            /* M-Quotes */
                            font-family: var(--ff-headings);
                            font-size: 25px;
                            font-style: normal;
                            font-weight: 400;
                            line-height: 110%;
                        }

    /* 27.5px */

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content em {
                                font-size: 30px
                        }
                            }

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content h4 {
                            color: #FAF5EB;
                            color: var(--Upfield-coconut, #FAF5EB);
                            /* M-H4 */
                            font-family: var(--ff-body);
                            font-size: 17px;
                            font-style: normal;
                            font-weight: var(--fw-medium);
                            line-height: 150%;
                            margin-bottom: 5px;
                        }

    /* 25.5px */

    @media (min-width: 62rem) {

    .overview-swippable-career ul li .career-card .career-card-container .career-card-content h4 {
                                font-size: 20px
                        }
                            }

    .overview-swippable-career ul li>a:hover .career-card {
                    -webkit-box-shadow: none;
                            box-shadow: none;
                }

    .overview-swippable-career ul li>a:hover .career-card .category-card-img img {
                        -webkit-transform: none;
                                transform: none;
                    }

    @media (max-width: 61.9375rem) {

    .overview-swippable-career ul li:last-child {
                min-width: 255px
        }
            }

    @media (max-width: 47.9375rem) {

    .overview-swippable-career ul li:last-child {
                min-width: 215px
        }
            }

    @media (max-width: 35.9375rem) {

    .overview-swippable-career ul li:last-child {
                min-width: 175px
        }
            }
.article-card {
  display: block;
  background: var(--article-card-background);
  text-align: center;
  position: relative;
  border-width: var(--article-card-border-width);
  border-style: var(--article-card-border-style);
  border-color: var(--article-card-border-color);
  padding: var(--article-card-padding);
  border-radius: var(--article-card-border-radius);
}

  .article-card:hover {
    background: var(--article-card-hover-background);
  }

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

  .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;
    }

  .article-card h1, 
  .article-card h2, 
  .article-card h3, 
  .article-card h4, 
  .article-card h5, 
  .article-card h6 {
    font-weight: var(--fw-cards);
  }

@media (min-width: 62rem) {

.page-list-grid--one-col-mobile-two-col-desktop {
    padding: 0 var(--s-xs)
}
  }

.page-list-grid--one-col-mobile-two-col-desktop .article-card {
    -webkit-box-shadow: none;
            box-shadow: none;
    -webkit-transform: none;
            transform: none;
  }

.page-list-grid--one-col-mobile-two-col-desktop .article-card .article-card-img {
      margin-bottom: var(--s-m);
    }

.page-list-grid--one-col-mobile-two-col-desktop .article-card-img {
    position: relative;
    width: 100%;
    height: 0;
    padding-bottom: 56.25%;
    overflow: hidden;
    -webkit-box-shadow: var(--box-shadow-cards);
            box-shadow: var(--box-shadow-cards);
  }

.page-list-grid--one-col-mobile-two-col-desktop .article-card-img img {
      position: absolute;
      left: 0;
      -o-object-fit: cover;
         object-fit: cover;
      width: 100%;
      height: 100%;
      -webkit-transition: all var(--duration-l) var(--ease-out-quart);
      transition: all var(--duration-l) var(--ease-out-quart);
      min-height: unset;
      max-height: unset;
    }

[dir='rtl'] .page-list-grid--one-col-mobile-two-col-desktop .article-card-subtitle {
      text-align: right;
    }

.page-list-grid--one-col-mobile-two-col-desktop ul li > a:hover {
    text-decoration: none;
  }

.page-list-grid--one-col-mobile-two-col-desktop ul li > a:hover > .article-card.article-card {
      -webkit-box-shadow: none;
              box-shadow: none;
      -webkit-transform: none;
              transform: none;
    }

.page-list-grid--one-col-mobile-two-col-desktop ul li > a:hover .article-card-img {
      -webkit-box-shadow: var(--box-shadow-cards-hover);
              box-shadow: var(--box-shadow-cards-hover);
    }

.page-list-grid--one-col-mobile-two-col-desktop ul li > a:hover .article-card-img img {
        -webkit-transform: scale(1.05);
                transform: scale(1.05);
      }

.page-list-grid--one-col-mobile-two-col-desktop ul li > a:hover .article-card .article-card-title {
      text-decoration: none;
      color: var(--link-color);
    }
#article-homepage .article-banner ul li .banner-content .banner-intro{
  font-size: inherit;
}
.recipe-card {
  text-align: left;
  text-align: initial;
  position: relative;
  display: block;
  border-radius: var(--recipe-card-v1-border-radius);
  overflow: hidden;
}

  .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%;
      border-radius: var(--recipe-card-v1-border-radius);
    }

  @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(--overlay-bg-color)),
          to(transparent));
      background-image: linear-gradient(to top,
          var(--overlay-bg-color),
          transparent);
      opacity: var(--opacity-recipe-card);
      border-radius: var(--recipe-card-v1-border-radius);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

  .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 h1, 
  .recipe-card h2, 
  .recipe-card h3, 
  .recipe-card h4, 
  .recipe-card h5, 
  .recipe-card h6 {
    font-weight: var(--fw-cards);
  }
.recipe-card-v2 {
  overflow: hidden;
  border-radius: var(--recipe-card-v2-border-radius);
  background-color: var(--color-white);
  text-align: left;
}
  [dir="rtl"] .recipe-card-v2 {
    text-align: left;
    text-align: initial;
  }
  .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);
  }
  a:hover .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title,
    a:focus .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title {
      word-break: keep-all;
      -webkit-line-clamp: unset;
    }
  .recipe-card-v2 .recipe-card-content-wrapper .recipe-card-title {
      margin-bottom: 0;
      font-size: 20px;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  .recipe-card-v2 .recipe-card-specs {
    display: none;
    font-family: var(--ff-body);
  }
  @media (min-width: 48rem) {
  .recipe-card-v2 .recipe-card-specs {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      height: 5rem;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center
  }
    }
  @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;
    }
  /* Removed inline-block property for the span */
  .recipe-card-v2 .recipe-card-specs span {
      margin-right: var(--s-s);
      vertical-align: middle;
      color: var(--text-color);
      font-size: var(--fs-xs);
    }
  @media (min-width: 62rem) {
      a:hover .recipe-card-v2 .recipe-card-content-wrapper, a:focus .recipe-card-v2 .recipe-card-content-wrapper {
        -webkit-transform: translateY(-5em);
                transform: translateY(-5em);
      }

      a:hover .recipe-card-v2 .recipe-card-specs, a:focus .recipe-card-v2 .recipe-card-specs {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        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;
      }
    }
  .recipe-card-v2 h1, 
  .recipe-card-v2 h2, 
  .recipe-card-v2 h3, 
  .recipe-card-v2 h4, 
  .recipe-card-v2 h5, 
  .recipe-card-v2 h6 {
    font-weight: var(--fw-cards);
  }

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

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

  .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(--overlay-bg-color)),
          to(transparent));
      background-image: linear-gradient(to top,
          var(--overlay-bg-color),
          transparent);
      opacity: var(--opacity-category-card);
      border-radius: var(--recipe-card-v1-border-radius);
      border-top-left-radius: 0;
      border-top-right-radius: 0;
    }

  .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);
  }

  .category-card h1, 
  .category-card h2, 
  .category-card h3, 
  .category-card h4, 
  .category-card h5, 
  .category-card h6 {
    font-weight: var(--fw-cards);
  }
.product-card {
  text-align: center;
  background: var(--product-card-background);
  padding: var(--product-card-padding);
  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-width: var(--product-card-border-width);
  border-style: var(--product-card-border-style);
  border-color: var(--product-card-border-color);
  border-radius: var(--product-card-border-radius);
  min-height: var(--product-card-height);
}

  .product-card:hover {
    background: var(--product-card-hover-background);
  }

  .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;
    border-radius: var(--product-card-img-border-radius);
  }

  .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 */
      }

  .product-card h1, 
  .product-card h2, 
  .product-card h3, 
  .product-card h4, 
  .product-card h5, 
  .product-card h6 {
    font-weight: var(--fw-cards);
  }

.product-card.v2 {
  min-height: unset;
  height: 100%;
  padding: var(--product-card-padding);
  -webkit-box-shadow: var(--box-shadow-cards);
          box-shadow: var(--box-shadow-cards);
  -webkit-transition: all var(--duration-l) var(--ease-out-quart);
  transition: all var(--duration-l) var(--ease-out-quart);
}

.product-card.v2:hover {
    -webkit-box-shadow: var(--box-shadow-cards-hover);
            box-shadow: var(--box-shadow-cards-hover);
  }

.product-card.v2 img {
    min-height: var(--product-card-v2-img-height);
    max-height: var(--product-card-v2-img-height);
  }

.product-card.v2 .product-card-title {
    margin: var(--m-xs) 0 auto;
    padding-bottom: var(--s);
  }

.product-card.star-card .product-card-title {
    margin: auto 0 0;
    padding-bottom: var(--s-xs);
  }

.page-list-product-overview.v3 ul li {
  margin-bottom: 0;
  margin-top: var(--m-xl);
  padding-top: 95px;
}

@media (min-width: 36rem) {

.page-list-product-overview.v3 ul li {
    margin-top: var(--m-xl);
    margin-bottom: var(--m-s)
}
  }

@media (min-width: 48rem) {

.page-list-product-overview.v3 ul li {
    padding-top: 65px;
    margin-bottom: 0;
    margin-top: 92px
}
  }

.page-list-product-overview.v3 ul li > a:hover .product-card .btn{
      opacity: 0.7;
    }

.page-list-product-overview.v3 ul li .product-card {
    min-height: unset;
    -webkit-box-shadow: var(--card-shadow-product);
            box-shadow: var(--card-shadow-product);
    border: none;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
  }

.page-list-product-overview.v3 ul li .product-card .product-card-img {
      margin-top: -160px;
    }

.page-list-product-overview.v3 ul li .product-card .product-card-img img {
        max-width: 200px;
        -o-object-fit: contain;
           object-fit: contain;
        -o-object-position: bottom;
           object-position: bottom;
        margin-bottom: 0;
      }

.page-list-product-overview.v3 ul li .product-card .product-card-title {
      text-transform: none;
      font-size: var(--fs-l);
      -webkit-box-flex: unset;
          -ms-flex-positive: unset;
              flex-grow: unset;
      margin: 32px 0 16px;
    }

@media (min-width: 62rem){

.page-list-product-overview.v3 ul li .product-card .product-card-title {
        font-size: var(--fs-xl);
        margin: 48px 0 24px
    }  
      }

.page-list-product-overview.v3 ul li .product-card div.btn.btn-medium{
      margin: 16px 0 8px;
    }

@media (min-width: 62rem){

.page-list-product-overview.v3 ul li .product-card div.btn.btn-medium{
        margin: 24px 0
    }  
      }

.page-list-product-overview.v3 ul li .product-card .rating-summary-widget{
      -webkit-box-flex: 0;
          -ms-flex-positive: 0;
              flex-grow: 0;
    }
.article-card-v2 {
  overflow: hidden;
}

  .article-card-v2:hover .article-card-content-wrapper .article-card-title {
      word-break: keep-all;
      -webkit-line-clamp: unset;
    }

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

  .article-card-v2 .article-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;
    }

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

  .article-card-v2 .article-card-content-wrapper .article-card-title {
      margin-bottom: 0;
      font-size: var(--fs-l);
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      text-transform: unset;
      font-weight: normal;
      min-height: var(--article-card-title-height);
    }

  .article-card-v2 h1, 
  .article-card-v2 h2, 
  .article-card-v2 h3, 
  .article-card-v2 h4, 
  .article-card-v2 h5, 
  .article-card-v2 h6 {
    font-weight: var(--fw-cards);
  }
.article-card-v3 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  overflow: hidden;
  --article-card-border-width: 0 0 0 30px;
  --article-card-border-color: var(--primary-color);
  border-width: var(--article-card-border-width);
  border-style: var(--article-card-border-style);
  border-color: var(--article-card-border-color);
}
  @media (max-width: 35.9375rem) {.article-card-v3 {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-flow: column;
            flex-flow: column;
    --article-card-border-width: 0 0 0 12px
}
  }
  .article-card-v3 .article-card-img {
    -webkit-box-flex: 52%;
        -ms-flex: 52%;
            flex: 52%;
  }
  .article-card-v3 .article-card-img-wrapper {
    height: 100%;
    padding-top: 63%;
    position: relative;
  }
  @media (max-width: 35.9375rem) {
  .article-card-v3 .article-card-img-wrapper {
      padding-top: 50%
  }
    }
  .article-card-v3 .article-card-img-wrapper img {
      position: absolute;
      -o-object-fit: cover;
         object-fit: cover;
      top: 0;
      width: 100%;
      height: 100%;
    }
  .article-card-v3 .article-card-content {
    -webkit-box-flex: 40%;
        -ms-flex: 40%;
            flex: 40%;
    padding: var(--s-xl);
    margin: auto;
  }
  @media (max-width: 35.9375rem) {
  .article-card-v3 .article-card-content {
      margin: 0;
      padding: 17px var(--s-m) 20px 12px
  }
    }
  @media (max-width: 35.9375rem) {
  .article-card-v3 .article-card-content .article-card-title {
        font-size: var(--fs-l);
        margin-bottom: 0
    }
      }
  @media (max-width: 35.9375rem) {
  .article-card-v3 .article-card-content .btn {
        display: none
    }    
      }
  .article-card-v3 h1, 
  .article-card-v3 h2, 
  .article-card-v3 h3, 
  .article-card-v3 h4, 
  .article-card-v3 h5, 
  .article-card-v3 h6 {
    font-weight: var(--fw-cards);
  }
@media(min-width: 48rem) {.promo-list.promo-image-left--all .testimonial-media,
            .promo-list.promo-image-left--all .related-article-images {
                    -webkit-box-ordinal-group: 0;
                        -ms-flex-order: -1;
                            order: -1
            }
                }
        @media(min-width: 48rem) {
        .promo-list.promo-image-left--odd li:nth-child(odd) .testimonial-media,
                .promo-list.promo-image-left--odd li:nth-child(odd) .related-article-images {
                        -webkit-box-ordinal-group: 0;
                            -ms-flex-order: -1;
                                order: -1
                }
                    }
        .promo-list.promo-image-left--odd li:nth-child(odd) .testimonial-media img:first-child, .promo-list.promo-image-left--odd li:nth-child(odd) .related-article-images img:first-child {
                            float: right;
                        }
        .promo-list.promo-image-left--odd li:nth-child(odd) .testimonial-media img:nth-child(2), .promo-list.promo-image-left--odd li:nth-child(odd) .related-article-images img:nth-child(2) {
                            float: none;
                            margin-left: 10%;
                        }
        @media(min-width: 48rem) {
        .promo-list.promo-image-left--even li:nth-child(even) .testimonial-media,
                .promo-list.promo-image-left--even li:nth-child(even) .related-article-images {
                        -webkit-box-ordinal-group: 0;
                            -ms-flex-order: -1;
                                order: -1
                }
                    }
        .promo-list.promo-image-left--even li:nth-child(even) .testimonial-media img:first-child, .promo-list.promo-image-left--even li:nth-child(even) .related-article-images img:first-child {
                            float: right;
                        }
        .promo-list.promo-image-left--even li:nth-child(even) .testimonial-media img:nth-child(2), .promo-list.promo-image-left--even li:nth-child(even) .related-article-images img:nth-child(2) {
                            float: none;
                            margin-left: 10%;
                        }
    @media (max-width: 47.9375rem) {
    .promo-list.has-slider .promo {
                padding: var(--s-xxl) 0px var(--s-xs)
        }
            }
    .promo-list.no-col .promo .row {
            padding: 0;
        }
    .promo-list.no-col .promo .row > div[class*="col-"] {
                -webkit-box-flex: 0;
                    -ms-flex: 0 0 100%;
                        flex: 0 0 100%;
                max-width: 100%;
                padding: 0;
            }
    .promo-list.no-col .promo .row > div[class*="col-"]:nth-child(2) {
                    -webkit-box-ordinal-group: 0;
                        -ms-flex-order: -1;
                            order: -1;
                    margin-bottom: var(--s-m);
                }
    .promo-list.no-col .testimonial.promo .testimonial-content .testimonial-subtitle {
                    font-size: var(--fs-xs);
                }
.white-text-promo .promo-related-article.v2 .related-article-title,
        .white-text-promo .promo-related-article.v2 .related-article-intro{
            color: var(--color-white);
        }
.channel-card-img {
        position: relative;
        margin-bottom: var(--s-m);
        height: 0;
        padding-bottom: 56.25%;
        overflow: hidden;
        -webkit-box-shadow: var(--box-shadow-cards);
                box-shadow: var(--box-shadow-cards);
    }
        .channel-card-img img {
            position: absolute;
            -o-object-fit: cover;
               object-fit: cover;
            width: 100%;
            height: 100%;
            -webkit-transition: all var(--duration-l) var(--ease-out-quart);
            transition: all var(--duration-l) var(--ease-out-quart);
        }
    .channel-card-title {
        margin-bottom: var(--s-s);
    }
    .channel-card-intro {
        font-size: var(--fs-intro);
        color: var(--text-color);
        font-family: var(--ff-body);
        margin-bottom: 0;
    }
@media (min-width: 100rem) {.recipe-category-overview > .component-content {
      overflow: hidden
  }
    }
  .recipe-category-overview ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  @media (min-width: 100rem) {
  .recipe-category-overview ul {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      padding: 0px 60px 0px 0px
  }
    }
  .recipe-category-overview ul.align-center{
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
  @media (min-width: 62rem) {
  .recipe-category-overview ul {
      margin: 0 -10px
  }
    }
  .recipe-category-overview ul li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 47%;
              flex: 0 0 47%;
      padding: 0 5px;
    }
  @media (min-width: 48rem) {
  .recipe-category-overview ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 40%;
                flex: 0 0 40%;
        padding: 0 10px
    }
      }
  @media (min-width: 62rem) {
  .recipe-category-overview ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 21%;
                flex: 0 0 21%
    }
      }
  .recipe-category-overview ul li > a.active,
        .recipe-category-overview ul li > a:hover,
        .recipe-category-overview ul li > a:focus {
          text-decoration: none;
        }
  .recipe-category-overview ul li > a.active img, .recipe-category-overview ul li > a:hover img, .recipe-category-overview ul li > a:focus img {
            -webkit-box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
                    box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
          }
.recipe-card-overview-v2 {
  margin-bottom: var(--s);
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.recipe-card-overview-v2 .recipe-card-image-container {
    border-radius: 50%;
  }
.recipe-card-overview-v2 .recipe-image-wrapper {
    padding-top: 100%;
    position: relative;
    padding-right: 100%;
  }
[dir='rtl'] .recipe-card-overview-v2 .recipe-image-wrapper {
      padding-right: 0;
    }
.recipe-card-overview-v2 .recipe-image-wrapper > img {
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: 50%;
    }
.recipe-card-overview-v2 .recipe-card-content-wrapper {
    padding: var(--m-s) 0;
    text-align: center;
    width: 98%;
  }
a:hover .recipe-card-overview-v2 .recipe-card-content-wrapper .recipe-card-title,
    a:focus .recipe-card-overview-v2 .recipe-card-content-wrapper .recipe-card-title {
      /* word-break: keep-all;
      -webkit-line-clamp: unset; */
    }
.recipe-card-overview-v2 .recipe-card-content-wrapper .recipe-card-title {
      margin: 0;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      /* font-family: var(--ff-body); */
      /* font-size: var(--fs-l);
      line-height: var(--fs-l); */
      font-size: 18px;
      line-height: 18px;
      text-align: center;
      /* font-weight: 900; */
      text-transform: uppercase;
      display: -webkit-box;
      color: var(--recipe-card-title-text-color);
    }
@media (min-width: 62rem) {
.recipe-card-overview-v2 .recipe-card-content-wrapper .recipe-card-title {
        /* font-size: var(--fs-xxl);
        line-height: var(--fs-h1-m); */
        font-size: 25px;
        line-height: 28px;
        text-align: center
    }
      }
@media (max-width: 61.9375rem) {
.recipe-card-overview-v2 .recipe-card-content-wrapper .recipe-card-title {
        /* font-size: var(--fs-l); */
        font-size: 18px;
        text-align: center
    }
      }

.page-teaser-overview ul {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -ms-flex-wrap: wrap;
          flex-wrap: wrap;
      margin: 0 -5px;
  }
      @media (min-width: 48rem) {.page-teaser-overview ul {
        margin: 0 -10px
  }
      }
      .page-teaser-overview ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 50%;
                flex: 0 0 50%;
        padding: 0 5px;
      }
      @media (min-width: 48rem) {
      .page-teaser-overview ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 33.33%;
                  flex: 0 0 33.33%;
          padding: 0 var(--fs-xxs)
      }
        }
      @media (min-width: 62rem) {
      .page-teaser-overview ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 25%;
                  flex: 0 0 25%
      }
        }
      .page-teaser-overview ul li > a.active,
          .page-teaser-overview ul li > a:hover,
          .page-teaser-overview ul li > a:focus {
            text-decoration: none;
          }
.page-teaser-list {
  border-radius: var(--border-radius-l);
  margin-bottom: var(--s);
  background: #fff;
  background: var(--prod-img-bg, #fff);
}
.page-teaser-list.active,
  .page-teaser-list:hover,
  .page-teaser-list:focus {
    -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
            box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
  }
.page-teaser-list .page-teaser-image-container {
    border-radius: var(--border-radius-l);
  }
.page-teaser-list .page-teaser-img-wrapper {
    padding-top: 100%;
    position: relative;
    padding-right: 100%;
  }
[dir="rtl"] .page-teaser-list .page-teaser-img-wrapper {
      padding-right: 0;
    }
.page-teaser-list .page-teaser-img-wrapper > img {
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      -o-object-fit: contain;
         object-fit: contain;
      border-radius: var(--border-radius-l);
      }
.page-teaser-list .page-teaser-content-wrapper {
    margin: 15px 0px 12px;
    text-align: center;
    height: var(--content-height);
  }
@media (max-width: 61.9375rem) {
.page-teaser-list .page-teaser-content-wrapper {
      text-align: center
  }
      .page-teaser-list .page-teaser-content-wrapper .star-rating-card-container {
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
      }
    }
a:hover .page-teaser-list .page-teaser-content-wrapper .product-detail-title,
    a:focus .page-teaser-list .page-teaser-content-wrapper .product-detail-title {
      word-break: keep-all;
      -webkit-line-clamp: unset;
    }
.page-teaser-list .page-teaser-content-wrapper .page-teaser-card-title {
      margin: 0;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      /* font-family: 'Sucrose'; */
      text-transform: uppercase;
      font-size: 18px;
      line-height: 19px;
      display: -webkit-box;
      padding: 0 14px;
    }
@media (min-width: 62rem) {
.page-teaser-list .page-teaser-content-wrapper .page-teaser-card-title {
        font-size: 25px;
        line-height: 28px;
        padding: 0 20px
    }
      }
.page-teaser-list .page-teaser-content-wrapper .star-rating-product-card{
      padding: var(--border-radius-m);
    }


/* search result property for product search pages and global search */

@media (min-width: 62rem) {

#filter-results-wrapper .page-teaser-overview .search-result-list li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 33.33%;
                  flex: 0 0 33.33%
      }
        }

@media (min-width: 62rem) {

#filter-results-wrapper .page-teaser-overview .search-result-list.show li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 25%;
                  flex: 0 0 25%
      }
        }

@media (min-width: 62rem) {

#product-filter-results-wrapper .page-teaser-overview .search-result-list li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 33.33%;
                  flex: 0 0 33.33%
      }
        }

@media (min-width: 62rem) {

#product-filter-results-wrapper .page-teaser-overview .search-result-list.show li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 25%;
                  flex: 0 0 25%
      }
        }



.product-detail-cards {
  margin-left: -15px;
  margin-right: -15px;
}

    .product-detail-cards ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        margin-top: var(--s-m);
    }

    @media (min-width: 48rem) {

    .product-detail-cards ul {
            margin-top: var(--s-xl)
    }
        }

    @media (min-width: 62rem) {

    .product-detail-cards ul {
            margin-top: 0px
    }
        }

    .product-detail-cards ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 50%;
                  flex: 0 0 50%;
          padding: 0 5px;
        }

    .product-detail-cards ul li:first-child {
            padding-left: 0px;
          }

    [dir="rtl"] .product-detail-cards ul li:first-child {	
              padding-right: 0px;
              padding-left: 10px;
            }

    .product-detail-cards ul li:last-child {
            padding-right: 0px;
          }

    [dir="rtl"] .product-detail-cards ul li:last-child {	
              padding-left: 0px;
              padding-right: 10px;
            }

    @media (min-width: 48rem) {

    .product-detail-cards ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 33.33%;
                    flex: 0 0 33.33%;
            padding: 0 10px
        }
          }

    @media (min-width: 62rem) {

    .product-detail-cards ul li {
            -webkit-box-flex: 1;
                -ms-flex: 1 0 29%;
                    flex: 1 0 29%
        }
          }

    @media (min-width: 75rem) {

    .product-detail-cards ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 50%;
                    flex: 0 0 50%
        }
          }

    .product-detail-cards ul li > a:hover {
            text-decoration: none;
          }

.product-detail-cards-v2 {
    border-radius: var(--border-radius-l);
    margin-bottom: var(--s-m);
    background-color: var(--brand-color-3);
}

@media (min-width: 62rem) {

.product-detail-cards-v2 {
      margin-bottom: var(--s)
}
    }

.product-detail-cards-v2.active,
    .product-detail-cards-v2:hover,
    .product-detail-cards-v2:focus {
      -webkit-box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
              box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.2);
    }

.product-detail-cards-v2 .product-detail-image-container {
      border-radius: var(--border-radius-xl);
      min-height: var(--product-detail-image-m);

    }

@media (min-width: 62rem) {

.product-detail-cards-v2 .product-detail-image-container {
        border-radius: var(--border-radius-l);
        min-height: var(--product-detail-image-d);
        max-height: var(--product-detail-image-d);
        max-width: var(--product-detail-image-d)

    }
      }

.product-detail-cards-v2 .product-detail-img-wrapper {
      padding-top: 100%;
      position: relative;
      padding-right: 100%;
    }

[dir="rtl"] .product-detail-cards-v2 .product-detail-img-wrapper {
        padding-right: 0;
      }

.product-detail-cards-v2 .product-detail-img-wrapper > img {
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        -o-object-fit: contain;
           object-fit: contain;
        border-radius: var(--border-radius-l);
        }

.product-detail-cards-v2 .product-detail-content-wrapper {
      padding: 15px 20px;
      text-align: center;
    }

@media (max-width: 61.9375rem) {

.product-detail-cards-v2 .product-detail-content-wrapper {
        text-align: center;
        padding: 14px 14px 36px 14px
    }
        .product-detail-cards-v2 .product-detail-content-wrapper .star-rating-card-container {
          -webkit-box-pack: start;
              -ms-flex-pack: start;
                  justify-content: flex-start;
        }
      }

a:hover .product-detail-cards-v2 .product-detail-content-wrapper .product-detail-title,
      a:focus .product-detail-cards-v2 .product-detail-content-wrapper .product-detail-title {
        word-break: keep-all;
        -webkit-line-clamp: unset;
      }

.product-detail-cards-v2 .product-detail-content-wrapper .product-detail-title {
        height: 40px;
        margin: 0;
        word-break: break-word;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        font-family: 'Sucrose';
        text-transform: uppercase;
        font-size: var(--fs-l);
        line-height: var(--fs-h5-d);
        padding: 0 14px;
      }

@media (min-width: 62rem) {

.product-detail-cards-v2 .product-detail-content-wrapper .product-detail-title {
          font-size: var(--fs-h3-d);
          height: 56px
      }
        }

.product-detail-cards-v2 .product-detail-content-wrapper .star-rating-product-card{
        padding: var(--border-radius-l);
      }

#newsarticle{ 
  max-width: 100%;
}
  #newsarticle .field-introduction{
    font-size: inherit;
  }
  #newsarticle .article-card-v4 {
  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-shadow: none;
          box-shadow: none;
}
  [dir="rtl"] #newsarticle .article-card-v4 {
      margin-right: 0px;      
  }
  #newsarticle .article-card-v4 .article-card-image-wrapper {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    max-height: var(--article-card-height-mobile);
    min-height: var(--article-card-height-mobile);
    max-width: var(--article-card-width-mobile);
    min-width: var(--article-card-width-mobile);
    position: relative;
  }
  @media (min-width: 48rem) {
  #newsarticle .article-card-v4 .article-card-image-wrapper {
      max-height: var(--article-card-height-desktop);
      min-height: var(--article-card-height-desktop);
      max-width: var(--article-card-width-desktop);
      min-width: var(--article-card-width-desktop)
  } 
    }
  #newsarticle .article-card-v4 .article-card-image-wrapper > img {
      height: 100%;
      width: 100%;
      /* border-radius: var(--border-radius-m); */
      -o-object-fit: cover;
         object-fit: cover;
      }
  #newsarticle .article-card-v4 .article-card-content-wrapper {
    /* width: 205px; */
    margin-top: -5px;
    display: block;
    text-align: left;

    margin-left: 20px;
  }
  [dir="rtl"] #newsarticle .article-card-v4 .article-card-content-wrapper {
      margin-right: var(--s-xl);
      text-align: justify;
    }
  @media (min-width: 48rem) {
  #newsarticle .article-card-v4 .article-card-content-wrapper {
      margin-left: 20px;
      margin-top: 0px
  }
    }
  #newsarticle .article-card-v4 .article-card-content-wrapper .tag-name > span {
        font-size: var(--fs-xxs);
        font-weight: var(--fw-h2);
        text-transform: capitalize;
        border-bottom: 1px solid;
        line-height: 14px;
      }
  @media (min-width: 48rem) {
  #newsarticle .article-card-v4 .article-card-content-wrapper .tag-name > span {
          font-size: var(--fs-xs);
          line-height: var(--fs-l)
      }
        }
  #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-title{
      /* width: 205px; */
      /* font-family: 'Sucrose'; */
      text-transform: capitalize;
      font-size: 18px;
      font-weight: 900;
      line-height: 19px;
      letter-spacing: 0em;
      text-align: left;
      margin-top: var(--s-m);
    }
  [dir="rtl"] #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-title {
        text-align: right; 
      }
  @media (min-width: 48rem) {
  #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-title{
        height: var(-fs-h3-d);
        /* width: 377px; */
        font-size: 25px;
        line-height: 22px;
        letter-spacing: 0em;
        text-align: left; 
        margin-top: 20px
    }
        [dir="rtl"] #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-title {
          text-align: right; 
        } 
      }
  #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-introduction {
      font-family: var(--ff-content);
      text-transform: none;
      text-transform: initial;
      /* font-size: 15px;
      line-height: 24px; */
      font-weight: var(--fw-regular);
      letter-spacing: 0em;
      text-align: left;
      margin-top: var(--s-s);
    }
  [dir="rtl"] #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-introduction {
        text-align: right; 
      }
  @media (min-width: 48rem) {
  #newsarticle .article-card-v4 .article-card-content-wrapper .article-card-title.field-introduction {
        /* font-size: var(--fs-h6-d);
        line-height: var(--fs-h1-m); */
        letter-spacing: 0em;
        text-align: left;
        margin-top: 8px 
        /* width: 377px; */
    }
      }
  @media (max-width: 35.9375rem) {
  #newsarticle .article-card-v4 .btn {
    display: content
  }    
    }
  #newsarticle .article-card-v4 .btn.btn-text.field-text {
    position: absolute;
    margin-left: var(--z-index-footer);
    margin-top: var(--fs-xxxl);
    text-transform: capitalize;
    text-decoration: underline;
  }
  @media (min-width: 48rem) {
  #newsarticle .article-card-v4 .btn.btn-text.field-text {
      margin-left: var(--article-card-height-desktop);
      margin-top: 0px
  }
    }
  #newsarticle .article-card-v4 h1, 
  #newsarticle .article-card-v4 h2, 
  #newsarticle .article-card-v4 h3, 
  #newsarticle .article-card-v4 h4, 
  #newsarticle .article-card-v4 h5, 
  #newsarticle .article-card-v4 h6 {
    font-weight: var(--fw-cards);
  }
@media (min-width: 100rem) {.product-category-overview > .component-content {
      overflow: hidden
  }
    }
  .product-category-overview ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: nowrap;
        flex-wrap: nowrap;
  }
  @media (min-width: 100rem) {
  .product-category-overview ul {
      -webkit-box-pack: justify;
          -ms-flex-pack: justify;
              justify-content: space-between;
      margin: 0 -10px;
      padding: 0px 60px 0 0
  }
    }
  .product-category-overview ul.align-center{
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
    }
  .product-category-overview ul li {
      -webkit-box-flex: 0;
          -ms-flex: 0 0 47%;
              flex: 0 0 47%;
      padding: 0 5px;
    }
  @media (min-width: 48rem) {
  .product-category-overview ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 40%;
                flex: 0 0 40%;
        padding: 0 var(--fs-xxs)
    }
      }
  @media (min-width: 62rem) {
  .product-category-overview ul li {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 21%;
                flex: 0 0 21%
    }
      }
  .product-category-overview ul li > a.active,
        .product-category-overview ul li > a:hover,
        .product-category-overview ul li > a:focus {
          text-decoration: none;
        }
  .product-category-overview ul li > a.active img, .product-category-overview ul li > a:hover img, .product-category-overview ul li > a:focus img {
            -webkit-box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
                    box-shadow: 0px 0px 30px rgba(0, 15, 67, 0.2);
          }
.product-card-overview-v2 {
  margin-bottom: var(--s);
  border-radius: var(--border-radius-l);
  -webkit-box-shadow: none !important;
          box-shadow: none !important;
}
.product-card-overview-v2 .product-card-image-container {
    border-radius: 50%;
  }
.product-card-overview-v2 .product-image-wrapper {
    padding-top: 100%;
    position: relative;
    padding-right: 100%;
  }
[dir='rtl'] .product-card-overview-v2 .product-image-wrapper {
      padding-right: 0;
    }
.product-card-overview-v2 .product-image-wrapper > img {
      top: 0;
      width: 100%;
      height: 100%;
      position: absolute;
      -o-object-fit: cover;
         object-fit: cover;
      border-radius: 50%;
    }
.product-card-overview-v2 .product-card-content-wrapper {
    padding: var(--m-s) 0;
    text-align: left;
    width: 95%;
  }
@media (max-width: 61.9375rem) {
.product-card-overview-v2 .product-card-content-wrapper {
      text-align: center
  }
    }
a:hover .product-card-overview-v2 .product-card-content-wrapper .product-card-title,
    a:focus .product-card-overview-v2 .product-card-content-wrapper .product-card-title {
      /* word-break: keep-all;
      -webkit-line-clamp: unset; */
    }
.product-card-overview-v2 .product-card-content-wrapper .product-card-title {
      margin: 0;
      word-break: break-word;
      overflow: hidden;
      text-overflow: ellipsis;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      /* font-family: 'Sucrose'; */
      text-transform: uppercase;
      font-size: 18px;
      line-height: 19.8px;
      /* font-weight: 900; */
      display: -webkit-box;
      text-align: center;
    }
@media (min-width: 62rem) {
.product-card-overview-v2 .product-card-content-wrapper .product-card-title {
        font-size: 25px;
        line-height: 27.5px
    }
      }

#category-richtext .component-content > h2 {
  text-align: left;
}

/* font-size: 24px;
  line-height: 26.4px;
  font-weight: 900; */

@media (min-width: 48rem) {

#category-richtext .component-content > h2 {
    text-align: center
    /* font-size: 31px;
    line-height: 34.1px; */
}
  }

.article-banner ul{
        padding-left:0px;
    }
        @media(min-width: 48rem){
            
        }
        .article-banner ul li .banner-bgcontainer {
                height: var(--article-banner-height-mobile);
                margin-bottom: 15px;
            }
        @media (min-width: 36rem) {
        .article-banner ul li .banner-bgcontainer {
                    /* width: 100%; */
                    height: var(--article-banner-height-desktop);
                    margin-top: var(--fs-h3-m)
            }
                }
        .article-banner ul li .banner-bgcontainer > img{
                    height: 100%;
                    width: 100%;
                }
        /* border-radius: var(--article-banner-border-radius-mobile); */
        @media (min-width: 48rem) {
        .article-banner ul li .banner-bgcontainer > img{
                        height: 100%;
                        width: 100%;
                        /* border-radius: var(--article-banner-border-radius-desktop); */
                        margin-right: 10px
                }   
                        }
        .article-banner ul li .banner-content {
                text-align: center;
                margin-bottom: var(--s-xxl);
                margin-left: -15px;
                margin-right: -15px;
            }
        @media (min-width: 48rem) {
        .article-banner ul li .banner-content {
                    width: 100%;
                    text-align: left;
                    margin-top: 0px
            }
                    [dir="rtl"] .article-banner ul li .banner-content {
                        text-align: right;      
                    }
                }
        @media (min-width: 75rem) {
        .article-banner ul li .banner-content {
                    /* margin-top: calc(var(--fs-h5-m)*2); */
                    margin-top: 32px
            }
                    
                }
        .article-banner ul li .banner-content .tag-name {
                    padding-bottom: var(--s-m);
                  }
        @media (min-width: 62rem){
        .article-banner ul li .banner-content .tag-name {
                        padding-bottom: var(--s-xl)
                  }
                    }
        .article-banner ul li .banner-content .tag-name > span {
                        font-size: var(--fs-s);
                        font-weight: var(--fw-h2);
                        text-transform: capitalize;
                        border-bottom: 1px solid;
                        line-height: var(--fs-xl);
                    }
        .article-banner ul li .banner-content .banner-content-title {
                    /* font-family: 'Sucrose'; */
                    text-transform: capitalize;
                    font-size: 18px;
                    line-height: 19.8px;
                    font-weight: 900;
                    margin-bottom: 8px;
                }
        @media (min-width: 62rem) {
        .article-banner ul li .banner-content .banner-content-title {
                        font-size: 25px;
                        line-height: 27.5px
                }
                    }
        .article-banner ul li .banner-content .banner-intro {
                    /* font-family: var(--ff-content); */
                    color: var(--heading-color);
                    /* font-size: var(--fs-m);
                    line-height: var(--fs-h2-d); */
                    font-weight: 400;
                    /* font-size: 15px;
                    line-height: 24px; */
                    text-align: center;
                    padding-bottom: 10px;
                }
        @media (min-width: 62rem) {
        .article-banner ul li .banner-content .banner-intro {
                        /* font-size: 17px;
                        line-height: 28px; */
                        text-align: left;
                        padding-bottom: 15px
                }
                    }
        @media (max-width: 35.9375rem) {
        .article-banner ul li .banner-content .btn {
                    display: content
                }    
                    }
        .article-banner ul li .btn.btn-text.field-text {
                position: relative;
                text-transform: capitalize;
                text-decoration: underline;
                font-weight: 900;
                font-size: 14px;
                margin-top: var(--fs-xl);
                margin-left: var(--button-margin-left);
                padding: 0px;
            }
        @media (min-width: 48rem) {
        .article-banner ul li .btn.btn-text.field-text {
                    margin-top: calc(var(--fs-m)*2);
                    margin-left: 0px;  
                    font-size: 17px;  
                    line-height: 23.38px
            }
                }
@media (min-width: 48rem) {
.order-first .article-banner .banner-bgcontainer{
            padding-right: 10px
        }
            }
@media (min-width: 48rem) {
.order-last .article-banner .banner-bgcontainer{
            padding-left: 10px
        }
            }
/* @import './variants/updield-article-card-v4.css'; */
/*Global recipie-catagory-overview*/
.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(--primary-color);
    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-title:empty{
      display: none;
    }

  .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;
  }

.large-banner ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: nowrap;
            flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
    }
                
        .large-banner ul li {
          -webkit-box-flex: 0;
              -ms-flex: 0 0 81%;
                  flex: 0 0 81%;
        }
                
        @media (min-width: 48rem) {
                
        .large-banner ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 70%;
                    flex: 0 0 70%;
            padding: 0 var(-fs-xxs)
        }
          }
                
        @media (min-width: 62rem) {
                
        .large-banner ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 100%;
                    flex: 0 0 100%
        }
          }
                
        @media (max-width: 74.9375rem) {
                
        .large-banner ul li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 100%;
                    flex: 0 0 100%
        }
          }
                
        .large-banner ul li > a:hover {
            text-decoration: none;
          }
.large-banner-section {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    background-color: var(--promo-large-banner-section-bg-color);
}
@media (min-width: 62rem) {
.large-banner-section {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row
}
    }
.large-banner-section .large-banner-image-container {
      padding: unset;
    }
.large-banner-section .large-banner-image-wrapper {
      width: 100%;
      height: var(--banner-img-height-m);
    }
@media (min-width: 62rem){
.large-banner-section .large-banner-image-wrapper {
        height: var(--banner-img-height-d)
    }
      }
.large-banner-section .large-banner-image-wrapper > img {
        top: 0;
        width: 100%;
        height: 100%;
        position: absolute;
        -o-object-fit: cover;
           object-fit: cover;
      }
.large-banner-section .large-banner-content-wrapper {

      padding: 0 var(--s-xl);
      width: 100%;
      height: var(--banner-content-height-m);
      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;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;

    }
@media (min-width: 62rem) {
.large-banner-section .large-banner-content-wrapper {
        padding: 0px 40px;
        -ms-flex-item-align: center;
            align-self: center;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start

    }
      }
[dir="rtl"] .large-banner-section .large-banner-content-wrapper {
        margin-right: 0px;    
      }
a:hover .large-banner-section .large-banner-content-wrapper .large-banner-card-title,
      a:focus .large-banner-section .large-banner-content-wrapper .large-banner-card-title {
        word-break: keep-all;
        -webkit-line-clamp: unset;
      }
.large-banner-section .large-banner-content-wrapper .large-banner-title {
        margin-top: var(--s-xl);
        color: var(--promo-large-banner-section-text-color);
        text-align: center;
        font-style: normal;
        text-transform: uppercase;
        /* font-size: calc(var(--fs-h4-m)*2); */
        line-height: 100%;
        font-family: var(--ff-headings);
        font-weight: var(--fw-regular);
        margin-bottom: 0px;
      }
@media (max-width: 61.9375rem){
.large-banner-section .large-banner-content-wrapper .large-banner-title {
          font-size: 32px
      }
        }
@media (min-width: 62rem) {
.large-banner-section .large-banner-content-wrapper .large-banner-title {
            text-align: left
            /* width: var(--homepage-carousel-title-width);
            height: var(--homepage-carousel-title-height); */
            /* font-size: calc(var(--fs-xl)*3); */
      }
            [dir="rtl"] .large-banner-section .large-banner-content-wrapper .large-banner-title {
              text-align: right;
            }
          }
.large-banner-section .large-banner-content-wrapper .btn {
        /* font-family: var(--ff-body);
        margin-top: var(--s-xl);
        padding: var(--fs-xxs) var(--fs-h3-m);
        width: var(--carousel-btn-width-m);
        background: var(--brand-color-3);
        color: var(--color-grey);
        border-radius: var(--border-radius-btn);
        text-transform: uppercase; */
        margin-top: 20px;
      }
@media (min-width: 62rem) {
.large-banner-section .large-banner-content-wrapper .btn {
          /* width: var(--carousel-btn-width-d);
          height: var(--button-height-d);
          font-size: var(--fs-h4-m);
          line-height: var(--fs-h3-d);
          font-weight: 900;
          padding: 14px 0px; */
      }
        }


.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)
  }
    }
  .promo-related-article .related-articles-body .links-container {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }
  .promo-related-article .related-articles-body .links-container .links {
        color: var(--heading-color);
      }
  @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(--promo-image-shadow);
              box-shadow: var(--promo-image-shadow);
      border-width: var(--promo-image-border-width);
      border-style: var(--promo-image-border-style);
      border-color: var(--promo-image-border-color);
      border-radius: var(--promo-image-border-radius);
    }
  .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 (max-width: 47.9375rem) {
      .promo-related-article.promo-image-after-text-mobile .related-article-images {
        -webkit-box-ordinal-group: 2;
            -ms-flex-order: 1;
                order: 1;
        margin-bottom: 0;
      }
      .promo-related-article.promo-image-after-text-mobile .related-articles-body {
        margin-bottom: var(--s-l);
      }
    }
  @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%;
      }
  @media (max-width: 47.9375rem) {
      .promo-related-article.hide-image--mobile .related-article-images {
        display: none;
      }      
    }
  .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;
      }
  .promo-related-article.v2 .related-articles-body {
      padding-top: 0;
      padding-bottom: 0;
      text-align: left;
      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: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
    }
  @media (max-width: 47.9375rem) {
  .promo-related-article.v2 .related-articles-body {
      text-align: center;
      padding-bottom: calc(var(--s-xl)*2);
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center
    }
    }
  [dir='rtl'] .promo-related-article.v2 .related-articles-body {
        text-align: right;
      }
  @media (min-width: 62rem) {
  .promo-related-article.v2 .related-articles-body {
        padding: var(--s-l) 40px
    }
      }
  .promo-related-article.v2 .related-article-images {
      -ms-flex-item-align: center;
          align-self: center;
    }
  @media (max-width: 47.9375rem) {
  .promo-related-article.v2 .related-article-images {
        margin-bottom: var(--s-l)
    }
      }
  @media (min-width: 62rem) {
  .promo-related-article.v2 .related-article-images {
        padding-left: var(--s)
    }
      }
  .promo-related-article.v2 .related-article-images img:first-child {
        width: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }
  @media (max-width: 47.9375rem) {
  .promo-related-article.v2 .related-article-title {
        margin-bottom: var(--s-s)
    }
      }
  @media(min-width: 62rem) {
  .promo-related-article.v2 .related-article-title {
        margin-bottom: var(--s)
    }
      }
  .promo-related-article.v2 .related-article-intro {
      margin-bottom: var(--s-m);
    }
  @media (min-width: 62rem) {
  .promo-related-article.v2.promo-image-left .related-article-images {
          padding-right: var(--s)
      }
        }

.recipe-categories {
  padding: var(--s-l) 0;
}

@media (min-width: 62rem){

.recipe-categories {
    padding: var(--s-xl) 0
}
  }

.recipe-categories:nth-of-type(1){
    padding-top: var(--s-xxl);
  }

@media (min-width: 62rem){

.recipe-categories:nth-of-type(1){
      padding-top: var(--s-xxxl)
  }
    }

.recipe-categories:nth-last-of-type(1){
    padding-bottom: 64px;
  }

@media (min-width: 62rem){

.recipe-categories:nth-last-of-type(1){
      padding-bottom: 80px
  }
    }

.recipe-categories .related-articles-body {
    text-align: left;
    padding-bottom: 0;
  }

[dir='rtl'] .recipe-categories .related-articles-body{
      text-align: right;
    }

@media(min-width: 62rem){

.recipe-categories .related-articles-body {
      padding-right: var(--s-xxl);
      padding-top: 0 !important
  }
    }

.recipe-categories .related-recipe-images {
    padding: 0;
  }

.recipe-categories .related-recipe-images img {
      max-height: 290px;
      height: 290px;
      -o-object-fit: cover;
         object-fit: cover;
      -webkit-box-shadow: none;
              box-shadow: none;
      border-width: var(--promo-image-border-width);
      border-style: var(--promo-image-border-style);
      border-color: var(--promo-image-border-color);
      border-radius: unset;
    }

@media(min-width: 36rem){

.recipe-categories .related-recipe-images img {
        -webkit-box-shadow: var(--promo-image-shadow);
                box-shadow: var(--promo-image-shadow);
        border-radius: var(--promo-image-border-radius)
    }
      }

@media(min-width: 62rem){

.recipe-categories .related-recipe-images img {
        width: 100%;
        max-width: 650px;
        max-height: 480px;
        -o-object-fit: cover;
           object-fit: cover;
        height: 480px
    }
      }

@media (max-width: 47.9375rem) {

.recipe-categories .related-recipe-images {
      -webkit-box-ordinal-group: 0;
          -ms-flex-order: -1;
              order: -1;
      margin-bottom: var(--s-l)
  }
    }

@media(min-width: 62rem){

.recipe-categories.promo-image-left .related-articles-body {
        padding-left: var(--s-xl);
        padding-top: 0 !important
    }
      }

@media(min-width: 48rem) {

.recipe-categories.promo-image-left .related-recipe-images {
        -webkit-box-ordinal-group: 0;
            -ms-flex-order: -1;
                order: -1
    }
      }

@media(min-width: 62rem){

.recipe-categories.promo-image-left .related-recipe-images img {
          float: left !important
      }
        }

.page-header {
  position: relative;
}

  .page-header.image-full-text-right-bottom .page-header-bgcontainer {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column; 
      background-color: transparent;
      min-height: 120vw;
    }

  @media (min-width: 36rem) {

  .page-header.image-full-text-right-bottom .page-header-bgcontainer {
        min-height: 50vw
    }
      }

  @media (min-width: 48rem) {

  .page-header.image-full-text-right-bottom .page-header-bgcontainer {
        min-height: 80vw
    }
      }

  @media (min-width: 62rem) {

  .page-header.image-full-text-right-bottom .page-header-bgcontainer {
        min-height: 35vw
    }
      }

  .page-header.image-full-text-right-bottom .page-header-bgcontainer img {
        width: 100%;
        height: 100%;
        -o-object-fit: contain;
           object-fit: contain;
        position: relative;
      }

  .page-header.image-full-text-right-bottom .page-header-content {
      padding: 0 !important;
      width: 90%;
      margin: 0 auto;
    }

  @media (min-width: 48rem) {

  .page-header.image-full-text-right-bottom .page-header-content {
        width: 56%
    }
      }

  @media (min-width: 993px) {

  .page-header.image-full-text-right-bottom .page-header-content {
        bottom: -100px;
        left: 58%;
        height: 100%;
        padding: 20px;
        width: 31.9%;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        top: 50%;
        -webkit-transform: translateY(-30%);
                transform: translateY(-30%);
        position: absolute
    }
      }

  .page-header.image-full-text-right-bottom .page-header-content-wrapper {
      margin-bottom: var(--s-xxl);
      margin-top: 8px;
    }

  @media (min-width: 48rem) {

  .page-header.image-full-text-right-bottom .page-header-content-wrapper {
        margin-bottom: var(--s-xxxl);
        margin-top: 20px
    }
      }

  @media (min-width: 993px) {

  .page-header.image-full-text-right-bottom .page-header-content-wrapper {
        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: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        text-align: left;
        margin-bottom: 0
    }
      }

  .page-header.image-full-text-right-bottom .page-header-content-wrapper > a.btn{
        -webkit-transform: none!important;
                transform: none!important;
        opacity: 1!important;
      }

  .page-header.image-full-text-right-bottom .page-header-content-title {
      margin-bottom: var(--s-m);
      font-family: var(--ff-pageHeadings);
      letter-spacing: -0.085rem;
      line-height: var(--lh-xxs);
    }

  .page-header.image-full-text-right-bottom .page-header-content-title:empty{
        display: none;
      }

  @media (min-width: 36rem) {

  .page-header.image-full-text-right-bottom .page-header-content-title {
        font-size: var(--fs-xxxxl)
    }
      }

  @media (min-width: 48rem) {

  .page-header.image-full-text-right-bottom .page-header-content-title {
        font-size: var(--fs-xxxxxl)
    }
      }

  @media (min-width: 75rem) {

  .page-header.image-full-text-right-bottom .page-header-content-title {
        font-size: var(--fs-xxxxxxl)
    }
      }

  .page-header.image-full-text-right-bottom .page-header-content-subtitle {
      font-family: var(--ff-pageHeadings);
      letter-spacing: -0.085rem;
      -webkit-transform: none!important;
              transform: none!important;
      opacity: 1!important;
    }

  .page-header.image-full-text-right-bottom .page-header-content-subtitle:empty{
        display: none;
      }

  .page-header.image-full-text-right-bottom .page-header-content-text{
      font-size: var(--fs-m);
      margin-bottom: var(--s-l);
      line-height: 30px;
      -webkit-transform: none!important;
              transform: none!important;
      opacity: 1!important;
    }

  @media (min-width: 75rem) {

  .page-header.image-full-text-right-bottom .page-header-content-text{
        font-size: var(--fs-l);
        margin-bottom: var(--s-xl);
        line-height: 32px
    }
      }

  @media (min-width: 48rem) {

  .page-header.image-full-text-right-bottom.has-curved-bottom {
        height: 20vw
    }
      }

  .page-header.image-full-text-right-bottom.has-right-aligned-text .page-header-bgcontainer {
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
      }

  .page-header.image-full-text-right-bottom.has-right-aligned-text .page-header-content {
        -ms-flex-preferred-size: 52vw;
            flex-basis: 52vw;
        padding-left: 0;
      }

  [dir="rtl"] .page-header.image-full-text-right-bottom.has-right-aligned-text .page-header-content {
          -ms-flex-preferred-size: auto;
              flex-basis: auto;
        }

  @media (min-width: 62rem) {

  .page-header.image-full-text-right-bottom.has-right-aligned-text .page-header-content {
          -ms-flex-preferred-size: 66vw;
              flex-basis: 66vw
      }
        }

  .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,
  .page-header .page-header-content-subtitle,
  .page-header .page-header-content-text {
    text-shadow: var(--page-header-title-shadow);
    color: var(--page-header-content-color);
  }

  .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
    }
      }

  .page-header.is-small-variant .page-header-content .page-header-content-subtitle:empty {
          display: none;
        }

  .page-header.is-medium-variant .page-header-bgcontainer {
      height: 61.334vw;
      max-height: 350px;
      -webkit-box-align: unset;
          -ms-flex-align: unset;
              align-items: unset;
      min-height: unset;
    }

  .page-header.is-medium-variant .page-header-content {
      height: 100%;
      padding: var(--s-xxl) var(--s-m);
    }

  .page-header.is-medium-variant .page-header-content .page-header-content-title {
        margin-bottom: 0;
        font-size: var(--fs-xl);
      }

  @media (min-width: 48rem) {

  .page-header.is-medium-variant .page-header-content .page-header-content-title {
          font-size: var(--fs-xxxl)
      }
        }

  .page-header.is-medium-variant .page-header-content .page-header-content-subtitle {
        margin: var(--m-xs) 0;
      }

  .page-header.is-medium-variant .page-header-content .page-header-content-subtitle:empty {
          display: none;
        }

  @media (max-width: 61.9375rem) {

  .page-header:not(.is-small-variant):not(.mobile-content-under-image):not(.is-medium-variant) .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(--page-header-overlay-color);
      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(--page-header-overlay-color);
      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.hide-text .page-header-content {
    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;
        }
    }

  .page-header.shade-bottom::after{
      height: 50%;
      background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--overlay-bg-medium)));
      background-image: linear-gradient(transparent, var(--overlay-bg-medium));
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      width: 100%;
    }

  @media (max-width: 47.9375rem) {

  .page-header.mobile_content_on_bottom_image .page-header-content {
        padding-bottom: var(--s-l) !important;
        -ms-flex-item-align: end;
            align-self: flex-end;
        -ms-flex-preferred-size: 100vw;
            flex-basis: 100vw
    }

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

  @media (min-width: 768px) {

  .page-header.mobile_content_on_bottom_image .page-header-content {
        left: 58%;
        height: 100%;
        width: 31.9%;
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        top: 35%;
        -webkit-transform: translateY(-30%);
                transform: translateY(-30%);
        position: absolute;
        padding-bottom: var(--s-xxxxl) !important
    }
      }

  @media (min-width: 992px) {

  .page-header.mobile_content_on_bottom_image .page-header-content {
        top: 50%
    }
      }

  .page-header.v3 {
    background-color: var(--page-header-overlay-color);
  }

  .page-header.v3 > .component-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
    }

  @media (min-width: 62rem) {

  .page-header.v3 > .component-content {
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
            -ms-flex-direction: row;
                flex-direction: row
    }        
      }

  @media (min-width: 62rem) {

  .page-header.v3 .page-header-image-wrapper,
    .page-header.v3 .page-header-content-wrapper {
        -webkit-box-flex: 50%;
            -ms-flex: 50%;
                flex: 50%
    }        
      }

  .page-header.v3 .page-header-image {
      position: relative;
      padding-top: 68%;
      overflow: hidden;
      height: 100%;
    }

  @media (min-width: 62rem) {

  .page-header.v3 .page-header-image {
        padding-top: 56%
    }        
      }

  .page-header.v3 .page-header-image img {
        position: absolute;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
        top: 0;
      }

  .page-header.v3 .page-header-content-wrapper {
      text-align: center;
      padding: var(--s-m) var(--s-xl) var(--s-l);
      margin: auto;
    }

  @media (min-width: 62rem) {

  .page-header.v3 .page-header-content-wrapper {
        text-align: inherit;
        padding: var(--s-xxl)
    }
      }

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

  .page-header.v3.is-small-variant .page-header-image {
        padding-top: 43%;
      }

  .page-header.v3.is-small-variant .page-header-content-wrapper {
        padding: var(--s-m) var(--s-xl) var(--s-l);
      }

  @media (min-width: 62rem) {

  .page-header.v3.is-small-variant .page-header-content-wrapper {
          padding: var(--s-xl) var(--s-xxl)
      }
        }

  .page-header.v3.is-small-variant .page-header-content-title {
        margin-bottom: var(--s-s);
      }

  @media (min-width: 62rem) {

  .page-header.v3.is-small-variant .page-header-content-title {
          margin-bottom: var(--s-l)
      }
        }

  .page-header.v3.is-small-variant .page-header-content-subtitle {
        margin-bottom: 0;
      }

  .page-header .page-header-bgcontainer.hide-image{
    height: 0px;
    background-color: transparent;    
    display: none;
  }

.container.has-curved-bottom:after {
  content: '';
  background-image: var(--waveshape);
  background-size: cover;
  background-repeat: no-repeat;
  position: relative;
  display: block;
  right: 19px;
  z-index: 200;
  width: 101vw;
  height: 11vw;
  pointer-events: none;
}

[dir='rtl'] .container.has-curved-bottom:after{
    right: -15px;
  }

.container.has-curved-top:before {
  content: '';
  background-image: var(--waveshape);
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  -webkit-transform: rotate(180deg);
          transform: rotate(180deg);
  right: 0;
  z-index: 200;
  width: 101vw;
  height: 12vw;
  pointer-events: none;
}

.on-page-editor .page-header [data-container-title*='videoplaceholder'] {
  z-index: 201;
  position: absolute;
  top: 0;
  width: 100%;
}

.on-page-editor .page-header [data-container-title*='videoplaceholder'] ~ .page-header-content {
    z-index: unset;
  }

.on-page-editor .page-header [data-container-title*='videoplaceholder'] ~ .page-header-content .page-header-content-title,
    .on-page-editor .page-header [data-container-title*='videoplaceholder'] ~ .page-header-content .page-header-content-subtitle {
      z-index: 202;
      position: relative;
    }

.on-page-editor .page-header [data-container-title*='Promo'] {
  z-index: 1;
}

body:not(.on-page-editor) .page-header .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) .page-header .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) .page-header .vimeo-video + img {
      display: none;
    }

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

.page-header .vimeo-video.hide-title-subtitle ~ .page-header-content {
  display: none;
}

/* for partial global violife design with content only eg.productOverview-search page */
#page-header-global-container .page-header.is-small-variant .page-header-bgcontainer{
      height: 0;
      background-color: transparent;
      display: none;
    }

.search-box.search-box-with-icon>.component-content input[type='text'].search-box-input {
  padding: 11px 3.75rem 12px 20px;
  /* border: solid 1px transparent; */
  width: 100%;
  margin: 0;
  font-family: var(--ff-content);
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  border-radius: var(--search-box-border-radius);
  border: 1px solid;
}

@media(min-width: 62rem){

.search-box.search-box-with-icon>.component-content input[type='text'].search-box-input {
    font-size: 17px;
    line-height: 28px;
    padding: 13px 16px 16px 30px
}
  }

@media (min-width: 48rem) {

#recipe-category-header .page-header .page-header-content-wrapper {
        padding-top:0px
    }
      }
.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-video-header.shade-bottom .vimeo-video::after{
        height: 50%;
        background-image: -webkit-gradient(linear, left top, left bottom, from(transparent), to(var(--overlay-bg-medium)));
        background-image: linear-gradient(transparent, var(--overlay-bg-medium));
        content: '';
        display: block;
        position: absolute;
        bottom: 0;
        width: 100%;
      }

.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: 48rem) {.promo-image-left .related-article-images {
      -webkit-box-ordinal-group: 0;
          -ms-flex-order: -1;
              order: -1
  }
    }
 
.product-cta-floating-widget {
  background-color: var(--color-white);
  bottom: 0;
  -webkit-box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
          box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.25);
  max-width: 275px;
  opacity: 0;
  padding: var(--s-l);
  padding-top: 0;
  position: fixed; 
  right: 40px;
  -webkit-transform: translateY(calc(100% + 85px));
          transform: translateY(calc(100% + 85px));
  -webkit-transition: opacity var(--duration-l) var(--ease-in-cubic),
    -webkit-transform var(--duration-l) var(--ease-in-cubic);
  transition: opacity var(--duration-l) var(--ease-in-cubic),
    -webkit-transform var(--duration-l) var(--ease-in-cubic);
  transition: opacity var(--duration-l) var(--ease-in-cubic),
    transform var(--duration-l) var(--ease-in-cubic);
  transition: opacity var(--duration-l) var(--ease-in-cubic),
    transform var(--duration-l) var(--ease-in-cubic),
    -webkit-transform var(--duration-l) var(--ease-in-cubic);
  z-index: 900;
}

  @media (max-width: 47.9375rem) {.product-cta-floating-widget {
    left: 50%;
    max-width: none;
    padding: var(--s-m);
    right: auto;
    -webkit-transform: translate(-50%, calc(100% + 85px));
            transform: translate(-50%, calc(100% + 85px));
    width: calc(100% - 2rem)
}

    .product-cta-floating-widget > .component-content {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align:center;
          -ms-flex-align:center;
              align-items:center;
    }
  }

  .product-cta-floating-widget.is-active {
    opacity: 1;
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }

  @media (max-width: 47.9375rem) {

  .product-cta-floating-widget.is-active {
      -webkit-transform: translate(-50%, 0);
              transform: translate(-50%, 0)
  }
    }

  .product-cta-floating-widget .close-button {
    background-color: var(--color-black);
    border-radius: 50%;
    cursor: pointer;
    display: block;
    height: 24px;
    position: absolute;
    right: var(--s-m);
    top: var(--s-m);
    width: 24px;
    z-index: 1505;
  }

  .product-cta-floating-widget .close-button:before,
    .product-cta-floating-widget .close-button:after {
      background-color: var(--color-white);
      content: '';
      height: 12px;
      left: 50%;
      position: absolute;
      top: 50%;
      -webkit-transform-origin: 0 0;
              transform-origin: 0 0;
      width: 2px;
    }

  .product-cta-floating-widget .close-button:before {
      -webkit-transform: rotate(-45deg) translate(-50%, -50%);
              transform: rotate(-45deg) translate(-50%, -50%);
    }

  .product-cta-floating-widget .close-button:after {
      -webkit-transform: rotate(45deg) translate(-50%, -50%);
              transform: rotate(45deg) translate(-50%, -50%);
    }

  .product-cta-floating-widget .product-image-wrapper {
    height: 185px;
    left: 0;
    position: absolute;
    text-align: center;
    -webkit-transform: translateY(-85px);
            transform: translateY(-85px);
    top: 0;
    width: 100%;
  }

  @media (max-width: 47.9375rem) {

  .product-cta-floating-widget .product-image-wrapper {
      position: static;
      -webkit-transform: none;
              transform: none;
      height: 75px;
      width: auto
  }
    }

  .product-cta-floating-widget .product-image-wrapper > img {
      height: 100%;
    }

  .product-cta-floating-widget .content-wrapper {
    padding-top: 110px;
  }

  @media (max-width: 47.9375rem) {

  .product-cta-floating-widget .content-wrapper {
      padding: 0 var(--s-m);
      width: 210px
  }
    }

  .product-cta-floating-widget .component-title {
    color: var(--brand-color-7);
    font-size: var(--fs-l);
    font-weight: var(--fw-bold);
    margin-bottom: var(--m-xs);
  }

  .product-cta-floating-widget .component-subtitle {
    margin-bottom: var(--m-xs);
  }

  @media (min-width: 48rem) {

  .product-cta-floating-widget .component-subtitle {
      display: none
  }
    }

  @media (max-width: 47.9375rem) {

  .product-cta-floating-widget .check-list {
      display: none
  }
    }

  .product-cta-floating-widget .check-list ul li {
      font-size: var(--fs-s);
      padding: 0 0 var(--s-xs) var(--s-l);
    }

  [dir='rtl'] .product-cta-floating-widget .check-list ul li {
        padding: 0 var(--s-xl) var(--s-m) 0;
      }

  .product-cta-floating-widget .cta-button-wrapper {
    text-align: center;
  }

  @media (max-width: 47.9375rem) {

  .product-cta-floating-widget .cta-button-wrapper {
      text-align: left
  }
    }

  .product-cta-floating-widget .cta-button {
    font-size: var(--fs-m);
    -webkit-transition: all var(--duration-s) var(--ease-in-cubic);
    transition: all var(--duration-s) var(--ease-in-cubic);
  }

  @media (max-width: 47.9375rem) {

  .product-cta-floating-widget .cta-button {
      background-color: transparent;
      border: 0;
      color: var(--brand-color-2);
      padding: 0;
      text-transform: none
  }
    }

  .product-cta-floating-widget .cta-button:hover,
    .product-cta-floating-widget .cta-button:focus {
      opacity: var(--opacity-s);
      -webkit-transform: translate(0px, -2px);
              transform: translate(0px, -2px);
    }
.small .banner-bgcontainer {
        max-height: 120px;
        min-height: 120px;
    }

        @media (min-width: 75rem) {.small .banner-bgcontainer {
            max-height: 240px;
            min-height: 240px
    }
        }
    .small .banner-content {
        margin: var(--s-xl) auto;
        text-align: center;
        padding: 0 15px;
    }
    @media (min-width: 75rem) {
    .small .banner-content {
            margin: var(--s-xxl) auto;
            max-width: 760px
    }
        }
    .small .banner-content .banner-content-subtitle {
            color: var(--text-color);
            font-size: var(--fs-m);
            line-height: 30px;
        }
    @media (min-width: 62rem) {
    .small .banner-content .banner-content-subtitle {
                font-size: var(--fs-l);
                line-height: 32px
        }
            }
.custom-banner {
    min-height: 536px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
}

    .custom-banner .sides {
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        border-radius: 4px;
        -webkit-transform: skewY(-20deg);
                transform: skewY(-20deg);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end;
        -webkit-box-align: center;
            -ms-flex-align: center;
                align-items: center;
        overflow: hidden;        
    }

    [dir="rtl"] .custom-banner .sides {
            -webkit-transform: skewY(20deg);
                    transform: skewY(20deg);
        }

    .custom-banner .sides.left {
            left: 0;
            top: calc(-40% + 7.5px);
            background-color: var(--custom-banner-color);
        }

    [dir="rtl"] .custom-banner .sides.left {
                right: 0;
                left: unset;
            }

    .custom-banner .sides.right {
            right: 0;
            top: calc(60% + 15px);
        }

    [dir="rtl"] .custom-banner .sides.right {
                left: 0;
                right: unset;
            }

    .custom-banner .sides .bannerImg {
            position: absolute;
            top: -32%;
            width: 100%;
            height: 100%;
            -webkit-transform: skewY(20deg);
                    transform: skewY(20deg);
            left: 0;
        }

    [dir="rtl"] .custom-banner .sides .bannerImg {
                -webkit-transform: skewY(-20deg);
                        transform: skewY(-20deg);
            }

    .custom-banner .sides .bannerImg .banner-img-large,
            .custom-banner .sides .bannerImg .banner-img-small {
                height: 100%;
                width: 100%;
            }

    .custom-banner .sides .bannerImg .banner-img-small {
                -o-object-fit: contain;
                   object-fit: contain;
                display: block;
            }

    .custom-banner .sides .bannerImg .banner-img-large {
                -o-object-fit: cover;
                   object-fit: cover;
                display: none;
            }

    .custom-banner .sides .page-header-content {
            -webkit-transform: skewY(20deg);
                    transform: skewY(20deg);
            margin: 1rem;
            top: 45%;
            position: absolute;
            left: 0;
            margin-top: 0;
        }

    [dir="rtl"] .custom-banner .sides .page-header-content {
                -webkit-transform: skewY(-20deg);
                        transform: skewY(-20deg);
            }

    .custom-banner .sides .page-header-content .field-promotext2 {
                display: none;
            }

    .custom-banner .sides .page-header-content .field-promotext {
                margin: 0;
                margin-bottom: 16px;
            }

    .custom-banner .sides .page-header-content .field-promotext3 {
                margin: 0;
                margin-bottom: 24px;
            }

    .custom-banner .sides .page-header-content h3 {
                font-size: var(--fs-l);
                font-weight: normal;
            }

    /* Tablet mode */

    @media (min-width: 36rem) {.custom-banner {
        max-height: 560px;
        min-height: 480px;
        border-radius: 8px
}

        .custom-banner .sides {
            -webkit-transform: skewX(-20deg);
                    transform: skewX(-20deg);
            border-radius: 8px;
        }

            [dir="rtl"] .custom-banner .sides {
                -webkit-transform: skewX(20deg);
                        transform: skewX(20deg);
            }

            .custom-banner .sides.left {
                left: calc(-55% + 7.5px);
                top: 0;
            }

                [dir="rtl"] .custom-banner .sides.left {
                    right: calc(-55% + 7.5px);
                    left: unset;
                }

            .custom-banner .sides.right {
                right: calc(-45% - 15px);
                top: 0;
            }

                [dir="rtl"] .custom-banner .sides.right {
                    left: calc(-45% - 15px);
                    right: unset;
                }

            .custom-banner .sides .bannerImg {
                position: absolute;
                width: 100%;
                height: 100%;
                -webkit-transform: skewX(20deg);
                        transform: skewX(20deg);
                left: -23%;
                top: 0;
            }

                [dir="rtl"] .custom-banner .sides .bannerImg {
                    -webkit-transform: skewX(-20deg);
                            transform: skewX(-20deg);
                    right: -23%;
                    left: unset;
                }
    
                .custom-banner .sides .bannerImg .banner-img-small {
                    display: none;
                }
        
                .custom-banner .sides .bannerImg .banner-img-large {
                    display: block;
                }

            .custom-banner .sides .page-header-content {
                -webkit-transform: skewX(20deg);
                        transform: skewX(20deg);
                top: 10%;
                left: 52%;
                margin-top: 0;
            }

                [dir="rtl"] .custom-banner .sides .page-header-content {
                    -webkit-transform: skewX(-20deg);
                            transform: skewX(-20deg);
                    right: 52%;
                    left: unset;
                }
    
                .custom-banner .sides .page-header-content .field-promotext {
                    margin-bottom: 24px;
                }
    
                .custom-banner .sides .page-header-content .field-promotext3 {
                    margin: 0;
                    margin-bottom: 32px;
                }
    }

    @media (min-width: 36rem) and (min-width: 62rem) {

            .custom-banner .sides .page-header-content {
                    padding: 0;
                    top: 50%;
                    -webkit-transform: translateY(-50%) skewX(20deg);
                            transform: translateY(-50%) skewX(20deg);
                    width: auto;
                    left: 57%
            }

                    [dir="rtl"] .custom-banner .sides .page-header-content {
                        -webkit-transform: translateY(-50%) skewX(-20deg);
                                transform: translateY(-50%) skewX(-20deg);
                        right: 57%;
                        left: unset;
                    }
                }

.custom-banner-wrapper {
    border: 10px solid transparent;
}
.testimonial.promo {
    padding: var(--s-xl) 0px;
}

    .testimonial.promo .row {
        margin: 0;
    }

    @media(min-width: 36rem) {

    .testimonial.promo .row {
            padding: 0 var(--s-l)
    }
        }

    .testimonial.promo .testimonial-content {
        padding: var(--s-m);
    }

    @media (min-width: 48rem) {

    .testimonial.promo .testimonial-content {
            margin: auto;
            padding: 0 var(--s-l)
    }
        }

    @media (min-width: 62rem) {

    .testimonial.promo .testimonial-content {
            padding: var(--s-l)
    }
        }

    .testimonial.promo .testimonial-content .testimonial-intro {
            font-size: var(--fs-intro);
            font-family: var(--ff-body);
            line-height: 1.5;
            margin-bottom: var(--s-m);
        }

    .testimonial.promo .testimonial-content .testimonial-title {
            font-size: var(--fs-l);
            border-bottom: 3px solid var(--brand-color-3);
            width: -webkit-fit-content;
            width: -moz-fit-content;
            width: fit-content;
        }

    @media (min-width: 62rem) {

    .testimonial.promo .testimonial-content .testimonial-title {
                margin-bottom: var(--s-m)
        }
            }

    .testimonial.promo .testimonial-content .testimonial-subtitle {
            font-size: var(--fs-xs);
            font-family: var(--ff-body);
            line-height: 1.5;
            margin-bottom: 0;
        }

    @media (min-width: 62rem) {

    .testimonial.promo .testimonial-content .testimonial-subtitle {
                font-size: var(--fs-s)
        }
            }

    @media (max-width: 47.9375rem) {

    .testimonial.promo .testimonial-media {
            -webkit-box-ordinal-group: 0;
                -ms-flex-order: -1;
                    order: -1;
            padding: 0
    }
        }

    .testimonial.promo .testimonial-media img {
            width: 100%;
            height: auto;
        }

    @media(min-width: 36rem) {

    .testimonial.promo .testimonial-media img {
                -webkit-box-shadow: var(--promo-image-shadow);
                        box-shadow: var(--promo-image-shadow);
                border-radius: var(--promo-image-border-radius)
        }
            }

    .testimonial.promo .testimonial-media img:nth-child(2) {
                width: 55%;
                -webkit-transform: translateY(-50%);
                        transform: translateY(-50%);
                float: right;
                margin-right: 10%;
            }

    .testimonial.promo .testimonial-media .vimeo-video + img {
                display: none;
            }

    .testimonial.promo .testimonial-media .vimeo-video-wrapper {
            position: relative;
            padding-top: 56%;
            height: 0;
        }

    .testimonial.promo .testimonial-media .vimeo-video-wrapper iframe {
                position: absolute;
                height: 100%;
                top: 0;
            }

/* Styles for two in one */

.two-in-one.has-bgi > div {
            background-position: center;
        }

.two-in-one.has-bgi .testimonial.promo .testimonial-media img {
            border: 4px solid var(--color-white);
            z-index: 1;
            position: relative;
        }

.two-in-one.has-bgi .promo-list.has-slider .arrow-left::before, .two-in-one.has-bgi .promo-list.has-slider .arrow-right::before {
                    -webkit-filter: invert(1);
                            filter: invert(1);
                }

.two-in-one.has-bgi .bullets .dot {
            border: 1px solid var(--color-white);
            background-color: var(--color-medium-gray);
        }

.two-in-one.has-bgi .bullets .dot:active,
            .two-in-one.has-bgi .bullets .dot:hover,
            .two-in-one.has-bgi .bullets .dot:focus {
                background-color: var(--color-white);
            }

@media (min-width: 48rem) {                
                .two-in-one.has-bgi .two-in-one-content .recipe-detail-instructions {
                    margin-left: -12px;
                    margin-right: 0;
                }
                .two-in-one.has-bgi .two-in-one-content.left .recipe-detail-instructions {
                    margin-left: 0;
                    margin-right: -12px;
                }
        }

.two-in-one .testimonial > .row {
        padding: 0;
    }

.two-in-one .testimonial-content {
        display: none;
    }

.two-in-one .testimonial-media {
        -webkit-box-flex: 0;
            -ms-flex: 0 0 100%;
                flex: 0 0 100%;
        max-width: 100%;
        padding: 0;
    }

.two-in-one .testimonial.promo {
        padding: 0;
    }

.two-in-one .testimonial.promo .testimonial-media img {
            border-radius: var(--border-radius-l);
            border: 4px solid #902821;
        }

.two-in-one .promo-list.has-slider .promo {
            padding: 0;
        }

.two-in-one .promo-list.has-slider .arrow-left,
        .two-in-one .promo-list.has-slider .arrow-right {
            width: 24px;
            height: 24px;
        }

.two-in-one .promo-list.has-slider .arrow-left::before, .two-in-one .promo-list.has-slider .arrow-right::before {
                width: 24px;
                -webkit-filter: invert(19%) sepia(18%) saturate(6619%) hue-rotate(339deg) brightness(100%) contrast(93%);
                        filter: invert(19%) sepia(18%) saturate(6619%) hue-rotate(339deg) brightness(100%) contrast(93%);
            }

.two-in-one .promo-list.has-slider .arrow-left {
            left: -32px;
        }

.two-in-one .promo-list.has-slider .arrow-left::before {
                -webkit-transform: rotate(270deg) scale(2);
                        transform: rotate(270deg) scale(2);
            }

.two-in-one .promo-list.has-slider .arrow-right {
            right: -32px;
        }

.two-in-one .promo-list.has-slider .arrow-right::before {
                -webkit-transform: rotate(90deg) scale(2);
                        transform: rotate(90deg) scale(2);
            }

/* Two in one content styles */

.two-in-one-content.left .recipe-detail-instructions {
            padding: var(--s-m) var(--s-xl) var(--s-s) 0;
            border-radius: 12px 0 0 12px;
        }

@media (max-width: 61.9375rem) {

.two-in-one-content.left .recipe-detail-instructions {
                border-radius: 12px;
                padding: var(--s-l) var(--s-m) var(--s-s)
        }
            }

.two-in-one-content.left .content {
            padding: var(--s-m) var(--s-xxl) 0 var(--s-m);
        }

@media (max-width: 47.9375rem) {

.two-in-one-content.left .content {
                padding: var(--s-m)
        }
            }

.two-in-one-content.more .recipe-detail-instructions {
            margin-top: 0;
            padding-top: var(--s-m);
        }

.two-in-one-content.more .content p {
            margin-bottom: var(--s-l);
            font-weight: var(--fw-bold);
        }

.two-in-one-content .recipe-detail-instructions {
        padding: var(--s-m) var(--s-xxl) var(--s-s) var(--s-m);
        background-color: var(--color-white);
        border-radius: 0 12px 12px 0;
    }

@media (max-width: 61.9375rem) {

.two-in-one-content .recipe-detail-instructions {
            border-radius: 12px;
            padding: var(--s-l) var(--s-m) var(--s-s) var(--s-m)
    }
        }

.two-in-one-content .recipe-detail-instructions ol {
            margin-bottom: 0;
        }

@media (max-width: 47.9375rem) {

.two-in-one-content .recipe-detail-instructions ol {
                margin-left: 0
        }
            }

.two-in-one-content .recipe-detail-instructions ol li {
                margin: 0 0 var(--s-s) 0;
            }

.two-in-one-content .recipe-detail-instructions ol li::before {
                    color: var(--color-white);
                    font-size: var(--fs-xl);
                    top: 0;
                    border: 0;
                    background-color: #902821;
                }

.two-in-one-content .recipe-detail-instructions ol li h2 {
                    margin-bottom: 8px;
                    color: #8F2523;
                    font-size: calc(var(--fs-xl) + 4px);
                }

@media (max-width: 47.9375rem) {

.two-in-one-content .recipe-detail-instructions ol li h2 {
                        font-size: var(--fs-l)
                }
                    }

.two-in-one-content .content {
        padding: var(--s-m) 0 0 var(--s-xxl);
        color: var(--color-white);
    }

@media (max-width: 47.9375rem) {

.two-in-one-content .content {
            padding: var(--s-m)
    }
        }

.two-in-one-content .content td {
            border: none;
        }

.two-in-one-content .content p {
            margin-bottom: var(--m-xs);
            font-size: var(--fs-l);
        }

.two-in-one-content .content table {
            margin: 0;
        }

.two-in-one-content .content table tr:nth-child(odd) {
                background-color: unset;
            }

.two-in-one-content .content ul {
            margin-bottom: 0;
        }

.two-in-one-content .recipe-links td:nth-child(1) {
            padding-left: 0;
            text-align: left;
        }

.two-in-one-content .recipe-links td:nth-child(2) {
            padding-right: 0;
            text-align: right;
        }

.two-in-one-content .recipe-links td  a {
            max-width: 240px;
            padding: var(--s-s) var(--s-m);
            font-weight: var(--fw-extra-bold);
        }

@media (max-width: 47.9375rem) {
            .two-in-one-content .recipe-links td:nth-child(n) {
                margin-bottom: var(--s-m);
                text-align: center;
            }
        }

.two-in-one-content ul.recipe-links {
        margin: 0;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: justify;
            -ms-flex-pack: justify;
                justify-content: space-between;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        list-style: none;
    }

@media (max-width: 47.9375rem) {

.two-in-one-content ul.recipe-links {
            -webkit-box-pack: center;
                -ms-flex-pack: center;
                    justify-content: center
    }
        }

.two-in-one-content ul.recipe-links li {
            margin-bottom: var(--s-m);
        }

.two-in-one-content ul.recipe-links li a {
                max-width: 224px;
                padding: var(--s-s) var(--s-m);
                font-weight: var(--fw-bold);
            }

.facts-figures {
    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: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 150px 0px 280px 190px;
    grid-gap: 20px;
    gap: 20px;
    width: auto;
    height: 100%;
    background: var(--primary-color);
  }
  
    @media (min-width: 36rem) {
  
      [dir="rtl"] .facts-figures {
        padding: 150px 190px 280px 0px;
      }
    }
  
    /* overflow: hidden; */
  
    .facts-figures >.component-content {
      width: 100%;
    }
  
    @media (min-width: 992px) and (max-width: 1279px) {.facts-figures {
      padding: 20px
  }
    }
  
    @media (max-width: 35.9375rem) {.facts-figures {
      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: start;
          -ms-flex-align: start;
              align-items: flex-start;
      padding: 70px 15px 70px 15px;
      width: 100%;
      height: auto;
      margin-top: 0px
  }
    }
  
    .facts-figures ul li {
        padding: 20px 0 0px;
      }
  
    @media (max-width: 35.9375rem) {
  
    .facts-figures ul li {
          padding: 20px 0 0px
      }
        }
  
    .facts-figures ul li .number-field {
          min-width: 153px;
          min-height: 70px;
          font-family: var(--ff-headings);
          font-style: normal;
          font-weight: 400;
          font-size: 90px;
          line-height: 100%;
          color: var(--brand-color-3);
        }
  
    @media (max-width: 35.9375rem) {
  
    .facts-figures ul li .number-field {
            padding: 0;
            font-size: 70px;
            width: auto;
            height: auto
        }
          }
  
    .facts-figures ul li .text-field {
          width: 100%;
          min-height: 48px;
          font-family: var(--ff-body);
          font-style: normal;
          font-weight: 700;
          font-size: 17px;
          line-height: 150%;
          border-bottom: 1px solid #faf5eb;
          color: var(--brand-color-3);
          padding-bottom: 1.5rem;
          margin-top: 1rem;
        }
  
    .facts-figures ul li .text-field p {
            margin-bottom: 0px;
          }
  
    @media (max-width: 35.9375rem) {
  
    .facts-figures ul li .text-field {
            padding: 1rem;
            width: 100%;
            font-size: 16px;
            margin-top: 14px;
            line-height: 150%;
            height: auto;
            padding-bottom: 0;
            min-height: auto;
            padding-bottom: 20px;
            padding-top: 0;
            padding-left: 0
        }
          }
  
  #facts-container {
    padding: 0px;
  }
  
  #facts-title {
    padding: 0px 20px 20px 0px;
    width: 100%;
    color: var(--brand-color-3);
    font-family: var(--ff-body);
    font-style: normal;
    font-weight: 700;
    font-size: 22px;
    line-height: 130%;
    border-bottom: 1px solid #fff;
  }
  
  @media (max-width: 35.9375rem) {
  
  #facts-title {
      width: 100%;
      padding: 0px 0px 20px 0px;
      width: auto;
      font-size: 19px;
      height: auto
  }
    }
  
  #mainfacts {
    max-width: 100% !important;
  }
  
  #mainfacts .column-splitter >.order-last {
        padding-left: 0px;
      }
  
  @media (max-width: 61.9375rem) {
  
  #mainfacts .column-splitter >.order-last {
          padding-right: 0px
      }
        }
  
  #mainfacts .brand-content {
      padding-left: 25px;
    }
  
  @media (max-width: 61.9375rem) {
  
  #mainfacts .brand-content {
        padding-top: 70px;
        padding-left: 0px;
        padding-bottom: 70px
    }
      }
  
  #mainfacts .brand-content .field-herolink {
        margin-bottom: 50px;
        /*
        background: transparent;
        border: none;
        padding: 0px;
        margin-bottom: 0px;
  
        a {
          color: var(--brand-color-3);
          background: var(--primary-color);
          color: #faf5eb;
          border: 1px solid var(--primary-color);
          border-radius: 100px;
          padding: 14px 40px 15px 40px;
          margin-top: 0px;
          font-weight: 700;
          font-size: 19px;
          margin-top: 0px !important;
  
          @media (--mq-max-m) {
            padding: 8px 20px 9px 20px;
          }
        }
        */
      }
  
  #mainfacts .brand-content .brand-title {
        margin: 4px 0 22px;
        font-size: 2.5rem;
        font-size: var(--fs-xxxxl,2.5rem);
        color: "#d3b30";
        color: var(--Upfield-title,"#d3b30");
        font-weight: var(--fw-medium);
        line-height: var(--lh-xs);
      }
  
  @media (max-width: 61.9375rem) {
  
  #mainfacts .brand-content .brand-title {
          font-size: 24px;
          margin: 0px 0 22px
      }
        }
  
  #mainfacts .brand-content .brand-detail-content {
        max-width: 620px;
        text-align: left;
        
      }
  
  [dir="rtl"] #mainfacts .brand-content .brand-detail-content {
          text-align: right;
        }
  
  @media(max-width: 47.9375rem) {
  
  #mainfacts .brand-content .content-wrapper {
          padding-right: 0px;
          padding-left: 0px
      }
        }
  
  #mainfacts .brand-content .logo-wrapper {
        width: 100%;
      }
  
  @media(max-width: 47.9375rem) {
  
  #mainfacts .brand-content .logo-wrapper {
          padding-right: 0px;
          padding-left: 0px
      }
        }
  
  @media(max-width: 47.9375rem) {
  
  #mainfacts .brand-content .logo-wrapper img {
            height: 273px;
            -o-object-fit: cover;
               object-fit: cover
        }
          }
  
  #mainfacts #title-text .component-content h2 {
          font-size: 54px;
          line-height: 110%;
        }
/* global large banner css */

.rich-text--intro {
    font-size: var(--fs-intro);
}

/* Hiding Google translate tags which gets automatically appended while entering CMS content */

#gtx-trans {
    display: none!important;
}



.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);
    }

.title--underline {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
}
    .title--underline .field-title {
        display: inline;
        border-bottom: 4px solid var(--brand-color-3);
    }
    @media (min-width: 62rem) {
    .title--underline .field-title {
            border-bottom: 8px solid var(--brand-color-3)
    }
        }

.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;
  border-bottom: 2px solid var(--brand-color-1);
}

  @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;
  }



.text-align--side-on-mobile--center-on-desktop .field-text {
        margin-bottom: var(--s-s);
    }

.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
    }
        }


.TestimonialList-list {
    padding: var(--s-l) 0 56px 0; 
    text-align: center;
}

    @media (min-width: 62rem){
.TestimonialList-list {
        padding: var(--s-xl) 0 64px 0
}
    }

    .TestimonialList-list h2 {
        font-size: var(--fs-xl);
    }

    @media (min-width: 75rem) {

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

    .TestimonialList-list div > p {
        font-size: var(--fs-s);
        line-height: 24px;            
    }

    @media (min-width: 48rem) {

    .TestimonialList-list div > p {
            max-width: 610px;
            margin-left: auto;
            margin-right: auto;
            font-size: var(--fs-m);
            line-height: 30px            
    }
        }

    @media (min-width: 75rem) {

    .TestimonialList-list div > p {
            max-width: 730px;
            font-size: var(--fs-l);
            line-height: 32px            
    }
        }

    @media (min-width: 75rem) {

    .TestimonialList-list ul {
            padding-top: 8px
    }
        }

    @media (max-width: 74.9375rem) {

    .TestimonialList-list ul li {
                padding: var(--s-s) 0
        }
            }

    .TestimonialList-list ul li .testimonial {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
                overflow: unset;
            }

    .TestimonialList-list ul li .testimonial .recipe-card-image-wrapper {
                    -webkit-box-flex: 0;
                        -ms-flex: 0 0 15%;
                            flex: 0 0 15%;
                }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li .testimonial .recipe-card-image-wrapper {
                        -webkit-transform: translateY(-8px);
                                transform: translateY(-8px)
                }
                    }

    @media (min-width: 75rem) {

    .TestimonialList-list ul li .testimonial .recipe-card-image-wrapper {
                        -webkit-transform: translateY(-16px);
                                transform: translateY(-16px)
                }
                    }

    .TestimonialList-list ul li .testimonial .recipe-card-image-wrapper img {
                        max-width: 120px;
                        max-height: 120px;
                        border-radius: 50%;
                    }

    .TestimonialList-list ul li .testimonial .category-card-content {
                    max-width: 100%;
                    padding: var(--s-s) 0;
                    position: relative;
                    height: -webkit-fit-content;
                    height: -moz-fit-content;
                    height: fit-content;
                }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li .testimonial .category-card-content {
                        -webkit-box-flex: 0;
                            -ms-flex: 0 0 80%;
                                flex: 0 0 80%;
                        padding: var(--s-s) var(--s-l)
                }
                    }

    @media (min-width: 75rem) {

    .TestimonialList-list ul li .testimonial .category-card-content {
                        -webkit-box-flex: 0;
                            -ms-flex: 0 0 50%;
                                flex: 0 0 50%;
                        padding: var(--s-m) var(--s-l)
                }
                    }

    .TestimonialList-list ul li .testimonial .category-card-content .category-card-title {
                        color: var(--color-black);
                        font-size: var(--fs-s);
                        text-transform: none;
                    }

    @media (min-width: 75rem) {

    .TestimonialList-list ul li .testimonial .category-card-content .category-card-title {
                            font-size: var(--fs-m)
                    }
                        }

    .TestimonialList-list ul li .testimonial .category-card-content .category-card-subtitle {
                        color: var(--color-black);
                        text-align: left;
                        border-radius: 16px;
                        padding: 16px;                        
                        margin-bottom: 0;
                    }

    .TestimonialList-list ul li .testimonial .category-card-content .category-card-subtitle::after {
                            content: '';
                            position: absolute;
                            border-style: solid;                            
                            bottom: 8px;
                        }

    @media (min-width: 75rem){

    .TestimonialList-list ul li .testimonial .category-card-content .category-card-subtitle::after {
                                bottom: 16px
                        }
                            }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li.odd .testimonial {
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: normal;
                        -ms-flex-direction: row;
                            flex-direction: row
            }
                }

    .TestimonialList-list ul li.odd .testimonial .recipe-card-image-wrapper {                    
                    margin: auto auto auto 0;
                }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li.odd .testimonial .recipe-card-image-wrapper {
                        margin: auto 0 0 0
                }
                    }

    .TestimonialList-list ul li.odd .testimonial .category-card-content .category-card-title {                        
                        text-align: left;
                        margin-bottom: 12px;                       
                    }

    .TestimonialList-list ul li.odd .testimonial .category-card-content .category-card-subtitle {                        
                        background-color: var(--testimonial-odd);                        
                        border-bottom-left-radius: unset;
                        margin-left: 0;
                    }

    .TestimonialList-list ul li.odd .testimonial .category-card-content .category-card-subtitle::after {                           
                            border-width: 0px 4px 25px 30px;
                            border-color: var(--testimonial-odd) transparent;
                            left: -23px;                       
                            border-bottom-left-radius: 4px;
                        }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li.odd .testimonial .category-card-content .category-card-subtitle::after {
                                left: 0
                        }
                            }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li.even .testimonial {
                    -webkit-box-orient: horizontal;
                    -webkit-box-direction: reverse;
                        -ms-flex-direction: row-reverse;
                            flex-direction: row-reverse
            }
                }

    .TestimonialList-list ul li.even .testimonial .recipe-card-image-wrapper {
                    margin: auto 0 auto auto;
                }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li.even .testimonial .recipe-card-image-wrapper {
                        margin: auto 0 0 0
                }
                    }

    .TestimonialList-list ul li.even .testimonial .category-card-content .category-card-title {                        
                        text-align: right;                       
                    }

    .TestimonialList-list ul li.even .testimonial .category-card-content .category-card-subtitle {                        
                        background-color: var(--testimonial-even);                        
                        border-bottom-right-radius: unset;
                        margin-right: 0;
                    }

    .TestimonialList-list ul li.even .testimonial .category-card-content .category-card-subtitle::after {                            
                            border-width: 25px 0px 0px 30px;
                            border-color: transparent var(--testimonial-even);                           
                            right: -23px;
                            border-bottom-right-radius: 4px;
                        }

    @media (min-width: 48rem) {

    .TestimonialList-list ul li.even .testimonial .category-card-content .category-card-subtitle::after {
                               right: 0
                        }
                            }
.crt-widget .crt-panel-next {
        -webkit-transform: translate(-8px,-50%)!important;
                transform: translate(-8px,-50%)!important;
    }
    .crt-widget .crt-panel-prev {
        -webkit-transform: translate(8px,-50%)!important;
                transform: translate(8px,-50%)!important;
    }
    .crt-widget .crt-grid-post {
        padding: calc(var(--s-m) - 1px)!important;
    }
    .crt-widget .crt-grid-post > .crt-post-c {
            -webkit-box-shadow: var(--box-shadow-narrow-bottom-light);
                    box-shadow: var(--box-shadow-narrow-bottom-light);
        }

/* Recipe social feed */

.recipe-social-feed {
    max-width: 1440px;
    margin: auto;
}

.recipe-social-feed#feed-in-recipe-v5 .social-feed-title {
            padding-top: var(--s-xxl);
        }

@media (min-width: 75rem) {

.recipe-social-feed#feed-in-recipe-v5 .social-feed-title {
                padding-top: var(--s-xxxl)
        }
            }

.recipe-social-feed#feed-in-recipe-v5 .social-feed-button {
            padding-bottom: var(--s-xxl);
        }

@media (min-width: 75rem) {

.recipe-social-feed#feed-in-recipe-v5 .social-feed-button {
                padding-bottom: var(--s-xxxl)
        }
            }

@media (max-width: 61.9375rem) {

.recipe-social-feed#feed-in-recipe-v5 .social-feed-title,
        .recipe-social-feed#feed-in-recipe-v5 .social-feed-button {
            text-align: left
        }
            [dir='rtl'] .recipe-social-feed#feed-in-recipe-v5 .social-feed-title,[dir='rtl'] .recipe-social-feed#feed-in-recipe-v5 .social-feed-button{
              text-align: right;
            }
          }

@media (max-width: 61.9375rem) {

.recipe-social-feed#feed-in-recipe-v5 .crt-widget .crt-grid-post {
            padding: var(--s-xs)
        }
          }

.recipe-social-feed#feed-in-recipe-v5 .crt-panel-next, 
        .recipe-social-feed#feed-in-recipe-v5 .crt-panel-prev {
          background-color: var(--btn-bg-color);
        }
.social-feed .feed {
        margin-bottom: var(--m-s);
    } 
    .social-feed .feed-title,
    .social-feed .follow-us-button {
        text-align: center;
    } 
    .social-feed .post {
        position: relative;
        cursor: pointer;
        -webkit-box-shadow: var(--card-shadow-mobile);
                box-shadow: var(--card-shadow-mobile);
        border-width: var(--social-post-card-border-width);
        border-style: var(--social-post-card-border-style);
        border-color: var(--social-post-card-border-color);
        border-radius: var(--social-post-card-border-radius);
        overflow: hidden;
        display: block;
        height: 100%;
    } 
    @media (min-width: 62rem) { 
    .social-feed .post {
            -webkit-box-shadow: var(--card-shadow);
                    box-shadow: var(--card-shadow)
    }
        } 
    .social-feed .post .post-media {
            width: 100%;
            position: relative;
            padding-bottom: 100%;
            display: block;
        } 
    .social-feed .post .post-media .carousel-media {
                display: none;
            } 
    .social-feed .post .post-media .instagram-icon {
                position: absolute;
                right: 0;
                top: 0;
                padding: var(--s-m);
                z-index: 1;
            } 
    .social-feed .post .post-media .instagram-icon::before {
                    content: "";
                    display: block;
                    width: 24px;
                    height: 24px;
                    background-size: 24px;
                    background-image: url(`../../../Images/instagram-icon-black.svg`);
                    -webkit-filter: invert(97%) sepia(3%) saturate(13%) hue-rotate(140deg) brightness(103%) contrast(107%);
                            filter: invert(97%) sepia(3%) saturate(13%) hue-rotate(140deg) brightness(103%) contrast(107%);
                } 
    .social-feed .post .post-media .post-carousel-icon {
                position: absolute;
                left: 0;
                top: 0;
                padding: var(--s-m);
                z-index: 1;
            } 
    .social-feed .post .post-media .post-carousel-icon::before {
                    content: "";
                    display: block;
                    width: 24px;
                    height: 24px;
                    background-size: 24px;
                    background-image: url(`../../../Images/image-carousel.svg`);
                    -webkit-filter: invert(97%) sepia(3%) saturate(13%) hue-rotate(140deg) brightness(103%) contrast(107%);
                            filter: invert(97%) sepia(3%) saturate(13%) hue-rotate(140deg) brightness(103%) contrast(107%);
                } 
    .social-feed .post .post-image,
        .social-feed .post .post-video {
            position: absolute;
            top: 0;
            left: 0;            
            width: 100%;
            height: 100%;
            background-size: cover;
            background-position: center center;
        } 
    .social-feed .post .post-video-container  video {
                position: absolute;
                top: 50%;
                left: 50%;
                -webkit-transform: translateX(-50%) translateY(-50%);
                        transform: translateX(-50%) translateY(-50%);
                width: auto;
                height: auto;
                overflow: hidden;
            } 
    .social-feed .post .post-video-container  video.play + .video-play-icon-wrapper {
                    display: none;
                } 
    .social-feed .post .post-video-container .video-play-icon-wrapper .video-play-icon {
                    position: absolute;
                    top: 50%;
                    left: 50%;
                    margin-top: -20px;
                    margin-left: -10px;
                    width: 0;
                    height: 0;
                    border-top: 20px solid transparent;
                    border-bottom: 20px solid transparent;
                    border-left: 24px solid rgba(255,255,255,0.62353);
                } 
    .social-feed .post .post-video-container .video-play-icon-wrapper .video-play-icon::before {
                        content: "";
                        position: absolute;
                        top: -31px;
                        left: -46px;
                        bottom: -30px;
                        right: -14px;
                        border-radius: 50%;
                        border: 2px solid rgba(255,255,255,0.62353);
                    } 
    .social-feed .post .post-content {
            position: absolute;
            top: 0;
            left: 0; 
            text-align: center;
            padding: 0 var(--s-m);
            background: var(--social-post-bg-color);
            color: var(--social-post-text-color);
            width: 100%;
            height: 100%;
            z-index: -1;
            opacity: 0;
            -webkit-transition: opacity 200ms var(--linear);
            transition: opacity 200ms var(--linear);
        } 
    .social-feed .post .post-content a {
                color: var(--social-post-link-color);
            } 
    .social-feed .post .post-content .post-header {
                padding: var(--s-s) 0;
            } 
    .social-feed .post .post-content .caption {
                padding: var(--s-s) 0 0;
                overflow: hidden;
            } 
    .social-feed .post .post-footer {
            border-top: 1px solid var(--social-post-card-border-color);
            padding: var(--s-s) 0;
            position: absolute;
            bottom: 0;
            left: 50%;
            -webkit-transform: translate(-50%);
                    transform: translate(-50%);
            width: 100%;
            z-index: -1;
            background: var(--social-post-bg-color);
            color: var(--social-post-text-color);
            opacity: 0;
            -webkit-transition: opacity 200ms var(--linear);
            transition: opacity 200ms var(--linear);
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-orient: vertical;
            -webkit-box-direction: normal;
                -ms-flex-direction: column;
                    flex-direction: column;
        } 
    .social-feed .post .post-footer .engagement {
                padding: var(--s-s) var(--s-m) 0;
                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;
            } 
    .social-feed .post .post-footer .engagement .likes {
                    padding-right: var(--s-s);
                } 
    .social-feed .post .post-footer .engagement .likes .likes-count {
                        padding-right: var(--s-xs);
                    } 
    .social-feed .post .post-footer .engagement .comments-count {
                    padding-right: var(--s-xs);
                } 
    .social-feed .post .post-footer .engagement .dot {
                    width: 6px;
                    height: 6px;
                    background-color: var(--color-black);
                    border-radius: 50%;
                    opacity: 0.5;
                    margin-right: var(--s-s);
                } 
    .social-feed .post .post-footer .timestamp {
                font-size: var(--fs-xs);
                text-align: center;
            } 
    .social-feed .post:hover,
        .social-feed .post:focus,
        .social-feed .post[focus-within] {
            -webkit-box-shadow: var(--card-hover-shadow);
                    box-shadow: var(--card-hover-shadow);
        } 
    .social-feed .post:hover,
        .social-feed .post:focus,
        .social-feed .post:focus-within {
            -webkit-box-shadow: var(--card-hover-shadow);
                    box-shadow: var(--card-hover-shadow);
        } 
    .social-feed .post:hover .post-content,
            .social-feed .post:hover .post-footer,
            .social-feed .post:focus .post-content,
            .social-feed .post:focus .post-footer,
            .social-feed .post[focus-within] .post-content,
            .social-feed .post[focus-within] .post-footer {
                z-index: 1;
                opacity: 1;
            } 
    .social-feed .post:hover .post-content,
            .social-feed .post:hover .post-footer,
            .social-feed .post:focus .post-content,
            .social-feed .post:focus .post-footer,
            .social-feed .post:focus-within .post-content,
            .social-feed .post:focus-within .post-footer {
                z-index: 1;
                opacity: 1;
            } 
    .social-feed .post.empty-media .post-media {
                opacity: 0;
            } 
    .social-feed .post.empty-media .post-content,
            .social-feed .post.empty-media .post-footer {
                z-index: 1;
                opacity: 1;
            } 
    .social-feed .instagram-hashtag-feed .post .post-content {
            padding: var(--s-m) var(--s-l);
        } 
    .social-feed ul {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;
        padding: var(--s-xl) 0 var(--s-xxl);
    } 
    .social-feed ul.grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(var(--social-post-min-width), 1fr));
            grid-gap: var(--social-post-gap);
            gap: var(--social-post-gap);
            padding-left: 15px;
            padding-right: 15px;
        } 
    .social-feed ul.grid .post {
                padding-bottom: var(--s-xl);
                background: var(--social-post-bg-color);
            } 
    .social-feed ul.grid .post:hover .post-image {
                        -webkit-transform: scale(1.03);
                                transform: scale(1.03);
                    } 
    .social-feed ul.grid .post .post-image,
                .social-feed ul.grid .post .post-video {
                    -webkit-transition: -webkit-transform var(--duration-l) var(--ease-out-quart);
                    transition: -webkit-transform var(--duration-l) var(--ease-out-quart);
                    transition: transform var(--duration-l) var(--ease-out-quart);
                    transition: transform var(--duration-l) var(--ease-out-quart), -webkit-transform var(--duration-l) var(--ease-out-quart);      
                    width: 100%;
                } 
    .social-feed ul.grid .post .post-content {
                    position: relative;
                    padding: 0 var(--s-m) var(--s-xs); 
                    height: auto;
                    margin-bottom: auto;
                    z-index: 1;
                    opacity: 1;
                } 
    .social-feed ul.grid .post .post-content .caption {
                        margin: var(--s-m) 0 var(--s-l);
                        padding: 0;
                        text-overflow: ellipsis;
                        -webkit-line-clamp: var(--caption-max-text-lines);
                        overflow: hidden;
                        display: -webkit-box;
                        -webkit-box-orient: vertical;
                    } 
    .social-feed ul.grid .post .post-footer {
                    z-index: 1;
                    opacity: 1;
                } 
    .social-feed ul.grid.image-bottom .post {
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-orient: vertical;
                    -webkit-box-direction: reverse;
                        -ms-flex-direction: column-reverse;
                            flex-direction: column-reverse;
                } 
    .social-feed ul.grid.hide-content .post {
                    padding-bottom: 0;
                } 
    .social-feed ul.grid.hide-content .post:hover .content-container {
                        opacity: 1;
                    } 
    .social-feed ul.grid.hide-content .post .content-container {
                        position: absolute;
                        top: 0;
                        width: 100%;
                        height: 100%;
                        opacity: 0;
                        background-color: var(--social-post-bg-color);
                        -webkit-transition: opacity var(--transition-timing-slow);
                        transition: opacity var(--transition-timing-slow);
                    } 
    .social-feed ul.grid.hide-content .post.empty-media .content-container {
                        opacity: 1;
                    } 
    /* Tile layout */ 
    .social-feed .tile.component-content {
        padding: 0;
        overflow: hidden;
        max-width: 1440px;
        margin: 0 auto;
        position: relative;
    } 
    @media (min-width: 62rem) { 
    .social-feed .tile.component-content {
            padding: 0px 15px
    }
        } 
    .social-feed .tile.component-content .feed {
            margin-bottom: 0;
        } 
    .social-feed .tile.component-content .feed-title,
        .social-feed .tile.component-content .follow-us-button {
            padding: 0 15px;
            text-align: left;
        } 
    [dir='rtl'] .social-feed .tile.component-content .feed-title, [dir='rtl'] .social-feed .tile.component-content .follow-us-button {
                text-align: right;
            } 
    @media (min-width: 62rem) { 
    .social-feed .tile.component-content .feed-title,
        .social-feed .tile.component-content .follow-us-button {
                text-align: center
        }
                [dir='rtl'] .social-feed .tile.component-content .feed-title, [dir='rtl'] .social-feed .tile.component-content .follow-us-button {
                    text-align: center;
                }
            } 
    .social-feed .tile.component-content .feed-title {
            margin-bottom: var(--s-s);
        } 
    @media (min-width: 62rem) { 
    .social-feed .tile.component-content .feed-title {
                margin-bottom: var(--s-m)
        }
            } 
    .social-feed .tile.component-content .feed-title h1, .social-feed .tile.component-content .feed-title h2, .social-feed .tile.component-content .feed-title h3, .social-feed .tile.component-content .feed-title h4, .social-feed .tile.component-content .feed-title h5, .social-feed .tile.component-content .feed-title h6, .social-feed .tile.component-content .feed-title p {
                margin-bottom: 0;
            } 
    .social-feed .tile.component-content ul.tile {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: nowrap;
                flex-wrap: nowrap;
            list-style: none;
            padding: 0;
            overflow: scroll;
            scrollbar-width: none;
        } 
    .social-feed .tile.component-content ul.tile::-webkit-scrollbar {
                display: none;
            } 
    @media (min-width: 62rem) { 
    .social-feed .tile.component-content ul.tile {
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                -webkit-box-pack: center;
                    -ms-flex-pack: center;
                        justify-content: center;
                overflow: unset
        }
            } 
    .social-feed .tile.component-content ul.tile li {
                margin: 8px 5px 24px 5px;
                width: 264px;
                min-width: 264px;
            } 
    /* Equal space for 4 cards */ 
    @media (min-width: 62rem) { 
    .social-feed .tile.component-content ul.tile li {
                    width: calc((100% - 120px) / 4);
                    min-width: calc((100% - 120px) / 4);
                    margin: 12px 15px 28px
            }
                } 
    @media (min-width : 1440px) { 
    .social-feed .tile.component-content ul.tile li {
                    width: calc((1440px - 150px) / 4);
                    min-width: calc((1440px - 150px) / 4)
            }
                } 
    @media (max-width: 61.9375rem) {
                .social-feed .tile.component-content ul.tile li:first-child {
                    margin-left: 15px;
                }
                    [dir='rtl'] .social-feed .tile.component-content ul.tile li:first-child {
                        margin-right: 15px;
                        margin-left: 5px;
                    }
    
                .social-feed .tile.component-content ul.tile li:last-child {
                    min-width: 279px;
                    padding-right: 15px;
                    margin-right: 0px;
                }
    
                    [dir='rtl'] .social-feed .tile.component-content ul.tile li:last-child {
                        padding-left: 15px;
                        padding-right: 0;
                        margin-left: 0px;
                        margin-right: 5px;
                    }
            } 
    .social-feed .glide .carousel-controls { 
            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;
            padding: var(--s-s);    
        } 
    .social-feed .glide .carousel-controls input.play-pause {
                width: 0;
                height: 12px;
                -webkit-appearance: none;
                   -moz-appearance: none;
                        appearance: none;
                cursor: pointer;
                border-color: var(--transparent) var(--transparent) var(--transparent) var(--color-black);
                -webkit-transition: border var(--transition-timing-fast);
                transition: border var(--transition-timing-fast);
                border-style: double;
                border-width: 0px 0px 0px 12px;
            } 
    .social-feed .glide .carousel-controls input.play-pause:checked {
                    border-style: solid;
                    border-width: 6px 0 6px 12px;
                } 
    @media (max-width: 61.9375rem) {
                .social-feed .glide:not(.bullets):not(.arrows) .glide__bullets {
                    display: none;
                }
                .social-feed .glide:not(.bullets):not(.arrows) .auto-rotation-control {
                    -webkit-box-ordinal-group: 3;
                        -ms-flex-order: 2;
                            order: 2;
                }
                .social-feed .glide:not(.bullets):not(.arrows) .left-arrow {
                    -webkit-box-ordinal-group: 2;
                        -ms-flex-order: 1;
                            order: 1;
                }
                .social-feed .glide:not(.bullets):not(.arrows) .right-arrow {
                    -webkit-box-ordinal-group: 4;
                        -ms-flex-order: 3;
                            order: 3;
                }
            } 
    .social-feed .glide .auto-rotation-control {
            padding: 7px 13px;
            background-color: rgba(0,0,0,0.08);
            border-radius: 50%;
        } 
    .social-feed .glide .glide__arrows {
            padding: 0 var(--s-m);
        } 
    .social-feed .glide .glide__arrow {
            cursor: pointer;
        } 
    .social-feed .glide .glide__arrow::after {
                content: "";
                width: 30px;
                height: 30px;
                display: block;
                background: url(`../../../Images/chevron-up.svg`) no-repeat;
                background-position: center;
                background-color: rgba(0,0,0,0.08);
                border-radius: 50%;
            } 
    .social-feed .glide .glide__arrow.glide__arrow--left::after {
                -webkit-transform: rotate(270deg) scale(1.3);
                        transform: rotate(270deg) scale(1.3);
            } 
    .social-feed .glide .glide__arrow.glide__arrow--right::after {
                -webkit-transform: rotate(90deg) scale(1.3);
                        transform: rotate(90deg) scale(1.3);
            } 
    .social-feed .glide .glide__bullet {
            display: inline-block;
            width: calc(var(--s-s) + 4px);
            height: calc(var(--s-s) + 4px);
            margin: 0 var(--s-xs);
            background: var(--transparent);
            border-radius: 50%;
            cursor: pointer;
            border: 2px solid var(--color-black);
        } 
    .social-feed .glide .glide__bullet--active,
            .social-feed .glide .glide__bullet:hover,
            .social-feed .glide .glide__bullet:focus {
                background: var(--color-black);
                border: 0;
            } 
    .social-feed .glide.none .glide__arrows, .social-feed .glide.none .glide__bullets {
                display: none;
            } 
    .social-feed .glide.bullets .glide__arrows {
                display: none;
            } 
    .social-feed .glide.bullets .glide__bullets {
                padding: 0 var(--s-s);
            } 
    .social-feed .glide.arrows .glide__bullets {
                display: none;
            } 
    .social-feed .glide.arrows .auto-rotation-control {
                -webkit-box-ordinal-group: 3;
                    -ms-flex-order: 2;
                        order: 2;
            } 
    .social-feed .glide.arrows .left-arrow {
                -webkit-box-ordinal-group: 2;
                    -ms-flex-order: 1;
                        order: 1;
            } 
    .social-feed .glide.arrows .right-arrow {
                -webkit-box-ordinal-group: 4;
                    -ms-flex-order: 3;
                        order: 3;
            }

.container#feed-in-recipe-v5 > .component-content {
        max-width: 1440px;
        margin: auto;
    }

.container#feed-in-recipe-v5 .social-feed .feed-title {
            padding-top: var(--s-xxl);
        }

@media (min-width: 75rem) {

.container#feed-in-recipe-v5 .social-feed .feed-title {
                padding-top: var(--s-xxxl)
        }
            }

.container#feed-in-recipe-v5 .social-feed .follow-us-button {
            padding-bottom: var(--s-xxl);
        }

@media (min-width: 75rem) {

.container#feed-in-recipe-v5 .social-feed .follow-us-button {
                padding-bottom: var(--s-xxxl)
        }
            }
.social-feed-popup-manager {
    position: fixed;
    width: 100vw;
    height: 100vh;
    z-index: 999999;
    background: var(--overlay-bg-light);
    top: 0;
    left: 0;
    display: none;
    overflow-y: auto;
}

    @media (max-width: 61.9375rem) {.social-feed-popup-manager {
        padding: 40px 0 0
}
    }

    .social-feed-popup-manager.visible {
        display: unset;
    }

    .social-feed-popup-manager .popup-wrapper {
        overflow: auto;
        border-radius: var(--border-radius-s);
        left: 50%;
        top: 50%;
        position: relative;
        -webkit-transform: translate(-50%,-50%);
                transform: translate(-50%,-50%);
    }

    [dir="rtl"] .social-feed-popup-manager .popup-wrapper {
            left: unset;
            right: 50%;
            -webkit-transform: translate(50%,-50%);
                    transform: translate(50%,-50%);
        }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper {
            height: 100%;
            top: 100%;
            -webkit-transform: translateX(-50%);
                    transform: translateX(-50%);
            background: var(--color-white);
            -webkit-transition: top .5s var(--transition-timing-fast);
            transition: top .5s var(--transition-timing-fast)
    }

            .social-feed-popup-manager .popup-wrapper.animate {
                top: 0%;
            }

            [dir="rtl"] .social-feed-popup-manager .popup-wrapper {
                -webkit-transform: translateX(50%);
                        transform: translateX(50%);
            }    
        }

    @media (min-width: 62rem) {

    .social-feed-popup-manager .popup-wrapper {
            opacity: 0;
            -webkit-transition: opacity .4s var(--transition-timing-fast);
            transition: opacity .4s var(--transition-timing-fast);
            scrollbar-width: thin
    }

            .social-feed-popup-manager .popup-wrapper.animate {
                opacity: 1;
            }            
            .social-feed-popup-manager .popup-wrapper::-webkit-scrollbar {
                width: 6px;
                height: 10px;
            }
            .social-feed-popup-manager .popup-wrapper::-webkit-scrollbar-thumb {
                border-radius: var(--border-radius-m);
                background-color: var(--color-light-gray);	
            }            
                .social-feed-popup-manager .popup-wrapper::-webkit-scrollbar-thumb:hover{
                    background-color: var(--color-medium-light-gray);
                }
        }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
            max-width: 900px;
            margin: auto;
            background-color: var(--color-white);
            position: relative;
        }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper {
                padding-bottom: 100px
        }
            }

    @media (min-width: 62rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper.empty-media {                    
                    max-width: 450px
            }
                    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper.empty-media .popup-right-container {
                        max-width: 450px;
                    }
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper.empty-media .popup-left-container {
                    display: none;
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper.empty-media .popup-right-container {
                    width: 100%;
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container {
                width: 55%;
                min-width: 200px;
            }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container {
                    width: 100%
            }
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .post-media {
                    width: 100%;
                    height: 100%;
                    position: relative;
                    padding-bottom: 100%;
                    display: block;
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .post-media .post-image {
                        position: absolute;
                        top: 0;
                        left: 0;            
                        width: 100%;
                        height: 100%;
                        background-size: cover;
                        background-position: center center;
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .post-media .post-video-container video,
                    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .post-media .video-placeholder video {
                        position: absolute;
                        top: 50%;
                        left: 50%;
                        -webkit-transform: translateX(-50%) translateY(-50%);
                                transform: translateX(-50%) translateY(-50%);
                        width: 100%;
                        height: 100%;
                        overflow: hidden;
                        visibility: visible;
                        -o-object-fit: cover;
                           object-fit: cover;
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .carousel-media {
                    position: absolute;
                    bottom: var(--s-xxxl);
                    display: -webkit-box;
                    display: -ms-flexbox;
                    display: flex;
                    -webkit-box-pack: center;
                        -ms-flex-pack: center;
                            justify-content: center;
                    padding: var(--s-l) var(--s-xs) 0;
                    width: 100%;
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .carousel-media .bullets {
                        padding: var(--s-xs);
                        cursor: pointer;
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .carousel-media .bullets > span {
                            display: block;
                            width: 10px;
                            height: 10px;
                            background: var(--color-dark-gray);
                            border-radius: 50%;
                            border: 0.5px solid var(--color-white);
                        }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-left-container .carousel-media .bullets.active > span {
                                background: var(--primary-color);
                            }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container {
                width: 45%;
                min-width: 200px;
                padding: var(--s-m);
                text-align: center;
                position: relative;
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                -webkit-box-orient: vertical;
                -webkit-box-direction: normal;
                    -ms-flex-direction: column;
                        flex-direction: column;
            }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container {
                    width: 100%
            }
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-text {
                    margin: 20px 0;
                    text-align: left;
                    text-align: initial;                    
                }

    @media (min-width: 62rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-text {
                        padding: 0 20px;
                        max-height: 320px;
                        min-height: 320px;
                        overflow-y: auto;
                        scrollbar-width: thin                    
                }

                        .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-text::-webkit-scrollbar {
                            width: 6px;
                            height: 10px;
                        }
                        .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-text::-webkit-scrollbar-thumb {
                            border-radius: var(--border-radius-m);
                            background-color: var(--color-light-gray);	
                        }            
                            .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-text::-webkit-scrollbar-thumb:hover{
                                background-color: var(--color-medium-light-gray);
                            }
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-text .caption {
                        margin-bottom: var(--m-m);
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-read-more a {
                    -webkit-transition: none;
                    transition: none;
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer {
                    padding: var(--s-s);
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer .timestamp {
                        font-size: var(--fs-xs);
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer .engagement {
                        padding: var(--s-s) var(--s-m) 0;
                        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;
                    }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer .engagement .likes {
                            padding-right: var(--s-s);
                        }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer .engagement .likes .likes-count {
                                padding-right: var(--s-xs);
                            }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer .engagement .comments-count {
                            padding-right: var(--s-xs);
                        }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper .popup-right-container .popup-footer .engagement .dot {
                            width: 6px;
                            height: 6px;
                            background-color: var(--color-black);
                            border-radius: 50%;
                            opacity: 0.5;
                            margin-right: var(--s-s);
                        }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.previous-post,
            .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.next-post {
                position: absolute;
                top: 50%;
                margin: -16px 0 0;
                height:48px;
                width: 48px;                
                border-radius: 50%;
                background: var(--color-white);
                cursor: pointer;
                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;
                -webkit-box-shadow: var(--box-shadow-narrow-bottom-light);
                        box-shadow: var(--box-shadow-narrow-bottom-light);
            }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.previous-post::before, .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.next-post::before {
                    content: "";
                    background: url(`../../../Images/chevron.svg`) no-repeat;
                    display: inline-block;
                    height: 16px;
                    width: 7px;
                    -webkit-filter: brightness(0);
                            filter: brightness(0);
                    -webkit-transform: scale(1.5);
                            transform: scale(1.5);
                }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.previous-post,
            .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.next-post {
                    top: unset;
                    bottom: 0;
                    margin: 12px 12px 64px
            }
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.previous-post {
                left: -60px;
            }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.previous-post::before {
                    -webkit-transform: rotate(180deg) scale(1.5);
                            transform: rotate(180deg) scale(1.5);
                }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.previous-post {
                    left: 0px
            }
                }

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.next-post {
                right: -60px;
            }

    @media (max-width: 61.9375rem) {

    .social-feed-popup-manager .popup-wrapper .popup-content-wrapper a.next-post {
                    right: 0px
            }
                }

    .social-feed-popup-manager a.popup-close {
        position: absolute;
        top: 0;
        right: 0;
        padding: 6px;
        cursor: pointer;
    }

    @media (min-width: 62rem) {

    .social-feed-popup-manager a.popup-close {
            padding: 24px
    }
        }

.component.login tr{
        background: none;
    }
@media(min-width: 75rem) {#nav-search .component.plain-html {
        margin-right: var(--s-s)
}
    }
.header-logo-left .navigation.navigation-title nav li.level2.editPrf,.header-logo-left .navigation.navigation-title nav li.level2.save-recipe,.header-logo-left .navigation.navigation-title nav li.level2.pwdchng,.header-logo-left .navigation.navigation-title nav li.level2.log-in,.header-logo-left .navigation.navigation-title nav li.level2.log-out,.header .navigation.navigation-title nav li.level2.editPrf,.header .navigation.navigation-title nav li.level2.save-recipe,.header .navigation.navigation-title nav li.level2.pwdchng,.header .navigation.navigation-title nav li.level2.log-in,.header .navigation.navigation-title nav li.level2.log-out{
                        padding-top: var(--s-xl);
                        padding-bottom: 0;
                    }
.header-logo-left .navigation.navigation-title nav li.level2.editPrf a,.header-logo-left .navigation.navigation-title nav li.level2.save-recipe a,.header-logo-left .navigation.navigation-title nav li.level2.pwdchng a,.header-logo-left .navigation.navigation-title nav li.level2.log-in a,.header-logo-left .navigation.navigation-title nav li.level2.log-out a,.header .navigation.navigation-title nav li.level2.editPrf a,.header .navigation.navigation-title nav li.level2.save-recipe a,.header .navigation.navigation-title nav li.level2.pwdchng a,.header .navigation.navigation-title nav li.level2.log-in a,.header .navigation.navigation-title nav li.level2.log-out a{
                            font-size: var(--fs-s);
                            padding: 0;
                            margin-right: 0!important;
                        }
@media(min-width: 75rem){
.header-logo-left .navigation.navigation-title nav li.level2.editPrf a,.header-logo-left .navigation.navigation-title nav li.level2.save-recipe a,.header-logo-left .navigation.navigation-title nav li.level2.pwdchng a,.header-logo-left .navigation.navigation-title nav li.level2.log-in a,.header-logo-left .navigation.navigation-title nav li.level2.log-out a,.header .navigation.navigation-title nav li.level2.editPrf a,.header .navigation.navigation-title nav li.level2.save-recipe a,.header .navigation.navigation-title nav li.level2.pwdchng a,.header .navigation.navigation-title nav li.level2.log-in a,.header .navigation.navigation-title nav li.level2.log-out a{
                                font-size: var(--fs-m)
                        }
                            }
@media(min-width: 75rem){
.header-logo-left .navigation.navigation-title nav li.level2.editPrf,.header-logo-left .navigation.navigation-title nav li.level2.save-recipe,.header-logo-left .navigation.navigation-title nav li.level2.pwdchng,.header-logo-left .navigation.navigation-title nav li.level2.log-in,.header-logo-left .navigation.navigation-title nav li.level2.log-out,.header .navigation.navigation-title nav li.level2.editPrf,.header .navigation.navigation-title nav li.level2.save-recipe,.header .navigation.navigation-title nav li.level2.pwdchng,.header .navigation.navigation-title nav li.level2.log-in,.header .navigation.navigation-title nav li.level2.log-out{
                            display: none
                    }
                        }
.header-logo-left .navigation.navigation-title nav li.level2.editPrf,.header .navigation.navigation-title nav li.level2.editPrf{
                        padding-top: 0;
                    }
.header-logo-left .navigation.navigation-title nav li.level2.editPrf .recipeOverviewBtn, .header .navigation.navigation-title nav li.level2.editPrf .recipeOverviewBtn {
                            margin-left: 13px;
                        }
.header-logo-left .navigation.navigation-title nav li.level2 .navigation-title,.header .navigation.navigation-title nav li.level2 .navigation-title{
                        display: -webkit-box;
                        display: -ms-flexbox;
                        display: flex;
                        -webkit-box-align: center;
                            -ms-flex-align: center;
                                align-items: center;
                    }
.header-logo-left .navigation.navigation-title nav span.divider, .header .navigation.navigation-title nav span.divider {
                        width: 120px;
                        display: block;
                        margin: var(--s-xl);
                        background: #001489;
                        border: 1px solid #001489;
                        opacity: 0.5;
                    }
@media(min-width: 75rem){
.header-logo-left .navigation.navigation-title nav span.divider, .header .navigation.navigation-title nav span.divider {
                            display: none
                    }
                        }
.header-logo-left .navigation nav.user-login, .header .navigation nav.user-login {
            margin-right: var(--s-xxl);
        }
@media(max-width: 74.9375rem){
.header-logo-left .navigation nav.user-login, .header .navigation nav.user-login {
                display: none
        }
            }
.header-logo-left .navigation nav.user-login ul li.level1 a,.header .navigation nav.user-login ul li.level1 a{
                            margin: 0 var(--s-s) 0 0 !important;
                            cursor: pointer;
                            font-family: var(--ff-body);
                        }
.header-logo-left .navigation nav.user-login ul li.level1 a.d-none,.header .navigation nav.user-login ul li.level1 a.d-none{
                                display: none !important;
                            }
.header-logo-left .navigation nav.user-login ul li.level1 a .loggin,
                            .header-logo-left .navigation nav.user-login ul li.level1 a loggedin,
                            .header .navigation nav.user-login ul li.level1 a .loggin,
                            .header .navigation nav.user-login ul li.level1 a loggedin{
                                margin: 0 var(--s-s) 0 0 !important;
                            }
.header-logo-left .navigation nav.user-login ul li.level2 .navigation-title,.header .navigation nav.user-login ul li.level2 .navigation-title{
                            display: -webkit-box;
                            display: -ms-flexbox;
                            display: flex;
                            -webkit-box-pack: start;
                                -ms-flex-pack: start;
                                    justify-content: flex-start;
                        }
.header-logo-left .navigation nav.user-login ul li.level2 .navigation-title svg, .header .navigation nav.user-login ul li.level2 .navigation-title svg {
                                overflow: unset;
                                margin-right: var(--s-s);
                                -webkit-transform: none;
                                        transform: none;
                            }
.header-logo-left .navigation nav.user-login ul li.level2.editPrf svg,.header .navigation nav.user-login ul li.level2.editPrf svg{
                                margin-right: calc(var(--s-s)/2);
                                -webkit-transform: translateX(-2px);
                                        transform: translateX(-2px);
                            }
.header-logo-left .navigation nav.user-login ul li.level2 a,.header .navigation nav.user-login ul li.level2 a{
                            color: var(--primary-color);
                            font-size: var(--fs-s);
                        }
@media(min-width: 75rem){
.header-logo-left .navigation nav.user-login ul li.level2 a,.header .navigation nav.user-login ul li.level2 a{
                                font-size: var(--fs-m);
                                margin: 0 var(--s-s)
                        }
                            }
@media(min-width: 75rem){
.header-logo-left .navigation nav.user-login .submenu ul, .header .navigation nav.user-login .submenu ul {
                        width: 254px;
                        position: absolute;
                        right: 47px
                }
                    }
.header-logo-left .navigation nav.user-login .submenu li:first-child,.header .navigation nav.user-login .submenu li:first-child{
                        margin-top: 0;
                    }
@media(min-width: 75rem){
.header-logo-left .navigation nav.user-login .submenu li,.header .navigation nav.user-login .submenu li{
                        margin-top: var(--s-l)
                }
                    }
@media(min-width: 75rem){
.header-logo-left .navigation nav.user-login:hover .submenu ul,.header .navigation nav.user-login:hover .submenu ul{
                            display: block;
                            -webkit-transition: all .3s ease;
                            transition: all .3s ease
                    }
                        } 

.vimeo-video.fill-16-9 .vimeo-video-wrapper {
        padding-top: 56%;
        height: 0;
        position: relative;
    }
        .vimeo-video.fill-16-9 .vimeo-video-wrapper iframe {
            height: 100%;
            position: absolute;
            top: 0;
        }


/* 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);
}

@media (max-width: 74.9375rem) {

.bg-pattern-mobile-resize {
    background-size: var(--pattern-resize-mobile)  
}
  }

.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;
  }

@media (max-width: 47.9375rem) {

.double-bg .has-bgi > div {
      background-size: 140%
  }
    }

.half-wave-bg {
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  width: 100%;
  height: 100%;
}

.background-vioblue {
  background-color: var(--violife-foods-blue);
}

/* upfield BG colors*/

.background-pumpkin {
  background-color: var(--Upfield-pumpkin);
}

.background-kale {
  background-color: var(--Upfield-kale);
}

.background-coconut {
  background-color: var(--Upfield-coconut);
}

.background-sunflower {
  background-color: var(--Upfield-sunflower);
}

.background-waterblue {
  background-color: var(--upfield-waterblue);
}

.background-freshgreen {
  background-color: var(--Upfield-freshgreen);
}
/* presentation style of container */

.container.layout--fluid,
.layout--fluid {
    max-width: 100%;
}

.container.layout--extra-large,
.layout--extra-large {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.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;
}

@media (max-width: 61.9375rem) {

.container.no-padding-sm {
    padding-left: 0;
    padding-right: 0
}
  }

@media (max-width: 47.9375rem) {

.container.no-padding-sm--top-bottom {
    padding-top: 0;
    padding-bottom: 0
}
  }

.container.container--large-padding {
  padding: var(--s-m);
}

@media (min-width: 62rem) {

.container.container--large-padding {
    padding: var(--s-xxxxl)
}
  }

.cols--no-padding {
  padding-left: 0;
  padding-right: 0;
}

.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: transparent;
  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);
    border-radius: var(--search-box-border-radius);
  }

	.search-box input[type='text']::-webkit-input-placeholder {
      color: var(--color-black);
      opacity: var(--search-box-placeholder-opacity);
    }

	.search-box input[type='text']::-moz-placeholder {
      color: var(--color-black);
      opacity: var(--search-box-placeholder-opacity);
    }

	.search-box input[type='text']:-ms-input-placeholder {
      color: var(--color-black);
      opacity: var(--search-box-placeholder-opacity);
    }

	.search-box input[type='text']::-ms-input-placeholder {
      color: var(--color-black);
      opacity: var(--search-box-placeholder-opacity);
    }

	.search-box input[type='text']::placeholder {
      color: var(--color-black);
      opacity: var(--search-box-placeholder-opacity);
    }

	[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(--btn-bg-color);
	}

	.search-box .search-box-button:hover,
    .search-box .search-box-button:focus,
    .search-box .search-box-button-with-redirect:hover,
    .search-box .search-box-button-with-redirect:focus {
      background-color: var(--btn-hover-bg-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,
        .search-box .tt-menu .tt-suggestion a:focus {
          background-color: var(--primary-color);
          color: var(--color-white);
          text-decoration: none;
        }

	.search-box .tt-menu .tt-suggestion.tt-cursor a {
        background-color: var(--primary-color);
        color: var(--color-white);
        text-decoration: none;
      }

	.search-box.open-ttmenu .tt-menu {
    display: block !important;
  }

.search-box.search-box-with-icon{
    padding: 0;
    margin: 0 0 calc(var(--s) * -1);
    background: transparent;
}

    .search-box.search-box-with-icon > .component-content {
        width: 100%;
        max-width: 675px;
        margin: 0 auto;
        position: relative;
        -webkit-box-shadow: var(--box-shadow-narrow-bottom-light);
                box-shadow: var(--box-shadow-narrow-bottom-light);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        border-radius: var(--search-box-border-radius);

    }

    @media (min-width: 62rem) {

    .search-box.search-box-with-icon > .component-content {
            max-width: calc((100% / 2) - 30px)

    }
        }

    @media (min-width: 75rem) {

    .search-box.search-box-with-icon > .component-content {
            -webkit-box-shadow: var(--box-shadow-narrow-bottom);
                    box-shadow: var(--box-shadow-narrow-bottom)

    }
        }

    @media (min-width: 1440px) {

    .search-box.search-box-with-icon > .component-content {            
            max-width: calc((1440px / 2) - 45px)

    }
        }

    .search-box.search-box-with-icon > .component-content label{
            display: none;
        }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input {
            padding: 1.125rem 3.75rem 1.125rem 1.125rem;
            border: solid 1px transparent;
            width: 100%;
            margin: 0;
            border-radius: var(--search-box-border-radius);

        }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input:focus{
                border-color: var(--input-focus-border-color);
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input::-webkit-input-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input::-moz-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input:-ms-input-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input::-ms-input-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input::placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input:-moz-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input::-moz-placeholder {
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input:-ms-input-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input::-ms-input-placeholder{
                color: var(--color-black);
                opacity: 1;
            }

    [dir="rtl"] .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input {
                padding: 1.125rem 1.125rem 1.125rem 3.75rem;
            }

    @media (min-width: 62rem){

    .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input {
                padding-left: 1.5rem

        }
                [dir="rtl"] .search-box.search-box-with-icon > .component-content input[type='text'].search-box-input {
                    padding-right: 1.5rem;
                }
            }

    .search-box.search-box-with-icon > .component-content > span{
            width: 100%;
        }

    .search-box.search-box-with-icon > .component-content > button.search-box-button,
            .search-box.search-box-with-icon > .component-content > button.search-box-button-with-redirect{
                margin: 0;
                position: absolute;
                right: 0;
                background-color: transparent;
                padding: 1.125rem;
                width: auto;
                font-size: 0;
                border: none;
                background-image: none;
                border-radius: unset;
                -webkit-box-shadow: unset;
                        box-shadow: unset;
            }

    .search-box.search-box-with-icon > .component-content > button.search-box-button::before,.search-box.search-box-with-icon > .component-content > button.search-box-button-with-redirect::before{
                    background-image: url(`../../../Images/search-icon.svg`);
                    background-repeat: no-repeat;
                    background-size: 22px 24px;
                    display: inline-block;
                    width: 24px;
                    height: 29px;
                    content: "";
                }

    .search-box.search-box-with-icon > .component-content > button.search-box-button:hover,.search-box.search-box-with-icon > .component-content > button.search-box-button:focus,.search-box.search-box-with-icon > .component-content > button.search-box-button-with-redirect:hover,.search-box.search-box-with-icon > .component-content > button.search-box-button-with-redirect:focus{
                    -webkit-transform: none;
                            transform: none;
                }

    [dir="rtl"] .search-box.search-box-with-icon > .component-content > button.search-box-button, [dir="rtl"] .search-box.search-box-with-icon > .component-content > button.search-box-button-with-redirect {
                    left: 0;
                    right: unset;
                    -webkit-transform: scaleX(-1);
                            transform: scaleX(-1); 
                }

    .search-box.search-box-with-icon.move-up-half > .component-content{
            -webkit-transform: translateY(-50%);
                    transform: translateY(-50%);
            z-index: 201;
            background-color: var(--color-white);
            position: relative;
        } 


.search-results {
	margin-top: var(--m-m);
	margin-bottom: var(--m-m);
}

	.search-results .search-result-list > li:empty {
		display: none;
	}

.search-results-count .results-count {
		font-size: var(--fs-l);
		text-transform: uppercase;
		font-family: var(--ff-headings);
		line-height: 25px;		
	}

@media (min-width: 62rem) {

.search-results-count .results-count {
			font-size: var(--fs-xl);
			line-height: 30px		
	}
		}
.product-list ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
        flex-wrap: wrap;
}
    @media (max-width: 47.9375rem) {.product-list ul {
        margin: 0 -5px
}
    }
    .product-list ul li {
        width: calc((100% - 20px) / 2);
        margin: 0 5px var(--s-m);
        padding: 0;
    }
    @media (min-width: 48rem) {
    .product-list ul li {
            width: calc((100% - 90px) / 3);
            margin: 0 15px var(--s-xl)
    }
        }
    @media (min-width: 75rem) {
    .product-list ul li {
            width: calc((100% - 120px) / 4)
    }
        }
    .product-list ul li > a > [class*='-card'] {
            -webkit-box-shadow: var(--box-shadow-cards);
                    box-shadow: var(--box-shadow-cards);
        }
    .product-list ul li > a > [class*='-card']:hover, .product-list ul li > a > [class*='-card']:focus {
                text-decoration: none;
                -webkit-box-shadow: var(--box-shadow-cards-hover);
                        box-shadow: var(--box-shadow-cards-hover);
            }
    .product-list ul li > a:hover, .product-list ul li > a:focus {
                text-decoration: none;
            }
    .product-list ul li .product-card {
            height: 100%;
        }
#search-tabs {
    padding-top: 20px;  
    
}

    #search-tabs .tabs-controls {
        -webkit-box-pack: center;
        -ms-flex-pack: center;
        justify-content: center;
        margin-left: 0;
        overflow-x: visible;
    }

    #search-tabs .tab-item a span {
        font-weight: 900;
        font-size: 24px;
        line-height: 26.4px;
        padding: 0 0px;
    }

    @media(min-width: 62rem){

    #search-tabs .tab-item a span {
        font-size: 31px;
        line-height: 34.1px;
        padding: 0 25px
    }
        }

    #search-tabs #article-search-wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: center;
            -ms-flex-pack: center;
                justify-content: center;
        margin-left: 12px;
        
    }

    @media (min-width: 48rem) {

    #search-tabs #article-search-wrapper {
            margin-left: 0px
        
    }  
        }

    /* remove display none when you wish to show the results in global search page */

    #search-tabs #product-search .search-results-count {
            /* display: none; */
        }

    #search-tabs #recipe-search .search-results-count {
            /* display: none; */
        }


/* global.css */

.mainmegaMenu .hamburger {
        position: relative;
        z-index: 999;
    }
    .mainmegaMenu .nav-icon {
        width: 23px;
        height: 18px;
        position: relative;
        cursor: pointer;
        margin: 15px 3px;
        display: none;

    }
    @media screen and (max-width: 991px) {
    .mainmegaMenu .nav-icon {
            display: block

    }
        }
    .mainmegaMenu .nav-icon span {
            display: block;
            position: absolute;
            height: 1px;
            width: 100%;
            background: var(--Upfield-coconut);
            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);
        }
    .mainmegaMenu .nav-icon span:nth-child(2) {
                top: 42%;
                -webkit-transform: translateY(-50%);
                transform: translateY(-50%);
            }
    .mainmegaMenu .nav-icon span:nth-child(3) {
                bottom: 3px;
            }
    .mainmegaMenu header {
        background-color: var(--Upfield-kale);
        padding: 25px 0 0px;
    }
    .mainmegaMenu header a:hover {
                color: var(--Upfield-freshgreen);
            }
    .mainmegaMenu header a,
        .mainmegaMenu header .menutext,
        .mainmegaMenu header h4,
        .mainmegaMenu header p {
            color: var(--Upfield-coconut);
            letter-spacing: 0.5px;
        }
    @media screen and (max-width: 991px) {
    .mainmegaMenu header a,
        .mainmegaMenu header .menutext,
        .mainmegaMenu header h4,
        .mainmegaMenu header p {
                font-size: var(--fs-m)
        }
            }
    .mainmegaMenu header a:hover, .mainmegaMenu header .menutext:hover, .mainmegaMenu header h4:hover, .mainmegaMenu header p:hover {
                text-decoration: none;
                color: var(--Upfield-coconut);
            }
    .mainmegaMenu header .sticky {
            position: fixed;
            left: 0;
            right: 0px;
            background-color: var(--Upfield-kale);
            z-index: 9999;
            top: 0px;
        }
    .mainmegaMenu header .container.layout--fluid {
                padding: 0px 0 0;

            }
    .mainmegaMenu .header >.component-content {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            padding: 0 0px;
            width: 100%;
            margin: 0 auto;
            margin-bottom: 0px;
            -ms-flex-wrap: wrap;
                flex-wrap: wrap;
        }
    @media screen and (max-width: 991px) {
    .mainmegaMenu .header >.component-content {
                padding: 15px 0 0;
                margin-bottom: 0px;
                border-bottom: 1px solid #fff
        }
            }
    @media screen and (max-width: 991px) {
    .mainmegaMenu .header >.component-content .header-logo-wrapper {
                    width: 137px
            }
                }
    @media screen and (max-width: 991px) {
    .mainmegaMenu .header >.component-content .header-logo-wrapper img {
                        width: 100%;
                        height: auto
                }
                    }
    @media screen and (min-width:768px) and (max-width:991px) {
    .mainmegaMenu .header >.component-content .header-logo-wrapper img {
                        margin-top: 20px
                }
                    }
    @media screen and (min-width:768px) and (max-width:991px) {
    .mainmegaMenu .header >.component-content .header-logo-wrapper {
                    width: auto
            }
                }
.mainmegaMenu .header-navigation-wrapper {
    border-top: 0px solid var(--color-white);
    padding: 0px 0;

}
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper {
        /* position: fixed;
        width: 100%;
        height: 100vh; */

}

        .mainmegaMenu .header-navigation-wrapper.active {
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
            opacity: 1;
        }
    }
.mainmegaMenu .header-navigation-wrapper .header-bottom {
        padding-left: 7px;
    }
.mainmegaMenu .header-navigation-wrapper .header-bottom >.component-content {
            -webkit-box-pack: end;
            -ms-flex-pack: end;
            justify-content: flex-end;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
        }
.mainmegaMenu .header-navigation-wrapper .megaMenu {
        padding: 0 0;
    }
@media screen and (max-width:991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu {
            position: fixed;
            right: 0;
            top: 71px;
            height: 100%;
            width: 100%;
            overflow-x: hidden;
            overflow-y: auto;
            background: var(--global-header-megamenu-bg-color);
            -webkit-transition: all .75s, background 1s .75s linear;
            transition: all .75s, background 1s .75s linear;
            -webkit-transform: translate3d(100%, 0, 0);
                    transform: translate3d(100%, 0, 0);
            visibility: hidden;
            z-index: 999
    }

            .mainmegaMenu .header-navigation-wrapper .megaMenu.active {
                -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                opacity: 1;
                visibility: visible;

            }
        }
@media screen and (min-width:768px) and (max-width:991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu {
            top: 128px
    }
        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list {
            position: relative;

        }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list {
                position: relative

        }
            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems {
                display: -webkit-box;
                display: -ms-flexbox;
                display: flex;
                position: relative;
                -webkit-box-orient: horizontal;
                -webkit-box-direction: normal;
                    -ms-flex-direction: row;
                        flex-direction: row;
                padding: 0 21px;
            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems::before {
                    content: "";
                    position: absolute;
                    width: calc(100% - 79px);
                    height: 1px;
                    margin-left: 17px;
                    background: #fff;
                }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems::before {
                        display: none
                }
                    }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems {
                    -ms-flex-wrap: wrap;
                        flex-wrap: wrap;
                    padding: 0 0;
                    margin: 8px 15px
            }

                    .mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .Backhumberger {
                        display: block;
                    }

                        .mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .Backhumberger a {
                            display: inline-block;
                            position: relative;
                            padding: 15px;
                        }

                            .mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .Backhumberger a:after {
                                content: "";
                                position: absolute;
                                right: 0;
                                background-image: url(`../../../Images/backclose.png`);
                                width: 21px;
                                height: 21px;
                                top: -5px;
                                left: -6px;
                            }
                }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item {
                    -webkit-transition: all 1s;
                    transition: all 1s;
                    padding: 0 17px;
                }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item {
                        width: 100%;
                        padding: 0px 0px;
                        border-bottom: 1px solid var(--Upfield-coconut)
                }

                        .mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item:nth-of-type(1) {
                            border-top: 1px solid var(--Upfield-coconut);
                        }

                    }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item:hover .field-link >a {
                                color: var(--brand-color-2);

                            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item .field-link >a {
                            padding: 15px 0;
                            display: inline-block;
                            position: relative;
                            color: var(--header-text-color);
                            font-family: var(--ff-headings);
                            /* font-size: var(--fs-navigation);
                            line-height: var(--fs-l); */
                            margin: 0;
                        }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item .field-link >a {
                                font-size: var(--fs-h5-m);
                                display: block;
                                padding: 18px 0
                        }

                                .mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item .field-link >a:after {
                                    content: "";
                                    position: absolute;
                                    right: 0px;
                                    background-image: url(`../../../Images/submenuarrow.png`);
                                    width: 21px;
                                    height: 21px;
                                }
                            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item .field-link >a.active {
                                color: var(--Upfield-freshgreen);

                            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .link-list .menuItems .item.active .submenu-container {
                            -webkit-transform: translate3d(0, 0, 0);
                                    transform: translate3d(0, 0, 0);
                            visibility: visible;
                            opacity: 1;
                        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container {
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 38px 40px;
            opacity: 0;
            position: absolute;
            top: 55px;
            width: 100%;
            left: 0;
            right: 0;
            visibility: hidden;
            background: var(--global-header-megamenu-bg-color);
            -webkit-transition: all .75s, background 1s .75s linear;
            transition: all .75s, background 1s .75s linear;
            z-index: 999;
        }
@media screen and (min-width:768px) and (max-width:991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container {
                top: -2px !important
        }
            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container p {
                font-weight: var(--fw-regular);
                color: var(--header-text-color);
            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container.active {
                -webkit-transform: translate3d(0, 0, 0);
                        transform: translate3d(0, 0, 0);
                visibility: visible;
                opacity: 1;
            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container.active::before {
                    content: "";
                    display: inline-block;
                    width: 94%;
                    position: absolute;
                    top: 0;
                    background: #fff;
                    height: 1px;
                    /* margin-left: 38px; */
                    width: calc(100% - 79px);
                }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container.active .titleSection {
                    -webkit-transform: translateX(0px);
                            transform: translateX(0px);
                    opacity: 1;
                }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container.active .itemList {
                    -webkit-transform: translateX(0px);
                            transform: translateX(0px);
                    opacity: 1;
                }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container {
                position: fixed;
                -ms-flex-wrap: wrap;
                    flex-wrap: wrap;
                padding: 18px 15px;
                top: -2px;
                right: 0;
                -webkit-transform: translate3d(100%, 0, 0);
                        transform: translate3d(100%, 0, 0);
                -webkit-transition: all .75s, background 1s .75s linear;
                transition: all .75s, background 1s .75s linear;
                height: calc(100% - 74px);
                overflow-y: scroll;
                overflow-x: hidden;
                display: block
        }

                .mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .CtaBack {
                    display: inline-block;
                }

                    .mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .CtaBack a {
                        display: inline-block;
                        padding: 15px;
                        width: 21px;
                        height: 21px;
                        position: relative;
                    }

                        .mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .CtaBack a::before {
                            content: "";
                            background-image: url(`../../../Images/submenuarrow.png`);
                            width: 21px;
                            height: 21px;
                            display: inline-block;
                            -webkit-transform: rotate(180deg);
                                    transform: rotate(180deg);
                            position: absolute;
                            top: 0;
                            left: 0;
                        }

            }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection {
                width: 37%;
                padding-right: 22px;
                -webkit-transform: translateX(45px);
                        transform: translateX(45px);
                opacity: 0;
                -webkit-transition: 0.43s;
                transition: 0.43s;
            }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection {
                    width: 100%
            }
                }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection h2 {
                    color: var(--header-text-color);
                    /* font-size: var(--fs-xxxxl); */
                    font-weight: var(--fw-medium);
                    font-family: inherit;
                }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection h2 {
                        /* font-size: var(--fs-xxl); */
                        margin-bottom: 11px
                }
                    }
@media screen and (min-width:992px) and (max-width:1200px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection h2 {
                        /* font-size: var(--fs-xxxl); */
                }
                    }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection .btn.btn-primary {
                        margin-top: 12px;
                        padding: 13px 20px 15px 20px;
                        border-radius: 0px;
                        color: #0D3B30;
                    }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection .btn.btn-primary {
                            padding: 8px 20px
                    }
                        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .titleSection .btn.btn-primary:hover {
                            background-color: var(--Upfield-coconut);
                            color: var(--Upfield-kale);
                        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList {
                width: 56%;
                -webkit-transform: translateX(45px);
                        transform: translateX(45px);
                opacity: 0;
                -webkit-transition: 0.45s;
                transition: 0.45s;
                margin-left: 58px;
            }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList {
                    width: 100%;
                    margin-top: 35px;
                    margin-left: 0px
            }
                        .mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList .menu-sublist li {
                            padding: 18px 0px;
                            border-bottom: 1px solid var(--Upfield-coconut);
                        }

                            .mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList .menu-sublist li:first-child {
                                border-top: 1px solid var(--Upfield-coconut);
                            }
                }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList li:first-child a {
                            font-weight: var(--fw-semi-bold);
                        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList li >a {
                        padding-right: 30px;
                        display: inline-block;
                        position: relative;
                        margin-bottom: 20px;
                        -webkit-transition: 0.3s;
                        transition: 0.3s;
                        right: 0;
                        /* font-size: var(--fs-l); */
                        color: var(--header-text-color);

                    }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList li >a::after {
                            content: "";
                            background-image: url(`../../../Images/megasubmenuarrow.png`);
                            width: 21px;
                            height: 21px;
                            display: inline-block;
                            position: absolute;
                            top: 2px;
                            right: 0;
                        }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList li >a {
                            display: block;
                            margin-bottom: 0px
                            /* font-size: var(--fs-m); */

                    }
                        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .submenu-container .itemList li >a:hover {
                            color: var(--secondary-color);
                            right: -7px;
                        }
.mainmegaMenu .header-navigation-wrapper .megaMenu .topmeu {
            display: none;
        }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-navigation-wrapper .megaMenu .topmeu {
                display: block
        }

                .mainmegaMenu .header-navigation-wrapper .megaMenu .topmeu li {
                    padding-top: 30px;
                }
            }
.mainmegaMenu .header-with-nav.layout--fluid {
            max-width: 100%;
        }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-with-nav.layout--fluid >.component-content {
                    padding: 1px 15px;
                    margin-bottom: 0;
                    border-top: 1px solid #fff !important;
                    margin-top: 15px;
                    display: block !important

            }
                }
@media screen and (min-width:768px) and (max-width:991px) {
.mainmegaMenu .header-with-nav.layout--fluid >.component-content {
                    margin-top: 0

            }
                }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-with-nav.layout--fluid >.component-content .header-logo-wrapper {
                        width: 138px
                }
                    }
@media screen and (max-width: 991px) {
.mainmegaMenu .header-with-nav.layout--fluid >.component-content .header-logo-wrapper img {
                            width: 100%;
                            height: auto
                    }
                        }
.mainmegaMenu #global-nav-search {
    padding: 0 0px;
}
.mainmegaMenu #global-nav-search >.component-content {
        position: relative;
    }
.mainmegaMenu .topmenuMobile {
    display: none;
}
@media screen and (max-width: 991px) {
.mainmegaMenu .topmenuMobile {
        padding: 5px 15px 15px;
        display: block
}

        .mainmegaMenu .topmenuMobile li {
            padding: 14px 0px;

        }
    }
.mainmegaMenu #header-text {
    font-weight: 500;
    font-size: 14px;
    margin-right: 15px;
    margin-top: 11px;
  }
@media(min-width: 62rem) {
.mainmegaMenu #header-text {
      margin: 25px 40px;
      font-size: 26px;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out
  }
    }
@media screen and (min-width:768px) and (max-width:991px){
.mainmegaMenu #header-text {
      font-size: 27px;
      margin-top: 32px;
      -webkit-transition: all .5s ease-in-out;
      transition: all .5s ease-in-out
  }
    }
@media (min-width: 75rem) {
.mainmegaMenu .global-header{
      top: 40px
  }
    }
@media (max-width: 47.9375rem) {
.mainmegaMenu .global-header .header-with-icons
    {
            min-height: auto
    }
        }
.mainmegaMenu .meta-header .link-list li a{
                color: var(--meta-header-link-color);
            }
.global-header .nav-icon{
    width: 23px;
}
.global-header .nav-icon span{
        background: var(--color-white);
        height: 2px;
    }
.hamburger button {
        position: absolute;
        right: 0;
        top: 0;
        width: 31px;
        height: 31px;
        padding: 0;
    }

        @media(max-width: 47.9375rem) {.hamburger button {
            top: -5px;
            right: -5px
    }
        }

        .hamburger button.active i {
                background-image: url(`../../../Images/backclose.png`);
                top: -2px;
            }

        .hamburger button i {
            background-image: url(`../../../Images/sb-search-icon.svg`);
            display: inline-block;
            width: 25px;
            height: 25px;
            right: 0;
            top: 3px;
            position: absolute;
            font-size: 0;
            background-repeat: no-repeat;
        }

.sb-search {
    position: absolute;
    right: 38px;
    top: 1px;
    display: block;
    z-index: 99;
    display: block;
}

/* border-bottom: 1px solid var(--Upfield-coconut); */

@media (min-width: 62rem) {
        .sb-search.search-open {
            border-bottom: 1px solid var(--Upfield-coconut);

        }

            .sb-search.search-open .searchDropdwon {
                visibility: visible;
                opacity: 1;
            }

            .sb-search.search-open .sb-search-input {
                width: 444px;
            }
    }

@media (max-width: 61.9375rem) {

.sb-search {
        position: absolute;
        right: 0;
        width: 100%;
        top: 48px;
        left: 15px;
        background-color: var(--global-header-search-megamenu-bg-color);
        opacity: 0;
        visibility: hidden;
        -webkit-transition: 0.75s;
        transition: 0.75s;
        -webkit-transform: translate3d(0, -21px, 0);
                transform: translate3d(0, -21px, 0)
}

        .sb-search.search-open {
            opacity: 1;
            visibility: visible;
            -webkit-transform: translate3d(0, 0, 0);
                    transform: translate3d(0, 0, 0);
        }

            .sb-search.search-open .searchDropdwon #searchdropdown-button {
                visibility: visible;
            }

        .sb-search .sb-search-submit {
            border: none;
            -webkit-box-shadow: none;
                    box-shadow: none;
            height: auto;
            width: 21px;
            height: 21px;
            padding: 18px;
            margin-top: 3px;
            position: absolute;
            right: 7px;
        }
    }

.sb-search .home-search-input {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        position: relative;
    }

@media (max-width: 61.9375rem) {

.sb-search .home-search-input {
                margin-right: 10px
    }
        }

@media (min-width: 75rem) {
            .sb-search .home-search-input .sb-search-submit {
                padding: 10px;
                margin-top: 3px;
                height: 51px;
                
            }

                .sb-search .home-search-input .sb-search-submit::before {
                    padding: 19px 11px;
                }
        }

.sb-search .sb-search-submit::before {
            content: "";
            background-image: url(`../../../Images/sb-search-icon.png`);
            width: 21px;
            height: 21px;
            display: inline-block;
            position: absolute;
            right: 0;
            z-index: 999;
            padding: 18px;
            background-repeat: no-repeat;
            background-position: center;
            top: 5px;
        }

@media (max-width: 61.9375rem) {

.sb-search .sb-search-submit::before {
                top: 0
        }
            }

.sb-search form {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        position: relative;


    }

.sb-search form .sb-search-input {
            background-color: var(--global-header-search-megamenu-bg-color);
            display: block;
            border: none;
            width: 100%;
            height: 54px;
            width: 84px;
            -webkit-transition: all 0.75s;
            transition: all 0.75s;
            padding-right: 0px;
        }

.sb-search form .sb-search-input::-webkit-search-cancel-button {
                -webkit-appearance: none;
            }

@media (max-width: 61.9375rem) {

.sb-search form .sb-search-input {
                width: 82%;
                height: 47px;
                min-width: auto
        }
            }

.sb-search input[type='search'] {
        color: var(--Upfield-coconut) !important;
    }

.sb-search input[type='search']::-webkit-input-placeholder {
            color: var(---Upfield-coconut) !important;
            background-color: transparent;
        }

.sb-search input[type='search']::-ms-input-placeholder {
            color: var(---Upfield-coconut) !important;
            background-color: transparent;
        }

.sb-search input[type='search']::-moz-placeholder {
            color: var(---Upfield-coconut) !important;
            background-color: transparent;
        }

.sb-search input[type='search']:-ms-input-placeholder {
            color: var(---Upfield-coconut) !important;
            background-color: transparent;
        }

.sb-search input[type='search']::placeholder {
            color: var(---Upfield-coconut) !important;
            background-color: transparent;
        }

.sb-search .searchDropdwon {
        display: -webkit-inline-box;
        display: -ms-inline-flexbox;
        display: inline-flex;
        -webkit-box-align: start;
            -ms-flex-align: start;
                align-items: flex-start;
        background: var(--global-header-search-dropdownmenu-bg-color);
        margin-top: 0;
        margin-left: 0px;
        opacity: 0;
        visibility: hidden;
        -webkit-transition: all 0.75s;
        transition: all 0.75s;

    }

@media (max-width: 61.9375rem) {

.sb-search .searchDropdwon {
            margin-left: -30px;
            opacity: 1;
            visibility: visible

    }

        }

.sb-search .searchDropdwon #searchdropdown-button {
            font-size: var(--fs-h6-d);
            font-family: var(--ff-headings);
            font-weight: var(--fw-regular);
            line-height: 150%;
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            padding: 15px 53px 13px 21px;
            text-wrap: nowrap;
            display: flex;
            -webkit-box-align: center;
                -ms-flex-align: center;
                    align-items: center;
            position: relative;
            -webkit-transition: 0.4s ease;
            transition: 0.4s ease;
        }

@media (max-width: 61.9375rem) {

.sb-search .searchDropdwon #searchdropdown-button {
                font-size: var(--fs-xs);
                padding: 13px 29px 13px 15px;
                visibility: hidden;
                margin: 0 15px
        }
            }

.sb-search .searchDropdwon #searchdropdown-button .ui-selectmenu-icon {
                position: absolute;
                right: 0;
                background: url(`../../../Images/dropdown-arrow.svg`) no-repeat;
                /* transform: rotate(180deg); */
                top: 17px;
                right: 10px;
                width: 19px;
                background-size: contain;
                height: 19px;
            }

@media (max-width: 61.9375rem) {

.sb-search .searchDropdwon #searchdropdown-button .ui-selectmenu-icon {
                    top: 14px;
                    right: 7px;
                    width: 15px;
                    height: 15px
            }
                }

.sb-search .searchDropdwon select {
            margin: 0px;
        }

#searchdropdown-menu {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding: 20px 15px;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    padding: 16px 16px 0;
    max-width: 160px;
    width: 100% !important;
    background: var(--global-header-ui-select-menu-bg-color);
}

.ui-selectmenu-menu {
    opacity: 0;
    -webkit-transition: 0.3s;
    transition: 0.3s;
    visibility: hidden;
    z-index: 999;
}

.ui-selectmenu-menu.ui-selectmenu-open {
        opacity: 1;
        visibility: visible;
    }

.ui-selectmenu-menu .ui-menu-item {
        padding: 0 0 16px;
        display: block;
        width: 100%;
        cursor: pointer;
    }

.ui-selectmenu-menu .ui-menu-item .ui-menu-item-wrapper {
            border: 0;
            background: transparent;
            color: var(--Upfield-title);
            font-size: var(--fs-h6-d);
            font-family: var(--ff-headings);
            font-weight: var(--fw-regular);
        }

@media (max-width: 61.9375rem) {

.ui-selectmenu-menu .ui-menu-item .ui-menu-item-wrapper {
                font-size: var(--fs-xs)
        }
            }

.expandsubmit.desk {
        display: none;
        position: absolute;
        right: 0px;
        z-index: 999;
        right: 33px;
        margin-top: 3px;
        width: 45px;
    }

@media (min-width: 62rem) {

.expandsubmit.desk {
            display: inline-block
    }

            .expandsubmit.desk i {
                font-size: 0px;
            }

            .expandsubmit.desk::before {
                content: "";
                background-image: url(`../../../Images/sb-search-icon.svg`);
                width: 21px;
                height: 21px;
                display: inline-block;
                position: absolute;
                right: 0;
                z-index: 999;
                padding: 18px;
                background-repeat: no-repeat;
                background-position: center;
                top: 8px;
            }

            .expandsubmit.desk.active {
                opacity: 0;
                z-index: 0;
                visibility: hidden;
            }
        }
/* normalize */

/* Settings */

/* Mixins */

/* Elements */

/* Utility */

/* Vendors */

/* Context */

/* Custom */

/* Generic */
/* Global header voilife*/
/* Composites */

/* Navigation */

/* page content */

/* Composites */

/* Media */

/* page structure */

/* search */
/* golbal megamenu */