/**********************************************************************
 * Open source codes from Mark Qian
 *
 * You can get more at
 * 
 * http://www.markqian.com
 * 
 * Licensed under the MIT and GPL terms
 * To use it on other terms please contact us
 *
 * Copyright(c) 2013 Mark Qian [ markqian@hotmail.com ] 
 * 
 * 
 *  
 ***********************************************************************/

#cloud1 {
   position:absolute;
   left:-2000px;
    top:50px;
    width: 269px;
    height: 88px;
   z-index:0;
   -webkit-animation-name: cloud_run;
   -webkit-animation-duration: 260s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 0;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: cloud_run;
   animation-duration: 260s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: cloud_run;
   -moz-animation-duration: 260s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;	
   -moz-animation-direction: normal;
   -moz-animation-delay: 0;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: cloud_run;
   -o-animation-duration: 260s;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;	
   -o-animation-direction: normal;
   -o-animation-delay: 0;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: cloud_run;
   -ms-animation-duration: 260s;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}

#cloud2 {
   position:absolute;
   left:-2000px;
    top:100px;
    width: 169px;
    height: 88px;
   z-index:0;
   -webkit-animation-name: cloud_run;
   -webkit-animation-duration: 290s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 0;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: cloud_run;
   animation-duration: 290s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: cloud_run;
   -moz-animation-duration: 290s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;	
   -moz-animation-direction: normal;
   -moz-animation-delay:0;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: cloud_run;
   -o-animation-duration: 290s;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;	
   -o-animation-direction: normal;
   -o-animation-delay: 0;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: cloud_run;
   -ms-animation-duration: 290s;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}


#cloud3 {
   position:absolute;
   left:-2000px
    top:150px;
    width: 120px;
    height: 60px;;
   z-index:0;
   -webkit-animation-name: cloud_run;
   -webkit-animation-duration: 210s;
   -webkit-animation-timing-function: linear;
   -webkit-animation-iteration-count: infinite;	
   -webkit-animation-direction: normal;
   -webkit-animation-delay: 0;
   -webkit-animation-play-state: running;
   -webkit-animation-fill-mode: forwards;
   
    animation-name: cloud_run;
   animation-duration: 210s;
   animation-timing-function: linear;
   animation-iteration-count: infinite;	
   animation-direction: normal;
   animation-delay: 0;
   animation-play-state: running;
   animation-fill-mode: forwards;
   
  
   -moz-animation-name: cloud_run;
   -moz-animation-duration: 210s;
   -moz-animation-timing-function: linear;
   -moz-animation-iteration-count: infinite;	
   -moz-animation-direction: normal;
   -moz-animation-delay:0;
   -moz-animation-play-state: running;
   -moz-animation-fill-mode: forwards;
   
   -o-animation-name: cloud_run;
   -o-animation-duration: 210s;
   -o-animation-timing-function: linear;
   -o-animation-iteration-count: infinite;	
   -o-animation-direction: normal;
   -o-animation-delay: 0;
   -o-animation-play-state: running;
   -o-animation-fill-mode: forwards;
   
   -ms-animation-name: cloud_run;
   -ms-animation-duration: 210s;
   -ms-animation-timing-function: linear;
   -ms-animation-iteration-count: infinite;	
   -ms-animation-direction: normal;
   -ms-animation-delay: 0;
   -ms-animation-play-state: running;
   -ms-animation-fill-mode: forwards;
}

@-webkit-keyframes cloud_run {
  0% {
    left: -300px;

  }
  
  100% {
    left: 2200px;
     width: 30px;
    height: 10px;
  }
  
  
}
@keyframes cloud_run {
  0% {
    left: -300px;

  }
  
  100% {
    left: 2200px;
     width: 30px;
    height: 10px;
  }
  
  
}
@-moz-keyframes cloud_run {
  0% {
    left: -300px;

  }
  
  100% {
    left: 2200px;
     width: 30px;
    height: 10px;
  }
  
  
}
@-o-keyframes cloud_run {
  0% {
    left: -300px;

  }
  
  100% {
    left: 2200px;
     width: 30px;
    height: 10px;
  }
  
  
}
@-ms-keyframes cloud_run {
  0% {
    left: -300px;

  }
  
  100% {
    left: 2200px;
     width: 30px;
    height: 10px;
  }
  
  
}