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

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

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

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

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

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

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

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

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

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

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

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

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

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

main {
  display: block;
}

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

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

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

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

a {
  background-color: transparent;
}

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

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

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

b,
strong {
  font-weight: bolder;
}

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

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

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

small {
  font-size: 80%;
}

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

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

audio,
video {
  display: inline-block;
}

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

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

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

img {
  border-style: none;
}

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

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

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

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

button,
input,
select {
  margin: 0;
}

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

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

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

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

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

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

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

input {
  overflow: visible;
}

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

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

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

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

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

select {
  text-transform: none;
}

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

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

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

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

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

[type='search'] {
  -webkit-appearance: textfield; /* 1 */
  outline-offset: -2px; /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Safari.
 */

::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
  height: auto;
}

/**
 * Correct the text style of placeholders in Chrome, Edge, and Safari.
 */

::-webkit-input-placeholder {
  color: inherit;
  opacity: 0.54;
}

/**
 * Remove the inner padding in Chrome, Edge, and Safari on macOS.
 */

::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style upload buttons in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */

::-webkit-file-upload-button {
  -webkit-appearance: button; /* 1 */
  font: inherit; /* 2 */
}

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

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

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

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

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

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

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

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

details {
  display: block;
}

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

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

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

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

summary {
  display: list-item;
}

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

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

canvas {
  display: inline-block;
}

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

template {
  display: none;
}

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

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

[hidden] {
  display: none;
}

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

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

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

/* Mobile-first media queries */

/* Desktop-first media queries */

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  /* Specific */
  --tag-color: var(--brand-color-2);
  --header-color: var(--primary-color);
  --header-text-color: var(--color-white);
  --header-text-color-mobile: var(--header-text-color);
  --footer-color: var(--color-darkest-gray);
  --footer-text-color: var(--color-white);
  --meta-header-color: var(--brand-color-1);
  --notification-bar-color: var(--background-color-brand);
  --notification-content-color: var(--text-color);
  --custom-banner-color: #86d075;

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

   /* Testimonial Background color */

   --testimonial-odd: var(--color-pale-pink);
   --testimonial-even: var(--color-lavender);
 
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  --fs-navigation: var(--fs-m);
  --fs-notification-content: var(--fs-l);

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

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

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

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

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

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

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

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

  --product-card-height: 450px;
  --product-card-img-height: 200px;
  --recipe-card-img-height-mobile: 350px;
  --recipe-card-img-height-desktop: 500px;

  --search-box-v2-max-width: 675px;
  --justify-content: space-between;

  --notification-bar-justify-content: var(--justify-content);
}
:root {
  --opacity-xs: 0.9;
  --opacity-s: 0.6;
  --opacity-m: 0.5;
  --opacity-l: 0.35;
  --opacity-xl: 0.2;
}

:root {
  --box-shadow-hairline: 0 1px 0 0 var(--shadow-color-subtle);
  --box-shadow-subtle: 0 0.25rem 0.25rem 0 var(--shadow-color-subtle);
  --box-shadow-narrow-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);
}

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

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

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

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

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

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

/* 
    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 {
            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;
        }
    }






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

  a:hover {
    text-decoration: underline;
  }

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

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

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

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

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

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

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

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

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

@charset "UTF-8";

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

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

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

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

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

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

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

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

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

@media (min-width: 62rem) {

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

@media (min-width: 75rem) {

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

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

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

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

input[type='text'],
input[type='color'],
input[type='date'],
input[type='datetime-local'],
input[type='email'],
input[type='month'],
input[type='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-m);
  line-height: var(--lh-m);
  color: var(--input-text-color);
}

input[type='text']:focus, input[type='color']:focus, input[type='date']:focus, input[type='datetime-local']:focus, input[type='email']:focus, input[type='month']:focus, input[type='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='text'],
  form input[type='email'],
  form select {
    border: 0;
    padding: var(--s-s) 0;
    border-bottom: solid 1px var(--input-border-color);
    margin-bottom: var(--s-s);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 48rem) {

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

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

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

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

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

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

@media (min-width: 48rem) {

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

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

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

  /* Vertical line */

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

  /* horizontal line */

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

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

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

li {
  padding: 0;
  margin: 0;
}

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

