/*  Test   */

/* transition: property duration function_of_duration delay_of_transition */

#body-container {
	position:relative;
	margin:auto;
	width:1000px;
}

body {
background-color:#e2e2e2;

}


#animation-statistics {
float:left;
background-color: #111111;
color:ffffff;
width:300px;
height:200px;
overflow-y: scroll;
margin: auto;
margin-top:-300px;
}

.background-canvas-1 {
	background-color:#21bbc1;
	width:300px;
	height:300px;
	margin:auto;
	margin-top:10px;
}

.background-animation-1 {
	width:300px;
	height:300px;
	position:absolute;
	overflow: hidden;

}

.background-animation-1 p {
text-align:center;
font-size:30px;
color:#ffffff;
width:300px;
}

.background-animation-1:hover {

transition: all 0.4s ease;

}



.cloud-1, .cloud-2 {
	position:absolute;
}


#cloud-top {
background-color:#fff;
position: absolute;
top:0px;
width:300px;
height:150px !important;
transition: top 0.4s ease  0.5s;
}

#cloud-bottom {
background-color:#fff;
position: absolute;
top:150px;
width:300px;
height:150px !important;
transition: top 0.4s ease  0.5s;
}


.cloud-1 {
	
	width:300px;
	height:150px;
	left:0px;
	right:0px;
	background-image:url(../images/ico2.png);
   background-position: 35px 0px;
   background-repeat: no-repeat;
   transition: background-position 0.4s ease ;
   z-index: 2;
}

.cloud-2 {
	
	width:300px;
	height:150px;
	left:0px;
	right:0px;
	background-image:url(../images/ico2.png);
   background-position: 35px -150px;
   background-repeat: no-repeat;
   transition: background-position 0.4s ease;
   z-index:2;
}

.cloud-1-event-1 {
	background-position: 55px 125px;
}

.cloud-2-event-1 {
	background-position: 55px -25px;
}