/* OBECNE STYLY */

html { 
 background-color: white;
}

body{background: transparent url('../img/background.jpg') center center no-repeat;background-size: cover;background-attachment: fixed;}

* { margin: 0; padding: 0;font-family: 'Open Sans', sans-serif; outline: none;}

BODY, DIV, TABLE, CAPTION,ADRESS, IMG {
  border: 0;
  font-family: Arial;
  margin: 0;
  padding: 0;
}

h1{position: relative; text-align: left;color:#434343;font-size: 35px;font-weight: 600;margin-bottom: 20px;}
h1::after {
  content: '';
  position: absolute;
  bottom: -10px;
  left: 0;  
  width: 60px;
  height: 3px;
  background-color: #fecc00;
}
h1.center{text-align: center;}
h2{color:#434343;font-size: 30px;font-weight: 400;margin-bottom: 10px;}
h3{color:#434343;font-size: 25px;font-weight: 400;margin-bottom: 10px;}
h4{color:#434343;font-size: 20px;font-weight: 400;margin-bottom: 10px;}
h5{color:#434343;font-size: 18px;font-weight: 400;margin-bottom: 10px;}

@media only screen and ( max-width: 800px ){
    h1{font-size: 30px;}
    h2{font-size: 28px;}
}

p{color:#555;font-size: 16px;line-height: 30px;letter-spacing: 0.3px;margin-bottom: 20px;font-weight: 400;}
b{color:#555;font-size: 16px;letter-spacing: 0.3px;margin-bottom: 20px;font-weight: 600;}
strong{font-weight: 600;}
div.yellow{padding: 20px;background-color: #fecc00;color:#555;font-size: 18px;letter-spacing: 0.3px;margin-bottom: 20px;font-weight: 400;}
div.yellow strong{font-weight: 600;text-transform: uppercase;}

a{color: #fecc00;font-weight: 600;text-decoration: none;}
a:hover{text-decoration: underline;}
a.phone{display: inline-block;background: transparent url('../img/phone_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}
a.mobil{display: inline-block;background: transparent url('../img/phone_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}
a.email{display: inline-block;background: transparent url('../img/email_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}
a.mail{display: inline-block;background: transparent url('../img/email_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}
a.web{display: inline-block;background-color: #fecc00;padding-left: 0px;padding: 5px;color:#434343;}

/*ol,ul*/
ul{display: inline-block;text-align: left;position: relative;list-style-position: inside;line-height: 200%;list-style: none!important;margin-left: 20px;margin-bottom: 20px;}
li{position: relative;color:#555;font-size: 16px;line-height: 200%;letter-spacing: 0.3px;font-weight: 400;}
li:before {content: '';color: #fecc00;margin-right: 20px;border-radius: 0;width: 20px;height: 5px;background-color: #fecc00;display: inline-block;vertical-align: middle;}
li strong{font-weight: 600;}
ul li span{display: inline-block!important;}

#horizontalTab ul{display: block;}
#horizontalTab li.r-tabs-tab{padding: 0!important;margin: 0!important;}
#horizontalTab li.r-tabs-tab:before {content: none!important;padding: 0!important;margin: 0!important;}

/*table*/
#table{overflow-x: auto;}
table{width: 100%;border-collapse: collapse;border: none;margin-bottom: 10px;}
table p{margin: 0!important;}
th{border: 1px solid #9d9fa1;color:#9d9fa1;font-size: 16px;font-weight: 500;text-align: center;padding: 10px;}
td{border: 1px solid #9d9fa1;color:#9d9fa1;font-size: 16px;font-weight: 400;text-align: center;padding: 10px;}
tr{}

@media only screen and ( max-width: 800px ){
    table{width: 100%!important;}
}

hr{border: 0;height: 1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); margin-bottom: 50px;margin-top: 50px;}

.toLeft {
  float: left;
}

.toRight {
  float: right;
}

.hidden{display: none;}

.grecaptcha-badge{z-index: 99;}

.toCenter{display: block;text-align: center;margin: 0 auto;}
.halfwidth{width: 50%;}
.right{text-align: right;}
.cleaner{display: block;height: 0;clear: both;overflow: hidden;content: ' ';font-size: 0;}
.fb-like{top:-5px;}
.seznam{width: 100%; font-size: 12px; text-align: left;}
.seznam th{padding: 5px;color: black!important;}
.seznam td{padding: 5px;color: black!important;}

.msgOK{position: relative;z-index: 99;background-color: #438bc5;  font-weight: 900; font-size: 15px; color: white; text-align: center; padding: 10px;}
.msgError{position: relative;z-index: 99;background-color: #E21A1A;  font-weight: 900; font-size: 15px; color: white; text-align: center; padding: 10px;}

#dokumenty{text-align: left;margin: 20px 0;}
#dokumenty a{font-size: 15px;}
#dokumenty div.editable{display: inline-block;}
#dokumenty a.del{display: inline-block;background: transparent url('../img/kos_foto.png') no-repeat; width:15px; height:15px; border: none;}
#dokumenty b.drag{display: inline-block;background: transparent url('../img/drag_foto.png') no-repeat; width:15px; height:15px; border: none;margin: 0;}

.vice{position: relative;margin-top: 20px;display: inline-block;color: #fecc00!important;text-decoration: none;font-size: 15px!important;font-weight: 700!important;padding: 10px;border-radius: 0px;transition: all 0.9s;text-transform: uppercase;}
.vice:hover{color: #434343!important;text-decoration: none;}

.vice:before {    
  background: none repeat scroll 0 0 transparent;
  top: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fecc00;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.vice:hover:before { 
  width: 100%; 
  left: 0; 
}

.vice:after {    
  background: none repeat scroll 0 0 transparent;
  bottom: 0;
  content: "";
  display: block;
  height: 2px;
  left: 50%;
  position: absolute;
  background: #fecc00;
  transition: width 0.3s ease 0s, left 0.3s ease 0s;
  width: 0;
}
.vice:hover:after { 
  width: 100%; 
  left: 0; 
}

.button {
    position: relative;
    display: inline-block;
    margin: 10px;
    padding: 20px 10px 20px 20px;
    color:#fecc00;
    font-size: 16px;
    font-weight: 700;
    border-top: 2px solid #fecc00;
    border-bottom: 2px solid #fecc00;
    text-align: center;
    transition: all 0.9s;
    text-transform: uppercase;
    margin-top: 20px;
}
 
.button:hover{color: #fecc00;border-top: 2px solid transparent;border-bottom: 2px solid transparent;text-decoration: none;}

/* LAYOUT */
#panelMiddle{min-height: 100%;position: relative;width: 100%;z-index: 94;}
.panelMiddleIn{max-width: 1600px;padding: 0 10px; margin:0 auto;}
#panelStred{padding-top: 130px;}
#panelStred.uvod{padding-top: 0;}

#panelTop{position: fixed;width:100%;z-index: 99;box-sizing: border-box;transition: all 0.5s;background-color: rgba(255, 255, 255, 1);box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.15);}

.fixed{top:0;}

.visible{top:0px!important;}
.invisible{top:-147px!important;}

#panelContent{text-align: center;background: none;}

/* Kontaktni lista */
#kontakt{        
    text-align: right;
}

#kontakt_side{    
    text-align: right;
    position: relative;
    padding: 0;
    background-color: #fecc00;
    display: inline-block;
    align-items: center;
    gap: 0;
}

#kontakt_side p{
    display: inline-block;
    font-size: 14px;
    font-weight: 600;
    margin: 0;
}

#kontakt_side a{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: #333;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    padding: 12px 20px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    transition: all 0.3s ease;
    border-left: 1px solid rgba(0,0,0,0.1);
    position: relative;
    background: none;
}

#kontakt a:first-child{
    border-left: none;
}

#kontakt_side a:hover{
    background-color: #333;
    color: #fecc00;
    text-decoration: none;
}

/* Ikony jako pseudoelementy */
#kontakt_side a::before{
    content: '';
    display: inline-block;
    width: 18px;
    height: 18px;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    transition: filter 0.3s ease;
}

#kontakt_side a.phone::before,
#kontakt_side a.mobil::before{
    background-image: url('../img/phone_dark.png');
}

#kontakt_side a.email::before{
    background-image: url('../img/email_dark.png');
}

#kontakt_side a.adress::before{
    background-image: url('../img/adress_dark.png');
}

#kontakt_side a.fb::before{
    background-image: url('../img/fb_dark.png');
}

#kontakt_side a.instagram::before{
    background-image: url('../img/instagram_dark.png');
}

/* Hover - bila ikona */
#kontakt_side a:hover::before{
    filter: brightness(0) invert(1);
}

@media only screen and (max-width: 900px){
    #kontakt_side a{
        padding: 5px;
        font-size: 12px;
    }
}

#jazyky{margin-left:10px;float: right;text-align: center;padding: 19px 0;font-size: 0;}
#jazyky a{font-size: 0;margin: 0 2px;padding: 0;}

#logo{float: left;padding:10px 0;text-align: center;}
#logo a{text-decoration: none;width: 100%;}
#logo a img{max-width:100% !important;height:auto !important;}

@media only screen and ( max-width: 700px ){
    #panelKontakt{background: none;}
    #kontakt{display: none;}    
    #jazyky{background-color: #fecc00;padding: 5px;}
}

#panelMenu{position: fixed;width:100%;z-index: 98;background-color: #3974ac;}

#panelVideo{
    position: relative;
    width: 100%;
    max-width: 1920px;
    height: auto;
    overflow: hidden;
    z-index: 97;
    margin: 0 auto;
}

#panelVideo .utlumeni{
    position: absolute;
    top: 0;
    left: 0;
    z-index: 6;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1) 100%);
}

#panelVideo video{
    position: relative;
    width: 100%;
    display: block;
}

#panelImage{position: relative;max-width: 1920px;margin: 0 auto;max-height: 100vh;overflow: hidden;min-height: 400px;}
#panelImage img{width: 100%;}

/* Slogan */
#slogan{
    position: absolute;
    left: 50%;
    bottom: 15%;
    transform: translateX(-50%);
    background: none;
    text-align: center;
    z-index: 99;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
}

#slogan p{
    font-size: 22px;    
    font-weight: 400;
    color: #fff;
    letter-spacing: 0.5px;
    margin-bottom: 25px;
}

#slogan strong{
    display: block;
    font-size: 48px;    
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;        
}

#slogan strong span{
    color: #fecc00;
}

/* Slogan tlacitka */
#slogan p a{
    display: inline-block;
    padding: 15px 35px;
    margin: 5px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #fecc00;
    background-color: #fecc00;
    color: #333;
}

#slogan p a:hover{
    background-color: transparent;
    color: #fff;
    text-decoration: none;
}

@media only screen and (max-width: 1000px){
    #panelVideo{padding-top: 130px;}
}

@media only screen and (max-width: 900px){
    #slogan{
        padding: 0 10px;
    }

    #slogan strong{
        font-size: 36px;
    }

    #slogan p{
        font-size: 18px;
        line-height: 18px;
    }    
}

