/*.ContenedorPricnipal {
    background-color: white;
    display: grid;
    justify-items: center;
    justify-self: center;
    text-align: center;
    grid-template-columns: repeat(5, 1fr);
    grid-template-areas:
        "Contact1 Contact1 Contact2 Contact2 Contact2"
        "MapaCuliacan MapaCuliacan MapaCuliacan DireccionCuliacan DireccionCuliacan"
        "MapaMexicali MapaMexicali MapaMexicali DireccionMexicali DireccionMexicali";
}*/

.Contenedor1 {
    display: flex;
    flex-direction: row;
    margin-bottom: 150px;
}

.Contenedor11 {
    width: 42%;
    margin-top: 5%;
    margin-left: 5%;
    margin-right: 2%
}

.Contenedor12 {
    width: 42%;
    margin-top: 0%;
    margin-right: 5%;
    margin-left: 2%;
}

.Infraestructura {
    text-align: center;
    margin-bottom: 5%;
    margin-top: 20.5%;
}

.Contenedor2 {
    display: flex;
    flex-direction: row;
    justify-content:center;
    margin-bottom:50px;
}

.Contenedor21 {
    text-align:center;
}

.Contenedor22 {
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}
.Contenedor23 {
    text-align: center;
}

.Contenedor3 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 50px;
}

.Contenedor31 {
    text-align: center;
}

.Contenedor32 {
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}

.Contenedor33 {
    text-align: center;
}

.Contenedor4 {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-bottom: 50px;
}

.Contenedor41 {
    text-align: center;
}

.Contenedor42 {
    text-align: center;
    margin-left: 5%;
    margin-right: 5%;
}

.Contenedor43 {
    text-align: center;
}

.Mapa {
    width: 600px;
}

.eye {
    position: absolute;
    width: 100%;
    top: 40px;
    left: 40px;
    z-index: 1;
}

.heaven {
    position: absolute;
    width: 35px;
    margin-left: 10%;
    margin-top: 10%;
    z-index: 2;
}

.heaven2 {
    position: absolute;
    width: 35px;
    margin-left: 40%;
    margin-top: 33%;
    z-index: 2;
}


/* Clase que tendra el tooltip */

.cssToolTip {
    position: relative; /* Esta clase tiene que tener posicion relativa */

    color: #ff8c00; /* Color del texto */
}

    /* El tooltip */

    .cssToolTip span {
        background: rgba(255,255,255) url('img/info.gif') center left 5px no-repeat;
        border: 2px solid #2A8534;
        border-radius: 5px;
        box-shadow: 5px 5px 5px #333;
        color: #2A8534;
        display: none; /* El tooltip por defecto estara oculto */

        font-size: 0.8em;
        padding: 10px 10px 10px 35px;
        max-width: 6000px;
        position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */

        top: 15px; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */

        left: 100px; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */

        z-index: 100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
    }

    /* El tooltip cuando se muestra */

    .cssToolTip:hover span {
        display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */
    }




/* Clase que tendra el tooltip */

.cssToolTip2 {
    position: relative; /* Esta clase tiene que tener posicion relativa */

    color: #ff8c00; /* Color del texto */
}

    /* El tooltip */

    .cssToolTip2 span {
        background: rgba(255,255,255) url('img/info.gif') center left 5px no-repeat;
        border: 2px solid #2A8534;
        border-radius: 5px;
        box-shadow: 5px 5px 5px #333;
        color: #2A8534;
        display: none; /* El tooltip por defecto estara oculto */

        font-size: 0.8em;
        padding: 10px 10px 10px 35px;
        max-width: 6000px;
        position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */

        top: 140px; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */

        left: 250px; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */

        z-index: 100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
    }

    /* El tooltip cuando se muestra */

    .cssToolTip2:hover span {
        display: inline; /* Para mostrarlo simplemente usamos display block por ejemplo */
    }



@media screen and (max-width: 800px) {

    .Contenedor1 {
        display: flex;
        flex-direction: column;
        margin-bottom:30px;
    }

    .Contenedor11 {
        width: 90%;
        margin-top: 3%;
        margin-left: 5%;
    }

    .Contenedor12 {
        width: 90%;
        margin-top: 3%;
        margin-left: 5%;
    }

    .Infraestructura {
        text-align: center;
        margin-bottom: 5%;
        margin-top: 80%;
    }

    .Contenedor2 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .Contenedor21 {
        width: 100%;
        margin-top: 3%;
        text-align: center;
    }

    .Contenedor22 {
        width: 100%;
        margin-top: 3%;
        margin-left: 0%;
        margin-right: 0%;
        text-align: center;
    }

    .Contenedor23 {
        width: 100%;
        margin-top: 3%;
        text-align: center;
    }

    .Contenedor3 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .Contenedor31 {
        width: 100%;
        margin-top: 3%;
        text-align: center;
    }

    .Contenedor32 {
        width: 100%;
        margin-top: 3%;
        margin-left: 0%;
        margin-right: 0%;
        text-align: center;
    }

    .Contenedor33 {
        width: 100%;
        margin-top: 3%;
        text-align: center;
    }

    .Contenedor4 {
        display: flex;
        flex-direction: column;
        justify-content: center;
        text-align: center;
    }

    .Contenedor41 {
        width: 100%;
        margin-top: 3%;
        text-align: center;
    }

    .Contenedor42 {
        width: 100%;
        margin-top: 3%;
        margin-left: 0%;
        margin-right: 0%;
        text-align: center;
    }

    .Contenedor43 {
        width: 100%;
        margin-top: 3%;
        text-align: center;
    }

    .eye {
        position: absolute;
        width: 100%;
        top: 40px;
        left: 0px;
        z-index: 1;
    }

    .heaven {
        position: absolute;
        width: 25px;
        margin-left: 2%;
        margin-top: 12%;
        z-index: 2;
    }

    .heaven2 {
        position: absolute;
        width: 25px;
        margin-left: 30%;
        margin-top: 35%;
        z-index: 2;
    }

    .cssToolTip2 span {
        background: rgba(255,255,255) url('img/info.gif') center left 5px no-repeat;
        border: 2px solid #2A8534;
        border-radius: 5px;
        box-shadow: 5px 5px 5px #333;
        color: #2A8534;
        display: none; /* El tooltip por defecto estara oculto */

        font-size: 0.8em;
        padding: 10px 10px 10px 35px;
        max-width: 6000px;
        position: absolute; /* El tooltip se posiciona de forma absoluta para no modificar el aspezto del resto de la pagina */

        top: 100px; /* Posicion apartir de la parte superior del primer elemento padre con posicion relativa */

        left: 180px; /* Posicion apartir de la parte izquierda del primer elemento padre con posicion relativa */

        z-index: 100; /* Poner un z-index alto para que aparezca por encima del resto de elementos */
    }
}