html, body {
  height:100%;
  width:100%;
  background:url('../img/bg_login_sky.jpg') no-repeat center center;
  -webkit-background-size:cover;
  -moz-background-size:cover;
  background-size:cover;
  -o-background-size:cover;
  overflow:hidden;


}

div, body {
  margin:0;
  padding:0;
}

div.cloud {
  height:163px;
  width:500px;
  position:absolute;
}

.x1 {
  top:5%;
  background:url('../img/cloud_small_02.png') no-repeat;
  -webkit-animation:moveclouds 60s linear infinite;
  -moz-animation:moveclouds 60s linear infinite;
  -o-animation:moveclouds 60s linear infinite;
}

.x2 {
  top:20%;
  background:url('../img/cloud_small_01.png') no-repeat;
  -webkit-animation:moveclouds 100s linear infinite;
  -moz-animation:moveclouds 100s linear infinite;
  -o-animation:moveclouds 100s linear infinite;
}

@media (max-width:991px) {
  .x2 {
    top:20%;
    background:url('../img/cloud_small_01.png') no-repeat;
    -webkit-animation:moveclouds 70s linear infinite;
    -moz-animation:moveclouds 70s linear infinite;
    -o-animation:moveclouds 70s linear infinite;
  }
}

@media (max-width:991px) {
  .x1 {
    -webkit-animation:moveclouds 30s linear infinite;
    -moz-animation:moveclouds 30s linear infinite;
    -o-animation:moveclouds 30s linear infinite;
  }
}

@-webkit-keyframes moveclouds {
  0% {margin-left:100%;
  }
	100% {margin-left:-600px;
}

@-moz-keyframes moveclouds {
  0% {margin-left:100%;
  }
	100% {margin-left:-600px;
}

@-o-keyframes moveclouds {
  0% {margin-left:100%;
  }
	100% {margin-left:-600px;
}

img#logo {
  z-index:1000;
}