/* =============================================================================================================================================================================================================*/
/* RESET */
/* =============================================================================================================================================================================================================*/


.bg{
 position: absolute;
    width: 100%;height: 100%; background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/bg.jpg) 50% 50% no-repeat; background-size: cover;
    z-index:20;
    left:0;
    z-index: 1;
    display: block;


}

.intro {
    position: absolute;
    width: 100%;height: 100%; background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/intro.png) 50% 50% no-repeat; background-size: cover;
    z-index:20;
    left:0;
    z-index: 1000;
    display: block;
    cursor: pointer;        
}

.room{
    position: absolute;
    width: 100%;height: 100%; background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/bg.jpg) 50% 50% no-repeat; background-size: cover;
    z-index:20;
    left:0;
    z-index: 1;
    display: block; 
}







/* =============================================================================================================================================================================================================*/
/* START */
/* =============================================================================================================================================================================================================*/


    
.stage{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
     -khtml-user-select: none;
       -moz-user-select: none;
        -ms-user-select: none;
            user-select: none;

}    


#level0{
    position: absolute;
    z-index: 1;
    width: 100%;
    height: 100%;
}



.start{
    left: 39%;
    top: 59%;
    width: 16%;
    height: 20%;
    position: absolute;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/common/start.png) 50% 50% no-repeat;
    background-size: contain;

}

.buttons .bttn.top {
    left: 49.5%;
    top: 6.1%;
    position: absolute;
    width: 5%;
    height: 9%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/common/blank.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}
.buttons .bttn.left {
    left: 0.6%;
    top: 60.1%;
    position: absolute;
    width: 5%;
    height: 9%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/common/blank.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}

.buttons .bttn.bottom {
    left: 52.6%;
    top: 85.1%;
    position: absolute;
    width: 5%;
    height: 9%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/common/blank.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}

.buttons .bttn.right {
    left: 93.2%;
    top: 13.9%;
    position: absolute;
    width: 5%;
    height: 9%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/common/blank.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}


.led{
    left: 66.5%;
    top: 70.1%;
    position: absolute;
    width: 9%;
    height: 17%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/buttonDisplayLight.png) 50% 50% no-repeat;
    background-size: contain;
    opacity: 0;
    -webkit-transition: opacity .25s;
    transition: opacity .25s;
}

.led.on{
    opacity:1;
}



.led2{
    left: 74%;

}
.led3{
    left: 81.5%;

}



.whiteblack{
    left: 5%;
    top: 82%;
    position: absolute;
    width: 12%;
    height: 9.2%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/whiteblack.png) 50% 50% no-repeat;
    background-size: contain;
}


.whiteblack .b{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 0;
    border-radius: 40% 0 0 40%;
    margin: 0;
}

.whiteblack .w{
    position: absolute;
    width: 50%;
    height: 100%;
    top: 0;
    left: 50%;
    border-radius: 0 40% 40% 0;
    margin: 0;
}


.whiteblack .w:active{
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}
.whiteblack .b:active{
   -moz-box-shadow:    inset 0 0 10px #000000;
   -webkit-box-shadow: inset 0 0 10px #000000;
   box-shadow:         inset 0 0 10px #000000;
}



.whiteblack .w:hover{
    background-color: rgba(100,100,100,.2);
    cursor: pointer;
}
.whiteblack .b:hover{
    background-color: rgba(100,100,100,.2);
    cursor: pointer;
}


.felt{
    left: 80%;
    top: 6%;
    position: absolute;
    width: 11.544227886057%;
    height: 27.2%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/felt.png) 50% 50% no-repeat;
    background-size: contain;
}

.jack{
    left: 46%;
    top: -11%;
    position: absolute;
    width: 9%;
    height: 23%;
} 
.king{
    left: -4%;
    top: 11%;
    position: absolute;
    width: 9%;
    height: 23%;
}
.queen{
    left: 92%;
    top: 41%;
    position: absolute;
    width: 9%;
    height: 23%;
}
.ace{
    left: 47%;
    top: 71%;
    position: absolute;
    width: 9%;
    height: 23%;
}


.card div{
    width: 100%;
    height: 100%;
    background-size: contain;
    cursor: pointer;
}
.ace div{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/ace.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(-20deg); 
}

.king div{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/king.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(10deg); 
}

.queen div{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/queen.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(30deg); 
}
.jack div{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/jack.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(-40deg); 
}



.felt div{
    top: 7%;
    left: 12%;
    width: 76%;
    height: 84%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/blank.png) 50% 50% no-repeat;
    background-size: contain;
    position: absolute;
    display: none;
}

.felt .face {background-image: url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/ace.png);}
.felt .fking {background-image: url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/king.png);}
.felt .fqueen {background-image: url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/queen.png);}
.felt .fjack {background-image: url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/jack.png);}


