:root {
  --color01: #002C5C;
  --color02: #57c58e;

  --videoOverlayColor : #00000099;

  --orange-hover: #c4530f;
  --sectionPadding:3em;

  --bs-border-radius:0;
  --bs-border-radius-sm:0;
  --bs-border-radius-lg:0;
  --bs-border-radius-xl:0;

  /* --bs-accordion-btn-icon : url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23FFFFFF'%3e%3cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3e%3c/svg%3e"); */

}

.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color01);
  --bs-btn-border-color: var(--color01);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #0b5ed7;
  --bs-btn-hover-border-color: #0a58ca;
  --bs-btn-focus-shadow-rgb: 49,132,253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: #0a58ca;
  --bs-btn-active-border-color: #0a53be;
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: #fff;
  --bs-btn-disabled-bg: var(--color01);
  --bs-btn-disabled-border-color:var(--color01);
}

.btn-xs {
  --bs-btn-padding-x: 0.25rem;
  --bs-btn-padding-y: 0.08rem;
  --bs-btn-font-size: 0.8rem;
  --bs-btn-font-weight: 400;
  --bs-btn-line-height: 1;
}
.btn-remove {
  --bs-btn-hover-bg: #dc3545;
  --bs-btn-hover-border-color: #dc3545;
}


section.ObjectKenmerken{

    .accordion-button::after {
      background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !important;
   }

   .accordion-body table.table tr td:first-of-type{
     width:250px
   }
    .accordion-body table.table table {width:100%}

}

label.form-label{
  font-weight:700;
  color: var(--color01);
}

img:is([sizes="auto" i], [sizes^="auto," i]) {
  contain-intrinsic-size: 800px 600px;
}

u{

  text-decoration-color: var(--color02);
  text-decoration-thickness: 5px;
}

body {
  font-family: 'Source Sans Pro',sans-serif;

  font-optical-sizing: auto;
  font-weight: 100;
  font-style: normal;
  font-size: 16px;
  color: var(--color01);
  --bs-gutter-x: 1.5rem;
  /* --bs-offcanvas-padding-x : 50px;  */
}
a{
  text-decoration: none;
}

h1, h2, h3, h4, h5, h6 {
  font-family: "Poppins", sans-serif;
  text-transform: uppercase;
  font-weight: 700;
}

h3.normal {
  text-transform: none;
}

h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
  font-weight: 100;
}
.ObjectOmschrijving ul,
p {
  font-size: 1.25em;
  line-height: 1.75em;
}



p strong{font-weight: 700}

section {
  padding-top: var(--sectionPadding);
  padding-bottom: var(--sectionPadding);
}

section:nth-child(odd):not(:first-child):not(:last-child){
  background-color: var(--color01);
  color:#FFF;
}

.bi-xl {
  font-size: 3em;
}
.btn-xl{
    --bs-btn-padding-y: 1rem;
    --bs-btn-padding-x: 2rem;
    --bs-btn-font-size: 2.5rem;
    --bs-btn-border-radius: var(--bs-border-radius-lg);
}

.btn-outline-primary {
  --bs-btn-color: var(--color01);
  --bs-btn-border-color: var(--color01);
  --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: var(--color01);
  --bs-btn-hover-border-color: var(--color01);
  --bs-btn-focus-shadow-rgb: 13, 110, 253;
  --bs-btn-active-color: #fff;
  --bs-btn-active-bg: var(--color01);
  --bs-btn-active-border-color: var(--color01);
  --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
  --bs-btn-disabled-color: var(--color01);
  --bs-btn-disabled-bg: transparent;
  --bs-btn-disabled-border-color: var(--color01);
  --bs-gradient: none;
}


.btn-outline-light{
  /* background-color: var(--color01); */
}

.btn-circle {
  width: 30px;
  height: 30px;
  text-align: center;
  padding: 6px 0;
  font-size: 12px;
  line-height: 1.428571429;
  border-radius: 15px;
}

.btn-circle.btn-lg {
  width: 50px;
  height: 50px;
  text-align: center;
  font-size: 22px;
  line-height: 38px;
  border-radius: 25px;
}

.btn-circle.btn-xl {
  width: 70px;
  height: 70px;
  padding: 10px 16px;
  font-size: 24px;
  line-height: 1.33;
  border-radius: 35px;
}

.logoHolder {
  max-width: 220px;
}

.pageTop:not(.menuView).shrinkMenu .logoHolder {
  display: none;
}