@media (min-width: 48rem) {

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

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

@media (min-width: 48rem) {

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

@media (min-width: 62rem) {

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

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

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

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

@media (min-width: 48rem) {

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

@media (min-width: 62rem) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    td:last-child {
      border: none;
    }

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

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

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

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

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

address {
  font-style: normal;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

@media (min-width: 62rem) {

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

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

.hidden {
  display: none;
}

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

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

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

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

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

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

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

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



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

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

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

  @media (min-width: 48rem) {

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

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

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

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

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

  .recipe-ingredient-list a {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: 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;
}

  @media (min-width: 62rem) {
    #recipe-filter-options-results-container > .component-content{
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
    }
  }

  #recipe-filter-options-results-container #filter-results-wrapper{
    margin-bottom: var(--s-xxxl);
  }

  #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{
        width: 25%;
        opacity: 1;
        padding: 0 15px;
        height: 100%;
        margin-bottom: var(--m-l);
    }

  @media (max-width: 61.9375rem) {

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

  #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{
            width: 75%        
    }
        }

  @media (min-width: 62rem) {

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


#filter-options-wrapper{
  width: 0%;
  -webkit-transform: translateX(-100%);
          transform: translateX(-100%);
  opacity: 0;
  overflow: hidden;
  -webkit-transition: -webkit-transform 0.3s ease-in-out;
  transition: -webkit-transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out;
  transition: transform 0.3s ease-in-out, -webkit-transform 0.3s ease-in-out; 
  height: 0;
}


[dir="rtl"] #filter-options-wrapper {
    -webkit-transform: translateX(100%);
            transform: translateX(100%);
  }


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


@media (min-width: 62rem) {


#filter-options-wrapper{
    -webkit-transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out;
    transition: transform 0.1s ease-in-out, opacity 0.1s ease-in-out, -webkit-transform 0.1s ease-in-out
} 
  }


#filter-options-wrapper.no-transition{
    -webkit-transition: unset;
    transition: unset;
  }


#filter-options-wrapper.enable-hide-filter-options-onload .hide-filter-options-onload{
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
      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
    }
      }


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


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


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


[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: url(`../../../Images/chevron.svg`);
          position: absolute;
          right: 0;
          padding: 1px 4px;
          -webkit-filter: brightness(0);
                  filter: brightness(0);
          -webkit-transform: rotate(-90deg);
                  transform: rotate(-90deg);
        }


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


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


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


@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: 12px;
        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;
      }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter .facet-value{
          line-height: 18px;
          font-size: 12px;
          margin: 0 5px
      }
            #filter-options-wrapper .facet-component .facet-search-filter .facet-value.active-facet 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"]{
          width: 16px;
          height: 16px;
          vertical-align: middle;
        }


@media (max-width: 61.9375rem) {


#filter-options-wrapper .facet-component .facet-search-filter .facet-value input[type="checkbox"]{
           display: none
        }
          }


#filter-options-wrapper .facet-component .facet-search-filter .facet-value label{
          padding: 0 8px;
        }


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


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


[dir="rtl"] #filter-options-wrapper .facet-component .facet-search-filter .facet-value label .facet-count {
              float: left;
            }


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


@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;

        /*
        @media (--mq-min-m) and (--mq-max-m) {
          max-width: 250px;
        }
        */
      }


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


#filter-options-wrapper .facet-component.toggle-facet .contentContainer,
      #filter-options-wrapper .facet-component.toggle-facet .bottom-filter-button,
      #filter-options-wrapper .facet-component.toggle-facet .bottom-remove-filter {
          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: 6px 15px 26px;
  }


@media (min-width: 62rem) {


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


@media (min-width: 62rem) {


#filter-options-wrapper .filter-options-header-mobile.show-reset-btn{
        -webkit-box-pack: start;
            -ms-flex-pack: start;
                justify-content: flex-start;
        padding: 6px 0 26px;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
      }


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


@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: 30px;
        height: 30px;
        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)
    }  
      }

