@charset "UTF-8";
.btn-percurso.active {
  color: orange;
  background-color: black !important;
}
@media (min-width: 576px) {
  .btn-percurso.active {
    font-size: 1.8rem;
  }
}

.map-conteiner {
  height: 75vh;
  width: 100%;
  display: block;
  overflow: hidden;
  position: relative;
  border: solid 1px black;
  background-color: #91A891;
  position: relative;
}
@media (min-width: 576px) {
  .map-conteiner {
    height: 65vh;
  }
}
.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 .map-full svg {
  height: 90%;
  object-fit: cover;
  z-index: -1;
  box-shadow: #91A891 inset 0px 0px 2000px;
  position: absolute;
  z-index: 2;
  top: 50%;
  left: 40%;
  transform: translateY(-50%) translateX(-50%);
  max-width: 100vw;
}
@media (min-width: 576px) {
  .map-conteiner .map-full svg {
    border-radius: 50%;
    position: absolute;
    top: 70%;
    left: 50%;
    height: 270%;
    transform: translateY(-50%) translateX(-50%) rotate(-60deg);
    z-index: 1;
    width: 100%;
    object-fit: cover;
  }
  .map-conteiner .map-full svg ::before {
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 3;
    box-shadow: 0 0 50px #91A891;
    position: absolute;
  }
}
@media (min-width: 576px) {
  .map-conteiner #img-itaipu {
    transform: rotate(60deg) translate(-28px, -135px);
  }
}
@media (min-width: 576px) {
  .map-conteiner #img-cataratas {
    transform: rotate(60deg) translate(124px, -356px);
  }
}
.map-conteiner #atletaDesck,
.map-conteiner #desck {
  display: none;
}
@media (min-width: 576px) {
  .map-conteiner #atletaDesck,
  .map-conteiner #desck {
    display: block;
  }
}
.map-conteiner #atletaMobile,
.map-conteiner #mobile {
  display: block;
}
@media (min-width: 576px) {
  .map-conteiner #atletaMobile,
  .map-conteiner #mobile {
    display: none;
  }
}
.map-conteiner .norte-icon {
  position: absolute;
  bottom: 10%;
  left: 5%;
  width: 50px;
  height: 50px;
  z-index: 2;
}
@media (min-width: 576px) {
  .map-conteiner .norte-icon {
    left: inherit;
    right: 5%;
    width: 80px;
    height: 80px;
    transform: rotate(-60deg);
  }
}

