@import url('bootstrap.min.css');
@import url('fontawesome.css');
@import url('https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100..900;1,100..900&display=swap');

.raleway-<uniquifier> {
    font-family: "Raleway", sans-serif;
    font-optical-sizing: auto;
    font-weight: <weight>;
    font-style: normal;
}

body {
    font-family: "Raleway", sans-serif;
    font-size: 16px;
    line-height: 21px;
    font-weight: 300;
    color: #331523;
    background: #d2cac2;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1 { font-weight: 700; font-size: 48px; margin: 0 0 15px; color: #fff; }
h2,
h3 {
    font-weight: 700 !important;
    font-size: 21px !important;
    margin-bottom: 15px !important;
    padding-bottom: 10px;
    border-bottom: 1px solid #c78c3e;
    margin-right: -60px;
}
h4 { font-size: 16px; font-weight: 800; color: #331523; }

p { line-height: 28px; }
a { color: #c78c3e; }
a:hover { text-decoration: none; opacity: 0.8; }

b, strong { font-weight: 700; }

.wrap { margin: 0 auto; overflow: hidden; }
.main { padding: 0 !important; }

.content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    line-height: 28px;
}
.content ul li:before {
    font-family: FontAwesome;
    content: "\f0da";
    margin-right: 15px;
    margin-left: 10px;
    color: #c78c3e;
}

.bg-purple { background: #44182a; color: #fff; }
.bg-beige { background: #d2cac2; color: #331523; }

.slogan {
    text-align: center;
    font-style: italic;
    width: 100%;
    display: inline-block;
    font-weight: 700;
    font-size: 31px;
    margin: 60px 0;
}

.brd-b { border-bottom: 1px solid #c78c3e; }


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

.page-head {
    background-size: cover;
    background-position: center;
    height: 80vh;
    width: 100%;
    background-position: 50% 20%;
}
.page-head-big {
    background-size: cover;
    background-position: center;
    padding-top: 100px; 
    height: calc(100vh - 30px);
    margin: 0 0 90px; 
    position: relative;
}
.page-head-big span {
    color: #1a9ad9;
    display: block;
    margin: 30vh 45px 30px;
    font-size: 30px;
}
.page-head-title { position: absolute; }
.page-head-title h1 { margin-top: 50vh; font-size: 81px; }
.page-head-title::after {
  content: "";
  position: absolute;
  left: calc(-50vw + 50%);
  bottom: -10px;
  height: 1px;          
  width: calc(50vw + 50%);
  background-color: #c78c3e;
}

.btn,
.wp-block-button__link,
.comment-form input[type="submit"],
.frm_style_formidable-stijlen.with_frm_style input[type=submit], .frm_style_formidable-stijlen.with_frm_style .frm_submit input[type=button], .frm_style_formidable-stijlen.with_frm_style .frm_submit button, .frm_form_submit_style,
.search-form .search-submit {
    cursor: pointer;
    padding: 15px 30px;
    font-size: 15px;
    font-weight: 700;
    margin-top: 30px;
    border: 0;
    transition: 0.3s;
    border-radius: 0;
}

.btn-primary,
.gform_button {
    border: 1px solid #c78c3e;
    background: transparent;
    color: #c78c3e !important;
}
.btn-primary:hover { border: 1px solid #c78c3e; background: #c78c3e; color: #331523 !important; }
.btn-primary:after { font-family: FontAwesome; content: "\f054"; margin-left: 25px; }
.btn-check:checked+.btn, .btn.active, .btn.show, .btn:first-child:active, :not(.btn-check)+.btn:active { border: 1px solid #986e37; background: #986e37; color: #331523 !important; }

.btn-default,
.btn-secondary,
.comment-form input[type="submit"],
.search-form .search-submit {
    background: #c78c3e;
    color: #331523 !important;
}

.btn-default:hover { background: #1a3155; color: #fff; }

.comment-list ol { list-style: none; }

.search-form label { font-weight: 400; }
.wpcf7-list-item { display: block !important; }

.main {
    position: relative;
    width: 100%;
    min-height: 1px;
    padding-right: 15px;
    padding-left: 15px;
}
.banner {
    z-index: 10000;
    position: absolute;
    padding: 0 0 0 30px;
    height: 100px;
    width: 100%;
    top: 0;
    background: #331523;
    border-bottom: 1px solid #c78c3e;
}
.navbar-brand { width: 230px; margin-top: 0px; position: absolute; }
.navbar .fa-home { color: #1a9ad9; }
.navbar li { margin: 0 20px; position: relative; padding: 13px 0 24px; }
.navbar li.active a { color: #c78c3e; }
.navbar a {
    display: inline-block;
    color: #fff !important;
    font-weight: 400;
    font-weight: 700;
    margin-bottom: 28px;
}
.navbar a:hover { color: #c78c3e !important; }
.navbar .dropdown-item:hover { background: none; }
.navbar .dropdown-toggle:after { display: none; }
.navbar .dropdown-toggle:hover .show > .dropdown-menu { display: block !important; }
.navbar .dropdown-menu {
    background: #c78c3e;
    border: 0;
    padding: 0;
    margin: 0 0 0 -19px;
    position: absolute;
    border-radius: 0;
}
.navbar .dropdown-menu li { width: 100%; padding: 14px 40px 0 0; }
.navbar .dropdown-menu li:last-child a { border: 0; }
.navbar .dropdown-menu a {
    border-bottom: 1px solid #a77027;
    width: 100%;
    display: block;
    padding: 0 0 15px;
    margin: 0 15px 0 0;
}
.navbar .dropdown-menu a:hover { color: #44172a !important; }
.dropdown:hover > .dropdown-menu { display: block; }

.block-purple {
    background: #44182a;
    display: inline-block;
    color: #fff;
    width: 45vw;
    left: 0;
    bottom: -60px;
    position: absolute;
    padding: 60px 60px 60px 0;
    margin: 60px 30px 0 30px;
    opacity: .96;
}
.block-purple h1 { border-bottom: 1px solid #c78c3e; padding: 0 0 30px 60px; }
.block-purple .btn, .block-purple p { margin-left: 60px; }

.footer-image {
    background: url(../images/footer-1.jpg);
    height: 600px;
    width: 100%;
    background-size: cover;
}

.footer-image-2 {
    background: url(../images/footer-3.jpg);
    height: 600px;
    width: 100%;
    background-size: cover;
    background-position: center;
}

.footer-text .footer-image { background: url(../images/footer-2.jpg); background-size: cover; }
.footer-contact, .footer-text { padding: 20px 40px; }


/* Formulier */

.frm_fields_container { background: #b8afa6; padding: 60px 60px 30px; }

.with_frm_style input[type=text], .with_frm_style input[type=password], .with_frm_style input[type=email], .with_frm_style input[type=number], .with_frm_style input[type=url], .with_frm_style input[type=tel], .with_frm_style input[type=phone], .with_frm_style input[type=search], .with_frm_style select, .with_frm_style textarea, .frm_form_fields_style, .with_frm_style .frm_scroll_box .frm_opt_container, .frm_form_fields_active_style, .frm_form_fields_error_style, .with_frm_style .frm-card-element.StripeElement {
    border-radius: 0;
    border: 0;
}

.frm_button_submit {
    margin: 0 !important;
    background: #c78c3e !important;
    box-shadow: none !important;
    color: #44182a !important;
}


/* Appartement */

.app-text { padding: 20px 40px; }
.app-desc { color: #747476; border-bottom: 1px solid #c78c3e; position: relative; margin-bottom: 16px; }
.app-desc h4 { font-size: 31px; color: #747476; }
.app-desc img { width: 100%; margin: 0 15px -45px 0; }
.app-desc .span-title { display: block; font-size: 12px; }

.app-over { padding: 30px 30px 10px; border: 1px solid #c78c3e; margin-bottom: 15px; }
.app-over h4 a { color: #331523; text-decoration: none; }

.box {
    flex: 1;                    /* gelijke breedte */
    display: flex;              /* flexbox in de box zelf */
    justify-content: center;    /* horizontaal centreren */
    flex-direction: column;
    padding: 60px;
}

.image-box { position: relative; display: inline-block; margin: 80px 20px; }

.corner {
    position: absolute;
    width: 20px;
    height: 20px;
    border-top: 1px solid #c78c3e;
    border-left: 1px solid #c78c3e;
    pointer-events: none;
}

/* linksboven */
.tl { top: -20px; left: -20px; transform: rotate(180deg); }

/* rechtsboven */
.tr {
    top: -20px;
    right: 0;
    transform: rotate(-90deg);
    transform-origin: top right;
}

/* rechtsonder */
.br {
    bottom: -20px;
    right: -20px;
    transform: rotate(0);
    transform-origin: bottom right;
}

/* linksonder */
.bl {
    bottom: 0;
    left: -20px;
    transform: rotate(-270deg);
    transform-origin: bottom left;
}

.pr-120 { padding-right: 120px; margin-right: -30px; }
.pl-120 { padding-left: 120px; margin-left: -60px; }
.ml--60 { margin-left: -50px; }
.mr--60 { margin-right: -60px; }


footer {
    padding: 60px 0;
    background: #d2cac2;
    color: #44182a;
    margin-top: 120px;
    border-top: 1px solid #c78c3e;
}
footer ul { margin: 0; padding: 0; list-style: none; }
footer ul li { margin: 0; }
footer .col-sm-6:last-child { -ms-flex: 0 0 25%; flex: 0 0 25%; max-width: 25%; }
footer a { color: #44182a; text-decoration: none; }
footer h2 { font-size: 16px !important; border: 0; display: inline-block; padding: 0; margin: 0 !important; }
footer .btn-menu { display: none; }
footer .logo { float: left; }
footer .logo img { width: 180px; }
footer .copyright {
    font-size: 12px;
    margin-top: 30px;
    display: block;
    padding-top: 15px;
    clear: both;
}
footer .sub-menu { display: none;s }

.wp-block-media-text .wp-block-media-text__content { padding: 0 60px 0 0; }
.wp-block-media-text__media img,
.wp-block-media-text__media video {
    height: 100%;
}

@media (min-width: 1200px) {
    .container { width: 1140px; max-width: 100%; }
}

@media screen and (min-width: 1020px) {
    .navbar-toggler { display: none; }
    .navbar-nav { display: block; float: right; margin-right: 15px; }
    .navbar-nav li { display: inline-block; }
    .collapse { display: block !important; margin-top: 13px; }
}

@media screen and (max-width: 720px) {
    h1, .page-head-title h1 { font-size: 30px; }
    p { font-size: 15px; }
    h2,
    h3 {
        font-size: 20px;
        margin-bottom: 0;
        display: inline-block;
        width: 100%;
    }
    .px-5 { padding: 0 15px !important; }
    .row { margin: 0; }
    .page-head-big { padding-top: 0; }
    .page-head-big span { margin: 30vh 0 0 !important; font-size: 20px; }
    .page-head-big h1 {
        padding: 15px 0;
        font-size: 31px;
    }
    .navbar a:hover { color: #331523 !important; }
    .block-purple .btn, .block-purple p { margin: 0; }
    .footer-contact, .footer-text { padding: 20px; }

    .banner { height: 60px; position: fixed; }
    .banner .navbar-brand {
        height: 30px;
        margin-top: 30px;
        position: fixed;

    }
    .banner .navbar-brand img { height: 30px; margin-top: 5px;}
    .banner .navbar-toggler {
        top: 10px;
        right: 15px;
        font-size: 30px;
        position: fixed;
        color: #fff;
        border: 0;
    }
    .banner .navbar-collapse {
        background: #c78c3e !important;
        border: 0;
        padding: 15px;
        top: 60px;
        position: absolute;
        width: 93%;
        z-index: 9999;
        overflow-y: auto;
    }
    .dropdown-menu { display: none !important; }

    .footer-image { height: 300px; margin: 30px 0 !important; }

    .navbar li, .navbar a { padding: 10px 0 !important; margin: 0; }
    
    .btn { padding: 15px; margin-top: 15px !important; }

    .banner .navbar-collapse a:after { display: none; }
    .banner .navbar-collapse .btn-menu { margin-top: 15px; margin-left: 0; padding-left: 0; }
    .banner .navbar-collapse .btn-menu .nav-link { text-align: center; }
    .banner .collapsing { transition: height 0s ease; }
    .nav-sidebar { margin: 0; }
    .wrap { margin-top: 0 !important; }
    .navbar { padding: 0; }
    .block,
    .block-blue .block,
    .page-template-temp-contact .block-top .col-sm-6 {
        padding: 15px !important;
    }
    .block-top .block-width { padding: 15px 0 !important; }
    .block-top { margin: 0 !important; }
    .block-top .container,
    .col-pad,
    .home .block .container {
        padding: 0 !important;
    }

    .block-purple { margin: 30px; padding: 30px; width: 85vw; bottom: -10vh; }

    footer { margin: 0; padding: 30px 0; }
    footer .logo img { margin-bottom: 30px !important; }
    footer ul { margin: 15px auto; }

    .pl-120, .pr-120 { margin: 0; padding: 30px; }
    .app-text { padding: 0; }
    .image-box { margin: 0; }
}

.block { padding: 60px 0; overflow: hidden; }


/* Polygon */

:root{
  --hotspot-fill: rgba(0, 160, 255, 0.18);
  --hotspot-fill-green: rgba(57, 130, 60, 0.38);
  --hotspot-stroke: rgba(255, 255, 255, 0.75);
  --hotspot-fill-active: rgba(199, 140, 62, 0.58);
  --hotspot-stroke-active: rgba(199, 140, 62, 0.95);
}
@media (max-width: 900px){
  .wrap { grid-template-columns: 1fr; }
  .panel { order: 2; }
}

.stage{
    position: relative;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    background: #000;
}
.stage img {
    display: block;
    width: 100%;
    height: auto;
    user-select: none;
    -webkit-user-drag: none;
}
.overlay {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none; /* hotspots zetten dit weer aan */
}

.hotspot-group {
    pointer-events: auto;
    cursor: pointer;
    fill: var(--hotspot-fill);
    vector-effect: non-scaling-stroke;
    transition: fill .15s ease, stroke .15s ease, filter .15s ease;
    outline: none;
}
.hotspot-group.is-active { fill: var(--hotspot-fill-active); stroke: var(--hotspot-stroke-active); filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }

.hotspot, .hotspot-edge {
    pointer-events: auto;
    cursor: pointer;
    fill: var(--hotspot-fill);
    stroke: var(--hotspot-stroke);
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    transition: fill .15s ease, stroke .15s ease, filter .15s ease;
    outline: none;
}
.hotspot:hover, .hotspot-group:hover { fill: var(--hotspot-fill-green); transition: 0.3s;}
.hotspot.is-active { fill: var(--hotspot-fill-active); filter: drop-shadow(0 6px 12px rgba(0,0,0,.25)); }
.hotspot:focus{ stroke-width: 2; }

.panel-over { position: relative; margin: 50px 20px; }

.panel { padding: 30px; background: #44172a; }
.panel h2 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.panel p { margin: 8px 0; line-height: 1.4; color: #fff; }
.badge {
    display: inline-block;
    font-size: 12px;
    padding: 3px 8px;
    border-radius: 999px;
    background: #f3f4f6;
    color: #111827;
    margin-bottom: 10px;
}
.hint{ font-size: 12px; color:#6b7280; margin-top: 10px; }
/* Sectiekoppen en toelichting in formulieren leesbaar houden */
.frm_fields_container h3,
.frm_fields_container h4 { color: #331523; }
.frm_fields_container .frm_html_container p,
.frm_fields_container .frm_description { color: #331523; }

/* Navigatie-widget: lege blok-kolommen laten vallen zodat het menu niet per letter afbreekt */
footer .col-lg-2 .wp-block-columns { display: block; }
footer .col-lg-2 .wp-block-column:empty { display: none; }
footer .col-lg-2 a { white-space: nowrap; }

/* Gele knop (inschrijfformulier) */

.btn-yellow {
    background: #c78c3e;
    border: 1px solid #c78c3e;
    color: #331523 !important;
}
.btn-yellow:hover { background: #a77027; border-color: #a77027; color: #fff !important; }
.btn-yellow:after { font-family: FontAwesome; content: "\f054"; margin-left: 25px; }

/* Beide footerknoppen even breed */
.footer-contact .box .btn { margin-left: 0; margin-right: 0; }

/* Visuele effecten */

@media (prefers-reduced-motion: no-preference) {
    .reveal {
        opacity: 0;
        transform: translateY(30px);
        transition: opacity .7s ease, transform .7s ease;
    }
    .reveal.is-visible { opacity: 1; transform: none; }

    .btn-primary:after, .btn-yellow:after { display: inline-block; transition: transform .3s ease; }
    .btn-primary:hover:after, .btn-yellow:hover:after { transform: translateX(8px); }

    .image-box { transition: transform .5s ease; }
    .image-box:hover { transform: translateY(-6px); }
    .corner { transition: width .4s ease, height .4s ease; }
    .image-box:hover .corner { width: 35px; height: 35px; }

    .block-purple { animation: pantheon-hero .9s ease .15s backwards; }
    @keyframes pantheon-hero {
        from { opacity: 0; transform: translateY(40px); }
        to   { opacity: 1; transform: none; }
    }
}