/*!********************************************************************************************************************************************************************************************************************************************!*\
  !*** css ../node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].use[1]!../node_modules/postcss-loader/dist/cjs.js??ruleSet[1].rules[1].use[2]!../node_modules/sass-loader/dist/cjs.js??ruleSet[1].rules[1].use[3]!./styles/main.scss ***!
  \********************************************************************************************************************************************************************************************************************************************/
@charset "UTF-8";
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/*********************
 COLOURS REDESIGN ERESULTS
*********************/
/*********************
COLOURS
*********************/
/*********************
 GRID & LAYOUT
*********************/
/*********************
 GRID & LAYOUT
*********************/
@font-face {
  font-family: "CeraPro";
  font-weight: 300;
  font-style: normal;
  font-display: swap;
  src: url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Light.eot);
  src: url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Light.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Light.woff2) format("woff2"), url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Light.woff) format("woff");
}
@font-face {
  font-family: "CeraPro";
  font-weight: 500;
  font-style: normal;
  font-display: swap;
  src: url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Regular.eot);
  src: url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Regular.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Regular.woff2) format("woff2"), url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Regular.woff) format("woff");
}
@font-face {
  font-family: "CeraPro";
  font-weight: 600;
  font-style: normal;
  font-display: swap;
  src: url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Medium.eot);
  src: url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Medium.eot?#iefix) format("embedded-opentype"), url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Medium.woff2) format("woff2"), url(/wp-content/themes/schoutenfood/dist/fonts/CeraPro-Medium.woff) format("woff");
}
/*! normalize.css 2012-07-07T09:50 UTC - http://github.com/necolas/normalize.css */
/* ==========================================================================
   HTML5 display definitions
   ========================================================================== */
/*
 * Corrects `block` display not defined in IE6/7/8/9 & FF3.
 */
article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
nav,
section,
summary {
  display: block;
}

/*
 * Corrects `inline-block` display not defined in IE6/7/8/9 & FF3.
 */
audio,
canvas,
video {
  display: inline-block;
  *display: inline;
}

/*
 * Prevents modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS5 devices.
 */
audio:not([controls]) {
  display: none;
  height: 0;
}

/*
 * Addresses styling for `hidden` attribute not present in IE7/8/9, FF3, S4.
 * Known issue: no IE6 support.
 */
[hidden] {
  display: none;
}

/* ==========================================================================
   Base
   ========================================================================== */
/*
 * 1. Corrects text resizing oddly in IE6/7 when body `font-size` is set using
 *    `em` units.
 * 2. Prevents iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */
html {
  font-size: 100%; /* 1 */
  -webkit-text-size-adjust: 100%; /* 2 */
  -ms-text-size-adjust: 100%; /* 2 */
}

/*
 * Addresses margins handled incorrectly in IE6/7.
 */
body {
  margin: 0;
}

/* ==========================================================================
   Links
   ========================================================================== */
/*
 * Addresses `outline` inconsistency between Chrome and other browsers.
 */
a:focus {
  outline: thin dotted;
}

/*
 * Improves readability when focused and also mouse hovered in all browsers.
 * people.opera.com/patrickl/experiments/keyboard/test
 */
a:active,
a:hover {
  outline: 0;
}

/*
 * Addresses styling not present in IE7/8/9, S5, Chrome.
 */
abbr[title] {
  border-bottom: 1px dotted;
}

/*
 * Addresses style set to `bolder` in FF3+, S4/5, Chrome.
 */
b,
strong {
  font-weight: 600;
}

blockquote {
  margin: 1em 40px;
}

/*
 * Addresses styling not present in S5, Chrome.
 */
dfn {
  font-style: italic;
}

/*
 * Addresses styling not present in IE6/7/8/9.
 */
mark {
  background: #ff0;
  color: #000;
}

/*
 * Addresses margins set differently in IE6/7.
 */
p,
pre {
  margin: 1em 0;
}

/*
 * Corrects font family set oddly in IE6, S4/5, Chrome.
 * en.wikipedia.org/wiki/User:Davidgothberg/Test59
 */
code,
kbd,
pre,
samp {
  font-family: monospace, serif;
  _font-family: "courier new", monospace;
  font-size: 1em;
}

/*
 * Improves readability of pre-formatted text in all browsers.
 */
pre {
  white-space: pre;
  white-space: pre-wrap;
  word-wrap: break-word;
}

/*
 * Addresses CSS quotes not supported in IE6/7.
 */
q {
  quotes: none;
}

/*
 * Addresses `quotes` property not supported in S4.
 */
q:before,
q:after {
  content: "";
  content: none;
}

small {
  font-size: 75%;
}

/*
 * Prevents `sub` and `sup` affecting `line-height` in all browsers.
 * gist.github.com/413930
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* ==========================================================================
   Lists
   ========================================================================== */
/*
 * Addresses margins set differently in IE6/7.
 */
dl,
menu,
ol,
ul {
  margin: 0em 0;
}

dd {
  margin: 0 0 0 40px;
}

/*
 * Addresses paddings set differently in IE6/7.
 */
menu,
ol,
ul {
  padding: 0 0 0 40px;
}

/*
 * Corrects list images handled incorrectly in IE7.
 */
nav ul,
nav ol {
  list-style: none;
  list-style-image: none;
}

/* ==========================================================================
   Embedded content
   ========================================================================== */
/*
 * 1. Removes border when inside `a` element in IE6/7/8/9, FF3.
 * 2. Improves image quality when scaled in IE7.
 *    code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
 */
img {
  border: 0; /* 1 */
  -ms-interpolation-mode: bicubic; /* 2 */
}

/*
 * Corrects overflow displayed oddly in IE9.
 */
svg:not(:root) {
  overflow: hidden;
}

/* ==========================================================================
   Figures
   ========================================================================== */
/*
 * Addresses margin not present in IE6/7/8/9, S5, O11.
 */
figure {
  margin: 0;
}

/* ==========================================================================
   Forms
   ========================================================================== */
/*
 * Corrects margin displayed oddly in IE6/7.
 */
form {
  margin: 0;
}

/*
 * Define consistent border, margin, and padding.
 */
fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/*
 * 1. Corrects color not being inherited in IE6/7/8/9.
 * 2. Corrects text not wrapping in FF3.
 * 3. Corrects alignment displayed oddly in IE6/7.
 */
legend {
  border: 0; /* 1 */
  padding: 0;
  white-space: normal; /* 2 */
  *margin-left: -7px; /* 3 */
}

/*
 * 1. Corrects font size not being inherited in all browsers.
 * 2. Addresses margins set differently in IE6/7, FF3+, S5, Chrome.
 * 3. Improves appearance and consistency in all browsers.
 */
button,
input,
select,
textarea {
  font-size: 100%; /* 1 */
  margin: 0; /* 2 */
  vertical-align: baseline; /* 3 */
  *vertical-align: middle; /* 3 */
}

/*
 * Addresses FF3/4 setting `line-height` on `input` using `!important` in the
 * UA stylesheet.
 */
button,
input {
  line-height: normal;
}

/*
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Corrects inability to style clickable `input` types in iOS.
 * 3. Improves usability and consistency of cursor style between image-type
 *    `input` and others.
 * 4. Removes inner spacing in IE7 without affecting normal text inputs.
 *    Known issue: inner spacing remains in IE6.
 */
button,
html input[type=button],
input[type=reset],
input[type=submit] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
  *overflow: visible; /* 4 */
}

/*
 * Re-set default cursor for disabled elements.
 */
button[disabled],
input[disabled] {
  cursor: default;
}

/*
 * 1. Addresses box sizing set to content-box in IE8/9.
 * 2. Removes excess padding in IE8/9.
 * 3. Removes excess padding in IE7.
 *    Known issue: excess padding remains in IE6.
 */
input[type=checkbox],
input[type=radio] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
  *height: 13px; /* 3 */
  *width: 13px; /* 3 */
}

/*
 * 1. Addresses `appearance` set to `searchfield` in S5, Chrome.
 * 2. Addresses `box-sizing` set to `border-box` in S5, Chrome (include `-moz`
 *    to future-proof).
 */
input[type=search] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/*
 * Removes inner padding and search cancel button in S5, Chrome on OS X.
 */
input[type=search]::-webkit-search-cancel-button,
input[type=search]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/*
 * Removes inner padding and border in FF3+.
 */
button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/*
 * 1. Removes default vertical scrollbar in IE6/7/8/9.
 * 2. Improves readability and alignment in all browsers.
 */
textarea {
  overflow: auto; /* 1 */
  vertical-align: top; /* 2 */
}

/* ==========================================================================
   Tables
   ========================================================================== */
/*
 * Remove most spacing between table cells.
 */
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/******************************************************************
CUSTOMIZED RESET VALUES
I added these extra styles as a more personalized reset. Feel free
to remove them if you like or add your own. If you want to update
the normalize styles, make sure to edit from this point up.
******************************************************************/
b, strong, .strong {
  font-weight: 600;
}

dfn, em, .em {
  font-style: italic;
}

small, .small {
  font-size: 75%;
}

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

dd {
  margin: 0;
}

.sidebar ul,
.sidebar ol,
.commentlist {
  list-style: none;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/******************************************************************
Site Name:
Author:

Stylesheet: Mixins & Constants Stylesheet

This is where you can take advantage of Sass' great features:
Mixins & Constants. I won't go in-depth on how they work exactly,
there are a few articles below that will help do that. What I will
tell you is that this will help speed up simple changes like
changing a color or adding CSS3 techniques gradients.

A WORD OF WARNING: It's very easy to overdo it here. Be careful and
remember less is more.

******************************************************************/
/*********************
BREAKPOINTS
*********************/
/*********************
CSS3 GRADIENTS
Be careful with these since they can
really slow down your CSS. Don't overdo it.
*********************/
/* @include css-gradient(#dfdfdf,#f8f8f8); */
/* ==========================================================================
 # FLExible font-size
========================================================================== */
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/*********************
PARAGRAPH AND HEADING STYLES
*********************/
html,
body {
  color: #40392E;
  font-family: "CeraPro", verdana, sans-serif;
  font-size: 18px;
  font-weight: 300;
  line-height: 1.7;
}

h2,
h3,
h4,
h5 {
  color: #1A6546;
  text-rendering: optimizelegibility;
  line-height: 1.2;
}
h2 a,
h3 a,
h4 a,
h5 a {
  text-decoration: none !important;
}

h1 {
  color: #00B592;
}

h1,
:root:root .has-huge-font-size {
  margin-top: 0em;
  margin-bottom: 2rem;
  line-height: 1em;
  overflow-wrap: break-word;
  font-weight: 300;
  font-size: 3.333rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  h1,
  :root:root .has-huge-font-size {
    font-size: clamp(1.778rem, 1.2091111111rem + 3.2vw, 3.333rem);
  }
}

h2,
:root:root .has-large-font-size {
  margin-top: 0;
  margin-bottom: 1rem;
  line-height: 1;
  font-weight: 300;
  font-size: 2.667rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  h2,
  :root:root .has-large-font-size {
    font-size: clamp(1.556rem, 1.1471111111rem + 2.3vw, 2.667rem);
  }
}

h3,
:root:root .has-medium-font-size {
  font-weight: 500;
  margin-bottom: 10px;
  font-size: 1.333rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  h3,
  :root:root .has-medium-font-size {
    font-size: clamp(1.111rem, 1.0221111111rem + 0.5vw, 1.333rem);
  }
}

h4,
:root:root .has-small-font-size,
.has-small-font-size-overwrite {
  margin: 10px 0;
  font-weight: 500;
  line-height: 1.4;
  font-size: 1.111rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  h4,
  :root:root .has-small-font-size,
  .has-small-font-size-overwrite {
    font-size: clamp(1rem, 0.9644444444rem + 0.2vw, 1.111rem);
  }
}

h5 {
  font-size: 1rem;
  font-weight: 600;
  font-style: italic;
}

small {
  font-size: 0.8rem;
  line-height: 1.4;
  display: inline-block;
}

.productWidget h2,
.contactWidget h2 {
  margin: 1rem 0;
}
.productWidget h3,
.productWidget h4,
.contactWidget h3,
.contactWidget h4 {
  margin: 0;
}

/*********************
CONTENT LISTS AND QUOTES
*********************/
.entry-content ul,
.entry-content ol {
  margin-left: 1em;
}

.entry-content ul {
  list-style-type: disc;
}

.entry-content ol {
  list-style-type: decimal;
}

blockquote {
  margin: 0 0.5em 0 0.5em;
  padding-left: 1em;
  color: rgb(151.7090909091, 135.9909090909, 111.2909090909);
  border-left: 2px solid rgb(151.7090909091, 135.9909090909, 111.2909090909);
}
@media (min-width: 20em) {
  blockquote {
    margin: 0 2em 0 1em;
  }
}

cite {
  font-style: italic;
}

/*
use the best ampersand
http://simplebits.com/notebook/2008/08/14/ampersands-2/
*/
span.amp {
  font-family: Baskerville, "Goudy Old Style", Palatino, "Book Antiqua", serif !important;
  font-style: italic;
}

hr {
  height: 1px;
  margin-top: 2rem;
  margin-bottom: 2rem;
  border: none;
  background-color: #E3E7E9;
}

/*********************
LINK STYLES
*********************/
a {
  transition: color 0.2s ease;
  text-decoration: none;
  color: #00B592;
  /* on hover */
  /* mobile tap color */
}
a:hover, a:focus {
  color: rgb(0, 104.5, 84.2928176796);
}
a:link {
  /*
  this highlights links on iPhones/iPads.
  so it basically works like the :hover selector
  for mobile devices.
  */
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0.3);
}

a.white,
a.white:visited {
  color: #FFFFFF;
  /* on hover */
}
a.white:hover, a.white:focus,
a.white:visited:hover,
a.white:visited:focus {
  color: rgb(242.25, 242.25, 242.25);
}

.gform_confirmation_message,
.alert-success, .alert-error, .alert-info, .alert-help {
  margin: 10px;
  padding: 5px 18px;
  border: 1px solid;
}

.alert-help {
  border-color: rgb(231.8902439024, 220.3353658537, 88.6097560976);
  background: #EBE16F;
}

.alert-info {
  border-color: rgb(191.1428571429, 227.6326530612, 244.3571428571);
  background: #D5EDF8;
}

.alert-error {
  border-color: rgb(247.8125, 204.6875, 206.484375);
  background: #FBE3E4;
}

.gform_confirmation_message,
.alert-success {
  border-color: rgb(221.7207792208, 233.7012987013, 173.7987012987);
  background: #E6EFC2;
}

