@charset "utf-8";

/*===========TEMPLATE NAME============*/
/*===========POWERED BY MERIDIAN INC ============*/

/***********Masonry- Gallery******/

.grid{
	width:20% !important;
	float:left;
	position:relative;
	overflow:hidden;
	
}



.masonry-grid {
  width: 100%;
  float:left;
  position:relative;
  overflow:hidden;
  display:block;
  border-top:1px solid #fff;
	border-left:1px solid #fff;

}
.masonry-grid img{
	width:100%;
	display:block;
}
.masonry-grid a{}
 
.masonry-grid a figcaption{
  background-color:rgba(255, 255, 255 ,0.6);
  border:5px solid #bed730;
  padding: 0;
  position: absolute;
  top: 0;
  left: 0;
  width:100%;
  height:100%;
  z-index:2;
 
   -webkit-transition: all 0.35s ease;
  transition: all 0.35s ease;
   opacity: 0;
  -webkit-transform: scale(0.5);
  transform: scale(0.5);
}

.masonry-grid a:hover figcaption{
-webkit-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}

/**********************************/

.masonry-grid a figcaption:after,
.masonry-grid a figcaption:before {
  width: 200%;
  height: 200%;
  -webkit-transition: all 0.6s ease;
  transition: all 0.6s ease;
  opacity: 0.75;
  background-color:#6dc067;
  position:absolute;
  left:0;
  top:0;
  z-index:-2;
  content:'';
}
.masonry-grid a figcaption:after {
  -webkit-transform: skew(45deg) translateX(-100%);
  transform: skew(45deg) translateX(-100%);
}
.masonry-grid a figcaption:before {
  -webkit-transform: skew(45deg) translateX(100%);
  transform: skew(45deg) translateX(100%);
}
.masonry-grid a figcaption:hover:after {
  -webkit-transform: skew(45deg) translateX(0%);
  transform: skew(45deg) translateX(0%);
   opacity: 0;
}
.masonry-grid a figcaption:hover:before {
  -webkit-transform: skew(45deg) translateX(0%);
  transform: skew(45deg) translateX(0%);
   opacity: 0;
}
 

.masonry-icon{
	width:60px;
	height:60px;
	display:inline-block;
	background-image: url(../images/zoom-icon.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-color:rgba(0,0, 0, 0.2);
}
.masonry-icon:hover{
	background-color:#bed730;
}


/***********************640 px *************************************/

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

.grid{
	width:50% !important;


}
}