@media (max-width: 767px)
{
    :root
    {
        --vyska-zahlavi: 80px;
        --sirka: 100vw;
        --vyska-tematu: 100vw;
        --mezera-galerie-v: 20px;
        --mezera-galerie-h: 0px; 
        --pocet-obrazku: 1;
        --sirka-obrazku-galerie: 100vw;
        --vyska-nadpisu-galerie: 64px;
        --vyska-poznamky-galerie: 40px;
        --povolit-galerie: 0;
        --velikost-fontu-nadpisu: 2rem;
        --velikost-fontu-nadpisu-polozky: 1.5rem;
        --velikost-fontu-textu-tematu: 0.8rem;
    }

    body.titul
    {
        --vyska-tematu: 150vw;
    }

    h1
    {
        font-size: 1.5rem;
    }
}

@media (min-width: 768px) and (max-width: 1299px)
{
    :root
    {
        --vyska-zahlavi: 70px;
        --sirka: 720px;
        --vyska-tematu: 288px;
        --mezera-galerie-v: 24px; 
        --pocet-obrazku: 3;
        --sirka-obrazku-galerie: calc((var(--sirka) - (var(--pocet-obrazku) - 1) * var(--mezera-galerie-v)) / var(--pocet-obrazku));
        --vyska-nadpisu-galerie: 54px;
        --velikost-fontu-nadpisu-galerie: 0.9rem;
        --velikost-fontu-dlouheho-nadpisu-galerie: 0.8rem;
        --velikost-fontu-popisu-galerie: 0.8rem;
        --vyska-poznamky-galerie: 28px;
        --povolit-galerie: 1;
        --velikost-fontu-nadpisu: 2rem;
        --velikost-fontu-nadpisu-polozky: 1.5rem;
        --velikost-fontu-textu-tematu: 0.8rem;
    }

    body.titul
    {
        --vyska-tematu: 480px;
    }
}

@media (min-width: 1300px) and (max-width: 1599px)
{
    :root
    {
        --vyska-zahlavi: 120px;
        --sirka: 1200px;
        --vyska-tematu: 480px;
        --mezera-galerie-v: 60px; 
        --pocet-obrazku: 3;
        --sirka-obrazku-galerie: calc((var(--sirka) - (var(--pocet-obrazku) - 1) * var(--mezera-galerie-v)) / var(--pocet-obrazku));
        --vyska-nadpisu-galerie: 72px;
        --vyska-poznamky-galerie: 34px;
        --povolit-galerie: 1;
        --velikost-fontu-nadpisu: 4rem;
    }

    body.titul
    {
        --vyska-tematu: 800px;
    }
}

@media (min-width: 1600px) 
{   
    :root
    {
        --vyska-zahlavi: 120px;
        --sirka: 1500px;
        --vyska-tematu: 600px;
        --mezera-galerie-v: 75px; 
        --pocet-obrazku: 3;
        --sirka-obrazku-galerie: calc((var(--sirka) - (var(--pocet-obrazku) - 1) * var(--mezera-galerie-v)) / var(--pocet-obrazku));
        --vyska-nadpisu-galerie: 90px;
        --vyska-poznamky-galerie: 42px;
        --povolit-galerie: 1;
        --velikost-fontu-nadpisu: 4rem;
    }

    body.titul
    {
        --vyska-tematu: 1000px;
    }
}

@media (max-width: 767px)
{
    html
    {
        font-size: 16px;
    }
}

@media (min-width: 768px)
{
    html
    {
        font-size: 20px;
    }
}

:root
{
    --cervena-zbirovia: rgb(220, 0, 0);
    --stin-zahlavi: rgba(0, 0, 0, 0.8);
}

body.rozbalene-menu
{
    --stin-zahlavi: rgba(0, 0, 0, 0.9);
}

html
{
    font-family: 'Roboto Condensed', sans-serif;
    scroll-behavior: smooth;
}