.alert--large {
  margin: 0;
  font-weight: 500;
  padding: 0.75rem;
  text-wrap: pretty;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/******************************************************************
Site Name:
Author:

Stylesheet: Grid Stylesheet

I've seperated the grid so you can swap it out easily. It's
called at the top the style.scss stylesheet.

There are a ton of grid solutions out there. You should definitely
experiment with your own. Here are some recommendations:

http://gridsetapp.com - Love this site. Responsive Grids made easy.
http://susy.oddbird.net/ - Grids using Compass. Very elegant.
http://gridpak.com/ - Create your own responsive grid.

The grid below is a combination of the 1140 grid and Twitter Boostrap.
I liked 1140 but Boostrap's grid was way more detailed so I merged them
together, let's see how this works out. If you want to use 1140, the original
values are commented out on each line.

******************************************************************/
.wrap {
  position: relative;
  width: 96%;
  max-width: 1200px;
  margin: 0 auto;
}

.wrap--wide {
  max-width: 1500px;
}

/* ==========================================================================
 # FLEX GRID
========================================================================== */
/**
 * Core grid component
 *
 * DO NOT apply dimension or offset utilities to the `grid` element. All cell
 * widths and offsets should be applied to child grid cells.
 */
/* grid container
   ========================================================================== */
/**
 * All content must be contained within child elements.
 *
 */
.o-grid {
  display: flex;
  margin: 0;
  padding: 0;
  flex-wrap: wrap;
}

/**
* No explicit width by default. Rely on combining a cell with a dimension
* utility or a component class that extends 'grid'.
*/
.o-grid > .o-grid__item {
  position: relative;
  width: 100%;
  max-width: 100%;
  min-height: 1px;
  flex-basis: 0;
  flex-grow: 1;
}

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="o-grid@mobile">
 */
@media (min-width: 20em) {
  .o-grid\@mobile {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  /**
  * No explicit width by default. Rely on combining a cell with a dimension
  * utility or a component class that extends 'grid'.
  */
  .o-grid\@mobile > .o-grid__item {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
  }
}
@media (min-width: 46.25em) {
  .o-grid\@tablet {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  /**
  * No explicit width by default. Rely on combining a cell with a dimension
  * utility or a component class that extends 'grid'.
  */
  .o-grid\@tablet > .o-grid__item {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
  }
}
@media (min-width: 61.25em) {
  .o-grid\@desktop {
    display: flex;
    margin: 0;
    padding: 0;
    flex-wrap: wrap;
  }
  /**
  * No explicit width by default. Rely on combining a cell with a dimension
  * utility or a component class that extends 'grid'.
  */
  .o-grid\@desktop > .o-grid__item {
    position: relative;
    width: 100%;
    max-width: 100%;
    min-height: 1px;
    flex-basis: 0;
    flex-grow: 1;
  }
}
/**
 * Modifier: all cells match height of tallest cell in a row
 */
.o-grid--equal-height > * {
  display: flex;
}

.o-grid--space-between {
  justify-content: space-between;
}

/**
 * Modifier: gutters
 */
.o-grid--with-gutter {
  margin: -5px;
}
@media (min-width: 46.25em) {
  .o-grid--with-gutter {
    margin: -0.588rem;
  }
}

.o-grid--with-gutter > .o-grid__item {
  padding: 5px;
}
@media (min-width: 46.25em) {
  .o-grid--with-gutter > .o-grid__item {
    padding: 0.588rem;
  }
}

/**
 * Modifier: reverse
 */
.o-grid--reverse {
  flex-direction: row-reverse;
}

.o-grid--align-middle {
  align-items: center;
}

.o-grid--align-bottom {
  align-items: baseline;
}

.o-grid--align-center {
  justify-content: center;
}

.o-grid--no-wrap {
  flex-wrap: nowrap;
}

@media (min-width: 46.25em) {
  .o-grid--align-center\@tablet {
    justify-content: center;
  }
}

.o-grid--column {
  flex-direction: column;
}

.o-grid--align-right {
  justify-content: flex-end;
}

@media (min-width: 46.25em) {
  .o-grid--align-right\@tablet {
    justify-content: flex-end;
  }
}

/* ==========================================================================
   #WIDTHS
   ========================================================================== */
/**
 * Specify the proportional width of an object.
 * Intentional redundancy build into each set of unit classes.
 * Supports: 12 parts
 *
 * 1. Use `flex-basis: auto` with a width to avoid box-sizing bug in IE10/11
 * http://git.io/vllMD
 */
*[class^=u-size],
*[class*=u-size] {
  flex-basis: auto;
}

/**
 * Create column width based on the size in the amount of columns
  */
/**
 * A series of width helper classes that you can use to size things like grid
 * systems. Classes take a number format (e.g. `.u-size-10) based on the total of set columns. Use these in
 * your markup:
 *
 * <div class="u-size-10">
 *
 * The following will generate widths helper classes based on the fractions
 * defined in the `$columns` list.
 */
.u-size-1 {
  width: 8.3333333333% !important;
  flex: none !important;
}

.u-push-1 {
  margin-left: 8.3333333333%;
}

.u-size-2 {
  width: 16.6666666667% !important;
  flex: none !important;
}

.u-push-2 {
  margin-left: 16.6666666667%;
}

.u-size-3 {
  width: 25% !important;
  flex: none !important;
}

.u-push-3 {
  margin-left: 25%;
}

.u-size-4 {
  width: 33.3333333333% !important;
  flex: none !important;
}

.u-push-4 {
  margin-left: 33.3333333333%;
}

.u-size-5 {
  width: 41.6666666667% !important;
  flex: none !important;
}

.u-push-5 {
  margin-left: 41.6666666667%;
}

.u-size-6 {
  width: 50% !important;
  flex: none !important;
}

.u-push-6 {
  margin-left: 50%;
}

.u-size-7 {
  width: 58.3333333333% !important;
  flex: none !important;
}

.u-push-7 {
  margin-left: 58.3333333333%;
}

.u-size-8 {
  width: 66.6666666667% !important;
  flex: none !important;
}

.u-push-8 {
  margin-left: 66.6666666667%;
}

.u-size-9 {
  width: 75% !important;
  flex: none !important;
}

.u-push-9 {
  margin-left: 75%;
}

.u-size-10 {
  width: 83.3333333333% !important;
  flex: none !important;
}

.u-push-10 {
  margin-left: 83.3333333333%;
}

.u-size-11 {
  width: 91.6666666667% !important;
  flex: none !important;
}

.u-push-11 {
  margin-left: 91.6666666667%;
}

.u-size-12 {
  width: 100% !important;
  flex: none !important;
}

.u-push-12 {
  margin-left: 100%;
}

/**
 * Make an element shrink wrap its content.
 */
.u-size-fit {
  width: auto !important;
  flex: none !important;
}

/**
  * Make an element fill the remaining space.
  *
  */
.u-size-fill {
  max-width: 100%;
  flex-basis: 0;
  flex-grow: 1;
}

/**
 * If we’re using Sass-MQ, automatically generate grid system(s) for each of our
 * defined breakpoints, and give them a Responsive Suffix, e.g.:
 *
 * <div class="u-3/12@mobile">
 */
@media (min-width: 20em) {
  .u-size-1\@mobile {
    width: 8.3333333333% !important;
    flex: none !important;
  }
  .u-push-1\@mobile {
    margin-left: 8.3333333333%;
  }
  .u-size-2\@mobile {
    width: 16.6666666667% !important;
    flex: none !important;
  }
  .u-push-2\@mobile {
    margin-left: 16.6666666667%;
  }
  .u-size-3\@mobile {
    width: 25% !important;
    flex: none !important;
  }
  .u-push-3\@mobile {
    margin-left: 25%;
  }
  .u-size-4\@mobile {
    width: 33.3333333333% !important;
    flex: none !important;
  }
  .u-push-4\@mobile {
    margin-left: 33.3333333333%;
  }
  .u-size-5\@mobile {
    width: 41.6666666667% !important;
    flex: none !important;
  }
  .u-push-5\@mobile {
    margin-left: 41.6666666667%;
  }
  .u-size-6\@mobile {
    width: 50% !important;
    flex: none !important;
  }
  .u-push-6\@mobile {
    margin-left: 50%;
  }
  .u-size-7\@mobile {
    width: 58.3333333333% !important;
    flex: none !important;
  }
  .u-push-7\@mobile {
    margin-left: 58.3333333333%;
  }
  .u-size-8\@mobile {
    width: 66.6666666667% !important;
    flex: none !important;
  }
  .u-push-8\@mobile {
    margin-left: 66.6666666667%;
  }
  .u-size-9\@mobile {
    width: 75% !important;
    flex: none !important;
  }
  .u-push-9\@mobile {
    margin-left: 75%;
  }
  .u-size-10\@mobile {
    width: 83.3333333333% !important;
    flex: none !important;
  }
  .u-push-10\@mobile {
    margin-left: 83.3333333333%;
  }
  .u-size-11\@mobile {
    width: 91.6666666667% !important;
    flex: none !important;
  }
  .u-push-11\@mobile {
    margin-left: 91.6666666667%;
  }
  .u-size-12\@mobile {
    width: 100% !important;
    flex: none !important;
  }
  .u-push-12\@mobile {
    margin-left: 100%;
  }
  /**
   * Make an element shrink wrap its content.
   */
  .u-size-fit\@mobile {
    width: auto !important;
    flex: none !important;
  }
  /**
    * Make an element fill the remaining space.
    *
    */
  .u-size-fill\@mobile {
    max-width: 100%;
    flex-basis: 0;
    flex-grow: 1;
  }
}
@media (min-width: 46.25em) {
  .u-size-1\@tablet {
    width: 8.3333333333% !important;
    flex: none !important;
  }
  .u-push-1\@tablet {
    margin-left: 8.3333333333%;
  }
  .u-size-2\@tablet {
    width: 16.6666666667% !important;
    flex: none !important;
  }
  .u-push-2\@tablet {
    margin-left: 16.6666666667%;
  }
  .u-size-3\@tablet {
    width: 25% !important;
    flex: none !important;
  }
  .u-push-3\@tablet {
    margin-left: 25%;
  }
  .u-size-4\@tablet {
    width: 33.3333333333% !important;
    flex: none !important;
  }
  .u-push-4\@tablet {
    margin-left: 33.3333333333%;
  }
  .u-size-5\@tablet {
    width: 41.6666666667% !important;
    flex: none !important;
  }
  .u-push-5\@tablet {
    margin-left: 41.6666666667%;
  }
  .u-size-6\@tablet {
    width: 50% !important;
    flex: none !important;
  }
  .u-push-6\@tablet {
    margin-left: 50%;
  }
  .u-size-7\@tablet {
    width: 58.3333333333% !important;
    flex: none !important;
  }
  .u-push-7\@tablet {
    margin-left: 58.3333333333%;
  }
  .u-size-8\@tablet {
    width: 66.6666666667% !important;
    flex: none !important;
  }
  .u-push-8\@tablet {
    margin-left: 66.6666666667%;
  }
  .u-size-9\@tablet {
    width: 75% !important;
    flex: none !important;
  }
  .u-push-9\@tablet {
    margin-left: 75%;
  }
  .u-size-10\@tablet {
    width: 83.3333333333% !important;
    flex: none !important;
  }
  .u-push-10\@tablet {
    margin-left: 83.3333333333%;
  }
  .u-size-11\@tablet {
    width: 91.6666666667% !important;
    flex: none !important;
  }
  .u-push-11\@tablet {
    margin-left: 91.6666666667%;
  }
  .u-size-12\@tablet {
    width: 100% !important;
    flex: none !important;
  }
  .u-push-12\@tablet {
    margin-left: 100%;
  }
  /**
   * Make an element shrink wrap its content.
   */
  .u-size-fit\@tablet {
    width: auto !important;
    flex: none !important;
  }
  /**
    * Make an element fill the remaining space.
    *
    */
  .u-size-fill\@tablet {
    max-width: 100%;
    flex-basis: 0;
    flex-grow: 1;
  }
}
@media (min-width: 61.25em) {
  .u-size-1\@desktop {
    width: 8.3333333333% !important;
    flex: none !important;
  }
  .u-push-1\@desktop {
    margin-left: 8.3333333333%;
  }
  .u-size-2\@desktop {
    width: 16.6666666667% !important;
    flex: none !important;
  }
  .u-push-2\@desktop {
    margin-left: 16.6666666667%;
  }
  .u-size-3\@desktop {
    width: 25% !important;
    flex: none !important;
  }
  .u-push-3\@desktop {
    margin-left: 25%;
  }
  .u-size-4\@desktop {
    width: 33.3333333333% !important;
    flex: none !important;
  }
  .u-push-4\@desktop {
    margin-left: 33.3333333333%;
  }
  .u-size-5\@desktop {
    width: 41.6666666667% !important;
    flex: none !important;
  }
  .u-push-5\@desktop {
    margin-left: 41.6666666667%;
  }
  .u-size-6\@desktop {
    width: 50% !important;
    flex: none !important;
  }
  .u-push-6\@desktop {
    margin-left: 50%;
  }
  .u-size-7\@desktop {
    width: 58.3333333333% !important;
    flex: none !important;
  }
  .u-push-7\@desktop {
    margin-left: 58.3333333333%;
  }
  .u-size-8\@desktop {
    width: 66.6666666667% !important;
    flex: none !important;
  }
  .u-push-8\@desktop {
    margin-left: 66.6666666667%;
  }
  .u-size-9\@desktop {
    width: 75% !important;
    flex: none !important;
  }
  .u-push-9\@desktop {
    margin-left: 75%;
  }
  .u-size-10\@desktop {
    width: 83.3333333333% !important;
    flex: none !important;
  }
  .u-push-10\@desktop {
    margin-left: 83.3333333333%;
  }
  .u-size-11\@desktop {
    width: 91.6666666667% !important;
    flex: none !important;
  }
  .u-push-11\@desktop {
    margin-left: 91.6666666667%;
  }
  .u-size-12\@desktop {
    width: 100% !important;
    flex: none !important;
  }
  .u-push-12\@desktop {
    margin-left: 100%;
  }
  /**
   * Make an element shrink wrap its content.
   */
  .u-size-fit\@desktop {
    width: auto !important;
    flex: none !important;
  }
  /**
    * Make an element fill the remaining space.
    *
    */
  .u-size-fill\@desktop {
    max-width: 100%;
    flex-basis: 0;
    flex-grow: 1;
  }
}
/* Keep button text on same line in ie 10 when '.u-size-fit' is the parent */
@media screen and (min-width: 0\0 ) {
  .u-size-fit {
    white-space: nowrap;
  }
}
@media (max-width: 46.24em) {
  .u-size-max\@mobile {
    width: 100% !important;
    max-width: 25.8808rem !important;
    margin-right: auto;
    margin-left: auto;
    flex: none !important;
  }
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/******************************************************************
Site Name:
Author:

Stylesheet: Base Mobile Stylesheet

Be light and dont over style since everything here will be
loaded by mobile devices. You want to keep it as minimal as
possible. This is called at the top of the main stylsheet
and will be used across all viewports.

******************************************************************/
/*********************
GENERAL STYLES
*********************/
html {
  height: 100%;
  background-color: #f9f7f2;
  scroll-padding-top: 100px;
  scroll-behavior: smooth;
}

@media (max-width: 19.99em) {
  html,
  body {
    font-size: 15px;
  }
}
body {
  height: 100%;
  background-color: #f9f7f2;
  -webkit-font-smoothing: antialiased;
}

#container {
  position: relative;
  overflow: hidden;
  background-color: #f9f7f2;
}

.page-container {
  position: relative;
}

.icon {
  width: 24px;
  height: 24px;
}

.icon--inline {
  width: 1em;
  height: 1em;
  vertical-align: sub;
}

/*********************
HEADER IMAGE !HOMEPAGE
*********************/
.headerimage {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
}
.headerimage img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
@media (min-width: 41.5625em) {
  .headerimage {
    height: 350px;
  }
}

:root .headerimage--with-title {
  position: relative;
  height: auto;
  padding-bottom: 40px;
}
@media (min-width: 41.5625em) {
  :root .headerimage--with-title {
    padding-bottom: 140px;
  }
}
:root .headerimage--with-title .headerimage__title {
  font-weight: bold;
  color: white;
  position: relative;
  z-index: 2;
  margin: 0;
  padding: 14vh 0;
  font-size: 5.556rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  :root .headerimage--with-title .headerimage__title {
    font-size: clamp(2rem, 0.7022222222rem + 7.3vw, 5.556rem);
  }
}
@media screen and (orientation: portrait) {
  :root .headerimage--with-title .headerimage__title {
    padding: 8vh 0;
  }
}
:root .headerimage--with-title .headerimage__title--small {
  font-size: 4.444rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  :root .headerimage--with-title .headerimage__title--small {
    font-size: clamp(1.333rem, 0.1952222222rem + 6.4vw, 4.444rem);
  }
}
:root .headerimage--with-title img {
  top: 0;
  left: 0;
  position: absolute;
}
:root .headerimage--with-title:after {
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
}

@supports (padding: clamp(50px, 8vh, 300px)) {
  :root .headerimage--with-title .headerimage__title {
    padding: clamp(50px, 14vh, 300px) 0;
  }
}
@media screen and (orientation: portrait) {
  @supports (padding: clamp(50px, 8vh, 300px)) {
    :root .headerimage--with-title .headerimage__title {
      padding: clamp(50px, 8vh, 300px) 0;
    }
  }
}
@supports (aspect-ratio: 1/1) {
  .size-thumb-600-4-3 {
    aspect-ratio: 4/3;
    object-fit: cover;
  }
}
/*********************
POSTS & CONTENT STYLES
*********************/
/*Normal page styles*/
.main #inner-content,
.main .inner-content {
  margin-right: auto;
  margin-left: auto;
  padding: 2em 1.5em;
}

.main #inner-content,
.main .inner-content,
.main--emphasize {
  position: relative;
  z-index: 999;
  margin-top: -40px;
  margin-bottom: -20px;
}

@media (min-width: 46.25em) {
  .background-shapes-two,
  .is-medium-tall-page .main--emphasize,
  .is-medium-tall-page .main .inner-content {
    background-image: url(/wp-content/themes/schoutenfood/dist/images/background-organic-shape-2-purple.svg), url(/wp-content/themes/schoutenfood/dist/images/background-organic-shape-3-orange.svg);
    background-repeat: no-repeat;
    background-position: left 40%, right 70%;
    background-size: auto auto;
  }
  .background-shapes-tree,
  .is-large-tall-page .main--emphasize,
  .is-large-tall-page .main .inner-content {
    background-image: url(/wp-content/themes/schoutenfood/dist/images/background-organic-shape-1.svg), url(/wp-content/themes/schoutenfood/dist/images/background-organic-shape-2.svg), url(/wp-content/themes/schoutenfood/dist/images/background-organic-shape-3.svg);
    background-repeat: no-repeat;
    background-position: 2% 139px, left 70%, right 40%;
    background-size: auto auto;
  }
}
:root:root .main--no-headerimage {
  margin-top: 25px;
}
@media (min-width: 46.25em) {
  :root:root .main--no-headerimage {
    padding-top: 40px;
    background-position: 2% 0, left 70%, right 40%;
  }
}

.error404 .main #inner-content,
.archive .main #inner-content {
  margin-top: 3.529rem;
  margin-bottom: 3.529rem;
  padding-top: 2rem;
  padding-bottom: 2rem;
}

.archive .main #inner-content {
  padding: 0;
  background: transparent;
  box-shadow: none;
}

figure.aligncenter,
img.aligncenter {
  display: block;
  clear: both;
  margin-right: auto;
  margin-left: auto;
  text-align: center;
}

@media (min-width: 41.5625em) {
  .main #inner-content,
  .main .inner-content {
    padding: 3em;
  }
  .main #inner-content,
  .main .inner-content,
  .main--emphasize {
    margin-top: -140px;
  }
  .entry-content .alignleft,
  .entry-content img.alignleft {
    display: inline;
    float: left;
    margin-right: 1em;
  }
  .entry-content .alignright,
  .entry-content img.alignright {
    display: inline;
    float: right;
    margin-left: 1em;
  }
  .entry-content .aligncenter {
    display: block;
    clear: both;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }
  .entry-content .wp-block-image .aligncenter,
  .entry-content .wp-block-image .alignleft,
  .entry-content .wp-block-image .alignright {
    display: table !important;
  }
}
/* post meta */
.byline {
  color: #999999;
}

/* entry content */
.entry-content {
  /*
  	image alignment on a screen this size may be
  	a bit difficult. It's set to start aligning
  	and floating images at the next breakpoint,
  	but it's up to you. Feel free to change it up.
  	*/
}
.entry-content ul {
  margin-left: 7px;
  padding-left: 0;
  list-style-type: disc;
}
.entry-content li {
  margin-left: 0.5em;
}
.entry-content dd {
  margin-bottom: 1.5em;
  margin-left: 0;
  color: #787878;
  font-size: 0.9em;
}
.entry-content img {
  max-width: 100%;
  height: auto;
  margin: 0 0 1.5em 0;
}
.entry-content video,
.entry-content object {
  max-width: 100%;
  height: auto;
}
.entry-content pre {
  padding: 10px;
  border: 1px solid #CECECE;
  background: #EEEEEE;
}

/* end .entry-content */
.wp-caption {
  max-width: 100%;
  padding: 5px;
  /* images inside wp-caption */
}
.wp-caption img {
  width: 100%;
  max-width: 100%;
  margin-bottom: 0;
}
.wp-caption p.wp-caption-text {
  margin: 4px 0 7px;
  text-align: center;
  font-size: 0.9em;
  font-style: italic;
}

/* end .wp-caption */
.page-ending {
  text-align: center;
  font-size: 1.5em;
  font-style: italic;
  line-height: 1.5em;
}

/* image gallery styles */
/* end .gallery */
/* gallery caption styles */
/*********************
SIDEBARS & ASIDES
*********************/
@media (min-width: 1030px) {
  .widgettitle {
    margin-bottom: 0.75em;
    border-bottom: 2px solid #444444;
  }
  .widget ul li {
    /* deep nesting */
  }
  .widget ul li ul {
    margin-top: 0.75em;
    padding-left: 1em;
  }
}
.table-responsive {
  display: block;
  overflow-x: auto;
  width: 100%;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
}

.table {
  width: 100%;
  max-width: 100%;
  margin-bottom: 1rem;
  border-collapse: collapse;
  background-color: transparent;
}

.table th,
.table td {
  padding: 0.75rem;
  vertical-align: top;
  border-top: 1px solid #DEE2E6;
  text-align: left;
}

.table--small {
  font-size: 0.8rem;
}

.table thead th {
  vertical-align: bottom;
  border-bottom: 2px solid #DEE2E6;
}

.table tbody + tbody {
  border-top: 2px solid #DEE2E6;
}

.table .table {
  background-color: #FFFFFF;
}

input,
textarea {
  padding: 11.5px 15px;
  border: 1px solid #E3E7E9;
  border-radius: 3px;
  background: #FFFFFF;
}

/**
 * Styling acceptace input
 */
.wpcf7-checkbox input,
.wpcf7-acceptance input {
  display: inline;
  width: auto !important;
}

.wpcf7-checkbox label,
.wpcf7-acceptance label {
  display: inline;
  padding-left: 10px;
}

.wpcf7-checkbox .wpcf7-list-item,
.wpcf7-acceptance .wpcf7-list-item {
  margin: 0;
}

/*
 * Can be applied global, tthe .wpcf7 prefix is just to advert unwanted side effect
 */
select {
  display: block;
  width: 100%;
  max-width: 100%;
  padding: 0.6em 1.4em 0.5em 0.8em;
  padding: 11.5px 15px;
  border: 1px solid #E3E7E9;
  border-radius: 3px;
  background-color: #FFFFFF;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%2300B592%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.5-12.8z%22%2F%3E%3C%2Fsvg%3E");
  background-repeat: no-repeat, repeat;
  background-position: right 0.7em top 50%, 0 0;
  background-size: 0.65em auto, 100%;
  font-size: 16px;
  line-height: 1.3;
  -moz-appearance: none;
  -webkit-appearance: none;
  appearance: none;
}

.wpcf7 select::-ms-expand {
  display: none;
}

.wpcf7 select:hover {
  border-color: #00B592;
}

.wpcf7 select:focus {
  color: #222222;
  border-color: #00B592;
  outline: none;
  box-shadow: 0 0 1px 1px #E3E7E9;
  box-shadow: 0 0 0 3px -moz-mac-focusring;
}

select option {
  font-weight: normal;
}

.wpcf7-radio input {
  width: initial !important;
  margin-right: 5px;
}

.wpcf7-radio .wpcf7-list-item {
  display: block;
  padding: 3px 0;
  font-weight: normal;
  margin-left: 0;
}

.wpcf7-radio .wpcf7-list-item span {
  font-weight: normal;
}

textarea {
  font-family: "CeraPro", verdana, sans-serif;
}

.is-required label:after {
  content: "*";
  font-size: 0.8rem;
  color: #bbb;
  vertical-align: top;
  display: inline-block;
  padding-left: 2px;
}

label {
  margin-bottom: 5px;
  font-weight: 600;
  color: #444;
  display: block;
}

.form-group {
  width: 100%;
  text-align: left;
  margin-bottom: 1rem;
}
.form-group input, .form-group textarea {
  width: 100%;
}

.form-group--checkbox {
  display: flex;
  gap: 0.5rem;
  align-items: start;
}
.form-group--checkbox input {
  flex: none;
  width: auto;
  margin-top: 5px;
}
.form-group--checkbox label {
  line-height: 1.2;
}

.bijenvanger {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  height: 0;
  width: 0;
  z-index: -1;
}

[aria-hidden=true] a[href],
[aria-hidden=true] area[href],
[aria-hidden=true] input:not([disabled]),
[aria-hidden=true] select:not([disabled]),
[aria-hidden=true] textarea:not([disabled]),
[aria-hidden=true] button:not([disabled]),
[aria-hidden=true] [tabindex]:not([disabled]),
[aria-hidden=true] [contenteditable=true]:not([disabled]) {
  visibility: hidden;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
#lang_sel {
  position: relative;
  display: inline-block;
  height: 32px;
  font-family: verdana, arial, sans-serif;
}

/* hack to correct IE5.5 faulty box model */
* html #lang_sel {
  width: 12em;
  width: 12em;
}

/* remove all the bullets, borders and padding from the default list styling */
#lang_sel ul,
#lang_sel li {
  margin: 0 !important;
}

#lang_sel li:before {
  content: "" !important;
}

#lang_sel ul ul {
  width: 149px;
}

/* float the list to make it horizontal and a relative positon so that you can control the dropdown menu positon */
#lang_sel li {
  position: relative;
  float: left;
  width: 149px;
}

/* style the links for the top level */
#lang_sel a,
#lang_sel a:visited {
  display: block;
  padding-left: 10px;
  text-decoration: none !important;
  color: #40392E;
  border: 1px solid #F3F3F3;
  font-size: 0.6em;
  line-height: 24px;
}

/* a hack so that IE5.5 faulty box model is corrected */
* html #lang_sel a,
* html #lang_sel a:visited {
  width: 149px;
  width: 138px;
}

/* hide the sub levels and give them a positon absolute so that they take up no room */
#lang_sel ul ul {
  position: absolute;
  top: 25px;
  left: 0;
  visibility: hidden;
  width: 149px;
  height: 0;
  border-top: 1px solid #F3F3F3;
}

/* another hack for IE5.5 */
* html #lang_sel ul ul {
  top: 18px;
  top: 19px;
}

/* style the table so that it takes no ppart in the layout - required for IE to work */
#lang_sel table {
  position: absolute;
  top: 0;
  left: 0;
  border-collapse: collapse;
}

/* style the second level links */
#lang_sel ul ul a,
#lang_sel ul ul a:visited {
  height: auto;
  padding: 5px 10px;
  color: #444444;
  border-width: 0 1px 1px 1px;
  background: #FFFFFF;
  line-height: 1em;
}

/* yet another hack for IE5.5 */
* html #lang_sel ul ul a,
* html #lang_sel ul ul a:visited {
  width: 150px;
  width: 128px;
}

/* style the top level hover */
#lang_sel a:hover,
#lang_sel ul ul a:hover {
  background: #EEEEEE;
}

#lang_sel :hover > a,
#lang_sel ul ul :hover > a {
  background: #EEEEEE;
}

#lang_sel a.lang_sel_sel:after {
  float: right;
  padding-right: 10px;
  content: "▼";
}

/* make the second level visible when hover on first level list OR link */
#lang_sel ul li:hover ul,
#lang_sel ul a:hover ul {
  visibility: visible;
}

#lang_sel img.iclflag {
  position: relative;
  top: 1px;
  width: 18px;
  height: 12px;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/* ==========================================================================
 # HEADER
========================================================================== */
#container {
  padding-top: 37px;
}

