html{
  height: 100%;
  touch-action: none;
}

body {
	min-height: 100%;
}

html, body {
  overflow:hidden;
}

#scene {
   width:100vw;
   height: 100vh;
   overflow: hidden;
   background-image: url(../images/nebo.png);
   background-size: cover;
}

.debug {
   border-style:solid;
   border-width:2px;
   border-color:red;
}

.oblak {
   z-index: 6;
   width:14%;
   height:12%;
   background-image: url(../images/home/oblak.png);
   background-repeat:no-repeat;
   background-size:100% 90%;
   position: absolute;
}

/*
#oblak1 { top:3.8%; left:86%; }
#oblak2 { top:5.2%; left:72%; }
#oblak3 { top:5%;   left:58%; }
#oblak4 { top:6%;   left:44%; }
#oblak5 { top:4.2%; left:30%; }
#oblak6 { top:5%;   left:16%; }
#oblak7 { top:6.5%; left:2%;  }
*/
#oblak1 { top:3.8%; left:-20%; }
#oblak2 { top:5.2%; left:-20%; }
#oblak3 { top:5%;   left:-20%; }
#oblak4 { top:6%;   left:-20%; }
#oblak5 { top:4.2%; left:-20%; }
#oblak6 { top:5%;   left:-20%; }
#oblak7 { top:6.5%; left:-20%; }

.kap1 {
   width:2%;
   height:5%;
   background-image: url(../images/home/kap_v.png);
   background-repeat:no-repeat;
   background-size:60% 100%;
   position: absolute;
   top:8%;
}

.kap2 {
   width:2%;
   height:4%;
   background-image: url(../images/home/kap_m.png);
   background-repeat:no-repeat;
   background-size:53% 100%;
   position: absolute;
   top:8%;
}

.kap3 {
   width:1.5%;
   height:3%;
   background-image: url(../images/home/kap_m2.png);
   background-repeat:no-repeat;
   background-size:50% 100%;
   position: absolute;
   top:8%;
}

.kap4 {
   width:1.5%;
   height:3%;
   background-image: url(../images/home/kap_m3.png);
   background-repeat:no-repeat;
   background-size:45% 100%;
   position: absolute;
   top:8%;
}

.kap5 {
   width:1.5%;
   height:3.5%;
   background-image: url(../images/home/kap_m4.png);
   background-repeat:no-repeat;
   background-size:45% 100%;
   position: absolute;
   top:8%;
}

#planina{
	width:100%;
	height:90%;
	background-image: url(../images/home/007planina.png);
	background-repeat:no-repeat;
	background-size:cover;
	position: absolute;
	top:10%;
	left:0%;
}

#kucaLevo{
	width:30%;
	height:63%;
	background-image: url(../images/home/kuca_levo.png);
	background-repeat:no-repeat;
	background-size:cover;
	position: absolute;
	top:20%;
	left:-9.5%;
}

#kucaSredina{
	width:17%;
	height:77%;
	background-image: url(../images/home/kuca_sredina.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	position: absolute;
	top:10%;
	left:18%;
}

#kucaDSredina{
	width:20%;
	height:62%;
	background-image: url(../images/home/kuca_d_sredina.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	position: absolute;
	top:22%;
	left:82%;
}

#kucaDesno{
	width:29%;
	height:79%;
	background-image: url(../images/home/kuca_desno.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	position: absolute;
	top:8%;
	left:54%;
}

#sat{
	width:13.5%;
	height:60%;
	background-image: url(../images/home/sat.png);
	background-position: 0 97%;
	background-repeat:no-repeat;
	background-size: 100% 100%;
	position: absolute;
	top:24%;
	left:41%;
}

#morska_vrata {
	width:37%;
	height:88%;
	background-image: url(../images/home/morska_vrata.png);
	background-repeat:no-repeat;
	background-size:100% 100%;
	position: absolute;
	top:2%;
	left:32%;
}

#grad {
   width:25%;
   height:8%;
   background-repeat:no-repeat;
   background-size:contain;
   position: absolute;
   top:16%;
   left:43%;
}

#grad.CIR {
   background-image: url(../images/home/gradc.png);
}

#grad.LAT {
   background-image: url(../images/home/gradl.png);
}

