@charset "utf-8";
/* CSS Document */
*{
	margin: 0;
	padding: 0;
}

/* se le dan las propiedades al contenedor exterior*/

#contenedor{
	width: 1200px;
	height: 1300px;
	background: #D8D8D8;
	margin: 0.5em auto;
	padding: 0.5em;
}

/* se le dan propiedades al encabezado*/

#header{
	height: 10%;
	background: #FFFFFF;
	margin: 1em;
}

/* se le dan las propiedades al nav*/

#nav{
	height: 3%;
	background: #000089;
	margin: 1em;
}

/* se le asignan propiedades al contenedor contenido */

#contenido{
	height: 68%;
	background: #F9F9F9;
	margin:1em;
}

/* se le asignan propiedades al contenedor footer*/

#footer{
	height: 7%;
	background: #000089;
	margin:1em;
}

.pie{
	text-align: center;
	color: #fff;
	font-size: 2;
	}


/* se definen los contenedores internos de contenido */

#section{
	height: 95%;
	width: 24%;
	background: #E0F2F7;
	border-radius: 1em;
	float: left;
	margin:1em;
	}

.modulos{
	text-align: center;
}

#aside{
   	height:95%;
	width: 70%;
	background: #E0F2F7;
	border-radius: 1em;
	float: right;
	margin: 1em;
}

/* aqui se define la posicion de la hoja del libro en el contenedor respectivo*/

.slider{
    position:relative;
    margin:auto;
    width:100%;
    height:100%;
    }


/* aqui se le da el formato a las fotos antes de la ultima*/

.slider img{
    width:90%;
    height:96%;
    padding:1em;
}



/* aqui se le da formato a la primera foto que mostrará. El ancho es el alto de la hoja y visceversa  overflow-x:scroll; */



/* se da formato a los botones de avance 
rgba(0,0,0,0.70)*/

.botones{
	font-size: 30px;
	width: 70px;
	height: 70px;
	line-height: 70px;
	border-radius: 50%;
	background-color:  #0000FF;
	text-align: center;
	font-weight: bold;
	position: absolute;
	color: #f9f9f9;
	box-shadow: 0 0 10px rgba(0,0,0,0);
	-webkit-transition: .3s ease all;
	-o-transition:  .3s ease all;
}

.botones:hover{
	cursor: pointer;
	transform: scale(5.2,1.2);
}

.atras{
	right:2%;
	top:250px;
}

.adelante{
	right:2%;
	top:calc(40%-70px);
}