/* *********************************************************
**
**
** VARS
**
**
********************************************************* */

:root{
    --base-color: #1aa5f0;
    --base-color-dark: #2f7ea9;
    --accent-color: #eeffa1;
    --base-font-family: "Lato", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --robot-font-family: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --front-font-family: "Mukta", "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --menu-font-family: "Mukta", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --prompt-font-family: "Prompt", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --anton-font-family: "Anton", "Helvetica Neue", Helvetica, Arial, sans-serif;
    --oswald-font-family: "Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
}


/**************************************************************************************
**
** common
**
***************************************************************************************/

html, body{
	height: 100%;
}
body{
    background-color: #F2F2F6;
}

.pagewrapper{
    /*overflow-x: hidden;*/
    font-family: var(--base-font-family);
}

h1{
    color: var(--base-color-dark);
}

.sticky-wrapper{
    height:100%;
}
.stickydiv{
    position: -webkit-sticky;
    position: sticky;
    top: 0;
}

.align-right{
    text-align: right;
}

.center{
    text-align: center;
}

@media only screen {
    .centeronsmall{text-align: center;}
}

@media only screen and (min-width: 40em) {
    .centeronsmall{text-align: left;}
}

@media only screen and (min-width: 64em) {
    .centeronsmall{text-align: left;}
}

@media only screen and (min-width: 90em) {
    .centeronsmall{text-align: left;}
}


/**************************************************************************************
**
** HEADER & MENU
**
***************************************************************************************/



header{
    position: fixed;
    display: flex;
    z-index: 99;
    top: 0px;
    right: 0px;
    width: 100%;
    background-color: var(--base-color);
}

.smartmenu{
    position: fixed;
    background-color: var(--base-color);
    top:0px;
    left: 0px;
    width: 100%;
    height: 0vh;
    z-index: 990;
    transition: all 0.4s ease;
    margin:0;
}

.smartgrid{
    display:grid;
}

.logo{
    border: red 0px solid;
    float: left;
}

.logo > img{
    width: auto;
}



.topmenu{
    float: left;
    border: yellow 0px solid;
    flex-grow: 1;
    display: cell;
    vertical-align: middle;
    width: 100%;
}



.extra{
    grid-area: extra;
    z-index: 991;
    margin: 0;
}



.topmenu .toggler {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 992;
    cursor: pointer;
    opacity: 0;
    margin:0;
    padding: 0;
}

.topmenu .hamburger{
    position: absolute;
    top: 0px;
    right: 10px;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
    z-index: 991;
}

