.ma-hiddenres{
display: none;
}
.magic-answers{
max-width:500px;
width: 100%;
height:auto;
position:relative;
margin:10px auto;
}
.magic-answers img{
max-width: 100%;
height: auto;
}
.ma-ball{
overflow: hidden;
}
.ma-flex{
display: flex;
justify-content: center;
align-items: center;
align-content: center;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
z-index: 3;
}
.responso-ball{
color: #fff;
color:rgba(157,189,255,0.8);
position:absolute;
left:30%;
top:30%;
right: 30%;
bottom: 30%;
display:none;
z-index:1;
text-align:center;
cursor: pointer;
}
.responso-ball p{
display: table-cell;
vertical-align: middle;
}
.responso-mouth{
color:#fff;
position:absolute;
left:30%;
top:30%;
right: 30%;
bottom: 30%;
display:none;
z-index:1;
text-align:center;
cursor: pointer;
text-shadow: 1px 1px 2px #000;
}
.ma-palla{
position: relative;
width: 100%;
height: 100%;
float: left;
}
.ma-palla img, .ma-bocca img, .sottopalla{
position:absolute; 
left:0; 
top:0;
cursor: pointer;
}
.sottopalla{
display: none;
} .ma-tarot {
max-width: 300px;
width: 90%;
margin: 20px auto;
position: relative;
-webkit-perspective: 800px;
-moz-perspective: 800px;
perspective: 800px;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
cursor: pointer;
z-index: 1;
}
.ma-tarot img{
float: left;
max-width: 100%;
height: auto;
}
.responso-tarot{
position: absolute;
top: 10%;
left: 15%;
right: 15%;
bottom: 10%;
text-align: center;
box-sizing:border-box;
-moz-box-sizing: border-box;
padding: 0px;
margin: 0;
color: #3c3836;
}
.responso-tarot span{
float: left;
width: 100%;
margin: 2px 0;
padding: 10px 0;
font-weight: normal;
border-top: 4px solid;
border-bottom: 4px solid;
}
.ma-tarot .frontcard {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 900;
width: 100%;
height: inherit;
text-align: center;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.ma-tarot.flip .frontcard {
z-index: 900;
background: #333;
-webkit-transform: rotateY(179deg);
-moz-transform: rotateY(179deg);
transform: rotateY(179deg);
}
.ma-tarot .backcard {
float: none;
position: absolute;
top: 0;
left: 0;
z-index: 800;
width: 100%;
height: inherit;
background: #333;
-webkit-transform: rotateY(-179deg);
-moz-transform: rotateY(-179deg);
transform: rotateY(-179deg);
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
transform-style: preserve-3d;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: all .4s ease-in-out;
transition: all .4s ease-in-out;
-webkit-border-radius: 8px 8px 8px 8px;
border-radius: 8px 8px 8px 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0,0,0,0.4);
-webkit-box-shadow: 0 2px 4px rgba(0,0,0,0.4);
}
.ma-tarot.flip .backcard {
z-index: 1000;
background: #fff;
-webkit-transform: rotateX(0deg) rotateY(0deg);
-moz-transform: rotateX(0deg) rotateY(0deg);
transform: rotateX(0deg) rotateY(0deg);
}
.magic-answers .responso{
display: none;
font-size: 150% !important;
z-index: 2;
}