/*backgroundimage*/
.background-image {
	width: 100%;
	height: 100%;
	position: relative;
	display: inline-block;

	
}
 
.mufasa {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 200px;
	animation: mufasamove 5s infinite; 
	transform: translate(-100px, -100px);
}
@keyframes mufasamove {

	0% {right:0%  }
	25% {right: 75px }
	50% {right: 150px  }
	75% {right: 125px }
	100% {right: 200px }
}

.sun	{
	position: absolute;
	top: 0;
	left: 0;
	height: 120px;
	transform: translate(150px, 10px);
	animation: sunmove 5s infinite alternate;
;
}

@keyframes sunmove {
	0% {left: 120px; top: 20px; transform: rotate(45deg);} 
	25% {left: 120px; top: 20px; transform: rotate(90deg);} 
	75% {left: 120px; top: 20px; transform: rotate(135deg);} 
	100% {left: 120px; top: 20px; transform: rotate(180deg);} 
}

.simba {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 100px;
	transform: translate(-50px, -50px);
	animation: simbamove 13s infinite 1s alternate;
}


@keyframes simbamove {
	
	0% {right: 5%; bottom: -5%}
	20% {right: 20%; bottom:-3%}
	40% {right: 30%; bottom: 0%}
	60% {right: 40%; bottom: 5%}
	80% {right: 50%; bottom: 7%}
	100% {right: 60%; bottom: 0% }
}

.pumba {
	position: absolute;
	bottom: 0;
	left: 0;
	height: 200px;
	transform: translate(180px, -50px);
	animation: pumbamove infinite 1.5s;
	
}

@keyframes pumbamove {
	
	0% {bottom: 0%;}
	100% {bottom: 5%;}
}

.cloud {
	position: absolute;
	opacity: 0.7;
	top: 0;
	left: 0;
	width: 200px;
	transform: translate(180px, 10px)

}

.cloud :hover {
	transform: translate(180px, 10px)
	opacity: 1.0;
}