﻿.box-list{
	position:relative;
	margin:0 -10px;
	padding:0;
	list-style:none;
	max-width:960px;
}
.box-list li{
	float:left;
	padding:0 0 50px;
}

.img-box{
	border:5px solid #fff;
	position:relative;
	background:#666;
	margin:0 10px;
}
.img-box img{
	display:block;
	width:100%;
	height:auto;
}
.img-box .mask{
	box-shadow:inset 0 0 38px rgba(0, 0, 0, 0.15);
	-moz-box-shadow:inset 0 0 38px rgba(0, 0, 0, 0.15);
	-webkit-box-shadow:inset 0 0 38px rgba(0, 0, 0, 0.15);
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
}
.img-box a{
	position:absolute;
	width:100%;
	height:100%;
	text-align:center;
	top:0;
	left:0;
	font:24px/121px Arial, sans-serif;
	text-transform:uppercase;
	text-shadow:0 1px 1px #333;
	text-decoration:none;
	overflow:hidden;
	cursor:pointer;
	background:#000;
	background:rgba(0,0,0,0.3);
	box-shadow:inset 0 0 40px #666;
	-moz-box-shadow:inset 0 0 40px #666;
	-webkit-box-shadow:inset 0 0 40px #666;
	display:none;
	z-index:1;
}
.img-box:hover a{display:block;}
.img-box:before,
.img-box:after{
	position:absolute;
	z-index:-1;
	content:"";
}


/******** TYPE1 ********/
.img-box.type-1:after{
	top:50%;
	bottom:5px;
	width:90%;
	left:5%;
	border-radius:100%/20%;
	-moz-border-radius:100%/20%;
	-webkit-border-radius:100%/20%;
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.2);
}


/******** TYPE2 ********/
.img-box.type-2:after{
	bottom:50%;
	top:5px;
	width:90%;
	left:5%;
	border-radius:100%/20%;
	-moz-border-radius:100%/20%;
	-webkit-border-radius:100%/20%;
	box-shadow:0 -15px 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0 -15px 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:0 -15px 7px rgba(0,0,0, 0.2);
}

/******** TYPE3 ********/
.img-box.type-3:before,
.img-box.type-3:after{
	top:0;
	width:100%;
	height: 100%;
	border-radius:20%/100%;
	-moz-border-radius:20%/100%;
	-webkit-border-radius:20%/100%;
	box-shadow:-10px 0 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:-10px 0 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:-10px 0 7px rgba(0,0,0, 0.2);
}
.img-box.type-3:before{
	box-shadow:10px 0 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:10px 0 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:10px 0 7px rgba(0,0,0, 0.2);
}

/******** TYPE4 ********/
.img-box.type-4:before,
.img-box.type-4:after{
	top:50%;
	bottom:5px;
	width:90%;
	left:5%;
	border-radius:100%/20%;
	-moz-border-radius:100%/20%;
	-webkit-border-radius:100%/20%;
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.2);
}
.img-box.type-4:before{
	bottom:50%;
	top:5px;
	box-shadow:0 -15px 7px rgba(0, 0, 0, 0.2);
	-moz-box-shadow:0 -15px 7px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow:0 -15px 7px rgba(0,0,0, 0.2);
}


/******** TYPE5 ********/
.img-box.type-5:before,
.img-box.type-5:after{
	bottom:9px;
	left:0;
	width:50%;
	top:80%;
	max-width:300px;
	-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
.img-box.type-5:before{
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	transform:rotate(5deg);
	right:0;
	left:auto;
}
.img-box.type-5:before,
.img-box.type-5:after{width:35%;}
.img-box.type-5:before{
	left:0;
	right:auto;
}
.img-box.type-5:after{
	right:0;
	left:auto;
}


/******** TYPE6 ********/
.img-box.type-6:after{display:none;}
.img-box.type-6:before{
	bottom:9px;
	left:0;
	width:50%;
	top:80%;
	max-width:300px;
	-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
.img-box.type-6:before{left:0;}


/******** TYPE7 ********/
.img-box.type-7:before{display:none;}
.img-box.type-7:after{
	bottom:9px;
	left:0;
	width:50%;
	top:80%;
	max-width:300px;
	-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
.img-box.type-7:after{
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	transform:rotate(5deg);
	right:0;
	left:auto;
}


/******** TYPE8 ********/
.img-box.type-8:before,
.img-box.type-8:after{
	bottom:9px;
	left:0;
	width:50%;
	top:80%;
	max-width:300px;
	-webkit-box-shadow:0 15px 7px rgba(0,0,0, 0.35);
	-moz-box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	box-shadow:0 15px 7px rgba(0, 0, 0, 0.2);
	-webkit-transform:rotate(-5deg);
	-moz-transform:rotate(-5deg);
	-o-transform:rotate(-5deg);
	-ms-transform:rotate(-5deg);
	transform:rotate(-5deg);
}
.img-box.type-8:after{
	-webkit-transform:rotate(5deg);
	-moz-transform:rotate(5deg);
	-o-transform:rotate(5deg);
	-ms-transform:rotate(5deg);
	transform:rotate(5deg);
	right:0;
	left:auto;
}


