@charset "utf-8"; html, body, div, span, h1, h2, h3, h4, h5, h6, p, a, big, del, em, font, img, ins, q, s, small, strong, sub, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tr, th, td {margin:0;padding:0;vertical-align:baseline}:focus{outline:0} ol, ul, li {list-style-type:none} html{font-size:100%} body{font-family:Arial,Helvetica,sans-serif;font-size:1.1em;line-height:1.6em} img{float:left} a{color:#e00;text-decoration:none;outline:none} a:hover{text-decoration:none}
body{width:1000px;height:940px;background:url(../gf0/9.png);-ms-touch-action:none;touch-action:none}
#hrl{position:absolute;top:212px;left:20px;width:960px}
#ban{position:absolute;width:1000px;height:217px}
#area{width:425px;height:45px;background:#dd0;position:absolute;top:18px;left:285px;box-shadow:6px 6px 6px 0 rgba(100,100,100,.8) inset,-6px -6px 6px 0 rgba(255,255,255,.8) inset;border:1px solid #cc0;border-radius:20px;overflow:hidden}
#move{position:absolute;left:430px;width:270px;height:45px;animation:move 5s linear infinite}
@keyframes move{95%, 100%{transform:translate(-700px)}}
#pre{position:absolute;top:850px;width:1000px;height:90px;background:url(../gf0/pre.png)}
#arrow{position:absolute;width:86px;height:90px;left:914px;background:url(../gf0/back.png)}
#move{background:url(../gf3/tyt_9.png)}
.anim {animation-duration:.5s;width:960px;height:610px;position:absolute;top:0px;left:0px;z-index:5;animation-name:zoom}
@keyframes zoom {
0% {transform:scale(0)}
100% {transform:scale(1)}
}
#obraz {position:absolute;left:80px;top:40px;width:800px;height:247px;border-radius:35px;display:none;z-index:9;transform-origin:center center}
#bg3 {background:#010265;width:960px;height:675px;margin:90px auto;position:relative;margin-left:20px;box-shadow:0 0 32px #000;overflow:hidden;border-radius:20px}
a.next {
position:absolute;
bottom:40px;
left:50%;
transform:translateX(-50%);
padding:12px 24px;
background:#007bff;
color:#fff;
text-decoration:none;
border-radius:8px;
transition:background 0.3s;
font-size:18px
}
a.next:hover {background:#065e00}
#trans {background:rgba(255, 255, 255, .8);border-radius:20px;padding:20px;width:700px; height:28px;margin:20px auto;margin-top:470px;box-shadow:0 0 18px #fff;text-align:center;font-family:sans-serif;font-size:26px;color:#F00;z-index:9}
#mag {
background:url(../gf3/mag.png) no-repeat center;background-size:contain;width:800px;height:440px;position:absolute;top:40px;left:79px}
#pg1 {background:url(../gf3/pg1.png) no-repeat center;background-size:contain;width:775px;height:566px;position:absolute;top:20px;left:85px}
#pg2 {background:url(../gf3/pg2.png) no-repeat center;background-size:contain;width:768px;height:460px;position:absolute;top:120px;left:88px}
#hasloAnimacja {background:url(../gf3/h01.png) no-repeat center;background-size:contain;position:absolute;top:40px;left:105px;width:750px;height:390px;z-index:5;visibility:visible}
.hasloStart {animation:bounceIn 1s ease-in-out}
@keyframes bounceIn {
0%   {opacity:0;transform: scale(0)}
40%  {transform:scale(1.2)}
60%  {transform:scale(.8)}
80%  {transform:scale(1.05)}
100% {opacity:1;transform:scale(1)}
}
.etap {opacity:0;transition:opacity 1s ease-in-out;pointer-events:none;position:absolute;top: 0;left:0;width:100%;height:100%}
.etap.aktywny {opacity:1;pointer-events:auto;z-index:10}
#pg0 {background:url(../gf3/pg0.png) no-repeat center;background-size:contain;width:768px;height:352px;position:absolute;top:120px;left:88px}
#pg4 {background:url(../gf3/pg4.png) no-repeat center;background-size:contain;width:775px;height:566px;position:absolute;top:20px;left:85px;}
#h02Animacja {background:url(../gf3/h02.png) no-repeat center;background-size:contain;position:absolute;top:40px;left:105px;width:750px;height:390px;z-index:5;visibility:visible}
.h02Start {animation:bounceIn 1s ease-in-out}
#pg3 {background:url(../gf3/pg3.png) no-repeat center;background-size:contain;width:769px;height:360px;position:absolute;top:120px;left:88px}
#pg5 {
background:url(../gf3/pg5.png) no-repeat center;background-size:contain;width:775px;height:566px;position:absolute;top:20px;left:85px}
#h03Animacja {background:url(../gf3/h03.png) no-repeat center;background-size:contain;position:absolute;top:40px;left:105px;width:750px;height:390px;z-index:5;visibility:visible}
.h03Start {animation:bounceIn 1s ease-in-out}
#wyjasnienie {background:url(../gf3/sekret.png) no-repeat center;background-size:contain;width:769px;height:360px;position:absolute;top:100px;left:96px}