body {
    margin: 0;
    background-color: white;
    display: grid;
    grid-template-rows: var(--vyska-tematu) auto auto;
    grid-template-areas: 
        ".     nadpis ."
        "vlevo obsah  ."
        ".     paticka .";
}

a
{
    color: var(--cervena-zbirovia);
}

/* plovouci menu zobrazujeme jen pr full hd vetsi */
@media (max-width: 1919px)
{
    div.plovouci-menu
    {
        display: none;
    }
}

@media (min-width: 1920px)
{
    div.plovouci-menu
    {
        font-size: 0.8rem;
    }
}

@media (min-width: 2120px)
{
    div.plovouci-menu
    {
        font-size: 1rem;
    }
}

div.plovouci-menu
{
    grid-area: vlevo;
}

div.plovouci-menu nav
{
    position: -webkit-sticky;
    position: sticky;
    margin: 3rem 1rem 1rem 1rem;
    top: var(--vyska-zahlavi);
}

div.plovouci-menu ul
{
    list-style-type: none;
}

div.plovouci-menu li
{
    margin: 0.8rem 0rem;
}

div.plovouci-menu li a
{
    color: gray;
    transition: color 0.2s;
    text-decoration: none;
}

div.plovouci-menu li.viditelna a
{
    color: var(--cervena-zbirovia);
}

div.plovouci-menu li.viditelna ~ li.viditelna a
{
    color: gray;
}

div.plovouci-menu nav svg
{
    position: absolute;
    left: 0;
    top: var(--y-sipky, 0);
    width: 1rem;
    height: 1rem;
    transition: top 0.1s, opacity 0.2s ease 0.1s;
}

div.plovouci-menu nav.skryt-sipku svg
{
    opacity: 0;
}

div.plovouci-menu svg path
{
    fill: var(--cervena-zbirovia);
}

div.zahlavi 
{
    position: fixed;
    width: 100%;
    display: grid;
    grid-template-rows: var(--vyska-zahlavi) auto;
    grid-template-areas: 
        ". logo ."
        ". menu .";
    z-index: 100;
    pointer-events: none;
}

div.zahlavi div.logo
{
    pointer-events: auto;
}

body > div.nadpis 
{
    grid-area: nadpis;
    padding: 3rem 4rem;
    pointer-events: none;
}

@media (max-width: 360px)
{
    div.zahlavi,
    body
    {
        grid-template-columns: 1fr 360px 1fr;
    }

    div.galerie svg.pocitadlo
    {
        display: none;
    }

    body.detail table
    {
        overflow: scroll;
        display: block;
    }
}



div.zahlavi,
body
{
    grid-template-columns: 1fr var(--sirka) 1fr;
}

img.zahlavi,
picture.zahlavi
{
    grid-area: nadpis;
}

picture.zahlavi img
{
    display: block;
}

div.galerie {
    grid-area: obsah;
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    background: none;
    align-content: flex-start;
    justify-content: space-between;    
}

@media (max-width: 767px)
{
    div.galerie.desktop
    {
        display: none;
    }
}

@media (min-width: 768px)
{
    div.galerie.mobil
    {
        display: none;
    }
}

a 
{
    text-decoration: none;
}

body.detail div.polozky div.polozka h1
{
    padding: 0.4rem 0.8rem;
    display: block;
    background-color: rgb(89, 89, 89);
    color: white;
    margin: 0;
    font-size: var(--velikost-fontu-nadpisu-polozky, 2rem);
}

body.detail div.kolotoc
{
    min-height: calc(var(--sirka) / 2);
    /*background: #f6f6f6;*/
}

body.detail div.tabulka
{
    overflow-x: auto;
}

body.detail table
{
    border-spacing: 0;
    min-width: 100%;
}

body.detail table thead th
{
    background: rgb(89, 89, 89);
    color: white;
}

body.detail table tr:nth-child(odd) td
{
    background-color: white;
}

body.detail table tr:nth-child(even) td
{
    background-color: rgb(217, 217, 217);
}