#z {
   width:10%;
   height:8%;
   background-image: url(../images/home/z.png);
   background-repeat:no-repeat;
   background-size:contain;
   position: absolute;
   top:36%;
   left:37%;
}

#z.color {
   background-image: url(../images/home/z_b.png);
}

#s {
   width:10%;
   height:9%;
   background-image: url(../images/home/s.png);
   background-repeat:no-repeat;
   background-size:contain;
   position: absolute;
   top:35%;
   left:61%;
}

#s.color {
   background-image: url(../images/home/s_b.png);
}

#sunce {
	width:15%;
	height:30%;
	background-image: url(../images/home/sunce.png);
	background-repeat:no-repeat;
	background-size:90% 100%;
	position: absolute;
	top:2%;
	left:80%;
}

#sun {
   width:9.655%;
   height:17.889%;
   background-image: url(../images/home/sun/sun.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:3.10939%;
   left:84.27083%;
   z-index: 5;
}

.ray1 {
   width:0.716523%;
   height:1.93342%;
   background-image: url(../images/home/sun/ray1.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:5.317434210526316%;
   left:87.18587239583333%;
   z-index: 4;
}

.ray2 {
   width:1.69146%;
   height:1.6572238%;
   background-image: url(../images/home/sun/ray2.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:7.1069%;
   left:84.372558%;
   z-index: 4;
}

.ray3 {
   width:1.18637%;
   height:1.7422096%;
   background-image: url(../images/home/sun/ray3.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:10.2648026%;
   left:84.632975%;
   z-index: 4;
}

.ray4 {
   width:0.9866875%;
   height:2.018413598%;
   background-image: url(../images/home/sun/ray4.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:13.212171%;
   left:84.73714193%;
   z-index: 4;
}

.ray5 {
   width:1.3508%;
   height:3.3144476%;
   background-image: url(../images/home/sun/ray5.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:17.422697%;
   left:84.9975%;
   z-index: 4;
}

.ray6 {
   width:0.986687%;
   height:2.80453%;
   background-image: url(../images/home/sun/ray6.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:17.4226974%;
   left:87.9654948%;
   z-index: 4;
}

.ray7 {
   width:1.503524%;
   height:2.27337%;
   background-image: url(../images/home/sun/ray7.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:17.52796%;
   left:89.99674%;
   z-index: 4;
}

.ray8 {
   width:1.0219264%;
   height:1.31728%;
   background-image: url(../images/home/sun/ray8.png);
   background-repeat:no-repeat;
   background-size:90% 100%;
   position: absolute;
   top:12.05428%;
   left:90.777995%;
   z-index: 4;
}

#talasSvetao {
   width:130%;
   height:15%;
   background-image: url(../images/home/talas_svetao.png);
   background-repeat:repeat-x;
   background-size:40%;
   position: absolute;
   top:84%;
   left:-10%;
        animation-delay: 2s;
   -moz-animation-delay: 2s;
-webkit-animation-delay: 2s;
}

#talasTaman {
   width:130%;
   height:15%;
   background-image: url(../images/home/talas_taman.png);
   background-repeat:repeat-x;
   background-size:40%;
   position: absolute;
   top:87%;
   left:-10%;
        animation-delay: 1s;
   -moz-animation-delay: 1s;
-webkit-animation-delay: 1s;
}

#talasNajtamniji{
   width:130%;
   height:15%;
   background-image: url(../images/home/talas_najtamniji.png);
   background-repeat:repeat-x;
   background-size:40%;
   position: absolute;
   top:90%;
   left:-10%;
        animation-delay: 0s;
   -moz-animation-delay: 0s;
-webkit-animation-delay: 0s;
}

.animated {
        animation: wave 8s infinite;
   -moz-animation: wave 8s infinite;
-webkit-animation: wave 8s infinite;
}

.paused {
    -webkit-animation-play-state:paused;
    -moz-animation-play-state:paused;
    -o-animation-play-state:paused;
    animation-play-state:paused;
}

@keyframes wave {
     0% {left: -10%;}
    50% {left:   0%;}
   100% {left: -10%;}
}
@-moz-keyframes wave {
     0% {left: -10%;}
    50% {left:   0%;}
   100% {left: -10%;}
}

@-webkit-keyframes wave {
     0% {left: -10%;}
    50% {left:   0%;}
   100% {left: -10%;}
}
