/* marquesina */
.g--marquee {
  height: 50px;
  overflow: hidden;
  position: relative;
  border-top: 2px solid;
  border-bottom: 2px solid;
  display: flex;
  align-content: center !important;
  justify-content: center !important;
  background-color: #007b84;
  color: white;
}
/**Link Marquee*/
.g--marquee__link{
  height: 50px;
  display: block;
}

/* texto de la marquesina */
.g--marquee__text {
  font-family: "Banda";
  color: white;
  height: 45px;
  display: grid;
  margin-bottom: 0px;
  align-content: center;
  justify-content: center;
  font-weight: normal;
}

.g--marquee:hover {
  background-color: #f29d00;
}

.g--marquee:hover .g--marquee__text {
  color: white;
}

/* animamos la marquesina con animation  */
.g--marquee div {
  display: block;
  width: 200%;
  height: 45px;

  position: absolute;
  overflow: hidden;
  animation: marquee 15s linear infinite;
}

.g--marquee span {
  float: left;
  width: 100%;
}

/* definimos la animacion de la marquesina */
@keyframes marquee {
  0% {
    left: 0;
  }

  100% {
    left: -100%;
  }
}

/* pausa la animación al hacer hover. */
.g--marquee div:hover,
.g--marquee div:focus {
  animation-play-state: paused;
}

@media (max-width:700px) {
  .g--marquee{
    height: 40px;
  }
}
@media (min-width: 700px) and (max-width:900px) {
  .g--marquee{
    height: 50px;
  }
}