.topmenu .phone{
    position: absolute;
    top: 0px;
    right: 60px;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.topmenu .mail{
    position: absolute;
    top: 0px;
    right: 90px;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.topmenu .hamburger > div {
    position: absolute;
    top:30px;
    flex: none;
    width: 100%;
    height: 2px;
    background: #FFF;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.4s ease;
}

.topmenu .hamburger > div::before,
.topmenu .hamburger > div::after {
    content: '';
    position: absolute;
    z-index: 1;
    top: -10px;
    width: 100%;
    height: 2px;
    background: inherit;
}

.topmenu .hamburger > div::after {
    top: 10px;
}

.topmenu .toggler:checked ~ .smartmenu {
    height: 100vh;
}

.topmenu .toggler:checked ~ .smartmenu .smartgrid .topnav {
    position: relative;
    top:0px;
    margin-top: 60px;
    margin-bottom: 30px;
}

.topmenu .toggler:checked ~ .smartmenu .smartgrid .extra {
    position: relative;
    top:0px;
}

.topmenu .toggler:hover + .hamburger > div {
    background-color: var(--accent-color);
}


/* toggle Animation */
.topmenu .toggler:checked + .hamburger > div {
    transform: rotate(135deg);
}

  /* Turns Lines Into X */
.topmenu .toggler:checked + .hamburger > div:before,
.topmenu .toggler:checked + .hamburger > div:after {
    top: 0;
    transform: rotate(90deg);
}

/* Rotate On Hover When Checked */
.menu .toggler:checked:hover + .hamburger > div {
    transform: rotate(225deg);
}




.topmenu .phone > div {
    position: absolute;
    top:0px;
    width: 100%;
    height: 100%;
    background-image: url(../gfx/icon-phone.svg);
    background-repeat: no-repeat;
    background-position: center center;
}



nav.topnav{
    z-index: 991;
    grid-area: topnav;
}
nav.topnav > a{ color: white; text-decoration: none; font-family: var(--menu-font-family); font-weight: 900; transition: all 0.4s ease; }
nav.topnav > a:hover{ text-decoration: none; transform: scale(1.1); }
.extra > a{ color: white; text-decoration: none; font-family: var(--menu-font-family); font-weight: bold; transition: all 0.4s ease; }
.extra > a:hover{ color: var(--accent-color); text-decoration: none; }
a.languagebtn{ font-weight: bolder; }







@media only screen {
    header{
        height: 60px;
    }
    .header{
        padding: 0px 10px 0px 10px;
    }
    .headerspacer{
        height: 60px;
    }
    .homeclick{
        position: absolute;
        display: block;
        top: 0px;
        left: 10px;
        width: 170px;
        height: 60px;
        border: orange 0px solid;
        z-index: 989;
    }
    .logo{
        height: 60px;
        line-height: 60px;
    }
    .logo > img{
        height: 80%;
    }
    .topmenu{
        height: 60px;
        text-align: center;
    }
    .topmenu .hamburger{
        height: 60px;
        width: 30px;
        display: block;
    }
    .topmenu .toggler{
        height: 60px;
        width: 60px;
        display: block;
    }
    .topmenu .phone{
        height: 60px;
        width: 30px;
        display: block;
    }
    .topmenu .mail{
        height: 60px;
        width: 30px;
        display: block;
    }
    .smartgrid{
        grid-template-areas: 
        "topnav"
        "extra";
    }
    .extra{
        position: absolute;
        top:-9999px;
        width: 100%;
    }
    .extra > a{
        display: block;
        font-size: 20px;
        line-height: 42px;
    }
    
    nav.topnav{
        position: absolute;
        top:-9999px;
        width: 100%;
    }
    nav.topnav > a{
        display: block;
        font-size: 32px;
    }
}
@media only screen and (min-width: 54em) {
    header{
        height: 90px;
    }
    .header{
        padding: 0px 0px 0px 30px;
    }
    .headerspacer{
        height: 90px;
    }
    .homeclick{
        position: absolute;
        display: block;
        top: 0px;
        left: 30px;
        width: 230px;
        height: 90px;
        border: orange 0px solid;
        z-index: 99999;
    }
    .logo{
        height: 90px;
        line-height: 90px;
    }
    .logo > img{
        height: 70%;
    }
    .topmenu{
        height: 90px;
        text-align: right;
    }
    .topmenu .hamburger, .topmenu .phone, .topmenu .mail, .topmenu .toggler{
        display: none;
    }
    .smartgrid{
        grid-template-areas: 
        "extra"
        "topnav";
    }
    .extra{
        position: relative;
        top:0;
        width: 100%;
        padding: 8px 0px 0px 0px;
    }
    .extra > a{
        display: inline-block;
        font-size: 15px;
    }
    .extra > a:not(:last-child){
        margin-right: 10px;
    }
    .extra > a:last-child{
        margin-right: 30px;
    }
    nav.topnav{
        position: relative;
        top:0;
        width: 100%;
    }
    nav.topnav > a{
        display: inline-block;
        font-size: 18px;
    }
    nav.topnav > a:not(:last-child){
        margin-right: 10px;
    }
    nav.topnav > a:last-child{
        margin-right: 30px;
    }
}
@media only screen and (min-width: 64em) {
    header{
        height: 120px;
    }
    .header{
        padding: 0px 0px 0px 60px;
    }
    .headerspacer{
        height: 120px;
    }
    .homeclick{
        position: absolute;
        display: block;
        top: 0px;
        left: 60px;
        width: 260px;
        height: 120px;
        border: orange 0px solid;
        z-index: 99999;
    }
    .logo{
        height: 120px;
        line-height: 120px;
    }
    .logo > img{
        height: 60%;
    }
    .topmenu{
        height: 120px;
        text-align: right;
    }
    .topmenu .hamburger, .topmenu .phone, .topmenu .mail, .topmenu .toggler{
        display: none;
    }
    .smartgrid{
        grid-template-areas: 
        "extra"
        "topnav";
    }
    .extra{
        position: relative;
        top:0;
        width: 100%;
        padding: 20px 0px 0px 0px;
    }
    .extra > a{
        display: inline-block;
        font-size: 16px;
    }
    .extra > a:not(:last-child){
        margin-right: 20px;
    }
    .extra > a:last-child{
        margin-right: 60px;
    }
    nav.topnav{
        position: relative;
        top:0;
        width: 100%;
    }
    
    nav.topnav > a{
        display: inline-block;
        font-size: 22px;
    }
    nav.topnav > a:not(:last-child){
        margin-right: 20px;
    }
    nav.topnav > a:last-child{
        margin-right: 60px;
    }
}
@media only screen and (min-width: 90em) {
    header{
        height: 150px;
    }
    .header{
        padding: 0px 0px 0px 90px;
    }
    .headerspacer{
        height: 150px;
    }
    .homeclick{
        position: absolute;
        display: block;
        top: 0px;
        left: 90px;
        width: 300px;
        height: 150px;
        border: orange 0px solid;
        z-index: 99999;
    }
    .logo{
        height: 150px;
        line-height: 150px;
    }
    .logo > img{
        height: 55%;
    }
    .topmenu{
        height: 150px;
        text-align: right;
    }
    .topmenu .hamburger, .topmenu .phone, .topmenu .mail, .topmenu .toggler{
        display: none;
    }
    .smartgrid{
        grid-template-areas: 
        "extra"
        "topnav";
    }
    .extra{
        position: relative;
        top:0;
        width: 100%;
        padding: 32px 0px 0px 0px;
    }
    .extra > a{
        display: inline-block;
        font-size: 19px;
    }
    .extra > a:not(:last-child){
        margin-right: 40px;
    }
    .extra > a:last-child{
        margin-right: 90px;
    }
    
    nav.topnav{
        position: relative;
        top:0;
    }
    nav.topnav > a{
        display: inline-block;
        font-size: 24px;
    }
    nav.topnav > a:not(:last-child){
        margin-right: 40px;
    }
    nav.topnav > a:last-child{
        margin-right: 90px;
    }
}







/**************************************************************************************
**
** HOMEVISUAL
**
***************************************************************************************/

.frontshow-wrapper{
    position: relative;
    overflow:hidden;
    object-fit: cover;
    width: 100%;
    height: 100vh;
}

.frontshow{
    left: 50%;
    position: absolute;
    top: 50%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
    height: 100%;
    z-index: 10;
}

.frontshow-content-wrapper{
    position: absolute;
    z-index: 40;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    max-width: 105rem;
    margin: auto;
    width: 66%;
    height: 30%;
    text-align: center;
}

.bgvideotitle{
    color: #FFFFFF;
    font-family: var(--featured-font-family);
}

.bgvideotext{
    color: #FFFFFF;
    font-family:"Oswald", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.video-curtain{
    background-color: #000;
    position: absolute;
    top: 0px;
    left: 0px;
    right: 0;
    bottom: 0px;
    z-index: 30;
    opacity: 0.25;
}

.frontpage-search{
    position: absolute;
    bottom: 0px;
    left: 0px;
    width: 100%;
    background-color: white;
    opacity: 0.85;
    z-index: 40;
}

.home-refine-button{
    background-color: var(--base-color);
    color: white;
    border: none;
    padding: 10px 20px 10px 20px;
    display: inline-block;
    width: 100%;
    transition: all 0.4s ease;
}

.home-refine-button:hover{
    background-color: var(--base-color-dark);
}

@media only screen {
    /*topmenu 40 + inbetween*/ /*70*/
    .frontshow-wrapper{
        height: calc(100vh - 60px);
        /*height: 100vh;*/
    }
    .frontpage-search{
        height: auto;
        line-height: 40px;
        padding-top: 20px;
    }
    .bgvideotitle{
        font-size: 20px;
    }
    .bgvideotext{
        font-size: 16px;
    }
}

@media only screen and (min-width: 54em) {
    /*topmenu 50 + inbetween*/ /*80*/
    .frontshow-wrapper{
        height: calc(100vh - 90px);
        /*height: 100vh;*/
    }
    .frontpage-search{
        height: auto;
        line-height: 40px;
        padding-top: 20px;
    }
    .bgvideotitle{
        font-size: 24px;
    }
    .bgvideotext{
        font-size: 20px;
    }
}

@media only screen and (min-width: 64em) {
    /*topmenu 60 + inbetween*/ /*90*/
    .frontshow-wrapper{
        height: calc(100vh - 120px);
        /*height: 100vh;*/
    }
    .frontpage-search{
        height: auto;
        line-height: 60px;
        padding-top: 10px;
    }
    .bgvideotitle{
        font-size: 30px;
    }
    .bgvideotext{
        font-size: 24px;
    }
}



@media only screen and (min-width: 90em) {
    /*topmenu 100 + inbetween*/ /*140*/
    .frontshow-wrapper{
        height: calc(100vh - 150px);
        /*height: 100vh;*/
    }
    .frontpage-search{
        height: auto;
        line-height: 80px;
        padding-top: 0px;
    }
    .bgvideotitle{
        font-size: 50px;
    }
    .bgvideotext{
        font-size: 42px;
    }
}





/**************************************************************************************
**
** HOME GRID
**
***************************************************************************************/


.homevisual{
    display: grid;
}

.home-contact{
    grid-area: home-contact;
    border: grey 0px solid;
}



.home-title{
    display: table;
    color: var(--base-color);
    width: 100%;
    border-bottom: var(--base-color) 1px solid;
}

.home-title > div{
    display: table-cell;
    vertical-align: middle;
    /*text-align: center;
    /*background-color: var(--base-color);
    color: white;*/
}


.home-main{
    grid-area: home-main;
    border: grey 0px solid;
}


.home-contact-title{
    color: var(--base-color);
}




@media only screen {
    .homevisual{
        grid-template-columns: 100%;
        /*grid-template-rows: minmax(auto,60px) auto auto;*/
        grid-template-areas:
        "home-main"
        "home-contact";
        column-gap: 0px;
    }
    /*.homevisual > div{
        padding: 20px 20px 20px 20px;
    }*/
    .home-title > div{
        text-align: center;
        font-size: 24px;
        line-height: 42px;
    }
    .home-contact-title{
        font-size: 18px;
        line-height: 36px;
    }
}
@media only screen and (min-width: 48em) {
    .homevisual{
        grid-template-columns: 50% 50%;
        /*grid-template-rows: minmax(auto,100px) auto;*/
        grid-template-areas: 
            "home-contact home-main";
            column-gap: 20px;
    }
    /*.homevisual > div{
        padding: 20px 20px 20px 20px;
    }*/
    .home-title > div{
        text-align: left;
        font-size: 24px;
        line-height: 42px;
    }
    .home-contact-title{
        font-size: 20px;
        line-height: 42px;
    }
}
@media only screen and (min-width: 64em) {
    .homevisual{
        grid-template-columns: 50% 50%;
        /*grid-template-rows: minmax(auto,100px) auto;*/
        grid-template-areas: 
            "home-contact home-main";
            column-gap: 20px;
    }
    /*.homevisual > div{
        padding: 20px 20px 20px 20px;
    }*/
    .home-title > div{
        text-align: left;
        font-size: 24px;
        line-height: 42px;
    }
    .home-contact-title{
        font-size: 20px;
        line-height: 42px;
    }
}
@media only screen and (min-width: 90em) {
    .homevisual{
        grid-template-columns: 50% 50%;
        /*grid-template-rows: minmax(auto,100px) auto;*/
        grid-template-areas: 
            "home-contact home-main";
            column-gap: 45px;
    }
    /*.homevisual > div{
        padding: 30px 45px 30px 45px;
    }*/
    .home-title > div{
        text-align: left;
        font-size: 32px;
        line-height: 42px;
    }
    .home-contact-title{
        font-size: 24px;
        line-height: 42px;
    }
}





/**************************************************************************************
**
** MAIN
**
***************************************************************************************/

.mainwrapper, .saleswrapper{
    position: relative;
    display: block;
}


.zoekknop{
    background-color:white;
    border: #E2E2E2 1px solid;
    color: var(--base-color-dark);
    border-radius: 12px;
    transition: all 0.4s ease;
}

.zoekknop:hover{
    background-color:var(--base-color);
    color: white;
}

.contactknop{
    background-color:var(--base-color);
    border: #E2E2E2 1px solid;
    color: white;
    border-radius: 12px;
    transition: all 0.4s ease;
}

.contactknop:hover{
    background-color:var(--base-color-dark);
    color: white;
}

.wisknop{
    background-color: lightgray;
    color: white;
    border-radius: 20px;
    transition: all 0.4s ease;
}

.h1pagetitle{
    color: var(--base-color-dark);
    font-family: var(--front-font-family);
}


@media only screen {
    .mainwrapper{
        padding: 10px 10px 10px 10px;
    }
    .saleswrapper{
        padding: 10px 0px 10px 0px;
    }
    .zoekknop, .contactknop{
        padding:15px 15px 15px 15px;
    }
    .wisknop{
        padding:8px 15px 8px 15px;
    }
    .h1pagetitle{
        font-size: 18px;
    }
}
@media only screen and (min-width: 48em) {
    .mainwrapper, .saleswrapper{
        padding: 20px 45px 20px 45px;
    }
    .zoekknop, .contactknop{
        padding:10px 20px 10px 20px;
    }
    .wisknop{
        padding:10px 15px 10px 15px;
    }
    .h1pagetitle{
        font-size: 20px;
    }
}
@media only screen and (min-width: 64em) {
    .mainwrapper, .saleswrapper{
        padding: 30px 60px 30px 60px;
    }
    .zoekknop, .contactknop{
        padding:20px 30px 20px 30px;
    }
    .wisknop{
        padding:20px 15px 20px 15px;
    }
    .h1pagetitle{
        font-size: 24px;
    }
}
@media only screen and (min-width: 90em) {
    .mainwrapper, .saleswrapper{
        padding: 30px 90px 30px 90px;
    }
    .zoekknop, .contactknop{
        padding:20px 40px 20px 40px;
    }
    .wisknop{
        padding:20px 15px 20px 15px;
    }
    .h1pagetitle{
        font-size: 28px;
    }
}









/**************************************************************************************
**
** SMARTSEARCH
**
***************************************************************************************/

.smartsearch{
    position: fixed;
    top: 0px;
    left: 100%;
    width: 100%;
    height: 100vh;
    background-color: var(--base-color);
    z-index: 999;
}


.searchfilter{
    max-width: 640px;
    margin-left: auto;
    margin-right: auto;
}

.smartsearchtitle{
    color: white;
    font-size: 18px;
}

.closesmartsearch-wrapper{
    position: relative;
    height: 60px;
}

.closesmartsearch{
    position: absolute;
    top: 0px;
    right: 20px;
    transition: all 0.4s ease;
    height: 60px;
    width: 60px;
    text-align: right;
    cursor: pointer;
}

.closesmartsearch > div {
    line-height: 60px;
    font-size: 60px;
    color: white;
    transition: all 0.4s ease;
}

.closesmartsearch > div:hover {
    color: var(--accent-color);
}

.smartsearchbutton{
    display: block;
    background-color: white;
    color: var(--base-color);
    border: none;
    padding: 10px 10px 10px 10px;
    width: 100%;
    height: auto;
    cursor: pointer;
    font-weight: bolder;
}

.smartsearchbutton:hover{
    color: black;
}



@media only screen {
    .searchfilter{
        padding: 10px 10px 10px 10px;
    }
}
@media only screen and (min-width: 40em) {
    .searchfilter{
        padding: 10px 10px 10px 10px;
    }
}
@media only screen and (min-width: 64em) {
    .searchfilter{
        padding: 10px 10px 10px 10px;
    }
}
@media only screen and (min-width: 90em) {
    .searchfilter{
        padding: 10px 10px 10px 10px;
    }
}



/**************************************************************************************
**
** PAGINATOR
**
***************************************************************************************/


/*
brown: 6a5746  /  554638
orange: f29633  /  8a4c09
*/

.paginator-wrapper{
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.paginator{
    text-align: center;
}

.paginator-arrows{
	display:inline-block; padding:5px 5px 5px 5px; margin-right:10px;
}
.paginator-arrows.right{
	margin-right:0px;
}

.paginator-arrows:hover{
	background-color:#FFF;
}

.paginator-numbers{
    display:inline-block;
    padding:5px 15px 5px 15px;
    margin-right:10px;
    color:var(--base-color-dark);
    font-weight: bolder;
    font-size: 24px;
}

/*******************************************************************/
/*                                                                 */
/* GRID                                                            */
/*                                                                 */
/*******************************************************************/

/*
.zoomeffect{
    transition: all 0.2s ease;
}

.zoomeffect:hover{
    transform: scale(1.05);
    box-shadow: 1px 1px 10px 0px #CCCCCC;
}
*/

/*******************************************************************/
/*                                                                 */
/* GRID                                                            */
/*                                                                 */
/*******************************************************************/

.grid-cell{
    margin-bottom: 30px;
}

.grid-inner-wrapper{
    position: relative;
    background-color: white;
    padding: 10px 10px 10px 10px;
    transition: all 0.2s ease;
    border: #E2E2E2 1px solid;
    height: 100%;
    border-radius: 12px;
}

.grid-inner-wrapper:hover{
    /*box-shadow: 0px 0px 0px 30px white, 30px 30px 30px 0px #000000;*/
    /*box-shadow: 1px 1px 10px 0px #CCCCCC;*/
    /*transform: scale(1.05);*/
}









.grid-inner-wrapper  .grid-curtain{
    position: absolute;
    top:50%;
    left: 50%;
    width: 0px;
    height: 0px;
    background-color: var(--base-color);
    z-index: 90;
    opacity: 0;
    transition: all 0.4s ease;
    z-index: 90;
    border: white 0px solid;
    border-radius: 12px 12px 0px 0px;

}

.grid-inner-wrapper:hover  .grid-curtain{
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    opacity: .7;
    border: white 0px solid;
}

.grid-inner-wrapper  .grid-curtain-text{
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
    width: 90%;
    height: 30px;
    opacity: 0;
    transition: opacity 0.4s ease;
    text-align: center;
    color: white !important;
    font-weight: bold;
    z-index: 91;
    line-height: 30px;
}

.grid-inner-wrapper:hover  .grid-curtain-text{
    opacity: 1 !important;
}



.grid-inner-wrapper  .label-grid-curtain{
    position: absolute;
    top:0px;
    left: 0px;
    width: 100%;
    height: 100%;
    background-color: var(--base-color);
    z-index: 90;
    opacity: 0.7;
    transition: all 0.4s ease;
    z-index: 90;
    border: white 0px solid;
    border-radius: 12px 12px 0px 0px;

}

.grid-inner-wrapper  .label-grid-curtain-text{
    position: absolute;
    left: 50%;
    top: 50%;
	transform: translate(-50%, -50%);
    width: 90%;
    height: 30px;
    opacity: 1;
    transition: opacity 0.4s ease;
    text-align: center;
    color: white !important;
    font-weight: bold;
    z-index: 91;
    line-height: 30px;
}









.sim-grid-inner-wrapper{
    position: relative;
    background-color: white;
    padding: 10px 10px 10px 10px;
    margin-bottom: 30px;
    transition: all 0.2s ease;
}

.sim-grid-inner-wrapper:hover{
    /*box-shadow: 0px 0px 0px 30px white, 30px 30px 30px 0px #000000;*/
    /*box-shadow: 1px 1px 10px 0px #CCCCCC;*/
    transform: scale(1.05);
}

.similar-estates-title{
    text-align: center;
    font-weight: bold;
    color:var(--base-color);
}

.grid-pic-wrapper{
    position: relative;
    width: 100%;
    height: 100%;
}

.grid-bg-pic{
    position: relative;
    border-radius: 12px 12px 0px 0px;
}


.grid-pic{
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-repeat: no-repeat;
    background-size: contain;
    border-radius: 12px 12px 0px 0px;
}

.grid-right{
    text-align: right;
}

.grid-title{
    font-family: var(--robot-font-family);
    font-size: 18px;
    font-weight: bold;
    color: var(--base-color);
    text-decoration: none;
    margin: 0;
    padding: 0;
}

.grid-text{
    color: #777777 !important;
    text-decoration: none;
    transition: all 0.2s ease;
}

.grid-inner-wrapper:hover .grid-text{
    color: var(--base-color);
}

.minipricetag{
    background-color: var(--base-color);
    color: white;
    text-decoration: none;
}

.minipricetagproject{
    color: var(--base-color-dark);
    text-decoration: none;
    font-weight: bold;
}

.grid-title:hover, .grid-text:hover, .minipricetag:hover{
    text-decoration: none !important;
}

.minilabelproject{
    color: #999;
}

.grid-hr{
    border-color: #E2E2E2;
    margin: 5px 0px 5px 0px;
    padding: 0;
}


@media only screen {
    .grid-curtain-text, .label-grid-curtain-text{
        font-size: 16px;
    }
    .minipricetag{
        font-size: 16px;
        padding: 5px;
    }
}
@media only screen and (min-width: 40em) {
    .grid-curtain-text, .label-grid-curtain-text{
        font-size: 18px;
    }
    .minipricetag{
        font-size: 16px;
        padding: 5px;
    }
}
@media only screen and (min-width: 64em) {
    .grid-curtain-text, .label-grid-curtain-text{
        font-size: 20px;
    }
    .minipricetag{
        font-size: 18px;
        padding: 8px;
    }
}
@media only screen and (min-width: 75em) {
    .grid-curtain-text, .label-grid-curtain-text{
        font-size: 22px;
    }
    .minipricetag{
        font-size: 18px;
        padding: 8px;
    }
}
@media only screen and (min-width: 90em) {
    .grid-curtain-text, .label-grid-curtain-text{
        font-size: 28px;
    }
    .minipricetag{
        font-size: 18px;
        padding: 8px;
    }
}




/*******************************************************************/
/*                                                                 */
/* LABELS                                                          */
/*                                                                 */
/*******************************************************************/


.label-wrapper{
    position: absolute;
    top: 20px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.label-new{
    display: inline-block;
    background-color:var(--base-color);
	color:white;
	padding:5px 10px 5px 10px;
	font-family: var(--robot-font-family);
    font-size:13px;
    transform: skewY(-10deg);
}

.label-newprice{
    display: inline-block;
    background-color:var(--base-color);
	color:white;
	padding:5px 10px 5px 10px;
	font-family: var(--robot-font-family);
    font-size:13px;
    transform: skewY(-10deg);
}

.label-option{
    display: inline-block;
    background-color:#FFFFFF;
	color:#000000;
	padding:5px 10px 5px 10px;
	font-family: var(--robot-font-family);
    font-size:15px;
    transform: skewY(-10deg);
    border-bottom: #E2E2E2 1px solid;
}

.label-soldrented{
    display: inline-block;
    background-color:rgb(255, 238, 0);
	color:black;
	padding:8px 10px 8px 10px;
	font-family: var(--robot-font-family);
    font-size:16px;
    transform: skewY(-10deg);
}

.label-soldrented-real{
    display: inline-block;
    background-color:rgb(255, 238, 0);
	color:black;
	padding:8px 10px 8px 10px;
	font-family: var(--robot-font-family);
    font-size:16px;
    transform: skewY(-10deg);
}

.label-virtual{
    display: inline-block;
    background-color:var(--base-color);
	color:white;
	padding:8px 10px 8px 10px;
	font-family: var(--robot-font-family);
    font-size:16px;
    /*transform: rotate(-10deg);*/
    transform: skewY(-10deg);
    margin-top: 10px;
    /*border-radius: 100px;*/
}

.label-bedrooms{
    display: inline-block;
    background-color:#FFFFFF;
	color:var(--base-color);
	padding:5px 5px 5px 0px;
	/*box-shadow:#333333 1px 1px 1px;*/
	font-family: var(--robot-font-family);
    font-size:13px;
    /*line-height: 18px;*/
    border-radius: 3px 0px 0px 0px;
}

.label-bedrooms-two{
    display: inline-block;
    background-color:#FFFFFF;
	color:var(--base-color-dark);
	padding:0px 0px 0px 0px;
	/*box-shadow:#333333 1px 1px 1px;*/
	font-family: var(--robot-font-family);
    font-size:13px;
    /*line-height: 18px;*/
    border-radius: 0px 0px 0px 0px;
}

.badge {
    box-sizing: border-box;
    min-width: 22px;
    height: 22px;
    padding: 0 5px;
    border-radius: 500px;
    vertical-align: middle;
    background: var(--base-color);
    color: #fff;
    font-size:1em;
    display: inline-flex;
    justify-content: center;
    align-items: center;
}





/**************************************************************************************
**
** PROJECTS
**
***************************************************************************************/

.projectwrapper{
    position: relative;
    border: #ccc 1px solid;
    background-color: white;
    /*float: left;*/
}

.project-inner-wrapper{
    position: relative;
    display: grid;
}

.project-picontainer{
    grid-area: propic;
}
.project-textcontainer{
    grid-area: protext;
}


@media only screen {
    .projectwrapper{
        margin-bottom: 15px;
        border-radius: 10px;
    }
    .project-inner-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "propic"
        "protext";
        padding: 10px 10px 10px 10px;
    }
    .project-textcontainer{
        padding: 20px 0px 20px 0px;
    }
    .propic > img{
        border-radius: 10px;
    }
}
@media only screen and (min-width: 48em) {
    .projectwrapper{
        margin-bottom: 30px;
        border-radius: 20px;
    }
    .project-inner-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "propic"
        "protext";
        padding: 20px 20px 20px 20px;
    }
    .project-textcontainer{
        padding: 20px 0px 20px 0px;
    }
    .propic > img{
        border-radius: 20px;
    }
}
@media only screen and (min-width: 64em) {
    .projectwrapper{
        margin-bottom: 45px;
        border-radius: 30px;
    }
    .project-inner-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "propic protext";
        padding: 30px 30px 30px 30px;
    }
    .project-textcontainer{
        padding: 0px 20px 0px 20px;
    }
    .propic > img{
        border-radius: 30px;
    }
}
@media only screen and (min-width: 75em) {
    .projectwrapper{
        margin-bottom: 45px;
        border-radius: 30px;
    }
    .project-inner-wrapper{
        grid-template-columns: 40% 60;
        grid-template-areas:
        "propic protext";
        padding: 30px 30px 30px 30px;
    }
    .project-textcontainer{
        padding: 0px 30px 0px 30px;
    }
    .propic > img{
        border-radius: 30px;
    }
}
@media only screen and (min-width: 90em) {
    .projectwrapper{
        margin-bottom: 45px;
        border-radius: 30px;
    }
    .project-inner-wrapper{
        grid-template-columns: 35% 65%;
        grid-template-areas:
        "propic protext";
        padding: 30px 30px 30px 30px;
    }
    .project-textcontainer{
        padding: 0px 30px 0px 30px;
    }
    .propic > img{
        border-radius: 30px;
    }
}

/**************************************************************************************
**
** PROJECT
**
***************************************************************************************/


.project-grid-wrapper{
    display: grid;
}

.project-grid-mainpicture{
    grid-area: mainpic;
}

.project-grid-main{
    grid-area: main;
}

.project-grid-pictures{
    grid-area: pictures;
}

.project-tag{
    display: inline-block;
    background-color: #ccc;
    color: white;
    padding: 5px;
}

@media only screen {
    .project-grid-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "mainpic"
        "main"
        "pictures";
        margin: 10px 10px 10px 10px;
    }
    .project-grid-wrapper > div{
        padding: 10px 10px 10px 10px;
    }
}
@media only screen and (min-width: 48em) {
    .project-grid-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "mainpic"
        "main"
        "pictures";
        margin: 0px 20px 0px 20px;
    }
    .project-grid-wrapper > div{
        padding: 10px 0px 10px 10px;
    }
}
@media only screen and (min-width: 64em) {
    .project-grid-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "mainpic main"
        "pictures pictures";
        margin: 0px 60px 0px 60px;
    }
    .project-grid-wrapper > div{
        padding: 10px 10px 10px 10px;
    }
}
@media only screen and (min-width: 75em) {
    .project-grid-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "mainpic main"
        "pictures pictures";
        margin: 0px 60px 0px 60px;
    }
    .project-grid-wrapper > div{
        padding: 10px 10px 10px 10px;
    }
}
@media only screen and (min-width: 90em) {
    .project-grid-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "mainpic main"
        "pictures pictures";
        margin: 0px 90px 0px 90px;
    }
    .project-grid-wrapper > div{
        padding: 10px 10px 10px 10px;
    }
}



