@charset "utf-8";

.menu{
	
	margin-top:-40px;
	margin-left:30%;
	width:70%;
	float:left;
}

.menu ul {
    list-style-type: none;
	background-color:#000;
}

.menu li {
    float: left;
	width:20%;
	height:25px;
	text-align: center;
}

.menu li a {
    color: white;
	height:25px;
    text-decoration: none;
}

.menu li a img {
	height:20px;
}

/* Change the link color to #111 (black) on hover */
.menu li a:hover {
    color: #111;
}


/* Despliega los 3 colores de la imagen pero es el estado activo del link */
.menu ul li a {
	color: #000;
	height:50px;
	text-decoration: none;
	font-family: 'Arial', sans-serif;
	

}





@media only screen and (max-width: 1500px) {
	
	.menu li {font-size:14px;}
}

@media only screen and (max-width: 1000px) {
	
	.menu li {font-size:11px;}
}

@media only screen and (max-width: 800px) {
	
	.menu li {font-size:10px;}
}

@media only screen and (max-width: 600px) {
	
	.menu li {width:15%; font-size:8px;}
	.menu{float:none; width:100%; margin-top:10px; margin-left:0px; }
	.menu ul{width:100%;}
	.menu li a img {height:10px;}
}