@charset "utf-8";
/* CSS Document */

img, object, embed, video {
	max-width: 100%;
}
/* IE 6 no admite max-width (anchura máxima), por lo que usa de manera predeterminada una anchura del 100% */
.ie6 img {
	width:100%;
}


* {
	margin: 0;
	padding:0;
	-moz-box-sizing: border-box;
	-o-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing:border-box;
	font-family: sans-serif;
}


iframe {
	style-border: 0;
	width: 435px; 
	height: 430px; 
	frameborder: 0;
	scrolling: none;
}




.contenedor {
	justify-content: space-around;
	display:relative;
	height: 450px;
	width: 450px;
	margin:auto;
	-webkit-perspective: 700;
	
 }
 
 .frente {
	 cursor:progress;
 }


.contenedor bio {
	 justify-content: space-around;
	 background-size: 100vh 100vh;

	  width: auto;
	 height: auto;
	 margin:auto;
	 -webkit-perspective: 700;
	 background:rgb(0,0,0,0.1);
	border-radius: 7px;
	
 } 
 
 .contenedor bio1 {
	 justify-content: space-around;
	 width: auto;
	 height :auto;
	 margin:auto;
	 -webkit-perspective: 700;
	 aling: right;
	 padding-right: 15px;
	
 }
 
 .contenedor2 {
	height: 400px;
	width: 400px;
	
 }
 

 
 
 .cartas, .cartas1, .cartas2 {
	height: 100%;
	width: 100%;
	position: relative;
	transform-style: preserve-3d;
	transition: 3s;
	box-shadow: 0px 0px 100px #fff;
 }

 
 .cartas:hover {
	transform: rotateY(180deg);
 }
 
 .cartas1:hover {
	 transform:rotateY(-180deg);
 }
 
 .cartas2:hover {
	 transform:rotateX(180deg);
 }
 
 .lado, .lado1 {
	height: 100%;
	width: 100%;
	backface-visibility: hidden;
	position: absolute;
	
 }



 .atras, .atras1, .atras2 {
	background: rgba(144,100,48,0.8);
	background: url(../imagenes/posterior.jpg);
	color: rgba(0,0,0,0.8);
	padding-top: 2%;
	padding-left: 2%;
	padding-right: 2%;
	padding-bottom: 5%;
	font-size: 14px;
	overflow: hidden;
	cursor: none;
	
	
 }
 
 .atras {
	 transform: rotateY(180deg);
 }
 
 .atras1 {	
	transform: rotateY(-180deg);
	
 }
 
 .atras2 {
	transform: rotateX(180deg);
 }
 
img {
	height: 100%;
	width: 100%;
}

@media (max-width:768px) {
	
	
	
	.atras, .atras1, .atras2 {
		padding-top: 1%;
		padding-left: 1%;
		padding-right: 1%;
		padding-bottom: 3%;
		/*font-size: 9px;*/
		overflow:hidden;
	 }
	 
	 
	
	
}


@media (max-width:480px) {
	
	
	.atras, .atras1, .atras2 {
		padding-top: 0.8%;
		padding-left: 1.5%;
		padding-right: 1%;
		padding-bottom: 0.2%;	
		font-size: 7.5px;
	
	 }
	 
	.cartas, .cartas1, .cartas2 {
		box-shadow: 0px 0px 20px #fff;
		height: 98%;
		width: 90%;
		position: relative;
		
	 }
	 
	 .contenedor {
		justify-content: space-around;
		display:flex;
		height: 250px;
		width: 280px;
		margin:auto;
		box-sizing:border-box;
	}
	
	iframe {
	style-border: 0;
	width: 250px; 
	height: 280px; 
	frameborder: 0;
	scrolling: none;
	}
	
}