@charset "utf-8";
/* CSS Document *   https://www.youtube.com/watch?v=-kgGATnsPbs*/

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;700&display=swap');

body {
	background-color: white;
	/*fondo de pantalla blanco*/
	font-family: arial, helvetica, san-serif;
	/*tipo de letra a utilizar*/
}
.grid-layout {
	display: grid;
	/*fondo de toda el área establecida con width*/
	grid-auto-flow: column dense;
	/* definición de forma de llenado de elementos*/
	grid-template-rows: auto auto auto auto auto auto auto auto;
	/*establece numero de filas*/
	grid-template-columns: repeat(3, 1fr, 2fr);
	/*establece numero de columnas del grid*/
	width: 95%;
	/*ancho del área en donde quedarán los recuadros*/
	margin: 0 auto;
	/*con esto se centra toda el área en donde quedan los recuadros*/
	background-color: rgb(255, 254, 254);
	/*fondo del grid layout*/
	padding: 20px;
	/*fondo de pantalla blanco*/
	border: 1px solid black;
	/*fondo de pantalla blanco*/
}

.recuadro {
	border: 8px solid #ebebeb00;
	/*borde del recuadro*/
	background-color: lightgray;
	/*fondo del recuadro*/
	margin: 15px;
	/*margen entre cada recuadro*/
	box-shadow: 0px 5px 10px -2px rgba(0, 0, 0, 0.613);
	/*aplica sombra al recuadro (tamaño sombra,forma, ubicación y color)*/
	height: auto;
	/*Establece el tamaño (altura) en formato automatico*/
	width: a;
	float: left;
}

.Titulo1 {
	/*Establece formato del Titulo1*/
	font-size: larger;
	/*tamaño de fuente*/
	color: #034d86;
	/*color de la fuente*/
	font-weight: bold;
	/*aplica negrita a la fuente*/
}

.Titulo2 {
	/*Establece formato de Titulo 2*/
	font-size: medium;
	/*tamaño de fuente*/
	color: #01355d;
	/*color de la fuente*/
	font-weight: bold;
	/*aplica negrita a la fuente*/
}

.Titulo3 {
	/*Establece formato de Titulo 2*/
	font-size: small;
	/*tamaño de fuente*/
	color: #e6f0f8e2;
	/*color de la fuente*/
	font-weight: 300;
	/*aplica negrita a la fuente*/
}

.Titulo4 {
font-size: 15px;
text-transform: lowercase;

}

/* Prueba Formato Tabla para Sub Tablas de contenidos*/
table {
	font-family: arial, sans-serif;
	/*Eestablece tipo de fuente para la tabla*/
	border-collapse: collapse;
	/*indica el tipo de de borde de la tabla*/
	width: 100%;
	/*indica el ancho de la tabla*/
}

td,
th {
	border: 1px solid #ffff;
	/*fija el tipo de borde y color de las celdas*/
	text-align: left;
	/*establece la alineación del texto en las celdas*/
	padding: 8px;
}

tr:nth-child(even) {
	background-color: #c5d7de;
	/*establece color de fila para causar efecto interlineado de colores*/
}

/*Inicio Diseño Pie de Pagina*/
.pie-pagina {
	width: 100%;/*establece ancho del pie de pagina al 100% */
	background-color: #032d69df;/*Da color de fondo*/
}

.pie-pagina .grupo-1 {/*Establece formatos para el grupo-1 de elementos del pie de pagina*/
	width: 100%;
	max-width: 1200px;
	margin: auto;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 50px;
	padding: 45px, 0px;
}

.pie-pagina .grupo-1 .box figure {
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.pie-pagina .grupo-1 .box figure img {/*datamaño a imagen del grupo 1 del pie de pagina*/
	width: 250px;
}

.pie-pagina .grupo-1 .box h2 {
	color: #c5d7de;
	margin-bottom: 25px;
	font-size: 20px;
}
.pie-pagina h4 {
font-size: 15px; 
}

.pie-pagina .grupo-1 .redsocial a {/*Da formatos a elementos correspondientes a la clase redsocial-*/
	display: contents;
	text-decoration: none;
	width: 45px;
	height: 45px;
	line-height: 45px;
	color: #fff;
	margin-right: 10px;
	text-align: center;
	transition: all 300ms ease;
}

.pie-pagina .grupo-1 .redsocial a:hover {/*Hace que al pasar el puntero por los iconos, estos cambien de color*/

	color: aqua;
}
.pie-pagina .grupo-1 .box h2{/*Da formato a los elementos del tipo H2 dentro de las box del grupo 1*/
font-size: large;
color: #d4e3ea;

}
.pie-pagina .grupo-1 .box p{/*Da formato al texto de los parrafos definidos dentro de las box del grupo 1*/

	color: #c5d7de ;
	text-align: justify;
	font-size: 15px;
	
}
.pie-pagina .grupo-2 { /*Da formatos a grupo-2 de elementos del pie de pagina*/
	background-color: #01355d;
	padding: 15px, 10px;
	text-align: center;
	color: #fff;
}


/*Fin diseño pie de pagina*/

#apDiv1 {position: absolute; /* este div1 determina la posición del Boton Volver Atrás*/
	left: 68px;
	top: 57px;
	width: 49px;
	height: 42px;
	z-index: 1;}
#apDiv2 {position: absolute; /* este div2 determina la posición de la frase "Volver al Menú Anterior" */
	left: 119px;
	top: 64px;
	width: 170px;
	height: 24px;
	z-index: 2;
}