body.single-card-reading-no-scroll {
    overflow:hidden;
}

.Modal {
    min-height: 100% !important;
    width: 100% !important;
    height:auto;
    position: absolute;
    top: 0;
    left: 0;
    margin: 0px !important;
    z-index: 9999;
    color:#fff;
}

.instructions {
    padding:10px 60px 10px 0;
    color:var(--mk-gold);
    font-size:1.5rem;
    display:block;
    text-shadow:0 0 5px rgba(0,0,0,.1);
}


.single-card-holder {
    
    background-image: url(https://img.micheleknight.com/MICHELEKNIGHTWITHTAROTlowres-scaled.jpg) ;
    background-repeat: no-repeat;
    background-size:cover;
    width:100%;
    max-width:820px;
    height:700px;
    overflow: hidden;
    margin-bottom:1rem;
    margin-left:auto;
    margin-right:auto;
}

.single-card-reading-welcome-screen {

    /* background:rgba(255,255,255,0.3); */
    width:calc(100% - 250px);
    height:100%;
    padding:40px;

}
.single-card-reading-welcome-screen h2:before { 
    content:none; 
}
.single-card-reading-welcome-screen h2 { 
    color:var(--mk-gold) !important; 
    padding:0; 
    margin:0;
    font-weight:bold;
    font-size:2rem;
    text-shadow:0 0 5px rgba(0,0,0,.1);
}
@media(min-width:768px) {
    .single-card-reading-welcome-screen .button {
        display:inline-block;
    }
    
}
.single-card-reading-gameboard-holder {
    position:relative;
    background:rgba(255,255,255,0.3);
    width:100%;
    height:100%;
    padding:20px;
    display:none;
}
.single-card-reading-board {
    position: relative; 
    height:auto;
    width:100%;
    height:calc(100% - 80px);
    font-size: 0.65rem;
}

.single-card-reading-card-message {
    width: calc(50% - 60px);
    height: 100%;
    position: absolute;
    right: 0px;
    top: 0px;
    margin: 0;
    z-index: 97 !important;
    display: none;
    background: rgba(255,255,255,.9);
    padding: 20px 30px 20px 30px;
    color:#363c3f;
    overflow: visible;    
}
.single-card-reading-card-message h3 { font-size:1.3em; color:var(--mk-gold); }
.single-card-reading-card-message .card-image {
    height:50vh;
    width:auto;
    border-radius:.75rem;
    margin:1rem 0;
    position:relative;
    left:50%;
    transform:translateX(-50%);
    display:none;
}
.single-card-reading-card-message .card-name { font-weight:bold; margin-bottom:20px; }
.single-card-reading-card-message .card-message { line-height: 1.5em;}

.single-card-reading-card-message .game-controls {
    width:100%; height:30px; padding: 0; margin: 0; position: relative;
}
.single-card-reading-card-message .game-controls li { width:48%; height: 30px; list-style: none; padding: 0; margin: 0; display: inline-block; }

.single-card-reading-card-message .game-controls li.control-left {position: absolute; top:0; left:0; }
.single-card-reading-card-message .game-controls li.control-right {position: absolute; top:0; right:0; }

.single-card-reading-card-message .game-controls li a { 
    display:block; width:100%; line-height: 100%;
    color:var(--mk-gold); 
    text-decoration: none;
    font-size:0.8em;
    cursor: pointer;
}
@media(max-width:767px) {
    .single-card-reading-card-message .game-controls li a {
        font-size:1rem;
    }
}

.single-card-reading-card-message .game-controls li a.next-card { 
    text-align: right;
}
.single-card-reading-card-message .game-controls li .start-again { 
    text-align: right; 
}
.single-card-reading-game-instruction {
    padding:10px 0; 
    color:var(--mk-gold); 
    display:block;
    width:50%;
    height:80px;
    font-weight:bold;
}
.single-card-reading-mobile-close {
    display:none;
    position:absolute;
    top:20px;
    right:20px;
    color:var(--mk-gold);
}

.tarot-reading-card {
    width: 180px;
    height: 300px;
    background:transparent;
    cursor: pointer;
    display:block;
    position: absolute;
    left: 0px;
    top: 0px;
    perspective:1000px; 

    -webkit-backface-visibility: hidden;

    -webkit-transition-property: width height left top;
    -webkit-transition-duration: 0.5s;
    -webkit-transition-timing-function: linear;
    transition-property: width height left top;
    transition-duration: 0.5s;
    transition-timing-function: linear;

    animation-fill-mode: both;
}

.card-1 {
    left:50%;
    top:40%;
    transform:translate(-50%, -50%);
    z-index: 97;
}

.card-2 {
    left: 11.375em;
      top: 14.375em;
    z-index: 96;
}

.card-3 {
    left: 11.375em;
    top: 23.125em;
    z-index: 95;
}

.card-4 {
    left: 4.25em;
    top: 14.375em;
    z-index: 94;
}

.card-5 {
    left: 11.375em;
      top: 5.625em;
    z-index: 93;
}

.card-6 {
    left: 18.375em;
      top: 14.375em;
    z-index: 92;
}

.card-7 {
    left: 32em;
      top: 27.5em;
    z-index: 91;
}

.card-8 {
    left: 32em;
      top: 18.75em;
    z-index: 90;
}

.card-9 {
    left: 32em;
      top: 10em;
    z-index: 89;
}

.card-10 {
    left: 26.5em;
      top: 1.25em;
    z-index: 88;
}

.card-11 {
    left: 32em;
    top: 1.25em;
    z-index: 87;
}

.card-12{

    left: 37.5em;
    top: 1.25em;
    z-index: 86; 

}

.flip-card {
    position: relative;
    width:100%;
    height: 100%;
    border-radius: .75rem;
    -webkit-transition: transform .8s;
    -webkit-transform-style: preserve-3d;
    transition: transform .8s;
    transform-style: preserve-3d;
}

.tarot-reading-card.rotated {
    -webkit-transform:rotate(-90deg);
    -moz-transform:rotate(-90deg);
    transform:rotate(-90deg); 
}
.tarot-reading-card.rotated .flip-card {
    box-shadow: 0.0625em 0em  0.125em rgba(0, 0, 0, 0.15);
}

.tarot-reading-card.flipped .flip-card {
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
    transform:rotateY(-180deg);
}

.card-front, .card-back {
    position: absolute;
    width:100%;
    height:100%;
    border-radius: .75rem;
    -webkit-backface-visibility: hidden;
    backface-visibility:hidden;
    background:rgba(0,0,0,1);
    -webkit-transform:rotateX(0deg);
    -moz-transform:rotateX(0deg);
    transform: rotateX(0deg);
}

.card-front {
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
    transform:rotateY(180deg);
}

.card-front img, .card-back img {
    width:100%;
    height:100%;
    border-radius: .75rem;
/*    position: absolute;
    top:0;
    left:0;
    width:5em; */
}

.card-back .card-number {    
    color: #fff;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    font-size: 2em;
    margin: 0 0 0 0;
    padding:0;
    display: block;
}

@media(min-width:768px) {
    .card-back .card-number {
        top:10%;
    }
}

.tarot-reading-card.zoomed {

    width:300px;
    height:507px;
    position:absolute;
    left:calc(50% - 340px);
    top:20px;
    margin:0;
    z-index:97 !important;
    transform:none;

}
/* @media(min-width:768px) {
    .tarot-reading-card.zoomed {
        left: calc(50% - 245px);
        width: 180px;
        height: 300px;
    }
} */
@media(min-width:992px) and (max-width:1200px) {
    .tarot-reading-card.zoomed{
        left:calc(50% - 215px);
        width:180px;
        height:300px;
    }
}
.tarot-reading-card.zoomed .card-front,
.tarot-reading-card.zoomed .card-back,
.tarot-reading-card.zoomed .card-front img, 
.tarot-reading-card.zoomed .card-back img {
    border-radius: .75rem;
}
.tarot-reading-card.rotated.zoomed {
    -webkit-transform:rotate(0deg);
    -moz-transform:rotate(0deg);
    transform:rotate(0deg);  
}




 
 @keyframes wobble { 
    0% { transform: translate(1px, 1px) rotate(0deg); }
    10% { transform: translate(-1px, -2px) rotate(-1deg); }
    20% { transform: translate(-3px, 0px) rotate(1deg); }
    30% { transform: translate(3px, 2px) rotate(0deg); }
    40% { transform: translate(1px, -1px) rotate(1deg); }
    50% { transform: translate(-1px, 2px) rotate(-1deg); }
    60% { transform: translate(-3px, 1px) rotate(0deg); }
    70% { transform: translate(3px, 1px) rotate(-1deg); }
    80% { transform: translate(-1px, -1px) rotate(1deg); }
    90% { transform: translate(1px, 2px) rotate(0deg); }
    100% { transform: translate(1px, -2px) rotate(-1deg); }
 }
 
 .wobble {  
    animation: wobble 0.5s; 
 }


 @keyframes heartbeat
{
  0%
  {
    transform: scale( 1 );
  }
  20%
  {
    transform: scale( 1.1 );
  }
  40%
  {
    transform: scale( 1 );
  }
  60%
  {
    transform: scale( 1.1 );
  }
  80%
  {
    transform: scale( 1 );
  }
  100%
  {
    transform: scale( 1 );
  }
}

.heartbeat {
    animation: heartbeat 2s infinite;
}




@media(max-width:767px) { 

    .single-card-holder {
      
        background-size:cover;
    
        width:100% !important; 
        max-width:100% !important;

        height:360px;
        position: relative;
        overflow: visible;
    }
    
    .single-card-reading-welcome-screen {
        width:100%;
        height:auto;
        padding:40px;
        top:50%;
        position:absolute;
        -webkit-transform:translateY(-50%);
        transform:translateY(-50%);
    }
    .single-card-reading-welcome-screen h2 {
        text-shadow:0 0 5px rgba(0,0,0,1);
        color:white !important;
        font-weight:bold;
    }
    .single-card-reading-welcome-screen p {
        text-shadow:0 0 5px rgba(0,0,0,1);
        color:#fff;
    }
    .single-card-reading-gameboard-holder {  
        background-image: url(https://img.micheleknight.com/MICHELEKNIGHTWITHTAROTlowres-scaled.jpg) ;
        background-repeat:no-repeat;
        background-position:center;
        background-size:cover;
        box-shadow: inset 0 0 200px 200px rgba(255, 255, 255, 0.3);
        position: fixed;
        right: 0px;
        top: 0px;
        margin: 0;
        width: 100%;
        height:auto !important;
        min-height:100%;
        overflow:hidden;
        z-index:9999;
    }
    
    .single-card-reading-card-message-container {
        height:80%;
        overflow:scroll;
        position:relative;
        z-index:9999;
    }
    
    .single-card-reading-card-message {
        width: 100%;
        height:auto !important;
        min-height:100%;
        background:#fff;
    }
    
    .single-card-reading-card-message .card-image {
        display:block;
        margin-bottom:2rem;
    }

    .card-1 {
        /*left: 20%;*/
        top:285px;
    }
    
    .card-2 {
        left: 20%;
        top:285px;
    }
    
    .card-3 {
        left: 20%;
        top:360px;
    }
    
    .card-4 {
        left: 0px;
        top:285px;
    }
    
    .card-5 {
        left: 20%;
        top: 200px;
        z-index: 93;
    }
    
    .card-6 {
        left: 40%;
        top:285px;
        z-index: 92;
    }
    
    .card-7 {
        left: auto;
        right:16%;
        top: 360px;
        z-index: 91;
    }
    
    .card-8 {
        left: auto;
        right:16%;
        top: 285px;
        z-index: 90;
    }
    
    .card-9 {
        left: auto;
        right:16%;
        top: 210px;
        z-index: 89;
    }
    
    .card-10 {
        left: auto;
        right:32%;
        top: 140px;
        z-index: 87;
    }
    
    .card-11 {
        left:auto;
        right:16%;
        top: 140px;
        z-index: 86;
    }
    
    .card-12{
        
        left:auto;
        right: 0;
        top: 140px;
        z-index: 85; 
    
    }

    .tarot-reading-card.zoomed {

        /* width:300px;
        height:507px;
    position:absolute; */
        left:20px;
        top:20px;

    
    }
    

}



@media(min-width:992px) and (max-width:1200px) {
    .single-card-reading-card-message-container {
        height:90% !important;
        overflow:scroll;
        position:relative;
        z-index:9999;
    }
}

/* iPhone 5/SE */
@media(max-width:320px) {
    .tarot-reading-card {
        width:4em;
        height:6em;
    }
    .card-4, .card-1, .card-2, .card-6, .card-8 {
        top:225px;
    }
    .card-10, .card-11, .card-12 {
        top:80px;
    }
    .card-3 {
        top:140px;
    }
    .card-9 {
        top:150px;
    }
    .card-5, .card-7 {
        top:300px;
    }
}
/* End iPhone 5/SE */

@media(min-width:768px) and (max-width:1200px) { 

    .single-card-holder {
        background-color: red;
        width:100% !important; 
        max-width:100% !important;
        height:500px;
        overflow: hidden;
    }

    .single-card-reading-welcome-screen {
        width:100%;
        height:100%;
        padding:40px;
    }

/*    .single-card-reading-card-message {
        width: 100%;
    }*/

}

.single-card-reading-card-message-container {
    overflow:auto;
    /* height:80vh !important; */
}
@media(min-width:768px) {
    .single-card-reading-card-message-container {
        height:68vh !important;
    }
}

/* CTA */
.single-card-reading-cta {
    text-align: center;
    color: var(--mk-gold);
    margin-top:2rem;
}
.single-card-reading-cta .button {
    margin-bottom:1rem;
}
.single-card-reading-cta .share-icons .fa {
    margin-left:.5rem;
    margin-right:.5rem;
    font-size:1.25rem;
    cursor:pointer;
}