body {
background-image:url(881.png);
margin:0;
}

.base {
position:relative;
width:884px;
height:425px;
margin:0 auto;
padding:6px;
}

.titulo {
width:560px;
border:6px solid #D2691E;
text-align:center;
background-color:#E6E6AA;
-webkit-border-radius:5px;
-webkit-border-bottom-right-radius:40px;
-webkit-border-bottom-left-radius:40px;
-moz-border-radius:5px;
-moz-border-radius-bottomright:40px;
-moz-border-radius-bottomleft:40px;
border-radius:5px;
border-bottom-right-radius:40px;
border-bottom-left-radius:40px;
margin:-5px auto 10px;
padding:5px;
}

.pe {
position:relative;
text-align:center;
margin-top:10px;
font-family:palatino linotype, palatino, serif;
}

.cadro {
float:left;
width:210px;
height:200px;
perspective:1000px;
-webkit-perspective: 600px;
margin:5px;
}

.cadrom {
width:100%;
height:100%;
transform-style:preserve-3d;
-webkit-transform-style: preserve-3d;
transition:all 1s linear;
-webkit-transition:all 1s linear;
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
border:2px solid #ccc;
background-color:#FFF;
}

.cadrov .cadrom {
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
-o-transition: all .4s ease-in-out;
-ms-transition: all .4s ease-in-out;
-moz-transition: all .4s ease-in-out;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
}

.face {
position:absolute;
width:100%;
height:100%;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
box-shadow:2px 2px 10px #222222;
}

.imax {
position:absolute;
left:0;
right:0;
height:98px;
width:98px;
margin:10px auto auto;
}

.texto {
position:absolute;
top:114px;
text-align:left;
font:18px tahoma;
margin:7px;
}

.textorev {
text-align:left;
font:18px tahoma;
margin:7px;
line-height:14pt;
}
.titcadro {
text-align:center;
font:bold 24px tahoma;
margin-top:-2px;
margin-bottom:-5px;
}
.info {
position:absolute;
bottom:6px;
left:0;
font:bold 18px tahoma;
width:100%;
height:30px;
background-color:#aaa;
text-decoration:none;
}

.info:hover {
background-color:#F0F;
color:#FFF;
}

.docu {
display:none;
width:400px;
height:400px;
}

.face.back {
display:block;
transform:rotateY(180deg);
-webkit-transform:rotateY(180deg);
color:#333;
text-align:center;
background-color:#E0FFFF;
}