/* 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: 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;
      }

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

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

  @media (min-width: 62rem) {

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

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

  @media (min-width: 62rem) {

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

  @media (max-width: 61.9375rem) {

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

  @media (min-width: 62rem) {

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

  @media (min-width: 62rem) {

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

  @media (min-width: 62rem) {

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

  @media (min-width: 62rem) {

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

  @media (min-width: 62rem) {

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

  @media (min-width: 62rem) {

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

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

  @media (min-width: 62rem) {

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

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

  @media (max-width: 61.9375rem) {

  .carouselbanner .glide__arrows {
      display: none
  }
    }

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

  @media (min-width: 62rem) {

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

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

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

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

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

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

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

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

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



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

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


.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);
            }
    [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);  
        scrollbar-width: thin;
    }

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

    .customized-popup.overlay-wrapper > .overlay::-webkit-scrollbar {
            width: 10px;
            height: 10px;
        }

    .customized-popup.overlay-wrapper > .overlay::-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);
        }

    .customized-popup.overlay-wrapper > .overlay::-webkit-scrollbar-thumb {
            border-radius: var(--border-radius-m);
            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)            
        }
            }

    .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; }
}
#filter-header-details {
    margin: var(--s) auto;
    max-width: 1440px;
}
    
    @media (min-width: 36rem){#filter-header-details {
        padding: 0 0.9375rem
}
    }
    
    @media (min-width: 62rem) {#filter-header-details {
        margin: var(--s-xl) auto var(--m-m)
}
    }
    
    @media (min-width: 62rem) {
    
    #filter-header-details > .component-content{
            display: -webkit-box;
            display: -ms-flexbox;
            display: flex;
            -webkit-box-pack: justify;
                -ms-flex-pack: justify;
                    justify-content: space-between
    }
        }

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

@media (max-width: 61.9375rem) {

#filter-button-container {
        padding-top: var(--s);
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-pack: end;
            -ms-flex-pack: end;
                justify-content: flex-end
}

        #filter-button-container .active-filters-mobile{
            padding-right: var(--s-s);
            margin: 0 auto 0 0;
        }

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

            #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;
                opacity: 0.7;
            }
            #filter-button-container.show-active-filters .active-filters-mobile{
                display: block;
            }

        #filter-button-container > .component-content{
            -webkit-box-align: end;
                -ms-flex-align: end;
                    align-items: flex-end;
            justify-items: flex-end;
            place-items: flex-end;
            -webkit-box-pack: end;
                -ms-flex-pack: end;
                    justify-content: flex-end;
        }
    }

@media (max-width: 35.9375rem) {

#filter-button-container {
        display: block
}

        #filter-button-container .active-filters-mobile{
            padding: 0 0 var(--s-m);
        }
                #filter-button-container > .component-content > .component:first-child{
                    margin: 0 auto 0 0;
                }

                    [dir='rtl'] #filter-button-container > .component-content > .component:first-child {
                        margin: 0 0 0 auto;
                    }   
                #filter-button-container > .component-content > .component:last-child{
                    margin: 0 0 0 auto;
                }

                    [dir='rtl'] #filter-button-container > .component-content > .component:last-child {
                        margin: 0 auto 0 0;
                    }
    }

@media (min-width: 62rem) {

#filter-button-container {
        line-height: 30px;
        max-width: 40%;
        width: auto;
        margin: 0;
        -ms-flex-item-align: end;
            align-self: flex-end;
        justify-self: flex-end;
        place-self: flex-end;
        padding-left: 5px
}    
    }

#filter-button-container > .component-content{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        padding-bottom: var(--s-xs);
    }

#filter-button-container .toggle-filter-button{
        cursor: pointer;
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        font-size: var(--fs-l);
        line-height: 25px;
        padding: 0 var(--s-s);
    }

@media (max-width: 35.9375rem) {

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

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

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

@media (max-width: 35.9375rem) {

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

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

#filter-button-container .toggle-filter-button.hide{
            visibility: hidden;
        }
#filter-button-container .rich-text {
    text-align: right;
    margin: 10px 0;
}
.component.sort-results select {
    background: transparent;
    padding: 0 2px;
    border: 0;
    -moz-text-align-last: right;
         text-align-last: right;
    font-size: var(--fs-l);
    line-height: 25px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    width: auto;
}
.component.sort-results.show select {
    display: block;
}
#filter-button-container .sort-button::before {
    content: '';
    width: 10px;
    height: 10px;
    position: absolute;
    left: -18px;
    top: 6px;
    background-image: url(`../../../Images/sort.svg`);
    background-size: cover;
}
#filter-button-container .sort-button {
    position: relative;
    display: none;
    cursor:pointer;
}

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

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

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

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

  .header .navigation {
    padding: 0;
  }

  .header .navigation nav a {
        display: inline-block !important;
      }

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

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

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

.email-validation-error {
    color: red;
    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);
  -webkit-box-shadow: var(--box-shadow-hairline);
          box-shadow: var(--box-shadow-hairline);
}

  @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%
}
  }

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

  .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(--primary-color);
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: center;
      -webkit-transition: height var(--transition-timing-slow);
      transition: height var(--transition-timing-slow);
      height: 0;
      z-index: 0;
      overflow: auto
  }
    }

  @media (min-width: 75rem) {

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

  .header-logo-center .navigation.is-open {
      text-align: left;
    }

  @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 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%);
        }
          /* base width of all li items */
          .header-logo-center .header-bottom.has-centered-logo .navigation li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(25% - (var(--logo-width-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:first-child:nth-last-of-type(1),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(2),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:nth-of-type(2),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(4) ~ li:nth-of-type(2),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(6) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7) ~ li:nth-of-type(4) {
            margin-right: var(--logo-width-desktop);
            z-index: 1001;
          }
            [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(1), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(2), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:nth-of-type(2), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(4) ~ li:nth-of-type(2), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:nth-of-type(3), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(6) ~ li:nth-of-type(3), [dir="rtl"] .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7) ~ li:nth-of-type(4) {
              margin-right: 0;
              margin-right: initial;
              margin-left: var(--logo-width-desktop);
            }

          /* Giving z-index for item after logo*/
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(3) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(4) ~ li:nth-of-type(3),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(5) ~ li:nth-of-type(4),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(6) ~ li:nth-of-type(4),
          .header-logo-center .header-bottom.has-centered-logo .navigation li: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: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: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: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: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: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: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:first-child:nth-last-of-type(n + 5):nth-last-of-type(-n + 6),
          .header-logo-center .header-bottom.has-centered-logo .navigation
            li:first-child:nth-last-of-type(n + 5):nth-last-of-type(-n + 6)
            ~ li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(16.6667% - (var(--logo-width-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:first-child:nth-last-of-type(n + 7),
          .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 7) ~ li {
            -webkit-box-flex: 0;
                -ms-flex: 0 0 calc(12.5% - (var(--logo-width-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:first-child:nth-last-of-type(n + 5) a, .header-logo-center .header-bottom.has-centered-logo .navigation li:first-child:nth-last-of-type(n + 5) ~ li a {
              font-size: var(--fs-m);
            }

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

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

  [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 {
          display: none
      }
        }

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

  @media (min-width: 75rem) {
        .header-logo-center .submenu:hover 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;
    }

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

  @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 (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-m);
            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.has-moved-up .header-logo-center {
    -webkit-transform: translate3d(0px, -170px, 0px);
            transform: translate3d(0px, -170px, 0px);
  }

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

  @media (min-width: 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(--primary-color);
      -webkit-box-pack: start;
          -ms-flex-pack: start;
              justify-content: flex-start;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      text-align: center;
      -webkit-transition: height var(--transition-timing-slow);
      transition: height var(--transition-timing-slow);
      height: 0;
      z-index: 0;
      overflow: auto
  }
    }

  .header-logo-left .navigation nav a {
        display: inline-block !important;
      }

  @media (min-width: 75rem) {

  .header-logo-left .navigation nav a {
          margin: 0 var(--s-l) !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-s);
        }
      }

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

  [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 {
          display: none
      }
        }

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

  @media (min-width: 75rem) {
        .header-logo-left .submenu:hover 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;
    }

  .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 (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-m);
            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);
            }
: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(--color-white);
      }

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

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

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

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

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

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

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

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

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

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

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

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

  @media (max-width: 61.9375rem) {

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

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

  @media (max-width: 35.9375rem) {

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

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

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

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

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

  @media (max-width: 35.9375rem) {

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

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

  @media (min-width: 62rem) {

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

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

  @media (min-width: 48rem) {

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  @media (min-width: 62rem) {

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

.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);
  }
:root {
  --accordion-toggle-header-inidcator-size: 3rem;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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



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



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



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

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

.recipe-card-list 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;
                }
    [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;
            }

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



.hero {
  position: relative;
}

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

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

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

  @media (max-width: 47.9375rem) {

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

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

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

  @media (max-width: 47.9375rem) {

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

  @media (max-width: 61.9375rem) {

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

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

  @media (max-width: 61.9375rem) {

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

  @media (min-width: 62rem) {

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

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

  @media (max-width: 47.9375rem) {

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

  @media (max-width: 35.9375rem) {

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

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

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

  @media (max-width: 61.9375rem) {

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

  @media (max-width: 47.9375rem) {

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

  @media (max-width: 35.9375rem) {

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

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

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

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

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

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

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

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

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

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

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

@media (max-width: 61.9375rem) {

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

@media (min-width: 62rem) {

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

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

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

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

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

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

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

  @media (max-width: 47.9375rem) {

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

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

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

  @media (max-width: 61.9375rem) {

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

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

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

  .product-detail-header .product-detail-bgimage .product-detail-header-content > img {
        max-width: 500px;
        max-height: 500px;
        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(--color-white);
          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);
}

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

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

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

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

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

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

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

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

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

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

.recipe-detail .related-products {
    margin: var(--s-s) 0;
  }
#recipe-download-print ul>li a.btn.download-recipe::after {
  -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-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-info-section {  
  background: var(--color-white);
  padding-top: var(--s-xl);
  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: var(--s-xxl);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-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 .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 .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: 32px;
      text-align: center;
    }
  @media (min-width: 36rem) {
  .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: 64px;
        margin: var(--s-l) auto 0;
        max-width: 774px
    }
      }
  .recipe-new-experience .recipe-header-content .field-shorttitle {
      display:block;
      font-size: 32px; 
      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: 36rem) {
  .recipe-new-experience .recipe-header-content .mobile-title.field-title {
        display: none !important
    }
      }
  .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);
        }
  .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
      }
          }
@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)
  }
    }

.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) and (max-width: 61.9375rem){

.related-recipes.v4 .recipe-category-tile {
      padding: 0 15px
  }
    }

@media (min-width: 62rem) {

.related-recipes.v4 .recipe-category-tile {
      max-width: 2080px;
      padding: 0
  }
    }

@media (min-width: 2080px) {
        .related-recipes.v4 .recipe-category-tile ul li {
          width: calc((2080px - 150px) / 4);
        }
    }

.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) {
          .related-recipes.v4 .recipe-category-tile .recipe-card-v2:hover .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-products {
  text-align: center;
}

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

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

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

.recipe-category-tile{
    padding: 15px 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);
    }

    .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: 0px 5px 24px 5px;
            width: 286px;
            min-width: 286px;   
        }

    /* Equal space for 4 cards */

    @media (min-width: 62rem){

    .recipe-category-tile ul li{
                width: calc((100vw - 150px) / 4);
                margin: 8px 13px 32px 12px;
                min-width: unset   
        }
            }

    @media (min-width : 1440px){

    .recipe-category-tile ul li{
                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: unset;
                }

    @media (min-width: 62rem) {

    .recipe-category-tile ul li > a > .recipe-card-v2:hover .recipe-card-content-wrapper{
                                -webkit-transform: translateY(-3.4em);
                                        transform: translateY(-3.4em)     
                        }
                            }

    @media (min-width: 75rem) {
                                .recipe-category-tile ul li > a > .recipe-card-v2:hover .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 > .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: capitalize;
                        }

    .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: inline-block;
                            }

    .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 {
                -webkit-box-shadow: var(--box-shadow-narrow-light);
                        box-shadow: var(--box-shadow-narrow-light);
                -webkit-transform: translateY(var(--s-s));
                        transform: translateY(var(--s-s));
            }

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

                [dir='rtl'] .recipe-category-tile ul li:last-child{
                    padding-left: 15px;
                    padding-right: 0;
                }
        }

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

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

    .all-recipes.page-list-grid ul li .recipe-card-v2{
                    border-radius: unset;
                }

    @media (min-width: 62rem) {

    .all-recipes.page-list-grid ul li .recipe-card-v2:hover .recipe-card-content-wrapper{
                                -webkit-transform: translateY(-3.4em);
                                        transform: translateY(-3.4em);
                                height: inherit     
                        }
                            }

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



@media (max-width: 35.9375rem) {



.recipe-overview .all-recipes.page-list-grid ul li {
                        padding: 0
                }
                    }

.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(--m-l)!important
        }
            }
        .recipe-landing-banner.page-header .page-header-content .page-header-content-wrapper .page-header-content-title{
                    color: var(--color-white);
                    margin-bottom: var(--s);
                }


#recipe-download-print{
    padding-top: var(--s-m);
}

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

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

    #recipe-download-print ul > li a.btn.print-recipe::after{
                    content: url(`../../../Images/print.svg`);
                }

.logo-for-pdf {
    display: none;
}


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

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

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

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

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

        }

        @media (min-width: 48rem) {

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

        }
            }

        @media (min-width: 48rem) {

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

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

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

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

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

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

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

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

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

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

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

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

  @media (min-width: 62rem) {

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

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

  .recipe-card .recipe-card-title {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    text-transform: uppercase;
    -webkit-box-pack: end;
        -ms-flex-pack: end;
            justify-content: flex-end;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    color: var(--color-white);
    top: 0;
    bottom: 0;
    padding: var(--s-s) var(--s-l);
    max-width: 90%;
  }
.recipe-card-v2 {
  overflow: hidden;
  border-radius: var(--border-radius-s);
  background-color: var(--color-white);
  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);
  }
  .recipe-card-v2 .recipe-card-content-wrapper:hover h4 {
      word-break: keep-all;
      -webkit-line-clamp: unset;
    }
  .recipe-card-v2 .recipe-card-content-wrapper h4 {
      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;
  }
  @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) {
      .recipe-card-v2:hover .recipe-card-content-wrapper {
        -webkit-transform: translateY(-5em);
                transform: translateY(-5em);
      }

      .recipe-card-v2:hover .recipe-card-specs {
        opacity: 1;
        -webkit-transform: none;
                transform: none;
        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;
      }
    }

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

}

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

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



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

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

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

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

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

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

.banner {
  position: relative;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

@media(min-width: 36rem){

.recipe-categories .related-recipe-images img {
        -webkit-box-shadow: var(--box-shadow-narrow-medium);
                box-shadow: var(--box-shadow-narrow-medium)
    }
      }

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

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

  @media (min-width: 62rem) {

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

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

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

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

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

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

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

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

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

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

  @media (min-width: 62rem) {

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

  .page-header.is-medium-variant .page-header-bgcontainer {
      height: 35vh;
      -webkit-box-align: unset;
          -ms-flex-align: unset;
              align-items: unset;
      max-height: 350px;
      min-height: unset;     
    }

  @media (min-width: 62rem) {

  .page-header.is-medium-variant .page-header-bgcontainer {
        height: 55vh     
    }
      }

  @media (max-width: 54rem) and (orientation: landscape) {

  .page-header.is-medium-variant .page-header-bgcontainer {
        height: 60vh     
    }
      }

  .page-header.is-medium-variant .page-header-content{ 
      padding: var(--s-xl) var(--s-m) var(--s-xxl);
      height: -webkit-fit-content;
      height: -moz-fit-content;
      height: fit-content;
    }

  @media (min-width: 36rem) and (max-width: 47.9375rem){

  .page-header.is-medium-variant .page-header-content{
        padding: var(--s-xxl) var(--s-m) var(--s-xxl)
    }
      }

  @media (min-width: 48rem){

  .page-header.is-medium-variant .page-header-content{
        padding: var(--s-xxxl) var(--s-m)
    }
      }

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

  .page-header.is-medium-variant .page-header-content{
        padding: var(--s-xxxxl) var(--s-m)
    }
      }

  .page-header.is-medium-variant .page-header-content .page-header-content-title {
        text-shadow: 0px 4px 4px var(--shadow-color-subtle);
        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)
      }
        }

  @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(--color-black);
      position: absolute;
      display: block;
      top: 0;
      height: 100%;
      width: 100%;
      opacity: var(--opacity-xl);
      z-index: 200;
    }

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

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

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

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

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

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

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

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

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

  @media (min-width: 48rem) {

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

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

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

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

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

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

  .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(--color-black);
            font-size: 20px;
            line-height: 30px;
        }
    @media (min-width: 62rem) {
    .small .banner-content .banner-content-subtitle {
                font-size: 24px;
                line-height: 32px
        }
            }
