*{font-family: 'arial', cursive; font-size: 20px; text-align: justify;}
h1{text-align: center;color: brown; font-size: 60px;}
.h1{text-align:justify; color: orange; font-size:50px;}
h2{text-align: justify; font-size: 40px; color: green;}
article{margin: 40px 60px;}
img{text-align: center;}




.nav__responsive-ul{display: none;   /*Vamos a desaparecer el menu de responsive y lo vamos a mostrar solo cuando hagamos responsive*/
}

/*Parte de escritorio-------------------------------------------------------------------------------------------------------------------*/
.nav{background: darkslateblue; /*Modificamos el color del nav*/
}
.nav__li{
	display: inline-block; /*para que todos los iconos no esten uno debajo del otro*/
	padding: 12px;        /*ponemos un padding que es igual a porner 7px en left, right, top, buttom */
	color: #fff;        /*colocamos todo en blanco pero los links no se ponen en blanco por lo que debemos seleccionar el a para modificarlo*/
}

.nav__li a{             /*Modificamos el a que esta dentro del .nav__li*/
	color: #fff; /*ponemos los links de color blanco*/
	text-decoration: none; /*le quitamos la linea de la decoracion de los links*/

}

/*aqui utilizamos la pseudo-clase hover para cambiar el color pero necesitamos poner tambien al > 
a porque solo con el .nav__li coloreamos el icono y no el texto*/

.nav__li:hover{color:#bbb;}
.nav__li:hover > a{color: #bbb;}

.nav__li i{ /*modificamos el i que se encuentra dentro del .nav__li*/
	text-align: right; /*Aqui alineamos los iconos*/
	box-sizing:border-box;
	margin-right: 5px ;   /*realizamos un margen a los iconos 5 pixeles a la derecha*/
}


/*Parte de celular-------------------------------------------------------------------------------------------------------------------------------*/

.nav__responsive-buttom-container{ /*este es el contenedor del responsive boton*/ 
	position: absolute; 
	width: 100%;
	font-size: 25px;    /*Le damos un tamaño de 40 px*/
	background: #69c;
	margin-top: -64px;
	z-index: 100;

}

.nav__responsive-buttom{
	padding: 6px 20px;
	text-align: right;
	width: 100%;
}


/*Aqui trabajamos con responsive*/

@media only screen and (max-width: 500px){

	.nav__ul{display: none}/*Para desaparecer el nav normal sin responsive*/	
	
	.nav{
		height: 37px;
		width: 100%;
	}	

	.nav__responsive-ul{
		display: block;      /*Para que nos muestre el nav responsive */
		position: absolute;  /*hace que nuestro nav responsive tenga su espacio en el dom (mirar tematica de position absolute)*/
		width: 100%;
		height: 37px;
		
		
		margin-top: 37px;
		padding-top: 27px;
	}

	.nav__li-container{
		position: relative;
		top: -1000px;
		height: calc(100vh - 64px); /**/

		background: #9bf;    /*Este es el color que le queramos dar*/
		transition: all 1s;
		z-index: 1;
		width: 75%;
		padding-top: 37px;
	}
	.nav__responsive-li{ /*Modificamos todas las clases de li ubicadas dentro del nav__responsive*/
		width: 100%;  
		padding: 9px 20px;  /*separamos todos los li */
	}

	.nav__responsive-li i{ /*modificamos los iconos que se encuentra dentro del .nav__responsive-li*/
		box-sizing:border-box; 
		text-align: center; /*Aqui alineamos los iconos*/
		margin-right: 5px ;   /*realizamos un margen a los iconos 5 pixeles a la derecha*/
		width: 30px;         /*separamos la anchura de cada icono*/
 		color: #016;         /*Le damos un color azul oscuro*/
 	}

 	.nav__responsive-li a{ /*Modificamos los a ubicados dentro de .nav__responsive-li*/
 		color: #016;
 		text-decoration: none;

 	}
 	.nav__responsive-ul:hover > .nav__li-container{ /*con esto movemos el responsive ul para poner el container*/
 		top: -27px;
 	}
}