.plop-container {
  --img-size: 1;
	position: absolute;

  transform: rotate(35deg);

  width: 4.5%;
  height: 8%;
  cursor: initial;
}

.plop-container:focus{
  outline: none;
}


	.circle{

position: absolute;

		top: 50%;
        left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);

  		opacity: 0;
	  width: 12%;
      height: 12%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      border-style:solid;
      border-color: white;
      border-width: 2%;

  animation-name: circle;
  animation-duration: 0.3s;
  animation-timing-function: ease-out;
  animation-fill-mode: backwards;
  
	}

	.circleone{
		animation-delay:0.1s;
	}

	.circletwo{

      border-width: 1%;


  animation-delay:0.2s;
	}

@keyframes circle {
  0% {opacity:0; width: 12%; height: 12%;}
  75% {opacity:1; width: 40%; height: 40%;}
  100% {opacity:0; width: 70%; height: 70%;}
}

.ray{
			top: 50%;
        left:50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);


position: absolute;

  		opacity: 0;
	  width: 4%;
      height: 1%;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 40%;
      border-style:solid;
      border-color: white;
      background-color: white;
      border-width: 3%;

        animation-duration: 0.3s;
  animation-timing-function: ease-in;
  animation-delay:0.3s;
  animation-fill-mode: backwards;

}

.rayone{animation-name: rayone;}
@keyframes rayone {
  0% {opacity:0; left: 65%; width: 0;}
  50% {opacity:1; left: 80%; width: 2.5%;}
  100% {opacity:0; left: 100%; width: 0;}
}

.raytwo{animation-name: raytwo;}
@keyframes raytwo {
  0% {opacity:0; left: 35%; width: 0;}
  50% {opacity:1; left: 20%; width: 2.5%;}
  100% {opacity:0; left: 0%; width: 0;}
}

.raythree{ 
	transform:  translate(-50%, -50%) rotate(90deg);
	animation-name: raythree;
  }
@keyframes raythree {
  0% {opacity:0; top: 35%; width: 0;}
  50% {opacity:1; top: 20%; width: 2.5%;}
  100% {opacity:0; top: 0%; width: 0;}
}

.rayfour{ 
	transform: translate(-50%, -50%) rotate(90deg);
	animation-name: rayfour;
  }
@keyframes rayfour {
  0% {opacity:0; top: 65%; width: 0;}
  50% {opacity:1; top: 80%; width: 2.5%;}
  100% {opacity:0; top: 100%; width: 0;}
}



.img{
width:50%;


position: absolute;

		top: 50%;
        left: 50%;
  -ms-transform: translate(-50%, -50%) rotate(-35deg) scale(var(--img-size));
  transform: translate(-50%, -50%) rotate(-35deg) scale(var(--img-size));

      visibility: hidden;
  		opacity: 0;


  		        animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(.3,1.5,.34,1.05);
  animation-delay:0.3s;
  animation-name: img;
  animation-fill-mode: forwards;

}
@keyframes img {
  from {visibility:visible; opacity:0; width: 20%;}
  to {visibility:visible; opacity:1;width: 50%;}
}