.pageTop.menuView .logoHolder svg path {
  fill: #FFF !important;
}

.pageTop {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  background: #FFF;
  height: 100px;
  position: fixed;
  width: 100%;
  overflow: hidden;
  transition: background .5s, height .25s;
  z-index: 900;
}




.pageTop:not(.menuView) .btn-circle {
  background: #FFF;
}
.pageTop:not(.menuView) .btn-circle:hover{
  color:#002C5C66;
}

.pageTopLogoBar {
  height: 100px;
}

.toggleMenu {
  position: relative;
  width: 100%;
  /* height: 3em; */
  font-size: 1.5em;
  text-align: left;
  text-transform: uppercase;
  border: none;
  /* border: solid 1px #FFF; */
  margin-top: .25em;
  background: none;
}

.toggleMenu span.openMenu,
.toggleMenu span.closeMenu
 {
  position: absolute;
  top: .5em;
  padding: .5em;
  font-size: 1em;
  line-height: 1em;
  left: 0;
  width: auto;
  color: var(--color01);
  transition: opacity .5s;
  /* text-shadow: 1px 1px #FFF; */
}

.toggleMenu span.openMenu {
  opacity: 1;
  background-color: #FFFFFF;
}

.toggleMenu span.closeMenu {
  opacity: 0;
}

.pageTop.menuView .toggleMenu span {
  color: #FFF;
  /* text-shadow: 0px 0px 5px var(--color01); */
}

.pageTop.menuView .toggleMenu span.openMenu {
  opacity: 0;
}

.pageTop.menuView .toggleMenu span.closeMenu {
  opacity: 1;
}

.pageTop.shrinkMenu:not(.menuView) {
  height: 5em;
  background: none;
}


.myVideo {
    width: 100%;
    height: auto;
    background-color: #FFFFFF33;
}
.video-container {
  position: relative;
    display: inline-block;
    margin-bottom: 20px;
    width:100%
}

.progress-container{
  position: absolute;
  bottom:0;
  right:0;
  left:0;
  z-index: 1100;
}
.progress-container .progress{
background-color: var(--color02);
}
.custom-controls {
  position: absolute;
  bottom: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* background-color: transparent;/*rgba(0, 0, 0, 0.7);*/
  background: linear-gradient(to top, rgba(0, 0, 0, 1) 15px, rgba(0, 0, 0, 0) 100%);
  padding: 10px;
  height:50px;
  padding-bottom: 0;
  box-sizing: border-box;
}

.custom-controls .videoDuration{
  font-size: .75em;
}

.custom-controls button {
    color: white;
    background-color: transparent;
    border: none;
    cursor: pointer;
    margin-right: .25em;
    font-size: 1.5em;
}
.custom-controls button:last-of-type{
  margin-right: 0;
}
.custom-controls input[type="range"] {
    flex-grow: 1;
    margin: 0 10px;
}



.pageTop.menuView {
  background: #002C5CEE;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  height: auto;
  z-index: 1050;
}

.pageTop.menuView .btn-outline-primary {
  color: #FFF;
  border-color: #FFF;
}
.pageTopMainInfo{
  color: #FFF;
  padding-top: 2em;

  h2{
    font-size: 3em;
  }
}
.pageTop.menuView .headerContactAddress{
  margin-bottom: 1rem;
}



.pageTop.menuView .headerContactAddress h3{
  font-weight: 100;
    color: #FFF;
}
.pageTop.menuView .headerContactAddress h3 strong{
  font-weight: 700;

}
.pageTop.menuView .headerContactAddress p{
font-size: 1em;
line-height: 1.25em;
  color: #FFF;
  font-weight: 100;
}
.pageTop.menuView .headerContactAddress a{
  color: #FFF;
}
.pageTop.menuView .headerContactAddress a:HOVER{
  color: var(--color02);
}

.pageTopMainMenu {
  padding-top: 2em;
}
.pageTopMainMenu ul {
  list-style: none;
  padding-left: 0;
}

.pageTopMainMenu ul li {
  color: #FFF;
  font-size: 1.5em;
  text-transform: uppercase;
}
.pageTopMainMenu ul li a{
  text-decoration: none;
  color:#FFF;
}
.pageTopMainMenu ul li a:HOVER{
  opacity: .8;
}

main {
  padding-top: 100px;
}

.ro_woonplaats {
  font-weight: 700;
  font-size: 1em;
}

body.realestateobject section:first-of-type{
  padding-top:0;
  padding-bottom:0;
}