.feltNum{
    left: 83.1%;
    top: 33%;
    position: absolute;
    width: 5%;
    height: 9%;
    background: #000;

}
.feltNumber{fill:#FFF;}



.postcard2{
    left: 17%;
    top: 84%;
    position: absolute;
    width: 35.75712143928%;
    height: 25.533333333333%;
}
.postcard3{
    left: 16%;
    top: 98%;
    position: absolute;
    width: 24.100449775112%;
    height: 26%;

}


.postcard4{
    left: 86%;
    top: -5%;
    position: absolute;
    width: 31.409295352324%;
    height: 20.866666666667%;
    z-index: 5;
}

.postcard2 div{
    left: 0%;
    top: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/postcard2.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(15deg);
    z-index: 5;
}

.postcard3 div{
    left: 140%;
    top: -460%;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/postcard3.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(15deg);
    z-index: 5;
}


.postcard4 div{
    left: 0%;
    top: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/postcard4.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(15deg);

}

.printer{
    left: 6%;
    top: 67%;
    position: absolute;
    width: 15.51724137931%;
    height: 12%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/printer.png) 50% 50% no-repeat;
    background-size: contain;
}

.printer .top{
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/printer_top.png) 50% 50% no-repeat;
    background-size: contain;
}

.printer .receipt{
    left: 0;
    top: 45%;
    position: absolute;
    width: 100%;
    height: 180%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/receipt.png) 50% 50% no-repeat;
    background-size: contain;
    display: none;
}

.blacklight{
    left: 58.6%;
    top: 0%;
    position: absolute;
    width: 24.662668665667%;
    height: 34.133333333333%;
    background: url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/blacklight.png) 50% 50% / contain no-repeat transparent;
    right: auto;
    bottom: auto;
    display: none;


}


.meter{
    left: 5%;
    top: 27%;
    position: absolute;
    width: 6.5217391304348%;
    height: 27%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/meter_bottom.png) 50% 50% no-repeat;
    background-size: contain;
}
.meter .top{
    left: 1%;
    top: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/meter_top.png) 50% 50% no-repeat;
    background-size: contain;
}

.meter_button{
    left: 6.1%;
    top: 44.9%;
    position: absolute;
    width: 4.3103448275862%;
    height: 7.7333333333333%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/meterButton.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}
.meter_button:active{
    
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/meterButton_down.png) 50% 50% no-repeat;
    background-size: contain;
}

.meter .bar{
    left: 24%;
    top: 51%;
    position: absolute;
    width: 60%;
    height: 13%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/meter_bar.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}

.meter .bar.b1{top: 51;}
.meter .bar.b2{top: 39%;}
.meter .bar.b3{top: 26%;}
.meter .bar.b4{top: 14%;}
.meter .bar.b5{top: 2%;}


.uvclue{
    left: 46%;
    top: 15%;
    position: absolute;
    width: 16.341829085457%;
    height: 52.333333333333%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/uvclue1.png) 50% 50% no-repeat;
    background-size: contain;
    display: none;   
}


.screenSwithButton{
    left: 90%;
    top: 76.6%;
    position: absolute;
    width: 8.9205397301349%;
    height: 5.2666666666667%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/swr.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(-90deg); 
    cursor: pointer;
}

.screenSwithButton.down{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/swl.png) 50% 50% no-repeat;
    background-size: contain;
}

.screen2{
    left: 65.8%;
    top: 68.5%;
    position: absolute;
    width: 25.3%;
    height: 20.366667%;
    z-index: 6;
    overflow:hidden; 
}


.screen2 span{
    display: block;
    left: -100%;
    top: 0%;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/door.png) 50% 50% no-repeat;
    background-size: cover;
    -webkit-transition: left .25s;
    transition: left .25s; 
}

.screen2.open span{
    left: 0%;

      
}

.screen2 .letters{
    left: 18%;
    top: 13%;
    position: absolute;
    width: 60%;
    height: 80%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p2/letters.png) 50% 50% no-repeat;
    background-size: contain;
}

.screen2 .letter{
    left: 19%;
    top: 2%;
    position: absolute;
    width: 29%;
    height: 49%;
    background: #000;
    border-radius: 100%;
    opacity: 0;
    background-size: contain;
    cursor: pointer;
}

.screen2 .letter:hover{
opacity: .1;
}

.screen2 .letter:active{
opacity: .5;
}


.screen2 .letter.l2{
    left: 53%;
    top: 2%;  
}

.screen2 .letter.l3{
    left: 1%;
    top: 49%;  
}

.screen2 .letter.l4{
    left: 36%;
    top: 49%;  
}

.screen2 .letter.l5{
    left: 70%;
    top: 49%;  
}