/* ==============================================
 * Globals
 * ============================================== */

/* Links */
a,
a:focus,
a:hover {
  color: #a46c4b;
}

/* Custom default button */
.btn-secondary,
.btn-secondary:hover,
.btn-secondary:focus {
  color: #fff;
  text-shadow: none; /* Prevent inheritance from `body` */
  background-color: #89a27a;
  border: .05rem
 solid #89a27a;
}


/* ==============================================
 * Basis
 * ============================================== */

html,
body {
    height: 100%;
}

body {
    padding-top: 5rem;
    color: #653b22;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    margin-bottom: 700px;
}

@media (max-width: 524px) {  
body {
  margin-bottom: 1200px;
  }

}

#page-content {
  flex: 1 0 auto;
}

#sticky-footer {
  flex-shrink: none;
}

/* ==============================================
 * Header
 * ============================================== */

.masthead {
  position: relative;
  margin-top: 0rem;
  margin-bottom: 5rem;
/*  min-height: 200px;*/
  background-color: transparent;
  z-index : 0;
}
.masthead-text {
    position: absolute;
    font-size: 160%;
    top: 20%;
    left: 10%;
     z-index : 1;
}
.masthead-text-w {
     position: absolute;
    font-size: 150%;
    top: 25%;
    left: 30%;
    right: 30%;
    z-index : 2;
}

     
    
@media (max-width: 992px) { 
    .masthead-text {
    font-size: 140%;
    top: 20%;
    left: 10%;
     z-index : 1;
}
    .masthead-text-w {
    font-size: 125%;
        top: 15%;
        left: 10%;
        right: 10%;
    }
}
@media (max-width: 767px) { 
    .masthead-text {
    font-size: 120%;
    top: 20%;
    }
    .masthead-text-w {
    font-size: 115%;
           top: 15%;
    }
}
@media (max-width: 576px) { 
    .masthead-text {
        font-size: 110%;
        top: 15%;
    }
    .masthead-text-w {
        font-size: 100%;
        top: 10%;
        left: 5%;
    }
}

/* ==============================================
 * Footer kleur
 * ============================================== */
    

