/* *********************************************************
**
**
** PROJECT BRANDING STYLE
**
**
********************************************************* */

#overflower{
    overflow-x: hidden;
}

.frontpic-wrapper{
    margin-left: auto;
    margin-right:auto;
    width:100%;
    max-width:1920px;
    position:relative;
    /*border: #cc0000 1px solid;*/
}

.frontpic-wrapper img{
    z-index: 1;
}

.branding-mousedown{
    position:absolute;
    left: 50%;
    transform: translate(-50%);
    bottom: 20px;
    z-index: 2;
}

.branding-mousedown > img{
    max-height:30px;
}

.brandingtitle{
    font-family:Mukta,Arial,Verdana;
    font-weight:bold;
    color: #433f3c;
}

.whitebg{
    background-color: white;
    position:relative;
    width:100%;
    max-width:1920px;
    margin-left:auto;
    margin-right:auto;
}

p{
    line-height:36px;
    color: #433f3c;
}




#ligging > div > img{
    max-height:600px;
}





#ligging-wrapper, #exterior-wrapper, #interior-wrapper, #waarde-wrapper{
    background-color: #FFFFFF;
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}
#ligging, #exterior, #interior, #waarde{
    position:relative;
    width:100%;
}
#ligging > div.txtwrapper{
    grid-area: ala-txt;
}
#ligging > div.imgwrapper{
    grid-area: ala-img;
    padding: 0px;
}
#exterior > div.txtwrapper{
    grid-area: ext-txt;
}
#exterior > div.imgwrapper{
    grid-area: ext-img;
    padding: 0px;
}
/*
#interior > div.txtwrapper{
    grid-area: int-txt;
}
#interior > div.imgwrapper{
    grid-area: int-img;
    padding: 0px;
}
*/

#contactus{
    position:relative;
    width:100%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}


#fontanavr{
    background-color: #314b74;
}

#fontanavr > div{
    position:relative;
    width:100%;
    max-width:900px;
    margin-left:auto;
    margin-right:auto;
}

#fontanavr > div > a{
    color: white;
    display: block;
    padding: 30px;
    border: #FFFFFF 1px solid;
    text-align: center;
    font-size: 24px;
}

#fontanavr > div > a:hover{
    color: yellow;
    border: yellow 1px solid;
}




@media only screen {
    .valigncenterwrapper{
        display: block;
    }
    
    .valigncenter{
        display: block;
    }
    #ligging{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "ala-img"
        "ala-txt";
    }
    #exterior{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "ext-img"
        "ext-txt";
    }
    /*#interior{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "int-img"
        "int-txt";
    }*/
    .interior-images{
        padding: 15px;
    }
    #ligging > div.txtwrapper, #exterior > div.txtwrapper, #interior > div.txtwrapper, .waardetext{
        padding: 15px 20px 15px 20px;
    }
    .branding-mousedown{
        display: none;
    }
    #contactus > div{
        padding: 15px 20px 15px 20px;
    }
    #fontanavr > div{
        padding: 20px;
    }
}

@media only screen and (min-width: 40em) {
    .valigncenterwrapper{
        display: table;
    }
    
    .valigncenter{
        display: table-cell;
        vertical-align: middle;
    }
    #ligging{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 
        "ala-txt ala-img";
    }
    #exterior{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "ext-img"
        "ext-txt";
    }
    .interior-images{
        padding: 20px;
    }
    /*#interior{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 
        "int-txt int-img";
    }*/
    #ligging > div.txtwrapper, #exterior > div.txtwrapper, #interior > div.txtwrapper, .waardetext{
        padding: 20px 30px 20px 30px;
    }
    .branding-mousedown{
        display: block;
    }
    #contactus > div{
        padding: 20px 30px 20px 30px;
    }
    #fontanavr > div{
        padding: 45px;
    }
}

@media only screen and (min-width: 64em) {
    .valigncenterwrapper{
        display: table;
    }
    
    .valigncenter{
        display: table-cell;
        vertical-align: middle;
    }
    #ligging{
        display: grid;
        grid-template-columns: 60% 40%;
        grid-template-areas: 
        "ala-txt ala-img";
    }
    #exterior{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "ext-img"
        "ext-txt";
    }
    /*#interior{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 
        "int-txt int-img";
    }*/
    .interior-images{
        padding: 25px;
    }
    #ligging > div.txtwrapper, #exterior > div.txtwrapper, #interior > div.txtwrapper, .waardetext{
        padding: 30px 45px 30px 45px;
    }
    .branding-mousedown{
        display: block;
    }
    #contactus > div{
        padding: 20px 30px 20px 30px;
    }
    #fontanavr > div{
        padding: 60px;
    }
}

@media only screen and (min-width: 90em) {
    .valigncenterwrapper{
        display: table;
    }
    
    .valigncenter{
        display: table-cell;
        vertical-align: middle;
    }
    #ligging{
        display: grid;
        grid-template-columns: 55% 45%;
        grid-template-areas: 
        "ala-txt ala-img";
    }
    #exterior{
        display: grid;
        grid-template-columns: 100%;
        grid-template-areas: 
        "ext-img"
        "ext-txt";
    }
    /*#interior{
        display: grid;
        grid-template-columns: 50% 50%;
        grid-template-areas: 
        "int-txt int-img";
    }*/
    .interior-images{
        padding: 30px;
    }
    #ligging > div.txtwrapper, #exterior > div.txtwrapper, #interior > div.txtwrapper, .waardetext{
        padding: 60px 90px 60px 90px;
    }
    .branding-mousedown{
        display: block;
    }
    #contactus > div{
        padding: 20px 30px 20px 30px;
    }
    #fontanavr > div{
        padding: 90px;
    }
}


/* *********************************************************
**
**
** BRANDING SLICED
**
**
********************************************************* */

#branding-wrapper{
    position:relative;
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
    background-color: #FFFFFF;
}

#branding-text{
    position: relative;
}

#branding-image{ position:relative; }

.branding-overlay{ position: absolute; z-index:9999; }
.slice-sold-label{ background-color:red; color:white; padding:2px; font-size:13px; }
.has-tip { display: inline-block; border: 0px; font-weight: bold; cursor: pointer; }

@media only screen {
    .plus-sign{ height:20px; width:20px; }
    #branding-text{padding: 15px 20px 15px 20px;}
}
@media only screen and (min-width: 40em) {
    .plus-sign{ height:30px; width:30px; }
    #branding-text{padding: 20px 30px 20px 30px;}
}
@media only screen and (min-width: 64em) {
    .plus-sign{ height:40px; width:40px; }
    #branding-text{padding: 30px 45px 30px 45px;}
}
@media only screen and (min-width: 90em) {
    .plus-sign{ height:40px; width:40px; }
    #branding-text{padding: 60px 90px 60px 90px;}
}


#branding-6204{ top:82%; left:50%; }
#branding-6205{ top:72%; left:50%; }
#branding-6206{ top:60%; left:50%; }
#branding-6207{ top:49%; left:50%; }
#branding-6208{ top:37%; left:50%; }
#branding-6209{ top:27%; left:50%; }
#branding-6210{ top:17%; left:50%; }
#branding-6211{ top:9%; left:50%; }



.virtual-wrapper{
    position:relative;
    width:100%;
    max-width:1280px;
    margin-left:auto;
    margin-right:auto;
}


@media only screen {
	.virtual-wrapper{
        height: 480px;
    }
}
@media only screen and (min-width: 40em) {
	.virtual-wrapper{
        height: 600px;
    }
}
@media only screen and (min-width: 64em) {
	.virtual-wrapper{
        height: 800px;
    }
}