.map-conteiner #atletaDesck2 {
  display: none;
}
.map-conteiner .personagem {
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.map-conteiner .maratona {
  animation-name: animatekMaratona;
}
.map-conteiner .revezamento1 {
  animation-name: animatekRevezamento1;
}
.map-conteiner .revezamento2 {
  animation-name: animatekRevezamento2;
  fill: #936001;
}
.map-conteiner .corrida {
  animation-name: animatekCorrida;
  animation-duration: 5s;
}

@keyframes animatekMaratona {
  0% {
    transform: translateY(0) translateX(0);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translateY(100px) translateX(5px);
    animation-timing-function: linear;
  }
  50% {
    transform: translateY(120px) translateX(20px);
    animation-timing-function: linear;
  }
  80% {
    transform: translateY(185px) translateX(116px);
    animation-timing-function: linear;
  }
  100% {
    transform: translateY(230px) translateX(110px);
    animation-timing-function: ease-out;
  }
}
@keyframes animatekRevezamento1 {
  0% {
    transform: translateY(0) translateX(0);
    animation-timing-function: ease-in;
  }
  40% {
    transform: translateY(100px) translateX(5px);
    animation-timing-function: linear;
  }
  50% {
    transform: translateY(120px) translateX(20px);
    animation-timing-function: linear;
  }
  100% {
    transform: translateY(120px) translateX(20px);
    animation-timing-function: linear;
  }
}
@keyframes animatekRevezamento2 {
  0% {
    transform: translateY(120px) translateX(20px);
    animation-timing-function: linear;
  }
  50% {
    transform: translateY(120px) translateX(20px);
    animation-timing-function: ease-in;
  }
  80% {
    transform: translateY(185px) translateX(116px);
    animation-timing-function: linear;
  }
  100% {
    transform: translateY(230px) translateX(110px);
    animation-timing-function: ease-out;
  }
}
@keyframes animatekCorrida {
  0% {
    transform: translateY(165px) translateX(85px);
    animation-timing-function: linear;
  }
  10% {
    transform: translateY(175px) translateX(85px);
    animation-timing-function: linear;
  }
  50% {
    transform: translateY(185px) translateX(116px);
    animation-timing-function: linear;
  }
  100% {
    transform: translateY(230px) translateX(110px);
    animation-timing-function: ease-out;
  }
}
.altura-mark {
  width: 20px;
  background-image: url("../../assets/media/maps/altura-atleta.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: top;
  position: absolute;
  height: 100%;
  left: -8px;
  bottom: 0;
  transform: translateX(-2px) translateY(-10px);
  animation-duration: 15s;
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
}
.altura-mark::before {
  content: "";
  width: 2px;
  top: 20px;
  height: calc(100% - 20px);
  background-color: #936001;
  left: calc(50% - 2px);
  position: absolute;
}
.altura-mark.km42, .altura-mark.km21 {
  animation-name: animateAltimetriaMaratona;
}
.altura-mark.km11 {
  animation-duration: 5s;
  animation-name: animateAltimetriaCorrida;
}
.altura-mark.km5 {
  animation-duration: 30s;
  animation-timing-function: linear;
  animation-name: animateAltimetria5km;
}

@keyframes animateAltimetriaMaratona {
  to {
    left: calc(100% - 10px);
  }
}
@keyframes animateAltimetriaCorrida {
  from {
    left: 73%;
  }
  to {
    left: calc(100% - 10px);
  }
}
@keyframes animateAltimetria5km {
  to {
    left: calc(100% - 10px);
  }
}
#percursos {
  stroke-dasharray: 5;
  stroke-dashoffset: 300;
  pointer-events: none;
  animation: animateDash 40s linear forwards infinite;
}

@keyframes animateDash {
  to {
    stroke-dashoffset: 0;
  }
}
@media (min-width: 576px) {
  #conteiner-brasil {
    transform-origin: 50% 50%;
    transform: rotate(60deg) translateX(-50px);
  }
  #conteiner-argentina {
    transform-origin: 50% 50%;
    transform: rotate(60deg) translateX(60px) translateY(-40px);
  }
  #conteiner-paraguai {
    transform-origin: 50% 50%;
    transform: rotate(60deg) translateX(60px) translateY(95px);
  }
}
.percurso_path {
  fill: transparent !important;
  stroke-dasharray: 5, 5;
  /* Define o tamanho dos pontos e os espaços */
  stroke-dashoffset: 0;
  /* Inicializa o offset, isto faz a linha ser desenhada */
  animation: dash 10s linear infinite;
  /* Animação para criar o efeito de linha pontilhada */
  stroke: #1d1d1b;
  stroke-miterlimit: 10;
}

/* Definindo a animação */
@keyframes dash {
  0% {
    stroke-dashoffset: 100;
  }
  100% {
    stroke-dashoffset: 0;
    /* A linha vai 'desaparecer' completamente ao ser desenhada */
  }
}
#icon_atleta_mobile > g {
  transform: translate(0px, -15px);
}
#icon_atleta_mobile.ant-horario > g {
  transform: translate(0px, -15px) scaleX(-1);
}

#icon_atleta_desk > g {
  transform: translate(0px, -10px);
}
#icon_atleta_desk.ant-horario > g {
  transform: translate(0px, -10px) scaleX(-1);
}

.map-5km {
  height: auto;
}
@media (min-width: 576px) {
  .map-5km {
    height: 100%;
    width: auto;
  }
}
.map-5km svg {
  width: 100%;
  height: 100%;
  position: relative;
  z-index: 1;
}
@media (min-width: 576px) {
  .map-5km svg {
    height: 100%;
    width: auto;
  }
}
.map-5km svg .cls-2 {
  stroke: none;
}

.gradiente_bottom {
  fill: url(#Gradiente_sem_nome_5);
}

.gradiente_left {
  fill: url(#Gradiente_sem_nome_3);
}

.gradiente_rigth {
  fill: url(#Gradiente_sem_nome_3-2);
}

.gradiente_top {
  fill: url(#Gradiente_sem_nome_5-2);
}

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