.btn-percurso {
  font-family: rift, sans-serif;
  font-size: 1.4rem;
}
@media (min-width: 992px) {
  .btn-percurso.active {
    font-size: 1.8rem;
  }
}

.map-conteiner {
  height: 600px;
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border: solid 1px black;
  background-color: #aad3df;
  position: relative;
}
@media (min-width: 992px) {
  .map-conteiner {
    height: 800px;
  }
}
.map-conteiner::after,
.map-conteiner::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 25px;
  top: 0;
  left: 0;
  z-index: 10;
  background: rgb(0, 0, 0);
  background: linear-gradient(180deg, rgb(0, 0, 0) 5%, rgba(0, 0, 0, 0) 100%);
}
.map-conteiner svg {
  object-fit: cover;
  z-index: 2;
  top: 50%;
  left: 40%;
  max-width: 100vw;
  height: 100%;
}
.map-conteiner svg.natacaoZoom {
  transition: transform 0.8s ease-in-out;
  transform: scale(8) translate(-15%, -35%);
}
@media (min-width: 992px) {
  .map-conteiner svg.natacaoZoom {
    transform: scale(8) translate(-15%, -35%);
  }
}
.map-conteiner svg.ciclismoZoom {
  transition: transform 0.5s ease-in-out;
  transform: scale(1.2) translate(2%, 6%);
}
@media (min-width: 992px) {
  .map-conteiner svg.ciclismoZoom {
    transform: scale(1.25) translate(6%, 6%);
  }
}
.map-conteiner svg.corridaZoom {
  transition: transform 0.6s ease-in-out;
  transform: scale(4) translate(-18%, -20%);
}
@media (min-width: 992px) {
  .map-conteiner svg.corridaZoom {
    z-index: 1;
    transform: scale(3.5) translate(-18%, -22%);
  }
}
@media (min-width: 992px) {
  .map-conteiner svg {
    z-index: 1;
  }
}
.map-conteiner .pontos {
  display: none;
}
.map-conteiner .pontos.active {
  display: block;
}
.map-conteiner .norte-icon {
  position: absolute;
  top: 10%;
  left: 5%;
  width: 50px;
  height: 50px;
  z-index: 2;
}
@media (min-width: 992px) {
  .map-conteiner .norte-icon {
    width: 80px;
    height: 80px;
    top: auto;
    bottom: 10%;
  }
}

.percursos {
  display: none;
}
.percursos.active {
  display: block;
}

.map-conteiner #atletaDesck2 {
  display: none;
}
.map-conteiner .personagem {
  animation-timing-function: ease-in-out;
  display: none;
  transform-origin: center;
}
.map-conteiner .personagem.active {
  display: block;
}
.map-conteiner .personagem.primary {
  fill: #2d0193;
}
.map-conteiner .personagem.secondary {
  fill: #936001;
}
.map-conteiner .personagem.tertiary {
  fill: #930101;
}
.map-conteiner #icon_ciclismoZoom,
.map-conteiner #icon_ciclismo {
  transform: translate(188px, 493px);
}
.map-conteiner #icon_ciclismoZoom.active,
.map-conteiner #icon_ciclismo.active {
  display: block;
  animation-duration: 13s;
  animation-name: animatekCiclismo;
}
.map-conteiner #icon_corridaZoom,
.map-conteiner #icon_corrida {
  transform: translate(-27px, 77px);
}
.map-conteiner #icon_corridaZoom.active,
.map-conteiner #icon_corrida.active {
  display: block;
  animation-duration: 10s;
  animation-name: animatekCorrida;
}
.map-conteiner #icon_natacaoZoom,
.map-conteiner #icon_natacao {
  transform: translate(9px, -40px);
}
.map-conteiner #icon_natacaoZoom.active,
.map-conteiner #icon_natacao.active {
  display: block;
  animation-duration: 3s;
  animation-name: animatekNatacao;
}

@keyframes animatekCiclismo {
  0% {
    transform: translate(188px, 493px);
    animation-timing-function: ease-in;
  }
  5% {
    transform: translate(173px, 427px);
    animation-timing-function: linear;
  }
  10% {
    transform: translate(224px, 290px);
    animation-timing-function: linear;
  }
  15% {
    transform: translate(133px, 251px);
    animation-timing-function: linear;
  }
  25% {
    transform: translate(75px, 128px);
    animation-timing-function: linear;
  }
  35% {
    transform: translate(-2px, 3px);
    animation-timing-function: linear;
  }
  40% {
    transform: translate(-67px, -20px);
    animation-timing-function: linear;
  }
  45% {
    transform: translate(-26px, 34px);
    animation-timing-function: linear;
  }
  55% {
    transform: translate(55px, 185px);
    animation-timing-function: linear;
  }
  65% {
    transform: translate(94px, 288px);
    animation-timing-function: linear;
  }
  75% {
    transform: translate(162px, 315px);
    animation-timing-function: linear;
  }
  80% {
    transform: translate(129px, 432px);
    animation-timing-function: linear;
  }
  90% {
    transform: translate(146px, 479px);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(188px, 493px);
    animation-timing-function: ease-out;
  }
}
@keyframes animatekCorrida {
  0% {
    transform: translate(-27px, 77px);
    animation-timing-function: ease-in;
  }
  5% {
    transform: translate(-14px, 77px);
    animation-timing-function: linear;
  }
  30% {
    transform: translate(7px, -10px);
    animation-timing-function: linear;
  }
  50% {
    transform: translate(22px, -88px);
    animation-timing-function: linear;
  }
  80% {
    transform: translate(-19px, -25px);
    animation-timing-function: linear;
  }
  95% {
    transform: translate(-33px, 70px);
    animation-timing-function: ease-out;
  }
  100% {
    transform: translate(-27px, 77px);
    animation-timing-function: linear;
  }
}
@keyframes animatekNatacao {
  0% {
    transform: translate(9px, -40px);
    animation-timing-function: linear;
  }
  33% {
    transform: translate(25px, -11px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translate(-19px, 4px);
    animation-timing-function: linear;
  }
  100% {
    transform: translate(-16px, -32px);
    animation-timing-function: ease-out;
  }
}
.percursos {
  stroke-dasharray: 5;
  stroke-dashoffset: 300;
  pointer-events: none;
  animation: animateDash 30s linear forwards infinite;
}

#natacao {
  stroke-dashoffset: 0;
  animation: animateDashNatacao 40s linear infinite;
}

@keyframes animateDash {
  from {
    stroke-dashoffset: 0;
  }
}
@keyframes animateDashNatacao {
  from {
    stroke-dashoffset: 300;
  }
}
.map-conteiner .modalidades-content {
  position: absolute;
  bottom: 0;
}
@media (min-width: 992px) {
  .map-conteiner .modalidades-content {
    position: absolute;
    right: 0;
    top: 0;
    margin-top: 5rem;
    border: red;
  }
  .map-conteiner .modalidades-content .text-blocks {
    background: #aad3df;
  }
}
@media (max-width: 992px) {
  .map-conteiner .modalidades-content {
    background-color: white;
    border-radius: 5px;
  }
}
.map-conteiner .modalidades-content p {
  margin: 0;
}

/*# sourceMappingURL=block.css.map */