body { background: #fff;}
footer { width:100%; max-width:none; }
footer .m, footer .b { max-width: 1200px;}

.zk a { text-decoration:none; display:inline-block; width:19.5%; height:382px; overflow:hidden; margin:3px 0 8px 0; position:relative; text-align:center; cursor:pointer; }	
.zk a .i { display:block; width:100%; height:304px; overflow:hidden; position:relative; font-style:normal;}
.zk a .i img { width:78%; height:auto; transition:all ease-in-out .6s; display:block; position:absolute; left:11%; bottom:18px; }
.zk a:hover .i img { width:84%; left:8%; bottom:12px;}
.zk a .i img.a { width:120%;left:-10%;  } .zk a:hover .i img.a { width:126%;left:-13%;}
.zk a .i img.b { width:100%;left:0%;  } .zk a:hover .i img.b { width:104%;left:-2%;}
.zk a .i img.m { width:90%;left:5%;  } .zk a:hover .i img.m { width:98%;left:1%;}
.zk a .i img.v { width:80%;left:10%; } .zk a:hover .i img.v { width:84%;left:8%;}
.zk a .i img.x { width:68%;left:16%; } .zk a:hover .i img.x { width:74%;left:13%;}
.zk a h3 { font-size:17px; color:#fff /*#000*/; font-family: SlatePro-Bold, Arial, sans-serif; margin:4px 0 0 0; padding:0; border:none;}
.zk a h3 span {color:#ddd /* #00a5d4*/; text-transform:uppercase;}
.zk a p { color:#fff /*#000*/; font-family: SlatePro-Book, Arial, sans-serif; margin:1px 0;}
.zk a u { width:36px;height:36px;border-radius:50%;color:#fff;background:#147a99;font-size:24px;text-align:center;font-family:SlateProBook, Arial, sans-serif; position:absolute; 
 right:14%; top:2px; text-decoration:none; line-height:35px; text-indent:1px;}
.zk details { display:none;}

#zk { width:96%; padding: 1.5em 2% 2.5em 2%; overflow: hidden; background: linear-gradient(#0786a5, #0ca2c3); border-radius: 20px;}
#ks, #vk { display:none;} #ks.a, #vk.a { display:block;}
#vk h3 { margin-top:0;}
#k { text-align:center;}
#k a { background:#fff; border-radius:12px; padding-top:10px; margin: 3px 0 16px 0;}

#ok, #pokyny.h { display:none;} #ok.a { display:block; text-align:center; margin-bottom:2em;}
#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;}

.statut article { background:#fff; padding:1em 4% 2em 4%; box-sizing: border-box; border-top: 1px solid #027c9c; }
.statut h1, .statut h2, .statut h3 { text-align:center; color:#027c9c;font-family: SlateProBook, Arial, sans-serif; font-weight:normal;}
.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;}

#rg { width:450px; margin:0 auto 2em auto; overflow:hidden; } #rg.h { display:none;}
#rg label { margin-right:.5em; cursor:pointer;}
#rg p { font-size: 17px; line-height: 1.5; margin-bottom:.5em;}
#rg 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;}
#rg .item { width:100%; overflow:hidden; margin:10px 0;} #rg .item.vo { margin-top:8px;}
#rg .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;}
#rg .item a {color:#5f3b1f; font-weight:600;}
#rg .item input[type=text] { margin-right:2%;}
#rg .buttons { text-align:center;}
#rg button { margin-top:6px;}
#rg input[type=text] { padding:8px 2%; box-sizing:border-box; width:46%; }

#po { width:100%; height:100vh; overflow:hidden; position:fixed; top:0; left:0; background:rgba(10,30,50,.6); display:none; } #po.a { display:block;}
.po { width:96%; max-width:900px; overflow:hidden; margin:18vh auto; background:#fff; border-radius:8px; position:relative;} .po u { display:none;} .po .c { width:32px; height:32px; border-radius:16px; color:#fff; background:#00a5d4; font-size:26px; box-sizing:border-box; padding-top:1px; font-family:Arial, Helvetica, sans-serif; position:absolute; top:8px; right:8px; text-align:center; cursor:pointer;}
.po .c:before { content:"×"} 
#po1 { width:34%; padding:1em 2%; float:left; text-align:center;font-family: SlateProLight, Arial, sans-serif;}
#po1 img { max-width:100%;}
#po1 h3 { font-size:1.3em; border:none; padding:0; margin:.1em 0 .3em 0;}
#po1 h3 span { color:#00a5d4;}
#po2 { width:55%; max-height:50vh; overflow:auto; margin:2em 0 2em 0;padding:0 5% 0 2%; float:left; font-size:18px; font-family: SlatePro-Thin, Arial, Helvetica, sans-serif; line-height:1.4;}

.vyh { text-align:center;}
.vyh .zk { display:inline-block; width:21.4%; margin:.5em .5% 1.5em .5%; border:1px solid #fff; border-radius:10px;}
.vyh .zk p {display:block;width:100%;background:#fff;color:#027c9c;margin:0 0 1em 0;font-family: SlatePro-Medium, Arial, sans-serif;font-size:24px; padding:.65em 0;border-radius:9px 9px 0 0;}
.vyh .zk a { display:block; width:100%; float:none;}
.vyh .zk a h3 span {color: #fff;}

:root {
 --blue:#0799bb; --blue-dark:#007d9f; --blue-deep:#087f9d;
 --ice:#effbfe; --pink:#df2c67; --yellow:#ffd34e; --yellow-soft:rgba(255,211,78,.75);
 --stage:720px; --flake:470px; --orbit:305px; --button:126px; --spin-time:4.2s;
 --font: SlatePro-Book, Arial, sans-serif; ;
}

main {margin:0;font-family:var(--font);color:#087895;background:var(--ice)}
button,input{font:inherit}
.sutaz{position:relative;overflow:hidden;background:linear-gradient(#0786a5,#0ca2c3);color:white;min-height:500px;padding:24px 2% 30px 2%;box-sizing:border-box;}
.content{position:relative;z-index:2;max-width:1000px;margin:auto;text-align:center}
main h1 {font-weight:normal;font-size:83px;letter-spacing:.1em;font-family: SlatePro-Book, Arial, sans-serif; line-height: 1;margin: .6em 0 .35em 0;}
main h1 em { font-style: normal;font-family: SlatePro-Thin, Arial, sans-serif;}
.claim{font-size:20px;letter-spacing:.04em;margin:18px 0 42px 0}
.sutaz h2{font-size:26px;margin:1em 0 .7em}
.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;text-align:left;max-width:1200px;margin:auto;text-decoration: none; color: #fff;}
.steps>div{display:grid;grid-template-columns:38px 1fr;gap:10px;align-items:start}
.steps b,.number{width:32px;height:32px;border-radius:50%;display:grid;place-items:center;background:white;color:var(--blue);font-size:18px;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.steps p{margin:2px 0;font-size:15px;line-height:1.4}
.wheel-stage{position:relative;width:min(100%,var(--stage));aspect-ratio:1;margin:4px auto 1em auto;}
.flake{position:absolute;left:50%;top:50%;width:var(--flake);aspect-ratio:1233/1402;transform:translate(-50%,-50%) rotate(0);transform-origin:center;z-index:2}
.flake img{position:relative;z-index:2;width:100%;height:100%;display:block;object-fit:contain;filter:drop-shadow(0 9px 11px rgba(0,0,0,.22))}
.category-ring{position:absolute;inset:0;z-index:4;transform:rotate(0);transform-origin:center;pointer-events:none}
.cat{position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--a)) translateY(calc(var(--orbit)*-1));transform-origin:0 0}
.cat span {position:absolute;transform:translate(-50%,-50%);white-space:nowrap;font-size:18px;font-weight:800;letter-spacing:.08em;will-change:transform;display:inline-flex;
  align-items: center; gap: 4px;}
.cat span em {display: inline-block;  font-weight: normal; font-style: normal; font-size: 1.75em; color: #ddd;margin-top: -2px;  }
.cat.winner span{color:var(--yellow);text-shadow:0 0 7px var(--yellow),0 0 18px var(--yellow-soft),0 0 32px var(--yellow-soft)}
.glow{position:absolute;z-index:3;left:50%;top:50%;width:31%;height:54%;transform-origin:50% 100%;opacity:0;border-radius:50%;pointer-events:none;background:linear-gradient(to top,transparent,rgba(255,198,35,.16) 30%,rgba(255,211,78,.58) 75%,rgba(255,230,130,.18));filter:blur(10px);mix-blend-mode:screen}

.g0{transform:translate(-50%,-100%) rotate(0)}.g1{transform:translate(-50%,-100%) rotate(60deg)}.g2{transform:translate(-50%,-100%) rotate(120deg)}.g3{transform:translate(-50%,-100%) rotate(180deg)}.g4{transform:translate(-50%,-100%) rotate(240deg)}.g5{transform:translate(-50%,-100%) rotate(300deg)}
.glow.winner{opacity:1;animation:pulse 1.5s ease-in-out infinite alternate}

@keyframes pulse{to{opacity:.65;filter:blur(13px)}}
#spin{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);width:var(--button);height:var(--button);border-radius:50%;border:3px solid white;background:var(--blue-dark);color:white;display:flex;flex-direction:column;align-items:center;justify-content:center;box-shadow:0 8px 24px rgba(0,0,0,.24);cursor:pointer}
#spin b{font-size:17px; margin-top: 20px;}#spin span{font-size:16px}
#spin i{font-style:normal;font-size:22px}
.stage.spinning .cat span{animation:blink .28s infinite alternate}

@keyframes blink{from{opacity:.45}to{opacity:1;text-shadow:0 0 9px rgba(255,255,255,.7)}}
.snow{position:absolute;inset:0;z-index:1;pointer-events:none}
.snowflake{position:absolute;top:-20px;color:white;opacity:.75;animation:fall linear infinite;filter:blur(.2px)}

.selection{ width: 96%; background:#effbfe;padding:38px 2% 45px 2%;}
.section-inner{ width: 96%; max-width:1200px;margin:auto;text-align:center;position:relative}
.section-inner a.btn { display: inline-block; text-decoration: none; border-radius:30px;color:white;font-weight:600;background:var(--blue-deep);padding:14px 2.5em;font-size:21px; letter-spacing: 1px; margin-bottom: 1em;}
.selection .number,.contest .number{/*position:absolute;left:0;top:0*/}
.selection .number{ display: inline-block;background:var(--blue); color:#fff; margin: .9em auto; line-height: 1.8;}
.selection h2,.contest h2{margin:0;font-size:27px}
.selection .intro{line-height:1.5;font-size:16px; color: #fff; margin-bottom: 0;}
.selection h3{font-size:27px;margin:30px 0 15px 0; color: #fff;}
.selection .knizne { width: 96%; margin-top:1.5em; padding: 1em 2%;}
.category-copy{max-width:780px;margin:0 auto 25px;line-height:1.5;font-size:16px}

/*.books{background:var(--blue-deep);border-radius:18px;padding:34px;display:grid;grid-template-columns:repeat(5,1fr);gap:24px 18px;}
.book{border:0;background:transparent;color:white;cursor:pointer;min-width:0}
.cover{height:190px;border:2px dashed rgba(255,255,255,.65);border-radius:4px;display:grid;place-items:center;padding:12px;background:rgba(255,255,255,.035)}
.book-title{font-size:12px;line-height:1.25;margin-top:8px}*/
.contest{box-sizing:border-box;padding:14px 20px 45px; margin-top: 2em}
.contest-card{position:relative;max-width:1000px;margin:auto;background:white;border-radius:18px;padding:28px 60px;text-align:center;box-shadow:0 8px 22px rgba(0,92,115,.12)}
.contest p{font-size:16px;line-height:1.45}
.contest .number{ display: inline-block;background:var(--blue); color:#fff; margin: .9em auto; line-height: 1.8;}
.contest .mnu { width:100%; overflow: hidden; margin: 14px 0 2px 0;}
.contest .mnu a {color: #087895; display: inline-block; padding: 12px;text-underline-offset:3px;}
.primary,.submit{border:0;border-radius:30px;color:white;font-weight:800;cursor:pointer}
.primary{background:var(--blue-dark);padding:14px 55px}.submit{background:var(--blue-deep);padding:15px;width:100%;font-size:22px; letter-spacing: 1px;}

.modal{position:fixed;inset:0;background:rgba(0,54,70,.68);backdrop-filter:blur(3px);display:none;place-items:center;padding:20px;z-index:100;font-family: SlateProBook, Arial, sans-serif; font-size: 1.25em;}
.modal.open{display:grid}
.modal-card{position:relative;background:white;border-radius:14px;width:min(100%,560px);padding:30px;color:#087895;box-shadow:0 22px 65px rgba(0,0,0,.28)}
.modal-card h2{text-align:center;margin:0 0 20px}
.close{position:absolute;right:14px;top:0;border:0;background:none;color:#087895;font-size:48px;cursor:pointer; margin-top: 5px;}
.form-card form{display:grid;gap:12px}
.form-card input{padding:13px;border:1px solid #b8d4dd;border-radius:4px}
.check{display:flex;gap:9px;font-size:16px;line-height:1.35; padding:4px 0; margin: 1px 0; cursor: pointer;}
.check input{width:auto}
.check:first-child{ margin-top:5px}
.check:last-child{ margin-bottom:5px}
.form-card a {color: #087895; text-underline-offset:3px;}
.thanks-card{text-align:center}
.thanks-card .gift{font-size:30px}
.thanks-card hr{border:0;border-top:1px solid #b9dce4;margin:22px 0}
#err { width:92%; padding:.8em 4%; color: #fff; font-weight: bold; background: #c00; display: none;}
#err.a { display:block;}

@media(max-width:760px){
	:root{--stage:590px;--flake:385px;--orbit:247px;--button:104px}
	.steps{grid-template-columns:1fr}
	.cat span{font-size:14px}
	.books{grid-template-columns:repeat(3,1fr)}
	h1{font-size:44px}
	h1 span{font-size:39px}
	.sutaz h2{font-size:21px}
}
@media(max-width:520px){
	:root{--stage:420px;--flake:275px;--orbit:175px;--button:82px}
	.sutaz{padding-inline:10px}
	.cat span{font-size:10px}
	#spin b{font-size:11px}
	#spin span{font-size:10px}
	.books{grid-template-columns:repeat(2,1fr);padding:22px 14px}
	.cover{height:160px}
	.contest-card{padding:25px 20px}
	.selection h2,.contest h2{font-size:20px}
	.selection .number,.contest .number{position:static;margin:0 auto 12px}
}

#sutazTitle .letter {display:inline-block;opacity:0;transform:translateY(-38px) rotate(-7deg);filter:blur(2px)}
#sutazTitle .letter.landed{animation:letterLand .62s cubic-bezier(.2,.85,.25,1.25) forwards}
@keyframes letterLand{70%{opacity:1;transform:translateY(3px) rotate(1deg);filter:none}100%{opacity:1;transform:none;filter:none}}
#sutazClaim .claim-part{display:inline-block;opacity:0;transform:translateY(-18px) scale(.97)}
#sutazClaim .claim-part.landed{animation:phraseLand .48s ease-out forwards}
@keyframes phraseLand{to{opacity:1;transform:none}}
#sutazPrompt{opacity:0;transform:scale(.97);filter:blur(3px)}
#sutazPrompt.reveal{animation:promptReveal .75s ease forwards}
@keyframes promptReveal{to{opacity:1;transform:none;filter:none}}
.steps>div{opacity:.72;transition:.35s}.steps>div.step-lit{opacity:1}
.steps>div.step-lit>b{animation:stepGlow 1.25s ease}
@keyframes stepGlow{0%,100%{box-shadow:0 4px 12px rgba(0,0,0,.12)}50%{background:var(--yellow);color:#087895;box-shadow:0 0 12px var(--yellow),0 0 28px rgba(255,211,78,.85)}}
.snow-bank{position:absolute;left:-2%;right:-2%;bottom:-1px;height:16px;z-index:3;pointer-events:none;background:
radial-gradient(36px 12px at 2% 100%,#fff 98%,transparent 100%),radial-gradient(52px 15px at 10% 100%,#fff 98%,transparent 100%),radial-gradient(43px 13px at 19% 100%,#fff 98%,transparent 100%),radial-gradient(60px 16px at 29% 100%,#fff 98%,transparent 100%),radial-gradient(48px 13px at 40% 100%,#fff 98%,transparent 100%),radial-gradient(58px 17px at 51% 100%,#fff 98%,transparent 100%),radial-gradient(42px 12px at 62% 100%,#fff 98%,transparent 100%),radial-gradient(63px 16px at 73% 100%,#fff 98%,transparent 100%),radial-gradient(45px 13px at 84% 100%,#fff 98%,transparent 100%),radial-gradient(61px 17px at 95% 100%,#fff 98%,transparent 100%)}
.snowflake{font-family:"Segoe UI Symbol","Noto Sans Symbols 2",sans-serif;text-shadow:0 0 5px rgba(255,255,255,.75);width:1em;height:1em;line-height:1em;display:flex;align-items:center;justify-content:center;aspect-ratio:1/1;transform-origin:50% 50%;font-style:normal;white-space:nowrap;}
.thanks-ok{margin-top:8px;min-width:120px;border:0;border-radius:24px;background:var(--blue-dark);color:#fff;font-weight:800;padding:11px 30px;cursor:pointer}
/*@keyframes fall{to{transform:translate3d(var(--drift),1100px,0) rotate(540deg)}}*/
@keyframes fall{from{transform:translate3d(0,-40px,0) rotate(0deg)}to{transform:translate3d(var(--drift),1150px,0) rotate(var(--spin))}}
.snow-accumulation{--snow-level:0px;position:absolute;left:0;right:0;bottom:0;height:var(--snow-level);z-index:4;pointer-events:none;overflow:visible;background:linear-gradient(to bottom,rgba(255,255,255,.97),#fff 18%,#fff 100%);transition:height 1s linear;filter:drop-shadow(0 -2px 4px rgba(255,255,255,.24))}
.snow-surface{position:absolute;left:-2%;right:-2%;top:-10px;height:18px;background:radial-gradient(42px 13px at 3% 100%,#fff 98%,transparent 100%),radial-gradient(58px 16px at 12% 100%,#fff 98%,transparent 100%),radial-gradient(46px 12px at 22% 100%,#fff 98%,transparent 100%),radial-gradient(65px 17px at 33% 100%,#fff 98%,transparent 100%),radial-gradient(49px 13px at 44% 100%,#fff 98%,transparent 100%),radial-gradient(61px 16px at 55% 100%,#fff 98%,transparent 100%),radial-gradient(44px 12px at 66% 100%,#fff 98%,transparent 100%),radial-gradient(66px 17px at 77% 100%,#fff 98%,transparent 100%),radial-gradient(48px 13px at 88% 100%,#fff 98%,transparent 100%),radial-gradient(60px 16px at 97% 100%,#fff 98%,transparent 100%)}

@media (max-width: 1000px) {
.zk a { width:24.5%; height:392px; }	
.vyh .zk { width:25%;}
}
@media (max-width: 900px) {
.vyh .zk { width:30%;}
}
@media (max-width: 800px) {
.zk a { width:31.2%; height:382px; }	
.po {margin:3vh auto; } 
#po1 { width:70%;float:none; margin:0 auto}
#po1 img { max-height:35vh;}
#po2 { width:90%; max-height:35vh; padding:0 5%; float:none; margin-top:0;}
.vyh .zk { width:31%;}
}
@media (max-width: 640px) {
.vyh .zk { width:47%;}
.vyh .zk p {font-size:21px;}
}
@media (max-width: 600px) {
.zk a { width:48%; height:402px; }	
.zk a .i { height:344px;}
.wheel-stage{margin:24px auto 1em auto;}
#rg { width:100%; } 
}

@media (max-width: 400px) {
.zk a {height:81vw; }	
.zk a .i { height:58vw;}
.wheel-stage{margin:34px auto 1em auto;}
#k a { width:45%;}	
#rg label {margin-right:0;}
#rg input[type=text] { padding:8px 2%; box-sizing:border-box; width:100%; margin-bottom:4px;}
::-webkit-scrollbar {-webkit-appearance: none;}
::-webkit-scrollbar:vertical { width: 12px;}
::-webkit-scrollbar:horizontal {height: 12px;}
::-webkit-scrollbar-thumb {background-color: rgba(0, 0, 0, .5); border-radius: 10px;border: 2px solid #ffffff;}
::-webkit-scrollbar-track { border-radius: 10px; background-color: #ffffff;}
}