/* HET BLOEMENRIJK */
/*********************************************/
/* LESS Imports */
/* The side navigation menu */
@import "fonts.css";
.sidenav {
  height: 100%;
  /* 100% Full-height */
  width: 0;
  /* 0 width - change this with JavaScript */
  position: fixed;
  /* Stay in place */
  z-index: 9999;
  /* Stay on top */
  top: 0;
  /* Stay at the top */
  left: 0;
  background-color: #e9eef6;
  /* Black*/
  overflow-x: hidden;
  /* Disable horizontal scroll */
  padding-top: 60px;
  /* Place content 60px from the top */
  transition: 0.5s;
  /* 0.5 second transition effect to slide in the sidenav */
}
/* The navigation menu links */
.sidenav a {
  padding: 8px 8px 8px 32px;
  text-decoration: none;
  font-size: 18px;
  color: #3e68a2;
  display: block;
  transition: 0.3s;
  line-height: 19px;
}
.sidenav a:hover,
.sidenav a:active,
.sidenav a:focus {
  color: #93c121;
}
/* Position and style the close button (top right corner) */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  right: 25px;
  font-size: 36px;
  margin-left: 50px;
}
/* Style page content - use this if you want to push the page content to the right when you open the side navigation */
#main {
  transition: margin-left 0.5s;
  padding: 20px;
}
/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */
@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}
/* LESS VARIABLES */
.shadow {
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
}
html {
  overflow-y: scroll;
  scroll-behavior: smooth;
  /* scrollbar fix (prevent ugly left pull for lower content sites) */
}
body {
  font-family: 'Montserrat', sans-serif;
  color: #fff;
  font-size: 16px;
  margin: 0;
  font-weight: 500;
}
p {
  line-height: 1.625em;
  font-size: 16px;
}
img {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: 100%;
}
a {
  color: #fff;
  text-decoration: underline;
}
a:hover,
a:active,
a:focus {
  text-decoration: none;
  color: #e6e6e6;
}
a.button {
  display: inline-block;
  white-space: normal;
  background: #3e68a2;
  padding: 5px 10px;
  -webkit-border-radius: 5px;
  -moz-border-radius: 5px;
  border-radius: 5px;
  color: #fff;
  margin: 10px;
  text-decoration: none;
}
a.button:hover,
a.button:active,
a.button:focus {
  background: #18304E;
}
a.button:first-of-type {
  background: #EB661A;
}
a.button:first-of-type:hover,
a.button:first-of-type:active,
a.button:first-of-type:focus {
  background: #057e48;
}
h1,
h2,
h3 {
  font-family: 'Baloo 2', sans-serif;
  font-weight: 800;
}
h2 {
  text-align: center;
  margin: 0 0 40px;
}
@media only screen and (min-width: 768px) {
  h2 {
    font-size: 30px;
  }
}
h3 {
  color: #057e48;
  font-size: 20px;
}
.wrapper {
  display: grid;
  grid-template-columns: auto 100% auto;
}
@media only screen and (min-width: 768px) {
  .wrapper {
    grid-template-columns: auto 768px auto;
  }
}
@media only screen and (min-width: 992px) {
  .wrapper {
    grid-template-columns: auto 992px auto;
  }
}
@media only screen and (min-width: 1200px) {
  .wrapper {
    grid-template-columns: auto 1170px auto;
  }
}
.content {
  position: relative;
}
.contentblok {
  padding: 100px 20px;
}
@media only screen and (min-width: 768px) {
  .contentblok {
    padding: 100px 80px;
  }
}
@media only screen and (min-width: 768px) {
  .contentblok {
    padding: 100px 100px;
  }
}
@media only screen and (min-width: 1200px) {
  .contentblok {
    padding: 100px 140px;
  }
}
.contentblok:nth-child(even) {
  background-color: #93c121;
}
.contentblok:nth-child(odd) {
  background-color: #3e68a2;
}

