@charset "utf-8";
/* CSS Document */
html {height: 100%;}
body { font-size:20px;}

.groen { color:#6a3514;}
.oranje { color:#d65200;}
.bggroen { background-color:#d65200;}
.bglgroen { background-color:#f3cbb2;}
.blauw2 { color:#009fe3;}
.bgblauw2 { background-color:#009fe3;}
.blauw3 { color:#bce4fa;}
.bgblauw3 { background-color:#bce4fa;}
.bgroze { background-color:#cfb77f;}

h1, h2, h3, h4 {}

h1 {font-size:50px;}

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

.btn-primary,
.btn-primary:disabled,
.btn-primary.disabled {
  background-color: #d65200;
  border-color: #d65200;
  color: #fff;font-weight: 600;border-radius:20px;font-size:1.2rem;transition: all .3s ease;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus {
  background-color: #6a3514;
  border-color: #6a3514;
  color: #fff;
}

.btn-primary:active,
.btn-primary.active,
.show > .btn-primary.dropdown-toggle,
.btn-check:checked + .btn,
.btn:first-child:active,
:not(.btn-check) + .btn:active {
  background-color: #6a3514;
  border-color: #6a3514;
  color: #fff;
}

.btn-primary:focus,
.btn-primary:active,
.btn-primary:focus:active,
.btn-primary:focus-visible {
  box-shadow: 0 0 0 0.25rem rgba(234, 138, 0, 0.5) !important;
  outline: none !important;
}

.btn-primary:focus-visible {
  border-color: #fff !important;
}

/* Outline-variant */
.btn-outline-primary {
  color: #fff;
  border-color: #fff;
	font-weight: 600;border-radius:20px;font-size:1.2rem;transition: all .3s ease;
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
  background-color: #fff;
  color: #d65200;
  border-color: #fff;
}

.btn-outline-primary:active {
  background-color: #d65200;
  border-color: #fff;
}



p {font-size:16px;}
.lead {font-weight: 400;}

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

.schaduw {box-shadow: 1px 1px 3px 0px #ccc;}

.bg-light {background-color: transparent!important;}

.navbar-nav .nav-link.active, .navbar-nav .show>.nav-link {color: #333;font-weight: 700;}

.dropdown-item.active, .dropdown-item:active {background-color:#004077;}

.blok {display:block;padding:25px;border-radius:15px}

a.blok {display:block;padding:25px;border-radius:15px}
a.blok:hover {opacity:0.8;}

.onder {display:block; padding:20px 0; text-align:center; background-color:#333; color:#fff;font-size:16px;height:80px}

.knop-wit {background-color:#fff; border:1px solid #fff;color:#000;font-weight: 600;border-radius:20px;font-size:1.2rem;transition: all .3s ease;}
.knop-wit:hover {border:1px solid #fff; color:#fff;}

.backgroundafb { background-size:cover; background-position:center center; width:100%;min-height:300px;height:auto;}

.carousel-indicators {bottom: auto;top: 0px;}
.testimonialafb {background-size:cover; background-position:center center;height:60px;width: 60px;border-radius: 50%;margin:20px auto;}
.carousel-item {min-height:350px;}
.carousel-caption {top:30px;color:#000; font-size:14px}
.carousel-indicators [data-bs-target] {width: 10px;height: 10px;background-color: #333;}
.carousel-indicators .active {background-color: #004077;}


#whatsapp {
    padding: 25px;
position: fixed;
text-align:center;
    width:17%;right:0;
    height:275px;
    font-weight:300;
    font-size:16px;
    z-index:900;
    background:#d65200;
}

.whatsappblok {padding:25px 0px;display:block;width:100%;background:#fff;background-size:cover;background-position:center center;background-repeat: no-repeat;}
.whatsappknop {cursor:pointer;}


input, select, textarea { width: 100%; padding: 10px; margin: 5px 0; }
.hidden-field { display: none; }


@media (max-width: 1200px) { #whatsapp {width:25%;}}


@media (max-width:992px){ 
.carousel-item {min-height:480px;}
h1 {font-size:40px;}
}
	
@media (max-width:767px){
.carousel-item {min-height:480px;}
h1 {font-size:30px;}
.testimonialafb {height:100px;width: 100px;}
.carousel-caption p {font-size:13px;line-height:18px;}
#whatsapp {width:80%;left:0px; margin:0 auto;}
}

.slide-up {
    	-webkit-animation: slide-up 0.5s 2s both;
	        animation: slide-up 0.5s 2s both;
                bottom:-275px;
}
.video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;   /* Belangrijk: vult altijd de container */
    opacity: 0.2;
    z-index: 1;
}

@-webkit-keyframes slide-up {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-275px);
            transform: translateY(-275px);
  }
}
@keyframes slide-up {
  0% {
    -webkit-transform: translateY(0);
            transform: translateY(0);
  }
  100% {
    -webkit-transform: translateY(-275px);
            transform: translateY(-275px);
  }
}

.animated { 
-webkit-animation-duration: 3s; 
animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease; 
animation-timing-function: ease; 
}
.animated1 { 
-webkit-animation-duration: 3s; 
animation-duration: 3s; 
-webkit-animation-fill-mode: both; 
animation-fill-mode: both; 
-webkit-animation-timing-function: ease-in-out; 
animation-timing-function: ease-in-out;
} 
.animated2 {
-webkit-animation-duration: 2s;
-webkit-animation-iteration-count: 1;
-webkit-animation-timing-function: ease-in-out;
-webkit-animation-fill-mode: both;
animation-duration: 2s;
animation-iteration-count: 1;
animation-timing-function: ease-in-out;
animation-fill-mode: both;
}
@-webkit-keyframes grow { 0% {transform: scale(1);} 100% {transform: scale(1.1);} } 
@keyframes grow { 0% {transform: scale(1);} 100% {transform: scale(1.1);} } 
.grow { -webkit-animation-name: grow; animation-name: grow; }

@-webkit-keyframes slideIn { 0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;} } 
@keyframes slideIn { 0% {opacity:0;margin-left:-100px;} 100% {opacity:1;margin-left:0px;} } 
.slideIn { -webkit-animation-name: slideIn; animation-name: slideIn; }

@-webkit-keyframes slideUp { 0% {opacity:0;margin-top:100px;} 100% {opacity:1;margin-top:0px;} } 
@keyframes slideUp { 0% {opacity:0;margin-top:100px;} 100% {opacity:1;margin-top:0px;} } 
.slideUp { -webkit-animation-name: slideUp; animation-name: slideUp; }

.scroll-in-left {
  opacity: 0;
  transform: translateX(-50px);
  transition: all 0.6s ease-out;
}

.scroll-in-right {
  opacity: 0;
  transform: translateX(50px);
  transition: all 0.6s ease-out;
}

.scroll-in-up {
  opacity: 0;
  transform: translateY(30px);
  transition: all 0.6s ease-out;
}

.scroll-in-down {
  opacity: 0;
  transform: translateY(-30px);
  transition: all 0.6s ease-out;
}
.scroll-in-left.visible,
.scroll-in-right.visible,
.scroll-in-up.visible,
.scroll-in-down.visible {
  opacity: 1;
  transform: translate(0, 0);
}