/**************************************************************************************
**
** ESTATE
**
***************************************************************************************/


.estate-wrapper{
    display: grid;
}

.estate-header{
    grid-area: header;
}

.estate-nav{
    grid-area: nav;
}

.estate-main{
    grid-area: main;
}

.estate-pics{
    grid-area: pics;
}

.estate-description{
    grid-area: description;
}


.estate-form{
    grid-area: form;
}

.estate-specs{
    grid-area: specs;
    overflow-x: auto;
}


.estate-title{
    font-family: var(--robot-font-family);
}

.estate-price{
    font-weight: bold;
    color: var(--base-color-dark);
}

.estate-print{
    float: right;
    text-align: right;
}

.estate-text-style{
    line-height: 30px;
}

/* estate table*/
.spec{width: 100%;}
.tdright{
    text-align: right;
    color: var(--base-color-dark);
    line-height: 32px;
}
.spec td{
    border-bottom: #E2E2E2 1px solid;
    font-size: 16px;
    line-height: 32px;
}
.spec td.tdsmall{font-size: 13px;}
.spectitle{
    margin-bottom: 15px;
    color: var(--base-color);
    font-weight: bold;
}

.estate-main-pic{
    position: relative;
}

.estate-main-pic > a > img{
    width: 100%;
}

.estate-thumbs{
    padding: 5px;
    background-color: lightgray;
}