table td, 
table th
{
    text-align: center;
    padding: 0.3rem 0.5rem;
    white-space: nowrap;
}


/* (min-width: 1920px) 1800px, (min-width: 1280px) 1200px, (min-width: 800px) 720px, 480px */

body.detail div.polozky div.polozka hr
{
    border: none;
    height: 10px;
    background-color: var(--cervena-zbirovia);
    margin: 0;
}

/* obrazky naradi v detailu vcetne alternativ */
div.logo
{
    grid-area: logo;
    display: grid;
    grid-template-columns: var(--vyska-zahlavi) 1fr var(--vyska-zahlavi);
    grid-template-rows: auto;
    grid-template-areas: "leva stred prava";
    background-color: var(--stin-zahlavi);
    transition: background-color 0.2s;
    justify-content: center;
    align-items: center;
    border-bottom: 2px solid var(--cervena-zbirovia);
}

div.logo a  
{
    grid-area: stred;
    justify-self: center;
}

body > div.nadpis 
{
    display: flex;
    box-sizing: border-box;
}

body.titul > div.nadpis
{
    flex-direction: column;
    align-items: flex-end;
    align-content: flex-end;
    justify-content: flex-end;
}

body.skupiny-naradi > div.nadpis,
body.naradi > div.nadpis,
body.detail > div.nadpis
{
    flex-direction: column;
    align-items: flex-end;
    /*align-content: flex-end;*/
    justify-content: flex-end;
}

body.naradi > div.nadpis span
{
    font-style: normal;
}

body > div.nadpis span
{
    font-size: var(--velikost-fontu-nadpisu);
    font-style: italic;
    font-weight: bold;
    color: white;
    opacity: 0.8;
}

/* skupiny naradi */
body.naradi div.galerie div.polozka
{
    display: grid;
    grid-template-rows: var(--vyska-nadpisu-galerie) auto var(--vyska-poznamky-galerie);
    grid-template-columns: var(--sirka-obrazku-galerie);
    grid-template-areas: 
    "nadpis"
    "obrazek"
    "popis";
}

body.skupiny-naradi div.galerie div.polozka
{
    display: grid;
    grid-template-rows: var(--vyska-nadpisu-galerie) auto;
    grid-template-columns: var(--sirka-obrazku-galerie);
    grid-template-areas: 
    "nadpis"
    "obrazek";
}

body.naradi div.galerie div.nadpis,
body.skupiny-naradi div.galerie div.nadpis,
body div.vlozena-galerie div.nadpis
{
    grid-area: nadpis;

    background-color: rgb(127, 127, 127);
    color: white;
    font-size: var(--velikost-fontu-nadpisu-galerie, 1.4rem);
    width: var(--sirka-obrazku-galerie, 1px);
    height: var(--vyska-nadpisu-galerie, 1px);
    box-sizing: border-box;
    padding: 0 1rem;
    text-align: center;

    display: flex;
    align-items: center;
}

body.naradi div.galerie div.nadpis.dlouhy,
body.skupiny-naradi div.galerie div.nadpis.dlouhy
{
    font-size: var(--velikost-fontu-dlouheho-nadpisu-galerie, var(--velikost-fontu-nadpisu-galerie, 1.4rem));
}

div.galerie div.vlozena-galerie.bez-nadpisu div.nadpis,
div.galerie div.vlozena-galerie.bez-nadpisu div.popis
{
    height: 10px;
}

body.naradi div.galerie div.polozka div.nadpis span,
body.skupiny-naradi div.galerie div.polozka div.nadpis span,
body div.vlozena-galerie div.nadpis span
{
    flex: 1;
    color: white;
}

body.naradi div.galerie img
{
    display: block;
}

body.naradi div.galerie div.snimky:not(.drag) img
{
    transition: transform 1s cubic-bezier(0.000, 0.545, 0.610, 0.880);    
}

body.naradi div.galerie div.polozka,
body.naradi div.galerie div.misto,
body.skupiny-naradi div.galerie a
{
    margin-top: var(--mezera-galerie-v, 1px);
}

