@charset "UTF-8";
/*!
Theme Name: cardboard
Theme URI: https://www.danielsilva.nl
Author: Daniel Silva
Author URI: https://www.danielsilva.nl
Description: A digital theme with an analog style.
Version: 1.1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: cardboard
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

cardboard is based on Underscores https://underscores.me/, (C) 2012-2017 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/
/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Normalize
# Typography
# Elements
# Forms
# Navigation
	## Links
	## Menus
# 404
# Accessibility
# Alignments
# Clearings
# Header
# Widgets
# Content
	## Posts and pages
    ## Front page
    ## Footer
    ## Products overview page
    ## Product information page
	## Comments
# Infinite scroll
# Media
	## Captions
	## Galleries
    ## Carousel
--------------------------------------------------------------*/
/*--------------------------------------------------------------
# Normalize
--------------------------------------------------------------*/
/*! normalize.css v8.0.0 | MIT License | github.com/necolas/normalize.css */
/* Document
	 ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
  line-height: 1.15;
  /* 1 */
  -webkit-text-size-adjust: 100%;
  /* 2 */
}

/* Sections
	 ========================================================================== */
/**
 * Remove the margin in all browsers.
 */
body {
  margin: 0;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
  -webkit-box-sizing: content-box;
          box-sizing: content-box;
  /* 1 */
  height: 0;
  /* 1 */
  overflow: visible;
  /* 2 */
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/* Text-level semantics
	 ========================================================================== */
/**
 * Remove the gray background on active links in IE 10.
 */
a {
  background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
  border-bottom: none;
  /* 1 */
  text-decoration: underline;
  /* 2 */
  -webkit-text-decoration: underline dotted;
          text-decoration: underline dotted;
  /* 2 */
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
  font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace;
  /* 1 */
  font-size: 1em;
  /* 2 */
}

/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sub {
  bottom: -0.25em;
}

sup {
  top: -0.5em;
}

/* Embedded content
	 ========================================================================== */
/**
 * Remove the border on images inside links in IE 10.
 */
img {
  border-style: none;
}

/* Forms
	 ========================================================================== */
/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
  /* 1 */
  font-size: 100%;
  /* 1 */
  line-height: 1.15;
  /* 1 */
  margin: 0;
  /* 2 */
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
  /* 1 */
  overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
  /* 1 */
  text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
  -webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
  border-style: none;
  padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
  outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
  padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  color: inherit;
  /* 2 */
  display: table;
  /* 1 */
  max-width: 100%;
  /* 1 */
  padding: 0;
  /* 3 */
  white-space: normal;
  /* 1 */
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
  vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
  overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
  /* 1 */
  padding: 0;
  /* 2 */
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
  -webkit-appearance: textfield;
  /* 1 */
  outline-offset: -2px;
  /* 2 */
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
  -webkit-appearance: button;
  /* 1 */
  font: inherit;
  /* 2 */
}

/* Interactive
	 ========================================================================== */
/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
  display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}

/* Misc
	 ========================================================================== */
/**
 * Add the correct display in IE 10+.
 */
template {
  display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
  display: none;
}

/*--------------------------------------------------------------
# Typography
--------------------------------------------------------------*/
body,
input,
select,
optgroup,
textarea {
  color: #404040;
  font-family: 'Zilla Slab', Serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  font-size: 16px;
  font-size: 16px;
  font-size: 1rem;
  line-height: 1.5;
}

.site-content {
  font-size: 1.125em;
}

h1, h2, h3, h4, h5, h6 {
  font-family: 'Zilla Slab', serif;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  clear: both;
  color: #21563b;
}

h1 {
  font-size: 1.7em;
}

h2 {
  font-size: 1.5em;
}

h3 {
  font-size: 1.4em;
}

h4 {
  font-size: 1.3em;
}

h5 {
  font-size: 1.2em;
}

h6 {
  font-size: 1.1em;
}

@media screen and (min-width: 560px) {
  h1 {
    font-size: 2.4em;
  }
  h2 {
    font-size: 2.2em;
  }
  h3 {
    font-size: 2em;
  }
  h4 {
    font-size: 1.8em;
  }
  h5 {
    font-size: 1.6em;
  }
  h6 {
    font-size: 1.4em;
  }
}

p {
  margin-bottom: 1.5em;
}

dfn, cite, em, i {
  font-style: italic;
}

blockquote {
  font-family: 'Zilla Slab', serif;
  margin: 0 1.5em;
}

address {
  margin: 0 0 1.5em;
}

pre {
  background: #eee;
  font-family: "Courier 10 Pitch", Courier, monospace;
  font-size: 15px;
  font-size: 0.9375rem;
  line-height: 1.6;
  margin-bottom: 1.6em;
  max-width: 100%;
  overflow: auto;
  padding: 1.6em;
}

code, kbd, tt, var {
  font-family: Monaco, Consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
  font-size: 15px;
  font-size: 0.9375rem;
}

abbr, acronym {
  border-bottom: 1px dotted #666;
  cursor: help;
}

mark, ins {
  background: #fff9c0;
  text-decoration: none;
}

big {
  font-size: 125%;
}

/*--------------------------------------------------------------
# Elements
--------------------------------------------------------------*/
html {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

*,
*:before,
*:after {
  /* Inherit box-sizing to make it easier to change the property for components that leverage other behavior; see https://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
  -webkit-box-sizing: inherit;
          box-sizing: inherit;
}

body {
  background: #fff;
  /* Fallback for when there is no custom background color defined. */
}

hr {
  background-color: #ccc;
  border: 0;
  height: 1px;
  margin-bottom: 1.5em;
}

ul, ol {
  margin: 0 0 1.5em 3em;
}

ul {
  list-style: disc;
}

ol {
  list-style: decimal;
}

li > ul,
li > ol {
  margin-bottom: 0;
  margin-left: 1.5em;
}

dt {
  font-weight: bold;
}

dd {
  margin: 0 1.5em 1.5em;
}

img {
  max-width: 100%;
  /* Adhere to container width. */
}

figure {
  margin: 1em 0;
  /* Extra wide images within figure tags don't overflow the content area. */
}

table {
  margin: 0 0 1.5em;
  width: 100%;
}

/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  background-color: #21563b;
  border: 2px solid #21563b;
  border-radius: 3px;
  color: white;
  font-size: 1rem;
  height: 32px;
  line-height: 22px;
  padding: 3px 7px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.4s all ease;
  transition: 0.4s all ease;
}