.estate-more-pics{
    display: inline-block;
    position: absolute;
    left: 20px;
    bottom: 20px;
    z-index: 2;
    color: white;
    background-color: var(--base-color);
    padding: 5px;
}

.estate-more-pics:hover{
    background-color: var(--base-color-dark);
    color: white;
}

.estate-thumbs-cell{
    padding: 5px;
}

.estate-thumbs-cell > a{
    display: block;
    width: 100%;
    height: 100%;
    max-height: 120px;
}

.estate-thumbs-cell > a > img{
    object-fit: cover;
    width: 100%;
    height: 120px;
}


@media only screen {
    .estate-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "header"
        "nav"
        "pics"
        "main"
        "specs"
        "form";
    }
    .estate-nav{
        text-align: left;
    }
    .estate-title{
        font-size: 16px;
        padding: 0;
    }
    .estate-main{
        padding: 0;
    }
    .estate-price{
        font-size: 16px;
    }
    .specs-wrapper{
        min-width: 100%;
    }
    .estate-thumbs-cell > a{
        max-height: 100px;
    } 
    .estate-thumbs-cell > a > img{
        height: 100px;
    }
}
@media only screen and (min-width: 48em) {
    .estate-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "header"
        "nav"
        "pics"
        "main"
        "specs"
        "form";
    }
    .estate-nav{
        text-align: left;
    }
    .estate-title{
        font-size: 18px;
        padding: 0;
    }
    .estate-main{
        padding: 0;
    }
    .estate-price{
        font-size: 16px;
    }
    .specs-wrapper{
        min-width: 100%;
    }
    .estate-thumbs-cell > a{
        max-height: 120px;
    } 
    .estate-thumbs-cell > a > img{
        height: 120px;
    }
}
@media only screen and (min-width: 64em) {
    .estate-wrapper{
        grid-template-columns: 40% 60%;
        grid-template-areas:
        "header nav"
        "main pics"
        "main specs"
        "main form";
    }
    .estate-nav{
        text-align: right;
    }
    .estate-title{
        font-size: 20px;
        padding: 0px 30px 0px 0px;
    }
    .estate-main{
        padding: 0px 30px 0px 0px;
    }
    .estate-price{
        font-size: 18px;
    }
    .specs-wrapper{
        min-width: 710px;
    }
    .estate-thumbs-cell > a{
        max-height: 130px;
    } 
    .estate-thumbs-cell > a > img{
        height: 130px;
    }
}
@media only screen and (min-width: 75em) {
    .estate-wrapper{
        grid-template-columns: 40% 60%;
        grid-template-areas:
        "header nav"
        "main pics"
        "main specs"
        "main form";
    }
    .estate-nav{
        text-align: right;
    }
    .estate-title{
        font-size: 22px;
        padding: 0px 30px 0px 0px;
    }
    .estate-main{
        padding: 0px 30px 0px 0px;
    }
    .estate-price{
        font-size: 20px;
    }
    .specs-wrapper{
        min-width: 710px;
    }
    .estate-thumbs-cell > a{
        max-height: 140px;
    } 
    .estate-thumbs-cell > a > img{
        height: 140px;
    }
}
@media only screen and (min-width: 90em) {
    .estate-wrapper{
        grid-template-columns: 40% 60%;
        grid-template-areas:
        "header nav"
        "main pics"
        "main specs"
        "main form";
    }
    .estate-nav{
        text-align: right;
    }
    .estate-title{
        font-size: 26px;
        padding: 0px 60px 0px 0px;
    }
    .estate-main{
        padding: 0px 60px 0px 0px;
    }
    .estate-price{
        font-size: 24px;
    }
    .specs-wrapper{
        min-width: 710px;
    }
    .estate-thumbs-cell > a{
        max-height: 180px;
    } 
    .estate-thumbs-cell > a > img{
        height: 180px;
    }
}


