/* Scss Document */
/*====================================

	TYPO
	font-family: 'DM Sans', sans-serif;

====================================*/
@import url("https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&display=swap");
/*====================================
	Standaard 
====================================*/
html {
  scroll-behavior: smooth; }

body {
  font-size: 15px;
  color: #000;
  font-family: 'DM Sans', sans-serif; }

button:focus {
  outline: none; }

:focus {
  outline: none; }

::selection {
  background: rgba(128, 0, 0, 0.42);
  color: #fff; }

.hoef:hover {
  opacity: 0.80; }

.hoefgrijs:hover {
  opacity: 0.80;
  -webkit-filter: grayscale(100%);
  -moz-filter: grayscale(100%);
  filter: grayscale(100%);
  transition: all 0.5s ease; }

.hoefgrijs {
  -webkit-filter: grayscale(0%);
  -moz-filter: grayscale(0%);
  filter: grayscale(0%); }

a {
  color: #d8c066; }

#content a {
  color: #6F9A37; }

p {
  font-size: 1rem; }

a:hover {
  text-decoration: none;
  color: #333333; }

.rounded {
  border-radius: 50% !important; }

.animated.delay-01s {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s; }

.animated.delay-02s {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s; }

.animated.delay-03s {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s; }

.animated.delay-04s {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s; }

.opsomming li:before {
  content: "\f0a3";
  font-family: 'Font awesome 5 Pro';
  font-weight: bold;
  position: relative;
  left: -15px;
  color: #dadada;
  font-size: 1.1rem; }

.opsomming ul {
  list-style-type: none;
  padding-left: 15px; }

.cirkel-goud {
  position: absolute;
  right: 200px;
  width: 20vw;
  top: 201px;
  z-index: 1; }

.fotoclaire {
  z-index: 0;
  position: relative; }

.innerblok {
  background-color: #f7f7f7;
  border-radius: 15px; }

footer {
  background-color: #d8c066; }

.vlak-half-zwart-wit {
  background: black;
  background: linear-gradient(180deg, black 0%, black 50%, white 50%, white 100%); }

/*====================================
	FONT SIZES - 1 REM IS 15 PX
====================================*/
.rem05 {
  font-size: 0.5rem; }

.rem06 {
  font-size: 0.6rem; }

.rem07 {
  font-size: 0.7rem; }

.rem08 {
  font-size: 0.8rem; }

.rem09 {
  font-size: 0.9rem; }

.rem10 {
  font-size: 1.0rem; }

.rem11 {
  font-size: 1.1rem; }

.rem12 {
  font-size: 1.2rem; }

.rem13 {
  font-size: 1.3rem; }

.rem14 {
  font-size: 1.4rem; }

.rem15 {
  font-size: 1.5rem; }

.rem16 {
  font-size: 1.6rem; }

.rem17 {
  font-size: 1.7rem; }

.rem18 {
  font-size: 1.8rem; }

.rem19 {
  font-size: 1.9rem; }

.rem20 {
  font-size: 2.0rem; }

.rem21 {
  font-size: 2.1rem; }

.rem22 {
  font-size: 2.2rem; }

.rem23 {
  font-size: 2.3rem; }

.rem24 {
  font-size: 2.4rem; }

.rem25 {
  font-size: 2.5rem; }

.rem26 {
  font-size: 2.6rem; }

.rem27 {
  font-size: 2.7rem; }

.rem28 {
  font-size: 2.8rem; }

.rem29 {
  font-size: 2.9rem; }

.rem30 {
  font-size: 3.0rem; }

.rem40 {
  font-size: 4.0rem; }

.rem50 {
  font-size: 5.0rem; }

.rem60 {
  font-size: 6.0rem; }

/*====================================
	TEKSTEN
====================================*/
.tekst-wit {
  color: #fff; }

.tekst-zwart {
  color: #000; }

.tekst-blauw {
  color: #473bf0; }

.tekst-groen {
  color: #6F9A37; }

.tekst-lichtbruin {
  color: #A59F86; }

.tekst-goud {
  color: #b67e26; }

.tekst-bold {
  font-weight: 700; }

.tekst-hoofdletter {
  text-transform: uppercase; }

.h1, h1 {
  font-size: 2.5rem; }

.h2, h2 {
  font-size: 1.5rem; }

.h3, h3 {
  font-size: 1.5rem;
  margin-top: 25px;
  margin-bottom: 15px; }

.h4, h4 {
  font-size: 1.2rem; }

.h5, h5 {
  font-size: 1.1rem; }

h2.subtitel {
  font-size: 2rem;
  font-weight: bold; }

.onderlijn:after {
  content: '';
  padding-bottom: 10px;
  border-bottom: 3px solid #473bf0;
  width: 65px;
  display: block; }

.onderlijn-wit:after {
  content: '';
  padding-bottom: 10px;
  border-bottom: 3px solid #fff;
  width: 65px;
  display: block; }

.wp-block-quote p {
  font-size: 1.5em;
  color: #473bf0;
  padding: 10px 0px; }

.wp-block-quote p::before {
  content: "\f10d";
  color: #edf7fa;
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  font-weight: bold;
  margin-right: 10px;
  position: relative;
  top: -10px; }

.wp-block-quote p::after {
  content: "\f10e";
  color: #edf7fa;
  font-family: "Font Awesome 5 Pro";
  display: inline-block;
  font-weight: bold;
  margin-left: 10px;
  position: relative;
  bottom: -10px; }

/*====================================
	MENU
====================================*/
.menu ul {
  margin: 0; }

.hoofdmenu ul {
  display: block;
  margin: 0 0 0 30px;
  padding: 30px 0 30px 0; }
.hoofdmenu li {
  list-style-type: none;
  display: block; }
  .hoofdmenu li a {
    font-size: 1rem;
    padding: 10px 10px;
    display: block;
    font-weight: 400;
    color: #000;
    letter-spacing: 0.75px;
    text-decoration: none; }
    .hoofdmenu li a:hover {
      color: #d8c066;
      text-decoration: none; }

.hoofdmenu li.sidemenu {
  display: inline-block; }

.hoofdmenu li a:hover {
  color: #000; }

.hoofdmenu li.current-menu-item a {
  color: #d8c066; }

nav.navbar {
  box-shadow: none;
  background-color: none; }

.navbar-toggler:focus,
.navbar-toggler:active {
  outline: 0; }

.navbar-toggler span {
  display: block;
  background-color: #d8c066;
  height: 3px;
  width: 25px;
  margin-top: 6px;
  margin-bottom: 6px;
  -webkit-transform: rotate(0deg);
  -moz-transform: rotate(0deg);
  -o-transform: rotate(0deg);
  transform: rotate(0deg);
  opacity: 1; }

.navbar-toggler:hover > span {
  background-color: #333333; }

.navbar-toggler span:nth-child(1),
.navbar-toggler span:nth-child(3) {
  -webkit-transition: transform .35s ease-in-out;
  -moz-transition: transform .35s ease-in-out;
  -o-transition: transform .35s ease-in-out;
  transition: transform .35s ease-in-out; }

.navbar-toggler:not(.collapsed) span:nth-child(1) {
  position: relative;
  top: 13px;
  -webkit-transform: rotate(135deg);
  -moz-transform: rotate(135deg);
  -o-transform: rotate(135deg);
  transform: rotate(135deg);
  opacity: 0.9; }

.navbar-toggler:not(.collapsed) span:nth-child(2) {
  height: 12px;
  visibility: hidden;
  background-color: transparent; }

.navbar-toggler:not(.collapsed) span:nth-child(3) {
  position: relative;
  top: -14px;
  -webkit-transform: rotate(-135deg);
  -moz-transform: rotate(-135deg);
  -o-transform: rotate(-135deg);
  transform: rotate(-135deg);
  opacity: 0.9; }

.navbar-toggler:focus {
  box-shadow: none; }

.pre-header {
  padding: 18px 0 0 15px;
  height: 55px; }

#menu-top {
  padding-right: 20px;
  float: right; }
  #menu-top ul {
    padding: 0;
    margin: 0;
    list-style-type: none; }
    #menu-top ul li {
      float: left;
      margin-left: 30px; }

.headerlogo {
  width: 100px; }

ul.rightmenu {
  list-style-type: none;
  margin-top: 10px; }
  ul.rightmenu li {
    float: left; }
    ul.rightmenu li a {
      text-decoration: none;
      color: #333; }
      ul.rightmenu li a i {
        color: #A59F86; }

/*====================================
	HEADER
====================================*/
header {
  background-color: #fff;
  box-shadow: 1px 1px 5px rgba(51, 51, 51, 0.43); }

.logo {
  position: absolute;
  top: -18px;
  z-index: 99;
  background-color: #473bf0;
  padding: 15px;
  width: 100%;
  height: 105px; }

.navbar-brand {
  padding-top: 6px;
  padding-left: 5px;
  margin-right: 0; }

#headerbeeld {
  height: 35vh; }
  #headerbeeld h1 {
    font-size: 3rem; }
  #headerbeeld h2, #headerbeeld h3 {
    font-size: 2rem; }

.headerbeeld-home {
  height: 85vh;
  background-size: cover;
  background-position: center; }

.headerbeeld-vervolg {
  height: 60vh;
  background-size: cover;
  background-position: center; }

.headerbeeld-vervolg .rechtsrond {
  position: relative;
  right: -20%;
  top: 0; }

.bg-homeheader {
  height: 50vh;
  background-size: cover;
  background-position: center; }

.telefoon-header a {
  text-decoration: none;
  color: #333; }

.top-deco {
  position: relative;
  bottom: -5px; }

.bottom-deco {
  position: relative;
  bottom: -5px; }

/*====================================
	SLIDER
====================================*/
.owl-carousel .item-bg {
  background-size: cover;
  min-height: 250px;
  background-position: center;
  width: 100%; }

.owl-carousel .owl-next i, .owl-carousel .owl-prev i {
  color: #6F9A37;
  font-size: 1.2rem; }

.owl-carousel .owl-prev {
  margin-right: 30px; }

.owl-carousel .owl-next {
  margin-left: 30px; }

.owl-theme .owl-nav [class*=owl-]:hover {
  background: #fff !important;
  color: #473bf0 !important;
  text-decoration: none !important; }

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

.owl-carousel .owl-stage-outer {
  overflow-y: visible !important;
  overflow-x: hidden !important; }

.owl-stage {
  padding-bottom: 30px;
  padding-top: 30px; }

/*====================================
	FANCYBOX
====================================*/
.video-thumbnail {
  position: relative;
  display: block;
  cursor: pointer; }

.video-thumbnail:before {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  content: "\f144";
  font-family: "Font Awesome 5 Pro";
  font-size: 100px;
  color: #fff;
  opacity: .8;
  text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.5); }

/*====================================
	FORMUIEREN
====================================*/
.nf-form-fields-required {
  display: none; }

.nf-form-content .list-select-wrap .nf-field-element > div, .nf-form-content input:not([type=button]), .nf-form-content textarea {
  background: #e8e8e8 !important;
  border: 1px solid #dadada !important;
  border-radius: 0;
  box-shadow: none;
  color: #000000;
  transition: all .5s;
  height: 35px !important; }

.nf-error.field-wrap .nf-field-element:after {
  height: 35px !important;
  width: 35px !important;
  line-height: 36px !important; }

.nf-field-element textarea {
  height: 200px !important; }

.nf-form-content button, .nf-form-content input[type=button], .nf-form-content input[type=submit] {
  padding: 10px 20px !important;
  border: none;
  text-align: center;
  width: auto;
  display: inline-block;
  font-weight: 700;
  height: auto !important;
  border-radius: 5px;
  transition: all 0.5s ease;
  background-color: #d8c066 !important;
  color: #fff !important; }

.nf-form-content label {
  font-size: 16px !important;
  line-height: 20px !important; }

.ugc-input-wrapper .btn {
  background-color: #d11e14 !important;
  color: #fff !important; }

.ugc-notice.success {
  border-color: #3dbc15;
  background-color: #3dbc15;
  color: #fff; }

.nf-form-content .list-select-wrap .nf-field-element > div, .nf-form-content input:not([type=button]), .nf-form-content textarea {
  color: #000000; }

.nf-response-msg {
  background-color: green;
  color: #fff;
  padding: 5px; }

/*====================================
	BUTTONS
====================================*/
.button {
  border: none;
  text-align: center;
  width: auto;
  display: inline-block;
  height: auto !important;
  transition: all 0.5s ease;
  padding: 14px 35px;
  border-radius: 30px;
  font-size: 15px;
  display: inline-block;
  font-weight: 500;
  text-decoration: none; }

.button:hover {
  text-decoration: none; }

.button .fa-long-arrow-right {
  font-size: 1.1em; }

.button.button-blauw {
  background-color: #473bf0 !important;
  color: #fff !important; }

.button.button-blauw:hover {
  background-color: #5b5b98 !important;
  color: #473bf0 !important;
  transition: all 0.5s ease; }

.button.button-wit {
  background-color: #fff !important;
  color: #6F9A37 !important; }

.button.button-wit:hover {
  background-color: #B9ACB9 !important;
  color: #fff !important;
  transition: all 0.5s ease; }

.social-icons ul {
  padding-left: 0;
  margin-left: 0; }

.button-goud {
  background-color: #b67e26;
  color: #fff !important; }

.social-icons ul li {
  list-style-type: none;
  float: left;
  margin-right: 15px; }

.social-icons ul li i {
  font-size: 1.6rem; }

ul#social-header {
  padding: 0;
  margin: 0; }

ul#social-header li {
  list-style-type: none;
  float: left;
  margin-right: 10px; }

ul#social-header li:before {
  content: ''; }

/*====================================
	SUBPAGINA'S
====================================*/
.subwrapper a {
  text-decoration: none; }

.subwrapper.huidige-sub .subbutton {
  background-color: #B9ACB9; }

.subwrapper.huidige-sub .subbutton h5 {
  color: #fff; }

.subbutton:hover {
  text-decoration: none;
  background-color: #A59F86;
  color: #fff;
  transition: all 0.5s ease; }

.subbutton:hover h5 {
  color: #fff; }

.subbutton {
  border-radius: 15px;
  transition: all 0.5s ease;
  background-color: #EFEFEF; }

.subbutton h5 {
  text-decoration: none;
  color: #A59F86; }

.subbutton i {
  color: #6F9A37; }

/*====================================
	VLAKKEN
====================================*/
.vlak-zwart {
  background-color: #000; }

.vlak-wit {
  background-color: #fff; }

.vlak-blauw {
  background-color: #473bf0; }

.vlak-lichtgrijs {
  background-color: #EFEFEF; }

.vlak-half-wit-lichtbruin {
  background: #fff;
  background: linear-gradient(180deg, #A59F86 0%, #A59F86 50%, #fff 50%, #fff 100%); }

/*====================================
	TEAM
====================================*/
.teamrond {
  width: 15vw;
  height: 15vw;
  border-radius: 50%;
  background-size: cover;
  margin: 0 auto;
  margin-bottom: 15px; }

/*====================================
	MAPS
====================================*/
.googlemap {
  width: 100%; }

#map-canvas {
  width: 100%;
  height: 600px; }

/*====================================
	FOOTER
====================================*/
footer {
  background-color: #6F9A37; }

footer p, footer h3 {
  color: #fff; }

footer a {
  color: #fff;
  text-decoration: none; }

.decor {
  display: block;
  position: relative;
  margin: 0 auto; }

.decor-top {
  bottom: 100%; }

[class*="decor-"] {
  position: relative;
  width: 100%;
  height: 60px;
  left: 0; }

.footer-decor .decor {
  fill: #6F9A37;
  stroke: #6F9A37; }

[class*="decor-"] svg {
  height: 101%; }

footer {
  position: relative;
  z-index: 4;
  padding: 96px 0; }

/*====================================
	SCROLL TO TOP
====================================*/
.cd-top {
  display: inline-block;
  height: 40px;
  width: 40px;
  position: fixed;
  z-index: 9999;
  bottom: 0px;
  right: 0px;
  color: #000;
  background-color: #B9ACB9;
  line-height: 27px;
  overflow: hidden;
  visibility: hidden;
  padding: 5px 0 0 10px;
  opacity: 0;
  -webkit-transition: opacity .3s 0s, visibility 0s .3s;
  -moz-transition: opacity .3s 0s, visibility 0s .3s;
  transition: opacity .3s 0s, visibility 0s .3s; }

.cd-top.cd-is-visible, .cd-top.cd-fade-out, .no-touch .cd-top:hover {
  -webkit-transition: opacity .3s 0s, visibility 0s 0s;
  -moz-transition: opacity .3s 0s, visibility 0s 0s;
  transition: opacity .3s 0s, visibility 0s 0s; }

.cd-top.cd-is-visible {
  visibility: visible;
  opacity: 1; }

.cd-top.cd-fade-out {
  opacity: .5; }

/*====================================
	MEDIA QUERY
====================================*/
@media (min-width: 768px) {
  .hoofdmenu {
    background-color: transparent; }
    .hoofdmenu ul {
      display: inline;
      padding: 0; }
    .hoofdmenu li {
      float: left;
      list-style-type: none;
      display: block;
      margin-right: 5px; }

  .hoofdmenu li.sidemenu {
    display: inline-block; }

  nav .sidemenu {
    margin-right: 0px; }

  nav .sidemenu.contact {
    margin-right: 15px; }
    nav .sidemenu.contact a {
      transition: all 0.5s ease;
      padding: 10px 35px !important; }

  nav .sidemenu.contact a:hover {
    transition: all 0.5s ease; }

  .headerlogo {
    width: 100px; }

  nav.navbar {
    background-color: transparent;
    height: 85px;
    z-index: 3;
    padding-left: 0; }

  .owl-carousel .item-bg {
    min-height: 500px; }

  .owl-carousel .review-foto {
    position: absolute;
    top: -85px;
    left: -50px; }
    .owl-carousel .review-foto IMG {
      width: 80px !important; } }
@media (min-width: 992px) {
  .h1, h1 {
    font-size: 3rem; }

  .h2, h2 {
    font-size: 2rem; }

  .h4, h4 {
    font-size: 1.3rem; }

  .top-deco {
    position: relative;
    bottom: 0px; }

  .bottom-deco {
    position: relative;
    bottom: 0px; } }
@media (min-width: 1200px) {
  .h1, h1 {
    font-size: 3.5rem; } }
@media (min-width: 1600px) {
  .h1, h1 {
    font-size: 4rem; } }