/*Margen y relleno para que se ajuste al tamaño de la ventana.*/
/*Tipografía Rubik para toda la página.*/
/* BOX-SIZING para calcular directamente todas las dimensiones de las cajas.*/
* {
    margin: 0;
    padding: 0;
    font-family: 'Rubik';
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/*Poner color y tamaño de letra al body*/
body {
    color: #ffffff;
    font-size: 1.25rem; /*20px*/
}

/*Poner color fondo al header, posicionamiento que se quede pegajoso a la posicion 0 de la página para que no se mueva con la página,
hacer que el header se ponga por delante de los demás elementos y poner relleno al header.*/
header {
    padding: 1.5% 1.5% 1.5%;
    background: linear-gradient(0deg, rgba(0,212,255,1) 0%, rgba(9,9,121,1) 100%);
    position: sticky;
    top: 0;
    z-index: 10;
}

/*Poner el texto alineado horizontalmente en el centro al div del logo, del título y del selector de idioma.*/
#logo-titulo-idioma {
    text-align: center;
}

/*Poner tamaño (anchura máxima) y margen derecho al enlace (logotipo) que es hijo directo del div logo-titulo-idioma.*/
#logo-titulo-idioma > a {
    max-width: 6.25rem;/*100px*/
    margin-right: 7.813rem;/*125px*/
}

/*Poner que los elementos estén unos al lado de los otros y en bloque para que puedan tener un tamaño, y alinear los elementos verticalmente 
en el centro al logotipo, al título de la página y al selector de idioma.*/
#logo-titulo-idioma a,
#logo-titulo-idioma h1,
#selector-idioma {
    display: inline-block;
    vertical-align: middle;
}

/*Poner tamaño del logotipo (anchura máxima).*/
#logo-titulo-idioma a img[src*="ags"]{
    max-height: 6.25rem;/*100px*/
}

/*Poner color de letra, margen derecho, eliminar subrayado al enlace del título 1.*/
h1 a {
    color: #ffffff;
    text-decoration: none;
    margin-right: 6.25rem;/*100px*/
}

/*Poner el texto alineado horizontalmente en la derecha y margen abajo al selector de idioma.*/
#selector-idioma {
    text-align: right;
    margin-bottom: 5rem;/*80px*/
}

/*Poner tamaño (anchura), margen izquierdo y borde redondeado a las imágenes del selector de idioma.*/
#selector-idioma img{
    width: 3.125rem;/*50px*/
    margin-left: 0.9375rem;/*15px*/
    border-radius: 0.625rem;/*10px*/
}

/*Poner margen izquierdo y borde (tamaño, tipo y color) a la línea de debajo del selector de idioma para indicar en qué idioma está la página.*/
#selector-idioma hr {
    margin-left: 5.3125rem;/*85px*/
    border: 0.1875rem solid #090979;/*3px*/
}

/*Alinear el texto horizontalmente en el centro al menú de navegación principal.*/
nav {
    text-align: center;
}

/*Eliminar el estilo de los elementos de la lista.*/
nav ul {
    list-style-type: none;
}

/*Poner los elementos del menú en línea, darles un margen a la derecha y arriba, y poner en negrita.*/
nav ul li {
    display: inline-block;
    margin-right: 1.5625rem;/*25px*/
    margin-top: 0.9375rem; /*15px*//*1px = 0.0625rem*/
    font-weight: bold;
}

/*Poner color de letra y eliminar subrayado a los enlaces de los elementos de la lista del menú de navegación.*/
nav ul li a {
    color: #ffffff;
    text-decoration: none;
}

/*Poner subrayado a los enlaces de los elementos de la lista del menú de navegación cuando se pasa el ratón por encima del elemento del menú.*/
nav ul li a:hover {
    text-decoration: underline;
}

/*Poner color de fondo, centrar el contenido del footer horizontalmente en el centro y verticalmente en el centro.*/
footer {
    background: linear-gradient(0deg,  rgba(9,9,121,1) 0%, rgba(0,212,255,1) 100%);
    text-align: center;
    vertical-align: middle;
}

/*Poner los iconos de las redes sociales en línea con los otros elementos del footer,
margen derecho y que estén alineados verticalmente en el centro.*/
#iconosRRSS {
    display: inline-block;
    margin-right: 6.25rem; /*100px*/
    vertical-align: middle;
}

/*Poner margen arriba y abajo a las imágenes de los iconos de las redes sociales.*/
#iconosRRSS img {
    margin-top: 1.25rem; /*20px*/
    margin-bottom: 1.25rem; /*20px*/
}

/*Poner los enlaces de los iconos de las redes sociales unos al lado de los otros y ponerles tamaño (anchura y altura).*/
#iconosRRSS a {
    display: inline-block;
    width: 3.75rem;/*60px*/
    height: 3.75rem;/*60px*/
}

/*Poner tamaño (anchura y altura) de los elementos de la clase facebook.*/
#iconosRRSS .facebook {
    width: 3.75rem;/*60px*/
    height: 3.75rem;/*60px*/
}

/*Poner tamaño (anchura y altura) y margenes abajo de los elementos de la clase instagram.*/
#iconosRRSS .instagram {
    width: 3.3125rem;/*53px*/
    height: 3.3125rem;/*53px*/
    margin-bottom: 1.63rem;/*26.08px*/
} 

/*Poner tamaño (anchura y altura) y márgenes abajo y derecho de los elementos de la clase x.*/
#iconosRRSS .x {
    width: 2.375rem; /*38px*/
    height: 2.375rem; /*38px*/
    margin-right: 0.625rem;/*10px*/
    margin-bottom: 1.80rem;/*28.8px*/
}

/*Poner el correo electrónico en línea con los otros elementos del footer y
que esté alineado verticalmente en el centro.*/
#contactoCorreo {
    display: inline-block;
    vertical-align: middle;
}