.custom-banner {
    min-height: 536px;
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    position: relative;
    border-radius: 4px;
    overflow: hidden;
    margin: 10px;
}

    .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: 24px;
                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;
                    }
                }




.rich-text--intro {
    font-size: var(--fs-l);
}



.usp-section {
  position: relative;
  overflow: hidden;
}

  .usp-section .usp {
    text-align: center;
    position: relative;
    z-index: 1;
  }

  @media (max-width: 47.9375rem) {

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

  .usp-section .usp-section-content {
    position: relative;
    z-index: 1;
  }

  .usp-section .usp-heading-wrapper {
    width: 100%;
    margin-bottom: var(--m-m);
  }

  .usp-section .usp-heading-wrapper .usp-section-title,
    .usp-section .usp-heading-wrapper .usp-section-intro {
      text-align: center;
      display: block;
    }

  .usp-section .usp-section-cta {
    position: relative;
    z-index: 1;
  }

  .usp-section .usp-section-background-image {
    display: none;
  }

  .usp-section.has-background-image {
    padding: var(--s-xxxxl) 0;
  }

  .usp-section.has-background-image .usp-section-background-image {
      display: block;
      position: absolute;
      top: 0;
      right: 0;
      bottom: 0;
      left: 0;
      z-index: -1;
    }

  .usp-section.has-background-image .usp-section-background-image img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        -o-object-fit: cover;
           object-fit: cover;
      }

  .usp-section.has-background-overlay::after {
      content: '';
      position: absolute;
      top: 0;
      right: -15px;
      bottom: 0;
      left: -15px;
      background-color: var(--color-black);
      opacity: 0.5;
      z-index: 0;
    }

  .usp-section.has-light-text h2,
    .usp-section.has-light-text p {
      color: var(--color-white);
    }



