body{
  font-family: 'Raleway',"Helvetica Neue", "Helvetica", Helvetica, Arial, sans-sub-title;
  color: #777777;
}

/* groen #003E35 */
/* terra #EDBBA7 */
section{
  padding:70px 0;
  background: #EDBBA7;
  color:#003E35;
}
section#locatie{
padding: 0;
}

.btn.btn-swaentje-light{
  background: #EDBBA7;
  border-radius: 0;
  color: #003E35;
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size:1.5em;
}
.carousel-inner {
max-height:100vh;

}

.carousel-item{
  background-repeat: no-repeat;
  background-size: cover;
  background-position: left center;
  height:80vh;
}

.form-floating {
}

.form-floating .form-control{
  border:none;
  border-bottom: solid 2px #EDBBA7;
  background: transparent;
  border-radius:0;
  color:#EDBBA7;
}
.form-floating > .form-control-plaintext:focus ~ label,
.form-floating > .form-control-plaintext:not(:placeholder-shown) ~ label,
 .form-floating > .form-control:focus ~ label,
  .form-floating > .form-control:not(:placeholder-shown) ~ label {
color:#EDBBA7;
  }

.form-floating > .form-control-plaintext:focus ~ label::after,
.form-floating > .form-control-plaintext:not(:placeholder-shown) ~ label::after,
 .form-floating > .form-control:focus ~ label::after,
  .form-floating > .form-control:not(:placeholder-shown) ~ label::after {
/* background-color:#F00; */
background:none;
color:#EDBBA7;
  }
