@import url('https://use.typekit.net/iic8siq.css');
/* Different fonts bundled for the project */

@font-face {
    font-family: 'FibonSans';
    src: url('../fonts/FibonSans-Regular.otf');
}

/* Regular
font-family: "open-sans", sans-serif;
font-weight: 400;
font-style: normal;
*/

/* Bold
font-family: "open-sans", sans-serif;
font-weight: 700;
font-style: normal;
*/

/* Gotham Light
font-family: "gotham", sans-serif;
font-weight: 300;
font-style: normal;
*/

/* Gotham Book
font-family: "gotham", sans-serif;
font-weight: 400;
font-style: normal;
*/

/* Gotham Medium
font-family: "gotham", sans-serif;
font-weight: 500;
font-style: normal;
*/

/* Minion Pro Regular
font-family: "minion-pro", serif;
font-weight: 400;
font-style: normal;
*/

/* Akzidenz Grotesk Next Light
font-family: "akzidenz-grotesk-next-pro", sans-serif;
font-weight: 300;
font-style: normal;
*/

:root {
    --moss: #616B38;
    --dark-moss: #293617;
    --sienna: #BD6B26;
    --beige: #e6d2bc;
    --mint: #eff0eb;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    overflow-x: hidden;
}

/*remove after maintenance is done*/
body>.main-container:after {
    opacity: 1 !important;
    background-color: #8c7ba9 !important;
}
p{
    line-height: 1.8;
}

.hero-text,
.locations-list ul li {
    line-height: 2em;
}

/* General */
p:not(.fs-6 p),
div:not(.fs-6 p),
span:not(.fs-6p),
.btn:not(nav .btn) {
    font-family: "open-sans", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9rem;
}

.btn.btn-header.left-image-button
{
    font-family: "open-sans", sans-serif;
    background-color: var(--moss);
    color: white;
    font-weight: 400;
    font-style: normal;
    font-size: 0.9rem;
}
.btn.btn-header.left-image-button:hover {
    color: white !important;
    border: 1px solid white !important;
    background-color: transparent;
}


h1 {
    font-weight: 700;
    font-size: 1.4rem;
}

h2,
.h2 {
    font-family: "open-sans", sans-serif !important;
    font-weight: 700 !important;
    font-style: normal !important;
}

h3 {
    font-weight: 700;
}

h4 {
    font-size: 1.2rem;
    font-weight: 700;
}

h5 {
    font-weight: 700;
    font-style: normal;
    font-size: 1rem;
}

#menu-header-menu a:not(:hover) {
    color: white;
}

#menu-header-menu a {
    font-size: 1.1rem;
}

#menu-item-1894 {
    border: 1px solid white;
    background-color: white;

}

#menu-item-1894 a {
    color: var(--moss) !important;
    padding: 0.375rem 0.75rem;
}

.navbar-toggler {
    border: none;
}

.navbar-toggler:focus {
    outline: none;
    box-shadow: none;
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='white' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E");
}

a:hover {
    color: var(--dark-moss) !important;
}

header a:hover {
    text-decoration: underline !important;
    color: white !important;
}

li.active a {
    text-decoration: underline;
    font-weight: bolder;
}

.btn {
    /* no border-radius */
    --bs-btn-border-radius: none !important;
}

.bg-moss {
    background-color: var(--moss);
}

.bg-dark-moss {
    background-color: var(--dark-moss);
}

.bg-sienna {
    background-color: var(--sienna);
}

.bg-beige {
    background-color: var(--beige);
}

.bg-mint {
    background-color: #dcdbd1;
}

.moss {
    color: var(--moss);
}

.startside {
    padding: 75px 0 0;
}

.startside-extra {
    padding: 150px 0 0;
}

.endside {
    padding: 0 0 75px;
}

.endside-extra {
    padding: 0 0 150px;
}

.twoside {
    padding: 40px 0;
}

.divider {
    height: 250px;
}

.fade-in-image-hidden {
    opacity: 0;
}

.fade-in-image {
    opacity: 1;
    animation-name: fadeInOpacity;
    animation-iteration-count: 1;
    animation-timing-function: ease-in;
    animation-duration: 1.20s;
}

@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

/* NAVBAR */
/* Header transparant maken */
header {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    background: transparent;
    position: fixed;
    transition: top 0.3s ease;
}

.responsive_navbar {
    background: transparent;
}

