/* 1260 / 3 = 420 */

#container{ width:100%; margin: 0 auto;}

#container li{ position:relative;width: 30%; border: 1px solid #ccc; height: auto; text-align: center; margin:1.5%; float: left; cursor: pointer;  overflow: hidden; }

#container li p{ width: 100%; height:100%; position: absolute; left: 0; top: -100%; color: #ffffff;
  z-index: 2; }
#container li .img{ width: auto; max-width:100%; height: auto; text-align:center;
  -moz-transition:.5s ease-in;
  -webkit-transition:.5s ease-in;
  -o-transition:.5s ease-in;
  -ms-transition:.5s ease-in;
  transition:.5s ease-in;}
#container li:hover .img{ transform:scale(1.5,1.5);-moz-transform:scale(1.5,1.5);-webkit-transform:scale(1.5,1.5);-o-transform:scale(1.5,1.5)}
#container li p span{ display: block; width: 94%; margin: 0 auto; line-height: 24px; font-size: 12px; padding-top:90%;}
/*#container li p a{ display: block; position: absolute; width: 32px; height: 32px; left:50%;  top:50% !important; margin:-16px 0 0 -16px !important; background:url(../img/link.png) no-repeat 0 0;}*/
#container li p a{ display: block; position: absolute; width: 100%; height: 100%; left:0 !important;  top:0 !important; background:url(../img/link.png) no-repeat center center; z-index:2;}
#container li p i{ width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0;z-index: -1;background: #000; opacity: 0.4; -moz-opacity:0.4; filter:alpha(opacity=40); font-size: 16px; }

@media only screen and (max-width: 1366px) {

}

@media only screen and (max-width: 1280px) {

}

@media only screen and (max-width: 1024px) {

}

@media only screen and (max-width: 800px) {
#container li { border:none;}
}

@media only screen and (max-width: 640px){
#container li { border:none;}
}

@media only screen and (max-width: 480px) {
#container li { border:none;}
}

@media only screen and (max-width: 320px) {
#container li { border:none;}
}