footer {
	min-height: 500px;
 	margin-top: 1rem;
	padding-top: 2rem;
	color: #fff;
	font-size: 16px;
	background: linear-gradient(-90deg, #4c613f, #000);
    
        background: -webkit-linear-gradient(to bottom, #4c613f, #000);
        background:    -moz-linear-gradient(to bottom, #4c613f, #000);
        background:      -o-linear-gradient(to bottom, #4c613f, #000);
        background:         linear-gradient(to bottom, #4c613f, #000);
 	/*   background-image: url(/assets/md/images/?.jpg);  /* The image used */ 
	/*   background-size: cover;
 	/*   background-position: center;
 	/*   background-repeat: no-repeat;*/
}

footer p {
    color: #fff;
}
footer p a {
    color: #fff;
}
footer p a:hover {
    color: #89a27a;
}


/* ==============================================
 * Lettertype koppen
 * ============================================== */
h1,
.h1 {    
     color: #653b22;
     font-family: 'Elmssans', sans-serif;
     font-weight: 200;
     font-size: 300%;
}
h2,
.h2 {    
     color: #006dba;
     font-family: 'Quicksand', sans-serif;
     font-weight: 400;
     font-size: 200%;
}
h3,
.h3 {    
     color:#4c613f;
     font-family: 'Elmssans', sans-serif;
     font-weight: 400;
     font-size: 150%;
}
h4,
.h4 {    
     color:#c1272d;
     font-family: 'Poppins', sans-serif;
     font-weight: 400;
     font-size: 150%;
}

h5,
h6,
.h5,
.h6 {

  font-family: 'Poppins', sans-serif;
  font-weight: 300;
  font-size: 130%;
  line-height: 1.1;
  color: #a46c4b;
}

@media (max-width: 767px) { 
 
h1,
.h1 {
     font-size: 250%;
     line-height: 1.3;
    
  }
h3,
.h3 {  
  font-size: 140%;
  line-height: 1.3; 
  }

}

@media (max-width: 576px) { 
h1,
.h1 {
     font-size: 200%;
     line-height: 1.4;
  }
h3,
.h3 {  
  font-size: 120%;
  line-height: 1.3; 
  }
}

p {
    font-family: 'Poppins', sans-serif;
}
.text-primary {
    color: #006dba;
}

/*==============================================
  Horizontale lijn kleur
================================================ */
hr 
{   
    background-color: #5fa0d2;
    border: 0;
    border-top: 2px solid #5fa0d2;
    color: #5fa0d2;
    height: 1px;
    width: 30%;
    margin: auto; 
    padding: 0; 
}
/*==============================================
  Button kleur
================================================ */
.btn-primary {   
    background-color: #89a27a;
    border: 0;
    color: #fff;
    
}
.btn-primary:hover {
    color: #fff;
    background-color: #006dba;
    border-color: #006dba;
}
.btn-carousel {   
    background-color: #c1272d;
    border: 0;
    color: #fff;
    
}
.btn-carousel:hover {
    color: #dd604a;
    background-color: #fff;
    border-color: #fff;
}
.inhoud  {
   margin-top: 100px;
}

/*==============================================
  Navigatie menu
================================================ */
nav {
    background-color: rgba(76, 97, 63, 0.95);
    min-height: 80px;
    margin-bottom: 4rem;
    width: 100%;
}
.offcanvas {
    background-color: rgba(76, 97, 63, 0.95);
    --bs-offcanvas-bg: rgba(76, 97, 63, 0.95);
}
.nav-item a{
    color: #fff;
}
.nav-item a:hover{
    color: #dd604a;
    font-weight: 500;
}
.navbar .button img {
  transition: filter .5s ease-in-out;
  -webkit-filter: invert(0%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
   filter: invert(0%);; /* FF 35+ */
}
.navbar .btn img:hover {
  -webkit-filter: invert(100%); /* Ch 23+, Saf 6.0+, BB 10.0+ */
  filter: invert(100%); /* FF 35+ */
}
/*=====================================================
  Carousel welkom met zoom 
======================================================= */

@-webkit-keyframes zoom {
  from {
    -webkit-transform: scale(1, 1);
  }
  to {
    -webkit-transform: scale(1.15, 1.15);
  }
}

@keyframes zoom {
  from {
    transform: scale(1, 1);
  }
  to {
    transform: scale(1.15, 1.15);
  }
}

#myCarousel .carousel .carousel-inner {
   width: 100%;
   height: auto;
}
#myCarousel .carousel-inner .carousel-item {
  transition-duration: 5s;
}

#myCarousel .carousel-inner .carousel-item > img {
  -webkit-animation: zoom 25s;
  animation: zoom 25s;
}

#myCarousel .carousel-item:after {
  content:"";
  display:block;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
  
}

#myCarousel .carousel-caption {
  position: absolute;
  text-align: center;
  top: 20%;
  left: 20%;
  z-index: 10;
  color: #f9e1b2;
}


.carouselwelkom {
  width: 100%;
  margin-top: 80px;
  padding-top: 0;
  padding-bottom: 0;
  z-index: 1;
 }

.carouselwelkom h1 {
  font-size: 4rem;
}
.carouselwelkom h3 {
    font-size: 3rem;
  }

@media (max-width: 576px) {
   #myCarousel .carousel-caption {
    top: 1%;
    left: 12%;
   }
  #myCarousel .carousel-caption img {
    height: 120%;
    width: 120%;
   }
  .carouselwelkom {  
    padding-top: 0;
    padding-bottom: 0;
  }
  .carouselwelkom h3 {
    font-size: 1rem;
  }
  .carouselwelkom h1 {
    font-size: 1.5rem;
    font-weight: 300;
  }
}

@media (min-width: 576px) {
  #myCarousel .carousel-caption {
    top: 15%;
   }
  #myCarousel .carousel-caption img {
    height: 100%;
   }
  .carouselwelkom {
   
    padding-top: 0;
    padding-bottom: 0;
  }
  .carouselwelkom h3 {
    font-size: 1.8rem;
  }
  .carouselwelkom h1 {
    font-size: 2rem;
     font-weight: 200;
  }
    .carouselwelkom h2 {
    font-size: 1.5rem;
  }
}
@media (min-width: 768px) {
   #myCarousel .carousel-caption {
    top: 20%;
   }
   #myCarousel .carousel-caption img {
    height: 100%;
   }
  .carouselwelkom {
    padding-top: 0;
    padding-bottom: 0;
  }
  .carouselwelkom h3 {
    font-size: 2rem;
  }
  .carouselwelkom h1 {
    font-size: 3rem;
  }
}


