*{
	margin:0;
	padding:0;}
body{
	background:#999;
	font-family:"Arial Black", Gadget, sans-serif;}
.wrap{
	width:960px;
	margin:0 auto;
	padding-top:200px;
	background:#12446f url(images/002.png) no-repeat left top;}	
	
.list {
	width:960px;
	overflow:hidden;
	margin:20px 50px;}
.list li{
	display:block;
	position:relative;
	float:left;
	margin:20px;
	width:200px;
	height:200px;
	overflow:hidden;
	border-radius:10px;
	border:1px solid rgba(204,204,204,0);
	-webkit-transition:all .5s;
	-moz-transition:all .5s;}
.list li h1{
	position:absolute;
	top:-50px;
	font-size:13px;
	color:#fff;
	text-align:center;
	width:192px;
	padding:4px;
	text-shadow:0 -1px 0 #000;
	box-shadow:0 2px 2px #333;
	border-radius:10px 10px 0 0;
	background-color:rgba(0,0,0,.5);
	-webkit-transition:all .5s;
	-moz-transition:all .5s;}
.list li p{
	position:absolute;
	width:180px;
	height:146px;
	font-size:12px;
	color:#FFF;
	top:34px;
	leftt:0px;
	padding:10px;
	overflow:hidden;
	border-radius:0 0 10px 10px;
	text-shadow:0 1px 0 #333;
	opacity:0;
	-webkit-transition:all .75s;
	-moz-transition:all .75s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform:perspective(300px) rotateY(180deg);
	-moz-transform:perspective(300px) rotateY(180deg);
	background-image:-webkit-gradient(linear, right  bottom, left top, from( rgba(255,255,255,.5)), to(rgba(255,255,255,0)));
	background-image:-moz-gradient(linear, left top, right top, from( rgba(255,255,255,.3)), to(rgba(255,255,255,0)));}
.list li img{
	display:block;
	position:absolute;
	-webkit-transition:all .75s;
	-moz-transition:all .75s;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform:perspective(300px) rotateY(0deg);
	-moz-transform:perspective(300px) rotateY(0deg);
	opacity:1;}
.list li:hover,
.list li:focus{
	background-image:-webkit-gradient(linear, left top, left bottom, from(#3399ff), to(#66ffff));
	background-image:-moz-gradient(linear, left top, left bottom, from(#3399ff), to(#66ffff));
	box-shadow:2px 2px 2px  rgba(0,0,0,.1), inset 0 0 3px #FFFFFF;
	background-image:}	
.list li:hover h1,
.list li:focus h1{
	top:0;}
.list li:hover img,
.list li:focus img
{
	position:absolute;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform:scale(.4,.4);
	-moz-transform:scale(.4,.4);
	-webkit-transform:perspective(300px) rotateY(-180deg);
	-moz-transform:perspective(300px) rotateY(-180deg);
	opacity:0;}
.list li:hover p,
.list li:focus p{
	opacity:1;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	-webkit-transform:perspective(300px) rotateY(0deg);
	-moz-transform:perspective(300px) rotateY(0deg);}