/* load-screen */
@keyframes scaleImg {
	0%{ transform: scale(.4); opacity: 0; }
	50% { transform: scale(.5); opacity: 1; }
	100% { transform: scale(.4); opacity: 0; }
}


/*animating cloud*/

@keyframes rotate{
  0% { transform: translate(-15%, -27% ) rotate(10deg)}
  25% { transform: translate(-15%, -27% ) rotate(5deg) } 
  50% { transform: translate(-15%, -27% ) rotate(0deg) } 
  75% { transform: translate(-15%, -27% ) rotate(5deg) } 
  100% { transform : translate(-15%, -27% ) rotate(10deg) }
}

/* faders */

.from-bottom{
	transform: translateY(5vh);
	opacity: 0;
	transition: opacity 500ms ease-in, transform 500ms ease-in;
}

.from-top {
	transform: translateY(-5vh);
	opacity: 0;
	transition: opacity 750ms ease-in, transform 750ms ease-in;
}

.from-left {
	opacity: 0;
	transform: translateX(-10%);
	transition: 500ms ease-in;	
}

.from-right {
	opacity: 0;
	transform: translateX(10%);
	transition: opacity 500ms ease , transform 500ms ease-in;
}

.from-top.appear,
.from-bottom.appear{
	transform: translateY(0);
	opacity: 1;
}

.from-left.appear {
	opacity: 1;
	transform: translateX(0);
}

.from-right.appear {
	opacity: 1;
	transform: translateX(0);
}

.grow{
	transform: translate(-50%, 70%) scale(0.7);
	transform-origin: center;
	transition: opacity 500ms ease-in, transform 500ms ease-in;
}

.grow.appear{
	transform: translate(-50%, 70%) scale(1);
	opacity: 1;
}