﻿
@import url('/components/forms/wucclientformestateinfo.css');
@import url('/Components/Estates/Photos/wucPhotosTwoLayer.css');


#DetailEstate .photogallery{ margin-bottom:2em; max-width:1610px; margin-left:auto; margin-right:auto; padding-left:10px; }
#DetailEstate .descagent{ }
#DetailEstate .descagent .descagentcontent{ flex-wrap:nowrap; }
#DetailEstate .descagent .desccontent{ width:68%; padding-right:2%; }
#DetailEstate .descagent .desccontent .title{ font-size:1.8em; font-weight:500;  }
#DetailEstate .descagent .desccontent .price{ color:var(--color2); font-weight:bold; font-size:1.4em; margin:1em 0; }
#DetailEstate .descagent .desccontent .description{ }
#DetailEstate .descagent .contact{ width:calc(30% - 10px); padding-right:10px; }
#DetailEstate .descagent .contact .iaminterested{ display:block; width:100%; text-align:center; color:var(--color10); background-color:var(--color1); }
#DetailEstate .descagent .contact .iaminterested a{ display:block; width:calc(50%); padding:30px 15px; text-align:center; color:var(--color10);
                                                    text-decoration:none; margin:auto; font-size:1.4em;
}
#DetailEstate .descagent .contact .agent{ margin-top:2em; background-color:var(--color3); padding:0 30px 30px 30px; width:calc(100% - 60px);
                                          border:1px solid var(--color5);
}
#DetailEstate .descagent .contact .agent h3 { color:var(--color11); font-size:1.2em; }
#DetailEstate .descagent .contact .agent .imgcontact { flex-wrap:nowrap; color:var(--color11); }
#DetailEstate .descagent .contact .agent .imgcontact{ }
#DetailEstate .descagent .contact .agent .imgcontact .desc{ flex-wrap:wrap; color:var(--color11); }
#DetailEstate .descagent .contact .agent .imgcontact .photo{  
}
#DetailEstate .descagent .contact .agent .imgcontact .photo .photocontent{  
    overflow:hidden; display:block; position:relative;
    width:80px; height:80px;
    -webkit-border-radius: 40px;
-moz-border-radius: 40px;
border-radius: 40px;
margin-right:10px; color:var(--color11);
}

#DetailEstate .descagent .contact .agent .imgcontact .photo img{ position:absolute;
                                                                 top: 50%; margin:auto;
  left: 50%;
  transform: translate(-50%, -50%); min-width:100%; min-height:100%; max-width:110%;
}
#DetailEstate .descagent .contact .agent .imgcontact .name{ font-weight:500; display:block; color:var(--color11); width:100%; }
#DetailEstate .descagent .contact .agent .imgcontact .contact{ color:var(--color11); width:100%; }
#DetailEstate .descagent .contact .agent .imgcontact .contact .email,#DetailEstate .descagent .contact .agent .imgcontact .contact .phone{ color:var(--color11); width:100%; }
#DetailEstate .descagent .contact .agent .imgcontact .contact .email a,#DetailEstate .descagent .contact .agent .imgcontact .contact .phone a{ color:var(--color11); text-decoration:none; font-weight:normal; }

#DetailEstate .parameters {  }
#DetailEstate .parameters .parameterscontent{ display:flex; flex-wrap:wrap; width:100%; justify-content:left; margin:auto; }
#DetailEstate .parameters .item{ width:48%; margin-right:2%; display:flex; flex-wrap:nowrap; padding:5px 0; border-bottom:1px solid var(--color5); }
#DetailEstate .parameters .itemlabel{ width:40%; font-weight:600; }
#DetailEstate .parameters .itemlabel:first-letter{ text-transform:uppercase; }
#DetailEstate .parameters .itemcontent{ width:60%; }
#DetailEstate .parameters .itemcontent:first-letter{  }
#DetailEstate #MapyCzHolder { width:100%; height:400px; }
#DetailEstate #MapyCzHolder .compass { top:50px; }
#DetailEstate .devproj { background-color:#ebebeb; margin-top:2em; }
#DetailEstate .devproj .devprojcontent{ padding:60px; }
#DetailEstate .devproj .devprojcontent .name { font-size:1.4em; font-weight:bold; padding:10px 0 0 0; }
#DetailEstate .devproj .devprojcontent .namebutton { width:100%; display:flex; flex-wrap:nowrap; }
#DetailEstate .devproj .devprojcontent .namebutton .namefield{ width:70%; }
#DetailEstate .devproj .devprojcontent .namebutton .buttonfield{ width:28%; padding-left:2%; }
#DetailEstate .devproj .devprojcontent .namebutton .buttonfield .button{ height:70px; line-height:70px; color:var(--color10); text-align:center; }
#DetailEstate .devproj .devprojcontent .namebutton .buttonfield .button:hover{ color:var(--color11); }
#DetailEstate .descagent .contact .iaminterested a { cursor:pointer; }
#DetailEstate .descagent .contact .documents { display: block;
    width: 100%;
    text-align: center;
    color: var(--color10);
    background-color: #2C3E50; margin-top: 2em; }
