.animate-logo {
    animation-name: rotation;
    animation-duration: 5s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes rotation {
    0% {
      transform: rotate(0deg);
    }
    20% {
        transform: rotate(360deg) scale(1.05);
    }
    40% {
      transform: rotate(360deg) scale(1.0);
    }
    100% {
      transform: rotate(360deg);
    }
  }

.animacion-nav-logo {
    animation-name: saltos;
    animation-duration: 2s;
    animation-iteration-count: infinite;
    animation-timing-function: ease-in-out;
}

@keyframes saltos {
  /* 0% {
    transform: translate(0, 0px);
  }
  25% {
    transform: translate(0, -10px);
  }
  50% {
    transform: translate(0, 0px);
  }
  100% {
    transform: translate(0, 0px);
  } */
  0% {
    transform: scale(1.0);
    border-radius: 4%;
  }
  25% {
    transform: scale(1.08);
    border-radius: 4%;
  }
  50% {
    transform: scale(1.0);
    border-radius: 4%;
  }
  100% {
    transform: scale(1.0);
    border-radius: 4%;
  }
}

/*Animación texto inicial*/
.l-slide {
  position: relative;
  display: inline-block;
  font-size: 100px;
  color: #ffffff;
}

.l-slide:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  font-weight: 500;
  color: #FFF;
  animation: fill-1 10s infinite 1s;
}

@keyframes fill-1 {
  0% {
    width: 0%;
  }

  10% {
    width: 100%;
  }

  50% {
    width: 100%;
  }

  60% {
    width: 0%;
  }

  100% {
    width: 0%;
  }
}

.l-slide-2 {
  position: relative;
  display: inline-block;
  font-size: 100px;
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
  color: #ffffff;
}

.l-slide-2:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd;
  color: #29d0fd;
  animation: fill-1 10s infinite 1.7s;
}

.a-slide {
  position: relative;
  display: inline-block;
  font-size: 100px;
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
  color: #ffffff;
}

.a-slide:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd;
  color: #29d0fd;
  animation: fill-1 10s infinite 2.0s;
}

.m-slide {
  position: relative;
  display: inline-block;
  font-size: 100px;
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
  color: #ffffff;
}

.m-slide:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd;
  color: #29d0fd;
  animation: fill-1 10s infinite 2.3s;
}

.a-slide-2 {
  position: relative;
  display: inline-block;
  font-size: 100px;
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
  color: #ffffff;
}

.a-slide-2:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd;
  color: #29d0fd;
  animation: fill-1 10s infinite 2.6s;
}

.n-slide {
  position: relative;
  display: inline-block;
  font-size: 100px;
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
  color: #ffffff;
}

.n-slide:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd;
  color: #29d0fd;
  animation: fill-1 10s infinite 2.9s;
}

.i-slide {
  position: relative;
  display: inline-block;
  font-size: 100px;
  text-shadow: 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff, 0 0 2px #ffffff;
  color: #ffffff;
}

.i-slide:before {
  content: attr(data-text);
  position: absolute;
  overflow: hidden;
  white-space: nowrap;
  width: 0;
  text-shadow: 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd, 0 0 3px #29d0fd;
  color: #29d0fd;
  animation: fill-1 10s infinite 3.2s;
}

@keyframes fill-i {
  0% {
    width: 0%;
  }

  10% {
    width: 100%;
  }

  50% {
    width: 100%;
  }

  90% {
    width: 100%;
  }

  100% {
    width: 0%;
  }
}

@media screen and (max-width: 500px) {

  .logo-container {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }
  
  .set-secondary-ollamani {
    font-size: 30px;
  }
}

@media screen and (max-width: 800px) {
  .logo-container {
    margin-left: 40px !important;
    margin-right: 40px !important;
  }
}

@media screen and (max-width: 600px) {
  .set-main-ollamani {
    font-size: 60px !important;
  }
}