.navbar {
    background: transparent;
    transition: all 0.3s ease;
}

/* Gradient overlay boven de navbar */
header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 100px;
    /* Hoogte van de gradient overlay */
    background: linear-gradient(to bottom,
            rgba(0, 0, 0, 0.6) 0%,
            rgba(0, 0, 0, 0.4) 40%,
            rgba(0, 0, 0, 0.2) 70%,
            rgba(0, 0, 0, 0) 100%);
    pointer-events: none;
    /* Zorgt ervoor dat de overlay niet interfereert met klikken */
    z-index: -1;
}

.navbar .container {
    position: relative;
    z-index: 10;
}

/* HOME */
.banner-homepage {
    height: 87vh;
}

.home .section-2-img,
.home .section-3-img,
.project .section-2-img {
    width: 100%;
}

.moved-col {
    right: -300px;
}

.embed-container {
    position: relative;
    padding-bottom: 56.25%;
    overflow: hidden;
    max-width: 100%;
    height: auto;
}

.embed-container iframe,
.embed-container object,
.embed-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.home-news .card {
    --bs-card-bg: transparent !important;
}

.news-clickable {
    color: inherit !important;
}

.gform_required_legend,
.gform_validation_errors,
.gfield_description.instruction {
    display: none !important;
}


.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper textarea {
    padding: 8px 15px !important;
    width: 100% !important;
    border-radius: 0 !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus,
.gform_wrapper input[type="number"]:focus,
.gform_wrapper input[type="checkbox"]:focus,
.gform_wrapper input[type="file"]:focus,
.gform_wrapper input[type="submit"]:focus,
.gform_wrapper textarea:focus {
    border-color: var(--sienna) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(188, 108, 37, 0.5) !important;
}

.contact-btn,
.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper input[type="email"]::placeholder,
.gform_wrapper input[type="tel"]::placeholder,
.gform_wrapper input[type="number"]::placeholder,
.gform_wrapper input[type="file"]::placeholder,
.gform_wrapper textarea::placeholder {
    font-family: "gotham", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.gform_wrapper input[type="checkbox"]::before {
    color: var(--sienna) !important;
}

.gform_wrapper label {
    color: white !important;
}

.gform_wrapper .gfield_label {
    color: white !important;
}

.gform_wrapper input[type="submit"],
.gform_wrapper button[type="submit"] {
    display: inline-block !important;
    background: var(--sienna) !important;
    color: white !important;
    padding: 12px 24px !important;
    text-decoration: none !important;
    border-radius: 0 !important;
}

.gform_wrapper input[type="submit"]:hover,
.gform_wrapper button[type="submit"]:hover {
    background: white !important;
    color: var(--sienna) !important;
    border: 1px solid var(--sienna) !important;
}

.gform_wrapper .gform_footer {
    display: flex !important;
    margin-top: 20px !important;
}

.gform-theme--foundation .gform_fields {
    gap: 20px !important;
}

.gform_confirmation_message {
    color: white !important;
}

.gfield_validation_message {
    color: red !important;
    font-weight: 700 !important;
}


/* DE WIJNGAARD */
.project .section-3 p {
    font-size: 1.25rem !important;
}

.project .section-3 img {
    width: 25% !important;
}

.project .section-5 .container-fluid {
    --bs-gutter-x: 0 !important;
}

.mint-section p {
    margin-bottom: 0 !important;
}

#home-carousel .flickity-prev-next-button,
#single-carousel .flickity-prev-next-button {
    z-index: 6;
    background: var(--sienna);
    top: 48%;
}

#home-carousel .flickity-prev-next-button .flickity-button-icon,
#single-carousel .flickity-prev-next-button .flickity-button-icon {
    fill: white;
}

#home-carousel .carousel-cell {
    margin-inline: 1rem;
    padding-bottom: 1.5rem;
    width: 33%;
    min-width: 270px;
}

#home-carousel .carousel-cell img {
    aspect-ratio: 16/9;
    object-fit: cover;
    position: relative;
    overflow: hidden;
}

#home-carousel .carousel-cell:not(.is-selected) .to-scale::after {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(41, 54, 23, 0.5);
    pointer-events: none;
    z-index: 1;
}

.flickity-prev-next-button.next {
    right: 30px !important;
}

.flickity-prev-next-button.previous {
    left: 30px !important;
}

