* {
    font-family: 'Roboto', sans-serif;
    color: darkblue;
}

/* Para eliminar el formato de link antes y después de pulsar en el punto de menú 
con la nota important, esta instrucción tiene preferencia sobre otras */
    a{
        text-decoration: none !important;
        color: inherit; 
    }

/* INICIO HELPERS */
    .spacer10 {
        height: 10px;
        width: 100%;
    }
    .spacer50 {
        height: 50px;
        width: 100%
    }
    .spacer100 {  
        height: 100px;
        width: 100%;
    }

    .spacer150 {  
        height: 150px;
        width: 100%;
    }

/* FIN HELPERS */


/* INICIO CSS CABECERA. Es la misma en todas las pantallas */

.cabecera{
    height: 60px;
    width: 100%;
    display: flex;
    position: fixed;
    left: 0px;
    top: 0px;
    justify-content: space-between;
    align-items: center;
    background-color: rgb(240,255,255);
    opacity: 0.95;
    z-index: 1;
}

#logoCabecera {
    height: 60px;
    width: auto;
}

.cab-izquierda > a{
    display: flex;
    justify-content: space-around;
    font-weight: 400;
    align-items: center;
    margin: 10px;
    font-size: 2rem;
}


/* INICIO MENU LINKS ORDENADOR */
.cab-derecha {
    margin: 20px;
}
.menuLinks ul {
    display: flex;
    padding: 0;
    margin: 0;
    list-style: none;
}
.menuLinks a {
    display: block;
    padding: 10px 15px 10px 15px;
    background-color: rgb(240,255,255);
    text-decoration: none;
    color: darkblue;
    font-size: 1rem;
    transition: 0.5s;
}
.menuLinks a:hover {
    background-color: rgb(121, 183, 245);
}
.menuLinks ul li ul {
    display: none;
    position: absolute;
    right: 0;
}

.menuLinks ul li a:hover + ul, .menuLinks ul li ul:hover { 
    display: block;
}

/* FIN MENU LINKS ORDENADOR */

/* INICIO MENU LINKS TELEFONO */
/* define a fixed width for the entire menu */
    .navigation {
        width: 200px;
    }

/* Estilo del botón */
    .dropbtn {
        margin-right: 10px;
        background-color: lightblue;
        padding: 16px;
        font-size: 16px;
        border: none;
        cursor: pointer;
        margin-left: 70%;
    }

/* Eliminar formtos de lista de los elementos del menú y submenú */
    .mainmenu, .submenu {
        list-style: none;
        padding: 0;
        margin: 0;
    }
    .mainmenu > li {
        width: 180px;
        float: right;
    }
    
    .submenu > li{
        width: 230px;
        float: right;
    }

/* El contenedor <div> necesario para para posicionar el contenido del desplegable */
    .cab-derechaTelefono {
        position: relative;
        display: inline-block;
    }

/* Ocultar el contenido del menu si no está pulsado el botón */
    .mainmenu {
        display: none;
        position: absolute;
    }

/* Estado inicial de los submenus. con max-height: 0 se ocultan */ 
    .submenu {
        overflow: hidden;
        max-height: 0;
        -webkit-transition: all 1s ease-out;
        transition: all 1s ease-out;
    }
/* Formato de los links dentro del menú y submenú */
    .mainmenu a {
        display: block;
        background-color: #f9f9f9;
        text-decoration: none;
        padding: 10px;
        color: darkblue;
    }
    .submenu a {
        background-color: lightblue;
      }

    /* Mostrar el desplegable del menu cuando se pulsa el botón */
    .cab-derechaTelefono:hover .mainmenu {
        display: block;
        transition: 1s;
    }

    /* Cambiar el color de fondo de del botón del desplegable cuando el contenido se muestra */
        .cab-derechaTelefono:hover .dropbtn {
            background-color: darkblue;
            transition: 1s;
        }
        .cab-derechaTelefono:hover .bi-three-dots-vertical{
            color: lightblue;
            transition: 1s;
        }

    /* Formato hover links menu */
        .mainmenu a:hover {
            background-color: lightblue;
        }

    /* Cuando nos situamos encima de un item del menu que tiene un submenu,
        muestra el contenido del submenu.
        Cambiamos el max-height: 200px, para que se muestre el contenido. */
    
        .mainmenu li:hover .submenu {
            display: block;
            max-height: 200px;
            right: 0;
            position: absolute;
        }

    /* Formato hover links submenu */
        .submenu a:hover {
            background-color: blue;
            color: whitesmoke;
        }

/* FIN MENU LINKS TELEFONO */



/* FIN CSS CABECERA COMÚN */

/* INICIO FORMATO GRID IMAGEN - TEXTO */

    .gridImagenTexto {
        display: flex;
        justify-content: center;
    }

    .gridImagenTexto > .cuadros{
        width: 100%;
    }

    .gridImagenTexto > .cuadros > .cuadro {
        display: grid;
        grid-template-columns: 1fr 1fr; 
        
    }

    .gridImagenTexto > .cuadros > .cuadro > .cuadroImagen img {  /* Formato de las imagenes en los cuadros*/
        width: 100%;
        height: 100%;
        object-fit: cover;
    }

    .cuadro > .cuadroTexto {
        display: flex;
        align-items: center;
        flex-direction: column;
        padding: 42px;
    }

/* FIN FORMATO GRID IMAGEN - TEXTO */

/* INICIO FOOTER */
    .pie {
        width: 100%;
        height: 70px;
        background-color: darkblue;
        border-top: 10px solid lightblue;
        padding: 0px;
        color: white;
        text-align: center;
    }

    .pie > .social {
        padding-top: 10px;
    }
    .pie > .social a {
        font-size: 1.5rem;
        padding: 10px;
    }

    .pie > .copyright {
        padding-top: 10px;
        font-size: 0.7rem;
        color: lightblue;
    }

/* FIN FOOTER */

.mencionFoto {
	opacity: 0.4;
	font-size: 0.7rem;
}