@media only screen and (max-width: 600px){
    #slogan{
        bottom: 10%;
    }

    #slogan strong{
        font-size: 28px;
    }

    #slogan p{
        font-size: 16px;
        line-height: 16px;
        margin-bottom: 20px;
    }    
}

@media only screen and (max-width: 500px){
    #slogan{
    position: relative;
    left: 0;
    bottom: 0;
    transform: none;
    background-color: #434343;
    text-align: center;
    z-index: 99;
    width: 100%;
    max-width: 1200px;
    padding: 50px 20px 20px 20px;
    box-sizing: border-box;
    }

    #slogan p a{
        width: 100%;
        box-sizing: border-box;
        margin: 5px 0;
    }

}

#panelReference{max-width: 1920px;margin: 0 auto;}

#reference_hp{text-align: center;padding-bottom: 10px;}
#reference_hp .reference{position: relative;text-align: center;font-size: 0;vertical-align: top;cursor: pointer;}
#reference_hp div.img{position: relative;display: inline-block;text-align: center;width: 200px;aspect-ratio:1/1;border-radius: 100%;border: 5px solid #fecc00;overflow: hidden;box-sizing: border-box;margin-bottom: 20px;}
#reference_hp div.img img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: all 0.9s;}
#reference_hp div.img:hover img{transform: translate(-50%, -50%) scale(1.1);}
#reference_hp  h5{font-size: 15px;font-weight: 900;color: #434343;text-transform: uppercase;}
#reference_hp  div.perex{margin-bottom: 10px;}
#reference_hp  p{text-align: center;font-size: 16px;font-weight: 400;color: #434343;letter-spacing: 0.3px;}
#reference_hp  a{color:#434343;font-size: 16px;font-weight: 400;letter-spacing: 0.3px;margin-top: 10px;text-align: center;}
#reference_hp  a:hover{color:#fecc00;text-decoration: none;}

#panelAktivity{
    align-items: center;
    position: relative;
    max-width: 1920px;
    margin: 0 auto;
    z-index: 98;
    background-color: transparent;
}

#panelAktivity div.licha,
#panelAktivity div.suda{
    display: flex;
    justify-content: center;
    align-items: stretch;
    text-align: left;
    position: relative;
    width: 100%;
    overflow: hidden;
    margin-bottom: 60px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
}

#panelAktivity div.licha{
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

#panelAktivity div.suda{
    background: linear-gradient(135deg, #f8f9fa 0%, #fff 100%);
}

/* Obrazky */
#panelAktivity div.licha div.img{
    position: relative;
    overflow: hidden;
    width: 45%;
    order: 1;
    font-size: 0;
}

#panelAktivity div.suda div.img{
    position: relative;
    overflow: hidden;
    width: 45%;
    order: 2;
    font-size: 0;
}

#panelAktivity div.img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease, filter 0.6s ease;
}

#panelAktivity div.img video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

#panelAktivity div.licha:hover div.img img,
#panelAktivity div.suda:hover div.img img{
    transform: scale(1.05);
}

/* Text */
#panelAktivity div.text{
    overflow: hidden;
    box-sizing: border-box;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#panelAktivity div.licha div.text{
    flex: 1;
    order: 2;
}

#panelAktivity div.suda div.text{
    flex: 1;
    order: 1;
}

#panelAktivity div.nadpis{
    text-align: center;
}

#panelAktivity h2{
    position: relative;
    text-align: left;
    color: #434343;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#panelAktivity h2::after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #fecc00;
    transition: width 0.3s ease;
}

#panelAktivity div.licha:hover h2::after,
#panelAktivity div.suda:hover h2::after{
    width: 100px;
}

#panelAktivity div.text p{
    color: #555;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

#panelAktivity div.text .button{
    display: inline-block;
    margin-top: 20px;
    padding: 14px 35px;
    background-color: #fecc00;
    color: #333;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 2px solid #fecc00;
}

#panelAktivity div.text .button:hover{
    background-color: #333;
    color: #fecc00;
    border-color: #333;
}

@media only screen and ( max-width: 1000px ){
    #panelAktivity div.licha,
    #panelAktivity div.suda{
        flex-direction: column;
        margin-bottom: 40px;
    }

    #panelAktivity div.suda{
        flex-direction: column;
    }

    #panelAktivity div.licha div.img,
    #panelAktivity div.suda div.img{
        width: 100%;
        order: 1;
        min-height: 300px;
    }

    #panelAktivity div.licha div.text,
    #panelAktivity div.suda div.text{
        order: 2;
        text-align: center;
        padding: 40px 30px;
    }

    #panelAktivity h2{
        display: inline-block;
        font-size: 24px;
    }

    #panelAktivity h2::after{
        left: 50%;
        transform: translateX(-50%);
    }

    #panelAktivity div.licha::before,
    #panelAktivity div.suda::after{
        width: 100%;
        height: 5px;
        top: 0;
        left: 0;
        right: auto;
    }
}

@media only screen and ( max-width: 600px ){
    #panelAktivity div.text{
        padding: 30px 20px;
    }

    #panelAktivity h2{
        font-size: 20px;
    }

    #panelAktivity div.licha div.img,
    #panelAktivity div.suda div.img{
        min-height: 220px;
    }
}

#panelMapa{padding: 0;}
#panelMapa h2{color:#5a5a5a;font-size: 35px;font-weight: 400;margin-bottom: 20px;text-align: center;}