/* .form-floating .form-control:focus label:after{
  background:none;
} */
.carousel-caption{
  bottom:25%;
}
.carousel-caption h5 {
  font-family: "Kristi", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;
  filter: drop-shadow(0 0 10px #000) drop-shadow(0 0 10px #000);
}

section:nth-child(odd){
  background: #003E35;
  color:#EDBBA7;
}

section.bgFull{
    background-repeat: no-repeat;
background-position: center center;
height:450px;
}
section.bgDevider h2 {
  font-family: "Kristi", cursive;
  font-weight: 400;
  font-style: normal;
  font-size: 3em;
  color:#FFF;

  filter: drop-shadow(0 0 10px #000) drop-shadow(0 0 10px #000);
}

section.bgLeft{
    padding:0;
   min-height: 450px;
}
section.bgLeft .bgHolder{
  background-repeat: no-repeat;
  background-size: cover;
background-position: left center;
/* background-size: 450px auto; */

}

footer{
  padding:.5em 0;
  text-align: center;
  background: #EDBBA7;
  color:#003E35;
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;

}
footer a{color:#003E35;}

h1, h2, h3, h4, h5, h6 {
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;
  color:inherit;
}
.logoHolder{
position: absolute;
top:1em;
width:40%;
left:30%;
z-index:1000;
}
.logoHolder svg path {
  fill: #FFF !important;

}
.logoHolder svg {
  filter: drop-shadow(0 0 10px #000) drop-shadow(0 0 10px #000) drop-shadow(0 0 10px #000);
}

.offcanvas-header .btn-closeCustom{
  /* align-self: start; */
  position: absolute;
  top:1em;
  right:1em;
  border:solid 2px #FFF;
  text-align: center;
  width:50px;
  height:50px;
  padding: 0;
  border-radius: 0;
}
.offcanvas-logo{
width:80px;
}
.offcanvas-logo svg path {
  fill: #EDBBA7 !important;
}

.navToggler{
position: fixed;
display: inline-block;
text-align: center;
z-index:1035;
padding-top:3px;
top:1em;
right:1em;
width:50px;
height:50px;
border:solid 2px #FFF;
}

.carousel-control-next-icon,
.carousel-control-prev-icon
{

  border:solid 2px #FFF;
  width:50px;
  height:50px;
  background-size: 2em 2em;
}


.navToggler i.bi::before { vertical-align: 0;}

.offcanvasMenu{
  background: #003E35;
}
.offcanvasMenu .offcanvas-body{
  color:#EDBBA7;
  display: flex;
  flex-direction:column;
  justify-content: space-between;



}
section.map{
   min-height: 450px;
   padding: 0;
}
.mapHolder{
  width: 100%;
  min-height: 450px;
  filter: grayscale(100%);
}

.offcanvasMenu li.nav-item{

  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;
  font-size: 2em;


}
.offcanvasMenu li.nav-item a.nav-link{
  color:#EDBBA7;
  padding-left: 0;
}

.offcanvasMenu li.nav-item a.nav-link:HOVER{
color:#FFF;
}

.menuContact {
  /* position: absolute;
  bottom:1em; */
  text-align: center;
  width:100%;
}
.menuContact strong{
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;
}

section.portfolio{
    padding:0;
}

.portfolio .container-fluid .portfolio-box,
.portfolio .container-sm .portfolio-box,
.portfolio .container-md .portfolio-box,
.portfolio .container-lg .portfolio-box,
.portfolio .container-xl .portfolio-box,
.portfolio .container-xxl .portfolio-box {
  position: relative;
  display: block;
}
.portfolio .container-fluid .portfolio-box .portfolio-box-caption,
.portfolio .container-sm .portfolio-box .portfolio-box-caption,
.portfolio .container-md .portfolio-box .portfolio-box-caption,
.portfolio .container-lg .portfolio-box .portfolio-box-caption,
.portfolio .container-xl .portfolio-box .portfolio-box-caption,
.portfolio .container-xxl .portfolio-box .portfolio-box-caption {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  width: 100%;
  height: 100%;
  position: absolute;
  bottom: 0;
  text-align: center;
  opacity: 0;
  color: #fff;
  background: rgba(237, 187, 167, 0.9); ?/*gba(244, 98, 58, 0.9);*/
  transition: opacity 0.25s ease;
  text-align: center;
}

.portfolio .container-fluid .portfolio-box:hover .portfolio-box-caption,
.portfolio .container-sm .portfolio-box:hover .portfolio-box-caption,
.portfolio .container-md .portfolio-box:hover .portfolio-box-caption,
.portfolio .container-lg .portfolio-box:hover .portfolio-box-caption,
.portfolio .container-xl .portfolio-box:hover .portfolio-box-caption,
.portfolio .container-xxl .portfolio-box:hover .portfolio-box-caption {
  opacity: 1;
}

.portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-category,
.portfolio .container-sm .portfolio-box .portfolio-box-caption .project-category,
.portfolio .container-md .portfolio-box .portfolio-box-caption .project-category,
.portfolio .container-lg .portfolio-box .portfolio-box-caption .project-category,
.portfolio .container-xl .portfolio-box .portfolio-box-caption .project-category,
.portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-category {
  /* font-family: "Merriweather Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; */
  font-size: 0.85rem;
  font-weight: 600;
  text-transform: uppercase;
}

.portfolio .container-fluid .portfolio-box .portfolio-box-caption .project-name,
.portfolio .container-sm .portfolio-box .portfolio-box-caption .project-name,
.portfolio .container-md .portfolio-box .portfolio-box-caption .project-name,
.portfolio .container-lg .portfolio-box .portfolio-box-caption .project-name,
.portfolio .container-xl .portfolio-box .portfolio-box-caption .project-name,
.portfolio .container-xxl .portfolio-box .portfolio-box-caption .project-name {
  font-size: 1.2rem;
  font-family: 'DM Serif Display', serif;
  font-weight: 400;
  font-style: normal;
}

.sl-overlay {  background: #000;}
.sl-wrapper .sl-counter{ color:#FFF; }
.sl-wrapper  .sl-navigation button.sl-next,
.sl-wrapper  .sl-navigation button.sl-prev{color:#FFF}
.sl-wrapper  .sl-close {
  text-align: center;
  font-size: 2.5rem;
  color:#FFF;
  width:50px;
  height:50px;
  border:solid 2px #FFF;}


/* Small devices (landscape phones, 576px and up) */
@media (min-width: 576px) {

  .logoHolder{
  width:26%;
  left:37%;
  }

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {

  .logoHolder{
  width:20%;
  left:40%;
  }

}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {

  .logoHolder{
  width:16%;
  left:42%;
  }
  .carousel-caption{
    bottom:25%;
  }
  .carousel-caption h5 {
    font-size:4em;
  }
  .offcanvasMenu .offcanvas-body{
    padding:2rem;
  }

  .carousel-item{

    height:95vh;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .logoHolder{
  width:12%;
  left:44%;
  }
  .carousel-caption h5 {
    font-size:5em;
  }
}

/* XX-Large devices (larger desktops, 1400px and up) */
@media (min-width: 1400px) {

}