/* SPECS KOLOMMEN */
.specs-avoid-break{
    break-inside: avoid;
}
.specs-key{
    display:inline-block;
}
.specs-value{
    display:inline-block;
    float:right;
    color: var(--base-color);
}
.specs-row{
    border-bottom: #E2E2E2 1px solid;
    break-inside: avoid;
}
@media only screen {
    .specs-cols{
        column-count: 1;
        column-gap: 10px;
    }
}
@media only screen and (min-width: 48em) {
    .specs-cols{
        column-count: 1;
        column-gap: 10px;
    }
}
@media only screen and (min-width: 64em) {
    .specs-cols{
        column-count: 2;
        column-gap: 15px;
    }
}
@media only screen and (min-width: 75em) {
    .specs-cols{
        column-count: 2;
        column-gap: 20px;
    }
}
@media only screen and (min-width: 90em) {
    .specs-cols{
        column-count: 2;
        column-gap: 20px;
    }
}

/* INDELING KOLOMMEN */

/*.indeling-cols{
    column-rule-style: solid;
    column-rule-width: 1px;
}*/

.indeling-digit{
    display:inline-block;
    float:right;
    color: var(--base-color);
}
.indeling-row{
    border-bottom: #E2E2E2 1px solid;
}
@media only screen {
    .indeling-cols{
        column-count: 1;
        column-gap: 10px;
    }
}
@media only screen and (min-width: 48em) {
    .indeling-cols{
        column-count: 1;
        column-gap: 10px;
    }
}
@media only screen and (min-width: 64em) {
    .indeling-cols{
        column-count: 2;
        column-gap: 15px;
    }
}
@media only screen and (min-width: 75em) {
    .indeling-cols{
        column-count: 3;
        column-gap: 20px;
    }
}
@media only screen and (min-width: 90em) {
    .indeling-cols{
        column-count: 3;
        column-gap: 20px;
    }
}