body.naradi div.galerie div.snimky
{
    grid-area: obrazek;

    overflow: hidden;
    width: var(--sirka-obrazku-galerie, 1px);
    display: flex;
} 

body.naradi div.galerie svg.puntiky
{
    grid-area: obrazek;
    z-index: 2;
    place-self: end center;

    height: 30px;
}



body.naradi div.galerie div.misto,
body.skupiny-naradi div.galerie div.misto
{
    width: var(--sirka-obrazku-galerie, 1px);
    height: var(--vyska-nadpisu-galerie, 1px);
    box-sizing: border-box;
    padding: 0 1rem;
    visibility: hidden;
}

body.naradi div.galerie div.popis,
div.vlozena-galerie div.popis
{
    grid-area: popis;

    box-sizing: border-box;
    background-color: var(--cervena-zbirovia);
    color: white;
    width: var(--sirka-obrazku-galerie, 1px);
    height: var(--vyska-poznamky-galerie, 1px);
    padding: 0 0.7rem;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    text-transform: uppercase;

    font-size: var(--velikost-fontu-popisu-galerie, 1rem);
}

/* stranka detailu */
body.detail img.hlavni
{
    display: block;
    max-width: var(--sirka, none);
}

body.detail div.polozky
{
    grid-area: obsah;
    display: flex;
    flex-direction: column;
}

body.detail > div.polozky > div.polozka
{
    position: relative;
    margin: 3rem 0 0 0;
}

section
{
    position: relative;
}

span.kotva
{
    position: absolute;
    top: calc(-1 * var(--vyska-zahlavi));
    visibility: hidden;
}

body.naradi svg.puntiky > g
{
    transform: translateX(50%);
}

body.naradi svg.puntiky
{
    --roztec-puntiku: 20px;
    --radius-puntiku: 3;
}

body.naradi svg.puntiky > g > g 
{
    transform: translate(calc((var(--index-puntiku) - var(--pocet-puntiku) / 2 + 0.5) * var(--roztec-puntiku)), 50%);
}

body.naradi svg.puntiky circle
{
    transition: transform 0.4s;
    transform: scale(var(--radius-puntiku));
    fill: rgb(192, 192, 192);
}

body.naradi svg.puntiky > g > g.vybrany > circle
{
    --radius-puntiku: 5;
    fill: var(--cervena-zbirovia);
}

/* info okno na ladeni */
div.debug
{
    position: fixed;
    left: 0;
    top: 0;
    font-size: 12px;
    background: gray;
    color: white;
    opacity: 0.6;
    display: flex;
    flex-direction: column;
    padding: 2px 4px;
    z-index: 999;
    pointer-events: none;
}

/* obsah textovych stranek */
div.obsah
{
    grid-area: obsah;
    max-width: 100%;
    overflow: auto;
}

div.obsah p
{
    text-align: justify;
}

div.nahled em,
div.obsah em
{
    font-style: normal;
    font-weight: bold;
}

@media (max-width: 767px)
{
    div.galerie
    {
        margin-left: 0rem;
    }

    section 
    {
        padding: 0 1rem;
    }

    section > div.galerie
    {
        margin-left: -1rem;
    }
}

@media (min-width: 768px)
{
    div.obsah div.vlozena-galerie-desktop
    {
        display: flex;
        justify-content: space-between;
    }

    div.obsah div.vlozena-galerie-mobil
    {
        display: none;
    }
}

div.obsah div.vlozena-galerie img
{
    display: block;
}

div.vlozena-galerie hr.prouzek-nad {
	border: none;
	height: 10px;
	background-color: rgb(89, 89, 89);
	margin: 0;
}

div.vlozena-galerie hr.prouzek-pod {
	border: none;
	height: 10px;
	background-color: var(--cervena-zbirovia);
	margin: 0;
}

