/*---- MASONRY ---- */

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
}

#abmasonry {
  margin: 0 auto;
  opacity:0;
  }

#abmasonry .item {
  width:  250px;
  height: auto;
  float: left;
  margin-bottom: 30px;
}

.videogrid {
width:250px;
height:auto;
}

.box .caption {  
    background-color: rgba(0,0,0,0.3);  
    position: absolute;  
    color: #fff;  
    z-index: 100;  
    -webkit-backface-visibility: hidden;
    -webkit-transition: all 300ms ease-out;  
    -moz-transition: all 300ms ease-out;  
    -o-transition: all 300ms ease-out;  
    -ms-transition: all 300ms ease-out;  
    transition: all 300ms ease-out;  
    left:0;
    top:0;
}  

.box .fade-caption, .box .scale-caption {  
    opacity: 0;  
    width: 100%;  
    height: 100%;  
    text-align: center; 
    display:block; 
}  

.box:hover .fade-caption {  
    opacity: 1;  
}  

.photographer {
font-weight:700;
}

.box .caption h5 {
text-transform: uppercase;
}

.content {
	margin: 10px 0 0;
	width: 100%;
	float: left;
	position: relative;
}

.item:last-child {
	margin-bottom: 40px;
}

.item {
	position: absolute;
	width: 224px;
	height: 170px;
	float: left;

	-webkit-transition: .6s all ease;
	-moz-transition: .6s all ease;
	-o-transition: .6s all ease;
	transition: .6s all ease;
}

.item .box {
background-repeat: no-repeat;
background-postition: center center; 
-webkit-background-size: cover; 
-moz-background-size: cover;
-o-background-size: cover;  
background-size: cover;
}