/* Efecto Poemas */
.maincontainer{
width: auto;
height: auto;
background: none;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
/* THE CARD HOLDS THE FRONT AND BACK FACES */
.thecard{
top: 0;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
transform-style: preserve-3d;
transition: all 0.8s ease;
}
/* THE PSUEDO CLASS CONTROLS THE FLIP ON MOUSEOVER AND MOUSEOUT */
.thecard:hover{
transform: rotateY(180deg);
}
/* THE FRONT FACE OF THE CARD, WHICH SHOWS BY DEFAULT */
.thefront{
top: 0;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
backface-visibility: hidden;
overflow: hidden;
background: #ffc728;
color: #000;
}
/* THE BACK FACE OF THE CARD, WHICH SHOWS ON MOUSEOVER */
.theback{
top: 0;
left: 0;
width: auto;
height: auto;
border-radius: 10px;
backface-visibility: hidden;
overflow: hidden;
background: #fafafa;
color: #333;
text-align: center;
transform: rotateY(180deg);
}
/*This block (starts here) is merely styling for the flip card, and is NOT an essential part of the flip code */
.thefront .h1 .theback .h1{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: bold;
font-size: 24px;
text-align: center;
}
.thefront .p .theback .p{
font-family: 'zilla slab', sans-serif;
padding: 30px;
font-weight: normal;
font-size: 12px;
text-align: center;
}
.container{
color:black
}
.pm-frame {
border-radius: .2em;
margin: 1em 0 2em 0;
box-shadow: 0 0 .3em #999;
transition: all 0.25s;
}
.pm-frame:hover{
transform: translateY(-15px);
box-shadow: 0 12px 16px rgba(0, 0, 0, 0.2);
}
.pm-frame:after {
display: block;
content: "";
clear: both;
}
.pm-frame-header {
border-radius: .2em;
color: #fff;
padding: .4em .8em .5em;
font-weight: bold;
}
.pm-frame-header:before {
display: inline-block;
/* Add some content in order to get normal line height, then make it transparent */
content: "x";
color: transparent;
width: 40px;
opacity: .7;
background-size: 27px;
background-repeat: no-repeat;
background-position: left center;
}
.pm-content-rtl .tb-frame-header:before {
background-position: right center;
}
.pm-frame-body {
padding: 1em;
}