.to-scale img {
    width: 100%;
    height: auto;
    max-height: 70svh;
}

/* NIEUWS */
#single-carousel .flickity-viewport {
    transition: height 0.2s;
}

/* verkoop/verhuur */
.woningentabel thead th {
    background-color: var(--moss) !important;
    color: white !important;
}

.table-responsive table {
    min-width: 450px;
    /* adjust based on your content */
}

.slick-prev:before,
.slick-next:before {
    display: none;
}


.custom-slick-nav .custom-arrow {
    background: none;
    border: none;
    font-size: 2rem;
    color: var(--moss);
    cursor: pointer;
    margin-right: 15px;
}

.custom-slick-nav .custom-arrow:hover {
    color: var(--sienna);
}

.modal-content a{
    color: white;
}

.modal-content a:hover{
    color: var(--sienna) !important;
}

.contact-form a{
    color: var(--sienna);
}
.contact-form a:hover{
    color: white !important;
}



/* COOKIES, PRIVACY & TERMS */
.standard-page h3,
.standard-page a:hover {
    color: var(--moss) !important;
}

.standard-page a {
    color: var(--sienna) !important;
}

/* FOOTER */
.footer-logo {
    width: 10rem;
}

.left-image-button:hover {
    color: var(--moss) !important;
    border: 1px solid var(--moss) !important;
}

.right-image-button:hover {
    color: var(--sienna) !important;
    border: 1px solid var(--sienna) !important;
}


/* circle promo */
.circle-promo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    border: 1px solid white;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-weight: bold;
    padding: 1rem;
    line-height: 1.3;
    font-size: 1rem;
    overflow: hidden;
    position: relative;
}

.circle-promo-inner {
    width: 100%;
}

.circle-promo p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.4;
}

.circle-promo .fs-smaller p {
    font-size: 1rem;
}

/* praktisch */

.pos-rel{
    position: relative;
    min-height: 295px;
}

.pos-rel .icon{
    position: absolute;
    top: -45px;
    left: 50%;
    transform: translate(-50%, 0);
}
.pos-rel .icon img{
    width: 75px;
}
.pos-rel h2{
    font-size: 1.6rem;
}
.bg-green{
    background-color: #bbbba5;
    min-height: 295px;
}
.troef-box {
    background: #e6d2bc;
    min-height: 100%;
}
/*Quotes*/
.bg-beige-quote img, .bg-mint-quote img{
    border-radius: 50%;
}

.bg-beige-quote h2, .bg-mint-quote h2{
    font-size: 1.8rem;
    font-style: italic !important;
    display: inline-block;
    padding-bottom: 15px;
}

.bg-beige-quote{
    background-color: var(--beige);
}
.bg-mint-quote{
    background-color: #dcdbd1;
}

/* RESPONSIVE
=====================================*/

@media (min-width: 576px) {
    h1 {
        font-size: 2rem
    }

    h3 {
        font-size: 1.5rem;
    }

    .footer-logo {
        width: 12rem;
    }

    .overlay-bluefade {
        display: block;
    }

    .flickity-prev-next-button {
        top: 100%;
    }

    #home-carousel .carousel-cell {
        width: 40%;
        min-width: 300px;
    }

    .project .section-2-img {
        position: relative;
        z-index: 1;
    }

    .circle-promo {
        width: 150px;
        height: 150px;
    }
}

@media (min-width: 768px) {
    .pos-rel{
        position: relative;
        min-height: 378px;
    }
    .bg-green{
        min-height: 378px;
    }
    .slick-gallery .slick-track {
        display: flex !important;
        gap: 20px;
        /* ruimte tussen slides */
    }

    .custom-slick-nav .custom-arrow {
        margin-left: 15px;
        margin-right: 0;
    }
    .line-second:nth-of-type(2),.line-second:nth-of-type(5){
        border-left: 2px solid #ffffff;
        border-right: 2px solid #ffffff;
    }
}
.bg-mint-praktisch {
    background-color: var(--mint);
}
.bg-mint-new {
    background-color: var(--mint);
}

