/* Vložená data */
@import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Bungee&display=swap');

/* Nastavení posuvníku */
/* width */
::-webkit-scrollbar { width: 8px;}
/* Track */
::-webkit-scrollbar-track { background: #F3F3F3;}
/* Handle */
::-webkit-scrollbar-thumb { background: #F3F3F3;}
/* Handle on hover */
::-webkit-scrollbar-thumb:hover { background: #AF4E06;}

/*
.bungee-regular {
  font-family: "Bungee", sans-serif;
  font-weight: 400;
  font-style: normal;
}
*/

body { 
    width: 100%; 
    font-family: "Manrope", sans-serif; 
    font-optical-sizing: auto; 
    font-style: normal; 
    display: flex; 
    flex-flow: column; 
    align-items: flex-start; 
    justify-content: center; 
    margin: 0 0 0 0; 
    font-weight: 300; 
    color: #21160C; 
    background: #F3F3F3; 
}

span  { font-weight: 900; color: #E0901E;}
a { color: #21160C; text-decoration: none; transition: color .35s;}
a:hover { color: #AF4E06;}

.odkaz { height: 40px; font-weight: 600; padding: 0 0 0 40px; display: flex; align-items: center; text-decoration: none; color: #21160C; transition: all .35s ease-in-out; background: url('../themes/odkaz.png') 10px no-repeat; background-size: 20px;}
.odkaz:hover { background: url('../themes/odkaz-color.png') 10px no-repeat; background-size: 20px;}

.imaginator { width: calc(100% - 2px); border: 1px solid #AF4E06;}

/* Velké obrazovky a stolní monitory */
@media (min-width: 1201px) {
    #facebody, #facebodypage { width: 100%; height: auto; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: #F3F3F3 url('../themes/wall.jpg') top no-repeat; background-size: 1550px auto;}
    #facebodypage { background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 1550px auto;}

    /* Definice textu */
    .free { width:100%; height: 20px;}
    .free-big { width: 100%; height: 50px;}
    .free-mini { width: 100%; height: 12px;}
    .space { width: 100%; height: 40px;}
    .top-space { width: 100%; height: 80px;}

    h1, .nadpis { font-size: 2.6em; margin: 0 0 20px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1.4em; margin: 0 0 10px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 1.6em; font-weight: 700;}
    ul, ol { list-style-position: inside; padding-left: 0; margin: 0 0 10px 0;}
    ul li, ol li { font-size: 1.3em; margin: 0 0 10px 0; font-weight: 300;}
    ul li::marker, ol li::marker { color: #AF4E06;}
    ul li span, ol li span { font-weight: 500; color: #AF4E06;}

    /* Hlavička webu */
    header { width: 100%; height: auto; display: flex; flex-flow: column; justify-content: start; align-items: center;}
    header main { width: 100%; height: 118px; z-index: 10; display: flex; flex-flow: column; justify-content: center; align-items: center;}

    .titulspage { width: 1240px; height: 120px; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .logo { width: 340px; height: 70px; display: flex; flex-flow: column; justify-content: start; align-items: center; background: url('../themes/logo.png') top no-repeat; background-size: contain;}
    .quickcontact { width: 520px; height: 50px; display: flex; flex-wrap: wrap; justify-content: start; align-items: start;}
    .quickcontact-box { width: 200px; height: 50px; padding: 0 0 0 50px; display: flex; flex-flow: column; justify-content: start; align-items: start;}
    .quickcontact-box:nth-of-type(1) { width: 219px; border-right: 1px solid rgba(33,12,12,.5);}
    .quickcontact-box-icon { width: 50px; height: 50px; position: absolute; margin: 0 0 0 -50px;}
    .quickcontact-box-icon img { margin: 10px; width: 30px;}
    .quickcontact-box-info { width: 209px; height: 50px; display: flex; flex-flow: column; justify-content: center; align-items: left;}
    .quickcontact-box-info p { font-size: 14px; margin: 0px;}
    .quickcontact-box-info p:nth-of-type(2) { font-size: 19px; margin: 0px;}

    header nav { width: 1280px; height: 60px; z-index: 10; display: flex; border: 1px solid #AF4E06; overflow: hidden; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 10px 20px 0 rgba(33,22,12,.3); background: #E0901E;}
    .linear-navi { width: auto; height: 60px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}
    .linear-navi a { width: auto; height: 60px; padding: 0 20px 0 20px; display: flex; justify-content: space-around; align-items: center; transition: all 0.35s ease-in-out;}
    .linear-navi a:hover { color: #F3F3F3; background: #AF4E06;}
    .linear-navi a img { width: 30px; height: 30px; object-fit: cover;} 
    .linear-navi a p { margin: 0; font-size: 1.2em; font-weight: 500;}

    .action-button-pozice { width: auto; height: 60px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .action-button { width: auto; height: 60px; padding: 0 40px 0 40px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    a.action-button { background: #AF4E06;}
    a.action-button:hover { background: #21160C;}
    .action-button p { margin: 0; font-size: 1.2em; font-weight: 900; color: #F3F3F3;}

    .mobilnavigace-pozice { width: auto; height: 0px; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .mobilnavigace { width: auto; height: 0px; padding: 0; visibility: hidden; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    .mobilnavigace p { margin: 0; font-size: 0px; font-weight: 900; color: #F3F3F3;}

    /* Vlastní obsah sekce na hlavní stránce webu */
    .header-content { width: 1280px; height: 640px; padding: 0 0 0 0; z-index: 10;}

    header h1 { font-size: 4em; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif;}

    #facebodypage .header-content { width: 1200px; height: auto; padding: 50px 0 0 0; z-index: 10; display: flex; flex-flow: column; justify-content: end; align-items: start;}
    #facebodypage .header-content h1 { font-size: 4em; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
    #facebodypage .header-content p { font-size: .9em; font-weight: 600; width: auto; margin: 0; color: #21160C;}
    #facebodypage .header-content p a { text-decoration: none; color: #AF4E06;}
    #facebodypage .header-content p a:hover { text-decoration: underline; color: #E0901E;}

    /* Obsahový rámec */
    section { width: 100%; height: auto; padding: 80px 0px; display: flex; flex-flow: column; align-items: center;}
    /* Pouze první sekce uvnitř #facebodypage */
    #facebodypage section:first-of-type { padding: 40px 0px;}
    section h1 { width: auto; text-align: center; font-family: 'Bungee', sans-serif;}
    section .space { height: 30px;}
    section main { width: 1280px; height: auto; display: flex; flex-wrap: wrap;}
    
    .content-left { width: 720px; height: auto; padding: 40px;}
    .content-left p { text-align: justify;}
    .content-left p span { font-weight: 400; color: #E0901E;}
    .content-left h1 { font-family: 'Bungee', sans-serif;}
    .content-right { width: 480px; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-self: start;}
    .content-right-box { width: 296px; height: 396px; border: 2px solid #E0901E; position: absolute; margin: 0;}
    .content-right-box img { width: 100%; height: 100%; object-fit: cover; text-align: left;}
    .content-right-box:nth-of-type(2) { width: 296px; height: 396px; border: 2px solid #FCEFE5; position: absolute; margin: 100px 0 0 180px;}
    .content-right-circle { width: 180px; height: 180px; position: absolute; margin: 280px 0 0 100px; border-radius: 100%; text-align: center; vertical-align: center; align-content: center; border: 3px solid #F3F3F3; background: #AF4E06;}
    .content-right-circle h1 { margin: 0; font-weight: 900; font-size: 3em; color: #E0901E; font-family: 'Bungee', sans-serif;}
    .content-right-circle p { margin: 0; font-size: 1em; color: #FCEFE5; font-weight: 600;}

    .contain-right-obsah { width: 480px; height: 500px;}

    .content-all { width: 1280px; height: auto; display: flex; flex-wrap: wrap; justify-content: center;}
    .content-box { width: 600px; height: auto; padding: 20px;}
    .content-all h1, .content-box h1 { width: 100%;}
    .content-box h1 { text-align: left; width: 100%;}

    /* Servisní nabídka služeb */
    .service-box { width: 1200px; height: auto; padding: 40px; display: flex; flex-wrap: wrap; background: #AF4E06; border-radius: 20px;}
    .service-box h1 { width: 500px; text-align: center; font-family: 'Bungee', sans-serif; font-size: 4em; position: absolute; margin: -80px 0 0 300px;}
    .service-box-item { width: 299px; height: auto; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-right: none; border-top-left-radius: 20px; border-bottom-left-radius: 20px; background: rgba(33,22,12,.5);}
    .service-box-item-object { width: 380px; height: 230px; position: absolute; margin: -40px;}
    .service-box-item-object img { width: 100%; height: 100%; margin: 0 0 0 -30px; object-fit: cover;}
    .service-box-item-content { width: 150px; height: 150px; display: flex; flex-wrap: wrap; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; background: rgba(33,22,12,.5);}
    .service-box-item-content img { height: 150px;}
    .service-box-item-content:last-child { width: 149px; height: 150px; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-left: none; border-top-right-radius: 20px; border-bottom-right-radius: 20px; background: rgba(33,22,12,.5);}

    /* Spodní část webu */
    footer { width: 100%; height: auto; padding: 80px 0 20px 0; display: flex; flex-flow: column; align-items: center; background: url('../themes/back.jpg') top no-repeat; background-size: 1000px auto;}
    .infobox { width: 1200px; height: auto; display: flex; flex-wrap: wrap; align-content: space-around;}
    .infobox-part { width: 380px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .infobox-part:nth-of-type(2) { width: 378px; height: auto; padding: 10px; border-right: 1px solid #C3C3C3; border-left: 1px solid #C3C3C3; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part img { width: 340px; object-fit: contain;}
    .infobox-part h1 { font-size: 1.6em;} 
    .infobox-part-partbox { width: 380px; height: auto; display: flex; flex-wrap: wrap;}
    .infobox-part-partbox-left { width: 50px; height: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;}
    .infobox-part-partbox-left img { width: 30px; height: 30px; object-fit: cover;}
    .infobox-part-partbox-right { width: 330px; height: auto; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part-partbox-right p { font-size: 1.1em; margin: 0;} 
    .databox { width: 1100px; height: auto; padding: 10px 50px 0 50px; margin-top: 10px; border-top: 1px solid #C3C3C3; display: flex; justify-content: space-between;}
    .copyright { width: 200px; height: 30px; display: flex; flex-wrap: wrap; justify-content: start; align-content: center;}
    .copyright p { font-size: 1em; margin: 0; font-weight: 500;}
    .romandesign { width: 300px; height: 30px; display: flex; flex-wrap: wrap; justify-content: end; align-content: center;}
    .copyright a { font-size: 1em; margin: 0; font-weight: 500; color: #21160C;}

    /* Definice novinek */
    .newsroom { width: 1260px; height: auto; display: flex; flex-wrap: wrap;}
    .newbox { width: 380px; height: auto; padding: 20px; display: flex; flex-flow: column;}
    .newbox-abox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-abox { width: 200px; height: 60px; margin: -10px 0 0 -10px; background: #E0901E;}
    a.newbox:hover .newbox-abox { width: 90px; height: 90px; margin: -10px 0 0 -10px; background: #AF4E06;}
    .newbox-bbox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-bbox { width: 40px; height: 120px; margin: -10px 0 0 350px; background: #AF4E06;}
    a.newbox:hover .newbox-bbox { width: 50px; height: 90px; margin: 160px 0 0 340px; background: #E0901E;}
    .newbox-image { width: 378px; height: 238px; border: 1px solid #21160C; overflow: hidden; position: absolute; margin: 0;}
    .newbox-image img { height: 240px; object-fit: cover; transition: all .35s ease-in-out;}
    a.newbox .newbox-image img { filter: sepia(1);}
    a.newbox:hover .newbox-image img { filter: sepia(0);}
    .newbox-space { width: 380px; height: 180px; z-index: 10;}
    .newbox-content { width: 300px; height: auto; z-index: 10; margin: 0 0 0 40px; padding: 10px; border: 1px solid #21160C; background: #FFF;}
    .newbox-content h2 { width: 100%; margin: 0 0 5px 0; font-size: .9em; font-family: 'Bungee', sans-serif; transition: all .35s ease-in-out;}
    a.newbox .newbox-content h2 { color: #E0901E;}
    a.newbox:hover .newbox-content h2 { color: #AF4E06;}
    .newbox-content p { width: 100%; margin: 0; font-size: 1.3em; color: #21160C; font-weight: 500;}

    /* Definice pro service box */
    .servisbox { width: 320px; height: 320px; margin: 0; display: flex; flex-wrap: wrap;}
    .servisbox-content { width: 274px; height: 274px; margin: 20px; border-radius: 18px; display: flex; flex-flow: column; justify-content: center; align-items: center; transition: all .355s ease-in-out; background: #F3F3F3;}
    a.servisbox-content { border: 3px solid #C3C3C3;}
    a.servisbox-content:hover { border: 3px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 1.8em; font-family: 'Bungee', sans-serif;}

    .content-right .servisbox { width: 240px; height: 240px;}
    .content-right .servisbox-content { width: 216px; height: 216px; margin: 10px; border-radius: 12px;}
    a.servisbox-content { border: 3px solid #C3C3C3;}
    a.servisbox-content:hover { border: 3px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 1.4em; font-family: 'Bungee', sans-serif;}

    /* Galerie */
    .gallery {
        max-width: 720px;
        margin: 0 auto;
        display: grid;
        gap: 8px; /* mezery mezi obrázky */
        background: rgba(0,0,0,.25);   
        
        grid-template-columns: 2fr 2fr 1.5fr;
        grid-template-areas:
            "big big side1"
            "big big side2"
            "bottom1 bottom2 bottom3";
    }
    /* společný styl pro položky */
    .gallery .item { overflow: hidden;}
    /* obrázky vyplní buňky a oříznou se */
    .gallery img { width: 100%; height: 100%; object-fit: cover; display: block;}
    /* rozmístění jednotlivých položek */
    .item1 { grid-area: big;}
    .item2 { grid-area: side1;}
    .item3 { grid-area: side2;}
    .item4 { grid-area: bottom1;}
    .item5 { grid-area: bottom2;}
    .item6 { grid-area: bottom3;}

    /* List box */
    .listbox { width: 720px; margin: 0 0 10px 0; display: flex; flex-wrap: wrap; align-items: center; transition: all .35s ease-in-out;}
    a.listbox { border: 1px solid #C3C3C3; color: #AF4E06; background: rgba(224,144,30,.04);}
    a.listbox:nth-child(odd) { background: rgba(224,144,30,.08);}
    a.listbox:hover { border: 1px solid #AF4E06; color: #21160C; background: rgba(224,144,30,.12);}
    .listbox-id { width: calc(100% - 20px); padding: 10px; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.3em;}
    a.listbox .listbox-id { color: #AF4E06;}
    a.listbox:hover .listbox-id { color: #21160C;}

    .content-all .listbox { width: 1280px;}
    .content-all .listbox-id { width: 299px; padding: 10px;  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2em;}
    .content-all .listbox-id:first-child { font-size: 1.3em; justify-content: start;}

    /* KontaktBox */
    .kontaktbox { width: 676px; height: auto; padding: 20px; border-radius: 16px; border: 2px solid #AF4E06; background: rgba(224,144,30,.08);}
    .kontaktbox h1 span { color: #AF4E06;}
    .kontaktbox p { font-size: 1.2em;}
    .kontaktbox p span { font-weight: 600; color: #AF4E06;}

    .kontakt-maps { width: 1278px; height: 300px; border: 1px solid #AF4E06; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .kontakt-maps img { width: 100%;}
}

/* Menší laptopy a stolní počítače */
@media (min-width: 1025px) and (max-width: 1200px) {
    #facebody, #facebodypage { width: 100%; height: auto; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: #F3F3F3 url('../themes/wall.jpg') top no-repeat; background-size: 1400px auto;}
    #facebodypage { background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 1400px auto;}

    /* Definice textu */
    .free { width:100%; height: 20px;}
    .free-big { width: 100%; height: 50px;}
    .free-mini { width: 100%; height: 12px;}
    .space { width: 100%; height: 40px;}
    .top-space { width: 100%; height: 80px;}

    h1, .nadpis { font-size: 2.3em; margin: 0 0 20px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1.2em; margin: 0 0 10px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 1.3em; font-weight: 700;}
    ul, ol { list-style-position: inside; padding-left: 0; margin: 0 0 10px 0;}
    ul li, ol li { font-size: 1.3em; margin: 0 0 10px 0; font-weight: 300;}
    ul li::marker, ol li::marker { color: #AF4E06;}
    ul li span, ol li span { font-weight: 500; color: #AF4E06;}

    /* Hlavička webu */
    header { width: 100%; height: auto; display: flex; flex-flow: column; justify-content: start; align-items: center;}
    header main { width: 100%; height: 118px; z-index: 10; display: flex; flex-flow: column; justify-content: center; align-items: center;}

    .titulspage { width: 1060px; height: 120px; padding: 0 20px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .logo { width: 320px; height: 64px; display: flex; flex-flow: column; justify-content: start; align-items: center; background: url('../themes/logo.png') top no-repeat; background-size: contain;}
    .quickcontact { width: 520px; height: 40px; display: flex; flex-wrap: wrap; justify-content: start; align-items: start;}
    .quickcontact-box { width: 200px; height: 40px; padding: 0 0 0 40px; display: flex; flex-flow: column; justify-content: start; align-items: start;}
    .quickcontact-box:nth-of-type(1) { width: 219px; border-right: 1px solid rgba(33,12,12,.5);}
    .quickcontact-box-icon { width: 40px; height: 40px; position: absolute; margin: 0 0 0 -40px;}
    .quickcontact-box-icon img { margin: 5px; width: 30px;}
    .quickcontact-box-info { width: 209px; height: 40px; display: flex; flex-flow: column; justify-content: center; align-items: left;}
    .quickcontact-box-info p { font-size: 13px; margin: 0px;}
    .quickcontact-box-info p:nth-of-type(2) { font-size: 17px; margin: 0px;}

    header nav { width: 1100px; height: 60px; z-index: 10; display: flex; border: 1px solid #AF4E06; overflow: hidden; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 10px 20px 0 rgba(33,22,12,.3); background: #E0901E;}
    .linear-navi { width: auto; height: 60px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}
    .linear-navi a { width: auto; height: 60px; padding: 0 18px 0 18px; display: flex; justify-content: space-around; align-items: center; transition: all 0.35s ease-in-out;}
    .linear-navi a:hover { color: #F3F3F3; background: #AF4E06;}
    .linear-navi a img { width: 30px; height: 30px; object-fit: cover;} 
    .linear-navi a p { margin: 0; font-size: 1.1em; font-weight: 500;}

    .action-button-pozice { width: auto; height: 60px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .action-button { width: auto; height: 60px; padding: 0 40px 0 40px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    a.action-button { background: #AF4E06;}
    a.action-button:hover { background: #21160C;}
    .action-button p { margin: 0; font-size: 1.1em; font-weight: 900; color: #F3F3F3;}

    .mobilnavigace-pozice { width: auto; height: 0px; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .mobilnavigace { width: auto; height: 0px; padding: 0; visibility: hidden; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    .mobilnavigace p { margin: 0; font-size: 0px; font-weight: 900; color: #F3F3F3;}

    /* Vlastní obsah sekce na hlavní stránce webu */
    .header-content { width: 1100px; height: 600px; padding: 0 0 0 0; z-index: 10;}

    header h1 { font-size: 3.4em; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif;}

    #facebodypage .header-content { width: 1100px; height: auto; padding: 40px 0 0 0; z-index: 10; display: flex; flex-flow: column; justify-content: end; align-items: start;}
    #facebodypage .header-content h1 { font-size: 3.4em; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
    #facebodypage .header-content p { font-size: .8em; font-weight: 600; width: auto; margin: 0; color: #21160C;}
    #facebodypage .header-content p a { text-decoration: none; color: #AF4E06;}
    #facebodypage .header-content p a:hover { text-decoration: underline; color: #E0901E;}

    /* Obsahový rámec */
    section { width: 100%; height: auto; padding: 60px 0px; display: flex; flex-flow: column; align-items: center;}
    /* Pouze první sekce uvnitř #facebodypage */
    #facebodypage section:first-of-type { padding: 30px 0px;}
    section h1 { width: auto; text-align: center; font-family: 'Bungee', sans-serif;}
    section .space { height: 30px;}
    section main { width: 1100px; height: auto; display: flex; flex-wrap: wrap;}
    
    .content-left { width: 660px; height: auto; padding: 20px;}
    .content-left p { text-align: justify;}
    .content-left p span { font-weight: 400; color: #E0901E;}
    .content-left h1 { font-family: 'Bungee', sans-serif;}
    .content-right { width: 400px; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-self: start;}
    .content-right-box { width: 246px; height: 346px; border: 2px solid #E0901E; position: absolute; margin: 0;}
    .content-right-box img { width: 100%; height: 100%; object-fit: cover; text-align: left;}
    .content-right-box:nth-of-type(2) { width: 246px; height: 346px; border: 2px solid #FCEFE5; position: absolute; margin: 80px 0 0 150px;}
    .content-right-circle { width: 160px; height: 160px; position: absolute; margin: 220px 0 0 100px; border-radius: 100%; text-align: center; vertical-align: center; align-content: center; border: 3px solid #F3F3F3; background: #AF4E06;}
    .content-right-circle h1 { margin: 0; font-weight: 900; font-size: 2.6em; color: #E0901E; font-family: 'Bungee', sans-serif;}
    .content-right-circle p { margin: 0; font-size: .85em; color: #FCEFE5; font-weight: 600;}

    .contain-right-obsah { width: 400px; height: 430px;}

    .content-all { width: 1100px; height: auto; display: flex; flex-wrap: wrap; justify-content: center;}
    .content-box { width: 510px; height: auto; padding: 20px;}
    .content-all h1, .content-box h1 { width: 100%;}
    .content-box h1 { text-align: left; width: 100%;}

    /* Servisní nabídka služeb */
    .service-box { width: 1020px; height: auto; padding: 30px; display: flex; flex-wrap: wrap; background: #AF4E06; border-radius: 20px;}
    .service-box h1 { width: 500px; text-align: center; font-family: 'Bungee', sans-serif; font-size: 3.4em; position: absolute; margin: -70px 0 0 300px;}
    .service-box-item { width: 399px; height: auto; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-right: none; border-top-left-radius: 16px; border-bottom-left-radius: 16px; background: rgba(33,22,12,.5);}
    .service-box-item-object { width: 360px; height: 200px; position: absolute; margin: -50px 0 0 40px;}
    .service-box-item-object img { width: 100%; height: 100%; margin: 0 0 0 -30px; object-fit: cover;}
    .service-box-item-content { width: 103px; height: 100px; display: flex; flex-wrap: wrap; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; background: rgba(33,22,12,.5);}
    .service-box-item-content img { height: 100px;}
    .service-box-item-content:last-child { width: 99px; height: 100px; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-left: none; border-top-right-radius: 16px; border-bottom-right-radius: 16px; background: rgba(33,22,12,.5);}

    /* Spodní část webu */
    footer { width: 100%; height: auto; padding: 60px 0 20px 0; display: flex; flex-flow: column; align-items: center; background: url('../themes/back.jpg') top no-repeat; background-size: 1000px auto;}
    .infobox { width: 1080px; height: auto; display: flex; flex-wrap: wrap; align-content: space-around;}
    .infobox-part { width: 340px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .infobox-part:nth-of-type(2) { width: 338px; height: auto; padding: 10px; border-right: 1px solid #C3C3C3; border-left: 1px solid #C3C3C3; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part img { width: 300px; object-fit: contain;}
    .infobox-part h1 { font-size: 1.2em;} 
    .infobox-part-partbox { width: 340px; height: auto; display: flex; flex-wrap: wrap;}
    .infobox-part-partbox-left { width: 40px; height: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;}
    .infobox-part-partbox-left img { width: 30px; height: 30px; object-fit: cover;}
    .infobox-part-partbox-right { width: 300px; height: auto; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part-partbox-right p { font-size: .9em; margin: 0;} 
    .databox { width: 1000px; height: auto; padding: 10px 50px 0 50px; margin-top: 10px; border-top: 1px solid #C3C3C3; display: flex; justify-content: space-between;}
    .copyright { width: 200px; height: 30px; display: flex; flex-wrap: wrap; justify-content: start; align-content: center;}
    .romandesign { width: 300px; height: 30px; display: flex; flex-wrap: wrap; justify-content: end; align-content: center;}
    .copyright p, .romandesign p { font-size: 1em; margin: 0; font-weight: 500;}
    .copyright a, .romandesign a { font-size: 1em; margin: 0; font-weight: 500; color: #21160C;}

    /* Definice novinek */
    .newsroom { width: 1140px; height: auto; display: flex; flex-wrap: wrap;}
    .newbox { width: 340px; height: auto; padding: 20px; display: flex; flex-flow: column;}
    .newbox-abox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-abox { width: 200px; height: 60px; margin: -10px 0 0 -10px; background: #E0901E;}
    a.newbox:hover .newbox-abox { width: 90px; height: 90px; margin: -10px 0 0 -10px; background: #AF4E06;}
    .newbox-bbox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-bbox { width: 40px; height: 120px; margin: -10px 0 0 310px; background: #AF4E06;}
    a.newbox:hover .newbox-bbox { width: 50px; height: 90px; margin: 140px 0 0 300px; background: #E0901E;}
    .newbox-image { width: 338px; height: 218px; border: 1px solid #21160C; overflow: hidden; position: absolute; margin: 0;}
    .newbox-image img { height: 240px; object-fit: cover; transition: all .35s ease-in-out;}
    a.newbox .newbox-image img { filter: sepia(1);}
    a.newbox:hover .newbox-image img { filter: sepia(0);}
    .newbox-space { width: 340px; height: 180px; z-index: 10;}
    .newbox-content { width: 280px; height: auto; z-index: 10; margin: 0 0 0 30px; padding: 10px; border: 1px solid #21160C; background: #FFF;}
    .newbox-content h2 { width: 100%; margin: 0 0 5px 0; font-size: .75em; font-family: 'Bungee', sans-serif; transition: all .35s ease-in-out;}
    a.newbox .newbox-content h2 { color: #E0901E;}
    a.newbox:hover .newbox-content h2 { color: #AF4E06;}
    .newbox-content p { width: 100%; margin: 0; font-size: 1.1em; color: #21160C; font-weight: 500;}

    /* Definice pro service box */
    .servisbox { width: 275px; height: 275px; margin: 0; display: flex; flex-wrap: wrap;}
    .servisbox-content { width: 245px; height: 245px; margin: 15px; border-radius: 18px; display: flex; flex-flow: column; justify-content: center; align-items: center; transition: all .355s ease-in-out; background: #F3F3F3;}
    a.servisbox-content { border: 3px solid #C3C3C3;}
    a.servisbox-content:hover { border: 3px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 1.8em; font-family: 'Bungee', sans-serif;}

    .content-right .servisbox { width: 200px; height: 200px;}
    .content-right .servisbox-content { width: 176px; height: 176px; margin: 10px; border-radius: 12px;}
    a.servisbox-content { border: 3px solid #C3C3C3;}
    a.servisbox-content:hover { border: 3px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 1.2em; font-family: 'Bungee', sans-serif;}

    /* Galerie */
    .gallery {
        max-width: 720px;
        margin: 0 auto;
        display: grid;
        gap: 8px; /* mezery mezi obrázky */
        background: rgba(0,0,0,.25);   
        
        grid-template-columns: 2fr 2fr 1.5fr;
        grid-template-areas:
            "big big side1"
            "big big side2"
            "bottom1 bottom2 bottom3";
    }
    /* společný styl pro položky */
    .gallery .item { overflow: hidden;}
    /* obrázky vyplní buňky a oříznou se */
    .gallery img { width: 100%; height: 100%; object-fit: cover; display: block;}
    /* rozmístění jednotlivých položek */
    .item1 { grid-area: big;}
    .item2 { grid-area: side1;}
    .item3 { grid-area: side2;}
    .item4 { grid-area: bottom1;}
    .item5 { grid-area: bottom2;}
    .item6 { grid-area: bottom3;}

    /* List box */
    .listbox { width: 660px; margin: 0 0 10px 0; display: flex; flex-wrap: wrap; align-items: center; transition: all .35s ease-in-out;}
    a.listbox { border: 1px solid #C3C3C3; color: #AF4E06; background: rgba(224,144,30,.04);}
    a.listbox:nth-child(odd) { background: rgba(224,144,30,.08);}
    a.listbox:hover { border: 1px solid #AF4E06; color: #21160C; background: rgba(224,144,30,.12);}
    .listbox-id { width: calc(100% - 20px); padding: 10px; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.3em;}
    a.listbox .listbox-id { color: #AF4E06;}
    a.listbox:hover .listbox-id { color: #21160C;}

    .content-all .listbox { width: 1100px;}
    .content-all .listbox-id { width: 253px; padding: 10px; display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1em;}
    .content-all .listbox-id:first-child { font-size: 1.2em; justify-content: start;}

    /* KontaktBox */
    .kontaktbox { width: 626px; height: auto; padding: 15px; border-radius: 10px; border: 2px solid #AF4E06; background: rgba(224,144,30,.08);}
    .kontaktbox h1 span { color: #AF4E06;}
    .kontaktbox p { font-size: 1em;}
    .kontaktbox p span { font-weight: 600; color: #AF4E06;}

    .kontakt-maps { width: 1100px; height: 320px; border: 1px solid #AF4E06; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .kontakt-maps img { width: 100%;}
}

/* Tablety na šířku */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #facebody, #facebodypage { width: 100%; height: auto; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: #F3F3F3 url('../themes/wall.jpg') top no-repeat; background-size: 1100px auto;}
    #facebodypage { background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 1100px auto;}

    /* Definice textu */
    .free { width:100%; height: 15px;}
    .free-big { width: 100%; height: 40px;}
    .free-mini { width: 100%; height: 9px;}
    .space { width: 100%; height: 30px;}
    .top-space { width: 100%; height: 65px;}

    h1, .nadpis { font-size: 26px; margin: 0 0 15px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1.2em; margin: 0 0 8px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 18px; font-weight: 700;}
    ul, ol { list-style-position: inside; padding-left: 0; margin: 0 0 8px 0;}
    ul li, ol li { font-size: 18px; margin: 0 0 8px 0; font-weight: 300;}
    ul li::marker, ol li::marker { color: #AF4E06;}
    ul li span, ol li span { font-weight: 500; color: #AF4E06;}

    /* Hlavička webu */
    header { width: 100%; height: auto; display: flex; flex-flow: column; justify-content: start; align-items: center;}
    header main { width: 100%; height: 118px; z-index: 10; display: flex; flex-flow: column; justify-content: center; align-items: center;}

    .titulspage { width: 720px; height: 120px; padding: 0 15px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .logo { width: 280px; height: 58px; display: flex; flex-flow: column; justify-content: start; align-items: center; background: url('../themes/logo.png') top no-repeat; background-size: contain;}
    .quickcontact { width: 250px; height: 80px; display: flex; flex-wrap: wrap; justify-content: start; align-items: start;}
    .quickcontact-box { width: 200px; height: 40px; padding: 0 0 0 40px; display: flex; flex-flow: column; justify-content: start; align-items: start;}
    .quickcontact-box:nth-of-type(1) { width: 219px;}
    .quickcontact-box-icon { width: 40px; height: 40px; position: absolute; margin: 0 0 0 -40px;}
    .quickcontact-box-icon img { margin: 5px; width: 30px;}
    .quickcontact-box-info { width: 209px; height: 40px; display: flex; flex-flow: column; justify-content: center; align-items: left;}
    .quickcontact-box-info p { font-size: 13px; margin: 0px;}
    .quickcontact-box-info p:nth-of-type(2) { font-size: 17px; margin: 0px;}

    header nav { width: 750px; height: 45px; z-index: 10; display: flex; border: 1px solid #AF4E06; overflow: hidden; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 10px 20px 0 rgba(33,22,12,.3); background: #E0901E;}
    .linear-navi { width: auto; height: 45px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}
    .linear-navi a { width: auto; height: 45px; padding: 0 10px 0 10px; display: flex; justify-content: space-around; align-items: center; transition: all 0.35s ease-in-out;}
    .linear-navi a:hover { color: #F3F3F3; background: #AF4E06;}
    .linear-navi a img { width: 25px; height: 25px; object-fit: cover;} 
    .linear-navi a p { margin: 0; font-size: .9em; font-weight: 500;}

    .action-button-pozice { width: auto; height: 45px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .action-button { width: auto; height: 45px; padding: 0 20px 0 20px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    a.action-button { background: #AF4E06;}
    a.action-button:hover { background: #21160C;}
    .action-button p { margin: 0; font-size: .9em; font-weight: 900; color: #F3F3F3;}

    .mobilnavigace-pozice { width: auto; height: 0px; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .mobilnavigace { width: auto; height: 0px; padding: 0; visibility: hidden; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    .mobilnavigace p { margin: 0; font-size: 0px; font-weight: 900; color: #F3F3F3;}

    /* Vlastní obsah sekce na hlavní stránce webu */
    .header-content { width: 750px; height: 520px; padding: 0 0 0 0; z-index: 10;}
 
    header h1 { width: 750px; font-size: 2.4em; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif;}

    #facebodypage .header-content { width: 750px; height: auto; padding: 30px 0 0 0; z-index: 10; display: flex; flex-flow: column; justify-content: end; align-items: start;}
    #facebodypage .header-content h1 { font-size: 2.4em; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
    #facebodypage .header-content p { font-size: .75em; font-weight: 600; width: auto; margin: 0; color: #21160C;}
    #facebodypage .header-content p a { text-decoration: none; color: #AF4E06;}
    #facebodypage .header-content p a:hover { text-decoration: underline; color: #E0901E;}

    /* Obsahový rámec */
    section { width: 100%; height: auto; padding: 40px 0px; display: flex; flex-flow: column; align-items: center;}
    /* Pouze první sekce uvnitř #facebodypage */
    #facebodypage section:first-of-type { padding: 30px 0px;}
    section h1 { width: auto; text-align: center; font-family: 'Bungee', sans-serif;}
    section .space { height: 30px;}
    section main { width: 750px; height: auto; display: flex; flex-wrap: wrap;}
    
    .content-left { width: 710px; height: auto; padding: 20px;}
    .content-left p { text-align: justify;}
    .content-left p span { font-weight: 400; color: #E0901E;}
    .content-left h1 { font-family: 'Bungee', sans-serif;}
    .content-right { width: 0px; visibility: hidden; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-self: start; overflow: hidden;}
    .content-right-box { width: 0px; height: 0px; border: none; visibility: hidden; position: absolute; margin: 0;}
    .content-right-box img { width: 0px; height: 0px; border: none; visibility: hidden; text-align: left;}
    .content-right-box:nth-of-type(2) { width: 0px; height: 0px; border: none; visibility: hidden; position: absolute; margin: 0;}
    .content-right-circle { width: 0px; height: 0px; border: none; visibility: hidden;position: absolute; margin: 0; border-radius: 100%; text-align: center; vertical-align: center; align-content: center; border: 3px solid #F3F3F3; background: #AF4E06;}
    .content-right-circle h1 { margin: 0; font-weight: 900; font-size: 0px; color: #E0901E; font-family: 'Bungee', sans-serif;}
    .content-right-circle p { margin: 0; font-size: 0px; color: #FCEFE5; font-weight: 600;}

    .contain-right-obsah { width: 0px; height: 0px;}

    .content-all { width: 750px; height: auto; display: flex; flex-wrap: wrap; justify-content: center;}
    .content-box { width: 355px; height: auto; padding: 10px;}
    .content-all h1, .content-box h1 { width: 100%;}
    .content-box h1 { text-align: left; width: 100%;}

    /* Servisní nabídka služeb */
    .service-box { width: 710px; height: auto; padding: 20px; display: flex; flex-wrap: wrap; background: #AF4E06; border-radius: 16px;}
    .service-box h1 { width: 500px; text-align: center; font-family: 'Bungee', sans-serif; font-size: 2.6em; position: absolute; margin: -50px 0 0 125px;}
    .service-box-item { width: 0px; height: auto; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-right: none; border-top-left-radius: 16px; border-bottom-left-radius: 16px; background: rgba(33,22,12,.5);}
    .service-box-item-object { width: 0px; height: 0px; visibility: hidden; position: absolute;}
    .service-box-item-object img { width: 100%; height: 100%; margin: 0 0 0 -30px; object-fit: cover;}
    .service-box-item-content { width: 121px; height: 100px; display: flex; flex-wrap: wrap; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; background: rgba(33,22,12,.5);}
    .service-box-item-content img { height: 100px;}
    .service-box-item-content:last-child { width: 99px; height: 100px; display: flex; flex-wrap: wrap; border-right: 1px solid #F3F3F3; border-left: none; background: rgba(33,22,12,.5);}

    /* Spodní část webu */
    footer { width: 100%; height: auto; padding: 40px 0 15px 0; display: flex; flex-flow: column; align-items: center; background: url('../themes/back.jpg') top no-repeat; background-size: 800px auto;}
    .infobox { width: 750px; height: auto; display: flex; flex-wrap: wrap; align-content: space-around;}
    .infobox-part { width: 230px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .infobox-part:nth-of-type(2) { width: 228px; height: auto; padding: 10px; border-right: 1px solid #C3C3C3; border-left: 1px solid #C3C3C3; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part img { width: 220px; object-fit: contain;}
    .infobox-part h1 { font-size: 1em;} 
    .infobox-part-partbox { width: 230px; height: auto; display: flex; flex-wrap: wrap;}
    .infobox-part-partbox-left { width: 30px; height: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;}
    .infobox-part-partbox-left img { width: 20px; height: 20px; object-fit: cover;}
    .infobox-part-partbox-right { width: 200px; height: auto; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part-partbox-right p { font-size: .75em; margin: 0;} 
    .databox { width: 690px; height: auto; padding: 10px 30px 0 30px; margin-top: 10px; border-top: 1px solid #C3C3C3; display: flex; justify-content: space-between;}
    .copyright { width: 200px; height: 30px; display: flex; flex-wrap: wrap; justify-content: start; align-content: center;}
    .romandesign { width: 300px; height: 30px; display: flex; flex-wrap: wrap; justify-content: end; align-content: center;}
    .copyright p, .romandesign p { font-size: .8em; margin: 0; font-weight: 500;}
    .copyright a, .romandesign a { font-size: .8em; margin: 0; font-weight: 500; color: #21160C;}

    /* Definice novinek */
    .newsroom { width: 750px; height: auto; display: flex; flex-wrap: wrap;}
    .newbox { width: 230px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .newbox-abox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-abox { width: 100px; height: 60px; margin: -5px 0 0 -5px; background: #E0901E;}
    a.newbox:hover .newbox-abox { width: 90px; height: 90px; margin: -5px 0 0 -5px; background: #AF4E06;}
    .newbox-bbox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-bbox { width: 40px; height: 90px; margin: -5px 0 0 195px; background: #AF4E06;}
    a.newbox:hover .newbox-bbox { width: 50px; height: 90px; margin: 55px 0 0 185px; background: #E0901E;}
    .newbox-image { width: 228px; height: 138px; border: 1px solid #21160C; overflow: hidden; position: absolute; margin: 0;}
    .newbox-image img { height: 160px; object-fit: cover; transition: all .35s ease-in-out;}
    a.newbox .newbox-image img { filter: sepia(1);}
    a.newbox:hover .newbox-image img { filter: sepia(0);}
    .newbox-space { width: 230px; height: 100px; z-index: 10;}
    .newbox-content { width: 190px; height: auto; z-index: 10; margin: 0 0 0 20px; padding: 5px; border: 1px solid #21160C; background: #FFF;}
    .newbox-content h2 { width: 100%; margin: 0 0 5px 0; font-size: 12px; font-family: 'Bungee', sans-serif; transition: all .35s ease-in-out;}
    a.newbox .newbox-content h2 { color: #E0901E;}
    a.newbox:hover .newbox-content h2 { color: #AF4E06;}
    .newbox-content p { width: 100%; margin: 0; font-size: 14px; color: #21160C; font-weight: 500;}

    /* Definice pro service box */
    .servisbox { width: 250px; height: 250px; margin: 0; display: flex; flex-wrap: wrap;}
    .servisbox-content { width: 230px; height: 230px; margin: 10px; border-radius: 18px; display: flex; flex-flow: column; justify-content: center; align-items: center; transition: all .355s ease-in-out; background: #F3F3F3;}
    a.servisbox-content { border: 3px solid #C3C3C3;}
    a.servisbox-content:hover { border: 3px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 1.4em; font-family: 'Bungee', sans-serif;}

    .content-right .servisbox { width: 0px; height: 0px; visibility: hidden;}

    /* Galerie */
    .gallery {
        max-width: 720px;
        margin: 0 auto;
        display: grid;
        gap: 8px; /* mezery mezi obrázky */
        background: rgba(0,0,0,.25);   
        
        grid-template-columns: 2fr 2fr 1.5fr;
        grid-template-areas:
            "big big side1"
            "big big side2"
            "bottom1 bottom2 bottom3";
    }
    /* společný styl pro položky */
    .gallery .item { overflow: hidden;}
    /* obrázky vyplní buňky a oříznou se */
    .gallery img { width: 100%; height: 100%; object-fit: cover; display: block;}
    /* rozmístění jednotlivých položek */
    .item1 { grid-area: big;}
    .item2 { grid-area: side1;}
    .item3 { grid-area: side2;}
    .item4 { grid-area: bottom1;}
    .item5 { grid-area: bottom2;}
    .item6 { grid-area: bottom3;}

    /* List box */
    .listbox { width: 710px; margin: 0 0 10px 0; display: flex; flex-wrap: wrap; align-items: center; transition: all .35s ease-in-out;}
    a.listbox { border: 1px solid #C3C3C3; color: #AF4E06; background: rgba(224,144,30,.04);}
    a.listbox:nth-child(odd) { background: rgba(224,144,30,.08);}
    a.listbox:hover { border: 1px solid #AF4E06; color: #21160C; background: rgba(224,144,30,.12);}
    .listbox-id { width: calc(100% - 20px); padding: 10px; display: flex; flex-wrap: wrap; align-items: center; font-size: 1.3em;}
    a.listbox .listbox-id { color: #AF4E06;}
    a.listbox:hover .listbox-id { color: #21160C;}

    .content-all .listbox { width: 750px;}
    .content-all .listbox-id { width: 353px; padding: 10px;  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 1.2em;}
    .content-all .listbox-id:first-child { font-size: 1.3em; justify-content: start;}

    /* KontaktBox */
    .kontaktbox { width: 676px; height: auto; padding: 15px; border-radius: 14px; border: 2px solid #AF4E06; background: rgba(224,144,30,.08);}
    .kontaktbox h1 span { color: #AF4E06;}
    .kontaktbox p { font-size: 1.1em;}
    .kontaktbox p span { font-weight: 600; color: #AF4E06;}

    .kontakt-maps { width: 750px; height: 320px; border: 1px solid #AF4E06; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .kontakt-maps img { width: 100%;}

    #facebodypage section main .content-right { width: 0px; height: 0px; visibility: hidden;}
}

/* Tablety na výšku */
@media screen and (min-width: 481px) and (max-width: 768px) {
    #facebody, #facebodypage { width: 100%; height: auto; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 800px auto;}
    #facebodypage { background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 800px auto;}

    /* Definice textu */
    .free { width:100%; height: 10px;}
    .free-big { width: 100%; height: 30px;}
    .free-mini { width: 100%; height: 7px;}
    .space { width: 100%; height: 20px;}
    .top-space { width: 100%; height: 40px;}

    h1, .nadpis { font-size: 19px; margin: 0 0 10px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 15px; margin: 0 0 6px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 15px; font-weight: 700;}
    ul, ol { list-style-position: inside; padding-left: 0; margin: 0 0 6px 0;}
    ul li, ol li { font-size: 15px; margin: 0 0 6px 0; font-weight: 300;}
    ul li::marker, ol li::marker { color: #AF4E06;}
    ul li span, ol li span { font-weight: 500; color: #AF4E06;}

    /* Hlavička webu */
    header { width: 100%; height: auto; display: flex; flex-flow: column; justify-content: start; align-items: center;}
    header main { width: 100%; height: 118px; z-index: 10; display: flex; flex-flow: column; justify-content: center; align-items: center;}

    .titulspage { width: 460px; height: 120px; padding: 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .logo { width: 210px; height: 42px; display: flex; flex-flow: column; justify-content: start; align-items: center; background: url('../themes/logo.png') top no-repeat; background-size: contain;}
    .quickcontact { width: 200px; height: 80px; display: flex; flex-wrap: wrap; justify-content: start; align-items: start;}
    .quickcontact-box { width: 200px; height: 40px; padding: 0 0 0 40px; display: flex; flex-flow: column; justify-content: start; align-items: start;}
    .quickcontact-box:nth-of-type(1) { width: 219px;}
    .quickcontact-box-icon { width: 40px; height: 40px; position: absolute; margin: 0 0 0 -40px;}
    .quickcontact-box-icon img { margin: 5px; width: 30px;}
    .quickcontact-box-info { width: 160px; height: 40px; display: flex; flex-flow: column; justify-content: center; align-items: left;}
    .quickcontact-box-info p { font-size: 11px; margin: 0px;}
    .quickcontact-box-info p:nth-of-type(2) { font-size: 15px; margin: 0px;}

    header nav { width: 480px; height: 40px; z-index: 10; display: flex; border: 1px solid #AF4E06; overflow: hidden; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 10px 20px 0 rgba(33,22,12,.3); background: #E0901E;}
    .linear-navi { width: auto; height: 0px; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}
    .linear-navi a { width: auto; height: 45px; padding: 0 10px 0 10px; display: flex; justify-content: space-around; align-items: center; transition: all 0.35s ease-in-out;}
    .linear-navi a:hover { color: #F3F3F3; background: #AF4E06;}
    .linear-navi a img { width: 25px; height: 25px; object-fit: cover;} 
    .linear-navi a p { margin: 0; font-size: .9em; font-weight: 500;}

    .action-button-pozice { width: auto; height: 40px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .action-button { width: auto; height: 40px; padding: 0 20px 0 20px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    a.action-button { background: #AF4E06;}
    a.action-button:hover { background: #21160C;}
    .action-button p { margin: 0; font-size: 14px; font-weight: 900; color: #F3F3F3;}

    .mobilnavigace-pozice { width: auto; height: 40px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .mobilnavigace { width: auto; height: 40px; padding: 0 20px 0 20px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out; cursor: pointer;}
    a.mobilnavigace { background: #E0901E; color: #21160C;}
    a.mobilnavigace:hover { background: #AF4E06; color: #FFF;}
    .mobilnavigace p { margin: 0; font-size: 14px; font-weight: 900;}

    /* Vlastní obsah sekce na hlavní stránce webu */
    .header-content { width: 0px; height: 0px; padding: 0 0 0 0; visibility: hidden; z-index: 10;}
 
    header h1 { font-size: 28px; width: auto; margin: 10px 0 0 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif;}

    #facebodypage .header-content { width: 480px; height: auto; padding: 20px 0 0 0; z-index: 10; display: flex; flex-flow: column; justify-content: end; align-items: start;}
    #facebodypage .header-content h1 { font-size: 28px; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
    #facebodypage .header-content p { font-size: 12px; font-weight: 600; width: auto; margin: 0; color: #21160C;}
    #facebodypage .header-content p a { text-decoration: none; color: #AF4E06;}
    #facebodypage .header-content p a:hover { text-decoration: underline; color: #E0901E;}

    /* Obsahový rámec */
    section { width: 100%; height: auto; padding: 30px 0px; display: flex; flex-flow: column; align-items: center;}
    /* Pouze první sekce uvnitř #facebodypage */
    #facebodypage section:first-of-type { padding: 20px 0px;}
    section h1 { width: auto; text-align: center; font-family: 'Bungee', sans-serif;}
    section .space { height: 20px;}
    section main { width: 480px; height: auto; display: flex; flex-wrap: wrap;}
    
    .content-left { width: 730px; height: auto; padding: 10px;}
    .content-left p { text-align: justify;}
    .content-left p span { font-weight: 400; color: #E0901E;}
    .content-left h1 { font-family: 'Bungee', sans-serif;}
    .content-right { width: 0px; visibility: hidden; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-self: start; overflow: hidden;}
    .content-right-box { width: 0px; height: 0px; border: none; visibility: hidden; position: absolute; margin: 0;}
    .content-right-box img { width: 0px; height: 0px; border: none; visibility: hidden; text-align: left;}
    .content-right-box:nth-of-type(2) { width: 0px; height: 0px; border: none; visibility: hidden; position: absolute; margin: 0;}
    .content-right-circle { width: 0px; height: 0px; border: none; visibility: hidden;position: absolute; margin: 0; border-radius: 100%; text-align: center; vertical-align: center; align-content: center; border: 3px solid #F3F3F3; background: #AF4E06;}
    .content-right-circle h1 { margin: 0; font-weight: 900; font-size: 0px; color: #E0901E; font-family: 'Bungee', sans-serif;}
    .content-right-circle p { margin: 0; font-size: 0px; color: #FCEFE5; font-weight: 600;}

    .contain-right-obsah { width: 0px; height: 0px;}

    .content-all { width: 480px; height: auto; display: flex; flex-wrap: wrap; justify-content: center;}
    .content-box { width: 230px; height: auto; padding: 5px;}
    .content-all h1, .content-box h1 { width: 100%;}
    .content-box h1 { text-align: left; width: 100%;}

    /* Servisní nabídka služeb */
    .service-box { width: 460px; height: auto; padding: 10px; display: flex; flex-wrap: wrap; background: #AF4E06; border-radius: 8px;}
    .service-box h1 { width: 460px; text-align: center; font-family: 'Bungee', sans-serif; font-size: 32px; position: absolute; margin: -25px 0 0 0;}
    .service-box-item { width: 0px; height: auto; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-right: none; border-top-left-radius: 16px; border-bottom-left-radius: 16px; background: rgba(33,22,12,.5);}
    .service-box-item-object { width: 0px; height: 0px; visibility: hidden; position: absolute;}
    .service-box-item-object img { width: 100%; height: 100%; margin: 0 0 0 -30px; object-fit: cover;}
    .service-box-item-content { width: 76px; height: 70px; display: flex; flex-wrap: wrap; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; background: rgba(33,22,12,.5);}
    .service-box-item-content img { height: 70px;}
    .service-box-item-content:last-child { width: 78px; height: 70px; display: flex; flex-wrap: wrap; border-right: 1px solid #F3F3F3; border-left: none; background: rgba(33,22,12,.5);}

    /* Spodní část webu */
    footer { width: 100%; height: auto; padding: 30px 0 15px 0; display: flex; flex-flow: column; align-items: center; background: url('../themes/back.jpg') top no-repeat; background-size: 600px auto;}
    .infobox { width: 480px; height: auto; display: flex; flex-wrap: wrap; align-content: space-around;}
    .infobox-part { width: 220px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .infobox-part:nth-of-type(3) { width: 0px; height: auto; padding: 0px; overflow: hidden; border-right: none; visibility: hidden; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part img { width: 220px; object-fit: contain;}
    .infobox-part h1 { font-size: 16px;} 
    .infobox-part-partbox { width: 230px; height: auto; display: flex; flex-wrap: wrap;}
    .infobox-part-partbox-left { width: 30px; height: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;}
    .infobox-part-partbox-left img { width: 20px; height: 20px; object-fit: cover;}
    .infobox-part-partbox-right { width: 200px; height: auto; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part-partbox-right p { font-size: 14px; margin: 0;} 
    .databox { width: 440px; height: auto; padding: 10px 20px 0 20px; margin-top: 10px; border-top: 1px solid #C3C3C3; display: flex; justify-content: space-between;}
    .copyright { width: 200px; height: 30px; display: flex; flex-wrap: wrap; justify-content: start; align-content: center;}
    .romandesign { width: 200px; height: 30px; display: flex; flex-wrap: wrap; justify-content: end; align-content: center;}
    .copyright p, .romandesign p { font-size: .8em; margin: 0; font-weight: 500;}
    .copyright a, .romandesign a { font-size: .8em; margin: 0; font-weight: 500; color: #21160C;}

    /* Definice novinek */
    .newsroom { width: 480px; height: auto; display: flex; flex-wrap: wrap; align-items: center;}
    .newbox { width: 380px; height: auto; padding: 20px 50px; display: flex; flex-flow: column;}
    .newbox-abox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-abox { width: 200px; height: 60px; margin: -10px 0 0 -10px; background: #E0901E;}
    a.newbox:hover .newbox-abox { width: 90px; height: 90px; margin: -10px 0 0 -10px; background: #AF4E06;}
    .newbox-bbox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-bbox { width: 40px; height: 120px; margin: -10px 0 0 350px; background: #AF4E06;}
    a.newbox:hover .newbox-bbox { width: 50px; height: 90px; margin: 160px 0 0 340px; background: #E0901E;}
    .newbox-image { width: 378px; height: 238px; border: 1px solid #21160C; overflow: hidden; position: absolute; margin: 0;}
    .newbox-image img { height: 240px; object-fit: cover; transition: all .35s ease-in-out;}
    a.newbox .newbox-image img { filter: sepia(1);}
    a.newbox:hover .newbox-image img { filter: sepia(0);}
    .newbox-space { width: 380px; height: 180px; z-index: 10;}
    .newbox-content { width: 300px; height: auto; z-index: 10; margin: 0 0 0 40px; padding: 10px; border: 1px solid #21160C; background: #FFF;}
    .newbox-content h2 { width: 100%; margin: 0 0 5px 0; font-size: .9em; font-family: 'Bungee', sans-serif; transition: all .35s ease-in-out;}
    a.newbox .newbox-content h2 { color: #E0901E;}
    a.newbox:hover .newbox-content h2 { color: #AF4E06;}
    .newbox-content p { width: 100%; margin: 0; font-size: 1.3em; color: #21160C; font-weight: 500;}

    /* Definice pro service box */
    .servisbox { width: 160px; height: 160px; margin: 0; display: flex; flex-wrap: wrap;}
    .servisbox-content { width: 140px; height: 140px; margin: 10px; border-radius: 12px; display: flex; flex-flow: column; justify-content: center; align-items: center; transition: all .355s ease-in-out; background: #F3F3F3;}
    a.servisbox-content { border: 2px solid #C3C3C3;}
    a.servisbox-content:hover { border: 2px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 16px; font-family: 'Bungee', sans-serif;}

    .content-right .servisbox { width: 0px; height: 0px; visibility: hidden;}

    /* Galerie */
    .gallery {
        max-width: 720px;
        margin: 0 auto;
        display: grid;
        gap: 8px; /* mezery mezi obrázky */
        background: rgba(0,0,0,.25);   
        
        grid-template-columns: 2fr 2fr 1.5fr;
        grid-template-areas:
            "big big side1"
            "big big side2"
            "bottom1 bottom2 bottom3";
    }
    /* společný styl pro položky */
    .gallery .item { overflow: hidden;}
    /* obrázky vyplní buňky a oříznou se */
    .gallery img { width: 100%; height: 100%; object-fit: cover; display: block;}
    /* rozmístění jednotlivých položek */
    .item1 { grid-area: big;}
    .item2 { grid-area: side1;}
    .item3 { grid-area: side2;}
    .item4 { grid-area: bottom1;}
    .item5 { grid-area: bottom2;}
    .item6 { grid-area: bottom3;}

    /* List box */
    .listbox { width: 460px; margin: 0 0 10px 0; display: flex; flex-wrap: wrap; align-items: center; transition: all .35s ease-in-out;}
    a.listbox { border: 1px solid #C3C3C3; color: #AF4E06; background: rgba(224,144,30,.04);}
    a.listbox:nth-child(odd) { background: rgba(224,144,30,.08);}
    a.listbox:hover { border: 1px solid #AF4E06; color: #21160C; background: rgba(224,144,30,.12);}
    .listbox-id { width: calc(100% - 20px); padding: 5px; display: flex; flex-wrap: wrap; align-items: center; font-size: 18px;}
    a.listbox .listbox-id { color: #AF4E06;}
    a.listbox:hover .listbox-id { color: #21160C;}

    .content-all .listbox { width: 480px;}
    .content-all .listbox-id { width: 228px; padding: 5px;  display: flex; align-items: center; justify-content: center; text-align: center; font-size: 15px;}
    .content-all .listbox-id:first-child { font-size: 18px; justify-content: start;}

    /* KontaktBox */
    .kontaktbox { width: 448px; height: auto; padding: 5px; border-radius: 14px; border: 1px solid #AF4E06; background: rgba(224,144,30,.08);}
    .kontaktbox h1 span { color: #AF4E06;}
    .kontaktbox p { font-size: 16px;}
    .kontaktbox p span { font-weight: 600; color: #AF4E06;}

    .kontakt-maps { width: 480px; height: 180px; border: 1px solid #AF4E06; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .kontakt-maps img { width: 100%;}

    #facebodypage section main .content-right { width: 0px; height: 0px; visibility: hidden;}
}

/* Rozhraní pro mobil */
@media screen and (max-width: 480px) {
    #facebody, #facebodypage { width: 100%; height: auto; position: relative; display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: center; background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 800px auto;}
    #facebodypage { background: #F3F3F3 url('../themes/wall_shadow.jpg') top no-repeat; background-size: 800px auto;}

    /* Definice textu */
    .free { width:100%; height: 5px;}
    .free-big { width: 100%; height: 20px;}
    .free-mini { width: 100%; height: 5px;}
    .space { width: 100%; height: 10px;}
    .top-space { width: 100%; height: 25px;}

    h1, .nadpis { font-size: 20px; margin: 0 0 5px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 14px; margin: 0 0 4px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 14px; font-weight: 700;}
    ul, ol { list-style-position: inside; padding-left: 0; margin: 0 0 4px 0;}
    ul li, ol li { font-size: 14px; margin: 0 0 4px 0; font-weight: 300;}
    ul li::marker, ol li::marker { color: #AF4E06;}
    ul li span, ol li span { font-weight: 500; color: #AF4E06;}

    /* Hlavička webu */
    header { width: 100%; height: auto; display: flex; flex-flow: column; justify-content: start; align-items: center;}
    header main { width: 100%; height: 118px; z-index: 10; display: flex; flex-flow: column; justify-content: center; align-items: center;}

    .titulspage { width: 300px; height: 120px; padding: 0 10px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center;}
    .logo { width: 300px; height: 42px; display: flex; flex-flow: column; justify-content: start; align-items: center; background: url('../themes/logo.png') top no-repeat; background-size: contain;}
    .quickcontact { width: 300px; height: 40px; display: flex; flex-wrap: wrap; justify-content: start; align-items: start;}
    .quickcontact-box { width: 148px; height: 40px; padding: 0 0 0 0; display: flex; flex-flow: column; justify-content: start; align-items: start;}
    .quickcontact-box:nth-of-type(1) { width: 148px;}
    .quickcontact-box-icon { width: 0px; height: 0px; position: absolute; margin: 0 0 0 0;}
    .quickcontact-box-icon img { margin: 0; width: 0;}
    .quickcontact-box-info { width: 148px; height: 40px; display: flex; flex-flow: column; justify-content: center; align-items: left;}
    .quickcontact-box-info p { font-size: 13px; margin: 0px; text-align: center;}
    .quickcontact-box-info p:nth-of-type(2) { font-size: 15px; margin: 0px; text-align: center;}

    header nav { width: 320px; height: 40px; z-index: 10; display: flex; border: 1px solid #AF4E06; overflow: hidden; flex-wrap: wrap; justify-content: space-between; align-items: center; box-shadow: 0 10px 20px 0 rgba(33,22,12,.3); background: #E0901E;}
    .linear-navi { width: auto; height: 0px; visibility: hidden; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;}

    .action-button-pozice { width: auto; height: 40px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .action-button { width: auto; height: 40px; padding: 0 10px 0 10px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out;}
    a.action-button { background: #AF4E06;}
    a.action-button:hover { background: #21160C;}
    .action-button p { margin: 0; font-size: 12px; font-weight: 900; color: #F3F3F3;}

    .mobilnavigace-pozice { width: auto; height: 40px; display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center;} 
    .mobilnavigace { width: auto; height: 40px; padding: 0 10px 0 10px; display: flex; justify-content: space-around; align-items: center; transition: all .35s ease-in-out; cursor: pointer;}
    a.mobilnavigace { background: #E0901E; color: #21160C;}
    a.mobilnavigace:hover { background: #AF4E06; color: #FFF;}
    .mobilnavigace p { margin: 0; font-size: 12px; font-weight: 900;}
    
    /* Vlastní obsah sekce na hlavní stránce webu */
    .header-content { width: 0px; height: 0px; padding: 0 0 0 0; visibility: hidden; z-index: 10;}
 
    header h1 { font-size: 22px; width: auto; margin: 10px 0 0 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif;}

    #facebodypage .header-content { width: 320px; height: auto; padding: 15px 0 0 0; z-index: 10; display: flex; flex-flow: column; justify-content: end; align-items: start;}
    #facebodypage .header-content h1 { font-size: 28px; width: auto; margin: 0; color: #E0901E; background: linear-gradient(90deg, #E0901E 0%, #AF4E06 50%, #21160C 100%); -webkit-background-clip: text; /* Safari/Chrome */ background-clip: text; -webkit-text-fill-color: transparent; /* Safari/Chrome */ color: transparent; /* fallback */ display: inline-block; /* zajišťuje korektní klipnutí pozadí nad textem */ font-family: 'Bungee', sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;}
    #facebodypage .header-content p { font-size: 12px; font-weight: 600; width: auto; margin: 0; color: #21160C;}
    #facebodypage .header-content p a { text-decoration: none; color: #AF4E06;}
    #facebodypage .header-content p a:hover { text-decoration: underline; color: #E0901E;}

    /* Obsahový rámec */
    section { width: 100%; height: auto; padding: 20px 0px; display: flex; flex-flow: column; align-items: center;}
    /* Pouze první sekce uvnitř #facebodypage */
    #facebodypage section:first-of-type { padding: 10px 0px;}
    section h1 { width: auto; text-align: center; font-family: 'Bungee', sans-serif;}
    section .space { height: 15px;}
    section main { width: 320px; height: auto; display: flex; flex-wrap: wrap;}
    
    .content-left { width: 300px; height: auto; padding: 10px;}
    .content-left p { text-align: justify;}
    .content-left p span { font-weight: 400; color: #E0901E;}
    .content-left h1 { font-family: 'Bungee', sans-serif;}
    .content-right { width: 0px; visibility: hidden; height: auto; display: flex; flex-wrap: wrap; justify-content: center; align-self: start; overflow: hidden;}
    .content-right-box { width: 0px; height: 0px; border: none; visibility: hidden; position: absolute; margin: 0;}
    .content-right-box img { width: 0px; height: 0px; border: none; visibility: hidden; text-align: left;}
    .content-right-box:nth-of-type(2) { width: 0px; height: 0px; border: none; visibility: hidden; position: absolute; margin: 0;}
    .content-right-circle { width: 0px; height: 0px; border: none; visibility: hidden;position: absolute; margin: 0; border-radius: 100%; text-align: center; vertical-align: center; align-content: center; border: 3px solid #F3F3F3; background: #AF4E06;}
    .content-right-circle h1 { margin: 0; font-weight: 900; font-size: 0px; color: #E0901E; font-family: 'Bungee', sans-serif;}
    .content-right-circle p { margin: 0; font-size: 0px; color: #FCEFE5; font-weight: 600;}

    .contain-right-obsah { width: 0px; height: 0px;}

    .content-all { width: 320px; height: auto; display: flex; flex-wrap: wrap; justify-content: center;}
    .content-box { width: 310px; height: auto; padding: 5px;}
    .content-all h1, .content-box h1 { width: 100%;}
    .content-box h1 { text-align: left; width: 100%;}

    /* Servisní nabídka služeb */
    .service-box { width: 300px; height: auto; padding: 10px; display: flex; flex-wrap: wrap; background: #AF4E06; border-radius: 4px;}
    .service-box h1 { width: 300px; text-align: center; font-family: 'Bungee', sans-serif; font-size: 22px; position: absolute; margin: -25px 0 0 0;}
    .service-box-item { width: 0px; height: auto; display: flex; flex-wrap: wrap; border: 1px solid #F3F3F3; border-right: none; border-top-left-radius: 16px; border-bottom-left-radius: 16px; background: rgba(33,22,12,.5);}
    .service-box-item-object { width: 0px; height: 0px; visibility: hidden; position: absolute;}
    .service-box-item-object img { width: 100%; height: 100%; margin: 0 0 0 -30px; object-fit: cover;}
    .service-box-item-content { width: 49px; height: 49px; display: flex; flex-wrap: wrap; border-top: 1px solid #F3F3F3; border-bottom: 1px solid #F3F3F3; background: rgba(33,22,12,.5);}
    .service-box-item-content img { height: 49px;}
    .service-box-item-content:last-child { width: 49px; height: 49px; display: flex; flex-wrap: wrap; border-right: 1px solid #F3F3F3; border-left: none; background: rgba(33,22,12,.5);}

    /* Spodní část webu */
    footer { width: 100%; height: auto; padding: 20px 0 15px 0; display: flex; flex-flow: column; align-items: center; background: url('../themes/back.jpg') top no-repeat; background-size: 400px auto;}
    .infobox { width: 300px; height: 120px; display: flex; flex-wrap: wrap; align-content: space-around;}
    .infobox-part { width: 280px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .infobox-part:nth-of-type(2), .infobox-part:nth-of-type(3) { width: 0px; height: auto; padding: 0px; border-right: none; overflow: hidden; visibility: hidden; display: flex; flex-flow: column; align-content: flex-start;}
    .infobox-part img { width: 220px; object-fit: contain; margin-left: 30px;}
    .infobox-part h1 { font-size: 16px;} 
    .infobox-part-partbox { width: 240px; margin-left: 20px; height: auto; display: flex; flex-wrap: wrap;}
    .infobox-part-partbox-left { width: 40px; height: auto; display: flex; flex-wrap: wrap; align-content: center; justify-content: center;}
    .infobox-part-partbox-left img { width: 20px; height: 20px; object-fit: cover; margin-left: 10px;}
    .infobox-part-partbox-right { width: 200px; height: auto; display: flex; flex-flow: column; align-content: flex-start; justify-content: center;}
    .infobox-part-partbox-right p { font-size: 14px; margin: 0;} 
    .databox { width: 300px; height: auto; padding: 10px 10px 0 10px; margin-top: 10px; border-top: 1px solid #C3C3C3; display: flex; flex-wrap: wrap; justify-content: space-between;}
    .copyright { width: 100%; height: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
    .romandesign { width: 100%; height: 30px; display: flex; flex-wrap: wrap; justify-content: center; align-content: center;}
    .copyright p, .romandesign p { font-size: 12px; margin: 0; font-weight: 500;}
    .copyright a, .romandesign a { font-size: 12px; margin: 0; font-weight: 500; color: #21160C;}

    /* Definice novinek */
    .newsroom { width: 320px; height: auto; display: flex; flex-wrap: wrap;}
    .newbox { width: 280px; height: auto; padding: 10px; display: flex; flex-flow: column;}
    .newbox-abox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-abox { width: 150px; height: 60px; margin: -5px 0 0 -5px; background: #E0901E;}
    a.newbox:hover .newbox-abox { width: 90px; height: 90px; margin: -5px 0 0 -5px; background: #AF4E06;}
    .newbox-bbox { position: absolute; transition: all .35s ease-in-out;}
    a.newbox .newbox-bbox { width: 50px; height: 80px; margin: -5px 0 0 235px; background: #AF4E06;}
    a.newbox:hover .newbox-bbox { width: 50px; height: 70px; margin: 95px 0 0 235px; background: #E0901E;}
    .newbox-image { width: 278px; height: 158px; border: 1px solid #21160C; overflow: hidden; position: absolute; margin: 0;}
    .newbox-image img { height: 170px; object-fit: cover; transition: all .35s ease-in-out;}
    a.newbox .newbox-image img { filter: sepia(1);}
    a.newbox:hover .newbox-image img { filter: sepia(0);}
    .newbox-space { width: 280px; height: 120px; z-index: 10;}
    .newbox-content { width: 240px; height: auto; z-index: 10; margin: 0 0 0 20px; padding: 5px; border: 1px solid #21160C; background: #FFF;}
    .newbox-content h2 { width: 100%; margin: 0 0 5px 0; font-size: 12px; font-family: 'Bungee', sans-serif; transition: all .35s ease-in-out;}
    a.newbox .newbox-content h2 { color: #E0901E;}
    a.newbox:hover .newbox-content h2 { color: #AF4E06;}
    .newbox-content p { width: 100%; margin: 0; font-size: 16px; color: #21160C; font-weight: 500;}

    /* Definice pro service box */
    .servisbox { width: 160px; height: 160px; margin: 0; display: flex; flex-wrap: wrap;}
    .servisbox-content { width: 140px; height: 140px; margin: 10px; border-radius: 12px; display: flex; flex-flow: column; justify-content: center; align-items: center; transition: all .355s ease-in-out; background: #F3F3F3;}
    a.servisbox-content { border: 2px solid #C3C3C3;}
    a.servisbox-content:hover { border: 2px solid #E0901E; color: #21160C;}
    .servisbox-content h1 { margin: 10px; font-size: 16px; font-family: 'Bungee', sans-serif;}

    .content-right .servisbox { width: 0px; height: 0px; visibility: hidden; overflow: hidden;}

    /* Galerie */
    .gallery {
        max-width: 720px;
        margin: 0 auto;
        display: grid;
        gap: 8px; /* mezery mezi obrázky */
        background: rgba(0,0,0,.25);   
        
        grid-template-columns: 2fr 2fr 1.5fr;
        grid-template-areas:
            "big big side1"
            "big big side2"
            "bottom1 bottom2 bottom3";
    }
    /* společný styl pro položky */
    .gallery .item { overflow: hidden;}
    /* obrázky vyplní buňky a oříznou se */
    .gallery img { width: 100%; height: 100%; object-fit: cover; display: block;}
    /* rozmístění jednotlivých položek */
    .item1 { grid-area: big;}
    .item2 { grid-area: side1;}
    .item3 { grid-area: side2;}
    .item4 { grid-area: bottom1;}
    .item5 { grid-area: bottom2;}
    .item6 { grid-area: bottom3;}

    /* List box */
    .listbox { width: 300px; margin: 0 0 10px 0; display: flex; flex-wrap: wrap; align-items: center; transition: all .35s ease-in-out;}
    a.listbox { border: 1px solid #C3C3C3; color: #AF4E06; background: rgba(224,144,30,.04);}
    a.listbox:nth-child(odd) { background: rgba(224,144,30,.08);}
    a.listbox:hover { border: 1px solid #AF4E06; color: #21160C; background: rgba(224,144,30,.12);}
    .listbox-id { width: calc(100% - 20px); padding: 5px; display: flex; flex-wrap: wrap; align-items: center; font-size: 16px;}
    a.listbox .listbox-id { color: #AF4E06;}
    a.listbox:hover .listbox-id { color: #21160C;}

    .content-all .listbox { width: 320px;}
    .content-all .listbox-id { width: 305px; padding: 2px 10px; display: flex; align-items: center; justify-content: start; text-align: center; font-size: 15px;}
    .content-all .listbox-id:first-child { width: 298px; padding: 10px; font-size: 18px; justify-content: start;}

    /* KontaktBox */
    .kontaktbox { width: 290px; height: auto; padding: 5px; border-radius: 10px; border: 1px solid #AF4E06; background: rgba(224,144,30,.08);}
    .kontaktbox h1 span { color: #AF4E06;}
    .kontaktbox p { font-size: 15px;}
    .kontaktbox p span { font-weight: 600; color: #AF4E06;}

    .kontakt-maps { width: 320px; height: 150px; border: 1px solid #AF4E06; display: flex; align-items: center; justify-content: center; overflow: hidden;}
    .kontakt-maps img { width: 100%;}

    #facebodypage section main .content-right { width: 0px; height: 0px; visibility: hidden;}
}