/* tema v zahlavi */
div.tema
{
    grid-area: nadpis;
    display: grid;

    grid-template-rows: auto auto auto;
    grid-template-columns: 3rem auto;
    grid-template-areas: 
        "nadpis   nadpis"
        "expander nahled"
        ".        text";

    max-height: calc(100% - var(--vyska-zahlavi, 0px) - var(--vyska-menu, 0px));
    box-sizing: border-box;
    overflow-y: auto;
    align-self: end;

    font-size: var(--velikost-fontu-textu-tematu, 1rem);
}

div.tema div.pozadi
{
    grid-area: 2 / 1 / 4 / 3;
    background-color: rgb(0,0,0,0.2);
    transition: background-color 0.5s;
}

div.tema.rozbalene div.pozadi
{
    background-color: var(--stin-zahlavi);
    transition: background-color 0.2s;
}

div.tema svg.expander
{
    grid-area: expander;
    width: 2rem;
    height: 2rem;
    place-self: center;
    overflow: visible;
    z-index: 1;
}

div.tema div.nahled
{
    color: white;
    z-index: 1;
    padding: 1rem 1rem 1rem 0rem;
}

div.tema div.nahled
{
    grid-area: nahled;
    align-self: center;
}

div.tema div.detaily
{
    grid-area: text;
    color: white;
    z-index: 1;
}

div.tema div.detaily div.obsah
{
    padding: 0 1rem 1rem 0;
}

div.tema div.nadpis
{
    grid-area: nadpis;

    font-size: var(--velikost-fontu-nadpisu);
    font-style: italic;
    font-weight: bold;
    color: rgb(255, 255, 255, 0.9);
    text-align: right;
    padding: 1rem 2rem;
    transition: background-color 0.5s;
}

div.tema.rozbalene div.popis 
{
    background-color: var(--stin-zahlavi);
    transition: background-color 0.2s;
}

div.tema ul li::marker
{
    color: var(--cervena-zbirovia);
}

div.tema svg.expander > g
{
    transform: translate(50%, 50%);
}

div.tema svg.expander path.aktivni
{
    transform: translateY(0);
    fill: var(--cervena-zbirovia);
    transition: transform 0.5s;
}


div.tema.rozbalene svg.expander path
{
    transform: rotate(180deg);
}

div.tema.rozbalene:hover svg.expander path
{
    transform: rotate(180deg) translateY(-20%);
}

@media (hover: none)
{
    div.tema:hover svg.expander path
    {
        transform: none;
    }

    div.tema.rozbalene:hover svg.expander path
    {
        transform: rotate(180deg);
    }
        
}

div.tema div.detaily
{
    --vyska: calc(var(--sirka) / 5 * 2 - var(--vyska-zahlavi) - var(--vyska-menu));
    max-height: 0;
    transition: max-height 0.5s;
    overflow: hidden;
}

div.tema.rozbalene div.detaily
{
    max-height: var(--vyska);
}

/* pocitadlo pro kolotoc */
div.kolotoc
{
    touch-action: manipulation;
    position: relative;
    display: flex;
    /*justify-content: space-evenly;*/
    overflow: hidden;
    align-items: center;
}

div.kolotoc.jediny svg.pocitadlo
{
    display: none;
}

div.kolotoc > *
{
    flex: none;
    transform: translateX(calc((var(--x, 0) + var(--dx, 0) + var(--lx, 0)) * 1px));
    transition: none;
}

div.kolotoc.animovat > *
{
    transition: transform 0.5s cubic-bezier(0, 1, 1, 1);;
}

@media (max-width: 1199px)
{
    div.kolotoc svg.pocitadlo
    {
        display: none;
    }
}

div.kolotoc svg.krizek
{
    background: var(--cervena-zbirovia);

    position: absolute;
    top: 0;
    right: 0;
    width: 38px;
    height: 38px;
}

div.kolotoc svg.krizek path
{
    fill: white;
}

div.kolotoc svg.pocitadlo,
div.kolotoc svg.krizek
{
    transform: none;
}