button:hover, button:active,
input[type="button"]:hover,
input[type="button"]:active,
input[type="reset"]:hover,
input[type="reset"]:active,
input[type="submit"]:hover,
input[type="submit"]:active {
  background-color: #2C7551;
  border-color: #2C7551;
  cursor: pointer;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 3px;
  padding: 3px 7px;
  max-width: 100%;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
  color: #111;
}

select {
  border: 1px solid #ccc;
}

textarea {
  width: 100%;
}

#contact-form-home {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  min-width: 320px;
}

#contact-form-home p {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  min-width: 0;
  margin: 0;
}

#contact-form-home p label {
  width: 100%;
}

#contact-form-home p span input {
  width: 100%;
}

#contact-form-home p .wpcf7-not-valid-tip {
  font-size: 13px;
  margin-left: 5px;
}

#contact-form-home p:nth-of-type(5) {
  height: 33px;
  -ms-grid-column: -2;
      grid-column-start: -2;
  grid-column-end: -1;
}

#contact-form-home p .wpcf7-submit {
  width: 100%;
}

#contact-form-home p .wpcf7-submit:hover {
  cursor: pointer;
  background-color: #2C7551;
}

#contact-form-home p .ajax-loader {
  display: none;
}

#contact-form-home div.wpcf7-response-output {
  -ms-grid-column: 1;
      grid-column-start: 1;
  grid-column-end: -1;
  margin: 0;
  text-align: center;
  font-size: 13px;
  border-radius: 3px;
}

#contact-form-home div.wpcf7-response-output .wpcf7-mail-sent-ok {
  border-color: #21563b;
}

#contact-form-home div.wpcf7-validation-errors, #contact-form-home div.wpcf7-acceptance-missing {
  border: 2px solid #FECB2F;
}

@media screen and (min-width: 600px) {
  #contact-form-home {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
  #contact-form-home p {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 2;
  }
  #contact-form-home p:nth-of-type(2) {
    -ms-grid-column: 2;
        grid-column-start: 2;
    grid-column-end: 3;
  }
  #contact-form-home p:nth-of-type(3), #contact-form-home p:nth-of-type(4), #contact-form-home p:nth-of-type(5) {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: -1;
  }
  #contact-form-home p:nth-of-type(3) label, #contact-form-home p:nth-of-type(4) label, #contact-form-home p:nth-of-type(5) label {
    width: 100%;
  }
  #contact-form-home p .onderwerp input {
    width: 100%;
  }
}

@media screen and (min-width: 900px) {
  #contact-form-home {
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
  }
  #contact-form-home p:nth-of-type(2) {
    -ms-grid-column: 2;
        grid-column-start: 2;
    grid-column-end: 3;
  }
  #contact-form-home p:nth-of-type(3) {
    -ms-grid-column: 3;
        grid-column-start: 3;
    grid-column-end: 4;
  }
  #contact-form-home p:nth-of-type(5) {
    -ms-grid-column: 2;
        grid-column-start: 2;
    grid-column-end: 3;
  }
}

/*--------------------------------------------------------------
# Navigation
--------------------------------------------------------------*/
/*--------------------------------------------------------------
## Links
--------------------------------------------------------------*/
a {
  color: #21563b;
}

a:visited {
  color: #21563b;
}

a:hover, a:focus, a:active {
  color: #2C7551;
}

a:focus {
  outline: thin dotted;
}

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

div.breadcrumbs {
  position: fixed;
  top: 80px;
  width: 100%;
  z-index: 900;
}

div.breadcrumbs p#breadcrumbs {
  background-color: rgba(0, 0, 0, 0.7);
  display: inline;
  max-width: 1040px;
  margin: 0 auto;
  padding: 7px 10px;
  grid-column: 1 / -1;
  border-radius: 7px;
}

div.breadcrumbs p#breadcrumbs span {
  color: rgba(255, 255, 255, 0.8);
}

div.breadcrumbs p#breadcrumbs span a:visited, div.breadcrumbs p#breadcrumbs span a:link {
  color: rgba(255, 255, 255, 0.8);
}

div.breadcrumbs p#breadcrumbs span a:hover, div.breadcrumbs p#breadcrumbs span a:active {
  color: rgba(200, 200, 200, 0.8);
}

/*--------------------------------------------------------------
## Menus
--------------------------------------------------------------*/
.main-navigation {
  display: block;
  width: 100%;
}

.main-navigation .menu-hoofdmenu-container {
  background-color: white;
}

.main-navigation ul {
  display: none;
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.main-navigation ul ul li {
  display: none;
  margin-left: 0.8em;
}

.main-navigation ul ul.toggled-on li {
  display: block;
}

.main-navigation a {
  display: block;
  padding: 0.8em 0;
  position: relative;
  text-decoration: none;
}

.main-navigation li {
  border-top: 1px solid #eaeaea;
  border-top: 1px solid rgba(51, 51, 51, 0.1);
  position: relative;
}

.main-navigation .current-menu-item > a, .main-navigation .current-menu-ancestor > a {
  font-weight: 700;
}

.main-navigation .nav-menu > ul > li:first-child,
.main-navigation .main-navigation .nav-menu > li:first-child {
  border-top: 0;
}

.main-navigation .menu-item-has-children > a {
  padding-right: 30px;
}

.main-navigation .menu-item-description {
  color: #707070;
  color: rgba(51, 51, 51, 0.7);
  font-family: "Zilla slab", sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.5;
  margin-top: 0.5em;
}

nav#site-navigation {
  background: white;
  height: auto;
}

.no-js .main-navigation ul ul {
  display: block;
}

.dropdown-toggle {
  background-color: transparent;
  border: red solid 1px;
  -webkit-box-sizing: content-box;
  box-sizing: content-box;
  content: "";
  height: 24px;
  padding: 0;
  position: absolute;
  text-transform: lowercase;
  /* Stop screen readers to read the text as capital letters */
  top: 10px;
  right: 0;
  width: 24px;
}

.dropdown-toggle:after {
  color: #333;
  content: ">";
  font-size: 24px;
  line-height: 24px;
  position: relative;
  top: 0;
  left: 1px;
  width: 24px;
}

