*{
	margin:0;
	padding:0;
	-webkit-box-sizing:border-box;
	-moz-box-sizing:border-box;
	box-sizing:border-box;
	}

body{
	
	background-position: bottom;
	background-size:100% 100%;
	background-attachment:fixed;
    overflow: scroll;
    width: 100%;
	height: 100%;
	zoom:75%;
    }
	
	
.menu{
	background:rgba(0,0,0,0.4);
	
	color:#fff;
	padding:20PX 0;		/*padding 2rem arriba y abajo, cero en los costados*/
	position:fixed;		/*esta propiedad inmoviliza header, p´ se acorta de lado el header*/
	left:0;				/*con top, left pego a la cabecera el header*/
	top:-2px;
	width:100%;			/* esta propiedad hace que abarque todo el ancho de la pg*/
	height:110px;
	z-index:3;
	
	}

.menu a{
	color:#fff;
	text-decoration:none;
	font-size:20px;
	font-family: 'Roboto', Arial, Tahoma, Sans-serif, Verdana, Helvetica;
	}


	
.menu nav ul li a:hover{
	/*background:#bf0026;*/
	border-top:#bf0026;
	color:cyan;
	}



.logo-nav-menu{ 				/*este elemento se agrego para trabajar con flex en vez de usar float*/
	display:flex;					/*esta clase permite dar formato a la cabecera*/
	justify-content:space-between;	
	align-items:center;
	flex-wrap:wrap;					/*hace que todo se haga en bloque cuando minimizo pantalla*/
	
	}

.logo{
	position:relative;
	left:20px;
	top:-5px;
	font-size:15px;
	
	}

/*.logo h3{
	word-spacing:5px;
	font-size:25px;
	}*/
	
.menu-icon{
	display:none;
	font-size:13.5px;
	}

.icon-menu{
	font-size:40px;
	}


.navigation ul{						
	margin:0;
	padding:0;
	list-style:none;				/*quita viñetas a los elementos de lista*/
	
	
	}
	
.navigation ul li{
	display:inline-block;				/*elementos de lista los cambia a renglón */
	
	}

.navigation ul li a{
	display:block;						/*elementos de lista ahora de renglón los pone en un bloque*/
	padding:0.5rem 0.7rem;
	
	/*transition:all 0.4s linear;*/		/*hace una transicion en el hover de 2 segundos*/
	
	}

.navigation ul li a:hover{
	color:rgba(150,255,255,0.4);
	/*color:#bf0026;*/
	}	



.main{
	padding-top:2rem;					/*con esto bajo el contenedor de header*/
	
	}	



	
	
/********* SE HACE RESPONSIVE PAGINA **********/

@media only screen and (max-width:850px){
	
	
	
.menu{
	background:rgba(0,0,0,0.4);
	color:#fff;
	padding:2px 0;		
	position:fixed;		
	left:0px;				
	top:0px;
	}

.menu-icon{
	display:block;
	cursor:pointer;
	padding:20px 20px;
	position:relative;
	top:20px;
	}


.logo{
	position:relative;
	left:-50px;
	top:10px;
	
	}

.navigation{
	width:100%;
	margin-top:1rem;
	position:relative;
	top:-35px;
	}


.navigation ul{
	display:none;
	
	}

.navigation ul.show{
	display:block;
	
	}

.navigation ul li{
	display:block;			/*pasa de iline-block a block*/
	
	}



.navigation ul li a{
	display:block;					
	padding:0.5rem 0;
	font-family:Sans-serif;
	background:rgba(0,0,0,0.6);
	/*background:#000;*/
	position:relative;
	top:30px;
	/*transition:all 0.4s linear;
	border-radius:5px;*/
	
	}

.navigation ul li a:hover{
	background:#000;	
	/*background:rgba(0,0,65,0.4);*/
	color:#fff;
	/*transition:all 0.4s linear;	*/
	}