/* Photo Gallery Styles */

#gallery img{
	display:block;
	max-width: 100%;
	filter:gray;
	-webkit-filter:grayscale(1);
}
#gallery img:hover{
	-webkit-filter:grayscale(0);
}
#gallery{
	padding-top:5px;
	background-color:rgba(34,34,34,0.6);
	border-radius:5px;
	text-align:center;
}
.galeria{
	padding: 20px;
	margin-bottom:32px;
	display: flex; /* Se pone una imagen al lado de la otra */
	flex-wrap: wrap; /*La imagen que no entre se va para abajo */
	justify-content:center;

}
.galeria__item{
	width: 70%;
	cursor:pointer;	
}
@media (min-width: 320px){
	.galeria__item{
		width: 48%;
		margin:5px;
	}	
}
@media (min-width: 480px){
	.galeria__item{
		width: 48%;
		margin:5px;
	}
}
@media (min-width: 768px){
	.galeria__item{
		width: 30%;
	}

}
@media(min-width:1024px){
	.galeria__item{
		width: 20%;
	}
}

.modal{
	position:fixed;
	width: 100%;
	height: 100vh;
	background:rgba(0,0,0,0.7);
	top:0;
	left:0;
	display:flex;
	justify-content:center;
	align-items:center;
}
.modal__img{
	width: 70%;
	max-width: 700px;
	-webkit-filter:grayscale(0);
}
.modal__boton{
	width: 50px;
	height: 50px;
	color:#fff;
	font-weight: 25px;
	font-family: monospace;
	line-height: 50px;
	text-align: center;
	background:red;
	border-radius:50% ;
	position:absolute;
	right:10px;
	top:10px;
	cursor:pointer;
}