@media (min-width: 992px) {
    #myCarousel .carousel-caption {
    top: 25%;
   }
   #myCarousel .carousel-caption img {
    height: 100%;
   }
  .carouselwelkom {
    padding-top: 0;
    padding-bottom: 0;
  }
  .carouselwelkom h3 {
    font-size: 2.5rem;
  }
  .carouselwelkom h1 {
    font-size: 3rem;
  }
}

@media (min-width: 1200px) {
   #myCarousel .carousel-caption img {
    height: 100%;
   }

  .carouselwelkom h1 {
    font-size: 4rem;
  }
 .carouselwelkom h3 {
    font-size: 3rem;
  }
}

/*==============================================
  Boven pagina
================================================ */
.sectie-boven {
  margin-bottom: 20px;
  padding: 0 0 0 0;
  background-color: #fff;
  position: relative;
  background-size: cover;
  overflow: hidden;
}


/*==============================================
  Tabjes kleuren 
================================================ */

.nav-tabs .nav-link.active,
.nav-tabs .nav-item.show .nav-link {
  color: #a46c4b;
  background-color: #fff;
  border-color: #fff;
}
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus {
  border-color: #fff;
}

.nav-tabs a,
.nav-link a {
  color: #c1272d;
}


/*==============================================
  nieuws
================================================ */
.card {
  overflow: hidden;
  position: relative;
}
.card-img-top .card-title{
 overflow: hidden;   
}

.card img {
  transition: transform .5s;
    -webkit-transition: transform .5s;
    -moz-transition: transform .5s;
    -o-transition: transform .5s;
  opacity: 1;
}
.card:hover img {
  transform: scale(1.1, 1.1);
    -webkit-transform:  scale(1.1, 1.1); /* Safari & Chrome */
    -moz-transform:  scale(1.1, 1.1); /* Firefox */
    -ms-transform:  scale(1.1, 1.1); /* Internet Explorer */
    -o-transform:  scale(1.1, 1.1); /* Opera */
    transition:  all 0.3s ease 0s;
    -webkit-transition: transform 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
  opacity: 0.95;
}
.card-title:hover {
  transform: scale(1.1, 1.1);
    -webkit-transform:  scale(1.1, 1.1); /* Safari & Chrome */
    -moz-transform:  scale(1.1, 1.1); /* Firefox */
    -ms-transform:  scale(1.1, 1.1); /* Internet Explorer */
    -o-transform:  scale(1.1, 1.1); /* Opera */
    transition: all 0.3s ease 0s;
    -webkit-transition: all 0.3s ease 0s;
    -moz-transition: all 0.3s ease 0s;
    -o-transition: all 0.3s ease 0s;
   margin-left: 3rem;
  opacity: 1;
}



/* ==============================================
 * contact form
 * ============================================== */

.contact{
    
    background-image: url(/assets/md/images/?.svg);  /* The image used */
     background-attachment: fixed;/* Create the parallax scrolling effect */    
    background-position: center;
}
form-control {
  background-color: #000;
  border: 0.5px solid #89a27a;
  color: #c1272d;

}
.form-control:focus {
  border-color: #89a27a;
  outline: 0;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
  -webkit-box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
          
}
.form-control::-moz-placeholder {
  color: #89a27a;
  opacity: 1;
}
.form-control:-ms-input-placeholder {
  color: #89a27a;
}
.form-control::-webkit-input-placeholder {
  color: #89a27a;
}

.form-control {
  padding: 1rem;
  background-color: #fffff;
  border: 1px solid #89a27a;
  border-radius: 3px;

}
.g-recaptcha {
  
  background-color: #006dba;
  border: 1px solid #89a27a;
  color: #fff;
 
}
.controleemail {
    border:0 ;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
}

.btn-success {
     background-color: #89a27a;
      border-radius: 0px;
      border: 0px;
}
.alert-error{
  color: #853c44;  
}

/* ==============================================
 *  parallax layout
 * ============================================== */
.parallax {
    background-image: url(/assets/md/images/achtergrond.jpg); opacity: 1 ; /* The image used */
    height: 100%;  /* Full height */   
    background-attachment: fixed;/* Create the parallax scrolling effect */    
    background-position: center;
    background-repeat: no-repeat;
}
.parallax h1,h2 {
  color: #fff;
 }