body{ font-family: 'Exo 2', sans-serif; background:#f9f9f9 }
.user-content-holder{ height:256px; width:100%; position:absolute; left:0; right:0; bottom:0; top:0; margin:auto; }
.user-container{ 
display:flex; justify-content:space-evenly;
}
.user-box{
	height:254px; width:250px; margin-bottom:45px; position:relative;
	border-radius:4px;
	background:#fff;
	box-shadow: 0px 0px 10px 1px rgba(204, 204, 204, 0.2);
    -webkit-box-shadow: 0px 0px 10px 1px rgba(204, 204, 204, 0.2);
    -moz-box-shadow: 0px 0px 10px 1px rgba(204, 204, 204, 0.2);
}
  
.user-box:hover{ cursor:pointer; }
.user-box:hover img{  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%); }
.user-caption{ background:rgba(178,48,77,1); position:absolute; bottom:0; left:0; width:100%; text-align:center; padding:10px; color:#fff; font-size:20px; text-transform:capitalize; border-radius:0 0 4px 4px;  }
@media screen and (max-width: 1024px) {
	.user-container{
	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
	}
	.user-content-holder{ height:708px; }
	.user-box{ height:330px; width:342px; }
}
@media screen and (max-width: 767px) {
	
	.user-container{
	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
	}
	.user-content-holder{ height:auto; }
	.user-box{ height:317px; width:327px; }
	.user-box:first-child{ margin-top:45px; }
}