/**************************************************************************************
**
** SCHATTING
**
***************************************************************************************/


.schat-wrapper{
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 10px 0px 10px;
}
.schat-image{
    position: relative;
}
.schat-head{
    position: absolute;
    right: 0px;
    top: 0px;
}

.schat-image > img{
    max-height: 300px;
}


/**************************************************************************************
**
** HMODH
**
***************************************************************************************/


.hmodh-wrapper{
    max-width: 1020px;
    margin-left: auto;
    margin-right: auto;
    padding: 0px 10px 0px 10px;
}
.hmodh-title{
    text-align: right;
}
.hmodh-image{
    position: relative;
}
.hmodh-head{
    position: absolute;
    right: 0px;
    top: 0px;
}

.hmodh-image > div > img{
    max-height: 270px;
}

/**************************************************************************************
**
** CONTACT
**
***************************************************************************************/

.contact-wrapper{
    display: grid;
}

.contact-mail{
    grid-area: contact-mail;
}

.contact-main{
    grid-area: contact-main;
}


@media only screen {
    .contact-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "contact-mail"
        "contact-main";
        margin: 0px 10px 0px 10px;
        column-gap: 0px;
    }
}
@media only screen and (min-width: 40em) {
    .contact-wrapper{
        grid-template-columns: 100%;
        grid-template-areas:
        "contact-mail"
        "contact-main";
        margin: 0px 10px 0px 10px;
        column-gap: 30px;
    }
}
@media only screen and (min-width: 64em) {
    .contact-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "contact-mail contact-main";
        margin: 0px 60px 0px 60px;
        column-gap: 40px;
    }
}
@media only screen and (min-width: 75em) {
    .contact-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "contact-mail contact-main";
        margin: 0px 60px 0px 60px;
        column-gap: 50px;
    }
}
@media only screen and (min-width: 90em) {
    .contact-wrapper{
        grid-template-columns: 50% 50%;
        grid-template-areas:
        "contact-mail contact-main";
        margin: 0px 90px 0px 90px;
        column-gap: 60px;
    }
}



