body {overflow:hidden}

header {width:100%; height:80px; background:rgba(0,0,0,0.4) ;
border-bottom:1px solid gray; padding-top:10px; position:relative }
header h1 {color:var(--c2); text-align:center; font-weight:400; font-size:1.1vw; }
header .logo {position:absolute; left:0; top:10px; width:150px; height:60px; background:url('/private/img/logo.svg');}
header .logo:hover {background:url('/private/img/logohow.svg')}

header .menuprave {position:absolute; right:10px; top:10px; width:200px; height:70px;}
header .tlaccz, header .tlacen {display:block; width:30px; height:20px; padding:0; float:right} 
header .tlaccz, header .tlaccz:hover {background: url("/private/img/vlajkacz.svg")}
header .tlacen, header .tlacen:hover  {background: url("/private/img/vlajkaen.svg")}
header .hledani {width:100%; float:left; padding-top:10px}
header .hledani input[type=text] {width:150px; height:22px; border:1px solid var(--c8); padding:2px 5px; float:right;
                                 font-size:1vw}
header .hledani input[type=submit] {width:22px; height:21px; background: var(--c1) url("/private/img/lupa.svg");
                                    border:0; float:right; background-size:100% }



nav {margin:20px auto 0 auto; display: flex; justify-content: center;}
ul.menu {list-style: none; display: flex; padding: 0;  margin: 0; }
ul.menu > li {width:12vw; position: relative;}

ul.menu > li > a {text-align:center; display: block; padding: 0.5rem 0; color: white; text-decoration: none; font-size:1.1vw}

ul.menu > li:hover > a {background: var(--c9); box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75);}

    /* Podmenu */
ul.podmenu {width:100%; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
      background:var(--c10); display: none; box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); z-index:1}

ul.podmenu li a {text-align:center; display: block; padding: 0.5rem 0; color: white; white-space: nowrap; font-size:0.9vw}

ul.podmenu li a:hover {background: var(--c5);}

ul.menu > li:hover .podmenu {display: block;}




main {display:grid; grid-template-columns: 1fr var(--sirbox) var(--sirbox) var(--sirbox) 1fr; 
grid-template-rows: 1.5vw var(--vysbox) var(--vysbox) var(--vysbox) 1fr; 
padding-top:1rem; height:calc(100vh - 105px); overflow:auto }


main h2 {grid-row: 1/2; grid-column:2/5;  font-size:1.5vw; color:var(--c3); font-weight:500;
        text-shadow: 2px 2px 2px black  }

main .kontapl {display:flex; align-items:center;}
main .kontajner_1 {grid-column:2/3; grid-row: 2/3;  justify-content:left}
main .kontajner_2 {grid-column:3/4; grid-row: 2/3;  justify-content:center}
main .kontajner_3 {grid-column:4/5; grid-row: 2/3;  justify-content:right}
main .kontajner_4 {grid-column:2/3; grid-row: 3/4;  justify-content:left}
main .kontajner_5 {grid-column:3/4; grid-row: 3/4;  justify-content:center}
main .kontajner_6 {grid-column:4/5; grid-row: 3/4;  justify-content:right}
main .kontajner_7 {grid-column:2/3; grid-row: 4/5;  justify-content:left}
main .kontajner_8 {grid-column:3/4; grid-row: 4/5;  justify-content:center}
main .kontajner_9 {grid-column:4/5; grid-row: 4/5;  justify-content:right}

main .blognahled {grid-row: 5/6; grid-column:2/5;}
main .blogbox {background: linear-gradient(20deg, var(--colgr1) 0%, var(--colgr2) 50%, var(--colgr3) 100%);
box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); border-radius:1vw; margin-top:2vw
}
main .blognahled h2 {width:100%; float:left;}

footer {position:fixed; width:100%; height:25px; background:rgba(0,0,0,0.4) ;
border-top:1px solid gray; bottom:0; display:flex; align-items:center; justify-content:center  }
footer a {color:var(--c4); padding:0 10px; font-weight:300; font-size:0.9rem }
footer a:hover {color:rgb(255,255,204)}


#podminky {width:60vw; background:white; margin:10px auto 0 auto; padding:10px;  box-shadow: 5px 5px 5px 0px rgba(0,0,0,0.75); }
#podminky p {text-indent:20px; margin-bottom:5px}

#menumobil {width:100%; height:15vw;  background: var(--c9); display:none; text-align:center}
#menumobil input[type=text] {width:80vw; font-size:6vw; padding:5vw; float:none;
                            background:white url("/private/img/lupamobil.svg"); background-size:8vw;
                            background-repeat:no-repeat; background-position:right 1vw}



.tlacmobilZ, .tlacmobilO, .tlacmobilJcz, .tlacmobilJen {position:absolute; right:2.5vw; top:3vw; width:10vw; height:10vw; 
            display:none; border-radius:50%}
.tlacmobilZ {background: #2f7681 url("/private/img/mobilZ.svg"); background-size:80%; background-repeat:no-repeat; background-position:center}
.tlacmobilO {background: #2f7681 url("/private/img/mobilO.svg"); background-size:80%; background-repeat:no-repeat; background-position:center}
.tlacmobilJcz {left:2.5vw; background:#2f7681 url("/private/img/vlajkacz.svg"); 
             background-size:80%; background-repeat:no-repeat; background-position:center}
.tlacmobilJen {left:2.5vw; background:#2f7681 url("/private/img/vlajkaen.svg"); 
             background-size:80%; background-repeat:no-repeat; background-position:center}


@media (hover: none) {
  .a:hover {
     all: unset;
  }
}

@media only screen and (max-width:600px) {
header {width:100%; height:auto; background:rgb(12,38,45); padding-top:0;  border:0; position:fixed; z-index:1;}
header h1, h2 {display:none }

header .logo, header .logo:hover {position:static; width:100%; height:16vw; background-position: center 1vw; background-repeat:no-repeat; margin-top:1vw;
                                   background-size:35vw} 

header .menuprave {display:none}

.tlacmobilO, .tlacmobilZ, #menumobil, .tlacmobilJcz, .tlacmobilJen  {display:block}




nav {width:100%; left:0; top:11.5vw; z-index:10; display: none; position:absolute;  }



ul.menu {width:100%; display:block; }
ul.menu > li { width:100%; }
ul.menu > li > a {width:100%; text-align:center; display: block; padding: 2.2vw 0; color:white; text-decoration: none; font-size:5vw;
                 background:var(--c11); float:left}
ul.podmenu {width:100%; float:left; background:var(--c10); display:block; font-size:4vw; position:static; transform: translateX(0);}
ul.podmenu li a { width:100%; text-align:center; display: block; padding: 2.2vw 0; color: white; font-size:5vw;}



 body {font-size:25px; overflow:auto; line-height:1.2}
    
 main {display:block; height:auto; width:94%; margin:0 auto; padding:0; padding-top:18vw }
  
 main h2 {width:100%; text-align:center; font-size:5vw }
 



footer {display:none}




}