html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  background:transparent;
}
* {
  box-sizing: border-box;
}
body, html {
  overflow-x: clip !important;
  padding: 0;
  margin: 0;
}

/* Default and light theme overwrites */
:root, [data-bs-theme="light"] {
  --colorText: #242424;
  --colorPrimary: #BB9578;
  --colorSecondary: #000;
  --blockHeight: clamp(80px, 10vh, 300px);
  --roundedBorder: calc(var(--blockHeight) / 1.5);

  /* Bootstrap */
  --bs-body-bg: #F7F3F0;
  --bs-body-bg-rgb: 247, 243, 240;
  --bs-dark-rgb: 36, 36, 36;
  --bs-primary-rgb: 187, 149, 120;
}

/* Dark theme overwrites */
[data-bs-theme="dark"] {
  --bs-body-bg: #242424;
  --bs-body-bg-rgb: 36, 36, 36;
}
body.wp-theme-recreapark, html[lang="nl-NL"] {
  position: relative;
  overflow-x: clip !important;
}
html, body {
  margin: 0;
  padding: 0;
}
body {
  font-family: "Roboto", sans-serif;
  color: #222;
  font-size: clamp(0.75rem, 1vw + 0.5rem, 1rem);
  line-height: 1.5;
  font-weight: 300;
  background-color: #fff;
}
p {
  margin-bottom: 1em;
}
p:last-of-type {
  margin-bottom: 0 !important;
}
a,
a:hover {
  color: var(--colorPrimary);
  text-decoration: underline;
  outline: none;
}
small {
  font-size: small;
}
h1, h2, h3, h4, h5, h6 {
  margin-bottom: 1rem;
  margin-top: 0;
}
h1 {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
}

h2 {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
}

h3 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem);
}

h4 {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.75rem);
}

h5 {
  font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem);
}

h6 {
  font-size: clamp(0.875rem, 0.75vw + 0.5rem, 1.25rem);
}
.font-size-1 {
  font-size: clamp(0.75rem, 1vw + 0.5rem, 1rem);
}
.font-size-2 {
 font-size: clamp(1rem, 1vw + 0.5rem, 1.5rem);
}
.font-size-3 {
  font-size: clamp(1.125rem, 1.5vw + 0.5rem, 1.75rem);
}
.font-size-4 {
  font-size: clamp(1.25rem, 2vw + 0.5rem, 2rem);
}
.font-size-5 {
  font-size: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem);
}
.font-size-6 {
  font-size: clamp(1.75rem, 3vw + 1rem, 3rem);
}
img {
  max-width: 100%;
  height: auto;
}
picture.object-fit-contain img {
  object-fit: contain;
}
picture.object-fit-cover img {
  object-fit: cover;
}
picture.w-100 img {
  width: 100%;
}
picture.h-100 img {
  height: 100%;
}
picture.image-rounded img {
  border-radius: var(--roundedBorder) 0 0 0;
}
strong {
  font-weight: bold;
}
.image-rounded {
  border-radius: var(--roundedBorder) 0 0 0;
}
.lh-0 {
  line-height: 0;
}
#page {
  position: relative;
  overflow-x: clip;
}

/* Button */
.btn, input[type="submit"] {
  display: inline-block;
  background: var(--colorPrimary);
  color: #fff;
  font-size: .750em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 2rem;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  cursor: pointer;
  transition: 0.3s ease background;
}
.btn:hover, input[type="submit"]:hover {
  display: inline-block;
  background: var(--colorSecondary);
  color: #fff;
  font-size: .750em;
  text-transform: uppercase;
  line-height: 1;
  padding: 1rem 2rem;
  border-radius: 0;
  appearance: none;
  -webkit-appearance: none;
  text-decoration: none;
  cursor: pointer;
}
input, textarea {
  color: var(--colorText);
}
co-button, .login-submit-button,
co-button:hover, .login-submit-button:hover {
  cursor: pointer;
}

/* == WordPress WYSIWYG Editor Styles == */
.entry-content img {
  margin: 0 0 1.5em 0;
  }
.alignleft, img.alignleft {
  margin-right: 1.5em;
  display: inline;
  float: left;
  }
.alignright, img.alignright {
  margin-left: 1.5em;
  display: inline;
  float: right;
  }
