body {
  padding: 0;
  margin: 0;
}
.animacion{
  position: absolute;
  top:40%;
  left:50%;
  transform: translate(-50%, -50%);
  background-color: #42ac3803;
  padding: 0px 0px 0px 0px; /*margen entre el logo y la animación */
  border-radius: 50%;
  animation: animacion  10s linear infinite;
}

.Container {
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   
}
.MainImage {
 width: 500px;
 height:500px;
 overflow: hidden;
 cursor: pointer;
}

.MainImage img {
 width: 50%;
 transition: .1s;
 
}
.Container:hover .MainImage img {
 transform: rotate(-10deg) scale(1.3);
 filter: blur(2px);
 filter: contrast(80%);
 filter: brightness(.5);
 opacity: .5;
}

/*Toque final*/
.Container:hover .MainText::before,
.Container:hover .MainText::after {
 transform: scale(1,1);
}

.Container:hover .SecText {
 opacity: 1;
}
@keyframes animacion {
  0%{ box-shadow: 0 0 0 0 rgba(31, 219, 31, 0.5), 0 0 0 0 rgba(219, 0, 0, 0.1) ;}
  25%{ box-shadow: 0 0 0 190px rgba(219,0,0, 0), 0 0 0 100px rgba(219, 0, 0,0.1);}
  65%{ box-shadow: 0 0 0 50px rgba(15, 185, 15, 0.5), 0 0 0 50px rgba(219, 0, 0, 0.1);}
  100%{ box-shadow: 0 0 0 30px rgba(219,0,0, 0), 0 0 0 30px rgba(219,0,0, 0.1);}
}