body {    font-family: Arial, Helvetica, sans-serif;    font-size: 16px;    background-color: palevioletred;}


/*  -- Hlavni bloky  rozdeleni -- kstart*/
.containerHlavni {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto; /* 200 + 600 + 150 */
}
.left {
    width: 260px;
    background-color: lightblue;
    text-align: center;
}
.center {
    position:relative;
    display: flex;
    text-align: center;
    flex-direction: column;
    width: auto;
    /*background-color: lightgreen;*/
    background-color: white;
    padding: 6px;
}
.right {
    width: 260px;
    text-align: center;
    background-color: lightcoral;
}
/*  -- Hlavni bloky  rozdeleni -- konec*/



.containerHlavicka {
    display: flex;
    flex-direction: row;
    justify-content: center;
    width: auto; /* 200 + 600 + 150 */
    background-color: green;
    margin: 5px;
}

.labelBanStred img {      max-width: 900px;    margin: 5px;}
.labelBanSpod img {    max-width: 900px;    margin: 15px;}








#logoPortaluObal {
    text-align: center;
    position: relative;
    display: flex;
    border-radius: 15px;
    border: 2px solid #ccc;
    width: 100%;
    max-width: 1000px;
    padding: 5px;
    background-color: antiquewhite;
}
#logoPortaluObal img { max-width: 1000px;
        display: block; /* aby se margin:auto chovalo správně */
        margin: 0 auto; /* horizontální vycentrování */
}

/*  rozeviraci menu z javascript ------------------------*/
.containerMenu {    display: flex;    flex-direction: row;    justify-content: left;}
#menu_toggle, #menu_toggle2, #menu_toggle3 {    display: inline;    font-size: 20px; width: auto;    margin: 1px; }
#menu, #menu2, #menu3 {
   position: absolute; /* nad obsahem */
    left: auto;  
    top: 250px; /* pozice to neni vychytana */
    width: auto;
    max-height: 0; /* zavřené menu */
    overflow: hidden; /* skrýt obsah při zavřeném menu */
    background-color: #fff; /* barva menu */
    transition: max-height 1.3s ease; /* animace vysouvani a zasouvani*/
    z-index: 1000; /* aby bylo nad ostatním obsahem */
    box-shadow: 0 2px 10px rgba(0,0,0,0.2);
}
    /* Menu aktivní */
    #menu.active, #menu2.active, #menu3.active {
        max-height: 600px;
        overflow: scroll; /* nastav podle obsahu menu */
    }
    /* Styl pro odkazy uvnitř menu */
    #menu a, #menu2 a, #menu3 a {
        display: block;
        padding: 1px 1px;
        text-decoration: none;
        color: #333;
        text-align: left;
    }

#menu a:hover, #menu2 a:hover, #menu3 a:hover { background-color: #f0f0f0;        }
#menu li, #menu2 li, #menu3 li {
      margin: 0; padding: 0; list-style-type: none; /* odstraní kolečka nebo čísla */
}

/*                 -------------------------------- */

#clanek_box {
    font-size: 17px;
    border-radius: 15px;
    border: 2px solid black;
    text-align: center;
    width: 100%;
    max-width: 990px;
    padding: 10px;
    margin: 0px 0px;
    background-color: white;
}
.clanek_nadpis {    font-size: 20px;    color: black;    font-weight: bold;    margin: 15px 0px 10px 0px;}
.clanek_popis {        font-weight: bold;    margin: 5px;    text-align:justify; }
.clanek_text {    margin: 5px;    text-align: justify;}
.clanek_velkefoto img{    max-width: 1200px;}
.clanek_malefoto img {    max-width: 80px;}
.clanek_info {    font-size: 18px; margin: 0px 20px 20px 20px; }
.clanek_existence {     font-size: 10px; }

#StatusovyLabel {    font-size: 25px;    color: red;}


.clanek_01_obal {
    overflow: hidden; /* aby float vnitřku nevytrhal layout */
    border-radius: 15px;
    border: 2px solid #ccc;
    /*width: 100%;*/
    max-width: 650px;
    padding: 5px;
    background-color: aquamarine;
}
.clanek_01_foto_L {    float: left;    margin: 5px;    max-width: 200px;    height: auto;}
.clanek_01_foto_L img {    max-width: 200px;    height: auto;}

.clanek_01_foto_R {    float: right;    margin: 5px;    max-width: 200px;    height: auto;}
.clanek_01_foto_R img {        max-width: 200px;        height: auto;    }


.clanek_01_nadpis { margin: 5px;}

.clanek_01_nadpis a {
        font-weight: bold;        color: green;
        text-decoration: none;
        font-size: 16px;
}

.clanek_01_popis { margin: 5px;}
.clanek_01_popis a { color: red; text-decoration: none; font-size: 15px; }


#nazevPortalu {
    font-size: 33px;
    font-weight: 900;
    position: absolute;
    left: 300px;
    top: 130px;
}

#nazevPortalu img {
    width: 70px;
}





.container {
    position: relative;
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
    max-width: 1000px;
    padding: 5px;
}

.item {
    position: relative;
    width: 300px; /*height: 100%; */
    max-width: 300px;
}

.item img {
        width: 100%;
        height: auto;
        display: block;
        min-width: 100px;
        object-fit: cover; /* contain cover */
        /* border-radius: 40px; */
    }

.caption {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    background: rgb(0, 255, 33, 0.6); /* poloprůhledné pozadí */
    color: white;
    padding: 5px 0px;
    text-align: center;
    font-size: 18px;
}

.caption a {
        font-weight: bold;
        color: white;
        text-decoration: none;
    }






/* strankovani ve vyberu clanku */
.vybranaStrana a {
    font-weight: bold;
    color: white; background-color: black;
    font-size: 40px;
    margin: 10px;
    text-decoration: none;
    border: 2px solid black; padding: 4px;
}
.prvniStrana a {
    color: red;
    font-size: 40px;
    margin: 10px;
    text-decoration: none;
    border: 2px solid black;
    padding: 4px;
}
.nedulezitaStrana a {
    color: red;
    font-size: 3px;
    margin: 10px;
}

/* ******************media **********************/

@media (max-width: 1000px) {
    body {        background-color: lightblue;        font-size: 30px;  width: auto;        }

    .clanek_nadpis {        font-size: 40px;    }
    .clanek_popis {        font-size: 30px;    }
    .clanek_text {        font-size: 30px;    }

    #menu-toggle, #menu-toggle2 {        display: inline;        font-size: 40px;    }
    #menu2, #menu {    }
    #menu2.active, #menu.active {        font-size: 22px;   }

    .right, .left {
        display: none;
       
    }

}