.dropdown-toggle:hover,
.dropdown-toggle:focus {
  background-color: #eaeaea;
  background-color: rgba(51, 51, 51, 0.1);
}

.dropdown-toggle:focus {
  outline: 1px solid #c1c1c1;
  outline: 1px solid rgba(51, 51, 51, 0.3);
}

.dropdown-toggle.toggle-on:after {
  content: "<";
}

/* Small menu. */
button.menu-toggle {
  color: #21563b;
  float: right;
  height: 30px;
  margin: 15px 0;
  background-color: white;
  border: none;
}

button.menu-toggle:hover, button.menu-toggle:active {
  border: none;
  color: #21563b;
  background-color: rgba(51, 51, 51, 0.1);
}

.menu-toggle,
.main-navigation.toggled ul {
  clear: both;
  display: block;
}

/* Large menu. */
@media screen and (min-width: 720px) {
  .menu-toggle {
    display: none;
  }
  .main-navigation ul {
    display: block;
    float: right;
    height: 50px;
    margin: 5px auto;
  }
  .main-navigation ul li {
    display: inline-block;
    border-top: none;
  }
  .main-navigation ul li:last-of-type {
    margin-right: 0;
  }
  .main-navigation ul li a {
    line-height: 30px;
    padding: 10px 5px;
  }
}

.site-main .comment-navigation, .site-main
.posts-navigation, .site-main
.post-navigation {
  margin: 0 0 1.5em;
  overflow: hidden;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
  float: left;
  width: 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
  float: right;
  text-align: right;
  width: 50%;
}

.winkelmandje, .mijn-profiel {
  font-family: 'icomoon' !important;
}

.winkelmandje span, .mijn-profiel span {
  font-family: "zilla slab", sans-serif;
}

@media screen and (min-width: 720px) {
  .winkelmandje span, .mijn-profiel span {
    display: none;
  }
}

/* Recepten volgende vorige navigatie */
body.single-recepten div.nav-links div.nav-previous a, body.single-recepten div.nav-links div.nav-next a {
  background-color: #21563b;
  border: 2px solid #21563b;
  border-radius: 3px;
  color: white;
  font-size: 1rem;
  height: 32px;
  line-height: 22px;
  padding: 3px 7px;
  text-align: center;
  text-decoration: none;
  -webkit-transition: 0.4s all ease;
  transition: 0.4s all ease;
  display: inline-block;
}

body.single-recepten div.nav-links div.nav-previous a:hover, body.single-recepten div.nav-links div.nav-previous a:active, body.single-recepten div.nav-links div.nav-next a:hover, body.single-recepten div.nav-links div.nav-next a:active {
  background-color: #2C7551;
  border-color: #2C7551;
  cursor: pointer;
}

body.single-recepten div.nav-links div.nav-previous a::before {
  content: "⟨ ";
}

body.single-recepten div.nav-links div.nav-next a::after {
  content: " ⟩";
}

/*--------------------------------------------------------------
# 404
--------------------------------------------------------------*/
#primary #main .container .error-404 header {
  position: relative;
}

#primary #main .container .error-404 header img {
  width: 100%;
  height: auto;
  max-height: 900px;
  border: 10px solid white;
}

#primary #main .container .error-404 header img.uitsnede {
  position: absolute;
  width: 100%;
  top: 0;
  left: 0;
}

/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
  border: 0;
  clip: rect(1px, 1px, 1px, 1px);
  -webkit-clip-path: inset(50%);
          clip-path: inset(50%);
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  position: absolute !important;
  width: 1px;
  word-wrap: normal !important;
  /* Many screen reader and browser combinations announce broken words as they would appear visually. */
}

.screen-reader-text:focus {
  background-color: #f1f1f1;
  border-radius: 3px;
  -webkit-box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
          box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
  clip: auto !important;
  -webkit-clip-path: none;
          clip-path: none;
  color: #21563b;
  display: block;
  font-size: 14px;
  font-size: 0.875rem;
  font-weight: bold;
  height: auto;
  left: 5px;
  line-height: normal;
  padding: 15px 23px 14px;
  text-decoration: none;
  top: 5px;
  width: auto;
  z-index: 100000;
  /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
  outline: 0;
}

/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
  display: inline;
  float: left;
  margin-right: 1.5em;
}

.alignright {
  display: inline;
  float: right;
  margin-left: 1.5em;
}

.aligncenter {
  clear: both;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/*--------------------------------------------------------------
# Clearings
--------------------------------------------------------------*/
.clear:before,
.clear:after,
.entry-content:before,
.entry-content:after,
.comment-content:before,
.comment-content:after,
.site-header:before,
.site-header:after,
.site-content:before,
.site-content:after,
.site-footer:before,
.site-footer:after {
  content: "";
  display: table;
  table-layout: fixed;
}

.clear:after,
.entry-content:after,
.comment-content:after,
.site-header:after,
.site-content:after,
.site-footer:after {
  clear: both;
}

/*--------------------------------------------------------------
# Header
--------------------------------------------------------------*/
#masthead {
  position: fixed;
  top: 0;
  left: 0;
  background-color: white;
  height: auto;
  width: 100%;
  z-index: 1000;
  -webkit-box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.5);
          box-shadow: 0 2px 2px 1px rgba(0, 0, 0, 0.5);
}

#masthead .container {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  position: relative;
}

#masthead .site-branding {
  position: absolute;
  top: 0;
  left: 0;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#masthead .site-branding a.custom-logo-link {
  height: 60px;
  display: block;
  float: left;
  margin-right: 20px;
}

#masthead .site-branding a.custom-logo-link img {
  max-height: 50px;
  width: auto;
  margin: 5px 0;
}

#masthead .site-branding h1.site-title {
  display: none;
  margin: 0 20px 0 0;
  line-height: 60px;
}

#masthead .site-branding h1.site-title a {
  text-decoration: none;
}

#masthead .site-branding p.site-description {
  color: #21563b;
  margin: 0;
  display: none;
}

@media screen and (min-width: 910px) {
  #masthead .site-branding p.site-description {
    display: block;
    float: left;
    margin-top: 32px;
  }
}

