﻿@media all and (max-width: 105em) {
    .EstateCards .item { width:23%; }
    
}
/*1360px*/
@media all and (max-width: 85em) {

    
    .PageLayout,.pagelayout { max-width:94%; }
    
    #ServiceTrailerList .item { width:100%; }
    .EstateCards .item { width:31.333%; }
    a.logo.large { height:130px; background-size:auto 100%; top:10px; }
}


/*1200px*/
@media all and (max-width: 75em) {

    a.logo { width:280px; }
    /*#ContactForm .formcontent h3 { font-size:1.6rem; }*/
    #Contact .item.form { width:100%; }
    #Contact .item.links { width:calc(100% - 400px); }
}

/*1088px*/
@media all and (max-width: 68em) {

    #TopMenu { display:none; }
    #MenuMobile { display:block; }
    #TopMenuMobile { display:block; position:fixed; right:0; top:0; width:0; height:100%;
                         -webkit-box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 34%);
                            -moz-box-shadow: 2px 2px 5px 0px rgba(0,0,0,0.34);
                            box-shadow: 2px 2px 5px 0px rgb(0 0 0 / 34%);
                            background-color: var(--color4);
                            z-index:300; overflow-y:scroll;
    }

    #MenuButtonClose { display:flex; flex-wrap:nowrap; justify-content:right; position:absolute; right:3.5rem; top:40px; }
    #MenuButtonClose .butt { width:30px; height:30px; display:block; line-height:30px; text-align:center;
                                  -webkit-border-radius: 15px;
                                -moz-border-radius: 15px;
                               border-radius: 15px;
                             border:1px solid var(--color10);background-color:var(--color10); color:var(--color11);
        }
    #MenuButtonClose .text { padding-right:10px; line-height:30px; color:var(--color10); }
    #MenuButton { display:flex; flex-wrap:nowrap; justify-content:right; position:absolute; right:1rem; top:30px; z-index:90; }
    #MenuButton .butt { width:50px; height:50px; display:block; line-height:50px; text-align:center;  }
    #MenuButton .butt .menubuttonimg { fill:var(--color10); max-width:40px; max-height:40px; margin-top:5px; }
    #MenuButton .text { color:var(--color10); padding-right:10px; line-height:50px; }
    #MenuMobile { }
    #MenuMobile ul,#MenuMobile ul li{ margin:0; padding:0; list-style:none; background:none; }
    #MenuMobile ul { width:260px; margin:auto; margin-left:15px; margin-top:80px; display:block; }
    #MenuMobile ul li { display:table; width:100%; }
    #MenuMobile ul li a{ padding:5px 10px 5px 10px; margin-bottom:5px; color:var(--color10); text-decoration:none; font-weight:500; display:block; border-bottom:1px solid var(--color3); }
    #MenuMobile h2 { margin:1rem 0; padding:0; color:var(--color10); text-align:left; font-size:1rem; }

    .EstateCards .item { width:350px; }
    #ContactBefore .boxes .item .contenttext a, #ContactBefore .boxes .item .contenttext { font-size:1.2rem; }
    
}
/*992px*/
@media all and  (max-width:61em) {

    /*#Footer .item.contact { width:40%; }
    #Footer .item.nabidky { display:none; }
    #Footer .item.usertext { width:60%; }*/
    
}

@media all and (max-width:54em) {

    #ContactBefore .boxes .item .contenttext a, #ContactBefore .boxes .item .contenttext { overflow-wrap: break-word; }
    #Contact .form, #Contact .map { width:100%; }
    #Contact .map { height:300px; }
    #BackgroundImageHeader .item { background-position:right -220px top -100px; }
    #Contact .social { width:100%; }
    #Contact .social h3 { text-align:center; }
    #Contact .socials { justify-content:center; }
    #Contact .social .content{ text-align:center; }
    #Contact .social  { float:none; margin:30px auto; display:block; overflow:hidden; }
    
    /*#Contact .social .content,#Contact .social .fb_iframe_widget span,#Contact .social .fb_iframe_widget span iframe { min-width:250px; max-width:300px; }*/
    #Contact .social .content { max-width:100%; }
    #Contact .social .fb_iframe_widget { width:100%; }
    #Contact .item.links { display:none; }
}


@media all and (max-width:48em) {

    /*.ImgW25 { width:50%; max-width:50%; }
    .ImgW25.Left,.ImgW25.Right{ width:calc(50% - 15px); }*/
    
}



@media all and (max-width:42em) {

    #ContactBefore .boxes .item .icotitle { font-size:1rem; }
    #ContactBefore .boxes .item .contenttext a, #ContactBefore .boxes .item .contenttext { font-size:1rem; }
    .EstateCards .item { width:98%; }
    
}

@media all and (max-width:36em) {

    /*.h2.shadowtitle { font-size:1.6rem; }
    .h2.shadowtitle .shadow { font-size:100%; top:1.5em; }
    h2 { font-size:1.6rem; }
    .ImgW50 { width:100%; max-width:100%; margin:0; }*/
    #ContactBefore .boxes { flex-wrap:wrap; }
        #ContactBefore .boxes .item { width:100%; }
    a.logo { width:240px; }
        
}

@media all and  (max-width:27em) {
    
   a.logo { width:200px; }
   #MenuButton .text,#MenuButtonClose .text { display:none; }
    #MenuMobile ul { margin-top:100px; }
    #MenuButtonClose { right:2rem; }
    #AnimateNumber .BoxNumber .Popisek { font-size:1rem; }
    h2 { padding: 2em 0 0.8em 0; font-size:1.6em; }
    #Omne .content .usertext { margin-bottom:0; }
    #Certificates .content .item { margin-bottom:0; }
        #ContactForm .formcontent { 
        width: 100%;
        padding: 0; }
    #ContactForm .item.send .button { width:100%; padding:0; }
    #ContactForm { padding-top:2rem; }

    /*#Contact .social .content { display:none; }*/
    #Contact .social,#Contact .social .content { min-width:0; }
    

}