#mapa{width: 100%;height: 500px;margin-top: 50px;}

#panelBottom{width:100%;background-color: #101010;}
#panelFooter{width:100%;background-color: #fecc00;}

#bottom{position: relative; padding: 100px;color:#ccc;font-size: 18px;line-height: 25px;font-weight: 400;margin-bottom: 10px;}
#bottom h3{color:#ccc;font-size: 30px;font-weight: 400;text-transform: uppercase;}
#bottom p{color:#ccc;font-size: 18px;line-height: 25px;font-weight: 400;margin-bottom: 10px;}
#bottom a{color:#fecc00;font-size: 18px;font-weight: 400;}
#bottom a:hover{text-decoration: underline;}
#bottom a.phone{font-size: 17px;font-weight: 600;display: inline-block;background: transparent url('../img/phone_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}
#bottom a.email{font-size: 17px;font-weight: 600;display: inline-block;background: transparent url('../img/email_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}

#footer{padding: 50px;}
#footer p{text-align: right;font-size: 17px;font-weight: 600;color: black;margin-bottom: 0;}
#footer a{color:black;font-size: 17px;font-weight: 600;}

@media only screen and ( max-width: 1200px ){    
    #bottom{text-align: center;margin: 0;}
    #bottom div{float: none!important;padding: 0; margin:20px 0!important;width: 100%!important;text-align: center!important;}    
    #bottom p{text-align: center!important;}
    #bottom ul{margin:20px 0!important;line-height: 120%;text-align: center; list-style-type: none;}
    #bottom li{text-align: center!important;}
    #footer{text-align: center;}
    #footer p{float: none;margin: 0!important; text-align: center;}
}

@media only screen and ( max-width: 500px ){    
    #bottom{text-align: center;margin: 0; padding: 50px 0;}    
}

#edit{float: right; margin: 5px; width: 130px;}

#upload{float: left; margin: 5px;}
#upload label{float: left; padding-top: 4px; font-size: 13px; color: white; margin-left: 10px;}
#upload b{cursor: pointer; float: left;}
#upload input{float: left; margin-left: 10px;}
#upload select{float: left;margin-left: 10px;height: 21px;}
#upload .popis{height: 21px;}
#upload div.img{display: none; float: left; padding: 5px; background-color: #546a76;color: white;}
#upload div.file{display: none; float: left; padding: 5px; background-color: #546a76;color: white;}

#podmenu{text-align: center;}
#podmenu a{font-size: 15px; font-weight: 800;text-decoration: none!important;}
#podmenu a:hover{text-decoration: underline!important;}

/* panelCont - sekce s obrazkem a textem */
#panelCont{
    display: flex;
    justify-content: center;
    align-items: stretch;
    overflow: hidden;
    position: relative;
    margin-bottom: 60px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.1);
    background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
}

.uvod #panelCont{
    flex-direction: row-reverse;
}

/* Prava cast - obrazek/video */
#panelRight{
    order: 2;
    position: relative;
    font-size: 0;
    width: 45%;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
    padding: 0;
}

#panelRight img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

#panelCont:hover #panelRight img{
    transform: scale(1.05);
}

#panelRight video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Leva cast - obrazek/video */
#panelLeft{
    order: 1;
    position: relative;
    font-size: 0;
    width: 45%;
    overflow: hidden;
    text-align: center;
    box-sizing: border-box;
}

#panelLeft img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.6s ease;
}

#panelCont:hover #panelLeft img{
    transform: scale(1.05);
}

#panelLeft video{
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Text vlevo */
#panelMainLeft{
    flex: 1;
    order: 1;
    overflow: hidden;
    box-sizing: border-box;
    text-align: left;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#panelMainLeft div.popis{
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
}

#panelMainLeft div.popis h1{
    position: relative;
    color: #434343;
    font-weight: 700;
    font-size: 28px;
    margin-bottom: 30px;
    text-transform: uppercase;
    letter-spacing: 1px;
}

#panelMainLeft div.popis h1::after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background-color: #fecc00;
    transition: width 0.3s ease;
}

#panelCont:hover #panelMainLeft div.popis h1::after{
    width: 100px;
}

#panelMainLeft div.popis p{
    color: #555;
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
}

#panelMainLeft div.perex p{
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

#panelMainLeft div.logo{
    display: inline-block;
    max-width: 280px;
    margin: 20px 0;
}

#panelMainLeft div.logo img{
    max-width: 100%;
}

#panelMainLeft img.logo{
    float: left;
}

/* Text vpravo */
#panelMainRight{
    flex: 1;
    order: 1;
    overflow: hidden;
    box-sizing: border-box;
    text-align: left;
    padding: 60px 80px;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#panelMainRight div.popis{
    text-align: left;
    box-sizing: border-box;
    overflow: hidden;
}

#panelMainRight div.perex p{
    text-align: left;
    font-size: 18px;
    font-weight: 400;
    color: #555;
    line-height: 1.8;
    margin-bottom: 20px;
}

#panelMainRight div.logo{
    display: inline-block;
    max-width: 280px;
    margin: 20px 0;
}

#panelMainRight div.logo img{
    max-width: 100%;
}

#panelMainRight img.logo{
    float: left;
}

.uvod #panelMainCenter {
    text-align: left;
    position: absolute;
    left: 5%;
    bottom: 15%;
    /*transform: translateY(-50%);*/
    display: inline-block;
    padding: 10px;
    /*overflow: hidden;*/
    color: #fff;  
    box-sizing: border-box;
    z-index: 99;  
    width: 1200px;
    -webkit-animation:3s ease-out forwards blurup;animation:3s ease-out forwards blurup;
}

.uvod #panelMainCenter p{display: block;position: relative;font-size: 18px;line-height: 30px;font-weight: 400;color: #252a35;text-align: left;}
#panelMainCenter{overflow: hidden;box-sizing: border-box;text-align: center;padding: 50px 0;}
#panelMainCenter div.popis{text-align: left;box-sizing: border-box;overflow: hidden;}
#panelMainCenter div.logo{display: inline-block;max-width: 280px;margin: 20px 0;}
#panelMainCenter div.logo img{max-width: 100%;}
#panelMainCenter img.logo{float: left;}

#panelMainCenter hr{border: 0;height: 1px;background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0)); margin-bottom: 50px;margin-top: 50px;}

#panelMain{flex: 2;order: 2;width: auto;overflow: hidden;box-sizing: border-box;text-align: center;}
#panelMain.edit{overflow: unset;}
#panelMain div.popis{text-align: left;box-sizing: border-box;overflow: hidden;padding: 20px;}
#panelMain div.logo{display: inline-block;max-width: 280px;margin: 20px 0;}
#panelMain div.logo img{max-width: 100%;}
#panelMain img.logo{float: left;}

@media only screen and ( max-width: 1300px ){            
    .uvod #panelMainCenter {width: auto;left: 0;top: 50%;bottom: auto;transform: translateY(-50%);padding: 50px;}
}

@media only screen and ( max-width: 900px ){
    .uvod #panelMainCenter {position: relative;top: 0;left: 0;transform: none;padding: 10px;text-align: center;}
    .uvod #panelMainCenter p{display: block;position: relative;font-size: 16px;line-height: 30px;font-weight: 500;color: #505050;text-align: center;}
    #panelMain div.popis{text-align: center;}
    #panelMain div.popis img{float: none!important;width: auto!important;max-width: 100%!important; height: auto!important;margin: 10px 0!important;}
    #panelMain h1{display: inline-block;}

    #panelCont{
        flex-direction: column;
        margin-bottom: 40px;
    }

    .uvod #panelCont{
        flex-direction: column;
    }

    #panelCont::before,
    .uvod #panelCont::before{
        width: 100%;
        height: 5px;
        top: 0;
        left: 0;
        right: auto;
    }

    #panelMain{width: 100%;}

    #panelRight{
        width: 100%;
        margin: 0;
        padding: 0;
        order: 1;
        min-height: 300px;
    }

    .uvod #panelRight{
        width: 100%;
        margin: 0;
        padding: 0;
    }

    #panelMainLeft{
        order: 2;
        text-align: center;
        padding: 40px 30px;
    }

    #panelMainLeft div.popis{
        text-align: center;
    }

    #panelMainLeft div.popis h1{
        display: inline-block;
        font-size: 24px;
    }

    #panelMainLeft div.popis h1::after{
        left: 50%;
        transform: translateX(-50%);
    }
}