@media (min-width: 1200px)
{
    div.kolotoc svg.pocitadlo
    {
        background: var(--cervena-zbirovia);

        position: absolute;
        right: 0;
        top: 0;
        z-index: 1;
        
        width: 90px;
        height: 38px;
    }

    div.kolotoc svg.pocitadlo.s-krizkem
    {
        right: 39px;
    }

    div.kolotoc svg.pocitadlo path
    {
        fill: white;
    }

    div.kolotoc svg.pocitadlo rect
    {
        fill: none;
        pointer-events: visibleFill;
    }

    div.kolotoc svg.pocitadlo text
    {
        text-anchor: middle;
        fill: white;
        pointer-events: none;
    }
}

/* puntiky pro kolotoc */
div.kolotoc svg.puntiky
{
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;

    height: 50px;

    --roztec-puntiku: 20px;
    --radius-puntiku: 3;    
}

div.kolotoc.jediny svg.puntiky
{
    display: none;
}

div.kolotoc svg.puntiky g.skupina-puntiku
{
    transform: translateX(50%);
}

div.kolotoc svg.puntiky g.puntik
{
    transform: translate(calc((var(--index-puntiku) - var(--pocet-puntiku) / 2 + 0.5) * var(--roztec-puntiku)), 50%);
}

div.kolotoc svg.puntiky circle
{
    transition: transform 0.4s;
    transform: scale(var(--radius-puntiku));
    fill: rgb(192, 192, 192);
}

div.kolotoc svg.puntiky g.vybrany > circle
{
    --radius-puntiku: 5;
    fill: var(--cervena-zbirovia);
}

div.kolotoc svg.puntiky
{
    transform: none;
}

/* fotogalerie */
/*
body.fotogalerie *
{
    filter: blur(10px);
    -webkit-transform: translateZ(0);
    -webkit-perspective: 1000;
    -webkit-backface-visibility: hidden;
}

body.fotogalerie > div.fotogalerie *,
body.fotogalerie > div.debug,
body.fotogalerie > div.debug *
{
    filter: none;
}
*/

body.fotogalerie
{
    overflow: hidden;
}

div.fotogalerie
{
    filter: none;

    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0,0,0,0.9);

    display: grid;
    grid-template-columns: 1fr var(--sirka) 1fr;
    grid-template-rows: 1rem 1fr 1rem;
    grid-template-areas: 
        ". . ."
        ". snimky ."
        ". . .";
    z-index: 200;
}

div.fotogalerie div.kolotoc
{
    grid-area: snimky;
}

div.vlozena-galerie
{
    width: var(--sirka-obrazku-galerie, 100%);
    margin: 2rem 0;
}

body.truhlarna div.vlozena-galerie,
body.o-spolecnosti div.vlozena-galerie,
body.vykovky div.vlozena-galerie
{
    --vstup-do-galerie: 1;
}

/* paticka */
footer
{
    grid-area: paticka;
    text-align: center;
    margin: 2rem 0;
    border-top: 2px solid var(--cervena-zbirovia);
    padding-top: 1rem;
}

body.titul footer
{
    border-top: none;
}

/* prodejci */

body.prodejci table
{
    border-collapse: collapse;
    width: var(--sirka);
    margin-top: 2rem;
}

body.prodejci table td
{
    text-align: left;
}

body.prodejci table tr.hlavicka 
{
    background: rgb(127, 127, 127);
    color: white;
}

body.prodejci table tr.mezera td
{
    padding: 0;
    height: 2rem;
}

body.prodejci table tr.hlavicka td
{
    border-bottom: 4px solid var(--cervena-zbirovia);
}

body.prodejci table tr.oblast
{
    background: rgb(192, 192, 192);
    font-weight: bold;
}

body.prodejci .nazev
{
    width: 60%;
}

body.prodejci table td.nadpis
{
    position: relative;
}


/* kontakt */

