.sky {
    height: 160px;
    background: #007fd5;
    position: relative;
    overflow: hidden;
    -webkit-animation: sky_background 50s ease-out infinite;
    -moz-animation: sky_background 50s ease-out infinite;
    -o-animation: sky_background 50s ease-out infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0)
  }
  
  
  .clouds_one {
    margin-top: 55px;
    background: url(/images-city/cloud2.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 100px;
    width: 300%;
    -webkit-animation: cloud_one 200s linear infinite;
    -moz-animation: cloud_one 200s linear infinite;
    -o-animation: cloud_one 200s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0)
  }
  
  @-webkit-keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }
  
  @-moz-keyframes sky_background {
    0% {
      background: #007fd5;
      color: #007fd5
    }
    50% {
      background: #000;
      color: #a3d9ff
    }
    100% {
      background: #007fd5;
      color: #007fd5
    }
  }
  
  @-moz-keyframes cloud_one {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }


  .clouds_two {
    margin-top: 55px;
    background: url(/images-city/cloud1.png);
    position: absolute;
    left: 0;
    top: 0;
    height: 110px;
    width: 300%;
    -webkit-animation: cloud_one 100s linear infinite;
    -moz-animation: cloud_one 100s linear infinite;
    -o-animation: cloud_one 100s linear infinite;
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
    -o-transform: translate3d(0, 0, 0)
  }
  
  @-webkit-keyframes cloud_two {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }

  @-moz-keyframes cloud_two {
    0% {
      left: 0
    }
    100% {
      left: -200%
    }
  }