

/* GRID */
.grid { overflow: hidden; width:980px; list-style:none; margin:0; padding:0; }

.grid li { border-bottom: 1px solid #ffffff; border-right: 1px solid #ffffff; float: left; overflow: hidden; position: relative; height:195px; width: 195px; margin:0; padding:0; background-color:#d9d9d9; -webkit-box-sizing: border-box; -moz-box-sizing: border-box;  box-sizing: border-box; /* -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out;*/ }

.grid li a { display: block; }
/*.grid img { display: block; height: 195px; width: 100%; opacity: .65; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=65)"; 	filter: alpha(opacity=65); -webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; 	-ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out; }
.grid li:hover img { opacity:1; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opacity=100); }*/ 

.grid img { display: block; height: 195px; width: 100%; /*-webkit-transition: all .3s ease-in-out; -moz-transition: all .3s ease-in-out; -o-transition: all .3s ease-in-out; -ms-transition: all .3s ease-in-out; transition: all .3s ease-in-out;*/ 
filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale"); /* Firefox 10+, Firefox on Android */
filter: gray; /* IE6-9 */
-webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */ }

.grid li:hover img, .grid li.active img { filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%);} 



/* CLIENTS */
#clients .campaign img { opacity: 1; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=100)"; filter: alpha(opaity=100); filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'1 0 0 0 0, 0 1 0 0 0, 0 0 1 0 0, 0 0 0 1 0\'/></filter></svg>#grayscale");
-webkit-filter: grayscale(0%); }
#clients .campaign .grayscale_img { opacity:.4; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); }
/*#clients .campaign .original_img { opacity:0; -ms-filter:"progid: DXImageTransform.Microsoft.Alpha(Opacity=0)"; filter:alpha(opacity=0); }*/

#clients .grayscale_img { left: 0; position: absolute; top: 0;  }

#clients li:hover .original_img,
.ie7 #clients li:hover a img,
.ie8 #clients li:hover a img  {
	 opacity: 1;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";
		filter: alpha(opacity=100); }
#clients li:hover .grayscale_img { 
	 opacity: 0;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)";
		filter: alpha(opacity=0); }
#clients p .original_img { 	 opacity: 0 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=0)" !important;
		filter: alpha(opacity=0) !important; }
#clients p .grayscale_img {
	 opacity: .4 !important;
-ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)" !important;
		filter: alpha(opacity=40) !important; }


/* CLIENTS */
.client { height: auto; }

#clients .campaign:hover { background: transparent; }
#clients .campaign { display: none; }
#clients .campaign p img { opacity: .4; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=40)"; filter: alpha(opacity=40); }
#clients .inactive img { opacity: .3; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=30)"; filter: alpha(opacity=30); }
#clients .active img { opacity: 1; -ms-filter: "progid: DXImageTransform.Microsoft.Alpha(Opacity=100)";	filter: alpha(opacity=100); }

/*Brands background colors*/
#clients .brand71:hover,
#clients .brand71.active { background: #e31e25; } /*For Navratna*/
#clients .brand72:hover,
#clients .brand72.active { background: #803182; } /*For Boroplus*/
#clients .brand73:hover,
#clients .brand73.active { background: #9ed18e; } /*For Zandu*/
#clients .brand74:hover,
#clients .brand74.active { background: #c5c4c6; } /*For Fair and Handsome*/
#clients .brand75:hover,
#clients .brand75.active { background: #fad677; } /*For Mentho Plus*/
#clients .brand76:hover,
#clients .brand76.active { background: #f1433b; } /*For Fast Relief*/
#clients .brand77:hover,
#clients .brand77.active { background: #e8d589; } /*For Sona Chandi Chyawanprash*/
#clients .brand78:hover,
#clients .brand78.active { background: #cd0021; } /*For Kesari Jivan*/
#clients .brand79:hover,
#clients .brand79.active { background: #73d268; } /*For Vasocare*/
#clients .brand80:hover,
#clients .brand80.active { background: #ffdc62; } /*For Cold Cream*/
#clients .brand81:hover,
#clients .brand81.active { background: #ffb600; } /*For Healthy & Fair*/
#clients .brand82:hover,
#clients .brand82.active { background: #065234; } /*For Emami Golden Beauty*/
#clients .brand83:hover,
#clients .brand83.active { background: #f4b8d4; } /*For Naturally Fair*/
#clients .brand84:hover,
#clients .brand84.active { background: #feecc8; } /*For Aroma Miracle*/
#clients .brand85:hover,
#clients .brand85.active { background: #0f5a91; } /*For Other brands*/
#clients .brand86:hover,
#clients .brand86.active { background: #f1a209; } /*For Zandu Healthcare */
#clients .brand87:hover,
#clients .brand87.active { background: #edf2eb; } /*For Emami malai kesar */
#clients .brand88:hover,
#clients .brand88.active { background: #f6f195; } /*For Health & Fair */
#clients .brand89:hover,
#clients .brand89.active { background: #f5f4f2; } /*For Aroma Miracle  */

