/**
	Main styling file, which is being compiled.
**/

/**
	Print Sheet
**/

/**
	Settings
**/

/**
    CONVENTIONS

    display:
    position:
    float:
    positioning
        top:
        right:
        left:
        bottom:
    dimensions
        width:
            min-width:
            max-width:
        height:
            min height;
            max-height;

    styling
        type-styling
            color:
    background:

**/

/**
    All used Less mixins/functions.
**/

/*
    Deze functie voegt een standaard gradient toe. De gradient loopt van boven naar
    beneden. De kleuren van de gradient kunnen aangepast worden met de parameters @start en
    @end. Standaard wordt het IE 6-9 filter toegevoegd aan de gradient. Indien deze niet
    gebruikt moet worden moet de derde parameter op 0 gezet worden. Het IE 6-9 filter wordt
    toegevoegd door de functie .gradient-mixin().
*/

/*
    Met behulp van deze functie wordt het IE-filter eigenschap toegevoegd aan de output van
    de functie .gradient(). Deze functie wordt alleen uitgevoerd als de parameter @filter
    groter is dan 0.
*/

/*
    Mixin for cross-browser radius.
*/

/*
    Mixin for cross-browser background cover.
*/

/*
    Mixin for cross-browser CSS3 animations.
*/

/*
    Mixin for cross-browser shadow.
*/

/*
    Mixin for cross-browser blurs.
*/

/*
    Mixin for cross-browsers transforms.
*/

/*
    Mixin for cross-browser rotation.
*/

/*
    Mixin for truncating a string with Ellipsis.
*/

/*
    Mixin for verticalling aligning a div cross-browser.
*/

/*
    Mixin for disabling text select cross-browser.
*/

/**
    Mixin for CSS text columns cross-browser
*/

/**
    Mixin for CSS word-wrap with hyphenation on syllables. Eg:

    Lorem ipsum dolor sit amet, consec-
    tetur adipiscing elit. Pellentesque
    interdum dictum mi eget suscipit.
    Nulla urna erat, pharetra pharetra
    odio nec, lacinia facilisis nisi.
    Donec ligula mi, suscipit quis lo-
    bortis eget, elementum id massa.

    Works not yet on all browsers and the lang attr must be set on the element, or on a
    parent element.
*/

/**
    Mixins for automatically generating media queries for the three screen ranges of Materialize.
    Gulp automatically concatenates all the same ranges together and places them at the end of the css file.
**/

/**
    Mixin for divergent breakpoints. It can be used with two or three arguments. If the
    second argument (@a2) is a rule set, a breakpoint with only the minimal width (@a1)
    is generated. If the second argument is a pixel value and the third is a rule set, a
    breakpoint with the minimal width (@a1) and maximum width (@a2) is generated.
*/

/**
	All general typography.
**/

/**

	@font-face
	----------

	The next declaration of @font-face is the best according to this article :
	https://neonstud.io/blog/design/font-face-best-practices-guide-2016/

	Important notes from this article:

    - First start off with Font Squirrel – choose expert settings and check the boxes for TrueType, EOT Lite, and SVG. Everything else is fine.
    - Never use Font2Web – their render/conversion techniques do not produce good results.
    - We’re still missing the font.otf format, so go to FontConverter, upload the font.ttf again, and have it output font.otf.
    - Now that you have all of the necessary files, upload them to your server and start building the CSS.
    - Do not – I repeat do not – use the Font Squirrel CSS. That defeats the purpose of this article. !!!
    - Copy our CSS code and modify it for your font’s name and location.

	So when generating webfonts with some generator like Fontsquirrel,
	edit the CSS like described below.

	@font-face {
		font-family: font;
		font-weight: normal;
		font-style: normal;
		src: url('/fonts/font.eot');
		src: url('/fonts/font.eot?#iefix') format('embedded-opentype'),
		url('/fonts/font.woff2') format('woff2'),
		url('/fonts/font.svg#font') format('svg');
		url('/fonts/font.otf') format('opentype'),
		url('/fonts/font.ttf') format('truetype'),
		url('/fonts/font.woff') format('woff'),
	}

	@media screen and (-webkit-min-device-pixel-ratio:0) {

		@font-face {
			font-family: font;
			font-weight: normal;
			font-style: normal;
			src: url('/fonts/font.svg') format('svg');
		}
	}

**/

body {
    font-family: "proximanova-regular", Helvetica, Arial, sans-serif;
    font-size: 15px;
    line-height: 23px;
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

@font-face {
    font-family: "proximanova-regular";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/proximanova-regular-webfont.eot");
    src: url("../fonts/proximanova-regular-webfontd41d.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/proximanova-regular-webfont.woff2") format("woff2"),
        url("../fonts/proximanova-regular-webfont.svg#font") format("svg"),
        url("../fonts/proximanova-regular-webfont.otf") format("opentype"),
        url("../fonts/proximanova-regular-webfont.ttf") format("truetype"),
        url("../fonts/proximanova-regular-webfont.woff") format("woff");
}

@font-face {
    font-family: "proximanova-semibold";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/proximanova-semibold-webfont.eot");
    src: url("../fonts/proximanova-semibold-webfontd41d.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/proximanova-semibold-webfont.woff2") format("woff2"),
        url("../fonts/proximanova-semibold-webfont.svg#font") format("svg"),
        url("../fonts/proximanova-semibold-webfont.otf") format("opentype"),
        url("../fonts/proximanova-semibold-webfont.ttf") format("truetype"),
        url("../fonts/proximanova-semibold-webfont.woff") format("woff");
}

@font-face {
    font-family: "proximanova-bold";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/proximanova-bold-webfont.eot");
    src: url("../fonts/proximanova-bold-webfontd41d.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/proximanova-bold-webfont.woff2") format("woff2"),
        url("../fonts/proximanova-bold-webfont.svg#font") format("svg"),
        url("../fonts/proximanova-bold-webfont.otf") format("opentype"),
        url("../fonts/proximanova-bold-webfont.ttf") format("truetype"),
        url("../fonts/proximanova-bold-webfont.woff") format("woff");
}

@font-face {
    font-family: "sentinel-semibold";
    font-weight: normal;
    font-style: normal;
    src: url("../fonts/sentinel-semibold-webfont.eot");
    src: url("../fonts/sentinel-semibold-webfontd41d.eot?#iefix")
            format("embedded-opentype"),
        url("../fonts/sentinel-semibold-webfont.woff2") format("woff2"),
        url("../fonts/sentinel-semibold-webfont.svg#font") format("svg"),
        url("../fonts/sentinel-semibold-webfont.otf") format("opentype"),
        url("../fonts/sentinel-semibold-webfont.ttf") format("truetype"),
        url("../fonts/sentinel-semibold-webfont.woff") format("woff");
}

body {
    font-family: "proximanova-regular", Helvetica, Arial, sans-serif;
}

p {
    font-family: "proximanova-regular";
}

h1,
h2,
h3,
b,
strong {
    font-weight: normal;
}

h1 {
    font-size: 2.0625em !important;
    font-family: "proximanova-regular";
}

h2 {
    font-size: 1.85em;
    font-family: "proximanova-regular";
}

h3 {
    font-size: 1.3125em;
    font-family: "proximanova-regular";
}

b,
strong {
    font-family: "proximanova-bold";
}

.search h3,
.diet-selection h3 {
    margin-bottom: 0.4375rem;
}

.search p,
.diet-selection p {
    margin-top: 0.4375rem;
}

wbr:after {
    content: "\00200B";
}

/**
      Default form styling, written for the `/scripts/lib/form-val.js`. You should alter
      this file to your needs, no need to keep this file default.
  **/

form {
    width: 100%;
    padding: 0;
    margin: 0;
}

form div {
    /*
              Being added through js on invalid input. You can easily add styling
              for on error for everything you place within the div of the input.
              It should only apply on fields that are not required.
          */
}

form div label {
    display: block;
}

form div input,
form div textarea {
    outline: none;
    border: 2px solid grey;
    -webkit-appearance: none;
    -moz-appearance: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

form div textarea {
    resize: vertical;
}

form div .radio-buttons span {
    display: block;
}

form div.error input:not([notrequired]),
form div.error textarea:not([notrequired]) {
    border: 2px solid red;
}

form button {
    border: none;
    -webkit-transition: all 0.2s ease;
    -moz-transition: all 0.2s ease;
    -ms-transition: all 0.2s ease;
    -o-transition: all 0.2s ease;
    transition: all 0.2s ease;
}

form button:disabled {
    color: white;
    background-color: rgba(0, 0, 0, 0.2);
}

form button:disabled:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

form .form__error-wrapper {
    display: none;
}

::-ms-clear {
    display: none;
}

/*
      This template is first being rendered as '_template.less' with the right
      developer in the background-image property, and is then being used to
      render the right '_icons.less' file within the '/less/' folder.
  */

body:after {
    position: absolute;
    width: 0;
    height: 0;
    overflow: hidden;
    z-index: -1;
    content: url("../images/icons/white/pepsico---pepsico-product-info-.svg")
        url("../images/icons/grey/pepsico---pepsico-product-info-.svg")
        url("../images/icons/medium-grey/pepsico---pepsico-product-info-.svg");
}

.icon {
    display: inline-block;
}

.icon:before {
    display: inline-block;
    content: "";
    background-image: url("../images/icons/white/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/white/pepsico---pepsico-product-info-.svg");
    -webkit-transition: background-image 0.2s ease;
    -moz-transition: background-image 0.2s ease;
    -ms-transition: background-image 0.2s ease;
    -o-transition: background-image 0.2s ease;
    transition: background-image 0.2s ease;
}

.icon.arrow.back:before {
    width: 8px;
    height: 13px;
    background-position: -10px -10px;
}

.icon.arrow.down:before {
    width: 12px;
    height: 7px;
    background-position: -38px -43px;
}

.icon.arrow.up:before {
    width: 12px;
    height: 7px;
    background-position: -70px -70px;
}

.icon.check:before {
    width: 9px;
    height: 7px;
    background-position: -102px -97px;
}

.icon.cross:before {
    width: 8px;
    height: 8px;
    background-position: -131px -124px;
}

.icon.developer:before {
    width: 25px;
    height: 24px;
    background-position: -159px -152px;
}

.icon.download:before {
    width: 24px;
    height: 24px;
    background-position: -204px -196px;
}

.icon.external:before {
    width: 15px;
    height: 15px;
    background-position: -248px -240px;
}

.icon.hamburger:before {
    width: 30px;
    height: 20.909999999999997px;
    background-position: -283px -275px;
}

.icon.list:before {
    width: 14px;
    height: 10px;
    background-position: -333px -316px;
}

.icon.list.add:before {
    width: 19px;
    height: 16px;
    background-position: -367px -346px;
}

.icon.print:before {
    width: 24px;
    height: 22px;
    background-position: -406px -382px;
}

.icon.reset-cross:before {
    width: 8px;
    height: 8px;
    background-position: -450px -424px;
}

/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */

/**
   * 1. Set default font family to sans-serif.
   * 2. Prevent iOS and IE text size adjust after device orientation change,
   *    without disabling user zoom.
   */

html {
    font-family: sans-serif;
    /* 1 */
    -ms-text-size-adjust: 100%;
    /* 2 */
    -webkit-text-size-adjust: 100%;
    /* 2 */
}

/**
   * Remove default margin.
   */

body {
    margin: 0;
}

/* HTML5 display definitions
     ========================================================================== */

/**
   * Correct `block` display not defined for any HTML5 element in IE 8/9.
   * Correct `block` display not defined for `details` or `summary` in IE 10/11
   * and Firefox.
   * Correct `block` display not defined for `main` in IE 11.
   */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
    display: block;
}

/**
   * 1. Correct `inline-block` display not defined in IE 8/9.
   * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
   */

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

/**
   * Prevent modern browsers from displaying `audio` without controls.
   * Remove excess height in iOS 5 devices.
   */

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

/**
   * Address `[hidden]` styling not present in IE 8/9/10.
   * Hide the `template` element in IE 8/9/10/11, Safari, and Firefox < 22.
   */

[hidden],
template {
    display: none;
}

/* Links
     ========================================================================== */

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

a {
    background-color: transparent;
}

/**
   * Improve readability of focused elements when they are also in an
   * active/hover state.
   */

a:active,
a:hover {
    outline: 0;
}

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

/**
   * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
   */

abbr[title] {
    border-bottom: 1px dotted;
}

/**
   * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
   */

b,
strong {
    font-weight: bold;
}

/**
   * Address styling not present in Safari and Chrome.
   */

dfn {
    font-style: italic;
}

/**
   * Address variable `h1` font-size and margin within `section` and `article`
   * contexts in Firefox 4+, Safari, and Chrome.
   */

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

/**
   * Address styling not present in IE 8/9.
   */

mark {
    background: #ff0;
    color: #000;
}

/**
   * Address inconsistent and variable font size in all browsers.
   */

small {
    font-size: 80%;
}

/**
   * Prevent `sub` and `sup` affecting `line-height` in all browsers.
   */

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}

