﻿.container2{border:5px solid #D0FF00;}
.css3d {
	display: block; 
	width:240px; 
	height:160px;  
	margin:80px auto;
	perspective:1000px;
}

	.css3d a.oneImg {
	background:url("../img/adaptive1.jpg");
	background-size:100% 100%;
	}
	.css3d a.twoImg {
	background:url("../img/adaptive2.jpg");
	background-size:100% 100%;
	}
	.css3d a.treeImg {
	background:url("../img/adaptive3.jpg");
	background-size:100% 100%;
	}

.css3d a {
	display: block; 
	width: 100%; 
	height: 100%;
	background-size:0, cover;
	
	transform-style:preserve-3d;
	-ms-transform-style: none;
	
	transition:all 0.5s;
}
.css3d:hover a {
	transform:rotateX(80deg);
	transform-origin:bottom;
	
	 -ms-transform: none;
	  -ms-transform-origin:none;
	  
	 
}
.css3d a:after {
	content:''; 
	position:absolute; 
	left:0; 
	bottom:0; 
	width:100%; 
	height:36px;
	background:inherit; 
	background-size:cover, cover;
	background-position:bottom;
	
	transform: rotateX(90deg); 
	transform-origin:bottom;
	
	-ms-transform: none; 
	-ms-transform-origin:none;
}
.css3d a span {
	/*text-transform:uppercase;*/
	position:absolute; 
	top:100%; 
	left:0; 
	width:100%;
	padding-top:10px;
	padding-bottom:10px;
	transform:rotateX(-89.99deg); 
	transform-origin:top;
	
	-ms-transform: none; 
	-ms-transform-origin:none;
	
	z-index:1;
	background:#1159A0;
}

.css3d a:before {
	content:''; 
	position:absolute; 
	top:0; 
	left:0;
	width:100%; 
	height:100%;
	background:rgba(0, 0, 0, 0.5); 
	box-shadow:0 0 100px 50px rgba(0, 0, 0, 0.5);
	transition:all 0.5s; 
	opacity:0.15;
	transform:rotateX(95deg) translateZ(-80px) scale(0.75);
	transform-origin:bottom;
	
	/*-ms-background:none; */
	/*-ms-transform: none; */
	/*-ms-transform-origin:none;*/
}
.css3d:hover a:before {
	opacity:0.5;
	box-shadow:0 0 25px 25px rgba(0, 0, 0, 0.5);	
	transform:rotateX(0) translateZ(-60px) scale(0.85);
	
		
	-ms-transform:rotateX(95deg) translateZ(-80px) scale(0.85);
	
	
	
}


	.float-md {
		float: left;
	}

	@media(min-width: 360px) {
		.css3d {
		width:270px; 
		height:200px;  
		margin:60px auto;
		}
		.css3d a:after { 
		height:41px;
		}
		
	}
	
	@media(min-width: 768px) {
		.css3d {
		width:200px; 
		height:130px;  
		}
		
		.container2{height:100%;border:5px solid #8B8B00;display: block; }
	}
	@media(min-width: 992px) {
		.css3d {
		width:240px; 
		height:160px;  
		}
	}
	@media(min-width: 1208px) {
		.css3d {
		width:320px; 
		height:240px;  
		}
	}
