#move{background:url(../gf3/tyt_9.png)}
.anim {-webkit-animation-duration:.5s;animation-duration:.5s;width:960px;height:610px;position:absolute;top:0px;left:0px;z-index:5;-webkit-animation-name:zoom;animation-name:zoom}
@-webkit-keyframes zoom {
0% {-webkit-transform:scale(0)}
100% {-webkit-transform:scale(1)}
}
@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, 0.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(0.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
}