/*plop*/

:root {
  --plop-delay: 2.5s;
  --plop-stagger:0.5s;
}



/*plop1*/
#plop-container1{
	height: 29%;
	width: calc(29%/8*4.5);
	top: 28%;
  left: 46%;
  --img-size: 1.2;
}

#circleone1{
	animation-delay: calc(var(--plop-delay) + 0.5s);
}

#circletwo1{
	animation-delay: calc(var(--plop-delay) + 0.6s);
}

.ray1{
	animation-delay: calc(var(--plop-delay) + 0.75s);
}
#img1{
	animation-delay: calc(var(--plop-delay) + 0.6s);
}




/*plop2*/
#plop-container2{
	height: 18%;
	width: calc(18%/8*4.5);
	top: 43.5%;
  left: 32%;
}

#circleone2{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger) + 0.5s);
}

#circletwo2{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger) + 0.6s);
}

.ray2{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger) + 0.75s);
}

#img2{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger) + 0.6s);
}


/*plop3*/
#plop-container3{
	height: 18%;
	width: calc(18%/8*4.5);
	top: 27.5%;
  left: 31.5%;
}

#circleone3{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*2 + 0.5s);
}

#circletwo3{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*2 + 0.6s);
}

.ray3{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*2 + 0.75s);
}

#img3{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*2 + 0.6s);
}

/*plop4*/
#plop-container4{
	height: 13%;
	width: calc(13%/8*4.5);
		top: 35%;
        left: 85%;
}

#circleone4{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.5s);
}

#circletwo4{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.6s);
}

.ray4{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.75s);
}

#img4{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.6s);
}

/*plop5*/
#plop-container5{
  height: 25%;
	width: calc(25%/8*4.5);
	top: 27%;
  left: 12%;
}

#circleone5{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.5s);
}

#circletwo5{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.6s);
}

.ray5{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.75s);
}

#img5{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.6s);
}

/*plop6*/
#plop-container6{
  height: 15%;
	width: calc(15%/8*4.5);
	top: 50%;
  left: 63%;
  --img-size: 1.5;
}

#circleone6{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.5s);
}

#circletwo6{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.6s);
}

.ray6{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.75s);
}

#img6{
	animation-delay: calc(var(--plop-delay) + var(--plop-stagger)*3 + 0.6s);
}



/*plop end*/