/*
web style
Copyright (c) 2012 Reactive Light
background rgb(248, 210, 206),#ebf2fe,rgb(255, 239, 195),rgb(206, 234, 214)
*/

.rain{
	height:calc(100vh - 220px);
	display:flex;
	justify-content:center;
	align-items:cetner;
}

.rain-container{
	position:relative;
	height:400px;
	margin-top:70px;
	width:100%;
	display:flex;
	justify-content:center;
	border-bottom:1px solid rgba(255,255,255,.1);
	-webkit-box-reflect:below 1px linear-gradient(transparent,transparent,transparent,transparent,#0005);
}
.cloud{
	position:relative;
	width:320px;
	height:100px;
	background:#fff;
	border-radius:100px;
	z-index:100;
	filter:drop-shadow(0 0 35px #fff);
	top:50px;
}

.cloud:before{
	content:"";
	position:absolute;
	width:110px;
	top:-50px;
	left:50px;
	height:110px;
	border-radius:50%;
	background:#fff;
	box-shadow:90px 0 0 30px #fff;
	
	

}

.text{
	position:absolute;
	top:40px;
	height:20px;
	line-height:20px;
	text-transform:uppercase;
	color:#fff;
	text-shadow:0 0 5px #fff,0 0 15px #fff,0 0 30px #fff;
	transform-origin:bottom;
	animation:animate 2s linear forwards;
	
}

@keyframes animate{
	0%{
		transform:translateY(0) scale(1);
	}
	70%{
		transform:translateY(290px) scale(1);
	}
	100%{
		transform:translateY(290px) scale(0);
	}

}