html,
body,
#bubbles {
  height: 100%
}

body {
  overflow: hidden
}

#bubbles {
  padding: 100px 0
}

.bubble {
  width: 60px;
  height: 60px;
  background: #ffb200;
  border-radius: 200px;
  -moz-border-radius: 200px;
  -webkit-border-radius: 200px;
  position: absolute;
}

.x1 {
  -webkit-transform: scale(0.9);
  -moz-transform: scale(0.9);
  transform: scale(0.9);
  opacity: 0.2;
  -webkit-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -moz-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -o-animation: moveclouds 15s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x2 {
  left: 30%;
  -webkit-transform: scale(0.6);
  -moz-transform: scale(0.6);
  transform: scale(0.6);
  opacity: 0.5;
  -webkit-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
  -moz-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
  -o-animation: moveclouds 25s linear infinite, sideWays 5s ease-in-out infinite alternate;
}

.x3 {
  left: 50%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.3;
  -webkit-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -moz-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
  -o-animation: moveclouds 20s linear infinite, sideWays 4s ease-in-out infinite alternate;
}

.x4 {
  right: 30%;
  -webkit-transform: scale(0.75);
  -moz-transform: scale(0.75);
  transform: scale(0.75);
  opacity: 0.35;
  -webkit-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -moz-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
  -o-animation: moveclouds 18s linear infinite, sideWays 2s ease-in-out infinite alternate;
}

.x5 {
  right: 42%;
  -webkit-transform: scale(0.8);
  -moz-transform: scale(0.8);
  transform: scale(0.8);
  opacity: 0.3;
  -webkit-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
  -moz-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
  -o-animation: moveclouds 7s linear infinite, sideWays 1s ease-in-out infinite alternate;
}

@-webkit-keyframes moveclouds {
  0% {
    top: 500px;
  }

  100% {
    top: -500px;
  }
}

@-webkit-keyframes sideWays {
  0% {
    margin-left: 0px;
  }

  100% {
    margin-left: 50px;
  }
}

@-moz-keyframes moveclouds {
  0% {
    top: 500px;
  }

  100% {
    top: -500px;
  }
}

@-moz-keyframes sideWays {
  0% {
    margin-left: 0px;
  }

  100% {
    margin-left: 50px;
  }
}

@-o-keyframes moveclouds {
  0% {
    top: 500px;
  }

  100% {
    top: -500px;
  }
}

@-o-keyframes sideWays {
  0% {
    margin-left: 0px;
  }

  100% {
    margin-left: 50px;
  }
}