#Omne { background-color:var(--color4); display:table; width:100%; }
#Omne .content{ background-image:url(/images/lukasmachacek.jpg),url(/images/obchod-zprostredkovan.jpg);
                background-repeat:no-repeat; background-size:auto 60%,auto 60%; background-position:left 20% top,right 20% bottom; 
                display:table; width:100%; max-width:90%; margin:4rem auto;
}
#Omne .content .usertext { width:500px; margin:4rem auto; background-color:var(--color10); padding:60px; }
#Omne .content .usertext h2 { margin-top:0; padding-top:0; }
#Omne .buttons { text-align:center; }
#Omne .buttons .button{ margin:0 auto; }

#AnimateNumber { position:absolute; bottom:0; width:100%; z-index:5; }
#AnimateNumber {  }
#AnimateNumber #AnimateNumberContent { 
    padding:30px 0;
    max-width:1300px; display:flex; flex-wrap:nowrap; width:100%; margin:0 auto 5rem auto; 
    color: var(--color10);
    font-weight: 500;
    font-family:var(--font-title);
    /*background-color: rgba(93,90,90,0.6);*/
    background-color:var(--color3);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.6);

}
#AnimateNumber .BoxNumber { width:33.333%; text-align:center; }
#AnimateNumber .BoxNumber .Number{ font-size:3em; font-weight:bold; }
#AnimateNumber .BoxNumber .Popisek{ font-size:1.2em; text-transform:uppercase; }

#Reference { padding:3rem 0; background-color:var(--color4); font-family:var(--font-title); font-weight:500; }

#JakPracuji { padding:3rem 0; background-color:var(--color4); }
#JakPracuji #UserProcedure {  }
#JakPracuji #UserProcedure .content { margin-left:auto; margin-right:auto; justify-content:center; }
#JakPracuji #UserProcedure .item{ width:240px; padding:30px 30px 60px 30px; margin:30px 30px 0 0; background-color:white; position:relative; border:none; }
#JakPracuji #UserProcedure .item .ico{ width:100%; height:60px; text-align:center; }
#JakPracuji #UserProcedure .item .ico img{ max-width:100%; max-height:100%; }
#JakPracuji #UserProcedure .item .title{ width:100%; text-align:center; font-weight:400; color:var(--color3); font-family:var(--font-title); font-size:1.2rem; margin:10px 0; min-height:3em; }
#JakPracuji #UserProcedure .item .description{ font-weight:normal; font-family:var(--font-body); font-size:1rem; line-height:1.7; display:block; overflow:hidden;  }
#JakPracuji #UserProcedure .item .description .desccontent{  }
#JakPracuji #UserProcedure .item .linkexpand { position:absolute; bottom:30px; }
#JakPracuji .usertext { margin-top:2rem; font-family:var(--font-title); font-weight:300; font-size:1.2rem; }
#JakPracuji .usertext,#JakPracuji .usertext p { color:white; }
#JakPracuji h2{ color:white; }

#ServicesTrailer { background-color: var(--color3);  }
#ServicesTrailer h2{ color:var(--color10);  }
#ServiceTrailerList {   display: -webkit-flex; /* Safari */
  -webkit-flex-wrap: wrap; /* Safari 6.1+ */
  display: flex;  
  flex-wrap: wrap;
  justify-content: center;
  width:calc(100% - 240px); padding:3rem 120px;
  position:relative;
  background-color:var(--color3);
}
#ServiceTrailerList .item{ width:1000px; margin:15px auto; 
                              background-position:right top;
                              background-repeat:no-repeat; display:table;
}
#ServiceTrailerList .item h2{ color:black;
}
#ServiceTrailerList .item.vykup{ background-image:url(/Images/vykup-small.jpg); }
#ServiceTrailerList .item.odmena{ background-image:url(/Images/odmena-small.jpg); }
#ServiceTrailerList .item.odhad{ background-image:url(/Images/sluzby-odhad-small.jpg); }
#ServiceTrailerList .item{ background-image:url(/Images/vykup.jpg); }
#ServiceTrailerList .item .content { width:50%; padding:30px; margin-top:3rem; background-color:white; }
#ServiceTrailerList .item .content h2,#ServiceTrailerList .item .content h3{ text-align:left; padding-top:0; margin-top:0; font-family:var(--font-title); text-transform:none;
                                                                             font-size:3.6rem; margin-bottom:0; padding-bottom:2rem;
}
#ServiceTrailerList .item .content p { line-height:2; }
#ServiceTrailerList .item .content a.button { background-color:var(--color3); color:white; border-radius:0; display:table; width:auto; text-transform:none; padding:0 2rem; margin-top:2rem; }
#ServiceTrailerList .owl-nav button.owl-next, #ServiceTrailerList .owl-nav button.owl-prev { 
    position:absolute; width:60px; height:60px; display:block; margin:auto; top:0; bottom:0;
    background-position:center center; background-repeat:no-repeat; background-size:contain;
}
#ServiceTrailerList .owl-nav button.owl-next span, #ServiceTrailerList .owl-nav button.owl-prev span { display:none; }
#ServiceTrailerList .owl-nav button.owl-next { right:30px; background-image:url(/Images/arrow-next.svg); }
#ServiceTrailerList .owl-nav button.owl-prev { left:30px; background-image:url(/Images/arrow-prev.svg); }
#ServiceTrailerList .owl-dots { display:flex; width:100%; flex-wrap:wrap; justify-content:center; }
#ServiceTrailerList .owl-dots .owl-dot{ width:20px; height:20px; border:1px solid white; margin:5px;
                                           -webkit-border-radius: 10px;
                                            -moz-border-radius: 10px;
                                            border-radius: 10px;
}
#ServiceTrailerList .owl-dots .owl-dot.active { background-color:white; }