.RealestateObjectLoader{
  display: flex;
  width:100%;
  height:50vh;
  background-color: #00000011;
  align-items: center;
  justify-content: center;
}

.ObjectSammenvatting a {
  color: var(--color01);
}
.ObjectSammenvatting a:HOVER {
  text-decoration: underline;
}

.card.RealestateObject{
  margin-bottom: 3em;
}

section .sectionTitle{
  font-size: 3em;
  margin-bottom: 1em;
}

/* #map {pointer-events: none;} */
.RealestateObject .card-img-overlay{
  color: #FFF;
  top:auto;
  left:1em;
  right:1em;
  bottom:-3em;

}

.card.card-mensen .card-img-overlay{
  top:auto;
  color:var(--color01);
  background-color: #FFFFFF99;
  text-transform: uppercase;
  font-weight: 700;
  left:1em;
  right:1em;
  bottom:1em;
    padding:0.5rem;
}

.leaflet-control-attribution {
opacity: 0.5 !important;
}
.leaflet-control-attribution a {
  pointer-events: none;
}

.RealestateObject .card-img-overlay .card-img-overlay-content{

  background-color: var(--color01);
    padding: 0.5rem;

}

section.ObjectKenmerken{



/* url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23212529' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e") */
.accordion-button{
  background-color: var(--color01);
  color:#FFF;
}

table table td{
  vertical-align: top;
  padding:0;
  padding-right: 0.5em;
}

ul{
padding-left: 0rem;
}
ul {
  list-style-type:none;
  font-weight: 700;
}
ul ul {
  list-style-type:square;
    padding-left: 0.5rem;
    font-weight: 100;
}

ul ul ul {
list-style-type:circle;
  padding-left: 0.5rem;
  font-weight: 100;

}
}

section.ObjectKaart{
  padding-bottom: 0;

  #map {
        /* width: 100%;
        height: 300px; */
        /* pointer-events: none; */
    }
}

.vraagprijs {
  font-weight: 700;
  font-size: 2.5em;
}
.vraagprijs span{
  font-size: 35%
}

.carousel-control-prev{
  justify-content: start;
}
.carousel-control-next{
    justify-content: end;
}
.carousel-control-prev-icon,
.carousel-control-next-icon{
  background-color: var(--color01);
  width:3rem;
  height:3rem;
  background-size:50%;
}

.iconCircle {
  width: 30px;
height: 30px;
display: inline-block;

text-align: center;
padding: 6px 0;
font-size: 14px;
line-height: 1.428571429;
border-radius: 15px;
background-color: #FFF;
color: var(--color01);
margin:2px;
}

.iconCircle.primary{
  color: #FFF;
  background-color:var(--color01);
}

.auto-col-text {
  column-count: 1; /* Standaard 1 kolom */
}

@media (min-width: 768px) {
  .auto-col-text.md-2 {
    column-count: 2; /* Vanaf md breakpoint 2 kolommen */
  }
}

/* aanbodOverzicht */

/* .ro_eigenschappen{
  font-size: 1.25em;
} */
.ro_prijs{
  font-weight: 700;
  font-size: 1.25em;
}
/* blog page  */
.pageHeader.standaardContent,
.pageHeader.blog{
  background: var(--color01);
  color:#FFF;
  height:auto;
}
.standaardContent.pageHeader h4{
  font-size:1em;
}
/* standaard Page */
.standaardContent.pageHeader.hasBg{
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
min-height:40vh;
  h1{
    text-transform: none;
    color:#FFF;

  }
}

body.standaardContent ul:not([class]) {
  font-size: 1.25em;
  line-height: 1.75em;
  padding-top: 0.5em;
}
body.standaardContent ul:not([class]) li {
   position: relative; /* Positioneer de lijstitems relatief voor de checkmark */
   padding-left: 32px; /* Voeg ruimte toe aan de linkerkant voor de checkmark */
}
body.standaardContent ul:not([class]) li::before {
    content: "✓"; /* Unicode teken voor checkmark */
    position: absolute; /* Absolute positionering */
    left: 0; /* Plaats de checkmark aan de linkerkant */
    color: var(--color02); /* Kleur van de checkmark */
    font-weight: bold; /* Maak de checkmark vetgedrukt */
}

article.blog-item {
  a {
    text-decoration:none;
    color: var(--color01);
  }
  h2 a:hover  {
    text-decoration:underline;
  }
 h2{
   text-transform: none;
 }
}

