p, section li, .slova { color: #456897; font-size: 19px; font-family: SlateProBook, Arial, Helvetica, sans-serif; font-weight: 550; line-height: 1.4;}
article { width: 94%; padding: 1em 3%; overflow: hidden; background-image: linear-gradient(0deg, #e9f2fabf, #e9f2fabf), url(../images/bg.webp); display: block;}
section {width:100%; overflow:hidden;}
input[type=text] { padding:6px; border:1px solid #456897; background:#fff; border-radius:5px; font-size:15px;}
button { border:none; padding:8px 20px; color:#fff; background:#456897; border-radius:6px; cursor:pointer; font-size:17px;}
button:hover {background:#254877;}
h1 { color: #456897; font-family: SlateProBook, Arial, sans-serif; font-weight: normal; font-size: clamp(clamp(0em, 2.5em, 12vw), 5vw, 3em); margin:1em 0 .5em 0;}

.mnu { text-align:center; margin:0; padding:1em;  background:#456897; font-size:22px;} /* 294b8b */
.mnu a { text-decoration:none; display:inline-block; padding:2px; margin-right:.8em; text-decoration:none;color:#fff;font-family: SlatePro-Thin, Arial, sans-serif;}
.mnu a:before { content:"\276F";color:#fcde72; margin-right:.5em;}
.mnu a:last-child{ margin-right:0;}
.mnu a:hover { text-decoration:underline; }

.title { margin:30px 0;}
.title h1 { float: right; width: 58%; /* clamp(0em, 58vw, 58%); */}
.title img {float: left; width: 41%; /*clamp(0em, 30vw, 42%);*/  margin: 1em 1% 0 0;  display: block;}
.title h2 { font-size:22px;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:1.2em 0;}
.title p { font-size:18px;text-align: justify;font-style: italic;padding: 0px .5em 0px 0px;}
.title h3 { font-size:1.4em;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:2em 0 1em 0; text-align:center; color:#456897; padding:.35em;
 border-top:1px solid #456897;  border-bottom:1px solid #456897; }
.title .k    { width:100%; height:auto; overflow:visible; position:relative; text-align:center; }
.title .k a  { display: inline-flex; float: none; align-items: center; margin: 0 1em; }
.title .k .b { width:142px; height:70px;                    background: url(../images/shops/bux.png); background-size:cover; }
.title .k .m { width:82px;  height:70px;                    background: url(../images/shops/martinus.png); background-size:cover; }
.title .k .g { width:112px; height:56px; margin-bottom:4px; background: url(../images/shops/gorila.png); background-size:cover; }
.title .k .p { width:98px;  height:70px;                    background: url(../images/shops/panta-rhei.png); background-size:cover; }

section.s { width:100%; overflow:hidden; margin:20px 0; }
section.s h2, section.o h2, section.dk h2 { color:#456897; font-size:3em;font-family: SlateProBook, Arial, sans-serif; font-weight:400; text-align:center;}
section.s h2 { margin:20px 0 2px 0;}
section.s .vyzva { text-align:center; padding:.3em; /* border-top:1px solid #456897; border-bottom:1px solid #456897;*/ }
section.s .vyzva p { margin:.3em 0;}
section.s .postup, section.s .ceny {width:43%; padding:1em 2%; overflow:hidden; margin:1em 0 1em 1%; overflow:hidden; border-radius:12px; background:rgba(74, 104, 153,.2); min-height:19em;}
section.s .postup {  float:left; }
section.s .ceny { float:right; margin-right:1%; }
section.s .postup h3, section.s .ceny h3 { font-size:25px;color:#456897;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:8px 0 10px 0;}
section.s .postup ul, section.s .ceny ul { list-style-type:none; padding-inline-start:0; margin-left:-20px}
section.s .postup li, section.s .ceny li { margin:3px 0 8px 32px; padding-left:20px; font-size:16px;}
section.s .postup li:before, section.s .ceny li:before {content:"●"; color:#456897; margin-right:10px; font-size:1.3em; margin-left:-30px; }

section.o h2 { margin:1em 0 .5em 0;}
section.o .pokyny, section.o .osm { overflow:hidden; margin:em 0 1em 1%; overflow:hidden;}
section.o .pokyny { width:48%; float:right; }
section.o .pokyny label { margin-right:.5em; cursor:pointer;}
section.o .pokyny .slova input[type=checkbox] { display: none; }
section.o .pokyny .slova input[type=checkbox]:checked + label { text-decoration:line-through;text-decoration-color:#fcde72;text-decoration-thickness: 2px;}
section.o .pokyny p { font-size: 17px; line-height: 1.2; margin-bottom:.5em;}
section.o .pokyny p em { display: inline-block; font-size:19px; font-style: normal; background: #fcde72; padding: 2px 3px; width: 26px; text-align: center; margin-right: 8px;border-radius:5px;}
section.o .pokyny .item { width:100%; overflow:hidden; margin:4px 0;} section.o .pokyny .item.vo { margin-top:8px;}
section.o .pokyny .item label { display:inline-block; padding:1px 0; color: #456897;font-size:17px;font-family: SlateProBook, Arial, Helvetica, sans-serif;font-weight: 550;line-height: 1.2;}
section.o .pokyny .item a {color: #456897; font-weight:600;}
section.o .pokyny .item input[type=text] { margin-right:2%;}
section.o .pokyny button { margin-top:6px;}
section.o .osm { width:51%; float:left; margin:1.2em 0 0 1%;}
section.o .osm .grid { float:left;}
#ok, #pokyny.h { display:none;} #ok.a { display:block;}
#ok h3 { font-size:25px;color:#456897;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:2em 0 10px 0;}
#err.a { width:94%; padding:12px 3%; overflow:hidden; background:#c00; color:#fff; font-size:17px; font-family: SlateProBook, Arial, sans-serif; font-weight:bold; border-radius:5px;}

.dk { margin: 1em 0; }
.dk { width: 100%; overflow:hidden; text-align: center; }
.dk a { display: inline-block; width: 18%; margin:0 .5% 1em .5%; text-decoration:none; }
.dk img { width:100%;border-radius: 0.5em; margin-bottom:6px;}
.dk h4 { color: #147a99; font-family: SlatePro-Thin, Arial, sans-serif; font-weight: normal; font-size: 1.5em; font-weight: 800; margin: 6px 0; }

.statut article { background:#fff;}
.statut h1, .statut h2, .statut h3 { text-align:center;}
.statut h2, .statut h3 { color:#456897;font-family: SlateProBook, Arial, sans-serif; font-weight:400;}
.statut h1 { font-size:42px;}
.statut h2 { font-size:32px; margin:.5em 0 1em 0; }
.statut h3 { font-size:24px; margin:1em 0 .3em 0; }
.statut p, .statut li, .statut td {font-family: SlateProLight, Arial, sans-serif; font-size:18px; line-height:1.4;}
.statut p { margin-left:1em;}
.statut ol.a {list-style-type: lower-latin;}
.statut ol li::marker {color:#00a5d4;}
.statut li { text-indent:.2em;}

.statut table { width:100%; max-width:800px; margin:25px auto 5px auto;}
.statut td { text-align:center;}

:root {
  --8way_bg: #456897; /* 104f8a */
  --8way_fg: #fcde72; /* f6e7a0 */
  --8way_gs: clamp(clamp(0em, 40em, 90vw), 90vw, 40em);
  --8way_cs: calc(var(--8way_gs) / 12.3);
  --8way_sp: 100ms;
}
.grid {
    justify-self: center; 
}

.grid p {
    color: #fff;

    padding: 0;
    margin: 0;
    margin-top: calc(var(--8way_cs) * 0.015);
    text-align: center;
    
    font-size: calc(var(--8way_cs) * 0.7);
    font-family: SlatePro-Medium, Arial, sans-serif;
    font-weight: normal;
    font-style: normal;

    user-select: none;
}

.grid::before {
    position: absolute;
    z-index: -1;
    border-radius: inherit;
}
.grid {
    position: relative;

    display: grid;
    grid-template-columns: repeat(10, var(--8way_cs));
    background-color: var(--8way_bg);
    gap: 0;

    overflow: hidden;

    border: solid 3px #357;
    border-radius: calc(var(--8way_cs) * 0.6);
}
.grid div {
    transition: background-color var(--8way_sp) ease-in;
    position: relative;
    width: var(--8way_cs); height: var(--8way_cs);
}
.grid .c {
    background-color: var(--8way_bg);
    position: absolute;
    display: block;
    width: var(--8way_cs); height: var(--8way_cs);
    cursor: pointer;
    transition: all calc(var(--8way_sp) * 3);

    cursor: cell;
}
.grid input[type=checkbox] { display: none; }
.grid input[type=checkbox]:checked + .c {
    background: var(--8way_fg);
}

@media (max-width: 1280px) {
:root { --8way_cs: calc(var(--8way_gs) / 14.3);}
@media (max-width: 1030px) {
section.s .postup, section.s .ceny { min-height:21em;}
section.o .pokyny .item input[type=text] { width:43%;}
.dk a { width:30%; }
:root { --8way_cs: calc(var(--8way_gs) / 20);}
}
@media (max-width: 799px) {
section.s .postup, section.s .ceny { float:none; min-height:0; width:92%; padding:10px 4%; margin:1em 0; }
section.o .pokyny { width:100%; float:none; }
section.o .osm { width:100%; float:none; margin:1.2em 0;}
.dk h4 { font-size: 1.3em; }
:root { --8way_cs: 8.7vw;}
}
@media (max-width: 750px) {
.title h1 { float: none; width: 100%;  margin-top:0;}
.title h2 { font-size:18px;}
.title img {float: none; width: 60%; margin: 0 auto; }
.dk a { width:45%; }
}
@media (max-width: 600px) {
.title h1 { font-size:7vw; text-align:center; }
}
@media (max-width: 400px) {
.title img {width: 80%; }
section.s h2, section.o h2, section.dk h2 { font-size:2.7em;}
}