sup {
    top: -0.5em;
}

sub {
    bottom: -0.25em;
}

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

/**
   * Remove border when inside `a` element in IE 8/9/10.
   */

img {
    border: 0;
}

/**
   * Correct overflow not hidden in IE 9/10/11.
   */

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

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

/**
   * Address margin not present in IE 8/9 and Safari.
   */

figure {
    margin: 1em 40px;
}

/**
   * Address differences between Firefox and other browsers.
   */

hr {
    box-sizing: content-box;
    height: 0;
}

/**
   * Contain overflow in all browsers.
   */

pre {
    overflow: auto;
}

/**
   * Address odd `em`-unit font size rendering in all browsers.
   */

code,
kbd,
pre,
samp {
    font-family: monospace, monospace;
    font-size: 1em;
}

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

/**
   * Known limitation: by default, Chrome and Safari on OS X allow very limited
   * styling of `select`, unless a `border` property is set.
   */

/**
   * 1. Correct color not being inherited.
   *    Known issue: affects color of disabled elements.
   * 2. Correct font properties not being inherited.
   * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
   */

button,
input,
optgroup,
select,
textarea {
    color: inherit;
    /* 1 */
    font: inherit;
    /* 2 */
    margin: 0;
    /* 3 */
}

/**
   * Address `overflow` set to `hidden` in IE 8/9/10/11.
   */

button {
    overflow: visible;
}

/**
   * Address inconsistent `text-transform` inheritance for `button` and `select`.
   * All other form control elements do not inherit `text-transform` values.
   * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
   * Correct `select` style inheritance in Firefox.
   */

button,
select {
    text-transform: none;
}

/**
   * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
   *    and `video` controls.
   * 2. Correct inability to style clickable `input` types in iOS.
   * 3. Improve usability and consistency of cursor style between image-type
   *    `input` and others.
   */

button,
  html input[type="button"],
  /* 1 */
  input[type="reset"],
  input[type="submit"] {
    -webkit-appearance: button;
    /* 2 */
    cursor: pointer;
    /* 3 */
}

/**
   * Re-set default cursor for disabled elements.
   */

button[disabled],
html input[disabled] {
    cursor: default;
}

/**
   * Remove inner padding and border in Firefox 4+.
   */

button::-moz-focus-inner,
input::-moz-focus-inner {
    border: 0;
    padding: 0;
}

/**
   * Address Firefox 4+ setting `line-height` on `input` using `!important` in
   * the UA stylesheet.
   */

input {
    line-height: normal;
}

/**
   * It's recommended that you don't attempt to style these elements.
   * Firefox's implementation doesn't respect box-sizing, padding, or width.
   *
   * 1. Address box sizing set to `content-box` in IE 8/9/10.
   * 2. Remove excess padding in IE 8/9/10.
   */

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

/**
   * Fix the cursor style for Chrome's increment/decrement buttons. For certain
   * `font-size` values of the `input`, it causes the cursor style of the
   * decrement button to change from `default` to `text`.
   */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
    height: auto;
}

/**
   * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
   * 2. Address `box-sizing` set to `border-box` in Safari and Chrome.
   */

input[type="search"] {
    -webkit-appearance: textfield;
    /* 1 */
    box-sizing: content-box;
    /* 2 */
}

/**
   * Remove inner padding and search cancel button in Safari and Chrome on OS X.
   * Safari (but not Chrome) clips the cancel button when the search input has
   * padding (and `textfield` appearance).
   */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
    -webkit-appearance: none;
}

/**
   * Define consistent border, margin, and padding.
   */

fieldset {
    border: 1px solid #c0c0c0;
    margin: 0 2px;
    padding: 0.35em 0.625em 0.75em;
}

/**
   * 1. Correct `color` not being inherited in IE 8/9/10/11.
   * 2. Remove padding so people aren't caught out if they zero out fieldsets.
   */

legend {
    border: 0;
    /* 1 */
    padding: 0;
    /* 2 */
}

/**
   * Remove default vertical scrollbar in IE 8/9/10/11.
   */

textarea {
    overflow: auto;
}

/**
   * Don't inherit the `font-weight` (applied by a rule above).
   * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
   */

optgroup {
    font-weight: bold;
}

/* Tables
     ========================================================================== */

/**
   * Remove most spacing between table cells.
   */

table {
    border-collapse: collapse;
    border-spacing: 0;
}

td,
th {
    padding: 0;
}

/**
      We are only using the grid from Materialize CSS.
      > This file will first get piped through the SASS compiler. The result will be written to
      the less/vendors, so it will be rendered within the eventual styling file.
  **/

.container {
    margin: 0 auto;
    max-width: 1280px;
    width: 90%;
}

.container .row {
    margin-left: -0.75rem;
    margin-right: -0.75rem;
}

