/* 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.png') top no-repeat; background-size: 1550px auto;}
    #facebodypage { background: #F3F3F3 url('../themes/wall_shadow.png') 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; background: #F3F3F3;}
    .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;}

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

    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%;}

    /* Obsahový rámec */
    section { width: 100%; height: auto; padding: 80px 0px; display: flex; flex-flow: column; align-items: center;}
    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;}
    .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: 1.4em; color: #FCEFE5; font-weight: 600;}

    /* 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;}
}

/* Menší laptopy a stolní počítače */
@media (min-width: 1025px) and (max-width: 1200px) {
    #facebody { width: 100%; min-height: 100vh; position: relative;}

    /* 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: 2em; margin: 0 0 20px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1em; margin: 0 0 10px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 1.6em; font-weight: 700;}
    h1 span, h2 span, p span, .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span  { font-weight: 900; color: #E0901E;}
    h1 a, p a, h2 a, .nadpis a, a.nadpis, a.classic-txt, .classic-txt a { color: #21160C;}
    h1 a:hover, p a:hover, h2 a:hover, .nadpis a:hover, a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover { color: #21160C;}
}

/* Tablety na šířku */
@media screen and (min-width: 769px) and (max-width: 1023px) {
    #facebody { width: 100%; min-height: 100vh; position: relative;}

    /* 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: 2em; margin: 0 0 20px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1em; margin: 0 0 10px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 1.6em; font-weight: 700;}
    h1 span, h2 span, p span, .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span  { font-weight: 900; color: #E0901E;}
    h1 a, p a, h2 a, .nadpis a, a.nadpis, a.classic-txt, .classic-txt a { color: #21160C;}
    h1 a:hover, p a:hover, h2 a:hover, .nadpis a:hover, a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover { color: #21160C;}
}

/* Tablety na výšku */
@media screen and (min-width: 481px) and (max-width: 768px) {
    #facebody { width: 100%; min-height: 100vh; position: relative;}

    /* 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: 2em; margin: 0 0 20px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1em; margin: 0 0 10px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 1.6em; font-weight: 700;}
    h1 span, h2 span, p span, .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span  { font-weight: 900; color: #E0901E;}
    h1 a, p a, h2 a, .nadpis a, a.nadpis, a.classic-txt, .classic-txt a { color: #21160C;}
    h1 a:hover, p a:hover, h2 a:hover, .nadpis a:hover, a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover { color: #21160C;}
}

/* Rozhraní pro mobil */
@media screen and (max-width: 480px) {
    #facebody { width: 100%; min-height: 100vh; position: relative;}

    /* 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: 2em; margin: 0 0 20px 0; font-weight: 700;}
    p, .classic-txt, .classic-txt-seznam, .classic-txt-special { font-size: 1em; margin: 0 0 10px 0; font-weight: 300;}
    h2, .classic-txt-special { font-size: 1.6em; font-weight: 700;}
    h1 span, h2 span, p span, .classic-txt span, .nadpis span, .classic-txt-seznam span, .classic-txt-special span  { font-weight: 900; color: #E0901E;}
    h1 a, p a, h2 a, .nadpis a, a.nadpis, a.classic-txt, .classic-txt a { color: #21160C;}
    h1 a:hover, p a:hover, h2 a:hover, .nadpis a:hover, a.nadpis:hover, a.classic-txt:hover, .classic-txt a:hover { color: #21160C;}
}