/**************************************************************************************
**
** FOOTER
**
***************************************************************************************/

.footer-wrapper{
    background-color: var(--base-color);
}

.footer{
    color: white;
    display: grid;
}

.footer a{
    color: white;
}

.footer a:hover{
    color: var(--accent-color);
    text-decoration: underline;
}

.footer-logo{
    height: 60px;
}

.footer-company{
    grid-area: footercompany;
    border: orange 0px solid;
}
.footer-menu{
    grid-area: footermenu;
    border: yellow 0px solid;
}
.footer-legal{
    grid-area: footerlegal;
    border: greenyellow 0px solid;
}
.footer-thirdparty{
    grid-area: footerthirdparty;
    border: red 0px solid;
}
.footer-credits{
    grid-area: footercredits;
    border: white 0px solid;
}

.footer-menu > div > a{
    color: white;
}

.disclaimer-btn{
    color: white;
}

@media only screen {
    .footer-wrapper{
        padding: 0px 10px 0px 10px;
    }
    .footer{
    grid-template-columns: 100%;
    grid-template-areas: 
    "footermenu"
    "footercompany"
    "footerlegal"
    "footerthirdparty"
    "footercredits";
    }
    .footer > div{
        padding: 30px 0px 0px 0px;
    }
    .footer-menu > div.bigfootermenu > a{
        font-size: 18px;
        margin-right: 0px;
        display: block;
    }
    .footer-menu > div.smallfootermenu > a{
        font-size: 16px;
        margin-right: 0px;
        display: block;
    }
}
@media only screen and (min-width: 40em) {
    .footer-wrapper{
        padding: 0px 30px 0px 30px;
    }
    .footer{
        grid-template-columns: 50% 50%;
        grid-template-areas: 
        "footermenu footermenu"
        "footercompany footercompany"
        "footerlegal footerthirdparty"
        "footercredits footercredits";
    }
    .footer > div{
        padding: 30px 0px 0px 0px;
    }
    .footer-menu > div.bigfootermenu > a{
        font-size: 18px;
        margin-right: 20px;
        display: inline-block;
    }
    .footer-menu > div.smallfootermenu > a{
        font-size: 16px;
        margin-right: 20px;
        display: inline-block;
    }
}
@media only screen and (min-width: 64em) {
    .footer-wrapper{
        padding: 0px 60px 0px 60px;
    }
    .footer{
        grid-template-columns: 40% 60%;
        grid-template-areas: 
        "footercompany footermenu"
        "footerlegal footerthirdparty"
        "footercredits footercredits";
    }
    .footer > div{
        padding: 30px 0px 0px 0px;
    }
    .footer-menu > div.bigfootermenu > a{
        font-size: 20px;
        margin-right: 20px;
        display: inline-block;
    }
    .footer-menu > div.smallfootermenu > a{
        font-size: 16px;
        margin-right: 20px;
        display: inline-block;
    }
}
@media only screen and (min-width: 75em) {
    .footer-wrapper{
        padding: 0px 60px 0px 60px;
    }
    .footer{
        grid-template-columns: 35% 65%;
        grid-template-areas: 
        "footercompany footermenu"
        "footerlegal footerthirdparty"
        "footercredits footercredits";
    }
    .footer > div{
        padding: 30px 0px 0px 0px;
    }
    .footer-menu > div.bigfootermenu > a{
        font-size: 20px;
        margin-right: 20px;
        display: inline-block;
    }
    .footer-menu > div.smallfootermenu > a{
        font-size: 18px;
        margin-right: 20px;
        display: inline-block;
    }
}
@media only screen and (min-width: 90em) {
    .footer-wrapper{
        padding: 0px 90px 0px 90px;
    }
    .footer{
        grid-template-columns: 35% 65%;
        grid-template-areas: 
        "footercompany footermenu"
        "footerlegal footerthirdparty"
        "footercredits footercredits";
    }
    .footer > div{
        padding: 30px 0px 0px 0px;
    }
    .footer-menu > div.bigfootermenu > a{
        font-size: 22px;
        margin-right: 20px;
        display: inline-block;
    }
    .footer-menu > div.smallfootermenu > a{
        font-size: 18px;
        margin-right: 20px;
        display: inline-block;
    }
}



