@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400..700&display=swap');

/* Regular (400) */
@font-face {
  font-family: 'Linea';
  src: url('../../fonts/LINEA___.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Intro';
  src: url('../../fonts/Intro.otf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}



h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
   font-family: "Intro", sans-serif;
        font-weight: bold;
    text-transform: uppercase;

}
h1, .h1{
    font-family: "Linea", sans-serif;
    font-size: 40px;
    text-transform: uppercase;
    letter-spacing: 3px;
}
h2, .h2{
    font-family: "Intro", sans-serif;
    font-size: 32px;
    text-transform: uppercase;
    color: var(--color2);
}
h4, .h4{
     font-family: "Lora", sans-serif;
    text-transform: uppercase;
}
body {
    font-family: "Lora", sans-serif;
    font-weight: 400;
    background: var(--color3);
}

header{
        width: 100vw;
    margin: 0px calc(var(--medium) * -1);
    background: var(--color1);
}
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="search"], input[type="number"], textarea, select {
clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
header nav.navbar .navbar-nav:hover > .nav-item:not(:hover) > .nav-link:hover,
header nav.navbar .navbar-nav:hover > .nav-item.current-menu-item:not(:hover) > .nav-link {
    color: var(--color2);
}
.btn{
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
.btn:not(.btn--simple)::after {
    content: '';
    display: inline-block;

    width: 20px;
    height: 10px;

    background-color: currentColor;

    mask-image: url('../../images/btn-arrow.svg');
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;

    -webkit-mask-image: url('../../images/btn-arrow.svg');
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-position: center;
    -webkit-mask-size: contain;
}
.btn.btn--outline{
color: var(--color2);
background-color: var(--color1);
}
article.article.article--background[data-background="color4"] .btn.btn--outline{
    color: var(--color1);
    background-color: var(--color3);
}
section.header{
    margin: 0px calc(var(--medium) * -1);
}
section.cards.cards--secondary .card .card-footer .btn {
    justify-content: space-between;
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
section.cards .card .card-footer .btn{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
article.article.article--reverse.article--background[data-background="color3"] .article-image{
    mix-blend-mode: multiply;
}
article.article.article--background{
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
article.article .article-image{
    background: var(--color3);
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
header nav.navbar .navbar-nav > .nav-item > .nav-link {
color: var(--color2);
}
article.article.article--background:first-of-type:not([data-background="color3"]):not(:has(.article-content--background)) {
border-radius: 0px 0px 5px 5px;
}
article.article.article--background:not(:has(.article-content--background)):after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: -2;
    height: 100%;
    pointer-events: none;

}
article.article.article--background[data-background="color4"]::after {
      background-image: url('http://hetlokaalborger.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/7/2026/06/borger-patroon-background.svg');
    background-size: 100%;
    background-repeat: repeat-y;
    z-index: 1;
}
article.article.article--background[data-background="color1"]::after {
      background-image: url('http://hetlokaalborger.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/7/2026/06/borger-patroon-background.svg');
    background-size: 100%;
    background-repeat: repeat-y;
    z-index: 1;
    
}

article.article .article-sidebar {
background: var(--color1);
color: white;
clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
section.partners{
        margin: 0px calc(var(--medium) * -1);
}
section.blocks .btn{
    justify-content: space-between;
}
section.blocks .block .block-image img {
mix-blend-mode: multiply;
}
section.blocks .block .block-content{
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
.accordion .accordion-item{
clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
.page-id-16 article.article .article-content{
    background: var(--color3);
}
.page-id-16 article.article .article-image img{
mix-blend-mode: multiply;
}

.page-id-24 .accordion .accordion-item{
background-color: var(--color1);
color: var(--color3);
}
article.article.article--background:last-of-type {
    margin-bottom: var(--extralarge);
}
section.cards .cards-header .row .col-12.col-sm-12.col-md-auto.col-lg-auto.col-xl-auto.ml-auto{
    align-content: flex-end;
}
section.cards .cards-header ul.cards-header__filters li label {
clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
}
section.cards .slick-track .card{
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
    background: var(--color3);
}
.card .card-image img {
mix-blend-mode: multiply;
}
.single-woningen article.article .article-sidebar{
    background-color: var(--color3);
    color: var(--color1);
}
section.cards.cards--secondary .card .card-content{
    border-top: 1px solid var(--color2);
    background: transparent;
    color: var(--color1);
}
section.cards.cards--tertiary .card .card-content{
    background: transparent;
    color: var(--color1);
}
section.cards.cards--secondary .btn{
    border-radius: 5px;
}
section.cards.cards--secondary .container{
    padding: 0px;
}
section.downloads .download {
    background: var(--color1);
    position: relative;
    display: block;
    display: flex;
    align-items: center;
    gap: var(--small);
    padding: var(--extrasmall) var(--small);
    -webkit-transition: all 0.3s;
    transition: all 0.3s;
    color: #ffffff;
    clip-path: polygon(0 5px, 5px 5px, 5px 0, calc(100% - 5px) 0, calc(100% - 5px) 5px, 100% 5px, 100% calc(100% - 5px), calc(100% - 5px) calc(100% - 5px), calc(100% - 5px) 100%, 5px 100%, 5px calc(100% - 5px), 0 calc(100% - 5px));
    .h5{
        color: white;
         transition: all 0.3s;
    }
}
section.downloads .download:hover {
    animation: pulse 3s infinite;
    color: var(--color2);
    .h5{
        color: var(--color2);
    }
}

footer {
background: var(--color1);
color: var(--color2);
margin: 0px calc(var(--medium) * -1);
}
section.partners .partners-header *:last-child{
    justify-self: center;
}
section.partners .partners-header .partners-header__logo{
    height: 100%;
    max-width: 360px;
}
section.intro{
    position: relative;
    border-radius: 0px 0px 5px 5px;
    corner-shape: notch;
}

section.partners:after, footer:after,section.intro:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1;
    height: 100%;
    pointer-events: none;
  background-image: url('http://hetlokaalborger.nieuwbouwwvgontwikkeling.nl/wp-content/uploads/sites/7/2026/06/borger-patroon-background.svg');
    background-size: 100%;
    background-repeat: repeat-y;
}
@media (max-width: 992px){
   body{ margin: 0 var(--medium);
   }
   header nav.navbar .navbar-toggler{
    color: var(--color2);
   }
       header .navbar-collapse.open {
    background-color: var(--color1);   
    
    }
}
@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0px rgba(206, 178, 110, 0.80);
    }
    100% {
        box-shadow: 0 0 0 15px rgba(206, 178, 110, 0);
    }
}