body.kontakt div.adresy
{
    margin-top: 2rem;
    display: grid;
    grid-template-columns: 1fr 2rem 1fr;
    grid-template-rows: auto auto auto;
    grid-template-areas: 
        "adresa-spolecnosti . fakturacni-udaje"
        "vratnice-ustredna  . ekonomicke-oddeleni"
        "obchodni-oddeleni  . technicke-oddeleni";    
}

@media (max-width: 767px)
{
    body.kontakt div.adresy
    {
        margin-top: 2rem;
        display: grid;
        grid-template-columns: auto;
        grid-template-rows: auto auto auto auto auto auto;
        grid-template-areas: 
            "adresa-spolecnosti"
            "fakturacni-udaje"
            "vratnice-ustredna"
            "ekonomicke-oddeleni"
            "obchodni-oddeleni"
            "technicke-oddeleni";    
    }
}

body.kontakt div.adresa-spolecnosti
{
    grid-area: adresa-spolecnosti;
}

body.kontakt div.fakturacni-udaje
{
    grid-area: fakturacni-udaje;
}

body.kontakt div.vratnice-ustredna
{
    grid-area: vratnice-ustredna;
}

body.kontakt div.ekonomicke-oddeleni
{
    grid-area: ekonomicke-oddeleni;
}

body.kontakt div.obchodni-oddeleni
{
    grid-area: obchodni-oddeleni;
}

body.kontakt div.technicke-oddeleni
{
    grid-area: technicke-oddeleni;
}

body.kontakt div.adresy div
{
    margin-bottom: 2rem;
    padding: 1rem;
}

@media (min-width: 768px)
{
    body.kontakt div.vratnice-ustredna,
    body.kontakt div.ekonomicke-oddeleni,
    body.kontakt div.obchodni-oddeleni,
    body.kontakt div.technicke-oddeleni
    {
        border: 2px solid rgb(220,0,0);
    }
}

@media (max-width: 767px)
{
    body.kontakt div.adresy div
    {
        margin-bottom: 0;
    }
}

/* kontaktni formular */
body.kontakt div.formular
{
    display: grid;
    white-space: nowrap;
    grid-template-columns: 1fr;
    grid-template-rows: var(--vyska-nadpisu-galerie, 1px) auto auto;
    grid-template-areas: 
        "nadpis"
        "email"
        "zprava"
        "tlacitko";       
}

body.kontakt div.pozadi-nadpisu
{
    background: rgb(127, 127, 127);
    grid-area: nadpis;
}

body.kontakt span.nadpis
{
    grid-area: nadpis;
    color: white;
    font-size: var(--velikost-fontu-nadpisu-galerie, 1.4rem);
    place-self: center center;
}

body.kontakt #email
{
    grid-area: email;
}

body.kontakt #zprava
{
    grid-area: zprava;
}

body.kontakt div.pozadi-formulare
{
    background-color: rgb(217, 217, 217);
    grid-column: 1;
    grid-row: 2 / span 3;
}

body.kontakt div.tlacitko
{
    grid-area: tlacitko;
    justify-self: center;
    width: 120px;
    padding: 0.5rem;
    text-align: center;
    margin: 1rem;

    pointer-events: none;
    background: rgb(192,192,192);
    color: rgb(128, 128, 128);
}

body.kontakt div.tlacitko.aktivni
{
    pointer-events: all;
    background: var(--cervena-zbirovia);
    color: white;
}

body.kontakt input,
body.kontakt textarea
{
    font-family: 'Roboto Condensed', sans-serif;
    font-size: 1rem;
    padding: 1rem;
    margin: 1rem;
    border: none;
    border-bottom: 2px solid var(--cervena-zbirovia);
    background: none;
}

body.kontakt input::placeholder,
body.kontakt textarea::placeholder
{
    color: rgb(112, 112, 112);
}

body.kontakt textarea
{
    height: 120px;
    margin-top: 0;
    padding-top: 0;
    border: none;
    resize: none;
    overflow-y: auto;
}

body.kontakt span.zprava
{
    display: none;
}