.menu-icon{ /*ocultamos icono para responsive*/
	display: none;
	color: #fff;
	font-weight: 600;
}

.navigation {
	font-size: 1rem;
}

.navigation ul{
	margin: 0;
	padding: 0;
	list-style: none; /* se le quitan viñetas */
}

.navigation ul li{
	display: inline-block; /*se colocan en linea*/ 
}

.navigation ul li a{
	display: block; /*se convierten en bloques*/
	padding: 0.5rem 0.5rem;
	transition: all 0.4s linear;
	border-radius: 5px;
	text-align: center;
}

.navigation ul li a:hover{
	background: #4a4a4a;
}

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


.menu-icon{ 
	display:block;
	font-size: 1rem;
	cursor: pointer;
	padding: 0.4rem 0.4rem;
	line-height: 1em;
	color: #fff;
}

.navigation{
	width: 100%;
}

.navigation ul{
	display: none;

}

.navigation ul.show{
	display: block;
}

.navigation ul li{
	display: block; /*se colocan en linea*/ 
}

.navigation ul li a{
	display: block; /*se convierten en bloques*/
	padding: 0.5rem 0;
	transition: all 0.4s linear;
	border-radius: 5px;
	text-align: center;
}
.navigation ul li a:hover{
	background: #4a4a4a;
} 

}