#Novinky { background-color:var(--color4); }
#Novinky h2{ color:white; }
#Novinky a.button.all { width:auto; display:table; padding:0 3rem; margin:3rem auto; color:white; }
#Novinky a.button.all:visited { color:white; }
#Novinky .buttons { width:100%; display:table; }
#Novinky .button{ background-color:var(--color3); }

.animateBox.reveal .button{ width:auto; display:table; padding:0 30px;  }
#JakPracuji .button { width:auto; display:table; padding:0 30px;  margin:30px auto; background-color:var(--color3); }
#Reference h2 { color:var(--color10); }
.HeaderBG { position:relative; }

#JakVamPomohu { background-color:var(--color3); display:block; box-sizing:border-box; padding-bottom:3rem;}
#JakVamPomohu h2{ color:var(--color10); }
#JakVamPomohu .boxes { margin-bottom:0; }
#JakVamPomohu .boxes{ display:flex; flex-wrap:wrap; justify-content:center; margin:2rem 0; }
#JakVamPomohu .boxes .item{ width:250px; padding:30px; margin:30px 15px 0 15px; background-color:var(--color9);
                          transition: transform .2s;
}
#JakVamPomohu .boxes .item:hover{ transform: scale(1.1); }
#JakVamPomohu .boxes .item .ico{ width:100%; font-size:3rem; line-height:1; text-align:center; color:var(--color3); }
#JakVamPomohu .boxes .item .title{ font-family:var(--font-title); font-weight:500; text-align:center; margin:1rem 0; font-size:1.8rem; color:var(--color3); }
#JakVamPomohu .boxes .item .desc{ text-align:center; }
#JakVamPomohu .boxes .item ul{ text-align:left; }
#JakVamPomohu .boxes .item ul li{ text-align:left; }


@media all and (max-width: 85em) {

/*    #Footer .footertextpage,.headertextpage .PageLayout { width:90%; margin-left:5%; margin-right:5%; }
    .PageLayout,.pagelayout { max-width:94%; }
    
    #headerContent { width:90%; margin-left:5%; margin-right:5%; }
    .footerform .blankspace .clientform { width:90%; }*/
    #Omne .content { background-position: left 0 top,right bottom; }
    
    
}
@media all and (max-width: 68em) {

    #Omne .content {
        background:none;
        background-image: url(/images/lukasmachacek.jpg);
        background-repeat: no-repeat;
        background-size: auto 60%;
        background-position: left top;
    }
    #Omne .content .usertext { margin-right:0; margin-left:auto;  }
    #JakPracuji #UserProcedure .item { width:calc(100% - 70px); margin-left:5px; margin-right:5px; margin-top:10px; }
    .table-flexiremover { width:98%; }

}

@media all and (max-width: 61em) {
    
    #Omne .content { background-size: auto 50%;
    background-position: left -25px top;
        }
    
    #ServiceTrailerList .item .content h2, #ServiceTrailerList .item .content h3 { font-size:2rem; }
    #ServiceTrailerList .item { background-size:60%; }
}

@media all and (max-width: 54em) {
    #BackgroundImageHeader .backtext h1 { font-size:2em; }
    #AnimateNumber .BoxNumber .Number { font-size:2em; }
    #AnimateNumber .BoxNumber .Popisek { font-weight:normal; }
    #Omne .content { background-position:center top -30px; background-size:auto 300px; }
    #Omne .content .usertext { margin-left:auto; margin-right:auto; margin-top:180px; }
    #ServiceTrailerList .item .content { width:calc(100% - 60px); margin-top:150px;  }
    #ServiceTrailerList .item { background-position:center top; background-size:auto 200px; }
}

@media all and (max-width: 42em) {
    #Omne .content .usertext { width:calc(100% - 60px); padding:30px; }
    #Certificates .content .item a .tit { font-size:1rem; }
    #Certificates .content .item a .subtit { font-size:1rem; }
    #Certificates .content .item { width:130px; height:190px; }
    #Omne .content { margin-bottom:0; }
    #ServiceTrailerList .item,#ServiceTrailerList .item.odhad,#ServiceTrailerList .item.vykup,#ServiceTrailerList .item.odmena { background:none; }
    #ServiceTrailerList .item .content { margin-top:0; }
    
}

@media all and (max-width: 36em) {
    #ServiceTrailerList .owl-nav button.owl-next, #ServiceTrailerList .owl-nav button.owl-prev { width:20px; }
    #ServiceTrailerList { width: calc(100% - 120px);
    padding: 3rem 60px; }
    #BackgroundImageHeader .backtext { font-size:1.2rem; }
    #AnimateNumber #AnimateNumberContent { margin-bottom:0; }
}

@media all and (max-width: 27em) {
    #ServiceTrailerList {
        width: calc(100% - 80px);
        padding: 0 40px;
        padding-bottom:30px;
    }
        #ServiceTrailerList .owl-nav button.owl-next { right:5px; }
        #ServiceTrailerList .owl-nav button.owl-prev { left:5px; }
}