/*

products

-----------------------------------------------------------------*/

a {color: #666;}


#products{width:100%; max-width:1200px; margin:0px auto; padding-bottom:20px; z-index: 99;}
#products .catalog{ margin:0px auto;}
#products .catalog li {position: relative;display:inline-block; float:left;width: 23%; height:auto; margin:1%;text-align: center;}
#products .catalog li .img { position: relative; display: block;margin: 0px auto;width: 99%;height: auto;overflow: hidden;border: 1px solid rgba(0,0,0,0.1);background: rgba(255,255,255,1);text-align: center; transition:all .35s;}
#products .catalog li .img:after{ position:absolute; left:50%; bottom:3%; width: 94%; height:0; margin-left:-47%; content:''; background:rgba(0,0,0,.1) url("../images/icon-zoom.png") no-repeat; background-position: center center; background-size:24px auto; transition:all .35s;}
#products .catalog li .img img {display: inline-block;width: 94%;height: auto;margin: 3% auto; transition:all .35s;}
#products .catalog li .name { display: block;width: 90%;font-size: 14px;line-height: 20px;padding: 10px 0px;margin: 0px auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#products .catalog li:hover .img:after{ height:30px;}
#products .catalog li:hover .img img{ opacity:.8;}
#products .type{ border:1px solid #eee; background:#ffffee; text-align:center; color:#999; font-size:16px; padding:15px 0px; margin:20px auto;}
#products .type h3{ color:#000; font-weight:normal; display:inline-block;}
#products .products{ margin:0px auto;}
#products .products li {position: relative;display:inline-block; float:left;width: 18%; height:auto; margin:1%;text-align: center; cursor:pointer; overflow:hidden;}

#products .products li .img { position: relative; display: block;margin: 0px auto;width: 99%;height: auto;overflow: hidden;border: 1px solid rgba(0,0,0,0.1);background: rgba(255,255,255,1);text-align: center; transition:all .35s;}
#products .products li .img:after{ position:absolute; right:0; top:0; width: 0; height:100%; content:''; background:rgba(0,0,0,0) url("../images/icon-zoom.png") no-repeat; background-position: center center; background-size:34px auto; transition:all .35s;}
#products .products li .img img {display: inline-block;width: 94%;height: auto;margin: 3% auto; transition:all .35s;}
#products .products li .name { display: block;width: 90%;font-size: 14px;line-height: 20px;padding: 10px 0px;margin: 0px auto;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
#products .products li .drawing{ position:absolute; z-index:9; top:0; left:0; opacity:0; height:82.4%; background:#fff; border:2px solid rgba(0,155,76,1); border-left:0px; transition:all .35s;}
#products .products li .drawing img{ height:100%; width:auto;}
#products .products li:hover{ overflow:inherit;}
#products .products li:hover:after{ opacity:1;}
#products .products li:hover .name{ color:#333;}
#products .products li:hover .img:after{ width:100%;}
#products .products li:hover .img img{ opacity:.8;}
#products .products li:hover .drawing{ left:99%; opacity:1;}
#products .products li:nth-child(5n):after{ border-left:0px;border-right:2px solid rgba(0,155,76,1);}
#products .products li:nth-child(5n) .drawing{ border-left:2px solid rgba(0,155,76,1); border-right:0px;}
#products .products li:nth-child(5n):hover .drawing{ right:99%; left:auto;}

@media only screen and (max-width: 900px){
	
  #products{width:90%;}
  #products .catalog li {width: 98%; margin:1%;}
  #products .type{ font-size:12px;}
  #products .type h3{ color:#000; font-weight:normal; display:inline-block;}
  #products .products li {width: 31.2%; margin:1%;}
}
@media only screen and (max-width: 360px){
  #products .products{ margin:0px auto;}
  #products .products li {width: 48%; margin:1%;}
  #products .products li .img { width: 98.6%;}

}