@media screen and (min-width: 48rem) {

.bubble-container {
  position: absolute;
  top: 0;
  left: 0;
  overflow: hidden;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.bubble {
  display: inline-block;
  position: absolute;
  border-radius: 50%;
  background-color: #EE7000;
  opacity: 0.15;
}

.bubble--20 {
  width: 10px;
  height: 10px;
}

.bubble--30 {
  width: 15px;
  height: 15px;
}

.bubble--40 {
  width: 20px;
  height: 20px;
}

.bubble--50 {
  width: 25px;
  height: 25px;
}

.bubble--60 {
  width: 30px;
  height: 30px;
}

.bubble--80 {
  width: 40px;
  height: 40px;
}

.bubble--100 {
  width: 50px;
  height: 50px;
}

.bubble--125 {
  width: 62.5px;
  height: 62.5px;
}

.bubble--150 {
  width: 75px;
  height: 75px;
}

.bubble--200 {
  width: 100px;
  height: 100px;
}

.bubble--250 {
  width: 125px;
  height: 125px;
}

.bubble--300 {
  width: 150px;
  height: 150px;
}

.bubble--350 {
  width: 175px;
  height: 175px;
}

.bubble-1 .bubble:nth-child(1) {
  top: 160px;
  left: 90px;
}

.bubble-1 .bubble:nth-child(2) {
  top: 270px;
  left: 300px;
}

.bubble-1 .bubble:nth-child(3) {
  top: 740px;
  right: 85px;
}

.bubble-1 .bubble:nth-child(4) {
  top: 105px;
  left: 40px;
}

.bubble-1 .bubble:nth-child(5) {
  top: 740px;
  right: 160px;
}

.bubble-1 .bubble:nth-child(6) {
  top: 880px;
  left: 450px;
}

.bubble-1 .bubble:nth-child(7) {
  top: 1000px;
  left: 250px;
}

.bubble-1 .bubble:nth-child(8) {
  top: 1500px;
  left: 1050px;
}

.bubble-2 .bubble:nth-child(1) {
  top: 800px;
  left: 235px;
}

.bubble-2 .bubble:nth-child(2) {
  top: 100px;
  left: 55px;
}

.bubble-2 .bubble:nth-child(3) {
  top: 110px;
  left: 305px;
}

.bubble-2 .bubble:nth-child(4) {
  top: 505px;
  left: 70px;
}

.bubble-2 .bubble:nth-child(5) {
  top: 165px;
  left: 270px;
}

.bubble-2 .bubble:nth-child(6) {
  top: 150px;
  right: 240px;
}

.bubble-2 .bubble:nth-child(7) {
  top: 550px;
  left: 140px;
}

.bubble-2 .bubble:nth-child(8) {
  top: 1070px;
  right: 507px;
}

.bubble-3 .bubble:nth-child(1) {
  top: 800px;
  left: 235px;
}

.bubble-3 .bubble:nth-child(2) {
  top: 100px;
  left: 55px;
}

.bubble-3 .bubble:nth-child(3) {
  top: 110px;
  left: 580px;
}

.bubble-3 .bubble:nth-child(4) {
  top: 700px;
  left: 804px;
}

.bubble-3 .bubble:nth-child(5) {
  top: 280px;
  right: 30px;
}

.bubble-3 .bubble:nth-child(6) {
  top: 1150px;
  right: 240px;
}

.bubble-3 .bubble:nth-child(7) {
  top: 290px;
  right: 105px;
}

.bubble-3 .bubble:nth-child(8) {
  top: 300px;
  left: 745px;
}

.bubble-3 .bubble:nth-child(9) {
  top: 2205px;
  right: 460px;
}

.bubble-3 .bubble:nth-child(10) {
  top: 860px;
  left: 130px;
}

}


@media screen and (min-width: 30rem) {
  .bubble--20 {
    width: 20px;
    height: 20px;
  }

  .bubble--30 {
    width: 30px;
    height: 30px;
  }

  .bubble--40 {
    width: 40px;
    height: 40px;
  }

  .bubble--50 {
    width: 50px;
    height: 50px;
  }

  .bubble--60 {
    width: 60px;
    height: 60px;
  }

  .bubble--80 {
    width: 80px;
    height: 80px;
  }

  .bubble--100 {
    width: 100px;
    height: 100px;
  }

  .bubble--125 {
    width: 125px;
    height: 125px;
  }

  .bubble--150 {
    width: 150px;
    height: 150px;
  }

.bubble--200 {
  width: 200px;
  height: 200px;
}

.bubble--250 {
  width: 250px;
  height: 250px;
}

.bubble--300 {
  width: 300px;
  height: 300px;
}

.bubble--350 {
  width: 350px;
  height: 350px;
}

  .bubble-wrapper {
    position: absolute;
    width: 1440px;
    top: 0;
    left: 50%;
    -webkit-transform: translateX(-50%);
            transform: translateX(-50%);
    z-index: -1;
  }

.bubble-1 .bubble:nth-child(1) {
    top: 180px;
    left: 900px;
  }

.bubble-1 .bubble:nth-child(2) {
    top: 360px;
    left: 1320px;
  }

.bubble-1 .bubble:nth-child(3) {
    top: 340px;
    left: 1350px;
  }

.bubble-1 .bubble:nth-child(4) {
    top: 275px;
    left: 90px;
  }

.bubble-1 .bubble:nth-child(5) {
    top: 390px;
    left: 70px;
  }

.bubble-1 .bubble:nth-child(6) {
    top: 210px;
    left: 113px;
  }

.bubble-2 .bubble:nth-child(1) {
    top: 140px;
    left: 60px;
  }

.bubble-2 .bubble:nth-child(2) {
    top: 160px;
    left: 940px;
  }

.bubble-2 .bubble:nth-child(3) {
    top: 200px;
    left: 500px;
  }

.bubble-2 .bubble:nth-child(4) {
    top: 535px;
    left: 850px;
  }

.bubble-2 .bubble:nth-child(5) {
    top: 680px;
    left: 935px;
  }

.bubble-2 .bubble:nth-child(6) {
    top: 220px;
    left: 425px;
  }

.bubble-2 .bubble:nth-child(7) {
    top: 270px;
    left: 850px;
  }

.bubble-2 .bubble:nth-child(8) {
    top: 850px;
    left: 630px;
  }

.bubble-3 .bubble:nth-child(1) {
    top: 1056px;
    left: 250px;
  }

.bubble-3  .bubble:nth-child(2) {
    top: 145px;
    left: 825px;
  }

.bubble-3  .bubble:nth-child(3) {
    top: 180px;
    left: 500px;
  }

 .bubble-3 .bubble:nth-child(4) {
    top: 700px;
    left: 604px;
  }

.bubble-3  .bubble:nth-child(5) {
    top: 280px;
    left: 935px;
  }

.bubble-3  .bubble:nth-child(6) {
    top: 745px;
    left: 745px;
  }

.bubble-3  .bubble:nth-child(7) {
    top: 320px;
    left: 200px;
  }

.bubble-3  .bubble:nth-child(8) {
    top: 300px;
    left: 745px;
  }

.bubble-3  .bubble:nth-child(9) {
    top: 885px;
    left: 140;
  }

.bubble-3  .bubble:nth-child(10) {
    top: 860px;
    left: 630px;
  }
  
}