/*--------------------------------------------------------------
# Infinite scroll
--------------------------------------------------------------*/
/* Globally hidden elements when Infinite Scroll is supported and in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
  /* Theme Footer (when set to scrolling) */
  display: none;
}

/* When Infinite Scroll has reached its end we need to re-display elements that were hidden (via .neverending) before. */
.infinity-end.neverending .site-footer {
  display: block;
}

/*--------------------------------------------------------------
# Instagram GRID
--------------------------------------------------------------*/
section#instagram div#sb_instagram.sbi_col_3 div#sbi_images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr 1fr;
      grid-template-columns: 1fr 1fr 1fr;
  grid-column-gap: 10px;
  grid-row-gap: 10px;
  margin-bottom: 10px;
}

section#instagram div#sb_instagram.sbi_col_3 div#sbi_images .sbi_item {
  width: 100%;
}

section#instagram div#sb_instagram.sbi_col_3 div#sbi_images .sbi_item a.sbi_photo a.sbi-screenreader {
  text-indent: -9999px !important;
  display: block !important;
  width: 0 !important;
  height: 0 !important;
  line-height: 0 !important;
}

@media all and (min-width: 600px) {
  section#instagram div#sb_instagram.sbi_col_3 div#sbi_images {
    grid-column-gap: 20px;
    grid-row-gap: 20px;
  }
}

@media all and (min-width: 900px) {
  section#instagram div#sb_instagram.sbi_col_3 div#sbi_images {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
  }
}

/*--------------------------------------------------------------
# Landing
--------------------------------------------------------------*/
main.landingPage section {
  margin-bottom: 50px;
  background-size: cover;
  background-position: center;
}

main.landingPage section a {
  display: block;
  margin: 0 auto;
  padding: 10px;
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 7px;
  text-decoration: none;
  text-align: center;
}

main.landingPage section a h2 {
  font-family: "Meddon", Cursive;
  font-size: 2.5rem;
  color: #404040;
  width: 153.8%;
  text-transform: lowercase;
  transform: scale(0.65, 1);
  -webkit-transform: scale(0.65, 1);
  margin-left: -26.9%;
  margin-top: 0.5em;
  margin-bottom: 0;
  line-height: 1.2em;
}

main.landingPage section a p {
  display: none;
}

#landAbmas {
  background-image: url(https://abmas.nl/wp-content/uploads/2019/05/basilicum-in-kas-hero.jpg);
}

#landZakelijk {
  background-image: url(https://abmas.nl/wp-content/uploads/2020/03/magazijnfoto.jpg);
}

#landConsument {
  background-image: url(https://abmas.nl/wp-content/uploads/2020/04/gevuld-witlofschelpje.jpg);
}

#landRecept {
  background-image: url(https://abmas.nl/wp-content/uploads/2020/04/gemengde-geroosterde-groente.jpg);
}

/*--------------------------------------------------------------
# Recepten
--------------------------------------------------------------*/
body.post-type-archive-recepten div.site-content div.container {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -webkit-column-gap: 20px;
          column-gap: 20px;
  row-gap: 20px;
}

@media screen and (min-width: 600px) {
  body.post-type-archive-recepten div.site-content div.container {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
  }
}

@media screen and (min-width: 900px) {
  body.post-type-archive-recepten div.site-content div.container {
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
  }
}

body.post-type-archive-recepten div.site-content div.container header.page-header {
  grid-column: 1 / -1;
}

body.post-type-archive-recepten div.site-content div.container header.page-header h1.page-title {
  margin: 0.3em 0 0;
}

body.post-type-archive-recepten div.site-content article.recepten {
  border-radius: 7px;
  background-color: #efefef;
  overflow: hidden;
}

body.post-type-archive-recepten div.site-content article.recepten header {
  padding: 0 0.5em;
}

body.post-type-archive-recepten div.site-content article.recepten header h2.entry-title {
  font-family: "Meddon", Cursive;
  font-size: 1.5rem;
  color: #404040;
  width: 153.8%;
  text-align: center;
  text-transform: lowercase;
  transform: scale(0.65, 1);
  -webkit-transform: scale(0.65, 1);
  margin-left: -26.9%;
  margin-top: 0.5em;
  margin-bottom: 0.5em;
  line-height: 1.2em;
}

body.post-type-archive-recepten div.site-content article.recepten header h2.entry-title a {
  text-decoration: none;
}

body.post-type-archive-recepten div.site-content article.recepten a.post-thumbnail {
  display: block;
  overflow: hidden;
  max-width: 100%;
}

body.post-type-archive-recepten div.site-content article.recepten a.post-thumbnail img {
  display: block;
  -webkit-transition: 0.4s all ease;
  transition: 0.4s all ease;
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

body.post-type-archive-recepten div.site-content article.recepten:hover a.post-thumbnail img {
  -webkit-transform: scale(1.05);
          transform: scale(1.05);
}

body.single-recepten div.post-thumbnail {
  height: 66vw;
  max-height: 66vh;
  overflow: hidden;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

body.single-recepten div.post-thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  -o-object-position: center;
     object-position: center;
}

body.single-recepten article.recepten {
  background-color: white;
}

body.single-recepten article.recepten h1.entry-title {
  font-family: "Meddon", Cursive;
  color: #404040;
  width: 153.8%;
  text-align: center;
  text-transform: lowercase;
  transform: scale(0.65, 1);
  -webkit-transform: scale(0.65, 1);
  margin-left: -26.9%;
  margin-bottom: 2rem;
}

body.single-recepten article.recepten div ul, body.single-recepten article.recepten div ol {
  margin: 0 0 25px 0;
  padding-left: 25px;
}

body.single-recepten article.recepten div.ingredienten ul li {
  list-style: none;
  margin-left: -14px;
}

body.single-recepten article.recepten div.ingredienten ul li::before {
  content: "*  ";
  font-family: "Meddon", Cursive;
}

body.single-recepten article.recepten div.bereiding ol {
  list-style: none;
  counter-reset: my-awesome-counter;
}

body.single-recepten article.recepten div.bereiding ol li {
  counter-increment: my-awesome-counter;
  margin-left: -18px;
}

body.single-recepten article.recepten div.bereiding ol li::before {
  content: counter(my-awesome-counter) ". ";
  font-family: "Meddon", Cursive;
}

@media screen and (min-width: 600px) {
  body.single-recepten article.recepten div.entry-content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 300px auto;
        grid-template-columns: 300px auto;
    -webkit-column-gap: 2rem;
            column-gap: 2rem;
  }
  body.single-recepten article.recepten div.entry-content div.post-text {
    grid-column: span 2;
  }
}