@media (min-width: 48em) {
  #container.has-submenu {
    padding-top: 107px;
  }
}
.top-header {
  position: fixed;
  z-index: 1268;
  top: 0;
  left: 0;
  width: 100%;
  height: 67px;
  background: white;
  /* Force Hardware Acceleration */
  will-change: transform;
  transition: transform 0.5s;
}
@media (min-width: 48em) {
  .top-header {
    background-color: #F9F7F1;
  }
}
.top-header a,
.top-header a:visited {
  text-transform: lowercase;
  font-size: 0.88rem;
}

.top-header.is-hidden {
  transform: translateY(-100%);
}

.top-header__top-bar {
  display: flex;
  align-items: space-between;
  justify-content: center;
  width: 100%;
  height: 67px;
  padding-left: 25px;
}
@media (min-width: 48em) {
  .top-header__top-bar {
    padding-right: 25px;
  }
}

.top-header__bottom-bar {
  display: none;
  position: relative;
  z-index: 1;
  clear: both;
  width: 100%;
  transform: translateZ(0);
  will-change: transform;
  transition: transform 0.5s;
  background: white;
  height: 77px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}
.has-no-submenu .top-header__bottom-bar {
  display: none;
}
@media (min-width: 46.25em) {
  .top-header__bottom-bar {
    display: flex;
    height: 100%;
    align-items: center;
  }
}

.top-header__home-bar {
  justify-content: center;
}
@media (min-width: 61.25em) {
  .top-header__home-bar {
    height: 100%;
    justify-content: space-between;
  }
}

.top-header__overlay,
.page-overlay {
  position: fixed;
  z-index: 1000;
  top: 0;
  right: 0;
  left: 0;
  display: none;
  height: 100vh;
  background: rgba(0, 0, 0, 0.4);
}

.menu-is-open,
.filtermenu-is-open {
  overflow: hidden;
}

@media (max-width: 47.9375em) {
  .menu-is-open .top-header {
    height: 100%;
  }
}

.filtermenu-is-open .page-overlay,
.menu-is-open .top-header__overlay {
  display: block;
}

/* ==========================================================================
 # WHITE HEADER
========================================================================== */
.top-header--white {
  background: white;
}

/* ==========================================================================
 # LOGO
========================================================================== */
.top-header__logo {
  flex: 1;
  display: flex;
  align-items: center;
}

.top-header__logo__link {
  display: inline-block;
}

:root:root .top-header__logo__image {
  width: 140px;
  height: auto;
  vertical-align: middle;
  transition: all 0.2s ease;
}
@media (min-width: 61.25em) {
  :root:root .top-header__logo__image {
    width: 211px;
    height: 52.93px;
  }
}

/**
 * on the homepage there is for desktop a secondary logo in the bottom bar
 */
.top-header__logo--home {
  display: none;
}

@media (min-width: 61.25em) {
  #container:not(.has-active-industry) .top-header__logo__link {
    display: none;
  }
  #container:not(.has-active-industry) .top-header__logo--home {
    display: flex;
  }
  #container:not(.has-active-industry) .top-header__logo--home .top-header__logo__link {
    display: block;
  }
}
.top-header__bottom-bar__current-industry {
  background: none;
  color: inherit;
  border: none;
  padding: 0;
  font: inherit;
  outline: inherit;
  color: #00B592;
  font-weight: 700;
  font-size: 1rem;
  transition: color 0.2s ease;
}
.top-header__bottom-bar__current-industry svg {
  pointer-events: none;
  fill: currentColor;
  width: 13px;
  height: 13px;
  display: inline;
  vertical-align: middle;
}
@media (min-width: 61.25em) {
  .top-header__bottom-bar__current-industry {
    font-size: 1.33rem;
  }
}

button.top-header__bottom-bar__current-industry {
  cursor: pointer;
}
button.top-header__bottom-bar__current-industry:hover, button.top-header__bottom-bar__current-industry:focus {
  color: #3E6549;
}

.admin-bar .top-header {
  top: 46px;
}

@media screen and (min-width: 601px) {
  .admin-bar .top-header {
    top: 32px;
  }
}
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/* ==========================================================================
 # POST CONTENT
========================================================================== */
.single .entry-content h2:not(.post-card__title):not(.has-medium-font-size),
.page .entry-content h2:not(.post-card__title):not(.has-medium-font-size) {
  margin-top: 2rem;
}
.single .entry-content a:not(.post-card),
.page .entry-content a:not(.post-card) {
  text-decoration: underline;
}

/**
 * Break out of the container
 */
.entry-content.u-container-medium .alignfull,
.entry-content.u-container-medium .alignwide,
.u-container-medium .wp-block-columns,
.u-container-medium .wp-block-separator {
  max-width: 96vw;
  margin-right: calc(-48vw + 50%);
  margin-left: calc(-48vw + 50%);
  padding-right: 1rem;
  padding-left: 1rem;
}

:root:root .wp-block-column .alignfull,
:root:root .wp-block-column .alignwide {
  width: 100%;
  height: auto;
  margin: 0;
  padding: 0;
}

/**
 * Break out of the container but not bigger than the max width
 */
@media only screen and (min-width: 1200px) {
  .entry-content.u-container-medium .alignfull,
  .entry-content.u-container-medium .alignwide,
  .u-container-medium .wp-block-columns,
  .u-container-medium .wp-block-separator {
    max-width: 1200px;
    margin-right: -216px;
    margin-left: -216px;
  }
  .entry-content.u-container-medium .alignwide,
  .u-container-medium .wp-block-columns,
  .u-container-medium .wp-block-separator {
    padding-right: 3rem;
    padding-left: 3rem;
  }
  .u-container-medium .wp-block-columns.is-small {
    padding-right: 0;
    padding-left: 0;
  }
}
/* ==========================================================================
 # QUOTES
========================================================================== */
.wp-block-pullquote {
  margin: 1.5em 0;
  padding: 1em 0;
  text-align: center;
  color: #00B592;
  border-top: 2px solid #00B592;
  border-bottom: 2px solid #00B592;
}

.wp-block-pullquote.alignleft,
.wp-block-pullquote.alignright {
  max-width: 305px;
}

.wp-block-pullquote.alignleft p,
.wp-block-pullquote.alignright p {
  font-size: 20px;
}

.wp-block-pullquote blockquote {
  border: 0;
}

.wp-block-pullquote p {
  margin: 0.3em 0;
  font-size: 22px;
  font-weight: 600;
  line-height: 1.6;
}

.wp-block-pullquote cite,
.wp-block-pullquote footer {
  position: relative;
  text-transform: uppercase;
  font-style: normal;
}

.wp-block-pullquote .has-text-color a {
  color: inherit;
}

.wp-block-pullquote:not(.is-style-solid-color) {
  background: 0 0;
}

.wp-block-pullquote.is-style-solid-color {
  border: none;
}

.wp-block-pullquote.is-style-solid-color blockquote {
  max-width: 60%;
  margin-right: auto;
  margin-left: auto;
  text-align: left;
}

.wp-block-pullquote.is-style-solid-color blockquote p {
  margin-top: 0;
  margin-bottom: 0;
  font-size: 24px;
}

.wp-block-pullquote.is-style-solid-color blockquote cite {
  text-transform: none;
  font-style: normal;
}

.wp-block-pullquote cite {
  color: inherit;
}

/* ==========================================================================
 # POST CARD
========================================================================== */
.post-card {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: white;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
  position: relative;
  color: #40392E;
}

.post-card__header img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.post-card__fallback-image {
  background-color: #00B592;
  background-image: url(/wp-content/themes/schoutenfood/dist/images/schouten-name-placeholder.svg);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}

.post-card-container .o-grid__item:nth-of-type(5n - 3) .post-card__fallback-image {
  background-color: #A1CD5C;
}

.post-card-container .o-grid__item:nth-of-type(5n - 2) .post-card__fallback-image {
  background-color: #23b500;
}

.post-card-container .o-grid__item:nth-of-type(5n - 1) .post-card__fallback-image {
  background-color: rgb(125.5, 181, 0);
}

.post-card-container .o-grid__item:nth-of-type(5n) .post-card__fallback-image {
  background-color: rgb(85.6666666667, 0, 181);
}

.post-card-container--rich .post-card--horizontal {
  flex-grow: 1;
}

.post-card__content {
  padding-top: 2rem;
  padding-right: 2rem;
  padding-left: 2rem;
  flex: 1 0 auto;
}

.post-card__excerpt {
  -webkit-line-clamp: 3;
  display: -webkit-inline-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-size: 0.9rem;
}

.post-card__footer {
  padding-right: 2rem;
  padding-bottom: 2rem;
  padding-left: 2rem;
  flex: 0 1 auto;
}
.post-card__footer .button {
  margin-bottom: 0;
}

ul.post-card__footer__icons {
  display: flex;
  flex-wrap: wrap;
  font-size: 0.9rem;
  margin: 0;
  padding: 0;
  list-style-type: none;
}
ul.post-card__footer__icons li {
  display: flex;
  align-items: center;
  margin: 0;
}
ul.post-card__footer__icons li:not(:last-child) {
  margin-right: 1rem;
}
ul.post-card__footer__icons img {
  width: 1em;
  height: 1em;
  margin: 0 6px 0 0;
}

.post-card__title {
  word-wrap: break-word;
  color: #40392E;
  font-size: 1.444rem;
  margin-bottom: 0;
  line-height: 1.4 a;
  line-height-color: #40392E;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  .post-card__title {
    font-size: clamp(1.222rem, 1.1331111111rem + 0.5vw, 1.444rem);
  }
}
.post-card__title a:focus,
.post-card__title a:hover {
  color: #00B592;
}

.post-card__forward-icon {
  padding: 0 1.1764rem 0.588rem 1.1764rem;
  text-align: right;
}
.post-card__forward-icon svg {
  width: 11px;
  height: 11px;
  fill: #F47A2C;
}

.post-card--small .post-card__content {
  padding-top: 1.1764rem;
  padding-right: 1.1764rem;
  padding-left: 1.1764rem;
  font-size: 0.9rem;
}

.post-card--horizontal {
  display: block;
}
.post-card--horizontal:not(:last-of-type) {
  margin-bottom: 1rem;
}
.post-card--horizontal .post-card__content {
  width: calc(100% - 54px);
}
.post-card--horizontal img {
  height: 100%;
  width: 100%;
  display: block;
  margin: 0;
  object-fit: cover;
}
.post-card--horizontal .post-card__fallback-image {
  width: 100%;
  height: 100%;
  min-height: 120px;
}
.post-card--horizontal .post-card__title {
  margin: 0;
  font-size: 1.222rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  .post-card--horizontal .post-card__title {
    font-size: clamp(0.889rem, 0.7645555556rem + 0.7vw, 1.222rem);
  }
}
.post-card--horizontal .post-card__forward-icon {
  margin-top: auto;
}
@media (min-width: 46.25em) {
  .post-card--horizontal {
    display: flex;
    flex-grow: 1;
  }
  .post-card--horizontal > * {
    flex-grow: 1;
  }
}

/* ==========================================================================
 # POST CARD LINK
========================================================================== */
a.post-card {
  transition: all 0.2s ease;
  transform: translateY(0);
}
a.post-card:focus, a.post-card:hover {
  transform: translatey(-2px);
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.1);
}

/* ==========================================================================
 # POST CARD CAPTION
========================================================================== */
.post-card--caption .post-card__title {
  margin: 0;
  padding-left: 0;
  border-left: 0;
  font-size: 1rem;
  font-weight: 600;
}

.post-card--caption .post-card__content {
  padding: 1.1764rem;
  font-size: 0.9rem;
}

/* ==========================================================================
 # Pagination
========================================================================== */
.pagination {
  display: flex;
  margin-top: 1.1764rem;
  justify-content: center;
  align-items: center;
}

.pagination__item {
  display: inline-block;
}
.pagination__item a,
.pagination__item span {
  display: block;
  width: 35px;
  height: 35px;
  transition: all 0.2s ease;
  color: #40392E;
  background: transparent;
  line-height: 35px;
}
.pagination__item a:hover,
.pagination__item a:focus {
  color: white;
  background: #A1CD5C;
}
.pagination__item .current {
  background: #E3E7E9;
  font-weight: 600;
}
.pagination__item .prev,
.pagination__item .next {
  transition: all 0.2s ease;
  transform: translateX(0);
  background: #A1CD5C;
}
.pagination__item .prev svg,
.pagination__item .next svg {
  width: 12px;
  height: 12px;
  margin-top: 11px;
  fill: white;
}
.pagination__item .prev:hover, .pagination__item .prev:focus,
.pagination__item .next:hover,
.pagination__item .next:focus {
  background: rgb(145.2450704225, 196.6197183099, 64.6802816901);
}
.pagination__item .prev:focus,
.pagination__item .prev:hover {
  transform: translateX(-2px);
}
.pagination__item .next:focus,
.pagination__item .next:hover {
  transform: translateX(2px);
}

/* ==========================================================================
 # TIMELINE PAGE
========================================================================== */
.timeline-container {
  width: 100%;
  height: auto;
  color: #4a3f30;
}
@media (max-width: 46.24em) {
  .timeline-container {
    margin-top: -1rem;
  }
}
.timeline-container .swiper-slide {
  position: relative;
  width: auto;
  line-height: 0;
  font-size: 0;
}
.timeline-container .swiper-slide:not(.swiper-slide--empty):before {
  position: absolute;
  content: " ";
  display: block;
  width: 1px;
  height: 300px;
  background: gray;
  top: 140px;
  left: 60px;
  transform: translateX(-50%);
  opacity: 0;
}
.timeline-container .swiper-slide:not(.swiper-slide--empty):after {
  position: absolute;
  content: " ";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 30px;
  border: 10px solid #00ab8a;
  top: 430px;
  left: 60px;
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity 1s ease;
}
.timeline-container .swiper-slide-active:not(.swiper-slide--empty):before,
.timeline-container .swiper-slide-active:not(.swiper-slide--empty):after {
  opacity: 1;
}
.timeline-container img {
  margin-top: -50px;
  height: 380px;
  width: auto;
  vertical-align: bottom;
}
@media (min-width: 20em) {
  .timeline-container img {
    height: 480px;
  }
}
.timeline-container .swiper-container {
  overflow: visible !important;
}
.timeline-container .swiper-slide__intro {
  font-size: 13px;
  line-height: 1.2;
  width: 200px;
  max-width: 100%;
  height: 190px;
  display: block;
  transition: font-size 0.2s ease;
  margin: 0;
  opacity: 0.6;
}
@media (min-width: 20em) {
  .timeline-container .swiper-slide__intro {
    font-size: 14px;
    width: 230px;
  }
}
.timeline-container .swiper-slide-active .swiper-slide__intro {
  font-size: 15px;
  color: black;
  opacity: 1;
}
@media (min-width: 20em) {
  .timeline-container .swiper-slide-active .swiper-slide__intro {
    font-size: 16px;
  }
}
.timeline-container .swiper-slide-active .swiper-slide__location {
  font-size: 16px;
}
.timeline-container .swiper-slide__year {
  color: #adaa99;
}
@media (min-width: 46.25em) {
  .timeline-container .swiper-slide__year {
    display: none;
  }
}
.timeline-container .swiper-slide__location {
  padding-top: 1rem;
  font-size: 14px;
  display: inline-block;
  color: #adaa99;
}
.timeline-container .swiper-button-next,
.timeline-container .swiper-button-prev {
  display: none;
  border: 1px solid rgb(150, 150, 134);
  border-radius: 100px;
  width: 40px;
  height: 40px;
  color: rgb(150, 150, 134);
  top: auto;
  bottom: 310px;
  background: white;
}
.timeline-container .swiper-button-next:after,
.timeline-container .swiper-button-prev:after {
  position: relative;
  font-size: 16px;
}
@media (min-width: 20em) {
  .timeline-container .swiper-button-next,
  .timeline-container .swiper-button-prev {
    display: flex;
  }
}
.timeline-container .swiper-button-prev {
  left: -20px;
}
.timeline-container .swiper-button-prev:after {
  right: 1px;
}
.timeline-container .swiper-button-next {
  right: -20px;
}
.timeline-container .swiper-button-next:after {
  left: 1px;
}
.timeline-container .swiper-button-disabled {
  display: none;
}

[data-current-slide="1"] ~ .swiper-button-prev {
  display: none !important;
}

