#pagegallery .images ul {
	overflow: hidden;
}

#pagegallery .images ul li {
	float:left;
	width:20%;
	height: 300px;
	background:#222;
}

#pagegallery .images ul li:hover {
	cursor:pointer;
}

#pagegallery .images ul li img {
	display: none;
	transition: 0.3s linear filter;
	-webkit-transition: 0.3s linear -webkit-filter;
	-moz-transition: 0.3s linear -moz-filter;
}

#pagegallery .images ul li:hover img {
	transition: 0.3s linear filter;
	-webkit-transition: 0.3s linear -webkit-filter;
	-moz-transition: 0.3s linear -moz-filter;
}

#pagegallery .images ul li .legend {
	position: absolute;
	bottom:-50px;
	left:0;
	width:100%;
	padding:5px 10px;
	background: #0099A6;
	color:white;
}

#pagegallery .images ul li .zoomicon {
	position: absolute;
	top:50%;
	left:50%;
	color:white;
	font-size:0;
	margin-top:0;
	margin-left:0;
}

#pagegallery .images ul li:hover .zoomicon {
	font-size:50px;
	margin-top:-25px;
	margin-left:-25px;
}

#pagegallery .images ul li:hover .legend {
	bottom:0px;
}

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

	#pagegallery .images ul li {
		width:25%;
	}	

}

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

	#pagegallery .images ul li {
		width:33.3333%;
	}	

}

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

	#pagegallery .images ul li {
		width:50%;
	}	

}

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

	#pagegallery .images ul li {
		width:100%;
	}	

}