/* Body & Image List Styles
-------------------------------------------------------------- */
.list_img-list {
list-style: none;
padding:5% 0;
margin: 0;
}
.list_img-list li {
border: 5px solid transparent;
box-sizing: border-box;
width:23.2%;
margin:10px 10px;
float: left;
position: relative;
cursor: pointer;
}
.list_img-list img {
max-width: 100%;
vertical-align: middle;
}

/* Image Placeholder Styles
-------------------------------------------------------------- */
.list_img-placeholder:before,
.list_img-placeholder:after {
padding-top:25%;
content: "";
display: block;


}  
.list_img-placeholder {
background: #222;
box-shadow: 0 0 0 8px #222 inset, 0 0 0 9px #333 inset;
color: #444;
line-height: 0;
text-align: center;
display: block;
}

/* The hover effect
-------------------------------------------------------------- */
.list_img-list li:before {
transition: all .5s ease;
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #333;
transform: scale(0);
}
.list_img-list li:hover:before {
opacity: .5;
transform: scale(1);
}
.list_img-list li:after {
transition: all .6s ease .2s;
content: "";
position: absolute;
top: 8px;
left: 8px;
right: 8px;
bottom: 8px;
border: 1px solid #aaa;
background: #000;
opacity: 0;
transform: scale(0);
}
.list_img-list li:hover:after {
opacity: .35;
transform: scale(1);
}
.products_overlay{
    width:100%;
	height:30%;
	position:absolute;
	z-index:999;
	background:rgba(153,153,0,0.9);
	background-size:cover;
	bottom:8%;
}
.products_overlay h1{
	font-size:22px;
	color: #fff;
	text-transform:uppercase;
    text-align:center;
	font-weight:lighter;
	padding:5% 0;
}


.products_overlay h1 span{
	
    font-weight:bold;
}