/*--------------------------------------------------------------
# Widgets
--------------------------------------------------------------*/
.widget {
  margin: 0 0 1.5em;
  /* Make sure select elements fit in widgets. */
}

.widget select {
  max-width: 100%;
}

/*--------------------------------------------------------------
# Content
--------------------------------------------------------------*/
div#content {
  margin-top: 60px;
}

main#main {
  min-width: 320px;
  overflow-x: hidden;
}

/*--------------------------------------------------------------
## Posts and pages
--------------------------------------------------------------*/
.sticky {
  display: block;
}

.post,
.page {
  margin: 0 0 1.5em;
}

.updated:not(.published) {
  display: none;
}

.page-content,
.entry-content,
.entry-summary {
  margin: 0.5em 0 1.5em;
}

.page-content .wp-block-embed-youtube iframe,
.entry-content .wp-block-embed-youtube iframe,
.entry-summary .wp-block-embed-youtube iframe {
  width: 90vw;
  height: 50.63vw;
  max-width: 1040px;
  max-height: 585px;
}

iframe#youtube {
  width: 90vw;
  height: 50.63vw;
  max-width: 1040px;
  max-height: 585px;
}

.page-links {
  clear: both;
  margin: 0 0 1.5em;
}

/*--------------------------------------------------------------
## Front page
--------------------------------------------------------------*/
div#primary {
  /* einde main#main */
}

div#primary main#main {
  /* einde #waar-smaak-groeit */
}

div#primary main#main section {
  padding: 3rem 0;
}

div#primary main#main section h1:first-child, div#primary main#main section h2:first-child, div#primary main#main section h3:first-child, div#primary main#main section h4:first-child, div#primary main#main section h5:first-child, div#primary main#main section h6:first-child {
  margin-top: 0;
}

div#primary main#main section#hero {
  background-image: url(https://abmas.nl/wp-content/uploads/2020/11/abmas_collectie_mobile.jpg);
  background-size: cover;
  background-position: bottom;
  width: 100vw;
}

div#primary main#main section#hero div.content {
  width: 90%;
  margin: 0 auto 250px;
}

div#primary main#main section#hero div.content h2 {
  font-family: "Meddon", Cursive;
  font-size: 2rem;
  color: #404040;
  margin-bottom: 0.2em;
  text-transform: lowercase;
  transform: scale(0.65, 1);
  -webkit-transform: scale(0.65, 1);
  margin-left: -26%;
  width: 150%;
}

div#primary main#main section#hero div.content p {
  font-family: "zilla slab", sans-serif;
  font-size: 1.2rem;
  color: #21563b;
}

div#primary main#main section#hero div.content a {
  display: inline-block;
  font-family: "zilla slab", sans-serif;
  color: white;
  text-decoration: none;
  background-color: #21563b;
  border-radius: 5px;
  padding: 4px 10px;
}

div#primary main#main section#hero div.content a:hover {
  background-color: #2C7551;
}

@media screen and (min-width: 400px) {
  div#primary main#main section#hero {
    height: 710px;
  }
}

@media screen and (min-width: 600px) {
  div#primary main#main section#hero {
    background-image: url(https://abmas.nl/wp-content/uploads/2020/11/abmas_collectie_mobile_large.jpg);
    height: 66.66vw;
    max-height: 500px;
  }
  div#primary main#main section#hero div.content {
    width: 55%;
    margin: 0 5% 0 40%;
  }
}

@media screen and (min-width: 825px) {
  div#primary main#main section#hero {
    background-image: url(https://abmas.nl/wp-content/uploads/2020/11/abmas_collectie_tablet.jpg);
    height: 40vw;
    max-height: 500px;
  }
}

@media screen and (min-width: 1150px) {
  div#primary main#main section#hero {
    background-image: url(https://abmas.nl/wp-content/uploads/2020/11/abmas_collectie_desktop.jpg);
    height: 33.33vw;
  }
  div#primary main#main section#hero div.content {
    width: 40%;
    max-width: 500px;
    margin: 0 5% 0 55%;
  }
}

@media screen and (min-width: 1440px) {
  div#primary main#main section#hero div.content {
    margin: 40px 5% 0 55%;
  }
}

div#primary main#main #waar-smaak-groeit {
  background-image: -webkit-gradient(linear, left top, left bottom, from(#C3DFAF), to(#E1EFD7));
  background-image: linear-gradient(#C3DFAF, #E1EFD7);
  /* einde container */
}

div#primary main#main #waar-smaak-groeit .container .text {
  -webkit-column-count: 1;
          column-count: 1;
}

@media screen and (min-width: 600px) {
  div#primary main#main #waar-smaak-groeit .container .text {
    -webkit-column-count: 2;
    column-count: 2;
  }
  div#primary main#main #waar-smaak-groeit .container .text p {
    -webkit-column-break-inside: avoid;
    break-inside: avoid;
  }
  div#primary main#main #waar-smaak-groeit .container .text p:first-of-type {
    margin-top: 0px;
  }
}

div#primary main#main section.wijsheid {
  background-color: #C3DFAF;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#E1EFD7), to(#C3DFAF));
  background-image: linear-gradient(#E1EFD7, #C3DFAF);
  background-color: #21563b;
  background-image: url("https://www.abmas.nl/wp-content/uploads/2019/06/verfstroken.jpg");
  background-size: cover;
  background-position: center;
  min-height: 150px;
  margin: auto;
  position: relative;
}

div#primary main#main section.wijsheid blockquote {
  font-family: Meddon, serif;
  color: white;
  font-size: 30px;
  text-align: center;
  line-height: 50px;
}

div#primary main#main section.wijsheid blockquote::before, div#primary main#main section.wijsheid blockquote::after {
  content: "'";
}

div#primary main#main section.wijsheid img.decoration-left, div#primary main#main section.wijsheid img.decoration-right {
  position: absolute;
  width: 150px;
  height: auto;
}

div#primary main#main section.wijsheid img.decoration-left {
  top: -20px;
  left: -100px;
}

