.mariachi_svg {
  width: 600px;
  height: 600px;
  border-radius: 50%;
  background: #00000067;
  position: relative;
}

.animation_mariachi_data {
  width: 500px;
  height: 500px;
}

.mariachi_candles{
  position: absolute;
  bottom: 67px;
  left: 12px;
}

.text_animation_mariachi {
  height: 200px;
  background: rgba(245, 244, 242, 0.24);
}
p.text_animation_mariachi {
  text-align: center;
  padding: 50px;
}
.title_animation_mariachi {
  position: relative;
  width: 300px;
}
.title_animation_mariachi h2 {
  font-family: "Great Vibes", cursive;
  color: #fff;
  font-size: 3em;
  line-height: 0.9;
}
.title_animation_mariachi span {
  font-family: "Rouge Script", cursive;
  font-size: 3em;
  font-weight: 400;
}

.title_animation_mariachi h2.de{
top: 126px;
}

svg.mariachi {
  width: 500px;
  position: absolute;
}
#maracas,
#bolitas {
  animation: maracas 2s ease 0s infinite normal forwards;
}
@keyframes maracas {
  0%,
  100% {
    transform: translateX(0);
  }

  10%,
  30%,
  50%,
  70% {
    transform: translateX(-10px);
  }

  20%,
  40%,
  60% {
    transform: translateX(10px);
  }

  80% {
    transform: translateX(8px);
  }

  90% {
    transform: translateX(-8px);
  }
}
#ojoizq,
#ojoder {
  animation: ojosmariachi 1.3s ease-out infinite alternate-reverse forwards;
  transform-origin: center;
  transform-box: fill-box;
}
@keyframes ojosmariachi {
  0% {
    transform: rotate(-90deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
#manoder {
  animation: manomariachi 0.5s ease 0s infinite alternate-reverse;
  transform-origin: bottom;
  transform-box: fill-box;
}
@keyframes manomariachi {
  0% {
    transform: rotate(0);
  }

  100% {
    transform: rotate(30deg);
  }
}
#manoizq {
  animation: manomariachi2 0.5s ease 0s infinite alternate-reverse;
  transform-box: fill-box;
}
@keyframes manomariachi2 {
  0% {
    transform: rotate(0);
    transform-origin: left;
  }

  100% {
    transform: rotate(-15deg);
    transform-origin: left;
  }
}
#cuerdas {
  animation: cuerdas 2s ease 0s infinite normal forwards;
}
@keyframes cuerdas {
  0% {
    transform: translate(0);
  }

  20% {
    transform: translate(2px, -2px);
  }

  40% {
    transform: translate(2px, 2px);
  }

  60% {
    transform: translate(-2px, 2px);
  }

  80% {
    transform: translate(-2px, -2px);
  }

  100% {
    transform: translate(0);
  }
}
#bigote {
  animation: bigote 5s ease 0s infinite normal forwards;
}
@keyframes bigote {
  0%,
  100% {
    transform: rotate(0deg);
    transform-origin: 50% 50%;
  }

  10% {
    transform: rotate(8deg);
  }

  20%,
  40%,
  60% {
    transform: rotate(-10deg);
  }

  30%,
  50%,
  70% {
    transform: rotate(10deg);
  }

  80% {
    transform: rotate(-8deg);
  }

  90% {
    transform: rotate(8deg);
  }
}
#cabeza,
#sombrero,
#basesombrero {
  animation: cabezamariachi 2s ease 0s infinite normal forwards;
  transform-box: fill-box;
  transform-origin: 50% 50%;
}

@keyframes cabezamariachi {
  0%,
  100% {
    transform: translateX(0%);
  }

  15% {
    transform: translateX(-5px) rotate(-6deg);
  }

  30% {
    transform: translateX(5px) rotate(6deg);
  }

  45% {
    transform: translateX(-5px) rotate(-3.6deg);
  }

  60% {
    transform: translateX(9px) rotate(2.4deg);
  }

  75% {
    transform: translateX(-6px) rotate(-1.2deg);
  }
}
.rosas_img {
  position: absolute;
  bottom: 113px;
  left: 33px;
}

@media screen and (max-width: 500px) {
  .animation_marachi {
    flex-direction: column;
    height: 100vh;
  }
  .animation_mariachi_data {
    position: absolute;
    top: 0;
    padding: 25px;
  }
 
  }
  .rosas_img {
    width: 450px;
    left: 32px;
  }
}