/* 
###############
INTERACTIVE IMAGE
##############
*/


.interactive-holder {
    position: relative;
    box-sizing: border-box;
    margin-top: 30px;
    z-index: 1;
}
.interactive-holder .textblock-interactive-image {
    position: absolute;
    right: 0%;
    top:  -30px;
    background: var(--blauw);
    color: var(--wit);
    width: 40%;
    padding:  50px;
    padding-top: 60px;
    padding-bottom: 60px;
    z-index: 5;
    box-sizing: border-box;

    clip-path: polygon(0 0, 100% 0, 100% 95%, 0% 100%);
}

/*.interactive-holder .textblock-interactive-image:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid #e8e1d9;
    position: absolute;
    left: 50%;
    bottom: -29px;
    margin-left: -30px;
}*/
/* verbergen bij bezoekersinfo */

body.page-id-92 .interactive-holder .textblock-interactive-image {
    display: none;
}
@media (max-width:1000px) {
    body.page-id-92 .interactive-holder {
        /* margin-top: -160px; */
        margin-bottom: 80px;
    }
}
.interactive-image{
    position: relative;
    margin-bottom: -190px;
    margin-top: -120px;
    /* background: #524b40; */
    
}
.interactive-image .marker{
    position: absolute;
    color: #fff;
    fill: #fff;
}
/* buitenplaats */
.interactive-image .marker.marker-1{
    left: 15%;
    top: 45%;
}
/* industriële hallen */
.interactive-image .marker.marker-2{
    left: 43%;
    top: 36%;
}
/* daktuin */
.interactive-image .marker.marker-3{
    left: 53%;
    bottom: 49%;
}
/* ???? */
.interactive-image .marker.marker-4{
    left: 51%;
    bottom: 41%;
}
/* ???? */
.interactive-image .marker.marker-5{
    right: 39%;
    top: 54%;
}
/* Dakterras */
.interactive-image .marker.marker-6{
    left: 64%;
    bottom: 47%;
}
/* Pannorama ruimte */
.interactive-image .marker.marker-7{
    right: 30%;
    top: 54%;
}
/* ???? */
.interactive-image .marker.marker-8{
    left: 70%;
    bottom: 38%;
}
/* Kwekerij */
.interactive-image .marker.marker-9{
    left: 92%;
    bottom: 15%;
}
.interactive-image .marker .icon {
    /* width: 50px;
    height: 50px;
    filter: drop-shadow(2px 2px 3px rgba(0,0,0,.6)); */
    display: block;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--wit);
    position: relative;
    transition: transform 200ms ease-in-out;
    z-index: 8;
}
.interactive-image .marker .icon:hover{
    transform: scale(1.3);
}
.interactive-image .marker .icon:after {
    content: "";
    width: 10px;
    height: 10px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -5px;
    margin-top: -5px;
    background: var(--groen);
}
.interactive-image .marker .icon-data{
    position: absolute;
    top: 0;
    left: 50%;
    z-index: 1;
    /*background: var(--light);*/
    background: var(--groen);
    color: var(--wit);
    padding: 15px 30px;
    width: max-content;
    transform: translateX(-50%) translateY(-125%);
    display: none;
    opacity: 0;
    transition: all 200ms ease-in-out;
    z-index: 9;
}
.interactive-image .marker .icon-data:after {
    content: "";
    width: 0; 
    height: 0; 
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-top: 10px solid var(--groen);
    position: absolute;
    left: 50%;
    bottom: -9px;
    margin-left: -10px;
}
.interactive-image .marker .icon-data .name{
    font-size: 1.3em;
    font-family: var(--font-title);
    line-height: 1.2;
    /* color: var(--dark); */
    margin-bottom: 5px;
}
.interactive-image .marker .icon-data .spec{
    font-weight: 600;
    font-size: 1.1em;
    margin-top: -10px;
    margin-bottom: 0px;
    /* color: var(--dark); */
}
.interactive-image img {
    width: 100%;
    display: block;
}


@media (max-width:1400px) {

    .interactive-holder .textblock-interactive-image { 
        font-size: .8em;
        padding:  30px;
        padding-top: 30px;
        width: 80%;
        top:  -50px;
    }

}


@media (max-width:1000px) {

    .interactive-image {
        margin-top: -40px;
        margin-bottom: -70px;
    }
    .interactive-image .marker .icon{
        width: 10px;
        height:10px;
    }
    .interactive-image .marker .icon:after {
        width: 4px;
        height: 4px;
        border-radius: 4px;
        margin-left: -2px;
        margin-top: -2px;        
    }
/*    .interactive-image .marker .icon-data .name{
        font-size: 1.5em;
    }
    .interactive-image .marker .icon-data .spec{
        font-size: 1em;
    }*/
    .interactive-holder .textblock-interactive-image { 
        position: relative;
        top:  auto;
        right:  auto;
        width: 100%;
        box-sizing: border-box;
        padding: 0;
        padding-bottom: 40px;
        font-size: 1em;
        margin-top: -20px;
        clip-path: none;
    }

    /* Kunnen we, voor betere usability, op mobiel een meer ingezoomde variant gebruiken met minder ruimte (en wellicht kwekerij & buitenruimte weglaten) */
    
    .interactive-holder {
        /*border:  1px solid #00f;*/
        overflow: hidden;
        width: 110%;
        margin-left: -5%;
        margin-bottom: -2%;
        margin-top: -5px;
    }
    .page-id-5 .interactive-holder {
        margin-bottom: -130px;
    }
    .interactive-holder .textblock-interactive-image {
        margin-top: 0;
        padding-left: 10px;
        padding-right: 10px;
    }
    .interactive-holder .textblock-interactive-image h2 {
        margin-top: 0;
    }
    .interactive-image {
        transform: scale(1.8) translateY(-1%) translateX(-5%); /* control the zooms */
        margin-top: 0;
        margin-bottom: 0;
    }
    .marker-9, .marker-1 {
        display: none;
    }
    .interactive-image .marker .icon-data {
        font-size: .3em;
        padding:3px 3px;
        padding-bottom: 4px;
        line-height: 1;
    }
    .interactive-image .marker .icon-data .spec {
        margin-top: -4px;
    }
    .interactive-image .marker .icon-data:after {
        content: "";
        width: 0; 
        height: 0; 
        border-left: 5px solid transparent;
        border-right: 5px solid transparent;
        border-top: 5px solid #fff;
        position: absolute;
        left: 50%;
        bottom: -4px;
        margin-left: -5px;
    }

    .mobile-displace {
        overflow: hidden;
    }

   
}
@media (max-width:900px) {
    .page-id-5 .interactive-holder {
        margin-bottom: -70px;
    }
}

@media (max-width:750px) {
    .interactive-image .marker.marker-9 .icon-data{
        transform: translateX(-75%) translateY(-115%);
    }
}
@media (max-width:500px) {
    .interactive-image .marker.marker-1 .icon-data{
        transform: translateX(-25%) translateY(-115%);
    }
}