.title a {
    font-size: var(--fs-xl);
    line-height: var(--lh-xs);
    text-decoration: none;
  }

    @media (min-width: 62rem) {.title a {
      font-size: var(--fs-xxl)
  }
    }

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



.tabs-controls {
  position: relative;
  z-index: 10;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  width: 100%;
  margin: 0 auto;
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  list-style-type: none;
}

  @media (max-width: 47.9375rem) {.tabs-controls {
    -webkit-box-pack: start;
        -ms-flex-pack: start;
            justify-content: flex-start;
    overflow-x: scroll
}
  }

.tab-item a {
    cursor: pointer;
    height: 100%;
    position: relative;
    display: block;
    color: var(--text-color);
    padding: var(--s-m) var(--s-l);
    text-decoration: none;
    white-space: nowrap;
    text-align: center;
    font-weight: var(--fw-bold);
    border-bottom: 4px solid var(--color-light-gray);
  }

.tab-item a.active {
      color: var(--brand-color-1);
      border-bottom: 4px solid var(--brand-color-1);
    }

.tab-item a span {
      display: block;
    }

.tab-item a:empty {
      display: none;
    }

.tab-item a img {
      margin-bottom: var(--s-m);
      max-width: var(--s-xxxl);
    }

@media (min-width: 62rem) {

.tab-item a img {
        max-width: var(--s-xxxxl)
    }
      }