.aligncenter, img.aligncenter {
  margin-right: auto;
  margin-left: auto;
  display: block;
  clear: both;
  }
.alignnone, img.alignnone {
  /* not sure about this one */
  }
.wp-caption {
  margin-bottom: 1.5em;
  text-align: center;
  padding-top: 5px;
  }
.wp-caption img {
  border: 0 none;
  padding: 0;
  margin: 0;
  }
.wp-caption p.wp-caption-text {
  line-height: 1.5;
  font-size: 10px;
  margin: 0;
  }
.wp-smiley {
  margin: 0 !important;
  max-height: 1em;
  }
  
  
/* Header */
header#top {
  z-index: 999;
}
header #cart_qty {
  position: absolute;
  top: -6px;
  right: -12px;
  background-color: rgb( var(--bs-primary-rgb) );
  width: 16px;
  height: 16px;
  border-radius: 100px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 8px;
}
header .left img {
  max-width: 160px;
}
header .left h1 {
  font-size: 1.25rem;
}
header nav li {
  list-style: none;
}
header a {
  text-decoration: none;
  color: #222;
  position: relative;
}
header a:hover {
  color: #BB9578;
  text-decoration: none;
}
header nav li a {
  background-color: #fff;
  display: inline-block;
  line-height: 1;
  padding: 6px 15px;
  border-radius: 100px;
  font-size: clamp(0.75rem, 1vw + 0.25rem, 1rem);
  text-decoration: none;
}
header nav li.current-menu-item a,
header nav li.current-page-ancestor a,
.single-categorie header nav li.catalogus a {
  background-color: #BB9578;
  color: #fff;
}


/* Header image */
.header-image {
  height: clamp(300px, 30vw, 600px);
}
.home .header-image {
  height: clamp(500px, 75vh, 800px);
}
@keyframes zoomIn {
  0%   { transform: scale(1); }
  100% { transform: scale(1.25); }
}
.slow-move, 
.slow-move img {
  animation: zoomIn 20s ease-in-out;
}

/* Categories */
.cpt-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
}
.cpt-grid .categorie .title {
  font-size: .875rem;
  font-weight: bold;
  color: var(--colorText);
}
.cpt-grid .categorie .cat-image img {
  aspect-ratio: 1 / 1;
  transition: .3s ease-in-out transform;
  display: block;
}
.cpt-grid .categorie .cat-image img:hover {
  transform: scale(1.05);
}
.cpt-grid .categorie a {
  text-decoration: none;
  color: var(--colorText);
  transition: 0.3s ease-in-out background;
}
.cpt-grid .categorie a:hover {
  background: var(--colorPrimary);
}

/* Products */
.co-catalog-article-tile {
  background: #fff;
}

/* Gravity forms */
.gform_wrapper.gravity-theme ::placeholder {
  opacity: .75;
}
.gform_wrapper.gravity-theme .gform_fields {
  grid-row-gap: 1.5rem !important;
}
.gform_wrapper.gravity-theme input[type=color], .gform_wrapper.gravity-theme input[type=date], .gform_wrapper.gravity-theme input[type=datetime-local], .gform_wrapper.gravity-theme input[type=datetime], .gform_wrapper.gravity-theme input[type=email], .gform_wrapper.gravity-theme input[type=month], .gform_wrapper.gravity-theme input[type=number], .gform_wrapper.gravity-theme input[type=password], .gform_wrapper.gravity-theme input[type=search], .gform_wrapper.gravity-theme input[type=tel], .gform_wrapper.gravity-theme input[type=text], .gform_wrapper.gravity-theme input[type=time], .gform_wrapper.gravity-theme input[type=url], .gform_wrapper.gravity-theme input[type=week], .gform_wrapper.gravity-theme select, .gform_wrapper.gravity-theme textarea { 
  border-radius: 100px;
  border: 1px solid #ccc;
  padding: 1em 2em !important;
  font-weight: normal;
  color: inherit;
  font-family: inherit;
  font-size: clamp(0.75rem, 1vw + 0.5rem, 1rem) !important;
}
.gform_wrapper.gravity-theme input[type=color]:focus, .gform_wrapper.gravity-theme input[type=date]:focus, .gform_wrapper.gravity-theme input[type=datetime-local]:focus, .gform_wrapper.gravity-theme input[type=datetime]:focus, .gform_wrapper.gravity-theme input[type=email]:focus, .gform_wrapper.gravity-theme input[type=month]:focus, .gform_wrapper.gravity-theme input[type=number]:focus, .gform_wrapper.gravity-theme input[type=password]:focus, .gform_wrapper.gravity-theme input[type=search]:focus, .gform_wrapper.gravity-theme input[type=tel]:focus, .gform_wrapper.gravity-theme input[type=text]:focus, .gform_wrapper.gravity-theme input[type=time]:focus, .gform_wrapper.gravity-theme input[type=url]:focus, .gform_wrapper.gravity-theme input[type=week]:focus, .gform_wrapper.gravity-theme select:focus, .gform_wrapper.gravity-theme textarea:focus {
  outline: none; 
  border: 1px solid #ccc;
}
.gform_wrapper.gravity-theme textarea { 
  border-radius: 2rem 2rem 0 2rem;
  padding: 2rem !important;
  resize: vertical;
  height: auto;
  min-height: 250px;
}
.gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gravity-theme .gform_footer input, .gform_wrapper.gravity-theme .gform_page_footer button, .gform_wrapper.gravity-theme .gform_page_footer input {
  appearance: none;
  -webkit-appearance: none;
  background: var(--colorPrimary);
  color: #fff;
  line-height: 1;
  padding: 1rem 2rem;
  border-radius: 10rem;
  border: none;
  cursor: pointer;
  outline: none;
}

