﻿
#EstateDetail .photogallery{ }
#EstateDetail .parameters { background-color:var(--color4); color:var(--color10); padding:6rem 0; }
#EstateDetail .parameters .parameterscontent{ display:flex; flex-wrap:wrap; width:100%; justify-content:left; margin:auto; }
#EstateDetail .parameters .item{ width:48%; margin-right:2%; display:flex; flex-wrap:nowrap; padding:5px 0; border-bottom:1px solid var(--color3); }
#EstateDetail .parameters .itemlabel{ width:40%; font-weight:500; color:var(--color5); }
#EstateDetail .parameters .itemlabel:first-letter{ text-transform:uppercase; }
#EstateDetail .parameters .itemcontent{ width:60%; font-weight:600; }
#EstateDetail .parameters .itemcontent:first-letter{  }
#EstateDetail #MapyCzHolder { width:100%; height:400px; }
#EstateDetail #MapyCzHolder .compass { top:50px; }

#EstateDetail .topphoto { position:relative; }
#EstateDetail .topphoto .photocontent{ width:100%; height:0; padding-bottom:34%; position:relative; }
#EstateDetail .topphoto .photocontent div { display:block; width:100%; height:100%; position:absolute; top:0; left:0;
                                            background-repeat:no-repeat; background-size:cover; background-position:center center;
}
#EstateDetail .topphoto .statictext { max-width:1000px; margin:203px auto 0 auto; position:absolute; z-index:3; top:0; left:0; right:0; }
#EstateDetail .topphoto .statictext .title{ display:table; width:auto; padding:30px;
                                      background:rgba(0,0,0,0.5); margin:auto; text-align:center;
}
#EstateDetail .topphoto .statictext .title h1{ color:var(--color10); padding:0; margin:0; font-weight:400; }
#EstateDetail .topphoto .statictext .location{ display:table; width:auto; padding:15px 30px;
                                      background:rgba(0,0,0,0.5); margin:auto; text-align:center; color:var(--color10); font-weight:300; font-size:1.6rem;
                                      font-family:var(--font-title);
}
#EstateDetail .topphoto .buttonsinphoto { position:absolute; display:table; margin:auto; bottom:3rem; left:0; right:0;  }
    #EstateDetail .topphoto .buttonsinphotocontent { flex-wrap:nowrap; }
    #EstateDetail .topphoto .buttonsinphotocontent a.button{ padding:0 2rem; margin:0 15px; text-transform:none; font-family:var(--font-title); font-weight:400;
                                                             height:60px; line-height:60px; font-size:1.6rem;
    }

#EstateDetail .description { background-color:var(--color4); color:var(--color10); line-height:1.7; padding:6rem 0; }
#EstateDetail h2 { font-weight:300; color:var(--color10); margin-top:0; padding-top:0; }
#EstateDetail .video { background-color:var(--color4); color:var(--color10); padding-bottom:6rem; }
#EstateDetail .video h2{ margin-bottom:0; padding-bottom:0; }
#EstateDetail .video .videofile,#EstateDetail .video .videoyoutube { margin-top:3rem; }
#EstateDetail .matterport { background-color:var(--color4); color:var(--color10); padding-bottom:6rem; }
#EstateDetail .matterport h2{ margin-bottom:0; padding-bottom:0; }
#EstateDetail .floorplan { background-color:var(--color10); color:var(--color11); padding:6rem 0; }
#EstateDetail .floorplan h2{ margin-bottom:0; padding-bottom:0; color:var(--color11); }
#EstateDetail .documents { background-color:var(--color4); color:var(--color10); padding:6rem 0; }
#EstateDetail .documents h2{ margin-bottom:0; padding-bottom:0; }
#EstateDetail .price { background-color:var(--color3); color:var(--color10); padding:6rem 0; }
#EstateDetail .price h2{ margin-bottom:1rem; padding-bottom:0; color:var(--color10); }
#EstateDetail .price .pricenumber { text-align:center; font-size:3rem; font-weight:bold; }
#EstateDetail .price .pricenote { text-align:center; font-size:1.6rem; font-weight:normal; }
#EstateDetail .map { }
#EstateDetail .map #detailmapaholder{ width:100%; height:300px; }


@media all and (max-width: 105em) {

    #EstateDetail .topphoto .statictext .title h1 { font-size:2em; }
    #EstateDetail .price { padding:3rem 0; }
}

@media all and (max-width: 85em) {

    #EstateDetail .topphoto .statictext .title h1 { font-size:1.8em; }
    #EstateDetail .topphoto .statictext .location { padding:5px 30px; }
}

@media all and (max-width: 75em) {

    #EstateDetail .topphoto .photocontent { padding-bottom:45%; }
}

@media all and (max-width: 61em) {

    #EstateDetail .topphoto .photocontent { padding-bottom:55%; }
    
}

@media all and (max-width: 54em) {

    #EstateDetail .parameters .item { width:100%; }
    
}

@media all and (max-width: 48em) {
    #EstateDetail .topphoto .photocontent {
        padding-bottom: 65%;
    }
    #EstateDetail .topphoto .statictext .title { padding:15px; }

}

@media all and (max-width: 42em) {
    #EstateDetail .topphoto .photocontent { padding-bottom:75%; }
    #EstateDetail .topphoto .buttonsinphoto { position:static; bottom:auto; left:auto; right:auto; background-color:var(--color3); width:100%; }
    #EstateDetail .topphoto .buttonsinphotocontent a.button { font-size:1.2rem; }
    #EstateDetail .price h2 { font-size:1.6rem; }
    #EstateDetail .price .pricenumber { font-size:2rem; }
    #EstateDetail .price { padding:2rem 0; }
}

@media all and (max-width: 36em) {
    #EstateDetail .topphoto .buttonsinphotocontent { flex-wrap:wrap; }
    #EstateDetail .topphoto .buttonsinphotocontent a.button { width:100%; margin:0; padding:0; }
    #EstateDetail .topphoto .statictext .title h1,#EstateDetail .topphoto .statictext .location { font-size:1.4rem; }
}

@media all and (max-width: 27em) {
    #EstateDetail .topphoto .photocontent { padding-bottom:100%; }
    #EstateDetail .topphoto .statictext .title h1, #EstateDetail .topphoto .statictext .location { font-size:1.2rem; }
}









    


