.particles {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  z-index: -99;
}
  .particles li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-animation: animate 25s linear infinite;
    animation: animate 25s linear infinite;
    bottom: -10px;
}
    .particles li:nth-child(1) {
      left: 25%;
      width: 20px;
      height: 20px;
      border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      background: #FFCA06;
      opacity:0.5;
    }
    .particles  li:nth-child(2) {
      left: 10%;
      width: 4px;
      height: 4px;
     border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
      -webkit-animation-duration: 12s;
      animation-duration: 12s;
      background: #FFCA06;
      opacity:0.5;
    }
     .particles li:nth-child(3) {
      left: 70%;
      width: 6px;
      height: 6px;
     border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
      background: #FFCA06;
      opacity:0.5;
    }

     .particles li:nth-child(4) {
      left: 40%;
      width: 10px;
      height: 10px;
     border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-duration: 18s;
      animation-duration: 18s;
      background: #FFCA06;
      opacity:0.5;
    }

     .particles li:nth-child(5) {
      left: 65%;
      width: 5px;
      height: 5px;
      border: 1px solid #787878;
      border-radius: 100%;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      background: #787878;
      opacity:0.5;
    }

     .particles li:nth-child(6) {
      left: 75%;
      width: 5px;
      height: 5px;
    border: 1px solid #787878;
      border-radius: 100%;
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
      background: #787878;
      opacity:0.5;
    }

     .particles li:nth-child(7) {
      left: 35%;
      width: 10px;
      height: 10px;
      border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 7s;
      animation-delay: 7s;
      background: #ffe066;
    }

.particles2 {
  position: absolute;
  top: -455px;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  margin: 0px;
  padding: 0px;
  z-index: 99;
}
  .particles2 li {
    position: absolute;
    display: block;
    list-style: none;
    width: 20px;
    height: 20px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-animation: animate 25s linear infinite;
    animation: animate 25s linear infinite;
    bottom: 0px;
}
    .particles2 li:nth-child(1) {
      left: 25%;
      width: 20px;
      height: 20px;
      border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      background: #FFCA06;
      opacity:0.5;
    }
    .particles2  li:nth-child(2) {
      left: 10%;
      width: 4px;
      height: 4px;
     border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 2s;
      animation-delay: 2s;
      -webkit-animation-duration: 12s;
      animation-duration: 12s;
      background: #FFCA06;
      opacity:0.5;
    }
     .particles2 li:nth-child(3) {
      left: 70%;
      width: 6px;
      height: 6px;
     border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 4s;
      animation-delay: 4s;
      background: #FFCA06;
      opacity:0.5;
    }

     .particles2 li:nth-child(4) {
      left: 40%;
      width: 10px;
      height: 10px;
     border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      -webkit-animation-duration: 18s;
      animation-duration: 18s;
      background: #FFCA06;
      opacity:0.5;
    }

     .particles2 li:nth-child(5) {
      left: 65%;
      width: 5px;
      height: 5px;
      border: 1px solid #787878;
      border-radius: 100%;
      -webkit-animation-delay: 0s;
      animation-delay: 0s;
      background: #787878;
      opacity:0.5;
    }

     .particles2 li:nth-child(6) {
      left: 75%;
      width: 5px;
      height: 5px;
    border: 1px solid #787878;
      border-radius: 100%;
      -webkit-animation-delay: 3s;
      animation-delay: 3s;
      background: #787878;
      opacity:0.5;
    }

     .particles2 li:nth-child(7) {
      left: 35%;
      width: 10px;
      height: 10px;
      border: 1px solid #FFCA06;
      border-radius: 100%;
      -webkit-animation-delay: 7s;
      animation-delay: 7s;
      background: #ffe066;
    }
@-webkit-keyframes animate {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 0.3;
    border-radius: 100%;
  }
  100% {
    -webkit-transform: translateY(-1000px) rotate(720deg);
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 100%;
  }
}

@keyframes animate {
  0% {
    -webkit-transform: translateY(0) rotate(0deg);
    transform: translateY(0) rotate(0deg);
    opacity: 0.3;
    border-radius: 100%;
  }
  100% {
    -webkit-transform: translateY(-1000px) rotate(720deg);
    transform: translateY(-1000px) rotate(720deg);
    opacity: 0;
    border-radius: 100%;
  }
}