.posRel {
  position: relative;
  width: 97vw;
}
.animatedBackground {
  z-index: -1;
  width: 100%;
  height: 100vh;
  position: fixed;
  display: flex;
  justify-content: space-around;
  flex-wrap: wrap;
  position: absolute;
  /* overflow: hidden; */
/*   bottom: -150%; */
}
.animatedBackground2 {
  z-index: -1;
  width: 100%;
  height: 100vh;
  position: fixed;
  display: flex;
  justify-content: space-around;
}
.animatedBackground3 {
  z-index: -1;
  width: 100%;
  height: 100vh;
  position: fixed;
  display: flex;
  justify-content: space-around;
}

/* yellow small */
#bubbleOne {
  animation-delay: 2.5s;
  left: 3%;
  margin-top: 20%;
}
/* teal */
#bubbleTwo {
  animation-delay: 2s;
  right: 0%;
  margin-top: 12%;
}
/* med green */
#bubbleThree {
  animation-delay: 1s;
  right: 15%;
}
/* red */
#bubbleFour {
  animation-delay: 0.4s;
  left: 11%;
  margin-top: 50%;
}
/* yellow big */
#bubbleFive {
  animation-delay: 0.2s;
  right: 0;
  margin-top: 15%;
}

/* teal */
#bubbleSix {
  animation-delay: 5.7s;
  left: -1%;
  bottom: 0;
}

/* med green */
#bubbleSeven {
  animation-delay: 5.5s;
  left: 0%;
  margin-top: 20%;
}

/* small red */
#bubbleEight {
  animation-delay: 5.3s;
  right: -2%;
  bottom: -6%;
}
/* small yellow */
#bubbleNine {
  animation-delay: 4.1s;
  right: 2%;
  bottom: 0;
}
/* med yellow */
#bubbleTen {
  animation-delay: 5.4s;
  left: 1%;
  margin-top: 75%;
}


.animatedImage {
  position: absolute;
  overflow-x: hidden;
  width: calc(100% / 6);
  -webkit-animation: floatUpAnimation 240s 
    infinite;
  animation: floatUpAnimation 240s infinite;
}

.animatedImage2 {
   position: absolute;
  overflow-x: hidden;
  width: calc(100% / 6);
  -webkit-animation: floatUpAnimation2 240s infinite;
  animation: floatUpAnimation2 240s infinite;
}

.animatedImage3 {
   position: absolute;
  overflow-x: hidden;
  width: calc(100% / 6);
  -webkit-animation: floatUpAnimation2 240s infinite;
  animation: floatUpAnimation2 240s infinite;
}


.bubbleOne {
  width: 75px;
  height: 75px;
  border-radius: 100%;
  background: transparent;
  border: 8px solid #FBC93C;
  margin-left: -75px;
  }
.bubbleOne2 {
  width: 50px;
  height: 50px;
  border-radius: 100%;
  background: transparent;
  border: 5px solid #A4CE60;  
  }
.bubbleTwo {
  width: 100px;
  height: 100px;
  border-radius: 100%;
  background: transparent;
  border: 10px solid #22B5B0;

  }
.bubbleThree {
  width: 150px;
  height: 150px;
  border-radius: 100%;
  background: transparent;
  border: 15px solid #A4CE60;
  }
.bubbleFour {
  width: 200px;
  height: 200px;
  border-radius: 100%;
  background: transparent;
  border: 15px solid #EA5547;
  
  }
.bubbleFour2 {
  width: 125px;
  height: 125px;
  border-radius: 100%;
  background: transparent;
  border: 15px solid #EA5547;
  }
.bubbleFive {
  width: 130px;
  height: 130px;
  border-radius: 100%;
  background: transparent;
  border: 10px solid #FBC93C;
  }
.bubbleFive2 {
  width: 175px;
  height: 175px;
  border-radius: 100%;
  background: transparent;
  border: 15px solid #FBC93C;
  }
.bubbleSix {
  width: 90px;
  height: 90px;
  border-radius: 100%;
  background: transparent;
  border: 10px solid #A4CE60;
 
  }


@keyframes floatUpAnimation {
  from	{
    transform: translateY(0px)
  }
  to {		
    transform: translateY(-1000px)
  }
}

@keyframes floatUpAnimation2 {
  from	{
    transform: translateY(0px)
  }
  to {		
    transform: translateY(-1000px)
  }
}

@media(max-width: 768px) {

  /*
  .bubbleOne ,
  .bubbleOne2 ,
  .bubbleTwo ,
  .bubbleFive ,
  .bubbleSix
  */
  .bubbleThree ,
  .bubbleFour ,
  .bubbleFour2 ,
  .bubbleFive2  {
    display: none;
  }
}