.tab-panel {
  display: none;
  min-height: 100px;
  height: auto;
  margin-top: var(--s-xl);
}

.tab-panel.open {
    display: block;
    height: auto;
    padding: var(--s-m) 0;
  }

.tab-panel::empty {
    display: none;
  }





.counter {
    position: relative;
    display: block;
    padding: var(--s-m);
    background-color: #ebf5e6;
}
    .counter .count {
        display: block;
        font-size: var(--fs-m);
        margin-bottom: var(--s-m);
    }
    @media (min-width: 62rem) {
    .counter .count {
            display: inline-block;
            margin-right: var(--s-m);
            margin-bottom: 0
    }
            [dir="rtl"] .counter .count {
                margin-left: var(--s-m);
                margin-right: 0;
            }
        }
    .counter .number {
        display: inline-block;
        min-width: var(--s-xl);
        max-width: var(--s-xxl);
        background: -webkit-gradient(linear, left bottom, left top, color-stop(48%, #4CA246),color-stop(52%, #2b9124), color-stop(52%, #4CA246));
        background: linear-gradient(to top, #4CA246 48%,#2b9124 52%, #4CA246 52%);
        border: var(--s-xs) solid #2b9124;
        border-radius: var(--border-radius-s);
        padding: var(--s-xs) 0;
        margin: 2px;
        color: var(--color-white);
        text-shadow: 2px 2px #2b9124;
        text-align: center;
    }
    .counter .character {
        display: inline-block;
        text-align: center;
    }
    .counter .counter-text {
        margin-bottom: 0;
    }
    @media (min-width: 62rem) {
    .counter .counter-text {
            display: inline-block
    }
        }


.TestimonialList-list {
    padding: var(--s-l) 0 56px 0;
} 

    @media (min-width: 62rem){
.TestimonialList-list {
        padding: var(--s-xl) 0 64px 0
}
    } 

    .TestimonialList-list h2 {
        font-size: 32px;
    } 

    @media (min-width: 75rem) { 

    .TestimonialList-list h2 {
            font-size: 48px
    }
        } 

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

    .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
                        }
                            }
.component.login tr{
        background: none;
    }

/* presentation styles of container */
.bgc-white {
  background-color: var(--color-white);
}

.bgc-light {
  background-color: var(--background-color-light);
}

.bgc-medium {
  background-color: var(--background-color-medium);
}

.bgc-dark {
  background-color: var(--background-color-dark);
}

.bgc-primary {
  background-color: var(--primary-color);
}

.bgc-secondary {
  background-color: var(--secondary-color);
}

.bg-pattern {
  background: var(--pattern);
}

.bgc-vert-gradient-white-light {
  background: -webkit-gradient(linear,
      left top, left bottom,
      from(var(--color-white)),
      to(var(--background-color-light)));
  background: linear-gradient(to bottom,
      var(--color-white) 0%,
      var(--background-color-light) 100%);
}

.has-bgi>div {
    background-size: cover;
    background-repeat: no-repeat;
  }

.bgi-cover {
  position: relative;
  min-height: 20vh;
}

/*todo*/

.bgi-cover img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
/* presentation style of container */

.container.layout--fluid,
.layout--fluid {
    max-width: 100%;
}

.container.layout--large,
.layout--large {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
}

.container.layout--medium,
.layout--medium {
    max-width: 992px;
    margin-left: auto;
    margin-right: auto;
}

.container.layout--small,
.layout--small {
    max-width: 768px;
    margin-left: auto;
    margin-right: auto;
}

.container.layout--extra-small,
.layout--extra-small {
    max-width: 576px;
    margin-left: auto;
    margin-right: auto;
}
.container.container--no-padding {
  padding-left: 0;
  padding-right: 0;
}

.container.container--large-padding {
  padding: var(--s-m);
}

@media (min-width: 62rem) {

.container.container--large-padding {
    padding: var(--s-xxxxl)
}
  }

.overlay {
  display: none;
  position: absolute;
  margin: auto;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  min-height: 30px;
  min-width: 30px;
  z-index: 9999;
  background: var(--color-white);
  -webkit-box-shadow: var(--box-shadow-narrow-medium);
          box-shadow: var(--box-shadow-narrow-medium);
  border-radius: var(--border-radius-s);
  overflow-x: auto;
}

  .overlay .overlay-inner {
    padding: var(--s-xxxl) var(--s-xxl);
  }

  /* Specific styling for close button, so no vars */

  .overlay .overlay-close {
    position: absolute;
    right: 0;
    top: 0;
    width: 30px;
    height: 30px;
    opacity: 0.3;
    margin: var(--m-s);
  }

  .overlay .overlay-close:hover {
    opacity: 1;
  }

  .overlay .overlay-close:before,
  .overlay .overlay-close:after {
    position: absolute;
    left: 15px;
    content: ' ';
    height: 30px;
    width: 3px;
    background-color: #333;
  }

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

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



.search-box {
  background: var(--color-light-gray);
  padding: var(--s-m);
}

	@media (min-width: 36rem) {.search-box {
		padding-top: var(--s-s);
		padding-bottom: var(--s-s)
}
	}

	@media (min-width: 36rem) {

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

	.search-box label {
		margin-right: var(--m-m);
  }

	@media (max-width: 61.9375rem) {

	.search-box label {
      display: none
  }
    }

	.search-box input[type='text'] {
    width: 18rem;
    padding-top: var(--s-m);
    padding-bottom: var(--s-m);
  }

	[dir="rtl"] .search-box input[type='text'] {
      text-align: right;
    }

	@media (max-width: 35.9375rem) {

	.search-box input[type='text'] {
			width: 100%;
			margin-bottom: var(--m-xs)
  }
    }

	.search-box .search-box-button,
  .search-box .search-box-button-with-redirect {
    background-color: var(--primary-color);
	}

	@media (max-width: 35.9375rem) {

	.search-box .search-box-button,
  .search-box .search-box-button-with-redirect {
      width: 100%
	}
    }

	@media (min-width: 36rem) {

	.search-box .search-box-button,
  .search-box .search-box-button-with-redirect {
      margin-left: var(--m-s)
	}
      [dir="rtl"] .search-box .search-box-button, [dir="rtl"] .search-box .search-box-button-with-redirect {
        margin-left: unset;
        margin-right: var(--m-s);
      }
    }

	@media (max-width: 35.9375rem) {

	.search-box .twitter-typeahead {
			width: 100%
	}
    }

	.search-box .tt-menu {
    background-color: var(--color-white);
    min-width: 100%;
    border-style: solid;
    border-width: 0 1px 1px;
    border-color: var(--border-color);
  }

	.search-box .tt-menu .tt-suggestion:not(:last-child) {
        border-bottom: solid 1px var(--border-color);
      }

	.search-box .tt-menu .tt-suggestion a {
        display: block;
        padding: var(--s-s) var(--s-m);
        -webkit-transition: var(--transition);
        transition: var(--transition);
        color: var(--text-color);
      }

	.search-box .tt-menu .tt-suggestion a:hover {
          background-color: var(--primary-color);
          color: var(--color-white);
          text-decoration: none;
        }

.search-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: var(--search-box-v2-max-width);
        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;

    }

    @media (min-width: 62rem){

    .search-box.search-box-with-icon > .component-content{
            -webkit-box-shadow: var(--box-shadow-narrow-bottom);
                    box-shadow: var(--box-shadow-narrow-bottom)

    }
        }

    .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: unset;

        }

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

    .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{
                    content: url(`../../../Images/search-icon.svg`);
                }

    .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{
                    opacity: var(--opacity-m);
                    -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;
	}

@media (min-width: 62rem){

.search-results-count{
		max-width: 60%;
		padding-right: 5px
}
	}

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


/* normalize */

/* Settings */

/* Mixins */

/* Elements */

/* Utility */

/* Vendors */

/* Context */

/* Custom */

/* Generic */

/* Composites */

/* Navigation */

/* page content */

/* Composites */

/* page structure */

/* search */