@import url(https://fonts.googleapis.com/css?family=Quicksand);
body {


	background-color: #90ee90;
	font-family:'Quicksand',sans-serif;
}

.card {

position: absolute;

width:120px;
height:130px;
background: #fff;
transform-style: preserve-3d;
transform: tranlate(-50%,-50%) perspective: (2000px);
box-shadow: inset 300px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
transition: 1s;

}

.card:hover{
transform: tranlate(-50%,-50%) perspective: (2000px);
box-shadow: inset 20px 0 50px rgba(0,0,0,.5), 0 20px 100px rgba(0,0,0,.5);
}

.card:before{

content: '';
position: absolute;
top:-6px;
left:1px;
width: 100%;
height: 5px;
background: #475b02;
transform-origin: bottom;
transform: skewX(-45deg);

}

.card:after{
	content: '';
	position: absolute;
	top:0;
	right: -5px;
	width: 5px;
	height: 100%;
	background: #7ea301;
	transform-origin: left;
	transform: skewY(-45deg);
	
}

.card .imgbox{

	width: 100%;
	height:100%;
	position: relative;
	transform-origin: left;
	transition: 1s;

}

.card:hover .imgbox {
	transform: rotateY(-175deg);

	/*
	-webkit-animation-name: fadeOut;
	animation-name: fadeOut;
	-webkit-animation-duration: s;animation-duration: 1s;
	-webkit-animation-fill-mode: both;animation-fill-mode: both;
	*/

	
}

.card .detalhes {
position: absolute;
top: 0;
left:0;
box-sizing: bordex-box;
padding: 1px;
z-index: -1;


}


@-webkit-keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
 }
 
 @keyframes fadeOut {
	0% {opacity: 1;}
	100% {opacity: 0;}
 }