/* LOGO SVG */

.logosvg {
  width: 15rem;
  margin: 0 auto;

  animation: aparecer 2s ease-in-out;
  transition: opacity 1s ease-in-out;
  animation: giraTuto 5s linear 2;
}
.logosvg:hover {
  opacity: 0.3;
}
.logo__s {
  fill: #222222;
  /* opacity: 0; */
  animation: aparecer 2s ease-in-out 2s;
}

.logo__v {
  fill: #aca59b;

  animation: aparecer 2s ease-in-out 4s;
}

.logo__o {
  fill: #92a5d5;
  animation: aparecer 2s ease-in-out;
}
@keyframes aparecer {
  0%,
  100% {
    opacity: 100%;
  }
  50% {
    opacity: 5%;
  }
}
/* aparecer girando */

@keyframes giraTuto {
  0%,
  100% {
    margin-left: 20%;
    transform: rotate(0deg);
  }
  50% {
    margin-left: 70%;
    transform: rotate(180deg);
  }
}

/* FIN LOGO SVG */
/* RESPONSIVE */
@media (max-width: 800px) {
  .logosvg {
    animation: giraTuto 5s linear 0;
  }
}