article { width: 94%; padding: 1em 3%; overflow: hidden; background-image: linear-gradient(0deg, rgba(246, 230, 207, 0.75), rgba(239, 217, 182, 0.75)), url(../images/bg.webp); display: block;}
section {width:100%; overflow:hidden;}
section p, section li, .slova, label { color: #3b5755; font-size: 19px; font-family: SlateProBook, Arial, Helvetica, sans-serif; font-weight: 550; line-height: 1.4;}
input[type=text] { padding:8px 6px; border:1px solid #3b5755; background:#fff; border-radius:5px; font-size:15px;}
button { border:none; padding:8px 20px; color:#fff; background:#3b5755; border-radius:6px; cursor:pointer; font-size:17px;}
button:hover {background:#2b4735;}
h1 { font-family: SlateProBook, Arial, sans-serif; font-weight: normal; font-size: clamp(clamp(0em, 2.5em, 12vw), 5vw, 3em); margin:1em 0 .5em 0;}
header { background:#653919;}
.mnu { text-align:center; margin:0; padding:1em; background:#3b5755; font-size:22px;} /* 294b8b  872048 */
.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; }

.bg { width:92%; padding:1em 4% ; overflow:hidden; background-image: linear-gradient(0deg, rgba(246, 230, 207, 0.75), rgba(239, 217, 182, 0.75)), url(../images/bg.webp);}
.title { margin:10px 0 30px 0;}
.title h1 { float: right; width: 53%; margin:1.5em 1% .3em 0; text-align:center; color:#3b5755; letter-spacing:1px;}
.title img {float: left; width: 41%; margin: 0 5% 0 0; display: block;}
.title h2 { font-size:30px;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:1.2em 0; color:#5f3b1f; text-align:center; }
.title p, .title li { 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:1em 0 1em 0; text-align:center; color:#413140; padding:.35em;
 border-top:1px solid #413140;  border-bottom:1px solid #413140; }
.title h4 { display:inline-block; width:52%; font-size:1.55em;font-family: SlatePro-Thin, Arial, sans-serif; font-weight:400; margin:.1em 0 1em 0; text-align:center; color:#3b5755;
 border-top:1px solid #3b5755;  border-bottom:1px solid #3b5755; padding:0.35em; }
.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; }
.title ul { list-style-type:none; padding-inline-start:0;} .title li { margin-bottom:.5em;}
.title li:before {content:"●"; color:#d6900b; margin-right:10px; font-size:1.3em; }

section.s { width:100%; overflow:hidden; margin:20px 0 0 0; }
section.s h2, section.o h2, section.dk h2, section.v h2 { color:#5f3b1f; 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:.5em 0 .5em 0;}
section.o .pokyny, section.o .kviz { overflow:hidden; margin:em 0 1em 1%; overflow:hidden;}
section.o .pokyny { width:47%; 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.5; margin-bottom:.5em;}
section.o .pokyny p em { display:inline-block; font-size:19px;font-style:normal;color:#fff;background:#d6900b; padding:2px 3px;width:26px;text-align:center;margin-right:8px;border-radius:5px;}
section.o .pokyny .item { width:100%; overflow:hidden; margin:10px 0;} section.o .pokyny .item.vo { margin-top:8px;}
section.o .pokyny .item label { display:inline-block; padding:1px 0; color: #3b5755;font-size:17px;font-family: SlateProBook, Arial, Helvetica, sans-serif;font-weight: 550;line-height: 1.2;}
section.o .pokyny .item a {color:#5f3b1f; font-weight:600;}
section.o .pokyny .item input[type=text] { margin-right:2%;}
section.o .pokyny button { margin-top:6px;}
section.o .kviz { width:48%; float:left; margin:1.2em 0 0 1%;}

section.v { width:100%; overflow:hidden; margin:1em 0;}
section.v .c1 { width:27%; height:auto; overflow:hidden; float:left; text-align:center;}
section.v .c1 .k { width:100%; height:500px; padding:40px 10% 20px 10%; box-sizing:border-box; overflow:hidden; margin-top:10px;
background:url(../images/sutaz-s-knihou-mesiaca/karta4.webp) no-repeat; background-size:contain; text-align:center;}
section.v .c1 .k h3 { font-size:22px;color:#fff; font-family:"Times New Roman", Times, serif; font-style:italic; margin:1.3em 0; }
section.v .c1 .k p { font-size:18px;color:#fff; font-family:"Times New Roman", Times, serif; font-style:italic; margin-top:2em;}
section.v .c1 .o h3 { font-size:19px; color:#5f3b1f;font-family: SlateProBook, Arial, sans-serif; margin-bottom:.1em; }
section.v .c1 .o p { font-size:20px;font-family: SlatePro-Bold, Arial, sans-serif;}
section.v .c2 { width:37%; overflow:hidden; float:left; margin:0 3%; text-align:center;}
section.v .c2 img { max-width:94%; margin:-5px 0 0 0;}
section.v .c2 .k.s img {max-width:80%;margin:10px 0 10px 0;}
section.v .c2 p { font-size:17px; }
section.v .c3 { width:30%; overflow:hidden; float:right; text-align:center;}
section.v .c3 h3 { font-size:32px;font-family: SlatePro-Thin, Arial, sans-serif; text-transform:uppercase; text-align:center; padding:.8em .2em; border:2px solid #3b5755; border-radius:12px;}

.kvdk { width:100%; overflow:hidden;}
.kvdk h3 { font-size:1.4em;font-family: SlateProBook, Arial, sans-serif; font-weight:400; margin:1em 0 1em 0; text-align:center; color:#413140; padding:.35em;
 border-top:1px solid #413140;  border-bottom:1px solid #413140; }
.kvdk .k    { width:100%; height:auto; overflow:visible; position:relative; text-align:center; }
.kvdk .k a  { display: inline-flex; float: none; align-items: center; margin: 0 1em; }
.kvdk .k .b { width:142px; height:70px;                    background: url(../images/shops/bux.png); background-size:cover; }
.kvdk .k .m { width:82px;  height:70px;                    background: url(../images/shops/martinus.png); background-size:cover; }
.kvdk .k .g { width:112px; height:56px; margin-bottom:4px; background: url(../images/shops/gorila.png); background-size:cover; }
.kvdk .k .p { width:98px;  height:70px;                    background: url(../images/shops/panta-rhei.png); background-size:cover; }


#ok, #pokyny.h { display:none;} #ok.a { display:block;}
#ok h3 { font-size:25px;color:#3b5755;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:#5f3b1f;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:#5f3b1f;}
.statut li { text-indent:.2em;}

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

.vysledky { text-align:center;}
.vysledky h3 {font-family: SlateProBook, Arial, sans-serif;}

.tabs { width:100%; height:340px; padding:15px 0; overflow:hidden; position:relative;}
.tab { float:left;font-family: SlateProBook, Arial, sans-serif;} .tab [type=radio].rft {display:none;}
.tab label.lft { background:#3b5755; padding:4px 12px;border:2px solid #3b5755;border-radius:8px 8px 0 0; margin:2px 8px 0 0;position:relative;left:0;font-size:20px;color:#fff;}
.tab:last-child label.lft {padding:4px 8px;} .tab [type=radio], .tab label {cursor:pointer;}
.tab .co { position:absolute; top:43px; left:0; background:#fff;  right:0; bottom:0; box-sizing:border-box; padding:5px 20px; border:2px solid #3b5755; border-radius:0 12px 12px 12px;}
.tab [type=radio].rft:checked ~ label.lft { color:#3b5755; background:#fff; border-bottom:2px solid white; z-index:2;}
.tab [type=radio].rft:checked ~ label.lft ~ .co { z-index:1;}
.tab p.ot {color:#5f3b1f; font-size:1.3em;}
.tab .co em {display:inline-block; font-size:19px;font-style:normal;color:#fff;background:#5f3b1f; padding:2px 3px;width:26px;text-align:center;margin-right:8px;border-radius:5px; }
.tab .co [type=radio] { margin-right:.5em;} .tab .co label { display:inline-block; padding:6px 2px;}
.tab .co .btns { width:90%; position:absolute; left:5%; bottom:15px;}
.tab .co button { background:none; color:#3b5755; border:2px solid #3b5755;}
.tab .co button:hover { color:#fff; background:#3b5755;}
.tab .co button.r, .tab .co span.r { float:right;}
.tab .co span.r { color:#3b5755; display:inline-block; padding:10px 0 0 0;}


@media (max-width: 1260px) {
section.v .c1 .k { height:39vw;}
}

@media (max-width: 1100px) {
.tab label.lft { padding:4px 9px; margin:2px 5px 0 0;font-size:18px;border-radius:6px 6px 0 0;}
.tab:last-child label.lft {padding:4px 7px;}
.tab p.ot, .tab .co em { font-size:19px;}
.tab .co label { font-size:18px}
section.v .c1 .k { height:41vw;}
section.v .c1 .k h3 { font-size:20px; }
section.v .c1 .k p { font-size:15px;}
section.v .c1 { width:29%; }
section.v .c2 { width:39%; }
section.v .c3 { width:26%; }
section.v .c3 h3 { font-size:26px;}
section.v .c3 p { font-size:17px;}
}
@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%; }
.title h4 { width:51%;}
}
@media (max-width: 900px) {
section.s h2, section.o h2, section.dk h2, section.v h2 { font-size:2.5em;}
section.o .kviz { width:100%; float:none; margin:1.2em 0 1em 0;}
section.o h2 { margin:.3em 0 .3em 0;}
section.o .pokyny { width:100%; float:none; }
section.v .c1 .k { min-height:480px;}
section.v .c1 .k h3 { font-size:24px; }
section.v .c1 .k p { font-size:17px;}
section.v .c1 { width:100%; max-width:300px; margin:1em auto; float:none; }
section.v .c2 { width:100%; max-width:400px; margin:1em auto; float:none; }
section.v .c3 { width:100%; max-width:400px; margin:1em auto; float:none; }
.tab label.lft { padding:4px 8px;margin:2px 2px 0 0;font-size:17px;}
.tab:last-child label.lft {padding:4px 5px;}
}
@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 .osm { width:100%; float:none; margin:1.2em 0;}
.dk h4 { font-size: 1.3em; }
}
@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%; }
.title h4 { width:99%;}
}
@media (max-width: 600px) {
.title h1 { font-size:7vw; text-align:center; }
section.o h2 { margin:.1em 0 .1em 0;}
}
@media (max-width: 500px) {
.tabs { height:300px; }
.tab p.ot, .tab .co em { font-size:17px;} .tab p.ot { margin-bottom:.1em}
.tab .co { padding:5px 4px 5px 10px; }
.tab .co label { font-size:15px}
.tab .co button { padding:6px 10px; font-size:15px; margin-top:0;}
}
@media (max-width: 400px) {
.title img {width: 80%; }
section.s h2, section.o h2, section.dk h2 { font-size:2.7em;}
}