div#primary main#main section.wijsheid img.decoration-right {
  bottom: -30px;
  right: -100px;
}

@media screen and (min-width: 600px) {
  div#primary main#main section.wijsheid img.decoration-left {
    left: 5%;
  }
  div#primary main#main section.wijsheid img.decoration-right {
    right: 5%;
  }
}

div#primary main#main section#vinden {
  background: #FFF;
  /* For Safari 5.1 to 6.0 */
  /* For Opera 11.1 to 12.0 */
  /* For Firefox 3.6 to 15 */
  background: -webkit-gradient(linear, left top, left bottom, from(#FFF), to(#EFEFEF));
  background: linear-gradient(#FFF, #EFEFEF);
  /* Standard syntax */
  padding: 4rem 0;
  /* einde section#partners */
}

div#primary main#main section#vinden div.container {
  /* einde div.container */
}

div#primary main#main section#vinden div.container div#partner-links {
  display: -ms-grid;
  display: grid;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  grid-column-gap: 25px;
  grid-row-gap: 25px;
  /* einde div#partner-links */
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant {
  grid-column: span 1;
  min-height: 180px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  /* einde div.vierkant */
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  width: 100%;
  height: 100%;
  /* einde a.partner-logo */
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg {
  text-align: center;
  vertical-align: middle;
  height: 100%;
  max-height: 330px;
  width: 100%;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg line, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg circle {
  stroke: #999;
  -webkit-transition: 1500ms 0.4s all ease;
  transition: 1500ms 0.4s all ease;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg path, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg ellipse, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg polygon, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg rect, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo svg text {
  fill: #999;
  -webkit-transition: 1500ms 0.4s all ease;
  transition: 1500ms 0.4s all ease;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #deKrat .cls-1, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #deKrat .cls-3 {
  stroke: #999;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #deKrat .cls-1, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #deKrat .cls-3, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #deKrat .cls-4 {
  fill: none;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #deKrat .cls-2 {
  fill: #999;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #Udea #bladLinks {
  fill: #999;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #Udea #bladRechts {
  fill: #999;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #MoreThanGifts .CubeLetter {
  fill: #CCC;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo #Logo-samen-in-de-keuken #Koken-en-tafelen path {
  fill: #CCC;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover {
  /* a.partner-logo:hover */
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover svg path, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover svg ellipse, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover svg polygon, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover svg rect {
  fill: #000;
  -webkit-transition: 1500ms 0.4s all ease;
  transition: 1500ms 0.4s all ease;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover svg line, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover svg circle {
  stroke: #000;
  -webkit-transition: 1500ms 0.4s all ease;
  transition: 1500ms 0.4s all ease;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #abmas path, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #abmas polygon, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #abmas text {
  fill: #21563b;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #vitam .vitam-letters {
  fill: #c80851;
  -webkit-transition: 1500ms 0.4s all ease;
  transition: 1500ms 0.4s all ease;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #vitam .vitam-teken {
  fill: #dbda56;
  -webkit-transition: 1500ms 0.4s all ease;
  transition: 1500ms 0.4s all ease;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #deKrat .cls-1 {
  stroke: #59a647;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #deKrat .cls-3 {
  stroke: #000;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #deKrat .cls-2 {
  fill: #59a647;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #rai .rai {
  fill: #e00f49;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #crisp path {
  fill: #0C3338;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #kookplus .kook {
  fill: #5c6130;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #kookplus .plus {
  fill: #ed8a29;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea path.Letters {
  fill: #6D1F80;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #Tagline path {
  fill: #000000;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #bladRechts {
  fill: #97BF0D;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #bladMidden {
  fill: #97BF0D;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #bladLinks {
  fill: #00973A;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #stipLinks {
  fill: #00973A;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #stipMidden {
  fill: #007D34;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Udea #stipRechts {
  fill: #97BF0D;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #kweker .letters {
  fill: #655848;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #kweker .punt {
  stroke: #655848;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #MoreThanGifts #MTGLetters path, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #MoreThanGifts #MTGLetters rect {
  fill: #696868;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #MoreThanGifts .MTGBG {
  fill: #97C12D;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #MoreThanGifts .CubeLetter {
  fill: white;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Logo-samen-in-de-keuken #Koken-en-tafelen path {
  fill: white;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Logo-samen-in-de-keuken .hartje {
  fill: #EC007C;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #Logo-samen-in-de-keuken #Samen-in-de-Keuken path {
  fill: black;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #zuiderzee path, div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #zuiderzee rect {
  fill: #2b2b89;
}

div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo:hover #annahaen path {
  fill: #434758;
}

@media screen and (min-width: 600px) {
  div#primary main#main {
    /* einde media screen 600px */
  }
  div#primary main#main section#vinden {
    margin: 0 auto;
    height: auto;
    /* einde section#vinden */
  }
  div#primary main#main section#vinden div.container {
    /* einde div.container */
  }
  div#primary main#main section#vinden div.container h2 {
    grid-column: span 2;
  }
  div#primary main#main section#vinden div.container div#partner-links {
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    /* einde div#partner-links */
  }
  div#primary main#main section#vinden div.container div#partner-links div.vierkant {
    min-height: 220px;
    /* einde div.vierkant */
  }
  div#primary main#main section#vinden div.container div#partner-links div.vierkant a.partner-logo {
    width: 100%;
    height: 100%;
    /* einde a.partner logo */
  }
}

@media screen and (min-width: 900px) {
  div#primary main#main {
    /* einde media screen 600px */
  }
  div#primary main#main section#vinden {
    /* einde section#vinden */
  }
  div#primary main#main section#vinden div.container {
    /* einde div.container */
  }
  div#primary main#main section#vinden div.container h2 {
    grid-column: span 3;
  }
  div#primary main#main section#vinden div.container div#partner-links {
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
    grid-column-gap: 30px;
    grid-row-gap: 30px;
    /* einde div#partner-links */
  }
}

/* einde div#primary */
.container {
  width: 90%;
  min-width: 288px;
  max-width: 1040px;
  margin: 0 auto;
}

/*--------------------------------------------------------------
## Footer
--------------------------------------------------------------*/
footer.site-footer {
  background-color: #21563b;
  background-image: url("https://www.abmas.nl/wp-content/uploads/2019/06/verfstroken.jpg");
  background-size: cover;
  background-position: center;
  color: white;
  padding: 30px 0 50px 0;
  margin: 30px 0 -50px;
}