/* Home blocks */
#home-blocks .block-wrapper {
  border-radius: var(--roundedBorder) 0 0 0;
}
#home-blocks::after {
  width: 100%;
  height: 30%;
  position: absolute;
  bottom: 0;
  left: 0;
  content: "";
  background: #fff;
}
#home-blocks .block img {
  width: 35px;
  height: 35px;
  object-fit: contain;
}
#home-blocks .block .inner {
  border-right: 1px solid rgba(255, 255, 255, 0.25);
}
#home-blocks .row .block:last-child .inner {
  border: none;
}

/* Home content */
.home-content .bg-primary {
  border-radius: 0 0 var(--roundedBorder) 0;
}

/* Menu toggle */
#menu-toggle {
  width: 24px;
  height: 18px;
  cursor: pointer;
  position: relative;
  transition: .3s ease-in-out transform;
  overflow: hidden;
}
#menu-toggle.nav-up {
    transform: translateY(-100%);
}
#menu-toggle span {
  display: block;
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: rgb(var(--bs-dark-rgb));
  position: absolute;
  left: 0;
  transition: .2s ease-in-out all;
}
#menu-toggle span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  width: 70%;
}
#menu-toggle:hover span:nth-child(2) {
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
}
#menu-toggle span:nth-child(3) {
  bottom: 0;
}

/* Mobile Nav */
#mobile-nav {
  position: fixed;
  left: 0;
  top: 0;
  width: clamp(300px, 60%, 500px);
  height: 100%;
  z-index: 99999;
  background: #fff;
  transform: translateX(-100%);
  transition: 0.4s ease-in-out transform;
}
.menu-open #mobile-nav {
  transform: translateX(0);
}
#mobile-nav #menu-close {
  width: 20px;
  height: 20px;
  position: relative;
  overflow: hidden;
}
#mobile-nav #menu-close span {
  width: 100%;
  height: 2px;
  border-radius: 2px;
  background: #fff;
  display: block;
  position: absolute;
  left: 0;
  top: 50%;
  transform: rotate(45deg);
}
#mobile-nav #menu-close span:nth-child(2) {
  transform: rotate(-45deg);
}
#mobile-nav li {
  display: block;
  list-style: none;
  font-size: 0.875rem;
  padding: 1.25rem 1.5rem;
  line-height: 1;
  border-bottom: 1px solid rgba(187, 149, 120, 0.25);
}
#mobile-nav li a {
  display: block;
  color: var(--colorText);
  text-decoration: none;
  font-weight: 500;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='18.569' viewBox='0 0 10 18.569'%3E%3Cpath id='Icon_bootstrap-chevron-right' data-name='Icon bootstrap-chevron-right' d='M10.333,3.583a.714.714,0,0,1,1.011,0l8.569,8.569a.714.714,0,0,1,0,1.011l-8.569,8.569a.715.715,0,1,1-1.011-1.011L18.4,12.658,10.333,4.594a.714.714,0,0,1,0-1.011Z' transform='translate(-10.123 -3.373)' fill='%23bb9578'/%3E%3C/svg%3E%0A");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center right;
}