[data-current-slide="10"] ~ .swiper-button-next {
  display: none !important;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
.social-share {
  text-align: center;
  margin: 2rem 0;
}
.social-share .social-share__title {
  margin-bottom: 0.5rem;
  color: #00B592;
  font-size: 1.2rem;
}
.social-share ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  justify-content: center;
}
.social-share li {
  margin: 4px 0.6rem 4px 0;
  color: #fff;
  display: block;
  border-radius: 9999px;
  transition: transform 0.1s ease;
  height: auto;
  background: #00B592;
}
.social-share li:last-child {
  margin-right: 0;
}
.social-share li:hover {
  transform: scale(1.1);
}
.social-share a {
  display: block;
  line-height: 0;
  transition: transform 0.1s ease;
  padding: 0.4rem;
  color: currentColor;
}
.social-share svg {
  fill: currentColor;
  width: 1.2rem;
  height: 1.2rem;
}
.social-share li:last-child {
  padding-left: 0;
}
.social-share .social-share__facebook {
  background: #3b5998;
}
.social-share .social-share__twitter {
  background: #00aced;
}
.social-share .social-share__linkedin {
  background: #007bb6;
}
.social-share .social-share__whatsapp {
  background: #25d366;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/* ==========================================================================
 # MENU BUTON
========================================================================== */
.menu-button {
  position: relative;
  overflow: hidden;
  cursor: pointer;
  text-indent: -9999px;
  border: 0;
  background: none;
  box-shadow: none;
  font-size: 0;
  z-index: 888;
  appearance: none;
  width: 45px;
  height: 58px;
  margin: 0;
  padding: 17px 23px 18px 0;
}
.menu-button .menu-button__inner {
  position: relative;
  display: block;
  top: 3px;
  height: 19px;
}
.menu-button .menu-button__inner span {
  display: block;
  position: absolute;
  height: 3px;
  border-radius: 4px;
  width: 100%;
  background: #00B592;
  opacity: 1;
  left: 0;
  transform: rotate(0deg);
  transition: 0.25s ease-in-out;
}
.menu-button .menu-button__inner span:nth-child(1) {
  top: 0px;
}
.menu-button .menu-button__inner span:nth-child(2),
.menu-button .menu-button__inner span:nth-child(3) {
  top: 8px;
}
.menu-button .menu-button__inner span:nth-child(4) {
  top: 16px;
}
.menu-is-open .menu-button .menu-button__inner span:nth-child(1) {
  top: 8px;
  width: 0%;
  left: 50%;
}
.menu-is-open .menu-button .menu-button__inner span:nth-child(2) {
  transform: rotate(45deg);
}
.menu-is-open .menu-button .menu-button__inner span:nth-child(3) {
  transform: rotate(-45deg);
}
.menu-is-open .menu-button .menu-button__inner span:nth-child(4) {
  top: 8px;
  width: 0%;
  left: 50%;
}

/* ==========================================================================
 # MAIN MENU
========================================================================== */
.top-header .hide-mobile {
  display: none;
}

.top-header__primary-nav a {
  color: #40392E;
}
.top-header__primary-nav .icon {
  position: relative;
  vertical-align: middle;
  width: 8.3px;
  height: 4.9px;
  pointer-events: none;
  fill: #40392E;
}
.top-header__primary-nav .sub-menu-button {
  display: inline-block;
  padding: 12px 12px 10px 3px;
  border: none;
}
.top-header__primary-nav .sub-menu-button:focus {
  outline: none;
}
.top-header__primary-nav .sub-menu-button:focus svg {
  fill: #00B592;
}
.top-header__primary-nav .has-open-submenu svg {
  transform: rotate(180deg);
}
.top-header__primary-nav .sub-menu {
  display: none;
}
.top-header__primary-nav .sub-menu.is-open {
  display: block;
}
.top-header__primary-nav .menu-header {
  display: block;
  margin: 0;
  padding: 20px;
  color: white;
  background: #00B592;
  font-size: 1.8rem;
  font-weight: 600;
  line-height: 1;
}

/* ==========================================================================
	# MOBILE MENU
========================================================================== */
@media (max-width: 47.9375em) {
  .top-header__primary-nav {
    position: fixed;
    z-index: 777;
    top: 67px;
    right: 0;
    overflow-y: scroll;
    width: 100%;
    height: calc(100% - 67px);
    padding: 0;
    display: none;
    transition: opacity 0.2s ease;
    color: white;
    background: #00B592;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
    flex-direction: column;
  }
  .top-header__primary-nav.is-open {
    display: block;
  }
  .top-header__primary-nav ul {
    max-width: 585px;
    margin-left: auto;
    margin-right: auto;
  }
  .top-header__primary-nav li {
    position: relative;
  }
  .top-header__primary-nav li:focus > .menu-item-link, .top-header__primary-nav li:hover > .menu-item-link {
    border-left-color: rgba(255, 255, 255, 0.7);
  }
  .top-header__primary-nav a {
    display: inline-block;
    padding: 14px 25px 0 25px;
    transition: color 0.2s ease;
    color: #E7E1D0;
    font-size: 1rem;
  }
  .top-header__primary-nav a:focus, .top-header__primary-nav a:hover {
    color: white !important;
  }
  .top-header__primary-nav .sub-menu-button,
  .top-header__primary-nav .sub-menu-button:focus {
    top: 1px;
    right: 0;
    position: relative;
    display: inline-block;
    color: #E7E1D0;
  }
  .top-header__primary-nav .icon {
    fill: currentColor;
  }
  .top-header__primary-nav .sub-menu {
    width: 100%;
    flex: none;
  }
  .top-header__primary-nav .sub-menu a {
    padding: 6px 0 6px 35px;
    color: #E7E1D0;
  }
  .top-header__primary-nav__top {
    background: #0EA283;
    padding-bottom: 18px;
  }
  .top-header__primary-nav__bottom {
    padding-top: 16px;
  }
  .top-nav--industries .top-menu-item-link {
    color: white;
    font-size: 1.11rem;
    font-weight: 700;
    display: flex;
    width: auto;
    flex-grow: 1;
    align-content: center;
    align-items: center;
    opacity: 1;
    transition: opacity 0.2s ease;
  }
  .top-nav--industries .top-menu-item-link svg {
    margin-left: 11px;
    margin-right: 0;
    width: 12px;
    height: 8px;
  }
  .top-nav--industries > li {
    display: flex;
    gap: 10px;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
  }
  .top-nav--industries > li:not(:last-child) {
    margin-bottom: 6px;
  }
  .top-nav--industries.has-child-with-open-submenu .top-menu-item-link {
    opacity: 0.55;
  }
  .top-nav--industries .has-open-submenu .top-menu-item-link {
    opacity: 1;
  }
  :root .top-nav--industries .top-menu-item-link {
    font-size: 1.33rem;
    padding-bottom: 1rem;
  }
  :root .top-nav--industries .top-menu-item-link svg {
    width: 12px;
    height: 8px;
  }
}
@media (max-width: 19.99em) {
  .top-header__primary-nav a {
    padding: 14px 25px 3px 25px;
  }
  .top-header__primary-nav.is-open {
    display: flex;
  }
  .top-header__primary-nav > li:last-child a {
    padding-bottom: 2rem;
  }
  .top-header__primary-nav__top {
    padding-top: 1rem;
    flex-grow: 1;
    order: 2;
  }
  .top-header__primary-nav__top ul {
    height: 100%;
    display: flex;
    flex-direction: column;
  }
  .top-header__primary-nav__top li {
    display: block;
  }
  .top-header__primary-nav__top a {
    color: #E7E1D0;
  }
  .top-header__primary-nav__top a.sub-menu-button svg {
    fill: #E7E1D0;
  }
}
@media (min-width: 20em) and (max-width: 47.9375em) {
  .top-header__primary-nav__top {
    padding: 25px 0;
  }
  .top-header__primary-nav__top > ul > li {
    display: inline-block;
  }
  .top-header__primary-nav__top .icon-chevron-down {
    margin-left: 5px;
  }
  .top-header__primary-nav__top a {
    padding-right: 0;
  }
  .top-header__primary-nav__top .sub-menu {
    position: absolute;
    z-index: 6;
    width: 220px;
    margin-top: 1px;
    padding: 7px 0;
    background: rgb(0, 145.3, 117.2033149171);
    border-radius: 0 0 5px 5px;
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.95em;
  }
  .top-header__primary-nav__top .sub-menu a {
    padding-left: 16px;
  }
}
/* ==========================================================================
 # DESKTOP MENU
========================================================================== */
@media (min-width: 48em) {
  .top-header .hide-desktop {
    display: none !important;
  }
  .top-header .hide-mobile {
    display: inline-block;
  }
  :root .top-header__primary-nav .sub-menu {
    position: absolute;
    z-index: 6;
    width: 220px;
    margin-top: 1px;
    padding: 7px 0;
    border-top: 3px solid #00B592;
    border-radius: 0 0 5px 5px;
    background: white;
    box-shadow: 0 8px 10px 0 rgba(0, 0, 0, 0.05);
    font-size: 0.95em;
  }
  :root .top-header__primary-nav .sub-menu li {
    margin: 0;
  }
  :root .top-header__primary-nav a:focus,
  :root .top-header__primary-nav a:hover {
    color: #00B592;
  }
  :root .top-header__primary-nav a {
    display: block;
    padding: 7px 10px;
    transition: color 0.15s ease;
  }
  :root .top-header__primary-nav .top-menu-item-link {
    display: inline-block;
    padding: 20px 12px;
    height: 64px;
  }
  :root .top-header__primary-nav li.is-featured-link > a {
    background: #00B592;
    border-radius: 6px;
    padding: 8px 12px;
    height: auto;
    color: white;
    margin: 18px 0 14px 0;
    line-height: 1;
    transition: all 0.2s ease;
  }
  :root .top-header__primary-nav li.is-featured-link > a svg {
    fill: white;
  }
  :root .top-header__primary-nav li.is-featured-link:focus > a, :root .top-header__primary-nav li.is-featured-link:hover > a, :root .top-header__primary-nav li.is-featured-link.current-menu-item > a {
    background: rgb(0, 140.2, 113.0895027624);
    color: white;
  }
  :root .top-header__primary-nav li.is-featured-link:focus > a svg, :root .top-header__primary-nav li.is-featured-link:hover > a svg, :root .top-header__primary-nav li.is-featured-link.current-menu-item > a svg {
    fill: white;
  }
  .top-nav {
    display: flex;
  }
  .top-nav > li {
    position: relative;
    display: inline-block;
    flex: 1 0 auto;
  }
  .top-nav > li:active, .top-nav > li:hover, .top-nav > li.current-menu-item {
    border-bottom-color: #00B592;
  }
  .top-nav > li:active > a, .top-nav > li:hover > a, .top-nav > li.current-menu-item > a {
    color: #00B592;
  }
  .top-nav > li:active svg, .top-nav > li:hover svg, .top-nav > li.current-menu-item svg {
    fill: #00B592;
  }
  .top-nav > li:last-child .sub-menu {
    right: -25px;
  }
  .sub-menu-button.has-open-submenu {
    pointer-events: none;
  }
}
:root .top-nav--industries-top {
  justify-content: center;
  align-items: center;
}
:root .top-nav--industries-top a {
  font-weight: 700;
  color: #00B592;
  font-size: 1rem;
}
:root .top-nav--industries-top a:hover,
:root .top-nav--industries-top a:focus {
  color: #3E6549;
}
:root .top-nav--industries-top svg {
  margin-left: 15px;
  fill: currentColor;
  top: 1px;
  width: 7px;
  height: 13px;
  position: relative;
}
:root .top-nav--industries-top li:not(:last-child) {
  padding-right: 30px;
}
@media (min-width: 61.25em) {
  :root .top-nav--industries-top {
    width: 768px;
    justify-content: space-between;
  }
  :root .top-nav--industries-top a {
    font-size: 1.2rem;
  }
  :root .top-nav--industries-top svg {
    transform: translate(-3px);
    transition: all 0.2s ease;
  }
  :root .top-nav--industries-top a:hover svg,
  :root .top-nav--industries-top a:focus svg {
    transform: translate(0px);
    fill: #3E6549;
  }
  :root .top-nav--industries-top li:not(:last-child) {
    padding-right: 40px;
  }
}

.top-nav--industries-top__prefix {
  color: #BFBFBF;
  font-weight: 600;
  font-size: 0.9rem;
  top: 1px;
}

/* ==========================================================================
 # TOP NAV BUTTON
========================================================================== */
.top-nav--button {
  padding: 15px;
  position: relative;
  top: 54px;
  border-top: 3px solid #00B592;
  display: block;
  position: absolute;
  background: white;
  min-width: 238px;
  width: 100%;
  left: 0;
  list-style-type: none;
}
.top-nav--button li {
  display: block;
  list-style-type: none;
}
.top-nav--button a.is-active-item {
  color: #A0A192;
}
.top-nav--button a {
  font-size: 0.88rem;
}
@media (min-width: 61.25em) {
  .top-nav--button {
    font-size: 1rem;
    top: 59px;
  }
}

/* ==========================================================================
 # TOP NAV INDUSTRIES
========================================================================== */
@media (min-width: 48em) {
  .top-header__primary-nav__bottom {
    display: none;
  }
}
.top-nav--current-industry {
  padding-left: 51px;
  overflow-x: scroll;
  scrollbar-width: none; /* Firefox */
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: none;
}
.top-nav--current-industry::-webkit-scrollbar {
  display: none;
}
.top-nav--current-industry a {
  padding: 0 14px;
  color: #3E6549;
  font-weight: bold;
  font-size: 1rem;
}
.top-nav--current-industry a:hover, .top-nav--current-industry a:focus .top-nav--current-industry a.is-active {
  color: #00B592;
}
@media (min-width: 61.25em) {
  .top-nav--current-industry {
    padding-left: 71px;
  }
}

@media (max-width: 47.9375em) {
  :root:root .top-menu-item-link[rel=hidden] {
    margin-top: 1rem;
    background: #A1CD5C;
    padding-bottom: 1rem;
  }
  .top-menu-item-link[rel=hidden] ~ ul {
    background: #A1CD5C;
  }
  .top-menu-item-link[rel=hidden] ~ ul a {
    color: white;
  }
  li:not(.current-menu-item) .top-menu-item-link[rel=hidden] {
    display: none;
  }
}
/* ==========================================================================
 # LANGUAGE MEMU
========================================================================== */
.language-menu,
.language-menu .sub-menu a {
  color: white;
  margin-top: auto;
}
@media screen and (min-width: 768px) {
  .language-menu,
  .language-menu .sub-menu a {
    color: #40392E;
  }
}

:root .language-menu__trigger span {
  text-transform: initial;
  line-height: 1;
}
@media (max-width: 19.99em) {
  :root .language-menu__trigger {
    border: 1px solid #E7E1D0;
    padding: 0.7em 1.2em;
    margin: 1rem 0 0 25px;
  }
  :root .language-menu__trigger:hover {
    color: #40392E !important;
    background-color: #E7E1D0;
  }
}
@media (min-width: 48em) {
  :root .language-menu__trigger {
    padding: 20px 0 20px 12px;
    height: 67px;
    border: 0;
  }
  :root .language-menu__trigger span {
    flex: 1;
  }
  :root .language-menu__trigger .language-menu {
    margin-top: 0;
  }
}

.language-menu__current-code {
  pointer-events: none;
  display: none;
}
@media (min-width: 20em) {
  .language-menu__current-code {
    display: inline-block;
  }
}

.language-menu__current-language {
  pointer-events: none;
}
@media (min-width: 20em) {
  .language-menu__current-language {
    display: none;
  }
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/*********************
BUTTONS
*********************/
input[type=submit],
.button,
.wp-block-button__link {
  display: inline-block;
  padding: 0.7em 1.2em;
  cursor: pointer;
  transition: all 0.2s ease;
  text-decoration: none !important;
  text-transform: lowercase;
  color: #FFFFFF;
  border: 0;
  background-color: #F47A2C;
  font-family: "CeraPro", verdana, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
}
input[type=submit]:visited,
.button:visited,
.wp-block-button__link:visited {
  color: white;
}
input[type=submit]:hover, input[type=submit]:focus,
.button:hover,
.wp-block-button__link:hover,
.button:focus,
.wp-block-button__link:focus {
  color: #FFFFFF;
  background-color: rgb(242.7364864865, 106.722972973, 19.7635135135);
}

.button--rounded, .button--chip {
  border-radius: 10px;
}

.btnMoreInfo {
  display: block;
  width: 100%;
  margin: 2em 0 0 0;
  text-align: center;
}

.button--secondary, .button--chip,
.button--secondary:visited {
  background-color: #A1CD5C;
}
.button--secondary:hover, .button--chip:hover, .button--secondary:focus, .button--chip:focus,
.button--secondary:visited:hover,
.button--secondary:visited:focus {
  background-color: rgb(149.7464788732, 199.014084507, 72.485915493);
}

.button--green {
  background-color: #00B592;
}
.button--green:hover, .button--green:focus {
  background-color: rgb(0, 155.5, 125.4309392265);
}

.button--dark-green {
  background-color: rgb(62, 101, 73);
}
.button--dark-green:hover, .button--dark-green:focus {
  background-color: rgb(52.3006134969, 85.1993865031, 61.5797546012);
}

.btn-grey,
.btn-grey:visited {
  color: rgb(138.1818181818, 123.0681818182, 99.3181818182);
  border-color: #E6E6E6;
  background-color: #F3F3F3;
}
.btn-grey:hover, .btn-grey:focus,
.btn-grey:visited:hover,
.btn-grey:visited:focus {
  color: rgb(138.1818181818, 123.0681818182, 99.3181818182);
  background-color: rgb(230.25, 230.25, 230.25);
}
.btn-grey:active,
.btn-grey:visited:active {
  background-color: #00B592;
  background-image: linear-gradient(to bottom, rgb(0, 155.5, 125.4309392265), #00B592);
}

.btn-grey,
.btn-grey:visited {
  color: rgb(138.1818181818, 123.0681818182, 99.3181818182);
  border-color: #E6E6E6;
  background-color: #F3F3F3;
}
.btn-grey:hover, .btn-grey:focus,
.btn-grey:visited:hover,
.btn-grey:visited:focus {
  color: rgb(138.1818181818, 123.0681818182, 99.3181818182);
  background-color: rgb(230.25, 230.25, 230.25);
}
.btn-grey:active,
.btn-grey:visited:active {
  background-color: #00B592;
  background-image: linear-gradient(to bottom, rgb(0, 155.5, 125.4309392265), #00B592);
}

.btn-right {
  float: right;
}

.button--icon svg {
  width: 12px;
  height: 12px;
  margin-left: 5px;
  transition: all 0.2s ease;
  transform: translateX(0px);
  vertical-align: -0.05em;
  fill: white;
}
.button--icon:hover svg, .button--icon:focus svg, .button--icon:active svg {
  transform: translateX(3px);
  fill: white;
}

.is-style-outline > .wp-block-button__link,
:root .button--outline,
:root .button--outline:visited {
  transition: all 0.2s ease;
  color: #00B592;
  border-width: 2px;
  border-style: solid;
  border-radius: 10px;
  background-color: transparent;
  box-shadow: none;
  font-size: 1rem;
  font-weight: 500;
  overflow: hidden;
}
.is-style-outline > .wp-block-button__link:hover, .is-style-outline > .wp-block-button__link:focus, .is-style-outline > .wp-block-button__link:active,
:root .button--outline:hover,
:root .button--outline:focus,
:root .button--outline:active,
:root .button--outline:visited:hover,
:root .button--outline:visited:focus,
:root .button--outline:visited:active {
  color: white;
  border-color: #00B592;
  background: #00B592;
  box-shadow: none;
}

.button--outline.button--icon {
  position: relative;
}
.button--outline.button--icon svg {
  margin-left: 15px;
  vertical-align: -0.1em;
  fill: #00B592;
}
.button--outline.button--icon:hover svg, .button--outline.button--icon:focus svg, .button--outline.button--icon:active svg {
  fill: white;
}

:root .button--arrow,
:root .button--outline-arrow,
.is-style-button--arrow > .wp-block-button__link,
.is-style-button--outline-arrow > .wp-block-button__link {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23F47A2C%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) 61%;
  text-align: left;
  line-height: 1;
  padding: 13px 50px 11px 0;
}

.is-style-button--arrow > .wp-block-button__link,
.is-style-button--outline-arrow > .wp-block-button__link {
  background-color: transparent;
  border-radius: 0;
  color: #F47A2C;
  transition: background-position 0.2s ease;
}
.is-style-button--arrow > .wp-block-button__link:hover, .is-style-button--arrow > .wp-block-button__link:focus,
.is-style-button--outline-arrow > .wp-block-button__link:hover,
.is-style-button--outline-arrow > .wp-block-button__link:focus {
  background-color: transparent;
  color: #F47A2C;
  background-position: calc(100% - 5px) 61%;
}

:root .button--arrow {
  display: inline-block;
  background-color: transparent;
  border-radius: 0;
  color: #F47A2C;
  transition: background-position 0.2s ease;
}
:root .button--arrow:hover, :root .button--arrow:focus {
  background-color: transparent;
  color: #F47A2C;
  background-position: calc(100% - 5px) 61%;
}

:root .button--arrow-white {
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23FFFFFF%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
  color: white;
}
:root .button--arrow-white:hover, :root .button--arrow-white:focus {
  color: white;
}

:root .button--outline-arrow,
.is-style-button--outline-arrow > .wp-block-button__link {
  border: 1px solid #F47A2C;
  border-radius: 10px;
  padding: 13px 60px 13px 40px;
  background-position: calc(100% - 25px) 53%;
}
:root .button--outline-arrow:hover,
.is-style-button--outline-arrow > .wp-block-button__link:hover {
  background-position: calc(100% - 20px) 53%;
}

/**
 * Black link with a chevron
 */
:root .button--skinny-arrow {
  font-weight: 300;
  color: #40392E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2720%27 height=%2720%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%2340392E%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: calc(100% - 10px) 61%;
  padding: 0 70px 0 0;
  text-align: left;
  line-height: 1;
  text-decoration: none !important;
  transition: background-position 0.2s ease;
}
:root .button--skinny-arrow:hover, :root .button--skinny-arrow:focus {
  background-color: transparent;
  color: #40392E;
  background-position: calc(100% - 5px) 61%;
}

:root .button--outline.button--white,
:root .button--outline.button--white:visited {
  color: #FFFFFF;
  border-color: #FFFFFF;
  background: transparent;
}
:root .button--outline.button--white svg,
:root .button--outline.button--white:visited svg {
  fill: white;
}
:root .button--outline.button--white:hover, :root .button--outline.button--white:focus, :root .button--outline.button--white:active,
:root .button--outline.button--white:visited:hover,
:root .button--outline.button--white:visited:focus,
:root .button--outline.button--white:visited:active {
  color: rgb(78.8363636364, 70.2136363636, 56.6636363636);
  background-color: white;
}
:root .button--outline.button--white:hover svg, :root .button--outline.button--white:focus svg, :root .button--outline.button--white:active svg,
:root .button--outline.button--white:visited:hover svg,
:root .button--outline.button--white:visited:focus svg,
:root .button--outline.button--white:visited:active svg {
  fill: rgb(78.8363636364, 70.2136363636, 56.6636363636);
}

:root .button--outline.button--brand-tertiary {
  color: #F47A2C;
  border-color: #F47A2C;
  background: transparent;
}
:root .button--outline.button--brand-tertiary svg {
  fill: #F47A2C;
}
:root .button--outline.button--brand-tertiary:hover, :root .button--outline.button--brand-tertiary:focus, :root .button--outline.button--brand-tertiary:active {
  color: white;
  border-color: #F47A2C;
  background-color: #F47A2C;
}
:root .button--outline.button--brand-tertiary:hover svg, :root .button--outline.button--brand-tertiary:focus svg, :root .button--outline.button--brand-tertiary:active svg {
  fill: white;
}

:root .button--outline.button--brand-quinary {
  color: #4B3D2A;
  border-color: #4B3D2A;
  background: transparent;
}
:root .button--outline.button--brand-quinary svg {
  fill: #4B3D2A;
}
:root .button--outline.button--brand-quinary:hover, :root .button--outline.button--brand-quinary:focus, :root .button--outline.button--brand-quinary:active {
  color: white;
  border-color: #4B3D2A;
  background-color: #4B3D2A;
}
:root .button--outline.button--brand-quinary:hover svg, :root .button--outline.button--brand-quinary:focus svg, :root .button--outline.button--brand-quinary:active svg {
  fill: white;
}

:root .button--outline.button--fixed {
  display: flex;
  width: 220px;
  word-break: break-word;
  align-items: center;
  justify-content: space-between;
}

.button--fixed:not(.button--outline) {
  width: 320px;
  max-width: 96%;
  padding: 20px;
  text-align: left;
  font-weight: 600;
}

.button--fixed:not(.button--outline).button--icon {
  padding-right: 40px !important;
}
.button--fixed:not(.button--outline).button--icon svg {
  position: absolute;
  right: 20px;
  width: 20px;
  height: 20px;
}

.button--white,
.button--white:visited {
  position: relative;
  transition: all 0.2s ease-out;
  color: #00B592;
  background: white;
  background: linear-gradient(to right, rgb(0, 145.3, 117.2033149171), rgb(0, 145.3, 117.2033149171) 50%, white 50%, white 100%);
  background-position: 100%;
  background-size: 200%;
}
.button--white:hover, .button--white:focus,
.button--white:visited:hover,
.button--white:visited:focus {
  color: white;
  background-position: 0;
}
.button--white:hover:before, .button--white:focus:before,
.button--white:visited:hover:before,
.button--white:visited:focus:before {
  width: 100%;
}

.button--ghost {
  background: transparent !important;
  padding: 0 !important;
  padding-bottom: 1px;
  border-radius: 0;
  color: #40392E;
  border-bottom: 1px solid transparent;
  font-weight: 500;
}
.button--ghost:hover, .button--ghost:focus {
  color: #40392E;
  border-bottom-color: #40392E;
}

.button--small, .button--chip {
  padding: 0.5em 1em;
  font-size: 0.9rem;
}

.button-group {
  margin-right: -0.588rem;
  margin-bottom: -0.588rem;
  margin-left: -0.588rem;
}
.button-group .button, .button-group .wp-block-button__link {
  margin-right: 0.588rem;
  margin-bottom: 0.588rem;
  margin-left: 0.588rem;
}

.button-group--equal-heights {
  display: flex;
  flex-wrap: wrap;
}
.button-group--equal-heights.u-align-center {
  justify-content: center;
}

.button-group--small {
  margin-right: -3px;
  margin-bottom: -6px;
  margin-left: -3px;
}
.button-group--small .button, .button-group--small .wp-block-button__link {
  margin-right: 3px;
  margin-bottom: 6px;
  margin-left: 3px;
}

/*********************
FORM STYLING
*********************/
.icon-search,
input[type=submit].icon {
  position: absolute;
  top: 0;
  right: 0;
  width: 42px;
  height: 42px;
}

.icon-search {
  top: 13px;
  right: 15px;
  width: 17px;
  height: 17px;
  background-image: url(/wp-content/themes/schoutenfood/dist/images/search.svg);
}

input[name=search] {
  width: 100%;
  border: none;
  border-radius: 1px;
  background: white;
}

button.is-loading,
.button.is-loading,
.is-loading.wp-block-button__link {
  opacity: 0.7;
  pointer-events: none;
  cursor: not-allowed;
}
button.is-loading .button__loader,
.button.is-loading .button__loader,
.is-loading.wp-block-button__link .button__loader {
  visibility: visible;
  width: 1em;
  margin-left: 10px;
}

.button__loader {
  display: inline-block;
  visibility: hidden;
  width: 0;
  height: 1em;
  transition: all 0.2s ease;
  vertical-align: middle;
}
.button__loader:after {
  display: block;
  width: 10px;
  height: 10px;
  content: "";
  animation: spin 1s infinite;
  animation-timing-function: linear;
  border-width: 3px;
  border-style: solid;
  border-color: white white transparent white;
  border-radius: 1em;
}

/* ==========================================================================
 # CHIPS
========================================================================== */
.button--chip {
  display: flex;
  align-items: center;
}
.button--chip svg {
  pointer-events: none;
  width: 15px;
  height: 15px;
  margin-left: 5px;
  color: white;
  padding-bottom: 1px;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.page-template-page-staff .content-wrap {
  position: relative;
  z-index: 999;
  margin: -40px auto 0 auto;
}

.staff-directory-divider {
  width: 90%;
  margin: 15px 0;
  border-top: solid black thin;
}

.staff-directory {
  display: flex;
  flex-direction: row;
  margin-top: 1em;
  padding-bottom: 600px;
  flex-wrap: wrap;
  justify-content: space-between;
}
.staff-directory img {
  margin-bottom: 0;
}
.staff-directory h3 {
  margin: 0;
}

.staff-directory .person {
  position: relative;
  width: 100%;
  margin-bottom: 1em;
}
.staff-directory .person:hover {
  cursor: pointer;
}
.staff-directory .person:hover .person-header {
  box-shadow: 0px 0px 1px 1px #b3b3b3;
}
.staff-directory .person p {
  word-break: break-word;
  font-size: 0.8em;
}
.staff-directory .person .position {
  margin: 0;
  font-weight: 600;
}
.staff-directory .person .extra-info {
  padding-top: 1em;
  border-top: 1px solid gray;
  font-weight: 600;
}
.staff-directory .person .person-header {
  padding: 1em;
  transition: all 0.1s ease-in;
  text-align: center;
  background: white;
  box-shadow: 0px 0px 1px 1px rgb(217.25, 217.25, 217.25);
}
.staff-directory .person .person-header img {
  max-width: 100%;
}
.staff-directory .person .person-content {
  position: absolute;
  z-index: 1;
  overflow: hidden;
  max-height: 0;
  transition: all 0.2s ease-in;
  opacity: 0;
  background: white;
  box-shadow: 0px 2px 1px 1px #b3b3b3;
}
.staff-directory .person .person-content .person-content-inner {
  padding: 0 1em 1em 1em;
}
.staff-directory .person.active .person-content {
  max-height: 1000px;
  opacity: 1;
}
.staff-directory .person.active .person-header {
  box-shadow: 0px 0px 1px 1px #b3b3b3;
}

@media (min-width: 460px) {
  .staff-directory .person {
    width: 49%;
  }
}
@media (min-width: 768px) {
  .staff-directory .person {
    width: 32%;
  }
}
#skip a {
  display: block;
  position: absolute;
  left: -999px;
  top: -999px;
}

#skip a:focus {
  left: 0;
  top: 0;
  padding: 3px;
  background: #ffc;
  border: 1px solid #990000;
}

.small-screen-hide {
  display: none;
}
@media screen and (min-width: 1300px) {
  .small-screen-hide {
    display: inline;
    padding: 0 2px 0 5px;
  }
}

* {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.image-replacement {
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}

.clearfix:before, .clearfix:after {
  content: "";
  display: table;
}
.clearfix:after {
  clear: both;
}

.left {
  float: left;
}

.right {
  float: right;
}

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

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

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

.sprite {
  background-image: url(/wp-content/themes/schoutenfood/dist/images/spritesheet2.png);
  background-repeat: no-repeat;
  display: block;
}

@media (max-width: 768px) {
  .sprite-mob {
    background-image: url(/wp-content/themes/schoutenfood/dist/images/spritesheet2.png);
    background-repeat: no-repeat;
    display: block;
  }
}
.embed-container {
  position: relative;
  height: 0;
  overflow: hidden;
}

/* 16x9 Aspect Ratio */
.embed-container--16x9 {
  padding-bottom: 56.25%;
}

/* 4x3 Aspect Ratio */
.embed-container--4x3 {
  padding-bottom: 75%;
}

.embed-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
.footer {
  color: #C9C5C1;
  background: #4B3D2A;
  font-size: 0.88rem;
}
.footer a:not(.icon):not(.button) {
  transition: all 0.2s ease;
  border-bottom: 1px solid transparent;
  color: #C9C5C1;
}
.footer a:not(.icon):not(.button):hover, .footer a:not(.icon):not(.button):focus {
  border-bottom-color: #C9C5C1;
}
.footer .inner-footer {
  position: relative;
}
.footer .icon-footer {
  width: 20px;
  height: 20px;
  color: white;
  fill: white;
}
.footer h1,
.footer h2,
.footer h3,
.footer h4 {
  color: white;
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
  .footer .wrap {
    padding-left: 2.352rem;
    padding-right: 2.352rem;
  }
}

.footer__brand svg {
  width: 165px !important;
  height: 30px !important;
}
@media (min-width: 25em) {
  .footer__brand svg {
    width: 227.314px !important;
    height: 40.74px !important;
  }
}

.footer__brand-payoff {
  color: #00B592;
  font-weight: 500;
  font-size: 12px;
  line-height: 13px;
  padding-left: 4px;
}
@media (min-width: 25em) {
  .footer__brand-payoff {
    font-size: 16px;
    line-height: 19px;
    padding-left: 8px;
  }
}

/* ==========================================================================
 # FOOTER NAV
========================================================================== */
.footer__certificate {
  background-color: #2C2214;
}

.footer__certificate__logos {
  display: flex;
  flex-wrap: wrap;
}
.footer__certificate__logos img,
.footer__certificate__logos span {
  display: block;
  width: 25%;
}
@media (min-width: 46.25em) {
  .footer__certificate__logos img {
    width: 14.27%;
    flex: 1;
  }
  .footer__certificate__logos span {
    display: none;
  }
}

/* ==========================================================================
 # SUBFOOTER
========================================================================== */
.subfooter {
  padding: 14px 0;
  font-size: 0.77rem;
}
.subfooter a {
  color: #C9C5C1;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/* ==========================================================================
 # TEXT ALIGN
========================================================================== */
.u-text-center {
  text-align: center;
}

.u-text-right {
  text-align: right;
}

.u-text-left {
  text-align: left;
}

@media (min-width: 20em) {
  .u-text-center\@mobile {
    text-align: center;
  }
  .u-text-right\@mobile {
    text-align: right;
  }
  .u-text-left\@mobile {
    text-align: left;
  }
}
@media (min-width: 46.25em) {
  .u-text-center\@tablet {
    text-align: center;
  }
  .u-text-right\@tablet {
    text-align: right;
  }
  .u-text-left\@tablet {
    text-align: left;
  }
}
@media (min-width: 61.25em) {
  .u-text-center\@desktop {
    text-align: center;
  }
  .u-text-right\@desktop {
    text-align: right;
  }
  .u-text-left\@desktop {
    text-align: left;
  }
}
.has-text-align-left {
  text-align: left !important;
}

.has-text-align-right {
  text-align: right !important;
}

.u-capitalize {
  text-transform: capitalize;
}

/* ==========================================================================
 # DISPLAY
========================================================================== */
.u-hide {
  display: none !important;
}

.u-show {
  display: block !important;
}

@media (min-width: 20em) {
  .u-hide\@mobile {
    display: none !important;
  }
  .u-show\@mobile {
    display: block !important;
  }
}
@media (min-width: 46.25em) {
  .u-hide\@tablet {
    display: none !important;
  }
  .u-show\@tablet {
    display: block !important;
  }
}
@media (min-width: 61.25em) {
  .u-hide\@desktop {
    display: none !important;
  }
  .u-show\@desktop {
    display: block !important;
  }
}
.u-align-center {
  float: none;
  margin-right: auto;
  margin-left: auto;
}

.u-block {
  display: block;
}

.u-inline-block {
  display: inline-block;
}

/* ==========================================================================
 # MISC
========================================================================== */
.u-image-round {
  border-radius: 50%;
}

.u-image-full, .u-image-full img {
  width: 100%;
  height: auto;
  align-self: flex-start;
}

.u-responsive-container-4-3 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 75%;
}

.u-responsive-container-16-9 {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 56.25%;
}

.u-responsive-container-4-3 > *,
.u-responsive-container-16-9 > * {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
}

.u-shadow, .has-box-shadow {
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
}

.u-font-size-small {
  font-size: 0.9rem;
  line-height: 1.3;
}

.u-font-size-medium {
  font-size: 1rem;
}

.has-lead-font-size,
.u-lead {
  font-size: 1.2rem;
  font-weight: 500;
}

.u-text-bold {
  font-weight: bold;
}

.u-no-overflow {
  overflow: hidden;
}

.u-flex-column {
  display: flex;
  flex-direction: column;
}

.u-flex-grow {
  flex-grow: 1;
}

/* ==========================================================================
 # TYPOGRAPHY
========================================================================== */
.u-list-minimal, .product-sidebar__tax-filters__menu ul, .u-list-inline {
  margin: 0;
  padding: 0;
  list-style-type: none;
  list-style-image: none;
}
.u-list-minimal li, .product-sidebar__tax-filters__menu ul li, .u-list-inline li {
  margin: 0;
}

.u-list-inline li {
  display: inline-block;
  margin-right: 1rem;
}
.u-list-inline li:last-child {
  margin-right: 0;
}

.u-hidden-visually {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px !important;
  overflow: hidden !important;
  position: absolute !important;
  white-space: nowrap !important;
  width: 1px !important;
}

/* ==========================================================================
 # Animiations
========================================================================== */
.a-fade {
  transition: opacity 0.3s ease;
  opacity: 1;
}
.a-fade.is-fade-out {
  opacity: 0;
}

/* ==========================================================================
 # SPACING
========================================================================== */
.u-ma-none {
  margin-top: 0rem !important;
  margin-right: 0rem !important;
  margin-bottom: 0rem !important;
  margin-left: 0rem !important;
}

.u-pa-none {
  padding-top: 0rem !important;
  padding-right: 0rem !important;
  padding-bottom: 0rem !important;
  padding-left: 0rem !important;
}

.u-mx-none {
  margin-right: 0rem !important;
  margin-left: 0rem !important;
}

.u-px-none {
  padding-right: 0rem !important;
  padding-left: 0rem !important;
}

.u-my-none {
  margin-top: 0rem !important;
  margin-bottom: 0rem !important;
}

.u-py-none {
  padding-top: 0rem !important;
  padding-bottom: 0rem !important;
}

.u-mt-none {
  margin-top: 0rem !important;
}

.u-pt-none {
  padding-top: 0rem !important;
}

.u-mb-none {
  margin-bottom: 0rem !important;
}

.u-pb-none {
  padding-bottom: 0rem !important;
}

.u-ml-none {
  margin-left: 0rem !important;
}

.u-pl-none {
  padding-left: 0rem !important;
}

.u-mr-none {
  margin-right: 0rem !important;
}

.u-pr-none {
  padding-right: 0rem !important;
}

.u-ma-small {
  margin-top: 0.588rem !important;
  margin-right: 0.588rem !important;
  margin-bottom: 0.588rem !important;
  margin-left: 0.588rem !important;
}

.u-pa-small {
  padding-top: 0.588rem !important;
  padding-right: 0.588rem !important;
  padding-bottom: 0.588rem !important;
  padding-left: 0.588rem !important;
}

.u-mx-small {
  margin-right: 0.588rem !important;
  margin-left: 0.588rem !important;
}

.u-px-small {
  padding-right: 0.588rem !important;
  padding-left: 0.588rem !important;
}

.u-my-small {
  margin-top: 0.588rem !important;
  margin-bottom: 0.588rem !important;
}

.u-py-small {
  padding-top: 0.588rem !important;
  padding-bottom: 0.588rem !important;
}

.u-mt-small {
  margin-top: 0.588rem !important;
}

.u-pt-small {
  padding-top: 0.588rem !important;
}

.u-mb-small {
  margin-bottom: 0.588rem !important;
}

.u-pb-small {
  padding-bottom: 0.588rem !important;
}

.u-ml-small {
  margin-left: 0.588rem !important;
}

.u-pl-small {
  padding-left: 0.588rem !important;
}

.u-mr-small {
  margin-right: 0.588rem !important;
}

.u-pr-small {
  padding-right: 0.588rem !important;
}

.u-ma-medium {
  margin-top: 1.1764rem !important;
  margin-right: 1.1764rem !important;
  margin-bottom: 1.1764rem !important;
  margin-left: 1.1764rem !important;
}

.u-pa-medium {
  padding-top: 1.1764rem !important;
  padding-right: 1.1764rem !important;
  padding-bottom: 1.1764rem !important;
  padding-left: 1.1764rem !important;
}

.u-mx-medium {
  margin-right: 1.1764rem !important;
  margin-left: 1.1764rem !important;
}

.u-px-medium {
  padding-right: 1.1764rem !important;
  padding-left: 1.1764rem !important;
}

.u-my-medium {
  margin-top: 1.1764rem !important;
  margin-bottom: 1.1764rem !important;
}

.u-py-medium {
  padding-top: 1.1764rem !important;
  padding-bottom: 1.1764rem !important;
}

.u-mt-medium {
  margin-top: 1.1764rem !important;
}

.u-pt-medium {
  padding-top: 1.1764rem !important;
}

.u-mb-medium {
  margin-bottom: 1.1764rem !important;
}

.u-pb-medium {
  padding-bottom: 1.1764rem !important;
}

.u-ml-medium {
  margin-left: 1.1764rem !important;
}

.u-pl-medium {
  padding-left: 1.1764rem !important;
}

.u-mr-medium {
  margin-right: 1.1764rem !important;
}

.u-pr-medium {
  padding-right: 1.1764rem !important;
}

.u-ma-large {
  margin-top: 2.352rem !important;
  margin-right: 2.352rem !important;
  margin-bottom: 2.352rem !important;
  margin-left: 2.352rem !important;
}

.u-pa-large, .wp-block-background {
  padding-top: 2.352rem !important;
  padding-right: 2.352rem !important;
  padding-bottom: 2.352rem !important;
  padding-left: 2.352rem !important;
}

.u-mx-large {
  margin-right: 2.352rem !important;
  margin-left: 2.352rem !important;
}

.u-px-large {
  padding-right: 2.352rem !important;
  padding-left: 2.352rem !important;
}

.u-my-large {
  margin-top: 2.352rem !important;
  margin-bottom: 2.352rem !important;
}

.u-py-large {
  padding-top: 2.352rem !important;
  padding-bottom: 2.352rem !important;
}

.u-mt-large {
  margin-top: 2.352rem !important;
}

.u-pt-large {
  padding-top: 2.352rem !important;
}

.u-mb-large {
  margin-bottom: 2.352rem !important;
}

.u-pb-large {
  padding-bottom: 2.352rem !important;
}

.u-ml-large {
  margin-left: 2.352rem !important;
}

.u-pl-large {
  padding-left: 2.352rem !important;
}

.u-mr-large {
  margin-right: 2.352rem !important;
}

.u-pr-large {
  padding-right: 2.352rem !important;
}

.u-ma-extra-large {
  margin-top: 3.529rem !important;
  margin-right: 3.529rem !important;
  margin-bottom: 3.529rem !important;
  margin-left: 3.529rem !important;
}

.u-pa-extra-large {
  padding-top: 3.529rem !important;
  padding-right: 3.529rem !important;
  padding-bottom: 3.529rem !important;
  padding-left: 3.529rem !important;
}

.u-mx-extra-large {
  margin-right: 3.529rem !important;
  margin-left: 3.529rem !important;
}

.u-px-extra-large {
  padding-right: 3.529rem !important;
  padding-left: 3.529rem !important;
}

.u-my-extra-large {
  margin-top: 3.529rem !important;
  margin-bottom: 3.529rem !important;
}

.u-py-extra-large {
  padding-top: 3.529rem !important;
  padding-bottom: 3.529rem !important;
}

.u-mt-extra-large {
  margin-top: 3.529rem !important;
}

.u-pt-extra-large {
  padding-top: 3.529rem !important;
}

.u-mb-extra-large {
  margin-bottom: 3.529rem !important;
}

.u-pb-extra-large {
  padding-bottom: 3.529rem !important;
}

.u-ml-extra-large {
  margin-left: 3.529rem !important;
}

.u-pl-extra-large {
  padding-left: 3.529rem !important;
}

.u-mr-extra-large {
  margin-right: 3.529rem !important;
}

.u-pr-extra-large {
  padding-right: 3.529rem !important;
}

.u-ma-extra-extra-large {
  margin-top: 5.058rem !important;
  margin-right: 5.058rem !important;
  margin-bottom: 5.058rem !important;
  margin-left: 5.058rem !important;
}

.u-pa-extra-extra-large {
  padding-top: 5.058rem !important;
  padding-right: 5.058rem !important;
  padding-bottom: 5.058rem !important;
  padding-left: 5.058rem !important;
}

.u-mx-extra-extra-large {
  margin-right: 5.058rem !important;
  margin-left: 5.058rem !important;
}

.u-px-extra-extra-large {
  padding-right: 5.058rem !important;
  padding-left: 5.058rem !important;
}

.u-my-extra-extra-large {
  margin-top: 5.058rem !important;
  margin-bottom: 5.058rem !important;
}

.u-py-extra-extra-large {
  padding-top: 5.058rem !important;
  padding-bottom: 5.058rem !important;
}

.u-mt-extra-extra-large {
  margin-top: 5.058rem !important;
}

.u-pt-extra-extra-large {
  padding-top: 5.058rem !important;
}

.u-mb-extra-extra-large {
  margin-bottom: 5.058rem !important;
}

.u-pb-extra-extra-large {
  padding-bottom: 5.058rem !important;
}

.u-ml-extra-extra-large {
  margin-left: 5.058rem !important;
}

.u-pl-extra-extra-large {
  padding-left: 5.058rem !important;
}

.u-mr-extra-extra-large {
  margin-right: 5.058rem !important;
}

.u-pr-extra-extra-large {
  padding-right: 5.058rem !important;
}

@media (max-width: 46.24em) {
  .u-ma-extra-large {
    margin-top: 2.352rem !important;
    margin-right: 2.352rem !important;
    margin-bottom: 2.352rem !important;
    margin-left: 2.352rem !important;
  }
  .u-pa-extra-large {
    padding-top: 2.352rem !important;
    padding-right: 2.352rem !important;
    padding-bottom: 2.352rem !important;
    padding-left: 2.352rem !important;
  }
  .u-mx-extra-large {
    margin-right: 2.352rem !important;
    margin-left: 2.352rem !important;
  }
  .u-px-extra-large {
    padding-right: 2.352rem !important;
    padding-left: 2.352rem !important;
  }
  .u-my-extra-large {
    margin-top: 2.352rem !important;
    margin-bottom: 2.352rem !important;
  }
  .u-py-extra-large {
    padding-top: 2.352rem !important;
    padding-bottom: 2.352rem !important;
  }
  .u-mt-extra-large {
    margin-top: 2.352rem !important;
  }
  .u-pt-extra-large {
    padding-top: 2.352rem !important;
  }
  .u-mb-extra-large {
    margin-bottom: 2.352rem !important;
  }
  .u-pb-extra-large {
    padding-bottom: 2.352rem !important;
  }
  .u-ml-extra-large {
    margin-left: 2.352rem !important;
  }
  .u-pl-extra-large {
    padding-left: 2.352rem !important;
  }
  .u-mr-extra-large {
    margin-right: 2.352rem !important;
  }
  .u-pr-extra-large {
    padding-right: 2.352rem !important;
  }
  .u-ma-extra-extra-large {
    margin-top: 3.529rem !important;
    margin-right: 3.529rem !important;
    margin-bottom: 3.529rem !important;
    margin-left: 3.529rem !important;
  }
  .u-pa-extra-extra-large {
    padding-top: 3.529rem !important;
    padding-right: 3.529rem !important;
    padding-bottom: 3.529rem !important;
    padding-left: 3.529rem !important;
  }
  .u-mx-extra-extra-large {
    margin-right: 3.529rem !important;
    margin-left: 3.529rem !important;
  }
  .u-px-extra-extra-large {
    padding-right: 3.529rem !important;
    padding-left: 3.529rem !important;
  }
  .u-my-extra-extra-large {
    margin-top: 3.529rem !important;
    margin-bottom: 3.529rem !important;
  }
  .u-py-extra-extra-large {
    padding-top: 3.529rem !important;
    padding-bottom: 3.529rem !important;
  }
  .u-mt-extra-extra-large {
    margin-top: 3.529rem !important;
  }
  .u-pt-extra-extra-large {
    padding-top: 3.529rem !important;
  }
  .u-mb-extra-extra-large {
    margin-bottom: 3.529rem !important;
  }
  .u-pb-extra-extra-large {
    padding-bottom: 3.529rem !important;
  }
  .u-ml-extra-extra-large {
    margin-left: 3.529rem !important;
  }
  .u-pl-extra-extra-large {
    padding-left: 3.529rem !important;
  }
  .u-mr-extra-extra-large {
    margin-right: 3.529rem !important;
  }
  .u-pr-extra-extra-large {
    padding-right: 3.529rem !important;
  }
}
/* ==========================================================================
 # CONTAINER
========================================================================== */
.u-container-small {
  max-width: 512px;
}

.u-container-medium {
  max-width: 768px;
}

.u-container-large {
  max-width: 1200px;
}

/* ==========================================================================
 # COLOUR
========================================================================== */
.u-bg-primary,
.u-bg-dark {
  color: #FFFFFF;
}
.u-bg-primary h1,
.u-bg-dark h1,
.u-bg-primary h2,
.u-bg-dark h2,
.u-bg-primary h3,
.u-bg-dark h3,
.u-bg-primary h4,
.u-bg-dark h4,
.u-bg-primary h5,
.u-bg-dark h5,
.u-bg-primary h6,
.u-bg-dark h6 {
  color: white;
}
.u-bg-primary a:not(.button):not(.wp-block-button__link),
.u-bg-dark a:not(.button):not(.wp-block-button__link) {
  transition: border 0.2s ease;
  text-decoration: none;
  color: white;
}
.u-bg-primary a:not(.button):not(.wp-block-button__link):hover,
.u-bg-dark a:not(.button):not(.wp-block-button__link):hover {
  color: white;
}
.u-bg-primary a:not(.button):not(.wp-block-button__link):not(.u-link-clean),
.u-bg-dark a:not(.button):not(.wp-block-button__link):not(.u-link-clean) {
  transition: all 0.2s ease !important;
  border-bottom: 1px solid white;
  padding-bottom: 2px;
}
.u-bg-primary a:not(.button):not(.wp-block-button__link):not(.u-link-clean):hover,
.u-bg-dark a:not(.button):not(.wp-block-button__link):not(.u-link-clean):hover {
  padding-bottom: 1px;
}

.u-bg-primary {
  background-color: #00B592;
}

.u-bg-dark {
  background-color: #1A6546;
}

.u-bg-white {
  background-color: white;
}

.u-color-primary {
  color: #00B592;
}

.u-color-secondary {
  color: #A1CD5C;
}

.u-color-tertiary {
  color: #F47A2C;
}

.u-color-quanternary {
  color: #3E6549;
}

.u-color-dark-green {
  color: rgb(62, 101, 73);
}

a.u-color-dark-green {
  border-bottom: 1px solid rgb(62, 101, 73);
}

.u-stretched-link:after {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1;
  pointer-events: auto;
  content: "";
  background-color: rgba(0, 0, 0, 0);
}

/* ==========================================================================
 # SINGLE PRODUCT
========================================================================== */
.nutrition-list {
  font-size: 0.9em;
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
  .nutrition-list {
    column-count: 2;
  }
}
.nutrition-list li {
  display: flex;
}
.nutrition-list li:nth-of-type(2n - 1) {
  background: #F3F3F3;
}
.nutrition-list span {
  padding: 4px 11px;
  flex: 1;
}

@media (min-width: 50em) and (max-width: 61.24em) {
  .product-grid .c-slider {
    float: left;
    max-width: 50%;
    padding: 2.352rem 1rem 1rem 2.352rem;
  }
}
@media (min-width: 61.25em) {
  .product-grid {
    max-width: 100%;
    display: flex;
    flex-wrap: wrap;
    margin: 0 -1rem;
  }
  .product-grid > * {
    flex: none;
    width: 100%;
    padding: 0 1rem;
  }
  .product-grid > div:nth-child(1),
  .product-grid > div:nth-child(2) {
    flex: 1 1 50%;
    width: 50%;
  }
}
@supports (display: grid) {
  @media (min-width: 61.25em) {
    .product-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: auto 1fr;
      grid-column-gap: 20px;
      grid-row-gap: 0px;
      margin: 0;
      grid-template-areas: "content photo" "content tabs";
      align-items: start;
    }
    .product-grid > * {
      padding: 0;
      flex: none !important;
      width: auto !important;
    }
    .product-grid > div:nth-child(1) {
      grid-area: photo;
    }
    .product-grid > div:nth-child(2) {
      grid-area: content;
    }
    .product-grid > div:nth-child(3) {
      grid-area: tabs;
    }
  }
}
/* ==========================================================================
 # SIDEBAR
========================================================================== */
.product-sidebar {
  position: relative;
}

.product-sidebar__label {
  display: inline;
  position: relative;
  font-weight: 300;
}

.product-sidebar__search {
  position: relative;
  display: inline-block;
  max-width: 200px;
}
@media (min-width: 20em) {
  .product-sidebar__search {
    max-width: 400px;
  }
}
.product-sidebar__search input {
  padding-right: 32px;
}

.product-sidebar__input {
  width: 16px;
  height: 16px;
}

.product-sidebar__filter-count {
  vertical-align: top;
  font-size: 9px;
}

@media (max-width: 46.24em) {
  .product-sidebar__tax-filters__menu {
    position: fixed;
    z-index: 2000;
    top: 0;
    right: 0;
    overflow-y: scroll;
    width: 220px;
    height: 100vh;
    padding: 1rem;
    transition: transform 0.2s ease;
    transform: translateX(270px);
    background: white;
    box-shadow: -2px 0 10px rgba(0, 0, 0, 0.15);
  }
  .product-sidebar__tax-filters__menu.is-open {
    transform: translateX(0);
  }
}
.product-sidebar__tax-filters__menu h3:not(:first-of-type) {
  margin-top: 1rem;
}
/* ==========================================================================
 # FILTER PILLS
========================================================================== */
.products__chip-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
}
.products__chip-container > * {
  margin: 5px 0;
}
.products__chip-container > *:not(last-child) {
  margin-right: 10px;
  flex-shrink: 0;
}
.products__chip-container span {
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.8rem;
  font-weight: bold;
  color: #00B592;
}

/* ==========================================================================
 # TOOLTIP
========================================================================== */
.tooltip {
  position: relative;
  display: inline-block;
  width: 16px;
  height: 16px;
  margin-bottom: -1px;
  margin-left: 3px;
  background-position: -153px -95px;
  color: white;
  background: #A1CD5C;
  text-align: center;
  font-size: 10px;
  border-radius: 100px;
  position: relative;
  top: -8px;
  font-weight: bold;
  font-family: monaco, monospace;
  cursor: pointer;
}

.tooltip:hover:after,
.tooltip:focus:after {
  position: absolute;
  z-index: 444;
  bottom: 35px;
  display: block;
  width: 200px;
  padding: 10px;
  content: attr(data-title);
  color: #FFFFFF;
  background: #A1CD5C;
  font-family: "CeraPro", verdana, sans-serif;
  font-weight: 600;
  left: 50%;
  transform: translateX(-50%);
  font-size: 12px;
  line-height: 1.3;
  font-weight: initial;
}

.tooltip:hover:before,
.tooltip:focus:before {
  position: absolute;
  z-index: 555;
  left: -2px;
  bottom: 25px;
  width: 0;
  height: 0;
  content: "";
  border-top: 12px solid #A1CD5C;
  border-right: 11px solid rgba(0, 0, 0, 0);
  border-left: 11px solid rgba(0, 0, 0, 0);
}

.has-disclaimer:after {
  content: "*";
  font-size: 0.8em;
  vertical-align: top;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/* ==========================================================================
 # HOMEPAGE HEADER
========================================================================== */
@media (min-width: 46.25em) {
  .home .background-shapes-tree,
  .home .is-large-tall-page .main--emphasize,
  .home .is-large-tall-page .main .inner-content {
    background-position: 80% top, left 70%, right 40%;
  }
}
.hero {
  position: relative;
}

.hero__header hr {
  margin: 0.6rem auto;
  width: 80%;
  height: 2px;
  opacity: 0.7;
}
.hero__header h1 {
  font-size: 1.5rem;
  margin-bottom: 0;
  font-weight: 700;
  line-height: 1.3;
}
@media (min-width: 61.25em) {
  .hero__header h1 {
    font-size: 2rem;
  }
}
.hero__header h1, .hero__header h2, .hero__header h3 {
  color: white;
}
.hero__header h3 {
  color: white;
  margin: 0 0 1rem 0;
  padding: 0;
  font-size: 1.5rem;
}

.hero__header__inner {
  max-width: 1092px;
  margin: 0 auto;
  padding: 2rem 1.5rem 0.8rem 1.5rem;
  background: #00B592;
  position: relative;
  z-index: 10;
  text-align: center;
}
@media (min-width: 61.25em) {
  .hero__header__inner {
    width: 90%;
    border-radius: 0.5rem;
    margin-top: -100px;
  }
}

:root:root:root .hero__header__button {
  margin-top: 1rem;
}
@supports (display: grid) {
  @media (min-width: 61.25em) {
    :root:root:root .hero__header__button {
      margin-top: 0;
      background-repeat: no-repeat;
      text-align: left;
      line-height: 1;
      background-color: transparent;
      border: 0;
      color: #F47A2C;
      padding-left: 0;
      font-weight: 600;
    }
    :root:root:root .hero__header__button svg {
      opacity: 1;
      fill: #F47A2C;
    }
    :root:root:root .hero__header__button:hover, :root:root:root .hero__header__button:focus {
      color: #F47A2C;
    }
    :root:root:root .hero__header__button:hover svg, :root:root:root .hero__header__button:focus svg {
      fill: #F47A2C;
    }
  }
}

.hero__slider {
  height: 300px;
  margin: 0 auto;
  padding: 0;
  list-style-type: none;
  z-index: 1;
  max-width: 1920px;
  position: relative;
  overflow: hidden;
}
@media (min-width: 61.25em) {
  .hero__slider {
    height: 500px;
  }
}
@media screen and (min-width: 1940px) {
  .hero__slider {
    border-radius: 0 0 10px 10px;
  }
}

.hero__slider__slide {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background-size: cover;
  background-position: 50% 50%;
  transition: opacity 1s ease;
}
.hero__slider__slide:not(:first-of-type) {
  opacity: 0;
}
.hero__slider__slide picture {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.hero__slider__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/**
 * Hero target cards
 */
.hero__card {
  display: block;
  background: white;
  padding: 1.5rem 1.5rem calc(30px + 1.5rem) 1.5rem;
  flex-direction: column;
  flex-grow: 1;
  color: #40392E;
  display: flex;
  transform: translateY(0);
  transition: all 0.2s ease;
  box-shadow: none;
  width: 100%;
}
@media (min-width: 61.25em) {
  .hero__card {
    min-height: 354px;
  }
}
.hero__card p {
  flex-grow: 1;
}

.hero__card__button {
  position: absolute;
  right: 10px;
  bottom: 10px;
}

.hero__card:hover,
.hero__card:focus {
  transform: translatey(-2px);
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
}

.hero__card__logos img,
.hero__card__logos svg {
  height: 40px;
  width: auto;
  padding: 0 12px 0 0;
}

/**
  * Force break to new line
  */
.hero__card__logos > *:nth-child(3n)::after {
  content: "";
  width: 100%;
  flex: none;
  height: 0;
  display: block;
}

.hero__card__logos > *:nth-child(3n) {
  padding-right: 0;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
.c-page-blocks__block {
  margin-top: 3.529rem;
}

.c-page-blocks--above .c-page-blocks__block:first-of-type {
  margin-top: 0;
}

.c-page-blocks__title {
  font-size: 1.3rem;
}

/* ==========================================================================
 # LOGO BANNER
========================================================================== */
.c-logo-banner {
  overflow-x: scroll;
  padding: 2.352rem 0.588rem;
  background: white;
  -ms-overflow-style: none;
}

.c-logo-banner__list {
  display: flex;
  justify-content: space-between;
}
.c-logo-banner__list li {
  display: block;
  display: flex;
  padding: 1.1764rem;
  border-right: 1px solid transparent;
  border-left: 1px solid transparent;
  flex: 1;
  justify-content: center;
  align-items: center;
}
.c-logo-banner__list li + li {
  border-left-color: #CCCCCC;
}

.c-logo-banner__list--multiple-rows {
  margin-bottom: -1.1764rem;
}
@media (max-width: 19.99em) {
  .c-logo-banner__list--multiple-rows li {
    width: 50%;
  }
  .c-logo-banner__list--multiple-rows li:nth-child(2n+1) {
    border-left-color: transparent;
  }
}
@media (min-width: 20em) and (max-width: 46.24em) {
  .c-logo-banner__list--multiple-rows li {
    width: 33.33%;
  }
  .c-logo-banner__list--multiple-rows li:nth-child(3n+1) {
    border-left-color: transparent;
  }
}
@media (min-width: 46.25em) and (max-width: 61.24em) {
  .c-logo-banner__list--multiple-rows li {
    width: 25%;
  }
  .c-logo-banner__list--multiple-rows li:nth-child(4n+1) {
    border-left-color: transparent;
  }
}
@media (min-width: 61.25em) {
  .c-logo-banner__list--multiple-rows {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .c-logo-banner__list--multiple-rows li {
    width: 25%;
  }
  .c-logo-banner__list--multiple-rows.has-1-items li {
    width: 100% !important;
  }
  .c-logo-banner__list--multiple-rows.has-1-items li:nth-child(1n+1) {
    border-left-color: transparent;
  }
  .c-logo-banner__list--multiple-rows.has-2-items li {
    width: 50% !important;
  }
  .c-logo-banner__list--multiple-rows.has-2-items li:nth-child(2n+1) {
    border-left-color: transparent;
  }
  .c-logo-banner__list--multiple-rows.has-3-items li {
    width: 33.3333333333% !important;
  }
  .c-logo-banner__list--multiple-rows.has-3-items li:nth-child(3n+1) {
    border-left-color: transparent;
  }
  .c-logo-banner__list--multiple-rows.has-4-items li {
    width: 25% !important;
  }
  .c-logo-banner__list--multiple-rows.has-4-items li:nth-child(4n+1) {
    border-left-color: transparent;
  }
  .c-logo-banner__list--multiple-rows.has-5-items li {
    width: 20% !important;
  }
  .c-logo-banner__list--multiple-rows.has-5-items li:nth-child(5n+1) {
    border-left-color: transparent;
  }
  .c-logo-banner__list--multiple-rows.has-6-items li {
    width: 16.6666666667% !important;
  }
  .c-logo-banner__list--multiple-rows.has-6-items li:nth-child(6n+1) {
    border-left-color: transparent;
  }
  .c-logo-banner__list--multiple-rows.has-7-items li {
    width: 14.2857142857% !important;
  }
  .c-logo-banner__list--multiple-rows.has-7-items li:nth-child(7n+1) {
    border-left-color: transparent;
  }
}
.c-logo-banner__list--multiple-rows img {
  max-width: 100%;
  height: auto;
}
.c-logo-banner__list--multiple-rows li {
  margin-bottom: 0.588rem;
  flex: none !important;
}

/* ==========================================================================
 # CONTACT
========================================================================== */
.c-contact address {
  font-style: normal;
}

.c-contact__expert__logo-container {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 130px;
  height: auto;
  min-height: 86px;
}

.c-contact__expert__logo-container img {
  position: absolute;
  width: 100%;
  height: 100%;
  flex-grow: 1;
  object-fit: cover;
}

@media (min-width: 61.25em) {
  .c-contact__expert--round {
    margin-top: 2rem;
  }
}
.c-contact__expert--round .c-contact__expert__logo-container {
  border-radius: 50%;
  overflow: hidden;
  border: 1px solid #e0e0e0;
  aspect-ratio: 1/1;
}

.c-contact--white {
  background: white;
}

.c-contact--white .u-shadow {
  box-shadow: none;
  -webkit-box-shadow: none;
}

.c-contact--white h2 {
  color: #1a6546;
}

.c-contact--white address {
  padding-left: 0;
}

.c-contact--white .c-contact__sidebar {
  padding: 0px 36px;
}

.c-contact__sidebar {
  font-size: 0.9rem;
}

.c-contact__options h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #40392E;
}
.c-contact__options li:not(:last-child) {
  padding-bottom: 0.588rem;
}

@media screen and (min-width: 1030px) {
  .c-contact--white .c-contact__sidebar {
    padding: 100px 0.588rem 0 0.588rem;
  }
}
/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
.tabs:focus {
  outline: none;
}

.tabs__nav {
  display: flex;
  overflow: hidden;
  margin-left: -20px;
  padding-top: 20px;
  padding-left: 20px;
}
.tabs__nav li {
  display: flex;
  flex-direction: column;
  max-width: 210px;
  margin-right: 2px;
  flex: 1;
}

.tabs__nav-link {
  width: 100%;
  padding-top: 0.588rem;
  padding-bottom: 0.588rem;
  text-align: center;
  color: #00B592;
  background: transparent;
  font-weight: 600;
  justify-content: center;
  display: flex;
  align-items: center;
  flex: 1 0 auto;
  font-size: 0.9rem;
}
.tabs__nav-link:focus, .tabs__nav-link:hover {
  background: white;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
}
.tabs__nav-link.is-active {
  background: white;
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.05);
}

.tabs__title {
  margin-bottom: 0;
  padding-bottom: 0;
  outline: none;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
.c-slider__view {
  position: relative;
}

.c-slider__frame {
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

.c-slider__slides {
  display: block;
  width: 100%;
  padding: 0;
  margin: 0 !important;
}

.c-slider__prev,
.c-slider__next {
  position: absolute;
  top: 50%;
  width: 35px;
  height: 35px;
  padding-top: 11px;
  cursor: pointer;
  transition: background-color 0.2s ease;
  transform: translateY(-50%);
  text-align: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.7);
  font-size: 0;
  line-height: 0;
}
.c-slider__prev:hover, .c-slider__prev:focus,
.c-slider__next:hover,
.c-slider__next:focus {
  background-color: rgb(255, 255, 255);
}
.c-slider__prev svg,
.c-slider__next svg {
  width: 8px;
  height: 14px;
  fill: #A0A192;
}

.c-slider__prev {
  left: 0.588rem;
}
.c-slider__prev svg {
  position: relative;
  left: -1px;
}

.c-slider__next {
  right: 0.588rem;
}
.c-slider__next svg {
  position: relative;
  left: 1px;
}

.c-slider__slide {
  position: relative;
  display: inline-block;
  width: 100%;
  margin: 0 !important;
  vertical-align: top;
  white-space: normal;
  font-size: 18px;
  line-height: 1.7;
}

.c-slider__slide-content__intro {
  font-size: 0.9rem;
}
@media (max-width: 61.24em) {
  .c-slider__slide-content__intro {
    display: -webkit-inline-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
}

.c-slider__dot-nav {
  display: flex;
  padding-top: 2.352rem;
  justify-content: center;
}

.c-slider__dot-nav__item {
  width: 12px;
  height: 12px;
  margin-right: 7px;
  margin-left: 7px;
  transition: background-color 0.2s ease;
  border-radius: 50%;
  background-color: #E7E1D0;
  overflow-x: hidden;
  color: #E7E1D0;
  white-space: nowrap;
  font-size: 0;
  line-height: 0;
}

.c-slider__dot-nav__item:hover,
.c-slider__dot-nav__item:focus,
.c-slider__dot-nav__item.is-active {
  background-color: #A0A192;
  color: #A0A192;
}

.c-slider__thumb-nav__item {
  display: inline-block;
  max-width: 80px;
  margin-top: 0.588rem;
  margin-right: 7px;
  transition: border-color 0.2s ease;
  border-width: 2px;
  border-style: solid;
  border-color: #E3E7E9;
  font-size: 0;
}

.c-slider__thumb-nav__item:hover,
.c-slider__thumb-nav__item:focus,
.c-slider__thumb-nav__item.is-active {
  border-color: white;
}

.c-slider--image .c-slider__slide {
  border: 2px solid #E3E7E9;
  line-height: 0;
}
.c-slider--image .c-slider__next,
.c-slider--image .c-slider__prev {
  background-color: #A1CD5C;
}
.c-slider--image .c-slider__next:hover, .c-slider--image .c-slider__next:focus,
.c-slider--image .c-slider__prev:hover,
.c-slider--image .c-slider__prev:focus {
  background-color: rgb(149.7464788732, 199.014084507, 72.485915493);
}
.c-slider--image .c-slider__next svg,
.c-slider--image .c-slider__prev svg {
  fill: white;
}
.c-slider--image .c-slider__prev {
  left: 1.1764rem;
}
.c-slider--image .c-slider__next {
  right: 1.1764rem;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
.mail-sign-up {
  background: white;
  max-width: 700px;
  margin: 0;
  padding: 2rem;
  text-align: center;
  overflow: hidden;
  height: auto;
}
@media (min-width: 46.25em) {
  .mail-sign-up {
    padding: 4rem;
  }
}
.mail-sign-up h1 {
  margin-top: 0;
  margin-bottom: 1.2rem;
  color: #F47A2C;
  font-weight: 600;
  line-height: 1.2;
  overflow-wrap: break-word;
  font-size: 2.222rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  .mail-sign-up h1 {
    font-size: clamp(1.667rem, 1.4714444444rem + 1.1vw, 2.222rem);
  }
}
.mail-sign-up small {
  line-height: 1.5;
  text-align: left;
  display: block;
}

.wp-block-media-text__content .mail-sign-up {
  padding-left: 0;
  padding-right: 0;
}

.mail-sign-up__extra {
  margin: 0 -3px;
  padding: 0 3px;
  border: 0;
  margin: 0 auto;
}

.js-extra-fields {
  height: 0;
  transition: height 0.3s ease-out;
  overflow: hidden;
}

.mail-sign-up__hide {
  position: absolute;
  right: 17px;
  top: 10px;
  border: 0;
  color: #aaa;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
}

/* ==========================================================================
 # SIGN UP SLIDE IN
========================================================================== */
.mail-sign-up--slide-in {
  position: fixed;
  right: 10px;
  bottom: 10px;
  width: 90%;
  max-width: 700px;
  max-height: 100vh;
  overflow: scroll;
  z-index: 999999;
  border: 4px solid #eee;
  transform: translateX(120%);
  display: none;
  opacity: 0;
  transition: transform 0.5s ease, opacity 0.5s ease;
}

.mail-sign-up--slide-in.is-slided {
  transform: translateX(0);
  opacity: 1;
}

.mail-sign-up--slide-in:not(.is-grown) {
  width: 400px;
  padding: 50px 20px 20px 20px;
}

.mail-sign-up--slide-in.is-grown .mail-sign-up__expand {
  display: none;
}

.mail-sign-up--slide-in:not(.is-grown) form {
  display: none;
}

.mail-sign-up--slide-in:not(.is-grown) h1 {
  font-size: 1.2rem;
}

.mail-sign-up--slide-in:not(.is-grown) p {
  font-size: 0.9rem;
}

/* ==========================================================================
 # SIGN UP FOOTER
========================================================================== */
.mail-sign-up--footer {
  background: #4B3D2A;
  text-align: left;
  padding: 0;
  margin: 0;
  color: #C9C5C1;
}

.mail-sign-up--footer input,
.mail-sign-up--footer select .mail-sign-up--footer button {
  height: 46px;
}

.mail-sign-up--footer form {
  position: relative;
}

.mail-sign-up--footer form:not(.is-expanded) .mail-sign-up__submit-container {
  position: absolute;
  right: -3px;
  bottom: 15px;
  margin-right: 1px;
}

.mail-sign-up--footer .mail-sign-up__submit-container button {
  padding: 12.5px 15px;
  margin-right: 3px;
}

@media (min-width: 20em) {
  .mail-sign-up--footer form:not(.is-expanded) .mail-sign-up__submit-container {
    bottom: 18px;
  }
  .mail-sign-up--footer .mail-sign-up__submit-container button {
    padding: 12.5px 25px;
  }
}
.mail-sign-up--footer h1,
.mail-sign-up--footer label {
  color: white;
}

.mail-sign-up--footer input::placeholder {
  color: #C9C5C1;
}

.mail-sign-up--footer input,
.mail-sign-up--footer select {
  background-color: #5d5140;
  border-color: transparent;
  color: #b6b8a4;
  outline: black;
}

.mail-sign-up--footer .o-grid--with-gutter {
  display: block;
  margin: 0;
  padding: 0;
}

.mail-sign-up--footer .mail-sign-up__intro {
  max-width: 500px;
}

.mail-sign-up--footer .o-grid__item {
  margin: 0;
  padding: 0 !important;
}

.mail-sign-up--footer h1 {
  font-size: 1.2rem;
  line-height: 1.4;
}

.mail-sign-up--footer p,
.mail-sign-up--footer small {
  font-size: 0.9rem;
}

.message-box {
  margin-top: 1rem;
  padding: 10px;
  background: #d3edd9;
  border-radius: 5px;
  font-size: 0.9rem;
}

.message-box::before {
  content: "✓";
  font-size: 15px;
  display: block;
  border-radius: 50px;
  border: 1px solid #40392E;
  width: 20px;
  height: 20px;
  line-height: 20px;
  font-weight: bold;
  text-align: center;
  margin: 5px auto;
  left: 1px;
  position: relative;
  top: -2px;
}

.message-box.is-error {
  background: #f7ccc4;
}
.message-box.is-error:before {
  content: "✘";
}

.message-box--horizontal {
  position: relative;
  padding-left: 3rem;
}
.message-box--horizontal:before {
  position: absolute;
  top: 1.3rem;
  left: 1rem;
}

/* ==========================================================================
 # SIGN UP BANNER
========================================================================== */
.mail-sign-up--banner {
  width: calc(100% - 1.176rem);
  max-width: initial;
  margin: 0.588rem;
  flex: none;
  text-align: left;
  display: block;
}

.c-cookie-notice {
  position: fixed;
  z-index: 1030;
  bottom: 0;
  left: 0;
  width: 100%;
  font-weight: 500;
  background: rgb(250, 225, 171);
}
@media print {
  .c-cookie-notice {
    display: none;
  }
}

.modal {
  opacity: 0;
  visibility: hidden;
  position: fixed;
  z-index: 9998;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-x: hidden;
  overflow-y: auto;
  transition: opacity 0.2s ease;
  background-color: rgba(0, 0, 0, 0.5);
}

.modal-is-open {
  opacity: 1;
  visibility: visible;
}

.modal__content {
  position: relative;
  width: 90%;
  max-width: 790px;
  margin: 40px auto 0;
  padding: 20px 30px;
  transition: all 0.3s ease;
  border-radius: 2px;
  background-color: #FFFFFF;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  border: 4px solid #eee;
}

.modal__close-button {
  position: absolute;
  right: 17px;
  top: 10px;
  border: 0;
  color: #aaa;
  text-decoration: none;
  font-size: 1.2rem;
  font-weight: bold;
  background: none;
  border: none;
  box-shadow: none;
}

.modal__body {
  position: relative;
  width: 100%;
  height: auto;
  max-height: 80vh;
  overflow: scroll;
  -webkit-overflow-scrolling: touch !important;
}

/******************************************************************
Site Name:
Author:

Stylesheet: Main Stylesheet

Here's where the magic happens. Here, you'll see we are calling in
the separate media queries. The base mobile goes outside any query
and is called at the beginning, after that we call the rest
of the styles inside media queries.
******************************************************************/
/* ==========================================================================
 # GUTENBURG
========================================================================== */
.page-template-page-homepage .wrap > .wp-block-image.alignfull,
.page-template-page-landing-page .wrap > .wp-block-image.alignfull, .wp-block-call-to-action-section, .wp-block-content_carousel, .wp-block-background {
  margin-left: -2%;
  margin-right: -2%;
  overflow: hidden;
}
@media (min-width: 75em) {
  .page-template-page-homepage .wrap > .wp-block-image.alignfull,
  .page-template-page-landing-page .wrap > .wp-block-image.alignfull, .wp-block-call-to-action-section, .wp-block-content_carousel, .wp-block-background {
    margin-left: calc(-50vw + 600px);
    margin-right: calc(-50vw + 600px);
  }
}

:root .is-layout-flow > .alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}

:root .is-layout-flow > .alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}

:root .is-layout-flow > .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

:root .is-layout-constrained > .alignleft {
  float: left;
  margin-inline-start: 0;
  margin-inline-end: 2em;
}

:root .is-layout-constrained > .alignright {
  float: right;
  margin-inline-start: 2em;
  margin-inline-end: 0;
}

:root .is-layout-constrained > .aligncenter {
  margin-left: auto;
  margin-right: auto;
}

:root .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull)) {
  max-width: var(--wp--style--global--content-size);
  margin-left: auto;
  margin-right: auto;
}

:root .is-layout-constrained > .alignwide {
  max-width: var(--wp--style--global--wide-size);
}

:root .is-layout-flex {
  display: flex;
}

:root .is-layout-flex {
  flex-wrap: wrap;
  align-items: center;
}

:root .is-layout-flex > * {
  margin: 0;
}

@media (min-width: 782px) {
  .wp-block-column {
    flex-basis: 0;
    flex-grow: 1;
  }
  .wp-block-column[style*=flex-basis] {
    flex-grow: 0;
  }
  .wp-block-column:not(:first-child) {
    margin-left: 2em;
  }
}
/* ==========================================================================
 # BUTTONS
========================================================================== */
.wp-block-button__link {
  border-radius: 0;
}

.wp-block-button__link .has-green-background-color:focus,
.wp-block-button__link .has-green-background-color:hover {
  background-color: rgb(0, 145.3, 117.2033149171);
}

.wp-block-button__link .has-blue-background-color:focus,
.wp-block-button__link .has-blue-background-color:hover,
.wp-block-button__link .has-orange-background-color:focus,
.wp-block-button__link .has-orange-background-color:hover {
  background-color: rgb(239.7986486486, 101.1472972973, 12.5013513514);
}

.wp-block-button__link .has-leaf-green-background-color:focus,
.wp-block-button__link .has-leaf-green-background-color:hover {
  background-color: rgb(141.1583333333, 198.6783333333, 95.6216666667);
}

.wp-block-button {
  margin-bottom: 7px;
}
.wp-block-button.align-left {
  display: inline-block;
  float: none;
}

/* ==========================================================================
 # COLORS
========================================================================== */
.has-green-background-color {
  background-color: #00B592;
}

.has-green-background-color ul,
.has-green-background-color ul a {
  color: white;
}

.has-brand-quinary-background-color {
  background-color: #4B3D2A;
}

.has-blue-background-color,
.has-orange-background-color {
  background-color: #F47A2C;
}

.has-leaf-green-background-color {
  background-color: #A0D07A;
}

.has-dark-green-background-color {
  background-color: #3D6648;
}

.has-black-background-color {
  background-color: #40392E !important;
}

.has-white-background-color {
  background-color: white;
}

.has-wheat-background-color {
  background-color: #f9f7f2;
}

.has-sand-background-color {
  background-color: #E7E1D0;
}

.has-green-color,
.has-green-color a {
  color: #00B592;
}

.has-leaf-green-color,
.has-leaf-green-color a {
  color: #A0D07A;
}

.has-dark-green-color,
.has-dark-green-color a {
  color: #3D6648;
}

.has-wheat-color,
.has-wheat-color a {
  color: #FCFCFA;
}

.has-sand-color,
.has-sand-color a {
  color: #E7E1D0;
}

.has-blue-color,
.has-orange-color,
.has-blue-color a,
.has-orange-color a {
  color: #F47A2C;
}

.has-black-color,
.has-black-color a {
  color: #40392E;
}

.has-white-color,
.has-white-color a {
  color: white;
}

/* ==========================================================================
 # OUTLINE BUTTON COLOURS
========================================================================== */
.is-style-outline .wp-block-button__link.has-green-color {
  border-color: #00B592;
  color: #00B592;
}
.is-style-outline .wp-block-button__link.has-green-color:hover, .is-style-outline .wp-block-button__link.has-green-color:focus {
  background: transparent;
  color: rgb(0, 79, 63.7237569061);
  border-color: rgb(0, 79, 63.7237569061);
}

.is-style-outline .wp-block-button__link.has-leaf-green-color {
  border-color: #A0D07A;
  color: #A0D07A;
}
.is-style-outline .wp-block-button__link.has-leaf-green-color:hover, .is-style-outline .wp-block-button__link.has-leaf-green-color:focus {
  background: transparent;
  color: rgb(107.6666666667, 168.4666666667, 59.5333333333);
  border-color: rgb(107.6666666667, 168.4666666667, 59.5333333333);
}

.is-style-outline .wp-block-button__link.has-dark-green-color {
  border-color: #3D6648;
  color: #3D6648;
}
.is-style-outline .wp-block-button__link.has-dark-green-color:hover, .is-style-outline .wp-block-button__link.has-dark-green-color:focus {
  background: transparent;
  color: rgb(22.8282208589, 38.1717791411, 26.9447852761);
  border-color: rgb(22.8282208589, 38.1717791411, 26.9447852761);
}

.is-style-outline .wp-block-button__link.has-wheat-color {
  border-color: #FCFCFA;
  color: #FCFCFA;
}
.is-style-outline .wp-block-button__link.has-wheat-color:hover, .is-style-outline .wp-block-button__link.has-wheat-color:focus {
  background: transparent;
  color: rgb(213.75, 213.75, 186.25);
  border-color: rgb(213.75, 213.75, 186.25);
}

.is-style-outline .wp-block-button__link.has-sand-color {
  border-color: #E7E1D0;
  color: #E7E1D0;
}
.is-style-outline .wp-block-button__link.has-sand-color:hover, .is-style-outline .wp-block-button__link.has-sand-color:focus {
  background: transparent;
  color: rgb(196.5211267606, 181.9014084507, 140.4788732394);
  border-color: rgb(196.5211267606, 181.9014084507, 140.4788732394);
}

.is-style-outline .wp-block-button__link.has-orange-color {
  border-color: #F47A2C;
  color: #F47A2C;
}
.is-style-outline .wp-block-button__link.has-orange-color:hover, .is-style-outline .wp-block-button__link.has-orange-color:focus {
  background: transparent;
  color: rgb(176.7837837838, 74.5675675676, 9.2162162162);
  border-color: rgb(176.7837837838, 74.5675675676, 9.2162162162);
}

.is-style-outline .wp-block-button__link.has-black-color {
  border-color: #40392E;
  color: #40392E;
}
.is-style-outline .wp-block-button__link.has-black-color:hover, .is-style-outline .wp-block-button__link.has-black-color:focus {
  background: transparent;
  color: rgb(4.6545454545, 4.1454545455, 3.3454545455);
  border-color: rgb(4.6545454545, 4.1454545455, 3.3454545455);
}

.is-style-outline .wp-block-button__link.has-white-color {
  border-color: white;
  color: white;
}
.is-style-outline .wp-block-button__link.has-white-color:hover, .is-style-outline .wp-block-button__link.has-white-color:focus {
  background: transparent;
  color: #cccccc;
  border-color: #cccccc;
}

/* ==========================================================================
 # ARROW BUTTON COLOURS
========================================================================== */
.is-style-button--outline-arrow .wp-block-button__link.has-green-color,
.is-style-button--arrow .wp-block-button__link.has-green-color {
  color: #00B592;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%2300B592%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-leaf-green-color,
.is-style-button--arrow .wp-block-button__link.has-leaf-green-color {
  color: #A0D07A;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23A0D07A%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-dark-green-color,
.is-style-button--arrow .wp-block-button__link.has-dark-green-color {
  color: #3D6648;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%233D6648%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-wheat-color,
.is-style-button--arrow .wp-block-button__link.has-wheat-color {
  color: #FCFCFA;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23FCFCFA%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-sand-color,
.is-style-button--arrow .wp-block-button__link.has-sand-color {
  color: #E7E1D0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23E7E1D0%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-black-color,
.is-style-button--arrow .wp-block-button__link.has-black-color {
  color: #40392E;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%2340392E%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-white-color,
.is-style-button--arrow .wp-block-button__link.has-white-color {
  color: white;
  background-image: url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2724%27 height=%2724%27 viewBox=%270 0 24 24%27%3E%3Cpath fill=%27%23FFFFFF%27 d=%27M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z%27/%3E%3C/svg%3E");
}

.is-style-button--outline-arrow .wp-block-button__link.has-green-color {
  border-color: #00B592;
}

.is-style-button--outline-arrow .wp-block-button__link.has-leaf-green-color {
  border-color: #A0D07A;
}

.is-style-button--outline-arrow .wp-block-button__link.has-dark-green-color {
  border-color: #3D6648;
}

.is-style-button--outline-arrow .wp-block-button__link.has-wheat-color {
  border-color: #FCFCFA;
}

.is-style-button--outline-arrow .wp-block-button__link.has-sand-color {
  border-color: #E7E1D0;
}

.is-style-button--outline-arrow .wp-block-button__link.has-black-color {
  border-color: #40392E;
}

.is-style-button--outline-arrow .wp-block-button__link.has-white-color {
  border-color: white;
}

/* ==========================================================================
 # IMAGES
========================================================================== */
@media (min-width: 46.25em) {
  .wp-block-image.is-background-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
  }
  .wp-block-image.is-background-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    flex: 1;
  }
  .wp-block-group.u-pa-large .wp-block-image.is-background-image, .wp-block-group.wp-block-background .wp-block-image.is-background-image {
    margin: -2.352rem;
  }
  .wp-block-group.u-pa-large .wp-block-column .wp-block-image.is-background-image, .wp-block-group.wp-block-background .wp-block-column .wp-block-image.is-background-image {
    margin-right: 0;
    margin-left: 0;
  }
  .wp-block-group.u-pa-large .wp-block-column:first-of-type .wp-block-image.is-background-image, .wp-block-group.wp-block-background .wp-block-column:first-of-type .wp-block-image.is-background-image {
    margin-left: -2.352rem;
  }
  .wp-block-group.u-pa-large .wp-block-column:last-of-type .wp-block-image.is-background-image, .wp-block-group.wp-block-background .wp-block-column:last-of-type .wp-block-image.is-background-image {
    margin-right: -2.352rem;
  }
}
.blocks-gallery-grid {
  display: flex;
  margin-right: -6px;
  margin-bottom: -12px;
  margin-left: -6px;
  padding: 1rem 0 0 0;
  list-style-type: none;
  flex-wrap: wrap;
}
.blocks-gallery-grid .blocks-gallery-image,
.blocks-gallery-grid .blocks-gallery-item {
  position: relative;
  display: flex;
  flex-direction: column;
  margin: 0;
  flex-grow: 1;
  justify-content: center;
}
.blocks-gallery-grid .blocks-gallery-image figure,
.blocks-gallery-grid .blocks-gallery-item figure {
  position: relative;
  height: 100%;
  margin: 0;
}
@supports (position: sticky) {
  .blocks-gallery-grid .blocks-gallery-image figure,
  .blocks-gallery-grid .blocks-gallery-item figure {
    display: flex;
    align-items: flex-end;
    justify-content: flex-start;
  }
}
.blocks-gallery-grid .blocks-gallery-image img,
.blocks-gallery-grid .blocks-gallery-item img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 0;
}
.blocks-gallery-grid .blocks-gallery-image img,
.blocks-gallery-grid .blocks-gallery-item img {
  width: 100%;
}
@supports (position: sticky) {
  .blocks-gallery-grid .blocks-gallery-image img,
  .blocks-gallery-grid .blocks-gallery-item img {
    width: auto;
  }
}
.blocks-gallery-grid .blocks-gallery-image figcaption,
.blocks-gallery-grid .blocks-gallery-item figcaption {
  position: absolute;
  bottom: 0;
  overflow: auto;
  width: 100%;
  max-height: 100%;
  padding: 40px 10px 9px;
  text-align: center;
  color: #FFFFFF;
  background: linear-gradient(0deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.3) 70%, transparent);
  font-size: 0.9rem;
}
.blocks-gallery-grid .blocks-gallery-image figcaption img,
.blocks-gallery-grid .blocks-gallery-item figcaption img {
  display: inline;
}
.blocks-gallery-grid.is-cropped .blocks-gallery-image a,
.blocks-gallery-grid.is-cropped .blocks-gallery-image img, .blocks-gallery-grid.is-cropped .blocks-gallery-item a,
.blocks-gallery-grid.is-cropped .blocks-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  flex: 1;
}
.blocks-gallery-grid .blocks-gallery-image, .blocks-gallery-grid .blocks-gallery-item {
  width: 50%;
  padding-right: 6px;
  padding-bottom: 12px;
  padding-left: 6px;
  box-sizing: border-box;
}
.blocks-gallery-grid.columns-1 .blocks-gallery-image, .blocks-gallery-grid.columns-1 .blocks-gallery-item {
  width: 100%;
  margin-right: 0;
}
.blocks-gallery-grid .blocks-gallery-image:last-child,
.blocks-gallery-grid .blocks-gallery-item:last-child {
  margin-right: 0;
}
.blocks-gallery-grid .blocks-gallery-item.has-add-item-button {
  width: 100%;
}
.blocks-gallery-grid.alignleft, .blocks-gallery-grid.alignright {
  width: 100%;
  max-width: 768/2;
}
.blocks-gallery-grid.alignleft, .blocks-gallery-grid.aligncenter, .blocks-gallery-grid.alignright {
  display: flex;
}
.blocks-gallery-grid.aligncenter .blocks-gallery-item figure {
  justify-content: center;
}

.wp-block-gallery.has-nested-images picture {
  flex-grow: 1;
}
.wp-block-gallery.has-nested-images .wp-block-image:not(#individual-image) img {
  margin: 0;
}

@media (min-width: 46.25em) {
  .wp-block-gallery.columns-3 > *,
  .blocks-gallery-grid.columns-3 > * {
    width: 33.3333333333%;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .wp-block-gallery.columns-4 > *,
  .blocks-gallery-grid.columns-4 > * {
    width: 25%;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .wp-block-gallery.columns-5 > *,
  .blocks-gallery-grid.columns-5 > * {
    width: 20%;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .wp-block-gallery.columns-6 > *,
  .blocks-gallery-grid.columns-6 > * {
    width: 16.6666666667%;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .wp-block-gallery.columns-7 > *,
  .blocks-gallery-grid.columns-7 > * {
    width: 14.2857142857%;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .wp-block-gallery.columns-8 > *,
  .blocks-gallery-grid.columns-8 > * {
    width: 12.5%;
    margin-right: 0 !important;
    box-sizing: border-box;
  }
  .wp-block-gallery.columns-1 > *:nth-child(1n), .wp-block-gallery.columns-1 > *:nth-child(1n),
  .blocks-gallery-grid.columns-1 > *:nth-child(1n),
  .blocks-gallery-grid.columns-1 > *:nth-child(1n) {
    margin-right: 0;
  }
  .wp-block-gallery.columns-2 > *:nth-child(2n), .wp-block-gallery.columns-2 > *:nth-child(2n),
  .blocks-gallery-grid.columns-2 > *:nth-child(2n),
  .blocks-gallery-grid.columns-2 > *:nth-child(2n) {
    margin-right: 0;
  }
  .wp-block-gallery.columns-3 > *:nth-child(3n), .wp-block-gallery.columns-3 > *:nth-child(3n),
  .blocks-gallery-grid.columns-3 > *:nth-child(3n),
  .blocks-gallery-grid.columns-3 > *:nth-child(3n) {
    margin-right: 0;
  }
  .wp-block-gallery.columns-4 > *:nth-child(4n), .wp-block-gallery.columns-4 > *:nth-child(4n),
  .blocks-gallery-grid.columns-4 > *:nth-child(4n),
  .blocks-gallery-grid.columns-4 > *:nth-child(4n) {
    margin-right: 0;
  }
}

.wp-block-media-text .block-editor-inner-blocks {
  padding: 0;
}

.wp-block-media-text.is-image-fill .wp-block-media-text__media {
  background-size: cover;
}
.wp-block-media-text.is-image-fill .wp-block-media-text__media > img,
.wp-block-media-text.is-image-fill .wp-block-media-text__media > picture > img {
  position: absolute;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
}

/* ==========================================================================
 # CUSTOM BLOCKS
========================================================================== */
.wp-block-usp-list-items img {
  border-radius: 50%;
  width: 75px;
  height: 75px;
  margin: 0;
  object-fit: cover;
  background: white;
}
.wp-block-usp-list-items p {
  max-width: 240px;
  line-height: 1.2;
  margin-left: 14px;
}

@media (min-width: 46.25em) {
  /*
   * Breaek the layout into two rows of four items
   * Otherwise the fourth item is a orphan
   *
   * See https://stackoverflow.com/a/29733127/11350351 for the order trick to accomplish this
   */
  .wp-block-usp-list-items.with-4-items:after {
    content: "";
    flex: 0 0 100%;
    height: 0;
  }
  .wp-block-usp-list-items.with-4-items > .o-grid__item:nth-of-type(n + 3) {
    order: 1;
  }
}
.wp-block-client-reference {
  width: 1040px;
  max-width: 90%;
  margin: 0 auto;
}
.wp-block-client-reference .c-slider__prev {
  left: -8vw;
}
@media (min-width: 68.75em) {
  .wp-block-client-reference .c-slider__prev {
    left: -75px;
  }
}
.wp-block-client-reference .c-slider__next {
  right: -8vw;
}
@media (min-width: 68.75em) {
  .wp-block-client-reference .c-slider__next {
    right: -75px;
  }
}
.wp-block-client-reference .c-slider__prev,
.wp-block-client-reference .c-slider__next {
  padding: 0;
  background: none;
  width: 50px;
  height: 50px;
}
.wp-block-client-reference .c-slider__prev svg,
.wp-block-client-reference .c-slider__next svg {
  width: 13px;
  height: 22px;
}

.wp-block-client-reference__item figure {
  display: block;
  width: 100%;
}
.wp-block-client-reference__item img {
  width: 288px;
  height: 280px;
  display: block;
  position: relative;
  margin: 0;
  object-fit: cover;
}
@media (min-width: 46.25em) {
  .wp-block-client-reference__item img {
    height: 100%;
  }
}
.wp-block-client-reference__item blockquote {
  color: white;
  margin: 0;
  border: 0;
  padding: 0;
  width: 100%;
}
.wp-block-client-reference__item p {
  margin-top: 0;
}

/*
 * Cards row
 */
.wp-block-cards-row__card img {
  margin: 0;
}
.wp-block-cards-row__card h1 {
  color: #40392E;
}
.wp-block-cards-row__card p {
  margin-top: 0;
}
.wp-block-cards-row__card a {
  width: 100%;
  display: flex;
  flex-direction: column;
  text-decoration: none !important;
  color: #40392E;
  transition: all 0.2s ease;
  transform: translateY(0);
}
.wp-block-cards-row__card a:focus, .wp-block-cards-row__card a:hover {
  transform: translatey(-2px);
  box-shadow: 0 2px 30px 0 rgba(0, 0, 0, 0.1);
}

.wp-block-cards-row__card__forward-icon {
  text-align: right;
  margin-top: auto;
}
.wp-block-cards-row__card__forward-icon svg {
  width: 11px;
  height: 11px;
}

.wp-block-cards-row__card__content {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

/**
 * Conact team member
 */
.wp-block-ctm {
  background: #A0D07A;
}
.wp-block-ctm h2 {
  color: white;
  max-width: 550px;
  font-weight: 700;
}

.wp-block-ctm__image-container img {
  width: 220px;
  height: 220px;
  object-fit: cover;
  border-radius: 50%;
}

/*
 * Content carousel
 */
.wp-block-content_carousel .c-slider__frame {
  overflow: visible;
}
.wp-block-content_carousel .c-slider__slide {
  width: 100%;
  height: 417px;
  position: relative;
}
.wp-block-content_carousel .c-slider__slide:after {
  content: " ";
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: rgba(0, 0, 0, 0.25);
  mix-blend-mode: multiply;
}
.wp-block-content_carousel .c-slider__slide img {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
  object-fit: cover;
}
.wp-block-content_carousel p {
  color: white;
  font-weight: 500;
  line-height: 1.2;
  margin: 0;
  font-size: 2.222rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  .wp-block-content_carousel p {
    font-size: clamp(1.556rem, 1.3071111111rem + 1.4vw, 2.222rem);
  }
}
.wp-block-content_carousel .c-slider__prev {
  left: 12px;
}
.wp-block-content_carousel .c-slider__next {
  right: 12px;
}
@media (min-width: 81.25em) {
  .wp-block-content_carousel .c-slider__prev {
    left: -55px;
  }
  .wp-block-content_carousel .c-slider__next {
    right: -55px;
  }
  .wp-block-content_carousel .c-slider__prev,
  .wp-block-content_carousel .c-slider__next {
    padding: 0;
    background: none;
    width: 50px;
    height: 50px;
  }
  .wp-block-content_carousel .c-slider__prev svg,
  .wp-block-content_carousel .c-slider__next svg {
    fill: white;
    width: 13px;
    height: 22px;
  }
}

.wp-block-content_carousel__slide-content {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 417px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
@media (max-width: 81.25em) {
  .wp-block-content_carousel__slide-content {
    padding-left: 75px;
    padding-right: 75px;
  }
}

.c-slider__slide.active .wp-block-content_carousel__slide-content {
  opacity: 1;
}

/*
 * Call to action
 */
.wp-block-call-to-action-section {
  background: #A1CD5C;
}

.wp-block-call-to-action-section__title {
  margin-top: 0;
  margin-bottom: 0.588rem;
  text-transform: lowercase;
  color: #4B3D2A;
  font-size: 1.5rem;
  font-weight: 500;
}

/*
 * Content-slider
 */
@media (max-width: 61.24em) {
  .wp-block-content-slider {
    max-width: 700px;
    margin: 0 auto;
  }
}
.wp-block-content-slider .c-slider__frame {
  padding-top: 10px;
}
.wp-block-content-slider .c-slider__prev {
  left: -40px;
}
@media (min-width: 81.375em) {
  .wp-block-content-slider .c-slider__prev {
    left: -45px;
  }
}
.wp-block-content-slider .c-slider__next {
  right: -40px;
}
@media (min-width: 81.375em) {
  .wp-block-content-slider .c-slider__next {
    right: -45px;
  }
}

/*
 * QUOTATION
 */
.c-quotation {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 1035px;
  margin: 0 auto;
  padding: 1.1764rem;
  padding-top: calc(1.1764rem + 32px);
  background-image: url(/wp-content/themes/schoutenfood/dist/images/quote-marks-background.svg);
  background-repeat: no-repeat;
  background-position: right center;
}
@media (min-width: 77.5em) {
  .c-quotation {
    margin-top: 0;
    border-radius: 10px;
    padding: 1.1764rem;
    padding-left: calc(1.1764rem + 32px);
  }
}
.c-quotation p {
  margin-top: 0;
  line-height: 1.2;
}

.c-quotation:before {
  position: absolute;
  top: -32px;
  left: 50%;
  display: table;
  width: 64px;
  height: 64px;
  content: " ";
  transform: translateX(-50%);
  border-radius: 32px;
  background: white url(/wp-content/themes/schoutenfood/dist/images/quote-marks.svg) no-repeat center center;
}
@media (min-width: 77.5em) {
  .c-quotation:before {
    top: 32px;
    left: -32px;
    transform: none;
  }
}

.c-quotation__quote {
  margin: 0;
  padding: 0;
  color: white;
  border: 0;
  font-size: 1.3rem;
}

.c-quotation__author {
  display: block;
  margin-top: 1.1764rem;
  font-weight: 600;
  font-style: normal;
}

.c-quotation--with-image {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-content: center;
  justify-content: center;
  align-items: center;
}
.c-quotation--with-image picture {
  width: 200px;
  height: 200px;
  object-fit: cover;
  display: block;
  margin: 0 auto 1rem auto;
  flex: none;
}
.c-quotation--with-image img {
  width: 200px;
  height: 200px;
  flex: none;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.c-quotation--with-image .c-quotation__content {
  flex-grow: 1;
}
@media (min-width: 61.25em) {
  .c-quotation--with-image {
    flex-direction: row;
  }
  .c-quotation--with-image picture {
    flex: none;
    margin: 0 0 0 1rem;
    order: 2;
  }
}

@media (min-width: 73.75em) {
  :root .c-quotation--overlapping {
    margin-top: -50px !important;
  }
}

.is-style-image--rounded img {
  border-radius: 10px;
}

/* ==========================================================================
 # CUSTOM ATTRIBUTES
========================================================================== */
.wp-block-quote__citation {
  position: relative;
  margin-top: 1em;
  color: #6C7781;
  font-size: 13px;
  font-style: normal;
}

.wp-block-group,
.wp-block-columns {
  margin-bottom: 0;
}

.has-max-width.has-text-align-center {
  margin-left: auto;
  margin-right: auto;
}

.wp-block-group.is-padded,
.wp-block-columns.is-padded,
.wp-block-media-text.is-padded .wp-block-media-text__content,
.wp-block-media-text.is-padded > .editor-inner-blocks {
  padding: 1.1764rem;
}
@media (min-width: 46.25em) {
  .wp-block-group.is-padded,
  .wp-block-columns.is-padded,
  .wp-block-media-text.is-padded .wp-block-media-text__content,
  .wp-block-media-text.is-padded > .editor-inner-blocks {
    padding: 2.352rem;
  }
}

.wp-block-group.is-small,
.wp-block-media-text.is-small,
.wp-block-columns.is-small {
  max-width: 768px !important;
  margin: 0 auto !important;
}

.wp-block-image:has(figcaption) {
  margin-bottom: 1rem;
}
.wp-block-image:has(figcaption) img {
  margin: 0;
}
.wp-block-image:has(figcaption) figcaption {
  margin-top: 0.5rem;
  color: #6C7781;
  text-align: center;
  font-size: 13px;
}

@media (min-width: 46.25em) {
  .wp-block-group.has-offset,
  .wp-block-media-text.has-offset,
  .wp-block-columns.has-offset {
    position: relative;
    margin-top: -5%;
  }
}
.wp-block-image.alignfull {
  line-height: 0;
}
.wp-block-image.alignfull img {
  width: 100%;
  height: auto;
}

@media (max-width: 46.24em) {
  .wp-block-media-text.image-hidden-mobile .wp-block-media-text__media {
    display: none;
  }
}
.page-template-page-homepage .wrap > .wp-block-image.alignfull,
.page-template-page-landing-page .wrap > .wp-block-image.alignfull {
  margin-bottom: 0;
}

@media (min-width: 46.25em) {
  .page-template-page-homepage .wp-block-group.is-small,
  .page-template-page-homepage .wp-block-media-text.is-small,
  .page-template-page-homepage .wp-block-columns.is-small,
  .page-template-page-landing-page .wp-block-group.is-small,
  .page-template-page-landing-page .wp-block-media-text.is-small,
  .page-template-page-landing-page .wp-block-columns.is-small {
    width: 80%;
    max-width: 100%;
    margin-right: auto;
    margin-left: auto;
  }
}
@media (max-width: 46.24em) {
  .wp-block-column.flex-fit {
    width: 100%;
  }
}
@media (min-width: 46.25em) {
  .wp-block-column.flex-fit {
    flex: none !important;
  }
  .wp-block-column.flex-fit + .wp-block-column {
    flex-basis: 0 !important;
    flex-grow: 1;
  }
}
.has-text-align-center {
  text-align: center;
}

.has-text-align-right {
  text-align: right;
}

.wp-block-group.has-background + .wp-block-group.has-background {
  margin-top: 2rem;
}

.has-liststyle-checkmark {
  list-style: none !important;
}
.has-liststyle-checkmark li {
  position: relative;
  margin-left: 1em !important;
}
.has-liststyle-checkmark li:before {
  position: absolute;
  top: 8px;
  left: -1.5em;
  width: 14px;
  height: 11px;
  content: " ";
  background: transparent url("data:image/svg+xml,%3Csvg xmlns=%27http://www.w3.org/2000/svg%27 width=%2714%27 height=%2711%27%3E%3Cpath d=%27M6.598 10.534l7.098-8.408a1.31 1.31 0 0 0-.148-1.817 1.276 1.276 0 0 0-1.812.15L5.477 7.9l-3.352-2.94a1.284 1.284 0 0 0-1.821.132 1.31 1.31 0 0 0 .14 1.834l4.377 3.757c.242.21.554.323.875.316h.105c.34-.029.654-.19.875-.448l-.078-.018z%27 fill=%27%231A6546%27 fill-rule=%27nonzero%27/%3E%3C/svg%3E") no-repeat center center;
}

.wp-block-separator.is-style-default {
  width: 80%;
  max-width: 410px;
}

/* ==========================================================================
 # CUSTOM STYLES
========================================================================== */
:root .wp-block-image.is-style-caption-in-image figure,
:root figure.is-style-caption-in-image {
  position: relative;
}
:root .wp-block-image.is-style-caption-in-image figure img,
:root figure.is-style-caption-in-image img {
  vertical-align: bottom;
  margin: 0;
}
:root .wp-block-image.is-style-caption-in-image figure figcaption,
:root figure.is-style-caption-in-image figcaption {
  pointer-events: none;
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50%;
  color: white;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.6));
  padding: 1rem;
  display: flex;
  align-items: flex-end;
  font-weight: 600;
  margin: 0;
  line-height: 1;
  text-align: left;
  font-size: 2.667rem;
}
@supports (font-size: clamp(1px, 2px, 3px)) {
  :root .wp-block-image.is-style-caption-in-image figure figcaption,
  :root figure.is-style-caption-in-image figcaption {
    font-size: clamp(1.222rem, 0.6886666667rem + 3vw, 2.667rem);
  }
}

/* ==========================================================================
 # BLOCK OVERWRITES
========================================================================== */
/*
 * Earlier breakpoint media-text
 */
@media (max-width: 46.24em) {
  .wp-block-media-text.is-stacked-on-mobile {
    grid-template-columns: 100% !important;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__media {
    grid-column: 1;
    grid-row: 1;
  }
  .wp-block-media-text.is-stacked-on-mobile .wp-block-media-text__content {
    grid-column: 1;
    grid-row: 2;
  }
  :root .wp-block-column {
    flex-basis: 100% !important;
    margin: 0;
  }
}
/**
 * BREADCRUMBS BLOCK
 */
.yoast-breadcrumbs {
  color: #A0A192;
  font-size: 0.77rem;
  margin-bottom: 2rem;
}

.yoast-breadcrumbs a {
  text-decoration: none !important;
}

.wp-block-group.is-padded > .wp-block-group__inner-container > .yoast-breadcrumbs,
.wp-block-group.is-padded > .wp-block-group__inner-container > [data-type="yoast-seo/breadcrumbs"] {
  margin-top: -1.5rem;
  margin-left: -1.5rem;
}

/* ==========================================================================
 # POLYFILLS
========================================================================== */
@media only screen and (-ms-high-contrast: active) and (min-width: 46.25em), (-ms-high-contrast: none) and (min-width: 46.25em) {
  .wp-block-media-text {
    display: flex;
    align-items: center;
  }
  .wp-block-media-text > :first-child {
    padding-right: 10px;
  }
  .wp-block-media-text > :last-child {
    padding-left: 10px;
  }
  .wp-block-media-text__media,
  .wp-block-media-text__content {
    width: 50%;
    flex: none;
  }
  .wp-block-media-text__content > :first-child {
    margin-top: 0;
  }
  .wp-block-media-text .wp-block-media-text__media img,
  .wp-block-media-text .wp-block-media-text__media video {
    width: 100%;
    height: auto;
    vertical-align: middle;
    margin: 0;
  }
  .wp-block-media-text.has-media-on-the-right {
    flex-direction: row-reverse;
  }
  .wp-block-media-text.has-media-on-the-right > :first-child {
    padding-right: 0;
    padding-left: 10px;
  }
  .wp-block-media-text.has-media-on-the-right:not(.is-padded) > :last-child {
    padding-right: 10px;
    padding-left: 0;
  }
  .wp-block-media-text.is-image-fill {
    align-items: stretch !important;
  }
  .wp-block-media-text.is-image-fill figure {
    height: auto;
    min-height: 250px;
    max-height: 100%;
  }
  .wp-block-columns.are-vertically-aligned-top {
    align-items: flex-start;
    justify-content: flex-end;
    padding-top: 1rem;
  }
  .wp-block-columns.are-vertically-aligned-top p:first-child,
  .wp-block-columns.are-vertically-aligned-top h2:first-child {
    margin-top: 0;
  }
}
.wp-block-media-text .wp-block-media-text__media img,
.wp-block-media-text .wp-block-media-text__media video {
  width: 100%;
  height: auto;
  vertical-align: middle;
  margin: 0;
}

/* Contact */
.wp-block-contact {
  font-size: 0.9rem;
}
.wp-block-contact h4 {
  font-size: 1rem;
  font-weight: 600;
  color: #40392E;
}
.wp-block-contact a {
  font-style: normal;
  text-decoration: none !important;
}

.ginput_container_consent {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

:root:root:root:root .gfield_consent_description {
  border: 0;
  padding: 0;
  font-size: 0.9rem;
  margin: 1rem 0;
}

.gform-field-label--type-inline {
  font-weight: normal;
  margin: 0;
}

:root .gform_wrapper.gravity-theme .gfield_description {
  padding-top: 5px;
}

.gform_required_legend {
  display: none;
}

/*
PRINT STYLESHEET
Feel free to customize this. Remember to add things that won't make
sense to print at the bottom. Things like nav, ads, and forms should
be set to display none.
*/
@media print {
  /******************************************************************
  Site Name:
  Author:

  Stylesheet: Print Stylesheet

  This is the print stylesheet. There's probably not a lot
  of reasons to edit this stylesheet. If you want to
  though, go for it.

  ******************************************************************/
  * {
    color: black !important;
    background: transparent !important;
    text-shadow: none !important;
    filter: none !important;
    -ms-filter: none !important;
  }
  p,
  a,
  table,
  tr,
  td {
    font-size: 11px;
  }
  h1 {
    font-size: 18px;
  }
  h2 {
    font-size: 15px;
  }
  h3 {
    font-size: 11px;
  }
  a,
  a:visited {
    text-decoration: underline;
  }
  a:after,
  a:visited:after {
    content: " (" attr(href) ")";
  }
  a abbr[title]:after,
  a:visited abbr[title]:after {
    content: " (" attr(title) ")";
  }
  .types a:after,
  .types a:visited:after,
  .applications a:after,
  .applications a:visited:after {
    content: "";
  }
  .types a abbr[title]:after,
  .types a:visited abbr[title]:after,
  .applications a abbr[title]:after,
  .applications a:visited abbr[title]:after {
    content: "";
  }
  .ir a:after,
  a[href^="javascript:"]:after,
  a[href^="#"]:after {
    content: "";
  }
  .headerimage {
    display: none;
    height: 0;
  }
  .main:after {
    content: "Schouten B.V., P.O. Box 41, NL-4280 CA Andel, Burgstraat 12, NL-4283 GG Giessen, Netherlands. T: +31 (0)183 44 63 90. F: +31 (0)183 44 84 20. E: info@schoutenfood.com";
    font-size: 11px;
  }
  .productWidget {
    float: left;
    width: 100%;
  }
  .bereidingswijze,
  .applications,
  .productInfo,
  .productWidget {
    margin: 0;
    padding: 0;
  }
  .nutrition-widget,
  .ingredients-widget {
    width: 48%;
  }
  .ingredients-widget {
    float: left;
  }
  .nutrition-widget {
    float: right;
  }
  .nutrition-widget nutrition-list {
    width: 325px;
  }
  .nutrition-widget nutrition-list li {
    width: 325px;
  }
  .nutrition-widget nutrition-list span {
    display: inline-block;
    width: 250px;
  }
  .nutrition-widget nutrition-list span.value {
    width: 76px;
  }
  .nutrition-widget td {
    width: 48%;
  }
  pre,
  blockquote {
    border: 1px solid #999999;
    page-break-inside: avoid;
  }
  thead {
    display: table-header-group;
  }
  tr,
  img {
    page-break-inside: avoid;
  }
  img {
    max-width: 100% !important;
  }
  @page {
    margin: 0.5cm;
  }
  p,
  h2,
  h3 {
    orphans: 3;
    widows: 3;
  }
  h2,
  h3 {
    page-break-after: avoid;
  }
  .productImgWidget {
    float: left;
    max-width: 250px;
    height: auto;
    margin-right: 20px;
  }
  .sidebar,
  .page-navigation,
  .wp-prev-next,
  .respond-form,
  .menu,
  .top-header__primary-nav,
  nav,
  .button,
  .footer,
  .contactWidgetWrap,
  .similarProducts,
  .headerimage-wrapper,
  .headerimage {
    display: none;
  }
  * {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
  }
  .clearfix:before, .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both;
  }
}

/*# sourceMappingURL=main_44d1cd094b74b1c5c332.css.map*/