
.products-container ul {
	list-style:none;
	margin:0;
	padding:0
}
.products-container ul h2 {
	text-transform:uppercase;
	max-width:330px;
	font-size:32px;
	border-bottom:1px solid #666
}
.products-container .system-list li {
	margin-bottom:70px
}
.products-container .product-list {
	overflow:hidden;
	margin:20px 0 0 0
}
.products-container .product-list:last-child {
	margin:20px 0 0 0
}
.products-container .product-list li {
	width:30%;
	margin-right:1%;
	margin-bottom:1%;
	float:left;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	position:relative;
	height:225px;

}
.products-container .product-list li:nth-child(5n+5) {
margin-right:0
}

.products-container .product-list li{filter: grayscale(0%);
    -webkit-filter: grayscale(0%); 
    filter: none;
    -webkit-transition: all .6s ease;}
.products-container .product-list li img {
	position:absolute;
	
	bottom:0;
	right:0;
filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;z-index:4000;
	
}.products-container .product-list li a{font-size:16px; text-align:right; text-transform:uppercase;bottom:0;
	right:0; background:#fff;float:right;}
.products-container .product-list li:hover {
	filter: grayscale(0%);
    -webkit-filter: grayscale(0%);
    filter: none;background-size:110%
}


/*  #Mobile (Portrait) - Note: Design for a width of 320px */
@media only screen and (max-width: 767px) {


.products-container .product-list li {
	width:98%;
	margin-right:1%;
	margin-bottom:1%;
	float:left;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	position:relative;
	height:194px;
	-moz-transition:background-size 250ms ease-in-out;
	-o-transition:background-size 250ms ease-in-out;
	-webkit-transition:background-size 250ms ease-in-out;
	transition:background-size 250ms ease-in-out
}
}


/* #Mobile (Landscape) - Note: Design for a width of 480px */
@media only screen and (min-width: 480px) and (max-width: 767px) {

.products-container .product-list li {
	width:98%;
	margin-right:1%;
	margin-bottom:1%;
	float:left;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	position:relative;
	height:194px;
	-moz-transition:background-size 250ms ease-in-out;
	-o-transition:background-size 250ms ease-in-out;
	-webkit-transition:background-size 250ms ease-in-out;
	transition:background-size 250ms ease-in-out
}
  
}
@media only screen and (min-width:767px) and (max-width: 800px) {
.products-container .product-list li {
	width:48%;
	margin-right:1%;
	margin-bottom:1%;
	float:left;
	background-position:center;
	background-repeat:no-repeat;
	background-size:100%;
	position:relative;
	height:194px;
	-moz-transition:background-size 250ms ease-in-out;
	-o-transition:background-size 250ms ease-in-out;
	-webkit-transition:background-size 250ms ease-in-out;
	transition:background-size 250ms ease-in-out
}
}