@media only screen and ( max-width: 500px ){
    #panelMain h1{display: inline-block;text-align: center;}
    #panelCont{margin: 0 0 30px 0;}

    #panelMainLeft{
        padding: 30px 20px;
    }

    #panelMainLeft div.popis h1{
        font-size: 20px;
    }

    #panelRight{
        min-height: 220px;
    }
}

#fotky{text-align: center;box-sizing: border-box;}
#fotky h2{position: relative;text-align: left;color:#52514c;font-size: 25px;font-weight: 400;margin-bottom: 30px;}
#fotky div.fotky{display: inline-block;width: 250px;height: 250px;overflow: hidden;box-sizing: border-box;position: relative;margin: 5px;font-size: 0;vertical-align: top;}
#fotky img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: all 0.9s;}
#fotky div.fotky:hover img{transform: translate(-50%, -50%) scale(1.1);}
#fotky div.fotky:hover .editable{opacity: 1;text-decoration: none;}
#fotky div.fotky:hover .editable_content{opacity: 1;}
#fotky a.editable{display: table;text-align: center;z-index: 99;overflow: hidden;position: absolute;top: 0;left: 0;width: 100%;height: 100%;padding: 20px;transition: all 0.9s;box-sizing: border-box;}
#fotky div.editable{display: table;text-align: center;z-index: 99;overflow: hidden;position: absolute;top: 10%;left: 10%;width: 80%;height: 80%;padding: 0;transition: all 0.9s;box-sizing: border-box;}
#fotky .editable .editable_content{position: relative;opacity: 0;z-index: 99;font-size: 13px;font-weight: 500;letter-spacing: 0.3px;text-transform: uppercase;display: table-cell;vertical-align: middle;text-align: center;color: #505050;padding: 10px;border: 1px solid white;background: none repeat scroll 0 0 rgba(255, 255, 255, 0.6);transition: all 0.9s;}
#fotky a.del{position:absolute;top: 3px; right:3px;background: transparent url('../img/kos_foto.png') no-repeat; width:15px; height:15px; border: none;}
#fotky b.drag{position:absolute;top: 3px; left:3px;background: transparent url('../img/drag_foto.png') no-repeat; width:15px; height:15px; border: none;}

#fotky{text-align: center;box-sizing: border-box;margin-top: 50px;margin-bottom: 50px;}
#fotky h2{display: inline-block;position: relative;text-align: center;color:#434343;font-weight: 600;border-top: 2px solid #fecc00;border-bottom: 2px solid #fecc00;margin-bottom: 40px;text-transform: uppercase;padding: 10px;}
#fotky div.fotky{display: inline-block;position: relative;width: 250px;height: 250px; font-size: 0;margin: 10px;vertical-align: top;background-color: #434343;}
#fotky .fotky a{display: block;position: relative;width: 100%;height:100%;font-size: 0;text-align: center;overflow: hidden;}
#fotky .fotky a:hover{text-decoration: none;}
#fotky .fotky div.img{overflow: hidden;}
#fotky a img{position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);opacity: 1;transition: all 0.9s;}
#fotky a:hover img{transform: translate(-50%, -50%) scale(1.1);opacity: 0.5;}
#fotky a span{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);text-align: center;color:white;font-size: 17px;font-weight: 600;opacity: 0;transition: opacity 1s;}
#fotky a:hover span{opacity: 1;}
#fotky a.del{position:absolute;top: 3px; left:21px;background: transparent url('../img/kos_foto.png') no-repeat; width:15px; height:15px; border: none;}
#fotky div.edit{cursor: pointer; z-index: 90;position:absolute; top: 3px; left:3px;background: transparent url('../img/pencil_foto.png') no-repeat; width:15px; height:15px; border: none;}
#fotky form{display: none; width:180px; float: left; position: relative; top:15px; padding: 5px; background-color: #546a76;color: white;}
#fotky form label{float: left; margin-right: 5px;font-size: 12px; color: white;}
#fotky input{padding: 2px; margin-bottom: 5px;}
#fotky form input.button{text-align: center; color: black; background-color: white; border: none;}

#certifikaty{text-align: center;box-sizing: border-box;margin-top: 0px;margin-bottom: 50px;}
#certifikaty div.fotky{display: inline-block;position: relative;width: 250px;font-size: 0;margin: 10px;vertical-align: top;}
#certifikaty .fotky a{display: block;position: relative;width: 100%;height:100%;font-size: 0;text-align: center;}
#certifikaty .fotky a:hover{text-decoration: none;}
#certifikaty .fotky div.img{width: 100%;overflow: hidden;box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;margin-bottom: 10px;}
#certifikaty a img{max-width: 100%;opacity: 1;transition: all 0.9s;}
#certifikaty a:hover img{transform: scale(1.1);}
#certifikaty a span{text-align: center;color:#434343;font-size: 17px;font-weight: 600;}
#certifikaty a.del{position:absolute;top: 3px; left:21px;background: transparent url('../img/kos_foto.png') no-repeat; width:15px; height:15px; border: none;}
#certifikaty div.edit{cursor: pointer; z-index: 90;position:absolute; top: 3px; left:3px;background: transparent url('../img/pencil_foto.png') no-repeat; width:15px; height:15px; border: none;}
#certifikaty form{display: none; width:180px; float: left; position: relative; top:15px; padding: 5px; background-color: #546a76;color: white;}
#certifikaty form label{float: left; margin-right: 5px;font-size: 12px; color: white;}
#certifikaty input{padding: 2px; margin-bottom: 5px;}
#certifikaty form input.button{text-align: center; color: black; background-color: white; border: none;}

#odkazy{background-color: #f9f9f9;padding: 100px 0;text-align: center;display: flex;flex-flow: row wrap;justify-content: center;margin-top: 50px;background: transparent url('../img/background2.jpg') center center no-repeat;background-size: cover;background-attachment: fixed;}
#odkazy .odkaz{display: inline-block;width: 250px;vertical-align: top;box-sizing: border-box;margin: 10px;}
#odkazy .img{position: relative;display: inline-block;text-align: center;width: 100%;aspect-ratio:4/3;overflow: hidden;box-sizing: border-box;margin-bottom: 20px;}
#odkazy .img img{max-width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: all 0.9s;}
#odkazy .img:hover img{transform: translate(-50%, -50%) scale(1.1);}
#odkazy h2{text-align: left;}
#odkazy h5{font-size: 17px;font-weight: 600;color: #434343;text-transform: uppercase;}

@media only screen and ( max-width: 800px ){
    #odkazy h2{text-align: center;}
}

#reference{text-align: center;}
#reference .reference{position: relative;float: left;width: 25%;text-align: center;font-size: 0;vertical-align: top;cursor: pointer;}
#reference div.img{width: 100%;overflow: hidden;padding-top: 74%;}
#reference div.img img{position: absolute;top: 50%;left: 50%;max-width: 100%;transform: translate(-50%, -50%);transition: all 0.9s;}
#reference div.text{display: table;opacity:0;position: absolute;left: 0;top: 0;width: 100%;height: 100%;text-align: center;padding: 20px;box-sizing: border-box;background-color: rgba(254,204,0,0.8);}
#reference div.text p{text-align: left;}
#reference h3{display: table-cell;vertical-align: middle;position: relative;line-height: 150%;font-size: 20px;font-weight: 900;text-transform: uppercase;color: white;text-align: center;}
#reference .reference:hover div.text{opacity: 1;}
#reference a:hover{text-decoration: none;}

@media only screen and ( max-width: 1200px ){
    #reference .reference{width: 33.333333%;}
}

@media only screen and ( max-width: 900px ){
    #reference .reference{width: 50%;}
}

@media only screen and ( max-width: 600px ){
    #reference .reference{width: 100%;}
}