#DetailEstate .descagent .contact .documents a { 
    display: block;
    width: calc(100% - 30px);
    padding: 30px 15px;
    text-align: center;
    color: var(--color10);
    text-decoration: none;
    margin: auto;
    font-size: 1.4em;
}
#DetailEstate .documents {  }
#DetailEstate .documents ul { display:flex; justify-content:center; }
#DetailEstate .documents ul li{ list-style:none; background:none; padding:0 1em; }

#Mapa { height:400px; position:relative; width:100%; margin:0 0 2rem 0; }
#Mapa #map{ position:absolute; left:0; top:0; width:100%; height:100%; z-index:1;}
#Mapa #map .logocontrol { position:absolute; left:0; bottom:0; }
#Mapa #map ul li { background:none; }
#Mapa #map .layer-switcher .panel ul,#Mapa #map .layer-switcher .panel ul li{ margin:0; padding:0; background:none; list-style:none; font-size:1rem; }
#Mapa #map .layer-switcher .panel ul { padding-left:10px; margin-bottom:5px; }
#Mapa #map input[type=radio] { list-style:circle; }
#Interested h2 { text-align:center; display:table; width:auto; margin-left:auto; margin-right:auto; }




@media all and (max-width: 85em) {
    #DetailEstate .photogallery,#DetailEstate .descagent,#DetailEstate .parameters,#DetailEstate .map { width:96%; margin-left:2%; margin-right:2%; }
    #DetailEstate .descagent .contact .agent .imgcontact .photo .photocontent { width:60px; height:60px; }
    #DetailEstate .descagent .contact .iaminterested a { width:calc(100% - 30px); }
    #DetailEstate .descagent .contact .contact{ margin:0; }
}

@media all and (max-width: 85em) {

    #DetailEstate .descagent .descagentcontent { flex-wrap:wrap; }
    #DetailEstate .descagent .desccontent { width:100%; padding-right:0;  }
    #DetailEstate .descagent .contact { width:80%; margin-left:auto; margin-right:auto; margin-top:2em; } 
    #DetailEstate .descagent .contact .contactcontent{ flex-wrap:nowrap; }
    #DetailEstate .descagent .contact .iaminterested a { width:calc(80% - 30px); }
    #DetailEstate .descagent .contact .agent { margin-top:0; }
    #DetailEstate .descagent .contact .agent .imgcontact .photo .photocontent { width:80px; height:80px; }
    #DetailEstate .descagent .contact .iaminterested { position:relative; }
    #DetailEstate .descagent .contact .iaminterested a { top:0; bottom:0; left:0; right:0; margin-top:auto; margin-bottom:auto; position:absolute; display:table; }
    #DetailEstate .descagent .contact { padding-right:0; }
}

@media all and (max-width: 85em) {

    #DetailEstate .descagent .contact { width:100%; }

}

@media all and (max-width: 54em) {

    #DetailEstate .parameters .item { width:100%; }
    

}

@media all and (max-width: 48em) {
    #DetailEstate .devproj .devprojcontent .namebutton { flex-wrap:wrap; justify-content:center; }
    #DetailEstate .devproj .devprojcontent .namebutton .namefield { width:100%; }
    #DetailEstate .devproj .devprojcontent .namebutton .namefield .title{ text-align:center; }
    #DetailEstate .devproj .devprojcontent .namebutton .namefield .name{ text-align:center; }
    #DetailEstate .devproj .devprojcontent .namebutton .buttonfield { padding-left:0; width:50%; margin-top:1rem; }
}

@media all and (max-width: 42em) {
    #DetailEstate .descagent .contact .contactcontent { flex-wrap:wrap; }
    #DetailEstate .descagent .contact .iaminterested a { position:static; }
    #DetailEstate .descagent .contact .documents { margin-bottom:2em; }
}

@media all and (max-width: 36em) {
    #DetailEstate .descagent .desccontent .title { font-size:1.6rem;  }
}

@media all and (max-width: 27em) {
    #DetailEstate .descagent .contact .agent .imgcontact { flex-wrap:wrap; }
    #DetailEstate .descagent .contact .agent .imgcontact .photo { margin-bottom:1rem; }
    #DetailEstate .devproj .devprojcontent { padding:30px; }
    #DetailEstate .devproj .devprojcontent .namebutton .buttonfield { width:100%; }
}









    