.header {
  display: grid;
  grid-template-columns: auto 100% auto;
  background: #fff;
  width: 100%;
  position: fixed;
  z-index: 999;
}
@media only screen and (min-width: 768px) {
  .header {
    grid-template-columns: auto 768px auto;
  }
}
@media only screen and (min-width: 992px) {
  .header {
    grid-template-columns: auto 992px auto;
  }
}
@media only screen and (min-width: 1200px) {
  .header {
    grid-template-columns: auto 1170px auto;
  }
}
.header .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #e9eef6;
}
@media only screen and (min-width: 992px) {
  .header .inner {
    width: 992px;
    grid-template-columns: 2fr 4fr;
  }
}
@media only screen and (min-width: 1200px) {
  .header .inner {
    width: 1170px;
  }
}
.header .inner .logo {
  padding: 10px;
}
@media only screen and (min-width: 992px) {
  .header .inner .logo {
    padding-left: 120px;
  }
}
@media only screen and (min-width: 1200px) {
  .header .inner .logo {
    padding-left: 80px;
  }
}
.hamburger {
  display: block;
  position: fixed;
  z-index: 999;
  top: 10px;
  right: 30px;
  color: #EB661A;
}
@media only screen and (min-width: 992px) {
  .hamburger {
    display: none;
  }
}
.menu.full {
  display: none;
}
@media only screen and (min-width: 992px) {
  .menu.full {
    display: block;
  }
}
.menu.full ul {
  float: right;
  margin: 0;
  padding: 0;
  list-style: none;
}
.menu.full ul li {
  display: inline-block;
  padding: 20px 10px;
}
.menu.full ul li a {
  color: #3e68a2;
  text-decoration: none;
}
.menu.full ul li a:hover,
.menu.full ul li a:active,
.menu.full ul li a:focus {
  color: #93c121;
}
.contentblok.hero {
  background: #f0e7e0 url(../images/bg-header-xs.jpg) no-repeat right bottom;
  padding-top: 200px;
}

@media only screen and (min-width: 768px) {
  .contentblok.hero {
    background-image: url(../images/bg-header-sm.jpg);
    background-position: right -80px bottom -50px;
  }
}
@media only screen and (min-width: 992px) {
  .contentblok.hero {
    background-image: url(../images/bg-header-lg.jpg);
    padding-top: 160px;
    background-position: right -100px bottom;
  }
}
@media only screen and (min-width: 1200px) {
  .contentblok.hero {
    background-image: url(../images/bg-header-lg.jpg);
    background-position: right bottom;
  }
}