/* NABIDKY - Realitni karty */
#panelNabidky{padding: 50px;background-color: #f5f5f5; margin-bottom: 50px;}
#nabidky{display: flex;flex-flow: row wrap;justify-content: center;text-align: center;}
#nabidky.hp{display: inline-block;}
#nabidky .nabidka{display: inline-block;text-align: left;box-sizing: border-box;width: 350px;position: relative;z-index: 98;background-color: white;margin: 20px;overflow: hidden;border-radius: 0;}
#nabidky.kosmetika .nabidka{width: 250px;}
#nabidky .aktuality{margin: 50px;}
#nabidky .nabidka a.full{position: absolute;z-index: 10;top: 0;left: 0;right: 0;bottom: 0;}
#nabidky div.img{position: relative;width: 100%;aspect-ratio:16/9;overflow: hidden;border:none;background-color: white;border-top-left-radius: 5px;border-top-right-radius: 5px;}
#nabidky.kosmetika div.img{aspect-ratio:1/1;}
#nabidky div.img img{max-width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: all 0.9s;}
#nabidky .nabidka:hover div.img img{transform: translate(-50%, -50%) scale(1.1);}
#nabidky div.text{padding: 20px;/*height: 120px;*/}
#nabidky div.stitky{position: absolute;z-index: 90;top: 10px;left: 0;text-align: left;}
#nabidky div.stitky p{display: inline-block;position: relative; padding:5px 10px;margin-bottom: 5px;text-align: right;color: white;font-size: 13px;font-weight: 700;background-color: rgba(0,60,120,0.8);}
#nabidky h5{position: relative;display: inline-block;text-align: left;color:#003c78;font-size: 19px;font-weight: 500;margin-bottom: 10px;text-transform: uppercase;}
#nabidky.kosmetika h5{font-size: 16px;}
#nabidky p.cena{text-align: left;color: #505050;font-size: 19px;font-weight: 500;margin-bottom: 10px;}
#nabidky p.cena span{font-size: 15px;font-weight: 500;}
#nabidky .bottom{position: absolute;bottom: 20px;left: 0;padding:0 20px;width: calc(100% - 40px);text-align: center;}

/* NABIDKY SLIDER - aktivity.tpl */
#nabidky.slide{
    display: block;
    padding: 0 50px;
}

#nabidky.slide .nabidka{
    display: block;
    width: auto;
    margin: 10px 15px;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    overflow: hidden;
}

#nabidky.slide .nabidka:hover{
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

#nabidky.slide .nabidka a.full{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#nabidky.slide div.img{
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #f0f0f0;
}

#nabidky.slide div.img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1);
    transition: transform 0.6s ease;
}

#nabidky.slide .nabidka:hover div.img img{
    transform: scale(1.08);
}

/* Stitky ve slideru */
#nabidky.slide div.stitky{
    position: absolute;
    top: 15px;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#nabidky.slide div.stitky p{
    display: inline-block;
    background-color: #fecc00;
    color: #333;
    padding: 6px 15px 6px 10px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #333;    
}

/* Text ve slideru */
#nabidky.slide div.text{
    padding: 20px;
    background-color: #fff;
    min-height: 180px;
    display: flex;
    flex-direction: column;
}

#nabidky.slide h5{
    color: #434343;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: none;
    line-height: 1.3;
    transition: color 0.3s ease;
    min-height: 44px;
}

#nabidky.slide .nabidka:hover h5{
    color: #fecc00;
}

#nabidky.slide p.cena{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fecc00;
    color: #333;
    padding: 10px 18px;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
    text-align: right;
    z-index: 5;
}

#nabidky.slide div.text p:not(.cena){
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

/* Perex wrapper - rozbalovaci */
#nabidky.slide .perex-wrapper{
    flex: 1;
    overflow: hidden;
}

#nabidky.slide .perex-text{
    max-height: 63px;
    overflow: hidden;
    transition: max-height 0.4s ease;
}

#nabidky.slide .perex-text p{
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

#nabidky.slide .perex-wrapper.expanded .perex-text{
    max-height: 300px;
}

/* Tlacitko rozbalit */
#nabidky.slide .expand-btn{
    display: inline-flex;
    align-items: center;
    gap: 5px;
    margin-top: 10px;
    color: #fecc00;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    z-index: 15;
    position: relative;
    transition: color 0.3s ease;
}

#nabidky.slide .expand-btn:hover{
    color: #333;
}

#nabidky.slide .expand-arrow{
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 5px solid transparent;
    border-right: 5px solid transparent;
    border-top: 6px solid currentColor;
    transition: transform 0.3s ease;
}

#nabidky.slide .expand-btn.expanded .expand-arrow{
    transform: rotate(180deg);
}

#nabidky.slide .expand-btn.expanded .expand-text::after{
    content: '';
}

#nabidky.slide .expand-btn .expand-text::after{
    content: '';
}

/* Slick slider arrows - vylepsene */
#nabidky.slide .slick-prev,
#nabidky.slide .slick-next{
    width: 40px;
    height: 40px;
    background: #fecc00;
    z-index: 20;
    transition: all 0.3s ease;
}

#nabidky.slide .slick-prev:hover,
#nabidky.slide .slick-next:hover{
    background: #333;
}

#nabidky.slide .slick-prev{
    left: 0;
}

#nabidky.slide .slick-next{
    right: 0;
}

#nabidky.slide .slick-prev::before,
#nabidky.slide .slick-next::before{
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-left: 3px solid #333;
    border-bottom: 3px solid #333;
}

#nabidky.slide .slick-prev::before{
    transform: translate(-30%, -50%) rotate(45deg);
}

#nabidky.slide .slick-next::before{
    transform: translate(-70%, -50%) rotate(-135deg);
}

#nabidky.slide .slick-prev:hover::before,
#nabidky.slide .slick-next:hover::before{
    border-color: #fecc00;
}

/* Slick dots - vylepsene */
#nabidky.slide .slick-dots{
    bottom: -50px;
}

#nabidky.slide .slick-dots li{
    margin: 0 5px;
}

#nabidky.slide .slick-dots li button{
    width: 12px;
    height: 12px;
    background: #ccc;
    border-radius: 0;
    transition: all 0.3s ease;
}

#nabidky.slide .slick-dots li button:hover{
    background: #fecc00;
}

#nabidky.slide .slick-dots li.slick-active button{
    background: #fecc00;
    transform: scale(1.2);
}

/* Nadpis sekce */
#panelNabidky h2{
    text-align: center;
    color: #434343;
    font-size: 28px;
    font-weight: 600;
    margin-bottom: 40px;
    position: relative;
    display: inline-block;
    width: 100%;
}

#panelNabidky h2::after{
    content: '';
    position: absolute;
    bottom: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 3px;
    background-color: #fecc00;
}

@media only screen and (max-width: 768px){
    #nabidky.slide{
        padding: 0 40px;
    }

    #nabidky.slide .slick-prev,
    #nabidky.slide .slick-next{
        width: 35px;
        height: 35px;
    }

    #panelNabidky h2{
        font-size: 24px;
    }
}

@media only screen and (max-width: 500px){
    #nabidky.slide{
        padding: 0 30px;
    }

    #nabidky.slide .nabidka{
        margin: 10px 8px;
    }

    #nabidky.slide h5{
        font-size: 15px;
    }

    #nabidky.slide p.cena{
        font-size: 15px;
        padding: 8px 12px;
    }
}

/* NABIDKY GRID - zbozi_seznam.tpl */
#nabidky.grid{
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 25px;
    padding: 0;
}

#nabidky.grid .nabidka{
    display: block;
    width: auto;
    margin: 0;
    background-color: #fff;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    transition: all 0.4s ease;
    overflow: hidden;
    position: relative;
}

#nabidky.grid .nabidka:hover{
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
    transform: translateY(-5px);
}

#nabidky.grid .nabidka a.full{
    position: absolute;
    z-index: 10;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

#nabidky.grid div.img{
    position: relative;
    width: 100%;
    aspect-ratio: 16/9;
    overflow: hidden;
    background-color: #f0f0f0;
    border-radius: 0;
}

#nabidky.grid div.img img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: absolute;
    top: 0;
    left: 0;
    transform: scale(1);
    transition: transform 0.6s ease;
}

#nabidky.grid .nabidka:hover div.img img{
    transform: scale(1.08);
}

