.transition, .MGallery-after{
	-webkit-transition: all 0.3s ease;
	-moz-transition: all 0.3s ease;
	-ms-transition: all 0.3s ease;
	-o-transition: all 0.3s ease;
	transition: all 0.3s ease;				
}
.MGalleryContainer {
   float: left;
   width: 100%;
   position: relative;
}
.MGalleryContainer ul {
   clear: left;
   float: left;
   list-style: none;
   margin: 0;
   padding: 0;
   position: relative;
   left: 50%;
   text-align: center;
}
.MGalleryContainer ul li {
   display: block;
   float: left;
   list-style: none;
   margin: 0 6% 140px 6%;
   padding: 0;
   position: relative;
   width:21%;
   right: 50%;
}
.MGalleryContainer ul li .MGallery-before{
	background:#c3c0ba;
	position:absolute;
	left:0px;
	top:0px;
	right:0px;
	bottom:0px;
	-moz-transform: rotate(-10deg) skewX(0deg);
	-webkit-transform: rotate(-10deg) skewX(0deg);
	-o-transform: rotate(-10deg) skewX(0deg);
	-ms-transform: rotate(-10deg) skewX(0deg);
	transform: rotate(-10deg) skewX(0deg);	
	-webkit-box-shadow: 1px 1px 2px 0 #878787;
	box-shadow: 1px 1px 2px 0 #878787;	
	z-index:0;		
}
.MGalleryContainer ul li .MGallery-AlbumName{
	top:-80px;
	left:0px;
	position:absolute;
	width:100%;	
	z-index:4;			
}
.MGalleryContainer ul li figure{
	background:#fff;
	padding:15px;	
	position:relative;
	z-index:1;	
	-webkit-box-shadow: 1px 1px 2px 0 #878787;
	box-shadow: 1px 1px 2px 0 #878787;		
}
.MGalleryContainer ul li figure img{
	height:130px;
	width:100%;	
	position:relative;
	z-index:2;
			
}
.MGalleryContainer ul li a {
   display: block;
   text-decoration: none;
}
.MGallery-after{
	position: absolute;
	background: rgba(0, 0, 0, 0.5) url('../img/zoom-icon.png') no-repeat scroll center center;
	bottom:0px;
	left:0px;
	right:0px;
	height:0%;	
	z-index:5;			
}
.MGalleryContainer ul li:hover .MGallery-after{
	height:100%;				
}
@media all and (max-width: 767px){
	.MGalleryContainer ul li {
   		display: block;
   		float: left;
   		list-style: none;
   		margin: 0 3% 140px 3%;
   		padding: 0;
   		position: relative;
   		width:27%;
   		right: 50%;
	}
}
@media all and (max-width: 628px){
	.MGalleryContainer ul li {
   		display: block;
   		float: left;
   		list-style: none;
   		margin: 0 3% 140px 3%;
   		padding: 0;
   		position: relative;
   		width:44%;
   		right: 50%;
	}
}
@media all and (max-width: 538px){
	.MGalleryContainer ul li {
   		display: block;
   		float: left;
   		list-style: none;
   		margin: 0 3% 140px 3%;
   		padding: 0;
   		position: relative;
   		width:94%;
   		right: 50%;
	}
}