/* Estilo para pantallas */
i{ cursor: pointer; }
@media only screen and (min-width: 768px) {
    #encuentranos{
        position: absolute;
        width: 98.7vw !important;
        left: 0.2vw;
    }

    #mapa{
        position: relative;
        width: 98.7vw;
        height: 78vh;
        top: 0px;
        left: 0.2vw;
    }

    #iMapa{
        position: absolute;
        width: 100%;
        height: 100%;
        border: 0;

        animation: animacionMapa 2s ease-in-out;
    }

    #mapaSuperior{
        position: absolute;
        bottom: 20px;
        left: 20px;
        padding: 20px;
        color: #ffffff;

        border-radius: 1px;

        background-color: var(--rojo1);

        animation: animacionTarjeta 1s ease-in-out;
    }

    .titulo{ font-size: 40px; }
    .texto{ font-size: 20px; }

    #footer{
        position: relative;
        top: 80vh;
    }
}

/* Estilo para móviles */
@media only screen and (max-width: 768px) {
    #encuentranos{
        position: absolute;
        width: 98.7vw !important;
        left: 0.2vw;
    }

    #mapa{
        position: relative;
        width: 98.7vw;
        height: 76vh;
        top: 0px;
        left: 0.2vw;
    }

    #iMapa{
        position: absolute;
        width: 100%;
        height: 100%;
        border: 0;

        animation: animacionMapa 2s ease-in-out;
    }

    #mapaSuperior{
        position: absolute;
        width: 98.7vw;
        bottom: 0.2vw;
        left: 0.2vw;
        padding: 10px;
        color: #ffffff;

        border-radius: 1px;

        background-color: var(--rojo1);

        animation: animacionTarjeta 1s ease-in-out;
    }

    .pb-5{ padding-bottom: 0.25rem!important; }

    .titulo{ font-size: 28px; }
    .texto{ font-size: 16px; }

    #footer{
        position: relative;
        top: 80vh;
    }
}

@keyframes animacionMapa {
    0%   { opacity: 0; }
    50%  { opacity: 0; }
    100% { opacity: 1; }
}

@keyframes animacionTarjeta {
    from { left: -400px; }
    to   { left: 20px; }
}