.link-to-projectweb{
    color: white;
    font-size: 14px;
    text-decoration: none;
}
.link-to-projectweb:hover{
    color: white;
    text-decoration: underline;
}









/**************************************************************************************
**
** AGAINST SPAMMY ANNOYING LITTLE NERDS
**
***************************************************************************************/

.tegendevervelendeventjes{
	display:none;
}


#wrap_tegenvervelendeventjes, #wrap_pa_period{
	display: none;
}


.g-recaptcha{
	float: right;
	max-width: 400px;
}

p.InputfieldError{
	background-color: #e31f18;
	color: #FFFFFF;
	padding: 5px;
}

ul.Inputfields{
	list-style:none;
	padding:0;
	margin:0px;
}



/**************************************************************************************
**
** PAND AANBIEDEN + HMODH + ESTATE + CONTACT FORMULIER
**
***************************************************************************************/


.contactform-title{
    color: var(--base-color);
    font-weight: bold;
}


.InputfieldFieldset{
	padding: 20px 0px 20px 0px;
	margin-bottom: 0px;
}



.labeltitle{
	font-weight: bold;
}



#wrap_pa_surname, #wrap_pa_name, #wrap_pa_phone, #wrap_pa_email, #wrap_pa_street, #wrap_pa_number, #wrap_pa_box, #wrap_pa_city, #wrap_pa_pcode, #wrap_pa_min_rooms, #wrap_pa_max_rooms, #wrap_pa_min_price, #wrap_pa_max_price, #wrap_pa_min_surface, #wrap_pa_max_surface, #wrap_pa_status, #wrap_pa_interest, #wrap_pa_newconstruction{
	float: left;
}





@media only screen {
	#wrap_pa_surname, #wrap_pa_phone, #wrap_pa_street, #wrap_pa_city, #wrap_pa_min_rooms, #wrap_pa_min_price, #wrap_pa_min_surface, #wrap_pa_status{
		width: 100%;
	}
	#wrap_pa_name,  #wrap_pa_email, #wrap_pa_number, #wrap_pa_box, #wrap_pa_pcode, #wrap_pa_max_rooms, #wrap_pa_max_price, #wrap_pa_max_surface, #wrap_pa_interest, #wrap_pa_newconstruction{
		width: 100%; padding-left: 0px;
	}
}

@media print, screen and (min-width: 40em) {
	#wrap_pa_surname{
		width: 40%;
	}
	#wrap_pa_name{
		width: 60%;
		padding-left: 20px;
	}
	#wrap_pa_phone{
		width: 40%;
	}
    #wrap_pa_email{
		width: 60%;
		padding-left: 20px;
    }
    #wrap_pa_street{
		width: 60%;
    }
    #wrap_pa_number{
        width: 20%;
        padding-left: 20px;
    }
    #wrap_pa_box{
        width: 20%;
        padding-left: 20px;
    }
    #wrap_pa_city, #wrap_pa_min_rooms, #wrap_pa_min_price, #wrap_pa_min_surface, #wrap_pa_status{
		width: 50%;
    }
    #wrap_pa_pcode, #wrap_pa_max_rooms, #wrap_pa_max_price, #wrap_pa_max_surface, #wrap_pa_interest{
        width: 50%;
        padding-left: 20px;
    }
}








ul.InputfieldRadiosStacked{
	list-style: none;
	padding: 0;
	margin: 0;
}

ul.InputfieldRadiosStacked li{
	display: inline-block;
	margin-right: 20px;
}







/**************************************************************************************
**
** PRELOADER
**
***************************************************************************************/

#preloader {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 9999;
    background-color: #FFF;

    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;

    -ms-flex-align: center;
    -webkit-align-items: center;
    -webkit-box-align: center;

    align-items: center;
}

#preloader > div {
    border: 16px solid #f3f3f3; /* Light grey */
    border-top: 16px solid var(--base-color); /* Blue */
    border-radius: 50%;
    width: 120px;
    height: 120px;
    margin-left: auto;
    margin-right: auto;
    animation: spin 2s linear infinite;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}



/**************************************************************************************
**
** COOKIE CONSENT
**
***************************************************************************************/


h4.pwcmb-widget__title{
    color: #ff4539;
}

.js-pwcmb-allow-cookies {
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 1rem 0;
	font-family: inherit;
	padding: 0.85em 1em;
	-webkit-appearance: none;
	border: 1px solid transparent;
	border-radius: 3px;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-size: 0.9rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	background-color: #ff4539;
	color: #fefefe; }
	[data-whatinput='mouse'] .pwcmb-widget__button {
	  outline: 0; }
	.js-pwcmb-allow-cookies:hover, .js-pwcmb-allow-cookies:focus {
	  background-color: #c54135;
	  color: #fefefe; }

.js-pwcmb-manage-cookies, .js-pwcmb-save-pref{
	display: inline-block;
	vertical-align: middle;
	margin: 0 0 1rem 0;
	font-family: inherit;
	padding: 0.85em 1em;
	-webkit-appearance: none;
	border: 1px solid transparent;
	border-radius: 3px;
	transition: background-color 0.25s ease-out, color 0.25s ease-out;
	font-size: 0.9rem;
	line-height: 1;
	text-align: center;
	cursor: pointer;
	background-color: #CCCCCC !important;
}

/*
img.align_center{
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
*/