.contentblok.hero .inner {
  width: 300px;
}
@media only screen and (min-width: 992px) {
  .contentblok.hero .inner {
    width: 400px;
  }
}
@media only screen and (min-width: 1200px) {
  .contentblok.hero .inner {
    width: 500px;
  }
}
.contentblok.hero p,
.contentblok.hero h1,
.contentblok.hero li {
  color: #057e48;
}
.contentblok.hoe {
  background-image: url(../images/drieblad-links.png);
  background-repeat: no-repeat;
  background-position: left -5px bottom -5px;
}
@media only screen and (min-width: 768px) {
  .contentblok.hoe .inner {
    display: grid;
    grid-template-columns: 2fr 1fr;
    grid-gap: 30px;
  }
}
.contentblok.hoe .text {
  display: grid;
  grid-template-columns: 70px auto;
  grid-gap: 30px;
}
.contentblok.hoe .foto {
  display: none;
}
@media only screen and (min-width: 768px) {
  .contentblok.hoe .foto {
    display: block;
  }
}
.contentblok.hoe .foto img {
  outline: 10px solid #fff;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
  -moz-transform: rotate(2deg);
  -webkit-transform: rotate(2deg);
  -o-transform: rotate(2deg);
  -ms-transform: rotate(2deg);
  transform: rotate(2deg);
}
.contentblok.oplossingen {
  padding: 40px 10px;
}
@media only screen and (min-width: 768px) {
  .contentblok.oplossingen {
    background-image: url(../images/bloem-links.png), url(../images/bloem-rechts.png);
    background-repeat: no-repeat;
    background-position: left bottom, right bottom;
  }
}
.contentblok.oplossingen .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 10px;
}
@media only screen and (min-width: 768px) {
  .contentblok.oplossingen .inner {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  .contentblok.oplossingen .inner {
    grid-template-columns: repeat(5, 1fr);
  }
}
.over {
  background-image: url(../images/vlinder.png);
  background-position: right 20px bottom 20px;
  background-repeat: no-repeat;
}
@media only screen and (min-width: 768px) {
  .over .inner {
    display: grid;
    grid-template-columns: 200px auto;
    grid-gap: 30px;
  }
}
@media only screen and (min-width: 1200px) {
  .over .inner {
    grid-template-columns: 250px auto;
  }
}
.over .foto img {
  position: relative;outline: 10px solid #fff;
  box-shadow: 2px 2px 7px rgba(0, 0, 0, 0.25);
  object-fit: cover;
  max-width: 100%;
  height: auto;
  -moz-transform: rotate(-2deg);
  -webkit-transform: rotate(-2deg);
  -o-transform: rotate(-2deg);
  -ms-transform: rotate(-2deg);
  transform: rotate(-2deg);
}
@media only screen and (min-width: 768px) {
  .over .foto img{
    display: block;
    position: relative;
  top: 120px;
  left: -30px;
}
}
@media only screen and (min-width: 1200px) {
  .over .foto img {
    top: 40px;
  }
}
.contentblok.over ul {
  margin-left: 0;
  padding-left: 10px;
}
@media only screen and (min-width: 992px) {
  .contentblok.werk {
    padding: 100px 50px;
  }
}
@media only screen and (min-width: 1200px) {
  .contentblok.werk {
    padding: 200px 50px;
  }
}
.contentblok.werk .inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-gap: 20px;
}
@media only screen and (min-width: 768px) {
  .contentblok.werk .inner {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  .contentblok.werk .inner {
    grid-template-columns: repeat(4, 1fr);
  }
}
@media only screen and (min-width: 992px) {
  .contentblok.werk .inner {
    grid-template-columns: repeat(6, 1fr);
  }
}
.contact {
  background-image: url(../images/bloem-en-blad.png);
  background-repeat: no-repeat;
  background-position: right bottom;
  background-size: 50%;
  padding-bottom: 20px;
}
@media only screen and (min-width: 768px) {
  .contact .inner {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-gap: 20px;
  }
}
.contact .socials p {
  text-align: center;
}
.contact .socials a {
  margin: 10px;
  padding: 10px;
}
.footer p,
.footer a {
  color: #057e48;
  text-align: center;
}


.bladeren {
  display: none;
}
@media only screen and (min-width: 992px) {
  .bladeren {
    display: block;
    position: absolute;
    top: 0;
    left: -40px;
    background: url(../images/bladeren-md.png) no-repeat center top;
    width: 189px;
    height: 800px;
    z-index: 9999;
  }
}
@media only screen and (min-width: 1200px) {
  .bladeren {
    left: 50%;
    margin-left: -685px;
  }
}
.bloemenhoekje {
  display: none;
}
@media only screen and (min-width: 992px) {
  .bloemenhoekje {
    display: block;
    width: 101px;
    height: 127px;
    position: absolute;
    background: url(../images/bloemen-hoekje.png) no-repeat center center;
    top: 40px;
    right: -10px;
    z-index: 9999;
  }
}
@media only screen and (min-width: 1200px) {
  .bloemenhoekje {
    left: 50%;
    top: 70px;
    margin-left: 525px;
  }
}
/* The Modal (background) */
.modal {
  display: none;
  position: fixed;
  z-index: 19999;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}
/* Modal Content */
.modal-content {
  position: relative;
  background-color: #000;
  margin: auto;
  padding: 0;
  width: 90%;
  height: auto;
  max-width: 600px;
  text-align: center;
}
/* The Close Button */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
/* Hide the slides by default */
.mySlides {
  display: none;
}
/* Next & previous buttons */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Position the "next button" to the right */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* On hover, add a black background color with a little bit see-through */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Number text (1/3 etc) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* Caption text */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}
.column {
  width: 50px;
  height: 50px;
  float: left;
}
img.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}
img.hover-shadow {
  transition: 0.3s;
}
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* The flip card container - set the width and height to whatever you want. We have added the border property to demonstrate that the flip itself goes out of the box on hover (remove perspective if you don't want the 3D effect */
.flip-card {
  background-color: #fff;
  width: 170px;
  height: 170px;
  margin: auto;
  perspective: 1000px;
  /* Remove this if you don't want the 3D effect */
}
/* This container is needed to position the front and back side */
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  text-align: center;
  transition: transform 0.8s;
  transform-style: preserve-3d;
}
/* Do an horizontal flip when you move the mouse over the flip box container */
.flip-card:hover .flip-card-inner {
  transform: rotateY(180deg);
}
/* Position the front and back side */
.flip-card-front,
.flip-card-back {
  position: absolute;
  width: 100%;
  height: 100%;
  -webkit-backface-visibility: hidden;
  /* Safari */
  backface-visibility: hidden;
}
/* Style the front side (fallback if image is missing) */
.flip-card-front {
  background-color: white;
  color: #057e48;
  font-family: 'Baloo 2', sans-serif;
  font-size: 24px;
}
.flip-card-front h3 {
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
/* Style the back side */
.flip-card-back {
  background-color: #057e48;
  color: white;
  transform: rotateY(180deg);
}
.flip-card-back div {
  width: 90%;
  margin: 0;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 0.9em;
}