body {
    margin: 0;
    background-image: url('Mapa_files/Fondo.webp');
    background-repeat: no-repeat;
    background-size: cover;
}

.bg-move-up {
    -webkit-animation: bg-move-up 11s;
    animation: bg-move-up 11s;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

.mapa-svg {
    overflow: hidden;
}

.mapa-svg svg {
    height: 100vh;
    width: auto;
    padding: 0px;
    margin: 0px;
}

.mapa-svg-move-up {
    -webkit-animation: move-up 5s;
    animation: move-up 5s;
    -webkit-animation-timing-function: linear;
    animation-timing-function: linear;
    -webkit-animation-delay: 6s;
    animation-delay: 6s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both
}

path.mapa-hover {
    fill: transparent;
}

#capa-honduras>image,
#capa-mexico>image,
#capa-guatemala>image,
#capa-salvador>image,
#capa-nicaragua>image {
    display: none;
}

img#mapa-gif {
    width: auto;
    height: 100vh;
    max-height: 100vh;
    position: absolute;
    left: 0;
}

#texto1,
#texto2,
#texto3 {
    height: 50px;
}

.opa_0 {
    opacity: 0;
}

.d-none, .hidden  {
    display: none;
}

.boton-gif {
    border: 0;
    background-color: transparent;
}

.boton-gif img {
    height: 14vh;
    width: auto;
}

#boton1, #btnIniciar, #btnMujeres {
    position: absolute;
    bottom: 10px;
    right: 10px;
    cursor: pointer;
}

svg#escena-04 {
    width: auto;
    height: 100vh;
    margin-bottom: -5px;
    position: fixed;
    top: 0;
}

#indicacionMapa {
  position: fixed;
  top: 7vh;
  left: 15vw;
  max-width: 20vw;
  height: auto;
  z-index: 1001;
  pointer-events: none;
}


.mujer-cartel {
    transform: scale3d(0, 0, 0);
    opacity: 0;
    pointer-events: none;
}

.mujer-hover {
    transition: all .2s;
    transform-origin: center;
}

/* .mujer-hover:hover {
    transform: scale(1.1);
} */

.grupo-hover:hover .mujer-cartel {
    display: block;
    z-index: 500;
}

.secuencia-gif {
    width: 100%;
    height: auto;
    position: fixed;
}

.animacion-secuencia {
    position: fixed;
    height: 100vh;
    width: auto;
    left: 0;
    top: 0;
    z-index: 1000;

}



@-webkit-keyframes move-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@keyframes move-up {
    0% {
        transform: translateY(0);
        opacity: 1;
    }

    100% {
        transform: translateY(-100%);
        opacity: 0;
    }
}

@-webkit-keyframes bg-move-up {
    0% {
        background-position-y: 0%;
    }

    100% {
        background-position-y: 100%;
    }
}

@keyframes bg-move-up {
    0% {
        background-position-y: 0%;
    }

    100% {
        background-position-y: 100%;
    }
}


/*Moviles*/
@media (max-width: 300px) {
    svg#escena-04 {
        width: 100vw;
    }
}