/* Stitky v gridu */
#nabidky.grid div.stitky{
    position: absolute;
    top: 15px;
    left: 0;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 5px;
}

#nabidky.grid div.stitky p{
    display: inline-block;
    background-color: #fecc00;
    color: #333;
    padding: 6px 15px 6px 10px;
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    border: 2px solid #333;
    border-left: none;
}

/* Text v gridu */
#nabidky.grid div.text{
    padding: 20px;
    background-color: #fff;
}

#nabidky.grid h5{
    color: #434343;
    font-size: 17px;
    font-weight: 600;
    margin-bottom: 10px;
    text-transform: none;
    line-height: 1.3;
    transition: color 0.3s ease;
}

#nabidky.grid .nabidka:hover h5{
    color: #fecc00;
}

#nabidky.grid p.cena{
    position: absolute;
    right: 0;
    bottom: 0;
    background-color: #fecc00;
    color: #333;
    padding: 10px 18px;
    font-size: 18px;
    font-weight: 700;
    margin: 0;
    text-align: right;
    z-index: 5;
}

#nabidky.grid div.text p:not(.cena){
    color: #6c757d;
    font-size: 14px;
    line-height: 1.5;
    margin-bottom: 0;
}

@media only screen and (max-width: 1100px){
    #nabidky.grid{
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }
}

@media only screen and (max-width: 650px){
    #nabidky.grid{
        grid-template-columns: 1fr;
        gap: 20px;
    }

    #nabidky.grid h5{
        font-size: 16px;
    }

    #nabidky.grid p.cena{
        font-size: 15px;
        padding: 8px 12px;
    }
}

#personal{background-color: #f9f9f9;padding: 100px 0;text-align: center;display: flex;flex-flow: row wrap;justify-content: center;background: transparent url('../img/background2.jpg') center center no-repeat;background-size: cover;background-attachment: fixed;}
#personal .personal{position: relative;display: inline-block;width: 280px;text-align: center;font-size: 0;margin: 20px;vertical-align: top;}
#personal .img{position: relative;display: inline-block;text-align: center;width: 200px;aspect-ratio:1/1;border-radius: 100%;border: 5px solid #fecc00;overflow: hidden;box-sizing: border-box;margin-bottom: 20px;}
#personal .img img{max-width: 100%;position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%) scale(1);transition: all 0.9s;}
#personal .img:hover img{transform: translate(-50%, -50%) scale(1.1);}
#personal h2{color:#434343;font-size: 35px;font-weight: 400;margin-bottom: 20px;text-align: center;}
#personal h5{font-size: 17px;font-weight: 600;color: #434343;text-transform: uppercase;}
#personal div.perex{margin-bottom: 10px;}
#personal a.phone{font-size: 15px;font-weight: 600;display: inline-block;background: transparent url('../img/phone_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}
#personal a.email{font-size: 15px;font-weight: 600;display: inline-block;background: transparent url('../img/email_dark.png') center left no-repeat;background-color: #fecc00;padding: 5px;padding-left: 30px;color:#434343;}

/*Menu*/
#menu {float: right;text-align: right;position: relative;z-index: 99;padding-top: 30px;}

#menu b.openbtn{border-bottom: 14px double #fecc00;border-top: 5px solid #fecc00;content:"";height: 4px;width:30px;cursor: pointer;display: none;}
#menu b.closebtn{font-family: arial;position: absolute;top: 0px;left: 5px;font-size: 36px;color: white; cursor: pointer;display: none;margin: 0;}
#menu b.closebtn:hover{color: #fecc00;}
div.nav_bg{display: block;}

#menu ul{list-style:none;margin: 0;padding: 0;line-height: 100%;}
#menu ul li{position: relative;display:inline-block; text-align: center;transition: all 300ms ease 0s;margin: 0;padding: 0;line-height: 100%;}
#menu ul li:before{display: none;}
#menu ul li a,#menu ul li p{display: inline-block;color:#434343;position: relative;z-index: 99;font-size: 16px;font-weight:600;letter-spacing: 0.3px;margin: 0;padding: 0 15px;text-decoration: none;text-transform: uppercase;}
#menu ul li a.edit{width: 20px; height: 20px;padding: 0 10px;background: transparent url('../img/plus.png') center bottom no-repeat;}
#menu ul li.mark a:hover,#menu ul li.mark p:hover{text-decoration: none;color: #fecc00;}
#menu ul li.unmark a:hover,#menu ul li.unmark p:hover{text-decoration: none;color: #fecc00;}
#menu ul li.mark a,#menu ul li.mark p{text-decoration: none;color: #fecc00;}

#menu li ul{list-style:none; position: absolute;visibility: hidden;overflow: hidden;padding-top: 20px;padding-bottom: 20px;max-height:0px;top:50px;left:50%;transform: translateX(-50%);background-color:rgba(40,40,40,0.8);width: 320px;transition: all 0.5s ease-in-out;}

#menu li:hover ul{max-height: 450px;visibility: visible;}
#menu li ul li{text-align: center;margin: 0px;padding: 0;display: block;vertical-align: top;}
#menu li ul li a{color:white;display: inline-block;padding: 10px;font-size: 16px;font-weight: 600;letter-spacing: 0.3px;text-transform: uppercase;}
#menu li.mark ul li a:hover{color: #fecc00;background: none;}
#menu li.unmark ul li a:hover{color: #fecc00;background: none;}
#menu li.unmark ul li a{color: white;background: none;}
#menu li.mark ul li a{color: white;background: none;}

@media only screen and ( max-width: 1000px ){
    div.nav_bg{display: none;top: 0;left:0;right: 0;bottom: 0;position: fixed;z-index: 998;z-index: 888888888;width: 100%;height:100%;background-color: rgba(0,0,0,0);}
    #menu{margin-right: 0;text-align: center;padding-top:30px;}
    #menu ul{float: none;display: block;}
    #menu b{display: inline-block!important;}
    #menu ul li ul{background: none;}
    #menu ul li ul li a{color:white;}
    #menu ul li{display:block;background: none;padding-right: 0;padding-left: 0;}
    #menu ul li a,#menu ul li p{color:white;background: none;padding: 10px;border: none;font-size: 13px;font-weight: 700;letter-spacing: 0.3px;margin: 0;}        
    #menu ul li.mark a:hover{color:#fecc00;text-decoration: none;border:none;background: none;}
    #menu ul li.mark p:hover{color:#fecc00;text-decoration: none;border:none;background: none;}
    #menu ul li.unmark a:hover{color:#fecc00;text-decoration: none;border:none;background: none;}
    #menu ul li.unmark p:hover{color:#fecc00;text-decoration: none;border:none;background: none;}
    #menu ul li.mark a,#menu ul li.mark p{color:#fecc00;text-decoration: none;border:none;background: none;}    

    #menu ul li a.edit{display: none;}
    #menu ul li ul{position: relative;top:0px;padding: 0;width: 100%;margin: 0;}
    #menu ul li ul li a{font-size: 13px;font-weight: 700;letter-spacing: 0.3px;}
    #menu ul li.unmark ul li a:hover{color:#fecc00;text-decoration: none;border:none;background: none;}
    #menu ul li.unmark ul li p:hover{color:#fecc00;text-decoration: none;border:none;background: none;}    
    #menu .nav{height: 100%;width: 200px;position: fixed;z-index: 1;top: 0;right: -200px;background-color: rgba(0,0,0,0.8);overflow-x: hidden;padding-top: 60px;transition: 0.5s;}    
}

@media only screen and ( max-width: 700px ){    
    #menu{margin-right: 0;text-align: center;padding-top:50px;}    
}

/*Podskupiny*/
#panelPodskupiny{position: relative;text-align: center;}
#panelPodskupiny div.licha{display: flex;justify-content: center;align-items: center;text-align: left;position: relative;width: 100%;z-index: 78;overflow: hidden;}
#panelPodskupiny div.suda{display: flex;justify-content: center;align-items: center;text-align: left;position: relative;width: 100%;z-index: 79;overflow: hidden;}
#panelPodskupiny div.licha div.img{position: relative;overflow: hidden;width: 50%;order: 1;font-size: 0;text-align: center;padding: 50px 0;}
#panelPodskupiny div.suda div.img{position: relative;overflow: hidden;width: 50%;order: 2;font-size: 0;text-align: center;padding: 50px 0;}
#panelPodskupiny img{max-width: 100%;transition: all 0.9s;}
#panelPodskupiny video{max-width: 100%;transition: all 0.9s;}
#panelPodskupiny div.text{overflow: hidden;box-sizing: border-box;box-sizing: border-box;padding: 50px 100px;}
#panelPodskupiny div.nadpis{text-align: center;}
#panelPodskupiny div.licha div.text{flex: 2;order: 2;}
#panelPodskupiny div.suda div.text{flex: 2;order: 1;}