footer.site-footer a {
  color: white;
  text-decoration: none;
}

footer.site-footer a:hover {
  text-decoration: underline;
}

footer.site-footer .container .site-branding {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: baseline;
      -ms-flex-align: baseline;
          align-items: baseline;
}

footer.site-footer .container .site-branding img#footer-logo {
  height: auto;
  width: 128px;
  margin-right: 20px;
}

footer.site-footer .container h1 {
  color: white;
  margin: 0 20px 0 0;
}

footer.site-footer .container nav.footer-navigation {
  clear: both;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
  margin-bottom: 30px;
}

@media screen and (min-width: 500px) {
  footer.site-footer .container nav.footer-navigation {
    -ms-grid-columns: 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 625px) {
  footer.site-footer .container nav.footer-navigation {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 800px) {
  footer.site-footer .container nav.footer-navigation {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

footer.site-footer .container nav.footer-navigation div {
  margin-bottom: 1em;
}

footer.site-footer .container nav.footer-navigation ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

footer.site-footer .container nav.footer-navigation ul li a {
  text-decoration: none;
  font-weight: bold;
  margin-bottom: 10px;
}

footer.site-footer .container nav.footer-navigation ul li a:link, footer.site-footer .container nav.footer-navigation ul li a:visited {
  color: white;
}

footer.site-footer .container nav.footer-navigation ul li a:hover, footer.site-footer .container nav.footer-navigation ul li a:active {
  color: #DDD;
  text-decoration: underline;
}

footer.site-footer .container nav.footer-navigation ul li ul.sub-menu {
  margin-top: 10px;
}

footer.site-footer .container nav.footer-navigation ul li ul.sub-menu li a {
  font-weight: normal;
}

footer.site-footer .container #contact_links {
  margin-bottom: 30px;
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr 1fr;
      grid-template-columns: 1fr 1fr;
}

footer.site-footer .container #contact_links a {
  height: 24px;
  margin-right: 12px;
  margin-bottom: 12px;
  color: white;
  text-decoration: none;
}

footer.site-footer .container #contact_links a img {
  width: 24px;
  height: 24px;
}

footer.site-footer .container #contact_links a span {
  display: inline-block;
  margin: 0 0 0 6px;
  line-height: 24px;
  vertical-align: top;
}

footer.site-footer .container #contact_links a:hover {
  text-decoration: underline;
}

@media screen and (min-width: 625px) {
  footer.site-footer .container #contact_links {
    -ms-grid-columns: 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 800px) {
  footer.site-footer .container #contact_links {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
  }
}

@media screen and (min-width: 1000px) {
  footer.site-footer .container #contact_links {
    -ms-grid-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;
  }
}

footer.site-footer .container #legal {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: end;
      -ms-flex-align: end;
          align-items: flex-end;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

footer.site-footer .container #legal address, footer.site-footer .container #legal small {
  margin-bottom: 0;
}

footer.site-footer .container #legal small {
  font-size: 100%;
}

/*--------------------------------------------------------------
## Product information page
--------------------------------------------------------------*/
body.single-producten div.post-thumbnail {
  height: 65vh;
  overflow: hidden;
}

body.single-producten div.post-thumbnail img {
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

body.single-producten .entry-content {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 1fr;
      grid-template-columns: 1fr;
  -ms-grid-rows: auto;
      grid-template-rows: auto;
}

body.single-producten .entry-content header.entry-header {
  -ms-grid-row: 1;
      grid-row-start: 1;
}

body.single-producten .entry-content header.entry-header h1 {
  font-family: 'Meddon';
  margin: 25px auto;
  line-height: 1.2;
  color: #404040;
}

body.single-producten .entry-content header.entry-header p.oneliner {
  margin: 0 auto;
  color: #21563b;
  font-size: 1.2rem;
  text-transform: uppercase;
}

body.single-producten .entry-content p:first-of-type {
  margin: 0;
  -ms-grid-row: 2;
      grid-row-start: 2;
}

body.single-producten .entry-content div.inhoudsmaat {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 0.5em;
}

body.single-producten .entry-content div.inhoudsmaat p {
  display: inline-block;
}

body.single-producten .entry-content div.links {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
}

body.single-producten .entry-content p.serveertip, body.single-producten .entry-content .inhoudsmaat p {
  margin: 3px 0;
}

body.single-producten .entry-content img.packshot {
  display: inline-block;
  min-height: 100px;
  max-height: 110vh;
  place-self: center;
}

body.single-producten .entry-content a.download-file:link, body.single-producten .entry-content a.download-file:visited, body.single-producten .entry-content a.external-link:link, body.single-producten .entry-content a.external-link:visited {
  text-decoration: none;
  line-height: 20px;
  padding: 5px;
  border: 1.5px solid #21563b;
  border-radius: 5px;
  display: inline-block;
}

body.single-producten .entry-content a.download-file:hover, body.single-producten .entry-content a.download-file:active, body.single-producten .entry-content a.external-link:hover, body.single-producten .entry-content a.external-link:active {
  border-color: #2C7551;
}

@media screen and (min-width: 640px) {
  body.single-producten .entry-content {
    -ms-grid-columns: 1fr 1fr;
        grid-template-columns: 1fr 1fr;
    -webkit-column-gap: 20px;
            column-gap: 20px;
    -ms-grid-rows: auto auto auto 40px 60px;
        grid-template-rows: auto auto auto 40px 60px;
  }
  body.single-producten .entry-content header.entry-header {
    -ms-grid-row: 1;
        grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: -1;
  }
  body.single-producten .entry-content p:first-of-type, body.single-producten .entry-content p.serveertip, body.single-producten .entry-content div.inhoudsmaat, body.single-producten .entry-content div.links {
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: 2;
  }
  body.single-producten .entry-content div.inhoudsmaat {
    -ms-flex-item-align: center;
        -ms-grid-row-align: center;
        align-self: center;
  }
  body.single-producten .entry-content p:first-of-type, body.single-producten .entry-content p.serveertip, body.single-producten .entry-content div.links {
    -ms-flex-item-align: start;
        -ms-grid-row-align: start;
        align-self: start;
  }
  body.single-producten .entry-content p:first-of-type {
    -ms-grid-row: 2;
        grid-row-start: 2;
    grid-row-end: 3;
  }
  body.single-producten .entry-content p.serveertip {
    -ms-grid-row: 3;
        grid-row-start: 3;
    grid-row-end: 4;
  }
  body.single-producten .entry-content div.inhoudsmaat {
    -ms-grid-row: 4;
        grid-row-start: 4;
    grid-row-end: 5;
  }
  body.single-producten .entry-content div.links {
    -ms-grid-row: 5;
        grid-row-start: 5;
    grid-row-end: 6;
  }
  body.single-producten .entry-content img.packshot {
    -ms-grid-row: 2;
        grid-row-start: 2;
    grid-row-end: -1;
    -ms-grid-column: -2;
        grid-column-start: -2;
    grid-column-end: -1;
  }
}

@media screen and (min-width: 900px) {
  body.single-producten .entry-content {
    -ms-grid-columns: 2fr 1fr;
        grid-template-columns: 2fr 1fr;
    -webkit-column-gap: 20px;
            column-gap: 20px;
  }
  body.single-producten .entry-content header.entry-header {
    -ms-grid-row: 1;
        grid-row-start: 1;
    grid-row-end: 2;
    -ms-grid-column: 1;
        grid-column-start: 1;
    grid-column-end: -2;
  }
  body.single-producten .entry-content img.packshot {
    -ms-grid-row: 1;
        grid-row-start: 1;
    grid-row-end: -1;
    -ms-grid-column: -2;
        grid-column-start: -2;
    grid-column-end: -1;
  }
}

main#main div.hero-images {
  display: -ms-grid;
  display: grid;
  -ms-grid-columns: 100%;
      grid-template-columns: 100%;
  -ms-grid-rows: 1fr 1fr;
      grid-template-rows: 1fr 1fr;
  max-height: 132vw;
  width: 100vw;
  overflow: hidden;
  -webkit-column-gap: 2vw;
          column-gap: 2vw;
  row-gap: 2vw;
}

