body{
background:black;
}


.textb{
position:absolute;
top:20%;
left:10%;

z-index:3;
background-color:rgb(120,120,220);
padding:20px;
font-size:20px;
}


#return{
position:absolute;
top:30%;
left:10%;

z-index:3;
background-color:rgb(120,120,220);
padding:20px;
font-size:20px;
}

#bigdiv{


width:1300px;
height:700px;
border:1px solid black;

background-image:url("../images/bgate.jpg");
background-repeat: no-repeat;
background-size:cover;
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
}

#sara{
position:absolute;
top:480px;
left:930px;
width:100px;
z-index:1
}



#fluffnofoot{
position:absolute;
top:70px;
left:680px;
z-index:0;
width:520px;
}

#fluffoot{

position:absolute;
top:426px;
left:502px;
width:371px;

}

#saralegs{
position:absolute;
top:410px;
left:970px;
z-index:1;
display:none;
width:50px;
}

.animate{
-webkit-animation: flufflip 2s forwards;
-moz-animation: flufflip 2s forwards;
animation: flufflip 2s forwards;
z-index:2;

transform-origin:70% 30%;

}

.moveup{
-webkit-animation: moveupa .3s forwards;
-moz-animation: moveupa .3s forwards;
animation: moveupa .3s forwards;

}

.drop{
-webkit-animation: dropa .3s forwards;
-moz-animation: dropa .3s forwards;
animation: dropa .3s forwards;
transform-origin:50% 50%;
}






@-webkit-keyframes dropa {
	100%  { -webkit-transform: translateY(230px) rotate(460deg); 
	}
	

}
@keyframes dropa {
	100%  { transform: translateY(230px) rotate(460deg) ; 

	}
}
@-moz-keyframes dropa {
	100%  { -moz-transform: tranalateY(230px) rotate(460deg); 

	}
}








@-webkit-keyframes moveupa {
	100%  { -webkit-transform: translateY(-5%) ; 

	}
}
@keyframes moveupa {
	100%  { transform: translateY(-5%) ; 

	}
}
@-moz-keyframes moveupa {
	100%  { -moz-transform: tranalateY(-5%) ; 

	}
}


@-webkit-keyframes flufflip {
	50%  { -webkit-transform: rotate(-170deg) ; 

	}
}
@keyframes flufflip {
	50%  { transform: rotate(-170deg) ; 

	}
}
@-moz-keyframes flufflip {
	50%  { -moz-transform: rotate(-170deg) ; 

	}
}