/*Las CSS que he aplicado para el elemento <body> han sido establecer un fondo blanco, un margen de 0 en la parte superior e inferior y automático a izquierda y derecha, establecer la tipografía Lato, un alto de 2000 píxeles y un ancho del 60%, por último un relleno superior de 51 píxeles.*/

body {
	background:white; 
	margin: 0 auto; 
	font-family:Lato; 
	height:100%;
	width:60%;
	padding-top:51px;
	padding-bottom:50px;
}


/*La CSS que he aplicado para el elemento <p> ha sido establecer que su texto tenga alineamiento justificado y con un espaciado de palabras de 5 píxeles.*/

p {
	text-align: justify;
	word-spacing:5px;
}


/*Las CSS que he aplicado para el elemento con id #header han sido establecer una posición fija, una posición superior e izquierda a 0px, un fondo de un color gris claro #E1E1E1, una altura de 51 píxeles y un ancho de un 100%.*/
	
header {
	position:fixed;
	top:0px;
	left:0px;
	background:#E1E1E1;
	height:54px; 
	width:100%;
}

/*Las CSS que he aplicado para el elemento <h2> han sido establecer un color azul oscuro #00265D, un tamaño de fuente de 2em y un espaciado de palabras de 15 píxeles.*/

h2 {
	color:#00265D;
	font-size:2em;
	word-spacing:15px;
	
}

/*Las CSS que he aplicado para el elemento <h3> han sido establecer un color azul oscuro #00265D.*/

h3{
	color:#00265D;
}

/*La CSS que he aplicado para los elementos <a> que correspondan a un <h2> cuando se apunte hacia ellas, se pase el ratón por encima, ha sido establecer que no tenga ninguuna decoración de texto.*/
	
a:hover  h2{
	text-decoration:none;
}

/*La CSS que he aplicado para los elementos <ul> han sido que no se muestre el marcador y que el relleno izquierdo sea de 0px.*/

ul{
	list-style:none;
	padding-left:0px;
}

/*Las CSS que he aplicado para los elementos <li> dentro del id #nav ha sido establecer que se muestren en línea, con el texto centrado y el tamaño de la fuente en 1.1em.*/


#nav li{
  display: inline-block;
  text-align:center;
  font-size:1.1em;
}

/*Las CSS que he aplicado para los elementos <a> que hereden de un <li> dentro del id #nav ha sido establecer que se muestren en línea, sin subrayado, un relleno de 8 píxelesy mínimo ancho de 100 píxeles.*/


#nav li>a{
	padding:8px;
	display: inline-block;
	text-decoration: none;
	min-width: 100px;
}
/*Las CSS que he aplicado para los elementos <li> que contengan un <a> dentro del id #nav cuando se apunte hacia ellosse pase el ratón por encima, ha sido establecer que no tenga ninguna decoración de texto, que tenga un color de fondo gris oscuro #888787, que el color del texto sea blanco #FFFFFF.*/

#nav li a:hover{
	text-decoration:none;
	background-color: #888787;
	color: #FFFFFF;
	
}

/*La CSS que he aplicado para el elemento con id #nav han sido que tenga un fondo de color #E1E1E1, con un ancho de 120px y un relleno superior de 45px.*/

#nav {
	background:#E1E1E1;
	width: 120px;
	padding-top: 45px;
}


/*La CSS que he aplicado para el elemento <hr> ha sido establecer un margen superior e inferior de 25 píxeles y derecho e izquierdo de 0 píxeles.*/

hr {
	margin:25px 0;

}

/*La CSS que he aplicado para el elemento con id #cpi han sido que flote en la parte izquierda.*/
	
#cpi{
	float:left;
	
		
}	

/*Las CSS que he aplicado para los elemento que utilicen la clase vid han sido que se muestre en bloque, que tenga un margen superior e inferior de 0 píxeles y derecho e izquierdo auto y que tenga un relleno superior de 30 píxeles.*/

.vid{
	display:block;
	margin: 0px auto;
	padding-top:30px;
}

/*La CSS que he aplicado para los elemento que utilicen la clase videos ha sido que el alineamiento del texto sea centrado.*/


.videos{
	text-align:center;
}

/*Las CSS que he aplicado para los elemento que utilicen la clase seccion-aside han sido que se muestre en en línea con contenedor flex, que el texto tenga alineamiento a izquida, que tenga un margen izquierdo de 39 píxeles y que tenga un ancho del 90%.*/

.seccion-aside {
	display:inline-flex;
	text-align:left;
	margin-left:39px;
	width:90%;
}

/*La CSS que he aplicado para los elementos <aside> ha sido que tenga un margen derecho de 40 píxeles.*/

aside{
	margin-right:40px;
}

/*Las CSS que he aplicado para los elemento que utilicen la clase productpics han sido que tenga un alto de 150 píxeles, un ancho de 100px, un relleno izquiero de 40 píxeles y derecho de 45 píxeles, que tenga un margen superior de 20 píxeles e inferior de 10 píxeles.*/

