@charset "utf-8";
/* CSS Document */
/*
* {
	margin:0; padding:0;
} */
#contenedor {
	width:100%; max-width:1024px;
	margin:5px auto;
	font-family:Gotham,"Helvetica Neue", Helvetica, Arial, sans-serif;
}
#listado {
	display:block;
	width:400px;
	height:50px;
	margin:10px auto;
}
#listado li {
	text-align:center;
	display:block;
	list-style:none;
	cursor:pointer;
/*	width:110px;
	height:50px; */
	margin:0px 5px;
	line-height:50px;
	float:left;
	border-radius: 5px;
}
#listado li:hover {
	background-color:rgba(204,204,204,1.00);
}
#listado li.active {
	background-color:rgba(0,0,0,1.00);
	color:white;
}
/* lista de imagenes*/

#portafolio {
	width:100%;
	max-width:1024px;
	height:auto;
	text-align:center;
}
.item {
	display:none;
	opacity:0;
	width:20%;
	margin:5px;
}
.item img {
	width:100%;
	border: 1px solid red;
  border-radius: 10px;
}

@media only screen and (max-width: 767px) {
	#portafolio {
		width:100%;
		max-width:1024px;
		height:auto;
		text-align:center;
	}
	.item {
		display:none;
		opacity:0;
		width:20%;
		margin:5px;
	}
	.item img {
		width:100%;
		    border: 2px solid blue;
	    border-radius: 25px;
	}
}
@media only screen and (min-width:320px) and (max-width:480px){
	#portafolio {
		width:100%;
		max-width:1024px;
		height:auto;
		text-align:center;
	}
	.item {
		display:none;
		opacity:0;
		width:20%;
		margin:5px;
	}
	.item img {
		width:100%;
		    border: 2px solid blue;
	    border-radius: 5px;
	}
	#listado {
	display:block;
	width:400px;
	height:50px;
	margin:10px auto;
}
	
}