main#main div.hero-images img {
  max-width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

main#main div.hero-images img.verticaal {
  display: none;
}

@media screen and (min-width: 600px) {
  main#main div.hero-images {
    -ms-grid-columns: 3fr 2fr;
        grid-template-columns: 3fr 2fr;
    -ms-grid-rows: 39vw 39vw;
        grid-template-rows: 39vw 39vw;
    max-height: 80vw;
  }
  main#main div.hero-images img.verticaal {
    display: block;
    -ms-grid-column: 2;
        grid-column-start: 2;
    -ms-grid-row: 1;
        grid-row-start: 1;
    grid-row-end: 3;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media screen and (min-width: 900px) {
  main#main div.hero-images {
    -ms-grid-columns: 2fr 3fr;
        grid-template-columns: 2fr 3fr;
  }
  main#main div.hero-images img.verticaal {
    -ms-grid-column: 1;
        grid-column-start: 1;
    -ms-grid-row: 1;
        grid-row-start: 1;
    grid-row-end: 3;
  }
}

@media screen and (min-width: 600px) {
  main#main div.hero-images:nth-of-type(even) {
    -ms-grid-columns: 2fr 3fr;
        grid-template-columns: 2fr 3fr;
  }
  main#main div.hero-images:nth-of-type(even) img.verticaal {
    -ms-grid-column: 1;
        grid-column-start: 1;
    height: 100%;
    -o-object-fit: cover;
       object-fit: cover;
  }
}

@media screen and (min-width: 900px) {
  main#main div.hero-images:nth-of-type(even) {
    -ms-grid-columns: 3fr 2fr;
    grid-template-columns: 3fr 2fr;
  }
  main#main div.hero-images:nth-of-type(even) img.verticaal {
    -ms-grid-column: 2;
        grid-column-start: 2;
  }
}

/*--------------------------------------------------------------
## Comments
--------------------------------------------------------------*/
.comment-content a {
  word-wrap: break-word;
}

.bypostauthor {
  display: block;
}

/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
  border: none;
  margin-bottom: 0;
  margin-top: 0;
  padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
  max-width: 100%;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
  display: inline-block;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
  margin-bottom: 1.5em;
  max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.wp-caption .wp-caption-text {
  margin: 0.8075em 0;
}

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

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
  margin-bottom: 1.5em;
}

.gallery-item {
  display: inline-block;
  text-align: center;
  vertical-align: top;
  width: 100%;
}

.gallery-columns-2 .gallery-item {
  max-width: 50%;
}

.gallery-columns-3 .gallery-item {
  max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
  max-width: 25%;
}

.gallery-columns-5 .gallery-item {
  max-width: 20%;
}

.gallery-columns-6 .gallery-item {
  max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
  max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
  max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
  max-width: 11.11%;
}

.gallery-caption {
  display: block;
}

/*--------------------------------------------------------------
## Carousel
--------------------------------------------------------------*/
div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 {
  padding: 0;
  width: 100%;
  margin: 0 auto;
  height: 66vw;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-list, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-list {
  height: 100%;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-list div.slick-track, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-list div.slick-track {
  height: 100%;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-list div.slick-track div.slick-slide, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-list div.slick-track div.slick-slide {
  height: 100%;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-list div.slick-track div.slick-slide div, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-list div.slick-track div.slick-slide div {
  height: 100%;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-list div.slick-track div.slick-slide div div.wpcp-slide-image, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-list div.slick-track div.slick-slide div div.wpcp-slide-image {
  height: 100%;
  width: auto;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-list div.slick-track div.slick-slide div div.wpcp-slide-image img, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-list div.slick-track div.slick-slide div div.wpcp-slide-image img {
  height: 100%;
  width: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  overflow: hidden;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-arrow, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-arrow {
  font-size: 50px;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-arrow:hover, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-arrow:hover {
  font-size: 50px;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-next, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-next {
  text-align: left;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 div.slick-prev, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 div.slick-prev {
  text-align: right;
}

div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2124 ul.slick-dots, div.wpcp-carousel-wrapper #sp-wp-carousel-free-id-2049 ul.slick-dots {
  position: absolute;
  bottom: 5%;
  left: 50%;
  margin-left: -27px;
}
/*# sourceMappingURL=style.css.map */