@media only screen and ( max-width: 1000px ){    
    #panelPodskupiny div.licha{flex-direction: column;padding: 0;}
    .uvod #panelPodskupiny div.licha{flex-direction: column-reverse;padding: 0;}
    #panelPodskupiny div.suda{flex-direction: column-reverse;padding: 0;}
    .uvod #panelPodskupiny div.suda{flex-direction: column;padding: 0;}
    #panelPodskupiny div.licha div.img{width: 100%;text-align: center;}
    #panelPodskupiny div.suda div.img{width: 100%;text-align: center;}
    #panelPodskupiny div.text{text-align: center;padding: 50px;}
    #panelPodskupiny h2{display: inline-block;}
}

@media only screen and ( max-width: 500px ){
    #panelPodskupiny div.licha div.img{padding: 0;}
    #panelPodskupiny div.suda div.img{padding: 0;}
    #panelPodskupiny div.text{text-align: center;padding: 50px 0;}    
}

/* LOGIN */
#login{width: 300px; margin: 0 auto;}
#login h3{text-align: left;font-size: 15px;color: #666666;font-weight: bold;}
#login input[type=submit]{background-color: #666666;border:1px solid #666666;}
#login input[type=submit]:hover{background-color: white; color: #546a76; transition: all 300ms ease 0s;}
#login label{width: 100px;color: #666666;}

/*Search form*/

/*Registrace*/

/*napoveda*/

/*sprava slideru*/
#slider{text-align: center;}
#slider div.fotky{position: relative;width: 280px;margin: 5px;display: inline-block;}
#slider div.fotky img{max-width: 100%;}
#slider a.del{position:absolute;top: 3px; left:21px;background: transparent url('../img/kos_foto.png') no-repeat; width:15px; height:15px; border: none;}
#slider b.drag{position:absolute;top: 3px; left:3px;background: transparent url('../img/drag_foto.png') no-repeat; width:20px; height:20px; border: none;}

/*sprava*/
#sprava{text-align: left;}
#sprava label{float: left; width: 160px; padding: 5px; font-size: 15px;font-weight: 400;color: #505050;box-sizing: border-box;}
#sprava input{width: calc(100% - 160px);margin-bottom: 5px;font-size: 15px;font-weight: 400;padding: 5px;border-radius:5px;background-color: white;border:1px solid #546a76;-webkit-box-sizing: border-box;-moz-box-sizing: border-box;box-sizing: border-box;}
#sprava select{width: auto;margin-bottom: 5px;padding: 5px;border-radius:5px;border:1px solid #546a76;}
#sprava .textarea{display: inline-block;width: calc(100% - 160px);margin-bottom: 5px;box-sizing: border-box;}
#sprava input[type=submit]{width:100%;padding: 5px;border-radius:5px;border:1px solid #546a76;background-color: #546a76;color: white;font-size:14px;font-weight: 600;cursor:pointer;}
#sprava input[type=submit]:hover{background-color: white; color: #546a76; transition: all 300ms ease 0s;}
#sprava span.napoveda{font-weight: 300; font-size: 15px; color: #505050;margin-left: 10px;}

#sprava input.button_small{
    width: auto;
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;    
}

#sprava_top{float: left;text-align: left;z-index: 100;background-color: #fecc00;padding: 5px;}
#sprava_top a{font-size: 15px;font-weight: 600;color: #434343;padding-right: 5px;border-right: 1px solid white;}
#sprava_top a:last-child{padding-right: 0px;margin-right: 0px;border-right: none;}

/*Nevim heslo*/
#nevim-heslo {width: 350px;}
#nevim-heslo a{color: white;}
#nevim-heslo input.button{position: relative; top: -5px;}

/*loader*/
.loader {position: fixed;left: 0px;top: 0px;width: 100%;height: 100%;z-index: 9999;background: url('../img/page-loader.gif') 50% 50% no-repeat rgb(255,255,255);}

/*POPUP*/
div.popup{top: 0;left:0;right: 0;bottom: 0;position: fixed;z-index: 998;z-index: 888888888;width: 100%;height:100%;background-color: rgba(0,0,0,0.6);}
span.close{position: absolute;right: 10px;top:10px;height: 20px;width:20px;font-size: 0px;background: transparent url('../img/cross.png') no-repeat;border:none;cursor: pointer;}
div.popup_content{background: white;overflow: hidden;text-align: center;padding: 50px;position: relative;z-index: 999;top:50%;transform: translateY(-50%);max-width: 1200px;
    box-sizing: border-box;border-radius: 10px;-webkit-border-radius: 20px;-webkit-animation-duration: 1s;animation-duration: 1s;-webkit-backface-visibility: visible;-ms-backface-visibility: visible;
    backface-visibility: visible;-webkit-animation-name: popup;animation-name: popup;margin: 0 auto;}

@media only screen and ( max-width: 800px ){
    div.popup_content{margin: 10px;}
}

@keyframes popup {
    0% {
        transform: translateY(-50%) perspective(800px) rotateY(90deg);
        opacity: 0;
    }
    40% {
        transform: translateY(-50%) perspective(800px) rotateY(-10deg);
    }
    70% {
        transform: translateY(-50%) perspective(800px) rotateY(10deg);
    }
    100% {
        transform: translateY(-50%) perspective(800px) rotateY(0deg);
        opacity: 1;
    }
}

/* FORMULAR */
#formular{max-width: 100%; text-align: left;background-color: #2a2625;padding: 50px 100px;box-sizing: border-box;}
#formular form{}
#formular fieldset{padding: 50px;}
#formular h3{text-align: left;display: inline-block;color:#fecc00;padding: 0 20px 20px 20px;font-size: 20px;font-weight: 900;text-transform: uppercase;}
#formular p{color:white;font-size: 16px;font-weight: 400;}
#formular p.small{color:white;font-size: 13px;font-weight: 600;}
#formular fieldset{border:none;padding: 20px 50px;}
#formular label{font-size: 12px;font-weight: 900;color: #fecc00;text-transform: uppercase;}
#formular input{width: 100%;font-size: 14px;font-weight: 600;color: white;background:none;border: none;border-radius: 0;border-bottom: 1px solid #fecc00;padding: 5px;box-sizing: border-box;margin-bottom: 7px;}
#formular textarea{width: 100%;font-size: 14px;font-weight: 600;color: white;background:none;border: none;border-radius: 0;border-bottom: 1px solid #fecc00;padding: 5px;box-sizing: border-box;margin-bottom: 7px;}
#formular input[type=submit]{cursor: pointer;text-align: right;font-size: 14px;font-weight: 900;background: none;border: none;color: #fecc00;margin-bottom: 0px;text-transform: uppercase;}
#formular input[type=submit]:hover{color: white;}

#formular input::placeholder {font-size: 14px;font-weight: 600;color:white;opacity: 0.8;}
#formular textarea::placeholder {font-size: 14px;font-weight: 600;color:white;opacity: 0.8;}

@media only screen and ( max-width: 1000px ){
    #formular label{float: none;}
}

@media only screen and ( max-width: 450px ){
    #formular{padding: 20px;}
}

/*facebook*/
#facebook_side{transition: right 0.5s;position:fixed;z-index:9999;top:50%;width: 300px;right:-300px;top:180px;}
#facebook_side img.flag{position: absolute;left: -50px;}

/*instagram*/
#instagram_side{background-color: white;transition: right 0.5s;position:fixed;z-index:9998;top:50%;width: 300px;right:-300px;top:260px;padding-bottom: 50px;}
#instagram_side img.flag{position: absolute;left: -50px;}

@media only screen and ( max-width: 600px ){    
    #facebook_side{display: none;}
    #instagram_side{display: none;}
}