.section {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.section.no-pad {
    padding: 0;
}

.section.no-pad-bot {
    padding-bottom: 0;
}

.section.no-pad-top {
    padding-top: 0;
}

.row {
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 20px;
}

.row:after {
    content: "";
    display: table;
    clear: both;
}

.row .col {
    float: left;
    box-sizing: border-box;
    padding: 0 0.75rem;
}

.row .col[class*="push-"],
.row .col[class*="pull-"] {
    position: relative;
}

.row .col.s1 {
    width: 8.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s2 {
    width: 16.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s3 {
    width: 25%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s4 {
    width: 33.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s5 {
    width: 41.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s6 {
    width: 50%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s7 {
    width: 58.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s8 {
    width: 66.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s9 {
    width: 75%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s10 {
    width: 83.33333%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s11 {
    width: 91.66667%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.s12 {
    width: 100%;
    margin-left: auto;
    left: auto;
    right: auto;
}

.row .col.offset-s1 {
    margin-left: 8.33333%;
}

.row .col.pull-s1 {
    right: 8.33333%;
}

.row .col.push-s1 {
    left: 8.33333%;
}

.row .col.offset-s2 {
    margin-left: 16.66667%;
}

.row .col.pull-s2 {
    right: 16.66667%;
}

.row .col.push-s2 {
    left: 16.66667%;
}

.row .col.offset-s3 {
    margin-left: 25%;
}

.row .col.pull-s3 {
    right: 25%;
}

.row .col.push-s3 {
    left: 25%;
}

.row .col.offset-s4 {
    margin-left: 33.33333%;
}

.row .col.pull-s4 {
    right: 33.33333%;
}

.row .col.push-s4 {
    left: 33.33333%;
}

.row .col.offset-s5 {
    margin-left: 41.66667%;
}

.row .col.pull-s5 {
    right: 41.66667%;
}

.row .col.push-s5 {
    left: 41.66667%;
}

.row .col.offset-s6 {
    margin-left: 50%;
}

.row .col.pull-s6 {
    right: 50%;
}

.row .col.push-s6 {
    left: 50%;
}

.row .col.offset-s7 {
    margin-left: 58.33333%;
}

.row .col.pull-s7 {
    right: 58.33333%;
}

.row .col.push-s7 {
    left: 58.33333%;
}

.row .col.offset-s8 {
    margin-left: 66.66667%;
}

.row .col.pull-s8 {
    right: 66.66667%;
}

.row .col.push-s8 {
    left: 66.66667%;
}

.row .col.offset-s9 {
    margin-left: 75%;
}

.row .col.pull-s9 {
    right: 75%;
}

.row .col.push-s9 {
    left: 75%;
}

.row .col.offset-s10 {
    margin-left: 83.33333%;
}

.row .col.pull-s10 {
    right: 83.33333%;
}

.row .col.push-s10 {
    left: 83.33333%;
}

.row .col.offset-s11 {
    margin-left: 91.66667%;
}

.row .col.pull-s11 {
    right: 91.66667%;
}

.row .col.push-s11 {
    left: 91.66667%;
}

.row .col.offset-s12 {
    margin-left: 100%;
}

.row .col.pull-s12 {
    right: 100%;
}

.row .col.push-s12 {
    left: 100%;
}

html,
*,
*:before,
*:after {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* html[lang='nl-NL'] .warning-statement__nl {
    display: none;
  } */

html[lang="nl-BE"] .warning-statement__fr {
    display: none;
}

html[lang="nl-BE"] .warning-statement__top.be .warning-statement__fr,
html[lang="nl-BE"] .warning-statement__top.be .warning-statement__nl {
    display: block;
}

html[lang="fr-BE"] .warning-statement__nl {
    display: none;
}

html[lang="fr-BE"] .warning-statement__top.be .warning-statement__fr,
html[lang="fr-BE"] .warning-statement__top.be .warning-statement__nl {
    display: block;
}

html[lang="nl-NL"] .warning-statement__fr {
    display: none;
}

html[lang="nl-NL"] #productsImg {
    content: url("source/images/layout/partials/hero/hero-products-nl.html");
}

html[lang="nl-BE"] #productsImg {
    content: url("source/images/layout/partials/hero/hero-products-be.html");
}

html[lang="fr-BE"] #productsImg {
    content: url("source/images/layout/partials/hero/hero-products-be.html");
}

body {
    margin: 0;
    padding: 0;
}

.clear {
    clear: both;
    width: 100%;
    height: 1px;
}

.content {
    min-height: calc(100vh - 65px);
}

.content.animationActive {
    min-height: calc(150vh - 65px);
}

.divider {
    width: 100%;
    height: 1px;
    background-color: #efefef;
    margin-bottom: 2rem;
}

em {
    font-style: normal;
}

.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.5s;
}

.fade-enter,
.fade-leave-to {
    opacity: 0;
}

@-webkit-keyframes rotating {
    /* Safari and Chrome */
    from {
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

@keyframes rotating {
    from {
        -ms-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -webkit-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }

    to {
        -ms-transform: rotate(360deg);
        -moz-transform: rotate(360deg);
        -webkit-transform: rotate(360deg);
        -o-transform: rotate(360deg);
        transform: rotate(360deg);
    }
}

.rotating {
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

/**
      Buttons
  **/

button,
.button {
    cursor: pointer;
    display: inline-block;
    min-width: 10rem;
    padding: 0.9375rem 2.8125rem;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    font-family: "proximanova-bold";
    font-weight: normal;
    text-transform: uppercase;
    font-size: 0.75em;
    letter-spacing: 0.0575rem;
    line-height: 100%;
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    color: #ffffff;
    text-align: center;
    text-decoration: none;
    background-color: #285dab;
    -webkit-transition: background-color 0.1s ease;
    -moz-transition: background-color 0.1s ease;
    -ms-transition: background-color 0.1s ease;
    -o-transition: background-color 0.1s ease;
    transition: background-color 0.1s ease;
}

button--plain,
.button--plain {
    font-family: "proximanova-regular";
    font-weight: normal;
    font-size: 0.875em;
    text-transform: initial;
    letter-spacing: initial;
    padding: 0.625rem 1.25rem;
}

button:disabled,
.button:disabled {
    opacity: 0.5;
}

button:not(:disabled):hover,
.button:not(:disabled):hover {
    text-decoration: none;
    background-color: #24549a;
}

button--active:after,
.button--active:after {
    content: "";
    width: 10px;
    height: 10px;
    margin-top: -10px;
    display: block;
    top: 25px;
    left: calc(-12px + 50%);
    position: relative;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

button--blue,
.button--blue {
    background-color: #285dab;
}

button--blue:not(:disabled):hover,
.button--blue:not(:disabled):hover {
    background-color: #24549a;
}

.active_button-blue::after {
    border-top: 10px solid #24549a;
    content: "";
    width: 10px;
    height: 10px;
    margin-top: -10px;
    display: block;
    top: 25px;
    left: calc(-12px + 50%);
    position: relative;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
}

button--orange,
.button--orange {
    background-color: #eb7b30;
}

button--orange:not(:disabled):hover,
.button--orange:not(:disabled):hover {
    background-color: #e96f1d;
}

.active_button-orange:after,
.active_button-orange:after {
    border-top: 10px solid #eb7b30;
}

.active_button:hover:after,
.active_button:hover:after {
    border-top: 10px solid #e96f1d;
}

button--yellow,
.button--yellow {
    background-color: #f8ac11;
}

button--yellow:not(:disabled):hover,
.button--yellow:not(:disabled):hover {
    background-color: #eea207;
}

button--white,
.button--white {
    background-color: #ffffff;
    color: #757575;
    border: 1px solid #979797;
}

button--white:not(:disabled):hover,
.button--white:not(:disabled):hover {
    background-color: #fafafa;
}

button.loading,
.button.loading {
    background-image: url(../images/layout/button-loader.svg);
    background-repeat: no-repeat;
    background-position: calc(100% - 14px) center;
    pointer-events: none !important;
    background-color: #f9bd43 !important;
}

.vue-select {
    display: inline-block;
    position: relative;
    overflow: hidden;
    vertical-align: top;
}

.vue-select:after {
    content: "";
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    background-image: url(../images/layout/elements/selects/arrow-down.svg);
    right: 15px;
    top: 19px;
    width: 12px;
    height: 7px;
}

.vue-select__open {
    overflow: visible;
}

.vue-select__open .vue-select__default {
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
}

.vue-select__open:after {
    background-image: url(../images/layout/elements/selects/arrow-up.svg);
}

.vue-select__options {
    position: absolute;
    background-color: #fff;
    z-index: 99;
    border: 1px solid #cdcdcd;
    border-width: 0 1px 1px 1px;
    -webkit-border-radius: 0 0 3px 3px;
    -moz-border-radius: 0 0 3px 3px;
    -ms-border-radius: 0 0 3px 3px;
    border-radius: 0 0 3px 3px;
    max-height: 250px;
    overflow-y: auto;
    top: 100%;
    left: 0;
    right: 0;
}

.vue-select__default {
    background-color: #ffffff;
    border: 1px solid #cdcdcd;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
}

.vue-select__option,
.vue-select__default,
.vue-select .is-selected {
    cursor: pointer;
    -webkit-transition: background-color 0.1s ease-out;
    -moz-transition: background-color 0.1s ease-out;
    -ms-transition: background-color 0.1s ease-out;
    -o-transition: background-color 0.1s ease-out;
    transition: background-color 0.1s ease-out;
    text-align: left;
    padding: 0.6rem 2rem 0.6rem 0.8rem;
}

.vue-select .is-selected {
    background-color: rgba(216, 216, 216, 0.3);
}

.vue-select__option:hover {
    background-color: rgba(216, 216, 216, 0.2);
    color: black;
}

.vue-notify {
    position: fixed;
    text-align: center;
    background-color: #285dab;
    color: white;
    width: 100%;
    padding: 0 1rem;
    height: 3rem;
    bottom: -3.2rem;
    left: 0;
    line-height: 3rem;
    vertical-align: middle;
    -webkit-transition: bottom 0.3s ease-out;
    -moz-transition: bottom 0.3s ease-out;
    -ms-transition: bottom 0.3s ease-out;
    -o-transition: bottom 0.3s ease-out;
    transition: bottom 0.3s ease-out;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
}

.vue-notify--active {
    bottom: 0;
}

/**
      Diet selection
  **/

.symbol {
    display: block;
    margin-bottom: -11px;
    width: 37px;
    height: 37px;
    background-position: top center;
    background-size: 37px 37px;
    background-repeat: no-repeat;
}

.symbol--gluten,
.symbol.AW {
    background-image: url("../images/layout/elements/diet-selection/allergens/gluten.svg");
    color: #ba9649;
}

.symbol--milk,
.symbol.AM {
    background-image: url("../images/layout/elements/diet-selection/allergens/melk.svg");
    color: #70c6ef;
}

.symbol--egg,
.symbol.AE {
    background-image: url("../images/layout/elements/diet-selection/allergens/ei.svg");
    color: #f8942a;
}

.symbol--peanuts,
.symbol.AP {
    background-image: url("../images/layout/elements/diet-selection/allergens/pinda.svg");
    color: #cd6b3f;
}

.symbol--nuts,
.symbol.AN {
    background-image: url("../images/layout/elements/diet-selection/allergens/noten.svg");
    color: #845330;
}

.symbol--sesame,
.symbol.AS {
    background-image: url("../images/layout/elements/diet-selection/allergens/sesam.svg");
    color: #dab06e;
}

.symbol--mustard,
.symbol.BM {
    background-image: url("../images/layout/elements/diet-selection/allergens/mosterd.svg");
    color: #d88d2b;
}

.symbol--soja,
.symbol.AY {
    background-image: url("../images/layout/elements/diet-selection/allergens/soja.svg");
    color: #77aa41;
}

.symbol--celery,
.symbol.BC {
    background-image: url("../images/layout/elements/diet-selection/allergens/selderij.svg");
    color: #229e66;
}

.symbol--lupine,
.symbol.NL {
    background-image: url("../images/layout/elements/diet-selection/allergens/lupine.svg");
    color: #c17291;
}

.symbol--shellfish,
.symbol.AC {
    background-image: url("../images/layout/elements/diet-selection/allergens/schaaldieren.svg");
    color: #e42c5e;
}

.symbol--molluscs,
.symbol.UM {
    background-image: url("../images/layout/elements/diet-selection/allergens/weekdieren.svg");
    color: #a19388;
}

.symbol--fish,
.symbol.AF {
    background-image: url("../images/layout/elements/diet-selection/allergens/vis.svg");
    color: #2484c6;
}

.symbol--sulphite,
.symbol.AU {
    background-image: url("../images/layout/elements/diet-selection/allergens/zwavel.svg");
    color: #8564a4;
}

.symbol--vegetarian {
    background-image: url("../images/layout/elements/diet-selection/diet/vegetariers.svg");
    color: #f8952a;
}

.symbol--vegan {
    background-image: url("../images/layout/elements/diet-selection/diet/veganisten.svg");
    color: #fbd352;
}

.symbol--alcohol {
    background-image: url("../images/layout/elements/diet-selection/diet/alcohol.svg");
    color: #c17291;
}

.diet-selection {
    max-width: 735px;
    margin: 0 auto;
}

.diet-selection h1,
.diet-selection h2,
.diet-selection h3,
.diet-selection p {
    text-align: center;
    color: #4a4a4a;
}

.diet-selection p {
    margin-bottom: 2.5rem;
}

.diet-selection a {
    color: #4a4a4a;
    display: inline-block;
    position: relative;
    text-decoration: none;
}

.diet-selection a:after {
    content: "";
    position: absolute;
    left: 0;
    display: inline-block;
    height: 1em;
    width: 100%;
    border-bottom: 1px solid;
    margin-top: 4px;
}

.diet-selection span.button {
    width: 100%;
    color: #ffffff;
    opacity: 0.3;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
    pointer-events: none;
}

.diet-selection span.button:after {
    border-bottom: none;
}

.diet-selection span.button--active {
    opacity: 1;
    pointer-events: all;
}

.diet-selection i:before {
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.svg");
}

.diet-selection .checkbox {
    margin: 16px;
    cursor: pointer;
    display: inline-block;
    width: 1.25rem;
    height: 1.25rem;
    padding-left: 0.05rem;
    background-color: #fff;
    border: 1px solid rgba(0, 0, 0, 0.15);
    text-align: center;
    transition: all 0.2s ease;
}

.diet-selection .checkbox i {
    -webkit-transition: opacity 0.1s ease-out;
    -moz-transition: opacity 0.1s ease-out;
    -ms-transition: opacity 0.1s ease-out;
    -o-transition: opacity 0.1s ease-out;
    transition: opacity 0.1s ease-out;
    opacity: 0;
    top: -3px;
    position: relative;
}

.diet-selection__intro {
    text-align: center;
    border-bottom: 1px solid #e8e8e8;
    margin: 2.5rem 0 1.25rem 0;
}

.diet-selection__intro h1 {
    font-size: 1.6875em;
    font-family: "sentinel-semibold";
    color: #757575;
}

.diet-selection__intro p {
    color: #4a4a4a;
    margin-bottom: 1.5625rem;
}

.diet-selection__item {
    cursor: pointer;
    display: inline-block;
    width: 100%;
    margin-bottom: 8px;
    border: 1px solid #e8e8e8;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    -ms-border-radius: 4px;
    border-radius: 4px;
}

.diet-selection__item span {
    font-family: "proximanova-bold";
    color: #757575;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

.diet-selection__item span:nth-child(3) {
    width: 55%;
    vertical-align: middle;
}

.diet-selection__item span:nth-child(2) {
    margin: 0 0.9375rem 0 0;
}

.diet-selection__item--active {
    border: 1px solid #4a4a4a;
}

.diet-selection__item--active .checkbox i {
    opacity: 1;
}

.diet-selection__item--disabled {
    pointer-events: none;
    opacity: 0.2;
}

.diet-selection__diet .diet-selection {
    margin-bottom: 2.5rem;
}

.diet-selection__diet .diet-selection__item .checkbox {
    margin-top: 22px;
    margin-bottom: 22px;
}

.diet-selection__diet .diet-selection__item span:nth-child(3) i.check {
    margin-right: 0.5rem;
}

.diet-selection__diet__reset-selection {
    display: none;
    cursor: pointer;
    text-align: center;
    margin-top: 1rem;
}

.diet-selection__diet__reset-selection-active {
    display: block;
}

.diet-selection__diet__reset-selection span {
    text-decoration: underline;
}

.diet-selection__diet__reset-selection:hover span {
    text-decoration: none;
}

.header {
    position: fixed;
    background-color: #ffffff;
    z-index: 99;
    width: 100%;
    top: 0;
    scroll-behavior: smooth;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.header.language .header__logo {
    margin: 0 calc(50% - 99px);
    height: 2.875rem !important;
}

.header .row {
    margin-bottom: 0;
}

.header .show-for-mobile {
    display: none;
}

.header a {
    text-decoration: none;
    color: #757575;
}

.header i {
    padding-right: 0.625rem;
}

.header i:before {
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.svg");
}

.header__inner {
    padding: 1.46875rem 1.46875rem 1.46875rem 0;
    position: relative;
}

.header__inner:before {
    content: "";
    -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    position: absolute;
    top: 0;
    left: 0;
    height: 4.6875rem;
    z-index: 1;
}

.header__logo {
    height: 1.75rem;
}

.header__logo a {
    position: relative;
    z-index: 999;
}

.header__logo img {
    height: 100%;
}

.header__hamburger {
    float: left;
    height: 4.59375rem;
    padding: 1.46875rem 0.8125rem 1.46875rem 1.25rem;
    margin-top: -1.46875rem;
    z-index: 999;
    position: relative;
}

.header__hamburger i {
    margin-top: 5px;
}

.header__menu {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    -ms-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
}

.header__menu--active {
    max-height: 999px;
}

.header__menu,
.header__submenu {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.header__menu-item {
    background-color: #ffffff;
    border-bottom: 1px solid #dfdfdf;
}

.header__menu-item a {
    display: block;
    padding: 1.75rem 0 1.75rem 1.25rem;
}

.header__menu-item--subnav {
    padding-bottom: 0;
}

.header__menu-item--subnav:before {
    content: "";
    background-image: url(../images/icons/grey/pesico---pepsico-allergenen-online-.html);
    background-image: url(../images/icons/grey/pesico---pepsico-allergenen-online-.svg);
    width: 12px;
    height: 7px;
    background-position: -38px -43px;
    position: relative;
    right: 28px;
    float: right;
    top: 37px;
    overflow: hidden;
    display: block;
}

.header__menu-item--subnav-active:before {
    content: "";
    background-image: url(../images/icons/grey/pesico---pepsico-allergenen-online-.html);
    background-image: url(../images/icons/grey/pesico---pepsico-allergenen-online-.svg);
    width: 12px;
    height: 7px;
    background-position: -38px -43px;
    position: relative;
    right: 28px;
    float: right;
    top: 37px;
    overflow: hidden;
    display: block;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

.header__menu-item--active {
    background-color: #ffc757;
    font-family: "proximanova-semibold";
}

.header__menu-item--active a {
    color: #4a4a4a;
}

.header__submenu {
    max-height: 0;
    overflow: hidden;
    -webkit-transition: max-height 0.5s ease;
    -moz-transition: max-height 0.5s ease;
    -ms-transition: max-height 0.5s ease;
    -o-transition: max-height 0.5s ease;
    transition: max-height 0.5s ease;
}

.header__submenu--active {
    max-height: 999px;
}

.header__submenu-item {
    padding-left: 15px;
    border-bottom: 1px solid #dfdfdf;
}

.header__submenu-item:first-child {
    border-top: 1px solid #dfdfdf;
}

.header__submenu-item:last-child {
    border-bottom: none;
}

.header__language-switch {
    max-height: 4.6875rem;
}

.header__language-switch li:first-child {
    border-top: none;
    font-family: "proximanova-semibold";
}

.header__language-switch .header__submenu-item {
    padding-left: 0;
}

/**
      Hero section
      (for lack of better naming convertion used Hero)
  **/

.hero {
    background: url(../images/layout/partials/hero/hero-background.svg) top
        center / auto 100% no-repeat;
    background-color: #fff5e6;
}

.hero--language {
    background: url(../images/layout/partials/hero/hero-background.svg) top
        center / auto 100% no-repeat !important;
    background-color: #fff5e6 !important;
    height: 100vh;
}

.hero--language:after {
    content: "";
    display: none;
}

.hero--language .hero__inner {
    padding: 0 1.5625rem;
    padding-top: 15%;
}

.hero--language .hero__inner .container {
    margin-top: 0;
}

.hero--language .hero__image img {
    max-width: 100%;
}

.hero--language .hero__intro {
    top: 0;
    margin-top: 0;
    text-align: center;
}

.hero--language .hero__intro h1 {
    margin-bottom: 1.125rem;
}

.hero--language .hero__intro p {
    margin-top: 0;
    margin-bottom: 1.125rem;
}

.hero--language .button {
    width: 50% !important;
}

.hero--language .button:last-child {
    margin-left: 0 !important;
}

.hero--my-list {
    top: -100px;
    background: url(../images/layout/partials/hero/hero-background--my-list.svg)
        top center / auto 100% no-repeat !important;
    margin-bottom: 40px;
}

.hero--my-list:after {
    border-top: 10px solid #0080b9 !important;
}

.hero--my-list .hero .parent {
    position: relative;
}

.hero--my-list .hero .child {
    position: absolute;
}

.hero--my-list .hero__intro {
    top: -9px;
    margin-top: 8vw;
    text-align: center;
}

.hero--my-list .hero__intro h1,
.hero--my-list .hero__intro p {
    color: #ffffff;
}

.hero--my-list .hero__intro h1 {
    margin-bottom: 0px;
}

.hero--my-list .hero__intro p {
    margin-top: 0px;
}

.hero .container {
    margin-top: 4.6875rem;
}

.hero .button {
    width: 95%;
    margin-bottom: 9px;
}

.hero:after {
    content: "";
    width: 0;
    height: 0;
    top: 29px;
    left: calc(50% - 12px);
    position: relative;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid #fff5e6;
}

.hero__intro {
    top: -330px;
    position: relative;
    max-height: 0;
}

.hero__intro.home p {
    max-width: 50%;
}

.hero__image {
    overflow: hidden;
}

.hero__image img {
    overflow: hidden;
    max-width: 378px;
    margin-top: 72px;
    position: relative;
    left: 148px;
}

.hero__inner {
    padding: 19px 0 14px 19px;
}

.hero__inner .col {
    padding: 0;
}

.hero__inner h1 {
    margin-bottom: 1.375rem;
    font-family: "sentinel-semibold";
    font-weight: normal;
    color: #ee8226;
    line-height: 2.375rem;
}

.hero__inner p {
    margin-bottom: 3.125rem;
    font-family: "proximanova-regular";
    font-weight: normal;
    font-size: 1.125em;
    color: #757575;
}

.search {
    max-height: 0;
    overflow: hidden;
    height: auto;
    background-color: #ffc757;
    -webkit-transition: max-height 1s ease-out;
    -moz-transition: max-height 1s ease-out;
    -ms-transition: max-height 1s ease-out;
    -o-transition: max-height 1s ease-out;
    transition: max-height 1s ease-out;
}

.search--active {
    max-height: 999px;
    margin-bottom: 0;
}

.search .container {
    padding-top: 33.3333%;
}

.search .button {
    width: 100%;
    padding: 1.025rem;
}

.search h3,
.search p {
    text-align: center;
}

.search h3 {
    padding-top: 4.5rem;
    color: #4a4a4a;
}

.search p {
    color: #b88029;
    margin-bottom: 22px;
}

.search a,
.search .link {
    display: inline-block;
    color: #4a4a4a;
    margin-top: 1rem;
    cursor: pointer;
    text-decoration: underline;
}

.search__form {
    text-align: center;
    max-width: 735px;
    margin: 0 auto;
}

.search__form label {
    display: none;
}

.search__form input {
    text-align: center;
    padding: 0.75rem;
    width: 100%;
    border: none;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    -webkit-transition: box-shadow 0.1s ease-out;
    -moz-transition: box-shadow 0.1s ease-out;
    -ms-transition: box-shadow 0.1s ease-out;
    -o-transition: box-shadow 0.1s ease-out;
    transition: box-shadow 0.1s ease-out;
    -webkit-transition: background-color 0.1s ease-out;
    -moz-transition: background-color 0.1s ease-out;
    -ms-transition: background-color 0.1s ease-out;
    -o-transition: background-color 0.1s ease-out;
    transition: background-color 0.1s ease-out;
}

.search__form input.empty {
    background-color: #dfdfdf;
}

.search div.left,
.search div.right {
    margin-bottom: 0.6rem;
}

.result__diet__tags__label,
.detail__diet__tags__label {
    color: #a0a0a0;
    display: inline-block;
    margin: 0 1rem 1rem 0;
    font-size: 1.06em;
}

.result__diet__tags__tag,
.detail__diet__tags__tag {
    display: inline-block;
    background-color: #aaaaaa;
    color: #ffffff;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    -ms-border-radius: 3px;
    border-radius: 3px;
    font-size: 0.93em;
    padding: 0.3rem 0.38rem 0.3rem 0.98rem;
    margin: 0 0.375rem 0.5rem 0;
}

.result__diet__tags__tag i,
.detail__diet__tags__tag i {
    cursor: pointer;
    padding: 0 0.5rem 0 0.3rem;
}

.result__diet__tags__tag wbr,
.detail__diet__tags__tag wbr {
    display: none;
}

.result__diet__tags__tag:last-child,
.detail__diet__tags__tag:last-child {
    margin-right: 0;
}

.result__filter__total,
.detail__filter__total {
    color: #4a4a4a;
    display: inline-block;
    font-size: 1.53em;
    margin-bottom: 2rem;
}

.result__filter__total__amount,
.detail__filter__total__amount {
    color: #aaaaaa;
}

.result__filter .vue-select,
.detail__filter .vue-select {
    margin-bottom: 0.625rem;
    display: block;
}

.result__outcome,
.detail__outcome {
    position: relative;
}

.result__outcome:before,
.detail__outcome:before,
.result__outcome:after,
.detail__outcome:after {
    content: "";
    opacity: 0;
    z-index: 1;
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    -webkit-transition: opacity 0.5s ease-out;
    -moz-transition: opacity 0.5s ease-out;
    -ms-transition: opacity 0.5s ease-out;
    -o-transition: opacity 0.5s ease-out;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
}

.result__outcome:after,
.detail__outcome:after {
    z-index: 2;
    left: 0;
    right: 0;
    margin: 0 auto;
    top: 15rem;
    width: 80px;
    height: 80px;
    background-image: url(../images/layout/spinner.svg);
    background-size: 80px 80px;
    background-repeat: no-repeat;
    -webkit-animation: rotating 2s linear infinite;
    -moz-animation: rotating 2s linear infinite;
    -ms-animation: rotating 2s linear infinite;
    -o-animation: rotating 2s linear infinite;
    animation: rotating 2s linear infinite;
}

.result__outcome--loading:before,
.detail__outcome--loading:before,
.result__outcome--loading:after,
.detail__outcome--loading:after {
    pointer-events: all;
}

.result__outcome--loading:before,
.detail__outcome--loading:before {
    background-color: rgba(255, 255, 255, 0.5);
    opacity: 1;
    width: 100%;
    height: 100%;
}

.result__outcome--loading:after,
.detail__outcome--loading:after {
    opacity: 1;
}

.result__outcome__category-label,
.detail__outcome__category-label {
    font-family: "proximanova-bold";
    display: block;
    margin-bottom: 1rem;
}

.result__outcome__category-label.salty,
.detail__outcome__category-label.salty {
    color: #c27900;
}

.result__outcome__category-label.breakfast,
.detail__outcome__category-label.breakfast {
    color: #89c547;
}

.result__outcome__category-label.beverages,
.detail__outcome__category-label.beverages {
    color: #8cd7c6;
}

.result__outcome__category-label__amount,
.detail__outcome__category-label__amount {
    color: #9b9b9b;
}

.result__outcome__products-holder,
.detail__outcome__products-holder {
    text-align: left;
    display: block;
}

.result__outcome__products-holder .row,
.detail__outcome__products-holder .row {
    margin-bottom: 0;
}

.result__outcome__products-holder .product,
.detail__outcome__products-holder .product {
    cursor: pointer;
    box-shadow: 0 0 4px 0 rgba(204, 204, 204, 0.5);
    -webkit-border-radius: 3px 0;
    -moz-border-radius: 3px 0;
    -ms-border-radius: 3px 0;
    border-radius: 3px 0;
    position: relative;
    margin-bottom: 1.25rem;
}

.result__outcome__products-holder .product__label,
.detail__outcome__products-holder .product__label {
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    background-color: #285dab;
    color: #ffffff;
    border-bottom: 2px solid #ffffff;
    padding: 0.625rem 2.5rem 0.625rem 1.25rem;
    background-image: url(../images/layout/elements/product/arrow-right.svg);
    background-repeat: no-repeat;
    background-position-y: center;
    background-position-x: calc(100% - 1.25rem);
    /* background: */
}

.result__outcome__products-holder .product__label.salty,
.detail__outcome__products-holder .product__label.salty {
    border-color: #c27900;
}

.result__outcome__products-holder .product__label.breakfast,
.detail__outcome__products-holder .product__label.breakfast {
    border-color: #89c547;
}

.result__outcome__products-holder .product__label.beverages,
.detail__outcome__products-holder .product__label.beverages {
    border-color: #8cd7c6;
}

.result__outcome__products-holder .product__label__brand,
.detail__outcome__products-holder .product__label__brand,
.result__outcome__products-holder .product__label__category,
.detail__outcome__products-holder .product__label__category {
    display: block;
    white-space: nowrap;
    overflow: hidden;
    -webkit-transform: ellipsis;
    -ms-text-overflow: ellipsis;
    text-overflow: ellipsis;
    line-height: 1.3em;
}

.result__outcome__products-holder .product__label__brand,
.detail__outcome__products-holder .product__label__brand {
    font-family: "proximanova-bold";
    font-size: 0.93em;
}

.result__outcome__products-holder .product__label__category,
.detail__outcome__products-holder .product__label__category {
    font-size: 0.8em;
}

.result__outcome__products-holder .product__image,
.detail__outcome__products-holder .product__image {
    text-align: center;
    padding: 1.25rem;
}

.result__outcome__products-holder .product__image img,
.detail__outcome__products-holder .product__image img {
    display: inline-block;
    max-width: 60%;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

.result__outcome__products-holder .product__image__list-add,
.detail__outcome__products-holder .product__image__list-add,
.result__outcome__products-holder .product__image__list-remove,
.detail__outcome__products-holder .product__image__list-remove {
    position: absolute;
    display: inline-block;
    background-repeat: no-repeat;
    background-size: 20px 17px;
    background-position: center center;
    width: 34px;
    height: 31px;
    right: 0.9375rem;
    bottom: 0.9375rem;
    -webkit-transition: transform 0.1s ease-out;
    -moz-transition: transform 0.1s ease-out;
    -ms-transition: transform 0.1s ease-out;
    -o-transition: transform 0.1s ease-out;
    transition: transform 0.1s ease-out;
}

.result__outcome__products-holder .product__image__list-add:hover,
.detail__outcome__products-holder .product__image__list-add:hover,
.result__outcome__products-holder .product__image__list-remove:hover,
.detail__outcome__products-holder .product__image__list-remove:hover {
    transform: scale(1.1);
}

.result__outcome__products-holder .product__image__list-add,
.detail__outcome__products-holder .product__image__list-add {
    background-image: url(../images/layout/elements/product/list-add-icon.svg);
}

.result__outcome__products-holder .product__image__list-remove,
.detail__outcome__products-holder .product__image__list-remove {
    background-image: url(../images/layout/elements/product/list-remove-icon.svg);
}

.warning-statement {
    background-color: #f3f8fa;
    border-top: 1px solid #e8f2f6;
    text-align: center;
    position: relative;
    margin-top: 150px;
}

.warning-statement .row {
    margin: 0;
}

.warning-statement__top {
    -webkit-transition: top 0.8s ease-out;
    -moz-transition: top 0.8s ease-out;
    -ms-transition: top 0.8s ease-out;
    -o-transition: top 0.8s ease-out;
    transition: top 0.8s ease-out;
    margin-top: 0;
    text-align: left;
    background-color: #f3f8fa;
    z-index: 1000;
    position: fixed;
    width: 100%;
    top: -600px;
    border-bottom: 1px solid #e8f2f6;
    border-top: 1px solid #e8f2f6;
}

.warning-statement__top.active {
    top: 0;
}

.warning-statement__top .row {
    margin: 0;
}

.warning-statement__top p {
    position: relative;
}

.warning-statement__top p span.button {
    float: right;
    display: inline-block;
    margin: 0.3rem 0 0.1rem 1rem;
}

.warning-statement__top.be .warning-statement__button-holder {
    padding: 0 1rem 1rem;
    text-align: center;
}

/**
      Footer
  **/

footer {
    width: 70%;
    margin: 0 auto;
    max-width: 1280px;
}

footer .footer__scroll-to-top {
    text-align: center;
    display: block;
    padding-bottom: 66px;
}

footer .footer__scroll-to-top i {
    display: block;
    clear: both;
}

footer .footer__scroll-to-top span {
    font-family: "proximanova-bold";
    color: #757575;
    letter-spacing: 1px;
    text-transform: uppercase;
    display: inline-block;
}

footer .footer__nav {
    display: none;
}

footer .footer__nav ul {
    margin: 0;
    padding: 0;
}

footer .footer__nav ul li {
    display: inline-block;
    border-left: 1px solid #dfdfdf;
}

footer .footer__nav ul li:last-child {
    border-right: 1px solid #dfdfdf;
}

footer .footer__nav ul li a {
    color: #757575;
    text-decoration: none;
    display: block;
    padding: 0.6875rem 1.25rem;
}

footer .footer__nav ul i:before {
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.svg");
}

footer .footer__subnav {
    display: none;
}

.cookie-disclaimer-holder {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 9999;
    overflow: hidden;
    width: 0;
    height: 0;
    opacity: 0;
    -webkit-transition: opacity 0.2s ease-out;
    -moz-transition: opacity 0.2s ease-out;
    -ms-transition: opacity 0.2s ease-out;
    -o-transition: opacity 0.2s ease-out;
    transition: opacity 0.2s ease-out;
}

.cookie-disclaimer-holder.show {
    opacity: 1;
    width: 100%;
    height: 100%;
}

.cookie-disclaimer-holder .cookie-disclaimer {
    position: absolute;
    top: 50%;
    -moz-transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -o-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
    background-color: #f3f8fa;
    border: 1px solid #e8f2f6;
    text-align: center;
    max-width: 90%;
    width: 300px;
    padding: 0 1rem 1rem;
    margin: 0 auto;
    left: 0;
    right: 0;
}

.cookie-disclaimer-holder .cookie-disclaimer__info {
    margin: 1rem 0;
}

.cookie-disclaimer-holder .cookie-disclaimer__info a {
    color: #4a4a4a;
}

.cookie-disclaimer-holder .cookie-disclaimer__info a:hover {
    text-decoration: none;
}

.my-list .hide-for-small {
    display: none !important;
}

.my-list .show-for-small {
    display: block;
}

.my-list__top i,
.my-list__bottom i {
    padding-right: 0.5rem;
}

.my-list__top i:before,
.my-list__bottom i:before {
    background-image: url("../images/icons/medium-grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/medium-grey/pepsico---pepsico-product-info-.svg");
}

.my-list__top span,
.my-list__bottom span {
    color: #979797;
}

.my-list__top span.print-page,
.my-list__bottom span.print-page {
    cursor: pointer;
}

.my-list__top,
.my-list__bottom {
    text-align: center;
}

.my-list__top .icon:before,
.my-list__bottom .icon:before {
    margin-bottom: -6px;
}

.my-list__top span,
.my-list__bottom span {
    margin-top: 1em;
    margin-right: 0rem;
}

.my-list__selection .diet-selection__item {
    padding: 8px;
}

.my-list .product-table {
    width: 100%;
}

.my-list .product-table .spacer {
    height: 0.4375rem;
}

.my-list .product-table__head {
    font-size: 0.875em !important;
    font-weight: normal;
    color: #979797;
}

.my-list .product-table__head th {
    text-align: left;
}

.my-list .product-table__product {
    border: 1px solid #dfdfdf;
}

.my-list .product-table__product td {
    display: inline-block;
    width: 100%;
    border-right: 1px solid #dfdfdf;
    padding: 0 0.9375rem 0.9375rem 0.9375rem;
}

.my-list .product-table__product td:nth-child(2) {
    font-weight: bold;
    font-size: 1em;
    padding-top: 0.9375rem;
}

.my-list .product-table__product td:nth-child(3) {
    padding-bottom: 0;
}

.my-list .product-table__product td .result__diet__tags__tag {
    cursor: pointer;
    padding-right: 1rem;
    background-color: #e8e8e8;
    color: #757575;
}

.my-list .product-table__product td:last-child i:before {
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.svg");
}

.my-list .product-table__category th {
    font-size: 1.4375em;
    font-weight: normal;
    text-align: left;
    padding-bottom: 1.25rem;
    padding-top: 3.125rem;
}

.my-list .product-table__category i {
    float: right;
}

.my-list .product-table__category i:before {
    background-image: url("../images/icons/medium-grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/medium-grey/pepsico---pepsico-product-info-.svg");
}

.my-list .product-table__category.salty {
    border-bottom: 3px solid #c27900;
}

.my-list .product-table__category.breakfast {
    border-bottom: 3px solid #89c547;
}

.my-list .product-table__category.beverages {
    border-bottom: 3px solid #8cd7c6;
}

.product-detail {
    margin-top: 6.875rem;
}

.product-detail.container {
    width: 85%;
}

.product-detail .button {
    width: 100%;
    margin-bottom: 30px;
    font-size: 14px;
}

.product-detail .button i {
    float: left;
    padding-right: 0.625rem;
}

.product-detail .button i:before {
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.svg");
}

.product-detail .detail__holder {
    padding: 10px 15px;
    background-color: #285dab;
    color: #ffffff;
    -webkit-border-radius: 3px 3px 0 0;
    -moz-border-radius: 3px 3px 0 0;
    -ms-border-radius: 3px 3px 0 0;
    border-radius: 3px 3px 0 0;
    font-size: 14px;
    font-family: "proximanova-bold";
    font-weight: normal;
}

.product-detail .detail__header {
    margin-top: 30px;
    margin-bottom: 20px;
    color: #4a4a4a;
}

.product-detail .detail__header h1 {
    font-size: 23px !important;
    margin-bottom: 9px;
}

.product-detail .detail__header p {
    font-size: 16px !important;
    margin-top: 0;
}

.product-detail .detail__added {
    margin-bottom: 20px;
    font-size: 14px;
    color: #757575;
    width: 100%;
}

.product-detail .detail__added span {
    top: -4px;
    position: relative;
}

.product-detail .detail__image {
    text-align: center;
    border: 1px solid #dfdfdf;
    margin-right: 40px;
    margin-bottom: 30px;
    padding: 20px 20px;
}

.product-detail .detail__image img {
    max-width: 100%;
}

.product-detail .detail__description,
.product-detail .detail__content {
    color: #4a4a4a;
    margin-bottom: 30px;
}

.product-detail .detail__description p,
.product-detail .detail__content p {
    margin-top: 0;
}

.product-detail .detail__allergens {
    color: #4a4a4a;
}

.product-detail .detail__allergens p {
    margin-top: 0;
}

.product-detail .detail__allergens .diet-selection__item {
    border: none;
    margin-bottom: 30px;
}

.product-detail .detail__allergens .diet-selection__item span {
    display: block;
    font-size: 12px;
    hyphens: auto;
}

.product-detail .detail__allergens .diet-selection__item .symbol {
    margin-bottom: 5px;
    width: 52px;
    height: 52px;
    background-size: 52px 52px;
}

.product-detail .detail__allergens .diet-selection__item:last-child {
    margin-bottom: 45px;
}

.product-detail .detail__table {
    width: 100%;
    color: #4a4a4a;
}

.product-detail .detail__table thead > tr > th {
    text-align: left;
    padding-bottom: 25px;
}

.product-detail .detail__table tbody tr {
    vertical-align: top;
}

.product-detail .detail__table tbody td:first-child {
    width: 79%;
}

.product-detail .detail__table tbody .tabbed {
    color: #757575;
    padding-left: 15px;
    font-size: 13px;
}

.product-detail .detail__main {
    padding-top: 0;
    padding-bottom: 30px;
    padding-left: 15px;
    padding-right: 15px;
    margin-bottom: 30px;
    border: 1px solid #dfdfdf;
}

.product-detail .detail__main i:before {
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.html");
    background-image: url("../images/icons/grey/pepsico---pepsico-product-info-.svg");
}

.product-detail .detail__main strong,
.product-detail .detail__main p {
    font-size: 14px;
}

.no-results {
    background-color: #f3f8fa;
    border: 1px solid #e8f2f6;
    text-align: center;
    min-height: 300px;
    position: relative;
}

.no-results h1,
.no-results h2,
.no-results h3,
.no-results p {
    color: #4a4a4a;
}

.no-results h1 {
    font-size: 1.6875em;
    font-family: "sentinel-semibold";
    color: #757575;
}

.no-results__inner {
    position: absolute;
    min-width: 200px;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.text-page {
    padding-top: 6rem;
    padding-bottom: 6rem;
}

.text-page h2 {
    font-size: 1.5em;
}

.text-page p {
    margin-bottom: 2rem;
}

.text-page ul,
.text-page ol {
    list-style-position: inside;
    padding-left: 0;
}

.text-page ul li,
.text-page ol li {
    margin-bottom: 0.5rem;
}

#popup {
    -webkit-border-radius: 8px;
    border-radius: 8px;
    -webkit-box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
    box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.5);
    text-align: left;
    font: "Arial", "Helvetica Neue", Helvetica, sans-serif;
    color: #333333;
    font-size: 14px;
}

#popup-sluiten {
    background: url(../images/layout/bg_popup.html) no-repeat 0 0;
}

@media only screen and (min-width: 601px) {
    .container {
        width: 85%;
    }

    .row .col.m1 {
        width: 8.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m2 {
        width: 16.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m4 {
        width: 33.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m5 {
        width: 41.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m7 {
        width: 58.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m8 {
        width: 66.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m10 {
        width: 83.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m11 {
        width: 91.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.m12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.offset-m1 {
        margin-left: 8.33333%;
    }

    .row .col.pull-m1 {
        right: 8.33333%;
    }

    .row .col.push-m1 {
        left: 8.33333%;
    }

    .row .col.offset-m2 {
        margin-left: 16.66667%;
    }

    .row .col.pull-m2 {
        right: 16.66667%;
    }

    .row .col.push-m2 {
        left: 16.66667%;
    }

    .row .col.offset-m3 {
        margin-left: 25%;
    }

    .row .col.pull-m3 {
        right: 25%;
    }

    .row .col.push-m3 {
        left: 25%;
    }

    .row .col.offset-m4 {
        margin-left: 33.33333%;
    }

    .row .col.pull-m4 {
        right: 33.33333%;
    }

    .row .col.push-m4 {
        left: 33.33333%;
    }

    .row .col.offset-m5 {
        margin-left: 41.66667%;
    }

    .row .col.pull-m5 {
        right: 41.66667%;
    }

    .row .col.push-m5 {
        left: 41.66667%;
    }

    .row .col.offset-m6 {
        margin-left: 50%;
    }

    .row .col.pull-m6 {
        right: 50%;
    }

    .row .col.push-m6 {
        left: 50%;
    }

    .row .col.offset-m7 {
        margin-left: 58.33333%;
    }

    .row .col.pull-m7 {
        right: 58.33333%;
    }

    .row .col.push-m7 {
        left: 58.33333%;
    }

    .row .col.offset-m8 {
        margin-left: 66.66667%;
    }

    .row .col.pull-m8 {
        right: 66.66667%;
    }

    .row .col.push-m8 {
        left: 66.66667%;
    }

    .row .col.offset-m9 {
        margin-left: 75%;
    }

    .row .col.pull-m9 {
        right: 75%;
    }

    .row .col.push-m9 {
        left: 75%;
    }

    .row .col.offset-m10 {
        margin-left: 83.33333%;
    }

    .row .col.pull-m10 {
        right: 83.33333%;
    }

    .row .col.push-m10 {
        left: 83.33333%;
    }

    .row .col.offset-m11 {
        margin-left: 91.66667%;
    }

    .row .col.pull-m11 {
        right: 91.66667%;
    }

    .row .col.push-m11 {
        left: 91.66667%;
    }

    .row .col.offset-m12 {
        margin-left: 100%;
    }

    .row .col.pull-m12 {
        right: 100%;
    }

    .row .col.push-m12 {
        left: 100%;
    }
}

@media all and (min-width: 601px) {
    .symbol {
        width: 52px;
        height: 52px;
        background-size: 52px 52px;
    }

    .diet-selection .col {
        padding-left: 0;
        padding-right: 0;
    }

    .diet-selection span.button {
        width: initial;
        width: 14rem;
    }

    .diet-selection__intro {
        border-bottom: none;
        margin-bottom: 65px;
    }

    .diet-selection__group {
        display: block;
        margin-bottom: 1.25rem;
    }

    .diet-selection__group p {
        display: none;
    }

    .diet-selection__item {
        width: 14.28571429%;
        margin-right: -4px;
        border: none;
        vertical-align: top;
    }

    .diet-selection__item span {
        display: block;
        text-align: center;
        padding: 0 0.5rem 0.9375rem;
        margin: 0;
    }

    .diet-selection__item span:nth-child(3) {
        width: 100%;
        font-size: 0.8em;
        line-height: 1.2em;
        -webkit-transition: color 0.1s ease-out;
        -moz-transition: color 0.1s ease-out;
        -ms-transition: color 0.1s ease-out;
        -o-transition: color 0.1s ease-out;
        transition: color 0.1s ease-out;
    }

    .diet-selection__item span:nth-child(2) {
        margin: 0;
        position: relative;
    }

    .diet-selection__item i {
        margin: 0 auto;
    }

    .diet-selection__item .checkbox {
        display: none;
    }

    .diet-selection__item .symbol:before {
        -webkit-transition: opacity 0.1s ease-out;
        -moz-transition: opacity 0.1s ease-out;
        -ms-transition: opacity 0.1s ease-out;
        -o-transition: opacity 0.1s ease-out;
        transition: opacity 0.1s ease-out;
        opacity: 0;
        content: "";
        background-image: none !important;
        position: absolute;
        border: 2px solid;
        height: 58px !important;
        width: 58px !important;
        border-radius: 50%;
        top: -2px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .diet-selection__item:hover .symbol:before {
        opacity: 0.2;
    }

    .diet-selection__item:hover span:nth-child(3) {
        color: #4a4a4a;
    }

    .diet-selection__item--active .symbol:before {
        opacity: 1 !important;
    }

    .diet-selection__item--active span:nth-child(3) {
        color: #4a4a4a;
    }

    .diet-selection__diet .row {
        text-align: center;
    }

    .diet-selection__diet .col {
        margin-bottom: 3.125rem;
    }

    .diet-selection__diet .diet-selection__item {
        width: 25%;
    }

    .diet-selection__diet .diet-selection__item span:nth-child(3) i {
        margin-right: 0.2rem;
    }

    .diet-selection__diet .diet-selection__item span:nth-child(2) {
        position: relative;
    }

    .diet-selection__diet .diet-selection__item .symbol:before {
        height: 70px !important;
        width: 70px !important;
        top: -8px;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .diet-selection__allergens {
        margin-bottom: 3.125rem;
    }

    .header {
        width: 100%;
    }

    .header__language-switch {
        max-height: 4.6875rem;
        overflow: visible;
        width: 140px;
    }

    .header__language-switch li {
        width: 142px;
    }

    .header__language-switch li:first-child {
        border-top: none;
        font-family: "proximanova-semibold";
    }

    .header__language-switch li:not(.header__submenu-item--active) {
        margin-left: -1px !important;
        display: none;
    }

    .header__language-switch li.header__submenu-item--active a {
        padding-right: 2.4375rem;
    }

    .header__language-switch .header__submenu-item {
        padding-left: 0;
    }

    .header__menu-item--subnav-active li:not(.header__submenu-item--active) {
        display: block;
    }

    .header:before {
        content: "";
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        position: absolute;
        top: 0;
        height: 5.5rem;
        width: 100%;
        z-index: 1;
    }

    .header__logo {
        height: 2.5625rem;
    }

    .header__hamburger {
        display: none;
    }

    .header__menu {
        max-height: 999px;
        float: right;
    }

    .header__inner {
        padding-top: 1.125rem;
    }

    .header__inner:before {
        content: "";
        -webkit-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        -moz-box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        box-shadow: 0 0 0 rgba(0, 0, 0, 0);
        width: auto;
    }

    .header__menu-item {
        font-family: "proximanova-semibold";
        border-left: 1px solid #dfdfdf;
        border-bottom: none;
        float: left;
    }

    .header__menu-item:nth-child(4) {
        border-right: 1px solid #dfdfdf;
    }

    .header__menu-item a {
        position: relative;
        z-index: 999;
        padding: 2.8125rem 1.4375rem 1.25rem 1.4375rem;
    }

    .header__menu-item--active {
        background-color: #ffffff;
    }

    .header__menu-item--active a {
        color: #0080b9;
    }

    .header__menu-item--subnav:before {
        right: 17px;
        top: 52px;
    }

    .header__menu-item--subnav-active:before {
        right: 17px;
        top: 52px;
    }

    .header__submenu {
        max-height: 88px;
    }

    .search {
        height: calc(20.75rem + 5vh);
        margin-bottom: 9.375rem;
    }

    .search .container {
        padding-top: 70px;
    }

    .search__form input {
        text-align: left;
    }

    .search__form input.empty {
        background-color: #ffffff;
        -moz-box-shadow: inset 0 0 2px #000000;
        -webkit-box-shadow: inset 0 0 2px #000000;
        box-shadow: inset 0 0 2px #000000;
    }

    .search div.left,
    .search div.right {
        float: left;
        width: 50%;
    }

    .search div.left {
        width: calc(100% - 200px);
        padding-right: 1rem;
    }

    .search div.left input {
        width: 100%;
    }

    .search div.right {
        width: 200px;
    }

    .search div.right span {
        width: 100%;
    }

    .warning-statement__top.be p {
        width: 50%;
        float: left;
    }

    .warning-statement__top.be p:first-child {
        padding-right: 1rem;
    }

    .warning-statement__top.be .warning-statement__button-holder {
        padding: 0 1rem 1rem;
        text-align: center;
    }

    footer:before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        -webkit-box-shadow: 5px -1px 2px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 5px -1px 2px rgba(0, 0, 0, 0.2);
        box-shadow: 5px -1px 2px rgba(0, 0, 0, 0.2);
    }

    footer .footer__nav {
        display: block;
    }

    footer .footer__nav i {
        margin-right: 8px;
    }

    footer .footer__scroll-to-top {
        display: none;
    }

    .my-list .show-for-small {
        display: none !important;
    }

    .my-list .hide-for-small {
        display: block !important;
    }

    .my-list__bottom .hide-for-small {
        display: inline-block !important;
    }

    .my-list .product-table thead.hide-for-small {
        display: table-header-group !important;
    }

    .my-list .product-table__product:hover {
        background: #fafafa;
    }

    .my-list .product-table__product img {
        max-width: 30px;
        margin: 0 auto;
        display: block;
    }

    .my-list .product-table__product td {
        display: table-cell;
        width: auto;
        border: none;
    }

    .my-list .product-table__product td:nth-child(2),
    .my-list .product-table__product td:nth-child(3),
    .my-list .product-table__product td:nth-child(4) {
        padding: 0;
    }

    .my-list .product-table__product td:nth-child(2) {
        padding-right: 0.5rem;
    }

    .my-list .product-table__product td:first-child {
        padding: 0 0.4375rem 0.4375rem 0.4375rem;
    }

    .my-list .product-table__product td:first-child > span {
        border: 1px solid #dfdfdf;
        padding: 10px;
        display: block;
        margin: 0.4375rem 0 0 0;
        width: 70px;
        background-color: #ffffff;
        font-size: 11px;
        text-align: center;
    }

    .my-list .product-table__product td:last-child span {
        float: right;
        margin-top: 20px;
        margin-right: 20px;
    }

    .my-list .product-table__product td.hide-for-small {
        display: table-cell !important;
    }

    .my-list .product-table .spacer {
        height: 1rem;
    }

    .text-page {
        padding-top: 8rem;
    }
}

@media only screen and (min-width: 993px) {
    .container {
        width: 70%;
    }

    .row .col.l1 {
        width: 8.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l2 {
        width: 16.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l3 {
        width: 25%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l4 {
        width: 33.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l5 {
        width: 41.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l6 {
        width: 50%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l7 {
        width: 58.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l8 {
        width: 66.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l9 {
        width: 75%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l10 {
        width: 83.33333%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l11 {
        width: 91.66667%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.l12 {
        width: 100%;
        margin-left: auto;
        left: auto;
        right: auto;
    }

    .row .col.offset-l1 {
        margin-left: 8.33333%;
    }

    .row .col.pull-l1 {
        right: 8.33333%;
    }

    .row .col.push-l1 {
        left: 8.33333%;
    }

    .row .col.offset-l2 {
        margin-left: 16.66667%;
    }

    .row .col.pull-l2 {
        right: 16.66667%;
    }

    .row .col.push-l2 {
        left: 16.66667%;
    }

    .row .col.offset-l3 {
        margin-left: 25%;
    }

    .row .col.pull-l3 {
        right: 25%;
    }

    .row .col.push-l3 {
        left: 25%;
    }

    .row .col.offset-l4 {
        margin-left: 33.33333%;
    }

    .row .col.pull-l4 {
        right: 33.33333%;
    }

    .row .col.push-l4 {
        left: 33.33333%;
    }

    .row .col.offset-l5 {
        margin-left: 41.66667%;
    }

    .row .col.pull-l5 {
        right: 41.66667%;
    }

    .row .col.push-l5 {
        left: 41.66667%;
    }

    .row .col.offset-l6 {
        margin-left: 50%;
    }

    .row .col.pull-l6 {
        right: 50%;
    }

    .row .col.push-l6 {
        left: 50%;
    }

    .row .col.offset-l7 {
        margin-left: 58.33333%;
    }

    .row .col.pull-l7 {
        right: 58.33333%;
    }

    .row .col.push-l7 {
        left: 58.33333%;
    }

    .row .col.offset-l8 {
        margin-left: 66.66667%;
    }

    .row .col.pull-l8 {
        right: 66.66667%;
    }

    .row .col.push-l8 {
        left: 66.66667%;
    }

    .row .col.offset-l9 {
        margin-left: 75%;
    }

    .row .col.pull-l9 {
        right: 75%;
    }

    .row .col.push-l9 {
        left: 75%;
    }

    .row .col.offset-l10 {
        margin-left: 83.33333%;
    }

    .row .col.pull-l10 {
        right: 83.33333%;
    }

    .row .col.push-l10 {
        left: 83.33333%;
    }

    .row .col.offset-l11 {
        margin-left: 91.66667%;
    }

    .row .col.pull-l11 {
        right: 91.66667%;
    }

    .row .col.push-l11 {
        left: 91.66667%;
    }

    .row .col.offset-l12 {
        margin-left: 100%;
    }

    .row .col.pull-l12 {
        right: 100%;
    }

    .row .col.push-l12 {
        left: 100%;
    }
}

@media all and (min-width: 993px) {
    .hero--my-list {
        margin-bottom: -40px !important;
        padding-top: 18.515625% !important;
        overflow: initial !important;
    }

    .hero--my-list:after {
        top: 30px !important;
        border-top: 10px solid #0080b9 !important;
    }

    .hero {
        margin-bottom: -9vh;
        width: 100%;
        overflow: initial;
        padding-top: 33.4375%;
        position: relative;
        background: url(../images/layout/partials/hero/hero-background.svg)
            center / auto 100% no-repeat;
    }

    .hero .button {
        width: 45%;
    }

    .hero .button:last-child {
        margin-left: 10px;
    }

    .hero:after {
        content: "";
        width: 0;
        height: 0;
        top: 29px !important;
        left: 50%;
        position: relative;
        border-left: 10px solid transparent;
        border-right: 10px solid transparent;
        border-top: 10px solid #fff5e6;
    }

    .hero__inner {
        position: absolute;
        top: 0;
        width: 100%;
    }

    .hero__image img {
        max-width: 75%;
        left: 0;
    }

    .hero__intro {
        margin-top: 119px;
        top: 0;
        max-height: 6.7rem;
    }

    .hero__intro.home p {
        max-width: 100%;
    }

    .hero__button-holder {
        margin-top: 0;
    }

    .result__filter,
    .detail__filter {
        text-align: right;
    }

    .result__filter__total,
    .detail__filter__total {
        float: left;
        position: relative;
        top: 9px;
    }

    .result__filter .vue-select,
    .detail__filter .vue-select {
        width: 12.5rem;
        margin-left: 0.625rem;
        display: inline-block;
    }

    .result__outcome__products-holder .product__image,
    .detail__outcome__products-holder .product__image {
        height: 13rem;
    }

    .product-detail .detail__added span {
        float: right;
    }

    .product-detail {
        margin-top: 7.5rem;
    }

    .product-detail .button {
        width: auto;
        float: right;
        margin-top: -83px;
    }

    .product-detail .button:last-child {
        display: none;
    }

    .product-detail .detail__main {
        padding-left: 30px;
        padding-right: 30px;
    }

    .product-detail .detail__added {
        float: right;
        margin-top: -43px;
        margin-right: 2px;
    }

    .product-detail .detail__image {
        float: right;
        width: 64%;
        text-align: center;
        padding-top: 68px;
        padding-bottom: 68px;
        margin-right: 0;
    }

    .product-detail .detail__image img {
        width: 45%;
    }

    .product-detail .detail__description,
    .product-detail .detail__content {
        width: 36%;
        padding-right: 20px;
    }

    .product-detail .detail__allergens p {
        margin-bottom: 25px;
    }

    .product-detail .detail__allergens .diet-selection__item {
        width: intrinsic;
        /* Safari/WebKit uses a non-standard name */
        width: -moz-max-content;
        /* Firefox/Gecko */
        width: -webkit-max-content;
        /* Chrome */
        width: max-content;
        max-width: 90px;
        cursor: default;
        word-break: break-word;
        margin-bottom: 50px;
    }

    .product-detail .detail__allergens .diet-selection__item span {
        padding-bottom: 0;
        hyphens: auto;
    }

    .product-detail .detail__table {
        width: 30%;
    }
}

@media print and all and (min-width: 0px) and (max-width: 600px) {
    .header__inner {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }
}

@media all and (min-width: 0px) and (max-width: 600px) {
    h1 br {
        display: none;
    }

    body.fixed {
        position: fixed;
    }

    .container {
        width: 80%;
    }

    .header.language .header__logo {
        height: 1.75rem !important;
        margin: 0 calc(50% - 60px);
    }

    .header--open {
        overflow-y: scroll;
        height: 100%;
    }

    .header .container {
        width: 100%;
        max-width: initial;
    }

    .header .container > .row {
        margin: 0;
    }

    .header .container > .row > .col {
        padding: 0;
    }

    .header .show-for-mobile {
        display: block;
    }

    .header__inner {
        -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
        box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
    }

    .header__menu {
        opacity: 0;
        -webkit-transition: opacity 0.5s ease;
        -moz-transition: opacity 0.5s ease;
        -ms-transition: opacity 0.5s ease;
        -o-transition: opacity 0.5s ease;
        transition: opacity 0.5s ease;
    }

    .header__menu--active {
        height: 100%;
        opacity: 1;
    }

    .header__language-switch.active {
        max-height: 12.5rem;
    }

    .hero--language .hero__image img {
        left: 0;
    }

    .hero--language .button {
        width: 95% !important;
    }

    .hero--my-list {
        background: #0080b9 !important;
    }

    .hero .container {
        width: 100%;
        max-width: initial;
    }

    .hero .container > .row {
        margin: 0;
    }

    .hero .container > .row > .col {
        padding: 0;
    }

    .search .container {
        height: calc(10px + 100vh);
    }

    .result__outcome__products-holder .product__image,
    .detail__outcome__products-holder .product__image {
        height: 13rem;
    }

    .warning-statement__top {
        text-align: center;
    }

    .warning-statement__top p {
        padding-bottom: 5rem;
    }

    .warning-statement__top p span.button {
        position: absolute;
        bottom: 1rem;
        left: 0;
        right: 0;
        margin: 0 auto;
    }

    .my-list .dark-cell {
        background-color: #e8e8e8;
    }

    .my-list .product-table__product td span {
        font-size: 0.875em;
        display: inline-block;
        color: #757575;
        width: 100%;
    }

    .my-list .product-table__product td span.product-table__product__allergy {
        display: inline;
        color: #000000;
    }

    .my-list .product-table__product td .result__diet__tags__tag {
        background-color: #e8e8e8;
        font-size: 14px;
    }

    .my-list .product-table__product td:last-child {
        height: 33px;
        text-align: center;
    }
}

@media all and (min-width: 601px) and (max-width: 992px) {
    .diet-selection__item span:nth-child(3) {
        font-size: 0.7em;
    }

    .header.language .header__logo {
        margin: 0 calc(50% - 60px);
    }

    .header__logo {
        padding-top: 1.125rem;
    }

    .hero--language .button {
        margin-left: 0 !important;
    }

    .hero__intro.home p {
        max-width: 50%;
    }

    .hero .button {
        width: 47%;
        margin-left: 10px;
    }

    .hero .button:first-child {
        margin-left: 0;
    }

    .hero__image img {
        max-width: 100%;
        margin-top: 120px;
        left: 0;
    }

    .result__filter,
    .detail__filter {
        text-align: left;
    }

    .result__filter__total,
    .detail__filter__total {
        display: block;
    }

    .result__filter .vue-select,
    .detail__filter .vue-select {
        width: calc(50% - 0.75rem);
        display: inline-block;
    }

    .result__filter .vue-select:nth-child(3),
    .detail__filter .vue-select:nth-child(3) {
        position: relative;
        left: 1.3rem;
    }

    .result__outcome__products-holder .product__image,
    .detail__outcome__products-holder .product__image {
        height: 15rem;
    }

    footer .footer__nav ul li a {
        font-size: 0.8em;
        padding-left: 8px;
        padding-right: 8px;
    }

    footer .footer__nav ul li a i {
        position: relative;
        top: 3px;
        display: inline-block;
        margin-right: 2px;
    }
}

@media all and (min-width: 601px) and (max-width: 1115px) {
    .header__menu-item a {
        padding: 2.8125rem 0.9375rem 1.25rem 0.9375rem;
    }

    .header__menu-item--subnav:before {
        right: 11px;
        top: 52px;
    }

    .header__language-switch {
        width: 60px;
    }

    .header__language-switch li {
        width: 62px;
    }
}

@media all and (min-width: 601px) and (max-width: 628px) {
    .header nav {
        font-size: 13px;
    }

    .header__language-switch {
        width: 50px;
    }

    .header__language-switch li {
        width: 50px;
    }
}

@media all and (min-width: 601px) and (max-width: 643px) {
    .header__menu-item a {
        padding: 2.8125rem 0.5rem 1.25rem 0.5rem;
    }
}

@media all and (min-width: 993px) and (max-width: 1443px) {
    .hero--my-list {
        padding-top: 34.140625% !important;
    }

    .hero--my-list .container {
        margin-top: 9.6875rem;
    }

    .hero--my-list {
        margin-bottom: -40px !important;
    }

    .hero--my-list .hero__intro {
        margin-top: 10vw;
    }
}

@media all and (min-width: 993px) and (max-width: 1340px) {
    .hero .button {
        padding-left: 0.3125rem;
        padding-right: 0.3125rem;
        margin-left: 0;
    }

    .hero__inner {
        padding: 0;
    }

    .hero__image img {
        margin-top: 2.5rem;
    }

    .hero__intro {
        margin-top: 2.5rem;
        min-height: 8.5rem;
    }

    .hero__intro__button-holder {
        margin-top: auto;
    }

    .hero__intro h1 {
        font-size: 1.875em !important;
    }

    .hero__intro p {
        margin-bottom: 1.25rem;
    }

    html[lang="fr-BE"] .hero__intro {
        min-height: 10rem;
    }
}

@media all and (min-width: 993px) and (max-width: 1100px) {
    .result__outcome__products-holder .product__image,
    .detail__outcome__products-holder .product__image {
        height: 8rem;
    }

    .result__outcome__products-holder .product__image img,
    .detail__outcome__products-holder .product__image img {
        max-width: 60%;
    }
}

@media all and (min-width: 1100px) and (max-width: 1200px) {
    .result__outcome__products-holder .product__image,
    .detail__outcome__products-holder .product__image {
        height: 10rem;
    }

    .result__outcome__products-holder .product__image img,
    .detail__outcome__products-holder .product__image img {
        max-width: 60%;
    }
}

@media all and (min-width: 1200px) and (max-width: 1400px) {
    .result__outcome__products-holder .product__image,
    .detail__outcome__products-holder .product__image {
        height: 10rem;
    }

    .result__outcome__products-holder .product__image img,
    .detail__outcome__products-holder .product__image img {
        max-width: 60%;
    }
}

@media all and (min-width: 601px) and (max-width: 804px) {
    .my-list .dark-cell i {
        display: none !important;
    }
}

@media print {
    /**
   * Fix fonts that render as bold in Firefox
   *
   * Put this near the top of your style.css
   * Before any overriding styles
   */

    html {
        -moz-osx-font-smoothing: grayscale;
        -webkit-font-smoothing: antialiased;
        font-smoothing: antialiased;
        font-weight: 400;
    }

    /**
     * Firefox specific rule
     */

    @-moz-document url-prefix() {
        body {
            font-weight: lighter !important;
        }
    }

    body {
        font-size: 9px !important;
    }

    .container {
        max-width: initial;
        width: 100%;
    }

    .header:before {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    .header__menu {
        display: none;
    }

    .header__logo {
        position: absolute;
        top: 0;
        left: 0;
    }

    .header__inner:before {
        -webkit-box-shadow: none !important;
        -moz-box-shadow: none !important;
        box-shadow: none !important;
    }

    .footer {
        display: none;
    }

    .hero {
        background-image: none !important;
        padding-top: 10px !important;
        margin-bottom: 0;
    }

    .hero .container {
        margin-top: 2.6875rem;
    }

    .hero h1,
    .hero p {
        color: #000 !important;
        text-align: left;
    }

    .hero__inner {
        padding-left: 0;
    }

    .hero__inner p {
        margin-bottom: 0;
    }

    .hero__intro {
        margin-top: 0 !important;
    }

    .hero:after {
        border: none;
    }

    .my-list .hide-for-small {
        display: none !important;
    }

    .my-list .show-for-small {
        display: none !important;
    }

    .my-list__top,
    .my-list__bottom {
        display: none !important;
    }

    .my-list .product-table {
        width: 98%;
    }

    .my-list .product-table .spacer {
        height: 0px !important;
    }

    .my-list .product-table thead.hide-for-small {
        display: table-header-group !important;
    }

    .my-list .product-table__category th {
        padding: 0;
    }

    .my-list .product-table__product:hover {
        background: #fafafa;
    }

    .my-list .product-table__product img {
        max-width: 30px;
        margin: 0 auto;
        display: block;
    }

    .my-list .product-table__product td {
        display: table-cell;
        width: auto;
        border: none;
    }

    .my-list .product-table__product td.dark-cell .result__diet__tags__tag {
        display: none;
    }

    .my-list .product-table__product td:nth-child(2),
    .my-list .product-table__product td:nth-child(3),
    .my-list .product-table__product td:nth-child(4) {
        padding: 0;
    }

    .my-list .product-table__product td:first-child {
        padding: 0 0.4375rem 0.4375rem 0.4375rem;
    }

    .my-list .product-table__product td:first-child > span {
        border: 1px solid #dfdfdf;
        padding: 10px;
        display: block;
        margin: 0.4375rem 0 0 0;
        width: 70px;
        background-color: #ffffff;
    }

    .my-list .product-table__product td:last-child span {
        float: right;
        margin-top: 20px;
        margin-right: 20px;
    }

    .my-list .product-table__product td.hide-for-small {
        display: table-cell !important;
    }

    .my-list .product-table .spacer {
        height: 1rem;
    }

    .warning-statement__top {
        display: none;
    }
}

#consent_blackbar {
    position: fixed;
    top: 0;
    z-index: 99;
    width: 100%;
}
#teconsent {
    right: 0;
    position: fixed;
    top: 93vh;
    z-index: 99;
}

@media screen and (-webkit-min-device-pixel-ratio: 0) {
    @font-face {
        font-family: font;
        font-weight: normal;
        font-style: normal;
        src: url("../fonts/proximanova-regular-webfont.svg") format("svg");
    }

    @font-face {
        font-family: font;
        font-weight: normal;
        font-style: normal;
        src: url("../fonts/proximanova-semibold-webfont.svg") format("svg");
    }

    @font-face {
        font-family: font;
        font-weight: normal;
        font-style: normal;
        src: url("../fonts/proximanova-bold-webfont.svg") format("svg");
    }

    @font-face {
        font-family: font;
        font-weight: normal;
        font-style: normal;
        src: url("../fonts/sentinel-semibold-webfont.svg") format("svg");
    }
}

.d-none {
    display: none !important;
}

.modal {
    width: 100vw;
    height: 100vh;
    background-color: #00000061;
    position: fixed;
    left: 0;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-dialog {
    min-width: Min(100vw, 400px);
    max-width: Min(100vw, 700px);
    min-height: Min(100vh, 400px);
    max-height: Min(100vh, 700px);
    position: relative;
    background-color: #fff;
    border-radius: 3px;
    padding: 15px;
}

.modal .close {
    position: absolute;
    right: 5px;
    top: 5px;
    min-width: 25px;
    width: 25px;
    height: 25px;
    padding: 0;
}

.modal-dialog-header {
    height: 30px;
}

.modal-dialog-content {
    width: 100%;
    height: 100%;
}

.modal-dialog-content img {
    max-height: 400px;
}