#ozadje {
	position: fixed;
	z-index: -1;
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	

}
#zvezdice {
  position: absolute;
  top: 0px;
  left: 0px;
  	transition: 
		left 1s,
		rotate 4s,
		scale 4s;

}

#ozadje #slika {
	position: absolute;
	height: 100%;
	width: calc(100% + 200px);
	background-image: url("../slike/nebo.jpg");
	background-size: cover;
	left: 0px;
	rotate: -5deg;
	scale: 120%;
	transition: 
		left 1s,
		rotate 4s,
		scale 4s;
}
#ozadje #slika.pozicija {
	rotate: 0deg;
	scale: 125%;
}
#ozadje #zvezdice.pozicija {
	rotate: 0deg;
	scale: 125%;
}
#page0-slika div {
	transition: all 4s;
}

.pozicija #page0_naslov_0 {
	visibility: visible;
	top: 50%;
}
.pozicija #page0_naslov_1 {
	visibility: visible;
	top: 58%;
}

#moder_planet {
	position: absolute;
	height: 25vh;
	width: 25vh;
	background-image: url("../slike/Moder_hisa_498x498px.png");
	background-size: cover;
	left: 30%;
	top: 15%;
	rotate: 35deg;
	scale: 100%;

	
}
.pozicija #moder_planet {
	left: 40%;
	top: 15%;
	rotate: 45deg;
	scale: 150%;

}

#rdec_planet {
	position: absolute;
	height: 25vh;
	width: 25vh;
	background-image: url("../slike/Rdec_kovanec_498x498px.png");
	background-size: cover;
	left: 58%;
	top: 20%;
	rotate: 35deg;
	scale: 50%;

	
}
.pozicija #rdec_planet {
	left: 62%;
	top: 22%;
	rotate: 40deg;
	scale: 85%;

}

#zelen_planet {
	position: absolute;
	height: 25vh;
	width: 25vh;
	background-image: url("../slike/Zeleni_deznik_498x498px.png");
	background-size: cover;
	left: 73%;
	top: 35%;
	rotate: 15deg;
	scale: 90%;

	
}
.pozicija #zelen_planet {
	left: 80%;
	top: 40%;
	rotate: 20deg;
	scale: 125%;

}

#rjav_planet {
	position: absolute;
	height: 25vh;
	width: 25vh;
	background-image: url("../slike/Rjav_vrtnica_brez_razpoke_498x498px_nov.png");
	background-size: cover;
	left: 45%;
	top: 65%;
	rotate: -10deg;
	scale: 100%;

	
}
.pozicija #rjav_planet {
	left: 60%;
	top: 70%;
	rotate: 0deg;
	scale: 150%;

}
@keyframes razpoka {
	0% {opacity: 1}
	100% {opacity: 0}
	
}
#video_razpoka {
	position: absolute;
	height: 25vh;
	width: 25vh;
	left: 60%;
	top: 70%;
 	scale: 150%;
	opacity: 0;
	-webkit-mask-box-image: url("../slike/rjav_maska2.svg");
	animation-timing-function: ease-out;

}
.pozicija #video_razpoka {
	animation-name: razpoka;
	animation-duration: 12s;
	animation-delay: 4.25s;

}
#rumen_planet {
	position: absolute;
	height: 25vh;
	width: 25vh;
	background-image: url("../slike/Rumeni_zastava_498x498px.png");
	background-size: cover;
	left: 33%;
	top: 70%;
	rotate: 15deg;
	scale: 50%;

	
}
.pozicija #rumen_planet {
	left: 40%;
	top: 70%;
	rotate: 25deg;
	scale: 85%;

}

@keyframes komet {
  0%   {	left: 100%;
			top: -10%;
			scale: 80%;
		}
  75%   {	left: 55%;
			top: 56%;
			scale: 30%;
		}
  100%   {	left: 40%;
			top: 50%;
			scale: 0%;
		}
}


#page0-slika #komet {
	position: absolute;
	height: 25vh;
	width: 25vh;
	background-image: url("../slike/Komet_498x498px-min.png");
	background-size: cover;
	left: 100%;
	top: -10%;
	rotate: 0deg;
	scale: 0%;
	animation-timing-function: ease-in;
	
}
#page0-slika.pozicija #komet {
	animation-name: komet;
	animation-duration: 3s;
	animation-delay: 2s;
	

}

#oblaki {
	position: absolute;
	height: 100%;
	width: 100%;
	background-image: url("../slike/Megla1.png");
	background-size: cover;
	scale: 100%;

	
}
.pozicija #oblaki {
	scale: 105%;

}

.slika_na_crni_pasici {
	transition: all .7s;
}
.slika_na_crni_pasici.out-desno {
	left: 40%;
	top: -20vh;
}
.slika_na_crni_pasici.prikazana {
	left: 0%;
	top: 50px;
	transition: all 1s;
}

.slika_na_crni_pasici.out-levo {
	left: -80%;
	top: 50vh;
	transition: all .7s;
}

/* small ZURB----------- */
@media screen and (max-width: 640px) {
	#ozadje #zvezdice.pozicija {
		scale: 75%;
	}
	.pozicija #page0_naslov_0 {
		visibility: visible;
		top: 14%;
	}
	.pozicija #page0_naslov_1 {
		visibility: visible;
		top: 30%;
	}

	#moder_planet {
		height: 25vw;
		width: 25vw;
		left: 0%;
		top: 40%;
		scale: 100%;

		
	}
	.pozicija #moder_planet {
		left: 5%;
		top: 45%;
		scale: 150%;

	}

	#rdec_planet {
		height: 25vw;
		width: 25vw;
		left: 40%;
		top: 40%;
		scale: 50%;
		
	}
	.pozicija #rdec_planet {
		left: 47%;
		top: 48%;
		scale: 85%;

	}

	#zelen_planet {
		height: 25vw;
		width: 25vw;
		left: 65%;
		top: 50%;
		scale: 90%;
		
	}
	.pozicija #zelen_planet {
		left: 72%;
		top: 60%;
		rotate: 20deg;
		scale: 125%;

	}

	#rjav_planet {
		height: 25vw;
		width: 25vw;
		left: 40%;
		top: 65%;
		scale: 100%;

		
	}
	.pozicija #rjav_planet {
		left: 50%;
		top: 75%;
		scale: 150%;

	}
	@keyframes razpoka {
		0% {opacity: 1}
		100% {opacity: 0}
		
	}
	#video_razpoka {
		height: 25vw;
		width: 25vw;
		left: 50%;
		top: 75%;

	}
	.pozicija #video_razpoka {

	}
	#rumen_planet {
		height: 25vw;
		width: 25vw;
		left: 10%;
		top: 70%;
		scale: 50%;

		
	}
	.pozicija #rumen_planet {
		left: 15%;
		top: 77%;
		scale: 85%;

	}

	@keyframes komet {
	  0%   {	left: 100%;
				top: -10%;
				scale: 80%;
			}
	  75%   {	left: 41%;
				top: 67%;
				scale: 30%;
			}
	  100%   {	left: 20%;
				top: 60%;
				scale: 0%;
			}
	}


	#page0-slika #komet {
		height: 25vw;
		width: 25vw;
		left: 100%;
		top: -10%;
		
	}
	
	#page0-slika.pozicija #komet {
		animation-name: komet;
		animation-duration: 3s;
		animation-delay: 2s;
		

	}

	#oblaki {
		background-image: url("../slike/Megla1.png");
		background-size: cover;
		scale: 100%;

		
	}
	.pozicija #oblaki {
		scale: 105%;

	}

	
}