/* homepage */
body.homepagecontent main{
  padding-top: 0;
}
body.homepagecontent .pageTop:not(.menuView){
  background: transparent;
}
/* body.homepagecontent .pageTop .pageTopLogoBar{
  height:200px;
}
body.homepagecontent .pageTop .logoHolder{
  width: auto;
  height:200px;
} */

body.homepagecontent .pageTop .logoHolder svg path {
  fill: #FFF !important;
  /* stroke-width: 3;
  stroke: var(--color01);
  stroke-opacity:0.5; */
  /* filter: drop-shadow(0px 0px 3px rgb(0 0 0 / 1)); */
}

section.sectionText{

h2{
  font-weight: 400;
}

}

/* section HEro */
section.homeIntroVideoHolder {
  background-color: var(--color01);
    position: relative;
    height: 100vh;
    min-height: 400px;
    max-height: 1120px;
    overflow: hidden;
    z-index: 1;
    color:#FFF;

  .homeIntroImage{
    width:100%;
    height: 100%;
    background-size:cover;
    background-repeat: no-repeat;
    background-position: center center;
  }

  .homeIntroVideoHolderOverlay
  {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index:-1;
  }

  .homeIntroVideoHolderOverlay::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: var(--videoOverlayColor);
    background-color: var(--videoOverlayColor);
    pointer-events: none;
  }

  #homeIntroVideo {
  height: 100%;
  width: 100%;
  object-fit: cover;
  }



.copyRight {
position: absolute;
bottom: 1em;
right: 1em;
font-size: .7em;
}
.copyRight a {
color: #FFF;
text-decoration: none;
}
h1 {
font-size: 4em;
text-transform: uppercase;
font-weight: bold;
}
h3 {
font-size: 2em;
text-transform: uppercase;
}
.hero-holder {
height: 100%;
display: flex;
/*justify-content: center;*/
align-items: center;
}
.hero-container {

width: 80%;
padding-left: 2em;
padding-right: 0;
}

}
.btn-next-vertical {
  position: absolute;
  left: 50%;
  bottom: 15px;
  border: none;
  background: none;
  color: #FFF;
  font-size: 3em;
  animation: pulse 1.5s infinite;
}

footer {
  h3 {
    font-size: 1.2em;
  }

  .footerContactAddress h3{
    font-weight: 100;
  }
  .footerContactAddress h3 strong{
    font-weight: 700;
  }
.footerContactAddress p{
  font-size: 1em;
  line-height: 1.25em;
  }
}

footer.footer {
  color: #FFF;
  background-color: #002C5C;
  padding-top: 100px;
}

.footer-bottom {
  background: #fff;
  color: #000033;
  padding: 24px 0;
  margin-top: 25px;
}
footer.footer .footer-bottom {
  font-size: 0.8em;
  font-weight: 700;
}

footer.footer .footer-bottom a{
  color: var(--color01);
  text-decoration: none;

}

.footer .form-control {
  background-color: var(--color01);
  color: #fff;
  border: 1px dotted #fff;
  padding: 10px;
  font-family: Poppins, sans-serif;
  font-size: 1em;
}

.footer .form-control::placeholder {
  color: #FFFFFF66;
  opacity: 1; /* Firefox */
}

.footer .form-control::-ms-input-placeholder { /* Edge 12 -18 */
  color: #FFFFFF66;
}

ul.footerBrands {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

.footerBrands li {
  display: inline;
  padding: 0 10px;
}

footer.footer a, footer.footer i, footer.footer li {
  color: #fff;
}

.footerBrands img {
  opacity: 0.8;
  max-width: 100px;
  max-height: 50px;
}

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

}

/* Medium devices (tablets, 768px and up) The navbar toggle appears at this breakpoint */
@media (min-width: 768px) {
  .pageTopMainMenu ul li {
    font-size: 2em;
  }



}

/* Large devices (desktops, 992px and up) */
@media (min-width: 992px) {
  .pageTopMainMenu ul li {
    font-size: 2.5em;
  }
}

/* Extra large devices (large desktops, 1200px and up) */
@media (min-width: 1200px) {
  .pageTopMainMenu ul li {
    font-size: 3em;
  }

  .RealestateObject .card-img-overlay{
    padding: 0;/*var(--bs-card-img-overlay-padding);*/
    left:2em;
    right:2em;
    bottom:-2em;
  }
  .card.RealestateObject{
    margin-bottom: 3em;
  }

  .ro_woonplaats { font-size: 1.5em; }
  .ro_prijs{ font-size: 2em; }
}

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

}