.contaion{
	height: 100%;
	width: 100%;
	overflow: hidden;
}
.login{
	width: 100%;
	height: 100%;
}
.top-shade{
	height: 50%;
}
.top-shade img{
	width: 100%;
	height:100%;
	position: relative;
	overflow: hidden;
	top:0;
	left:0;
	z-index:3;
}
.people{
	height:47%;
}
.people img{
	width: 100%;
	position: absolute;
	top:12.5%;
	z-index:3;
}
.btn{
	width: 50%;
	height: 15%;
	text-align: center;
	position: absolute;
    left: 25%;
    top: 81%;
    z-index: 3;
}
.btn img{
	width: 100%;
	height: 100%;
}
.finger{
	width: 45%;
    height: 15%;
    position: absolute;
    right: -4%;
    top: 46%;
    z-index: 3;
    -webkit-animation: shake .8s .8s infinite; 
}
.finger img{
	width: 100%;
	height: 100%;
}
@-webkit-keyframes shake{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
.bottom-shade{
	height: 50%;
}
.bottom-shade img{
	width: 100%;
	position: relative;
	bottom: 94%;
	left:0;
	z-index: 1;
}
.smallrainDay{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../images/images/rain.gif) 0 0 no-repeat;
	background-size: cover;
}
.contaion .return{
	font-size: 80px;
    width: 100px;
    position: absolute;
    bottom: 3%;
    left: 15%;
    margin-left: -50px;
}
.icon-next{
	color: white;
}
.finger1{
	width: 45%;
    height: 15%;
    position: absolute;
    left: -4%;
    top: 82%;
    z-index: 3;
    -webkit-animation: shake .8s .8s infinite;
}
.finger1 img{
	width: 100%;
	height:100%;
}
@-webkit-keyframes joggle{
	from{-webkit-transform: translateX(0.3rem);}
	to{-webkit-transform: translateX(-0.3rem);}
}
.finger2{
	display: none;
	width: 31%;
	height: 11%;
	position: absolute;
	left: 73%;
    bottom: 27%;
}
.finger2 img{
	width: 100%;
	height: 100%;
	-webkit-animation: joggle1 .8s  .8s infinite;
}
@-webkit-keyframes joggle1{
	from{-webkit-transform: translateX(0.2rem);}
	to{-webkit-transform: translateX(-0.2rem);}
}
.moderaterainDay{
	display: none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../images/images/rain-one-the-green-grass1.gif) 0 0 no-repeat;
	background-size: cover;
}
.heavyrainDay{
	display:none;
	width: 100%;
	height: 100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background: url(../images/images/rain-one-the-green-grass.gif) 0 0 no-repeat;
	background-size: cover;
}
.finger6{
	display: block;
	width: 31%;
	height: 11%;
	position: absolute;
	top: 29%;
    right: -12%;
}
.finger6 img{
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: joggle5 .8s  .8s infinite;
}
@-webkit-keyframes joggle5{
	from{-webkit-transform: translateY()(0.2rem);}
	to{-webkit-transform: translateY()(-0.2rem);}
}
.end{
	display:none;
	width: 100%;
	height:100%;
	position: absolute;
	top:0;
	overflow: hidden;
	background-color: #fff;
}
.top-shader{
	height:50%;
	width: 100%;
	position: absolute;
	top:0;
	left:0;
	z-index: 1;
	overflow: hidden;
}
.topstop{
	-webkit-animation: topstops .8s .8s linear;
}
@-webkit-keyframes topstops{
	from{top:0%;}
	to{top:50%;}
}
.top-shader img{
	width: 100%;
	height: 100%;
}
.sign{
	width: 29%;
	height: 29%;
	position: absolute;
	z-index: 3;
	top:1%;
	right:1%;
	
}
.child {
   	width: 30%;
    height: 23%;
    position: absolute;
    z-index: 3;
    top: 4%;
    left: 4%;
}
.child img{
	width: 100%;
	height: 100%;
}
.sign img{
	width: 100%;
	height:100%;
	-webkit-animation: overturn 1s .8s infinite;
}

@-webkit-keyframes overturn{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
} 
.endd{
	width: 85%;
    height: 18%;
    text-align: center;
    margin-top: 60%;
    position: relative;
    z-index: 3;
}
.bnt1{
	width: 52%;
	height: 14%;
	position: absolute;
	bottom:14%;
	z-index: 3;
	left:23%;
}
.bnt1 img{
	width: 100%;
	height: 100%;
}
.finger7{
	display: block;
	width: 36%;
    height: 15%;
    position: absolute;
    top: 77%;
    left: -2%;
}
.finger7 img{
	width:100% ;
	height: 100%;
	position: relative;
	z-index: 4;
	-webkit-animation: joggle5 .8s  .8s infinite;
}
@-webkit-keyframes joggle5{
	from{-webkit-transform: translateY(0.2rem);}
	to{-webkit-transform: translateY(-0.2rem);}
}
.bottom-shader{
	height:50.05%;
	width: 100%;
	position: absolute;
	bottom:0;
	overflow: hidden;
}
.bottom-shader img{
	width: 100%;
	height: 100%;
}
.botomstop{
	-webkit-animation:bottomstops .8s .8s linear;
}
@-webkit-keyframes bottomstops{
	from{bottom:0%;}
	to{bottom:50%;}
}
.contaion .mark{
	width: 100%;
	height: 60%;
	position: absolute;
	top: 20%;
	
}
.contaion .icon{
	width: 22%;
	height: 12%;
	position: fixed;
	right: 5%;
	bottom: 3%;
	z-index: 99;
}
.icon{
	width: 100%;
	height: 100%;
}
.contaion .MusicBtn{
	width: 13%;
	height: 8%;
	position: absolute;
	right: 9%;
	top: 2%;
}