/* Nav overlay */
#nav-overlay {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: #000;
  z-index: 9999;
  visibility: hidden;
  opacity: 0;
  transition: 0.6s ease-in-out all;
}
.menu-open #nav-overlay {
  opacity: 0.5;
  visibility: visible;
}

/* Melding */
#melding {
  opacity: 0;
  transition: all 0.3s ease;
  display: none;
  transform: translateY(-100%);
}
#melding.show {
  display: block;
  opacity: 1;
  transform: translateY(0);
}
#close-melding {
  position: absolute;
  right: 1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  overflow: hidden;
  cursor: pointer;
}
#close-melding span {
  background: #fff;
  width: 100%;
  height: 1px;
  border-radius: 1px;
  position: absolute;
  left: 0;
  top: 50%;
}
#close-melding span:nth-child(1) {
  transform: translateY(-50%) rotate(45deg);
}
#close-melding span:nth-child(2) {
  transform: translateY(-50%) rotate(-45deg);
}

/* Popup */
.popup {
  display: none;
  width: 100%;
  max-width: 600px;
}
.popup .formulier ::placeholder {
  font-size: 0.875em;
}
.popup .gform_wrapper.gravity-theme input[type=color], .popup .gform_wrapper.gravity-theme input[type=date], .popup .gform_wrapper.gravity-theme input[type=datetime-local], .popup .gform_wrapper.gravity-theme input[type=datetime], .popup .gform_wrapper.gravity-theme input[type=email], .popup .gform_wrapper.gravity-theme input[type=month], .popup .gform_wrapper.gravity-theme input[type=number], .popup .gform_wrapper.gravity-theme input[type=password], .popup .gform_wrapper.gravity-theme input[type=search], .popup .gform_wrapper.gravity-theme input[type=tel], .popup .gform_wrapper.gravity-theme input[type=text], .popup .gform_wrapper.gravity-theme input[type=time], .popup .gform_wrapper.gravity-theme input[type=url], .popup .gform_wrapper.gravity-theme input[type=week], .popup .gform_wrapper.gravity-theme select, .popup .gform_wrapper.gravity-theme textarea {
  border-radius: 0;
  padding: 1em 2em !important;
}
.popup .gform_wrapper.gravity-theme .gform_footer button, .popup .gform_wrapper.gravity-theme .gform_footer input, .popup .gform_wrapper.gravity-theme .gform_page_footer button, .popup .gform_wrapper.gravity-theme .gform_page_footer input {
  border-radius: 0;
}

/* Omzetgroepen */
.omzetgroepen {
  font-size: 0.750em;
}

/* Checkout custom message */
.checkout-acf-box .checkout-acf-content {
  padding: 30px;
  background: #f8f8fa;
}
.checkout-acf-box .checkout-acf-content td:nth-child(2) {
  padding: 4px;
}
.checkout-acf-box .checkout-acf-content table {
  margin-bottom: 15px;
}

/* Responsive styles */
@media (max-width: 1399.98px) {

}

@media (max-width: 1199.98px) {
  :root {
    --blockHeight: clamp(80px, 8vw, 300px);
  }
  #home-blocks .block img {
    width: 25px;
    height: 25px;
  }
}

@media (max-width: 991.98px) {
  header .right a i.border-start {
    border: none !important;
  }
  #home-blocks .block:nth-child(2) .inner,
  #home-blocks .block:nth-child(4) .inner {
   border: none; 
  }
}

@media (max-width: 767.98px) {
  header .left img.border-end {
    border: none !important;
  }
}

@media (max-width: 575.98px) {
  .cpt-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  }
  header .left img {
    max-width: 130px;
  }
  #home-blocks::after {
    height: 50%;
  }
  #home-blocks .block img {
    width: 20px;
    height: 20px;
  }
  .gform_wrapper.gravity-theme .gform_footer button, .gform_wrapper.gravity-theme .gform_footer input, .gform_wrapper.gravity-theme .gform_page_footer button, .gform_wrapper.gravity-theme .gform_page_footer input {
    padding: 0.5rem 2rem;
  }
  small {
    font-size: 12px;
  }
}