@font-face
{
font-family:UniZgLight;
src:url(../fonts/UniZgLight.ttf);
}
body {
margin:0px;
font-family:Courier;
font-size:42px;
color:white;
background:black;
}
div {
box-sizing:border-box;
float:left;
margin-top:100px;
}
#d1{margin-left:50px; 
position:absolute;
opacity:0;
animation:a1 0.5s 4, a2 10.5s 2s forwards;
}
@keyframes a1{
0% {opacity:0;}
50% {opacity:1;}
100% {opacity:0;}}

@keyframes a2{
0% {margin-left:50px; opacity:0;}
2.38% {margin-left:75px; opacity:0;}
4.76% {margin-left:75px; opacity:1;}
7.14% {margin-left:100px; opacity:0;}
9.52% {margin-left:100px; opacity:1;}
11.9% {margin-left:125px; opacity:0;}
14.28% {margin-left:125px; opacity:1;}
16.66% {margin-left:150px; opacity:0;}
19.04% {margin-left:150px; opacity:1;}
21.42% {margin-left:175px; opacity:0;}
23.8% {margin-left:175px; opacity:1;}
26.18% {margin-left:200px; opacity:0;}
28.56% {margin-left:200px; opacity:1;}
30.94% {margin-left:225px; opacity:0;}
33.32% {margin-left:225px; opacity:1;}
35.7% {margin-left:250px; opacity:0;}
38.08% {margin-left:250px; opacity:1;}
40.46% {margin-left:275px; opacity:0;}
42.84% {margin-left:275px; opacity:1;}
45.22% {margin-left:300px; opacity:0;}
47.6% {margin-left:300px; opacity:1;}
49.98% {margin-left:325px; opacity:0;}
52.36% {margin-left:325px; opacity:1;}
54.74% {margin-left:350px; opacity:0;}
57.12% {margin-left:350px; opacity:1;}
59.5% {margin-left:375px; opacity:0;}
61.88% {margin-left:375px; opacity:1;}
64.26% {margin-left:400px; opacity:0;}
66.64% {margin-left:400px; opacity:1;}
69.02% {margin-left:425px; opacity:0;}
71.4% {margin-left:425px; opacity:1;}
73.78% {margin-left:450px; opacity:0;}
76.16% {margin-left:450px; opacity:1;}
78.54% {margin-left:475px; opacity:0;}
80.92% {margin-left:475px; opacity:1;}
83.3% {margin-left:500px; opacity:0;}
85,68% {margin-left:500px; opacity:1;}
88.06% {margin-left:525px; opacity:0;}
90.44% {margin-left:525px; opacity:1;}
92.82% {margin-left:550px; opacity:0;}
95.2% {margin-left:550px; opacity:1;}
97.58% {margin-left:575px; opacity:0;}
99.96% {margin-left:575px; opacity:1;}

}

.slova{
}

#d2{margin-left:50px; visibility:hidden; animation:au 0.5s 2s forwards;}
@keyframes au{
0% {visibility:hidden;}
50% {visibility:hidden;}
100% {visibility:visible;}}

#d3{ visibility:hidden; animation:au 0.5s 2.5s forwards;}

#d5{visibility:hidden; animation:au 0.5s 3s forwards;}
#d6{visibility:hidden; animation:au 0.5s 3.5s forwards;}
#d7{visibility:hidden; animation:au 0.5s 4s forwards;}
#d8{margin-left:20px;visibility:hidden; animation:au 0.5s 4.5s forwards;}
#d9{visibility:hidden; animation:au 0.5s 5s forwards;}
#d10{visibility:hidden; animation:au 0.5s 5.5s forwards;}
#d11{visibility:hidden; animation:au 0.5s 6s forwards;}
#d12{visibility:hidden; animation:au 0.5s 6.5s forwards;}
#d13{visibility:hidden; animation:au 0.5s 7s forwards;}
#d14{visibility:hidden; animation:au 0.5s 7.5s forwards;}
#d15{visibility:hidden; animation:au 0.5s 8s forwards;}
#d16{visibility:hidden; animation:au 0.5s 8.5s forwards;}
#d17{visibility:hidden; animation:au 0.5s 9s forwards;}
#d18{visibility:hidden; animation:au 0.5s 9.5s forwards;}
#d19{visibility:hidden; animation:au 0.5s 10s forwards;}
#d20{visibility:hidden; animation:au 0.5s 10.5s forwards;}
#d21{visibility:hidden; animation:au 0.5s 11s forwards;}
#d22{visibility:hidden; animation:au 0.5s 11.5s forwards;}
#d23{visibility:hidden; animation:au 0.5s 12s forwards;}
@keyframes at1{
0% {opacity:0;}
95% {opacity:0;}
100% {opacity:1;}}
/*#d4{width:600px;height:100px;left:50px;
background:white;position:absolute;top:0px;
animation:a3 17s 4s forwards;}
@keyframes a3 {
0% {left:50px;}
5.9% {left:70.6px;}
11.8% {left:91.2px;}
23.6% {left:111.8px;}
29.5% {left:132.4px;}
35.4% {left:153px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
0% {left:50px;}
100% {left:400px;}
}*/