body {
		padding:0;margin:0;
		width:100%;height:1000px;
		/*background: transparent url(images/sky.jpg) top left no-repeat;
		background-size: 100% 100%; */
		background:black;
	}
.cloud {
	width: 247px;
	height: 123px;
	position: absolute;
	background: transparent url(images/front_cloud.png) 0 0 no-repeat;
	left: -63px;
	}	
.cloud01 {
	top: 265px;
	z-index: 100;
	/* animation syntax shorthand order: name duration timing-function delay iteration-count direction fill-mode */
	-webkit-animation: drift 25s linear infinite;
	-moz-animation: drift 25s linear infinite;
	-o-animation: drift 25s linear infinite;
	animation: drift 25s linear infinite;
	}
.cloud02 {
	top: 75px;
	z-index: 200;
	-webkit-animation: drift 35s linear 10s infinite backwards;
	-moz-animation: drift 35s linear 10s infinite backwards;
	-o-animation: drift 35s linear 10s infinite backwards;
	animation: drift 35s linear 10s infinite backwards;
	}
	@-webkit-keyframes drift {
		from {-webkit-transform:translateX(-255px);}		
		to {-webkit-transform:translateX(1300px);}
	}		
	@keyframes drift {
		from {transform:translateX(-255px);}		
		to {transform:translateX(1300px);}
	}	
/* Display Sprite ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/	
.displayObject {
	z-index: 50;
	position: absolute;
	width: 64px;
	height: 64px;
	background: transparent url(images/toaster-sprite.gif) 0 0 no-repeat;
	top: 27px;
	left: 939px;
}
.displayObject2 {
	z-index: 500;
	position: absolute;
	width: 64px;
	height: 64px;
	background: transparent url(images/toaster-sprite.gif) 0 0 no-repeat;
	top: 227px;
	left: 939px;
}
/* Animate Sprite ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Create an animation called "flap" using four steps (frames) over 0.4 seconds */
.animate_object1 {
  -webkit-animation: flap 0.4s steps(4) infinite alternate;
  animation: flap 0.4s steps(4) infinite alternate;
}
.animate_object2 {
  -webkit-animation: flap 0.2s steps(4) infinite alternate;
  animation: flap 0.1s steps(4) infinite alternate;
}
@keyframes flap {
  from {-webkit-background-position:  0px; }
  to {-webkit-background-position: -256px; }
  from {background-position:  0px; }
  to {background-position: -256px; }
}
/* Move Obejct only when button is pressed  ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.move{
	-moz-animation: move 5s linear 1s infinite backwards;
	 animation: move 4s linear 1s infinite backwards;
}
@-moz-keyframes move {
from {-moz-transform:translateX(1200px);}		
to {-moz-transform:translateX(-1200px);}
}
@keyframes move {
from {transform:translateX(1200px);}		
to {transform:translateX(-1200px);}
}
.move2{
	-moz-animation: move2 3s linear 3s infinite backwards;
	 animation: move2 3s linear 3s infinite backwards;
}
@-moz-keyframes move2 {
from {-moz-transform:translateX(1000px);}		
to {-moz-transform:translateX(-1000px);}
}
@keyframes move2 {
from {transform:translateX(1000px);}		
to {transform:translateX(-1000px);}
}
/* Title animation ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~*/
.titleAnimation, .titleAnimation:hover{
	 font-size:46px;
	 color:white;
	 -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
	 -webkit-animation-name: bounceInDown; 
    animation-name: bounceInDown;
}
.titleAnimation:hover{
	
}
@-webkit-keyframes bounceInDown { 
   0% { 
       opacity: 0; 
		-webkit-transform:translateX(-2000px);
    } 
    60% { 
        opacity: 1; 
        -webkit-transform: translateY(30px); 
    } 
    80% { 
        -webkit-transform: translateY(-10px); 
    } 
    100% { 
        -webkit-transform: translateY(0); 
    } 
} 

@keyframes bounceInDown { 
    0% { 
        opacity: 0; 
        transform: translateY(-2000px); 
    } 
    60% { 
        opacity: 1; 
        transform: translateY(30px); 
    } 
    80% { 
        transform: translateY(-10px); 
    } 
    100% { 
        transform: translateY(0); 
    } 
}