@media (min-width: 992px) {
    .pos-rel{
        position: relative;
        min-height: 429px;
    }
    .bg-green{
        min-height: 429px;
    }
    h1 {
        font-size: 2.5rem;
    }

    .startside {
        padding: 100px 0 0;
    }

    .endside {
        padding: 0 0 100px;
    }

    .twoside {
        padding: 50px 0;
    }

    .home .section-3-img,
    .project .section-2-img {
        position: absolute;
        z-index: 2;
    }

    .project .section-2-img {
        top: 0;
        right: 13px;
        width: 100%;
    }

    .home .section-2-img {
        position: absolute;
        z-index: 2;
        top: 25%;
        right: -550px;
        width: 125%;
    }

    .home .section-3-img {
        left: 0.75rem;
        top: 10px;
        width: 90%;
    }
    .bg-beige {
        background-color: var(--beige);
        background: -moz-linear-gradient(left, var(--beige)  0%,  var(--beige) 60%, #ffffff 60%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, var(--beige)  0%,  var(--beige) 60%, #ffffff 60%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, var(--beige) 0%,  var(--beige)60%, #ffffff 60%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
    }

    .bg-beige-new {
        background-color: var(--beige);
        background: -moz-linear-gradient(right, var(--beige)  0%,  var(--beige) 60%, #ffffff 60%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(right, var(--beige)  0%,  var(--beige) 60%, #ffffff 60%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to left, var(--beige) 0%,  var(--beige)60%, #ffffff 60%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
    }
    .bg-mint-new {
        background-color: var(--mint);
        background: -moz-linear-gradient(left, var(--mint)  0%,  var(--mint) 60%, #ffffff 60%, #ffffff 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(left, var(--mint)  0%,  var(--mint) 60%, #ffffff 60%, #ffffff 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, var(--mint) 0%,  var(--mint)60%, #ffffff 60%, #ffffff 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
        -webkit-box-shadow: inset 0px -80px 0px 0px rgba(255, 255, 255, 1),
        inset 0px 80px 0px 0px rgba(255, 255, 255, 1);
        -moz-box-shadow:    inset 0px -80px 0px 0px rgba(255, 255, 255, 1),
        inset 0px 80px 0px 0px rgba(255, 255, 255, 1);
        box-shadow:         inset 0px -80px 0px 0px rgba(255, 255, 255, 1),
        inset 0px 80px 0px 0px rgba(255, 255, 255, 1);

    }
    .bg-mint-praktisch{
        background-color: var(--mint);
        -webkit-box-shadow: inset 0px -80px 0px 0px rgba(255, 255, 255, 1);
        -moz-box-shadow: inset 0px 80px 0px 0px rgba(255, 255, 255, 1);
        box-shadow: inset 0px -80px 0px 0px rgba(255, 255, 255, 1);
    }
    .bg-beige-praktisch {
        background-color: var(--beige);
        background: -moz-linear-gradient(right, var(--beige)  0%,  var(--beige) 90%, transparent 90%, transparent 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(right, var(--beige)  0%,  var(--beige) 90%, transparent 90%, transparent 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to left, var(--beige) 0%,  var(--beige) 90%, transparent 90%, transparent 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
    }

    .bg-beige-quote{
        background-color: var(--beige);
        background: -moz-linear-gradient(right, var(--beige)  0%,  var(--beige) 65%, transparent 65%, transparent 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(right, var(--beige)  0%,  var(--beige) 65%, transparent 65%, transparent 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to left, var(--beige) 0%,  var(--beige) 65%, transparent 65%, transparent 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
    }

    .bg-mint-quote{
        background-color: #dcdbd1;
        background: -moz-linear-gradient(right, #dcdbd1  0%,  #dcdbd1 65%, transparent 65%, transparent 100%); /* FF3.6-15 */
        background: -webkit-linear-gradient(right, #dcdbd1  0%,  #dcdbd1 65%, transparent 65%, transparent 100%); /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to left, #dcdbd1 0%,  #dcdbd1 65%, transparent 65%, transparent 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#ffffff', GradientType=0); /* IE6-9 */
    }

}



@media (min-width: 1200px) {
    .pos-rel{
        min-height: 378px;
    }
    .bg-green{
        min-height: 378px;
    }
    .home .section-1.endside {
        padding: 0 0 150px;
    }

    .home .section-2-img {
        top: -75px;
        right: -650px;
    }

    .divider {
        height: 275px;
    }

    .home .section-3-img {
        top: -50px;
    }

}

@media (min-width: 1400px) {
    .home .section-2-img {
        width: 100%;
    }

    .home .section-3-img {
        top: -110px;
    }
}

#wpadminbar a.ab-item:hover{
    color: #f0f0f1 !important;
}