.productpics{
	height:150px;
	width:100px;
	padding-left:40px;
	padding-right:45px;
	margin-top: 20px;
	margin-bottom:10px;
	
}

/*Las CSS que he aplicado para los elemento que utilicen la clase productpics2 han sido que tenga un alto de 150 píxeles, un ancho de 100px, un relleno izquiero de 33 píxeles y derecho de 37 píxeles, que tenga un margen superior de 20 píxeles e inferior de 10 píxeles y margen derecho de 17 píxeles.*/

.productpics2{
	height:150px;
	width:100px;
	padding-left:33px;
	padding-right:37px;
	margin-top: 20px;
	margin-bottom:10px;
	margin-left:17px;
}

/*Las CSS que he aplicado para el elemento con id #table han sido que tenga un ancho de 950 píxeles y que el texto tenga un alineamiento centrado.*/

#table{
	width:100%;
	text-align:center;
	
}


/*Las CSS que he aplicado para los elementos con clase pic1 han sido que tenga un alto de 250 píxeles y un ancho de 950 píxeles, que el color de fondo sea blanco #FFFFFF.También se le ha aplicado un relleno de 10 píxeles y un margen superior de 25 píxeles.*/

.pic1 {
	height:250px;
	width:100%;
	background-color:#FFFFFF;
	padding:10px;
	margin-top:25px;
}


/*Las CSS que he aplicado para el elemento con id #training han sido que tenga un alto y un ancho del 100% y que el color de fondo sea un color gris #F1F1F1.*/

#training {
	height:100%;
	width:100%;
	background:#F1F1F1;

}


/*Las CSS que he aplicado para el elemento <p> dentro del id #training han sido que tengan relleno a izquierda y derecha de 5 píxeles.*/
#training p{
	padding-left:5px;
	padding-right:5px;
}	

#formulario{
	background:#F1F1F1;
}
	
/*Las CSS que he aplicado para el elemento <footer> han sido que tenga una posición fija, una posición inferior e izquierda a 0px, un fondo de un color gris claro #E1E1E1, que el texto tenga alineamiento centrado, una altura de 45 píxeles y un ancho de un 100%.*/
	
footer{
	position:fixed;
	bottom:0px;
	left:0px;
	background:#E1E1E1;
	text-align:center;
	height:45px; 
	width:100%;
}

/*Las CSS que he aplicado para los elementos <p> que este dentro de un <footer> han sido que se muestre en en línea con contenedor en bloque, que tenga un margen de 15 píxeles.*/
	
footer p {
	display:inline-block;
	margin:15px;
}	
	
/*Las CSS que he aplicado para los elementos <a> han sido que tengan un color azul oscuro #003E9B y que no tengan niguna decoración de texto.*/
a { 
	color:#003E9B; 
	text-decoration:none;
}

/*La CSS que he aplicado para los elementos <a> que se correspondan a un link, cuando se apunte hacia ellos ha sido que tengan decoración de texto subrayado.*/
	
a:link:hover { 
	text-decoration:underline;
}

/*Las CSS media query que he aplicado cuando el tamaño máximo de la pantalla llegue a 800 píxeles son que el elemento <body> ocupe el 100% del ancho y que el <header> ocupe el 30% de alto*/

@media screen and (max-width: 800px){
	body{
		width: 100%;
	}
	
	header{
		height: 30%;
	}
	
}

/*Las CSS media query que he aplicado cuando el tamaño máximo de la pantalla llegue a 400 píxeles son que el elemento <body> ocupe el 100% del ancho, que no se muestre el elemento <footer>, los elementos de clase pic1, ni los de clase up1. Que el elemento con id #nav ocupe el 100% del ancho, que el elemento <li> que este dentro de un elemento con id #nav se muestr en bloque y el elemento <section> tenga un relleno superior del 60%.*/

@media screen and (max-width: 400px){
	body{
		width: 100%;
	}
	
	footer{
		display: none;
	}
	.pic1{
		display:none;
	}
	.up1{
		display:none;
	}
	#nav{
		width:100%;
	}	
	#nav li{
		display: block;
	}
	section{
		padding-top: 60%;
	}
}

.prod-left{
	float:left;
	margin-right:15px;
	margin-bottom: 5px;
	border: solid black 1px;
	padding: 2px;
	
}

.prod-left-sts{
	float:left;
	margin-right:15px;
	margin-bottom: 5px;
	border: solid black 1px;
	padding: 2px;
	height: 284px;
	width: 330px;
}

.prod-right-cf7000{
	float:right;
	margin-right:15px;
	margin-bottom: 5px;
	border: solid black 1px;
	padding: 2px;
	height: 330px;
	width: 260px;
	
}

.prod-right{
	float:right;
	margin-right:25px;
	margin-bottom: 5px;
	border: solid black 1px;
	padding: 2px;
	/*height: 330px;
	width: 260px;
	*/
}

#prod-table{
	height: 350px;
	width:650px;
	display: block;
	margin-left: auto;
	margin-right: auto;
	padding-top: 20px;
	
}