/* Table of Content
==================================================
	#Font-Face
	#Site Styles
	#Media Queries */

/* #Font-Face
================================================== */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap');

/* #Site Styles
================================================== */

/* ### general ### */
html,
body { font-family: 'Outfit', sans-serif; font-size: 24px; line-height: 1.5; color: #474747; }
body { background: #fff; }
img { display: block; max-width: 100%; border: 0; }
ul,
li { margin: 0; padding: 0; list-style: none; }
:focus { outline: none; }
a { display: inline-block; text-decoration: none; }
h1,
h2,
h3,
h4,
h5,
h6 { font-family: 'Oswald', sans-serif; font-weight: 700; line-height: 1.2; color: #202a42; }
h1 { font-size: 40px; }
h2 { font-size: 40px; }
h3 { font-size: 28px; }
h4 { font-size: 24px; }
h5 { font-size: 20px; }
h6 { font-size: 16px; }

/* ### global classes ### */
.clear { visibility: hidden; clear: both; height: 0; line-height: 0; }
.container-lg { max-width: 1630px; }
.container { max-width: 1518px; }
.btn { padding: 18px 40px; font-family: 'Oswald', sans-serif; font-size: 24px; font-weight: 700; text-transform: uppercase; transition: all 0.3s; }
.btn-primary { color: #fff; border: 0; border-radius: 0 0 0 35px; background-color: #74975d; }
.btn-primary:hover { background-color: #202a42; }
.btn-primary:after { margin-top: -8px; margin-left: 20px; display: inline-block; font-family: 'icomoon', sans-serif; font-size: 36px; vertical-align: middle; content: '\e902'; }
.link { font-family: 'Oswald', sans-serif; font-size: 28px; font-weight: 500; text-transform: uppercase; color: #202a42; transition: all 0.3s; }
.link:after { margin-top: -8px; margin-left: 20px; display: inline-block; font-family: 'icomoon', sans-serif; font-size: 36px; vertical-align: middle; content: '\e902'; }
.link:hover { color: #74975d; }

/* ### wrapper ### */
#wrapper { position: relative; display: block; width: 100%; min-height: 100%; overflow: hidden; }

/* ### main container ### */
#mainCntr { width: 100%; }

/* ### header container ### */
#headerCntr { padding-top: 27px; padding-bottom: 27px; position: relative; z-index: 9; width: 100%; }
#headerCntr .logo { padding-top: 8px; position: relative; z-index: 1; }

/* ### menu box ### */
.menuBox { text-align: right; }
.menuBox .navigation { width: 100%; }
.menuBox .navigation > li { margin-right: 20px; display: inline-block; text-transform: uppercase; }
.menuBox .navigation > li:last-child { margin-right: 0; }
.menuBox .navigation > li > a { padding: 8px 22px 10px; font-family: 'Oswald', sans-serif; font-size: 25px; font-weight: 700; color: #fff; background-color: #74975d; transition: all 0.3s; }
.menuBox .navigation > li > a:hover { background-color: #202a42; }
.menuBox .social-media { margin-bottom: 25px; display: flex; justify-content: flex-end; width: 100%; }
.menuBox .social-media > li { margin-right: 10px; display: inline-block; }
.menuBox .social-media > li:last-child { margin-right: 0; }
.menuBox .social-media > li > a { font-size: 40px; color: #fff; transition: all 0.3s; }
.menuBox .social-media > li > a:hover { color: #74975d; }

/* ### mobileMenu ### */
.mobileMenu { position: absolute; top: 50%; right: 20px; z-index: 15; display: none; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 5px; transform: translateY(-50%); transition: all 0.3s; cursor: pointer; overflow: hidden; }
.mobileMenu span { position: absolute; top: 50%; left: 50%; display: block; width: 23px; height: 3px; text-indent: -9999px; border-radius: 0; background: #202a42; transform: translateX(-50%) translateY(-50%); transition: 0.2s; }
.mobileMenu span:before,
.mobileMenu span:after { position: absolute; left: 0; display: block; width: 100%; height: 3px; border-radius: 0; background-color: #202a42; transition-duration: 0.2s, 0.2s; content: ''; }
.mobileMenu span:before { top: -7px; }
.mobileMenu span:after { bottom: -7px; }
.mobileMenu.active span { background: none; }
.mobileMenu.active span:before,
.mobileMenu.active span:after { transition-delay: 0s, 0.2s; }
.mobileMenu.active span:before { top: 0; transform: rotate(45deg); }
.mobileMenu.active span:after { bottom: 0; transform: rotate(-45deg); }

/* ### content container ### */
#contentCntr { width: 100%; }

/* ### copy box ### */
.bannerBox { margin-top: -396px; }
.bannerBox img { width: 100%; min-height: 443px; max-height: 743px; object-fit: cover; object-position: left center; }

/* ### intro box ### */
.introBox { margin-bottom: 114px; padding-top: 133px; }
.introBox .text { margin: 0 auto; max-width: 960px; }
.introBox h1 { margin-bottom: 22px; }
.introBox p { margin-bottom: 41px; }

/* ### blog box ### */
.blogBox { padding-top: 106px; padding-bottom: 276px; position: relative; text-align: center; background-color: #f3f3f3; overflow: hidden; }
.blogBox h2 { margin-bottom: 31px; }
.blogBox p { margin-bottom: 68px; }
.blogBox .image { margin-bottom: 26px; }
.blogBox .image img { border-radius: 50%; aspect-ratio: 1/1; }
.blogBox .layer { position: absolute; bottom: 0; left: 0; width: 100%; }
.blogBox .layer img { width: 100%; min-height: 192px; object-fit: cover; object-position: right center; }

/* ### news box ### */
.newsBox { padding-top: 13px; padding-bottom: 90px; background-color: #202a42; }
.newsBox h2 { margin-bottom: 85px; text-align: center; color: #fff; }
.newsBox .row { margin-right: -30px; margin-left: -30px; }
.newsBox .item { padding-right: 30px; padding-left: 30px; }
.newsBox .image { border: 1px solid #000; }
.newsBox .image img { width: 100%; }
.newsBox .text { padding-top: 32px; padding-bottom: 30px; }
.newsBox h3 { margin-bottom: 10px; color: #fff; }
.newsBox p { margin-bottom: 30px; color: #fff; }
.newsBox .btn-primary:hover { background-color: #5c8144; }

/* ### footer container ### */
#footerCntr { background-color: #74975d; }

/* ### footer box ### */
.footerBox { padding-top: 95px; }
.footerBox .bdr { padding-bottom: 55px; border-bottom: 2px solid #fff; }
.footerBox .logo { margin-bottom: 37px; }
.footerBox address { margin-bottom: 0; font-style: normal; color: #fff; }
.footerBox .text { padding-top: 144px; }
.footerBox .title { margin-bottom: 25px; font-family: 'Oswald', sans-serif; font-size: 35px; font-weight: 500; line-height: 1.2; text-transform: uppercase; color: #fff; }
.footerBox .navigation > li { width: 50%; }
.footerBox .navigation > li > a { color: #fff; transition: all 0.3s; }
.footerBox .navigation > li > a:hover { color: #202a42; }
.footerBox .social-media > li { margin-right: 10px; }
.footerBox .social-media > li:last-child { margin-right: 0; }
.footerBox .social-media > li > a { font-size: 32px; color: #fff; transition: all 0.3s; }
.footerBox .social-media > li > a:hover { color: #202a42; }

/* ### copyright box ### */
.copyrightBox { padding-top: 42px; padding-bottom: 60px; }
.copyrightBox ul > li { display: inline-block; }
.copyrightBox ul > li:after { margin: 0 10px; display: inline-block; width: 10px; height: 2px; vertical-align: middle; background-color: #fff; content: ''; }
.copyrightBox ul > li:last-child:after { display: none; }
.copyrightBox ul > li > a { color: #fff; transition: all 0.3s; }
.copyrightBox ul > li > a:hover { color: #202a42; }
.copyrightBox p { margin-bottom: 0; color: #fff; }
.copyrightBox p a { text-decoration: underline; color: #fff; transition: all 0.3s; }
.copyrightBox p a:hover { color: #202a42; }

/* #Media Queries
================================================== */

@media only screen and (max-width: 1500px) {
	#headerCntr .logo { max-width: 350px; }
	.menuBox .navigation > li > a { font-size: 26px; }
	.bannerBox { margin-top: -331px; }
}

@media only screen and (max-width: 1199px) {
	html,
	body { font-size: 24px; }
	h1 { font-size: 40px; }
	h2 { font-size: 40px; }
	.btn { padding: 15px 40px; font-size: 24px; }
	.btn-primary:after { margin-top: -6px; font-size: 30px; }
	.link { font-size: 30px; }
	.link:after { margin-top: -6px; font-size: 30px; }
	#headerCntr .logo { max-width: 250px; }
	.menuBox .navigation > li > a { padding: 8px 18px 10px; font-size: 20px; }
	.menuBox .social-media > li > a { font-size: 30px; }
	.bannerBox { margin-top: -257px; }
	.bannerBox img { min-height: 500px; }
	.introBox { margin-bottom: 100px; padding-top: 100px; }
	.footerBox .logo { max-width: 240px; }
	.footerBox .text { padding-top: 117px; }
	.footerBox .title { font-size: 30px; }
	.copyrightBox { padding-top: 40px; padding-bottom: 40px; }
}

@media only screen and (max-width: 991px) {
	html,
	body { font-size: 20px; }
	h1 { font-size: 30px; }
	h2 { font-size: 30px; }
	h3 { font-size: 30px; }
	.btn { padding: 12px 30px; font-size: 20px; }
	.btn-primary { border-radius: 0 0 0 25px; }
	.btn-primary:after { margin-top: -3px; font-size: 25px; }
	.link { font-size: 24px; }
	.link:after { margin-top: -3px; margin-left: 10px; font-size: 25px; }
	#headerCntr { padding-top: 15px; padding-bottom: 15px; }
	#headerCntr .logo { max-width: 200px; }
	.menuBox .navigation > li { margin-right: 15px; }
	.menuBox .navigation > li > a { padding: 6px 10px 7px; font-size: 18px; }
	.menuBox .social-media { margin-bottom: 15px; }
	.menuBox .social-media > li > a { font-size: 26px; }
	.bannerBox { margin-top: -197px; }
	.introBox { margin-bottom: 80px; padding-top: 80px; }
	.blogBox { padding-top: 80px; }
	.blogBox p { margin-bottom: 50px; }
	.newsBox { padding-bottom: 70px; }
	.newsBox h2 { margin-bottom: 50px; }
	.footerBox { padding-top: 80px; }
}

@media only screen and (max-width: 767px) {
	.btn { width: 100%; }
	#headerCntr .logo { padding-top: 0; max-width: 150px; }
	.menuBox { padding: 150px 15px 30px; position: absolute; top: 0; left: 0; opacity: 0; visibility: hidden; width: 100%; text-align: left; background-color: #fff; transition: all 0.3s; }
	.menuBox.open { opacity: 1; visibility: visible; }
	.menuBox .navigation { margin-bottom: 30px; }
	.menuBox .navigation > li { margin-right: 0; margin-bottom: 10px; display: block; }
	.menuBox .navigation > li > a { padding: 0; color: #000; background-color: transparent; }
	.menuBox .navigation > li > a:hover { display: block; color: #74975d; background-color: transparent; }
	.menuBox .social-media { margin-bottom: 0; justify-content: flex-start; }
	.mobileMenu { display: block; }
	.bannerBox { margin-top: -152px; }
	.bannerBox img { min-height: 400px; }
	.introBox { margin-bottom: 50px; padding-top: 50px; }
	.introBox h1 { margin-bottom: 20px; }
	.introBox p { margin-bottom: 25px; }
	.blogBox { padding-top: 50px; padding-bottom: 200px; }
	.blogBox h2 { margin-bottom: 20px; }
	.blogBox p { margin-bottom: 40px; }
	.blogBox .item { margin-bottom: 25px; }
	.blogBox .item:last-child { margin-bottom: 0; }
	.blogBox .image img { margin: 0 auto; }
	.blogBox .layer img { min-height: 150px; }
	.newsBox { padding-bottom: 50px; }
	.newsBox .item { margin-bottom: 15px; }
	.newsBox .item:last-child { margin-bottom: 0; }
	.footerBox { padding-top: 50px; }
	.footerBox .bdr { padding-bottom: 40px; }
	.footerBox .logo { margin-bottom: 25px; max-width: 180px; }
	.footerBox .item { margin-bottom: 30px; width: 100%; }
	.footerBox .item:last-child { margin-bottom: 0; }
	.footerBox .text { padding-top: 0; }
	.footerBox .title { font-size: 25px; }
	.copyrightBox ul { margin-bottom: 10px; width: 100%; }
	.copyrightBox p { width: 100%; }
}

.stock img { margin-bottom: 50px; border-radius: 50%; min-width: 100%; aspect-ratio: 4/4; object-fit: cover; }

.introBox ul li, .text ul li { list-style: disc; margin-left: 25px; }
.introBox a, .text a { text-decoration: underline; color: #74975d; }
.footerBox ul li { list-style: none; margin-left: 0; }
.btn { color: #fff !important; }

.green { color: #fff; background: #74975d; }
.green h1 { color: #fff; }
.green a { color: #fff; }

.calendar-item { margin-bottom: 20px; }
.calendar-item .date { font-style: italic; }
.calendar-item .name { font-weight: bold; }

/* submenu */
/* ========== Submenu (desktop + mobiel) ========== */
.menuBox .navigation > li.has-submenu {
  position: relative;
}

.menuBox .navigation > li.has-submenu > a {
  position: relative;
  padding-right: 42px; /* ruimte voor chevron */
}

/* Chevron / toggle button (onzichtbaar op desktop, zichtbaar op mobiel) */
.menuBox .navigation > li.has-submenu > .submenu-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 38px;
  border: 0;
  background: transparent;
  cursor: pointer;
  display: none; /* alleen mobiel tonen */
}
.menuBox .navigation > li.has-submenu > .submenu-toggle:after {
  font-family: 'icomoon', sans-serif;
  content: '\e902'; /* zelfde pijltje als je links; kan je vervangen door een ▼ */
  display: inline-block;
  transform: rotate(90deg);
  transition: transform .2s ease;
  font-size: 22px;
  line-height: 1;
  vertical-align: middle;
  color: currentColor;
}
.menuBox .navigation > li.has-submenu.open > .submenu-toggle:after,
.menuBox .navigation > li.has-submenu > .submenu-toggle[aria-expanded="true"]:after {
  transform: rotate(-90deg);
}

/* Dropdown basis */
.menuBox .navigation > li.has-submenu > .submenu {
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: #fff;
  border: 2px solid #74975d;
  display: none;
  z-index: 20;
  text-align: left;
}
.menuBox .navigation > li.has-submenu > .submenu > li > a {
  display: block;
  padding: 10px 14px;
  font-family: 'Oswald', sans-serif;
  font-size: 20px;
  color: #202a42;
  transition: background-color .2s, color .2s;
}
.menuBox .navigation > li.has-submenu > .submenu > li > a:hover {
  background: #f3f3f3;
  color: #74975d;
}

/* Desktop: tonen op hover/focus */
@media only screen and (min-width: 768px) {
  .menuBox .navigation > li.has-submenu:hover > .submenu,
  .menuBox .navigation > li.has-submenu:focus-within > .submenu {
	display: block;
  }
}

/* Mobiel: accordeon binnen het offcanvas menu */
@media only screen and (max-width: 767px) {
  .menuBox .navigation > li.has-submenu > .submenu-toggle { display: inline-block; }
  .menuBox .navigation > li.has-submenu > a {
	background: transparent; color: #000; padding-right: 38px;
  }
  .menuBox .navigation > li.has-submenu > .submenu {
	position: static;
	border: 0;
	background: transparent;
  }
  .menuBox .navigation > li.has-submenu > .submenu > li > a {
	padding: 6px 0 6px 14px;
	font-size: 18px;
  }
  .menuBox .navigation > li.has-submenu.open > .submenu { display: block; }
}

@media only screen and (max-width: 767px) {
  /* Zorg dat gesloten overlay geen kliks blokkeert */
  .menuBox { 
	pointer-events: none; 
	z-index: 1000;       /* menu overlay */
  }
  .menuBox.open { 
	pointer-events: auto; 
  }

  /* Hamburger altijd boven alles */
  .mobileMenu { 
	z-index: 1100; 
  }
}

@media (max-width: 767px){
  .menuBox{ z-index: 1000; }
  .menuBox:not(.open){ pointer-events: none; }
  .menuBox.open{ pointer-events: auto; }
}

/* Pijltje achter tekst, inline */
.has-submenu > a {
  display: inline-flex;
  align-items: center;
  gap: 6px; /* ruimte tussen tekst en pijltje */
}

.has-submenu > a .submenu-toggle {
  display: inline-block;
  font-family: 'icomoon', sans-serif;
  font-size: 16px;
  line-height: 1;
  transform: rotate(90deg);
  transition: transform .2s ease;
}

/* Uitgeklapt pijltje draait */
.has-submenu.open > a .submenu-toggle,
.has-submenu > a .submenu-toggle[aria-expanded="true"] {
  transform: rotate(-90deg);
}

/* Pijltje bovenaan i.p.v. gecentreerd */
.menuBox .navigation > li.has-submenu > .submenu-toggle {
  /* stond op height:100%; dat centreert de inhoud */
  height: auto;
  width: auto;           /* hoeft geen vaste 38px te zijn */
  padding: 6px 8px;      /* klein klikvlakje bovenin */
  line-height: 1;
}

.menuBox .navigation > li.has-submenu > .submenu-toggle:after {
  display: block;        /* i.p.v. inline-block + vertical-align */
  line-height: 1;
  vertical-align: top;   /* defensief; heeft geen effect op block */
}