@keyframes moveclouds {
  0% {
    margin-left: 100%; }
  100% {
    margin-left: -100%; } }
@-webkit-keyframes moveclouds {
  0% {
    margin-left: 100%; }
  100% {
    margin-left: -100%; } }
@keyframes moveclouds2 {
  0% {
    margin-left: 100%; }
  50% {
    margin-left: 100%; }
  100% {
    margin-left: -100%; } }
@-webkit-keyframes moveclouds2 {
  0% {
    margin-left: 100%; }
  50% {
    margin-left: 100%; }
  100% {
    margin-left: -100%; } }
.layer {
  height: 100%;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  width: 100%; }
  .layer img {
    max-width: 100%;
    height: 100%; }

.clouds {
  overflow: hidden; }
  .clouds .cloud {
    bottom: 0;
    left: 0;
    position: absolute;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
    width: 100%;
    height: 100%;
    will-change: transform; }
  .clouds .cloud-1 {
    -webkit-animation: moveclouds 25s linear infinite;
    animation: moveclouds 25s linear infinite; }
  .clouds .cloud-2 {
    -webkit-animation: moveclouds 50s linear infinite;
    animation: moveclouds 50s linear infinite; }
  .clouds .cloud-3 {
    -webkit-animation: moveclouds2 35s linear infinite;
    animation: moveclouds2 35s linear infinite; }