/*arrow*/
.arrow {
  position: absolute;
  bottom: 0;
  z-index: 99;
  left: 50%;
  width: 100px;
  color: white;
fill: red;  
  margin-left: -50px;
  height: 100px;
  background-size: contain;
  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/PjwhRE9DVFlQRSBzdmcgIFBVQkxJQyAnLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4nICAnaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkJz48c3ZnIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDI1NiAyNTYiIGNvbG9yPSJ3aGl0ZSIgaGVpZ2h0PSIyNTZweCIgaWQ9IkxheWVyXzEiIHZlcnNpb249IjEuMSIgdmlld0JveD0iMCAwIDI1NiAyNTYiIHdpZHRoPSIyNTZweCIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayI+PHBhdGggZD0iTTM4LjM5OSw3Ni44YzEuNjM3LDAsMy4yNzQsMC42MjUsNC41MjQsMS44NzVsODUuMDc1LDg1LjA3Nmw4NS4wNzUtODUuMDc2YzIuNS0yLjUsNi41NS0yLjUsOS4wNSwwczIuNSw2LjU1LDAsOS4wNSAgbC04OS42LDg5LjYwMWMtMi41LDIuNS02LjU1MSwyLjUtOS4wNTEsMGwtODkuNi04OS42MDFjLTIuNS0yLjUtMi41LTYuNTUsMC05LjA1QzM1LjEyNCw3Ny40MjUsMzYuNzYyLDc2LjgsMzguMzk5LDc2Ljh6IiBzdHlsZT0iZmlsbDojZmZmZmZmIiAvPjwvc3ZnPg==);
}

@media only screen and ( max-width: 800px ){
    .arrow {display: none;}    
}

.bounce{
    -webkit-animation: bounce_arrow 2s infinite;
    animation: bounce_arrow 2s infinite;
}

@keyframes bounce_arrow {
  0%, 20%, 50%, 80%, 100% {
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0); }
  40% {
    -webkit-transform: translateY(-30px);
    -moz-transform: translateY(-30px);
    -ms-transform: translateY(-30px);
    -o-transform: translateY(-30px);
    transform: translateY(-30px); }
  60% {
    -webkit-transform: translateY(-15px);
    -moz-transform: translateY(-15px);
    -ms-transform: translateY(-15px);
    -o-transform: translateY(-15px);
    transform: translateY(-15px); }
}

/*cookies*/
.cookies_trigger{cursor: pointer;position: fixed;bottom: 0;left: 0;z-index: 99;height: 50px;width: 50px;background: #fecc00 url('../img/cookies.png') center center no-repeat;border: none;}
#cookies_popup{display: none;top: 0;left:0;right: 0;bottom: 0;position: fixed;z-index: 998;z-index: 888888888;width: 100%;height:100%;background-color: rgba(0,0,0,0.6);}
#cookies_popup_consent{
    position: absolute;z-index: 999;bottom:0;left:0;
    max-width: 600px;
    background-color:#fecc00;
    padding:20px;
    z-index:1000;
    box-sizing: border-box;    
}

#cookies_extend{display: none;}

#cookies_popup_consent h1{
    color: #333333;
    font-size:1.2em;
    font-weight: 500;
    text-transform: uppercase;
}
#cookies_popup_consent h1:before{
    content:"";
    padding:0;
}

#cookies_popup_consent a{
    color: #333333;
    text-decoration: underline;
}

#cookies_popup_consent p{
    font-size:12px;
    color: #333333;
}

#cookies_popup_consent span.nadpis{    
    font-size:0.8em;
    font-weight: 600;
    color: #333333;    
}

#cookies_popup_consent form{
    /*text-align: center;*/
}

#cookies_popup_consent button[type="submit"] {
    float: right;cursor: pointer;border: none;background-color: white;color: #333333;padding: 10px;margin: 5px;font-size: 12px;font-weight:900;text-transform: uppercase;
}

#cookies_popup_consent button[type="button"] {
    float: right;cursor: pointer;border: none;background: none;color: #333333;padding: 10px;margin: 5px;font-size: 12px;font-weight:600;text-decoration: underline;
}

.switch {
    float: right;
    font-size: 100%;
    height: 1.6em;
    position: relative;
}

.switch > input[type="checkbox"] {
    display: none;
}

.switch .switch-style {
    height: 1.6em;
    left: 0;
    background: #C0CCDA;
    -webkit-border-radius: 0.8em;
    border-radius: 0.8em;
    display: inline-block;
    position: relative;
    top: 0;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
    width: 3em;
    cursor: pointer;
}

.switch > input[type="checkbox"]:checked + .switch-style {
    background-color: #333333;
}

.switch .switch-style:before {
    display: block;
    content: '';
    height: 1.4em;
    position: absolute;
    width: 1.4em;
    background-color: #fff;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    left: 0.1em;
    top: 0.1em;
    -webkit-transition: all 0.3s ease-in-out;
    transition: all 0.3s ease-in-out;
}

.switch > input[type="checkbox"]:checked + .switch-style:before {
    left: 50%;
}

.more > input[type="checkbox"] {
    display: none;    
}

.more .more-more {
    position: relative;
}

.more .more-more p{
    display: inline-block;
    font-size:12px;
    height: 0;
    visibility: hidden;
    transition: all 0.3s ease-in-out;
    overflow: hidden;
}

.more .more-more:before {
    display: block;
    content: '+';
    color: #333333;
    font-size: 20px;    
    position: absolute;
    left: 0;
    top: 0;    
}

.more > input[type="checkbox"]:checked + .more-more:before {
    content: '-';
}

.more > input[type="checkbox"]:checked + .more-more p{
    height: auto;
    visibility: visible;
}

/* ================================================
   DETAIL ZBOZI / NEMOVITOSTI - vylepsene styly
   ================================================ */

/* Podmenu - zpet odkaz */
#podmenu{
    margin-bottom: 20px;
}

#podmenu a.back{
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #434343;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    transition: color 0.3s ease;
}

#podmenu a.back:hover{
    color: #fecc00;
    text-decoration: none;
}

#podmenu a.back::before{
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    border-left: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
}

/* Cena - vyrazna zluta */
.popis p.cena{
    display: inline-block;
    background-color: #fecc00;
    color: #333;
    padding: 15px 30px;
    font-size: 26px;
    font-weight: 700;
    margin-bottom: 25px;
}

/* Hlavni obsah - panelMain */
#panelMain{
    background-color: #f9f9f9;
    padding: 50px 0;
    margin-top: 30px;
}

#panelMain > .popis{
    max-width: 900px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Fotogalerie - grid layout */
#fotky{
    background-color: #fff;
    padding: 50px 20px;
    margin-top: 0;
    margin-bottom: 0;
}

#fotky h2{
    color: #434343;
    font-size: 24px;
    font-weight: 600;
    margin-bottom: 30px;
    padding-bottom: 15px;
    border-bottom: 3px solid #fecc00;
    display: inline-block;
    text-align: left;
}

#fotky div.fotky{
    width: calc(25% - 15px);
    height: auto;
    aspect-ratio: 4/3;
    margin: 7px;
    background-color: #f0f0f0;
}

#fotky div.fotky:hover img{
    transform: translate(-50%, -50%) scale(1.1);
}

@media only screen and (max-width: 1200px){
    #fotky div.fotky{
        width: calc(33.333% - 14px);
    }
}

@media only screen and (max-width: 800px){
    #fotky div.fotky{
        width: calc(50% - 14px);
    }
}

@media only screen and (max-width: 500px){
    #fotky div.fotky{
        width: calc(50% - 10px);
        margin: 5px;
    }
}

/* Dokumenty - vylepseny styl */
#dokumenty{
    background-color: #f9f9f9;
    padding: 30px 20px;
    margin: 0;
}

#dokumenty .dokumenty{
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 15px;
    background-color: #fff;
    border-left: 4px solid #fecc00;
    margin-bottom: 10px;
    transition: background-color 0.3s ease;
}

#dokumenty .dokumenty:hover{
    background-color: #fef9e6;
}

#dokumenty a{
    color: #434343;
    font-weight: 600;
}

#dokumenty a:hover{
    color: #fecc00;
}