@charset "utf-8";
/* CSS Document */
/* Image Boxes*/
ul.boxItem {
position: relative;
z-index: 1; /* prevent shadows falling behind containers with backgrounds */
overflow: hidden;
list-style: none;
margin: 0;
padding: 0; }


ul.boxItem li {
position: relative;
float: left;
padding: 5px 5px;
border: 1px solid #efefef;
margin: 5px 15px 5px 5px;
background: #fff;
-webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
-moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset; 
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.06) inset;
border:1px solid #fff;
 }
ul.boxItem li img{border:none; background:none; padding:0px; width:180px;margin:0 auto;}

ul.boxItem li:before,
ul.boxItem li:after {
content: '';
z-index: -1;
position: absolute;
left: 5px;
bottom: 5px;
width: 80%;
max-width: 100px; /* avoid rotation causing ugly appearance at large container widths */
height: 25%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); 
}


ul.boxItem li:after {
left: auto;
right: 10px;
-webkit-transform: skew(15deg) rotate(6deg);
-moz-transform: skew(15deg) rotate(6deg);
-ms-transform: skew(15deg) rotate(6deg);
-o-transform: skew(15deg) rotate(6deg);
transform: skew(15deg) rotate(6deg);
}

ul.boxItem li:hover{
border:1px solid #666;
 -webkit-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
	  -moz-box-shadow: 0px 0px 5px rgba(0,0,0,.8);
	  box-shadow: 0px 0px 5px rgba(0,0,0,.8);
	  cursor:pointer;
}
/*--------------------------------------------------------------*/
@media screen and (max-width: 480px) {
ul.boxItem li:before,
ul.boxItem li:after {
content: '';
z-index: -1;
position: absolute;
left: 5px;
bottom: 5px;
width: 50%;
max-width: 50px; /* avoid rotation causing ugly appearance at large container widths */
height: 25%;
-webkit-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
-webkit-transform: skew(-15deg) rotate(-6deg);
-moz-transform: skew(-15deg) rotate(-6deg);
-ms-transform: skew(-15deg) rotate(-6deg);
-o-transform: skew(-15deg) rotate(-6deg);
transform: skew(-15deg) rotate(-6deg); 
}
	ul.boxItem li {
			position: relative;
			clear:both;
			padding: 5px 5px;
			border: 1px solid #efefef;
			margin:10px auto;			
	 }
	 ul.boxItem li img{width:210px;}

}