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


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



.level1{
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}
.level2{
    position: absolute;
    width: 100%;
    height: 100%;
    pointer-events: none;
}
.item,.lock,.combo,.keypad{
    position: absolute;
    display: block;
    width: 0%;
    height: 0%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/blank.png) 50% 50% no-repeat; 
    background-size: contain;
    z-index: 2;
    pointer-events: auto;
}


/* =============================================================================================================================================================================================================*/
/* 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;

}

.start:hover{
  opacity: .9;
}

.start:active{
  opacity: .7;
}
.clock{
    width: 24%;
    height: 44%;

    position: absolute;
    left: 4%;
    top: 5%;

}

.bigHand{
    left: 24%;
    top: 20%;
    width: 50%;
    height: 60%;
    position: absolute;
    -webkit-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);

}

.bigHand div{
    width: 100%;
    height: 55%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/bigHand.png) 50% 50% no-repeat;
    position: absolute;
    top: 44.9%;
    background-size: contain;
}

.smallHand{
    left: 24%;
    top: 20%;
    width: 50%;
    height: 60%;
    position: absolute;
    -webkit-transform: rotate(0deg);
    -o-transform: rotate(0deg);
    transform: rotate(0deg);

}

.smallHand div{
    width: 100%;
    height: 66%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/smallHand.png) 50% 50% no-repeat;
    position: absolute;
    top: -11.9%;
    background-size: contain;
}


.clockButton {
    left: -9%;
    top: 1%;
    width: 18%;
    height: 18%;
    position: absolute;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/button.png) 50% 50% no-repeat;
    background-size: contain;
}

.cb1{
    left: -6%;
    top: 85%;
    cursor: pointer;
}

.cb2{
    left: 82%;
    top: 85%;
    cursor: pointer;
}


.drawer1{
    left: 1%;
    top: 96%;
    width: 36%;
    height: 58%;
    position: absolute;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/drawer1.png) 50% 50% no-repeat;
    background-size: contain;
    -webkit-transition: top 1s;
    transition: top 1s;
}

.drawer1.open{
    top: 53%;
}


.drawer2{
    left: 62%;
    top: 96%;
    width: 36%;
    height: 58%;
    position: absolute;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/drawer2.png) 50% 50% no-repeat;
    background-size: contain;
    -webkit-transition: top 1s;
    transition: top 1s;
}

.drawer2.open{
    top: 53%;
}

.drawer3{
    left: -30%;
    top: 5%;
    width: 32%;
    height: 49%;
    position: absolute;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/drawer1.png) 50% 50% no-repeat;
    background-size: contain;
    -webkit-transition: left 1s;
    transition: left 1s;
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(90deg);
}

.drawer3.open{
    left: -4%;
}

.b3{
    top: 83.6%;
    width: 6%;
    height: 11%;
    position: absolute;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/copperbutton.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}

.b3_1{
    left: 39%;
}

.b3_2{
    left: 47%;
}

.b3_3{
    left: 55%;
}

.dot{
    left: 42.5%;
    top: 73.1%;
    position: absolute;
    width: 7%;
    height: 12%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/dot.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
    opacity: .2;
}
.dot.vis{
    opacity: 1;
}

.dots .dot:nth-child(2){left: 44.5%;}
.dots .dot:nth-child(3){left: 46.5%;}
.dots .dot:nth-child(4){left: 48.5%;}
.dots .dot:nth-child(5){left: 50.5%;}


.symbols div{
    left: 43%;
    top: 58%;
    position: absolute;
    width: 14%;
    height: 21%;

    background-size: contain;
    cursor: pointer; 
}



.s1{background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/symbol1.png) 50% 50% no-repeat;}
.s2{background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/symbol2.png) 50% 50% no-repeat;}
.s3{background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/symbol3.png) 50% 50% no-repeat;}
.s4{background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/symbol4.png) 50% 50% no-repeat;}
.s5{background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/symbol5.png) 50% 50% no-repeat;}
.s6{background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/symbol6.png) 50% 50% no-repeat;}

.symbols div{
    opacity: 0;

}

.symbols div.vis{
    opacity: 1;

}


.dial1{
    left: 52.5%;
    top: 49%;
    position: absolute;
    width: 5.6221889055472%;
    height: 10%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/dial.png) 50% 50% no-repeat;
    background-size: contain;
}

.dial1 .knob{
    left: 5%;
    top: -5%;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/dialknob.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}


.dial1 .knob.d1{

}
.dial1 .knob.d2{
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
}
.dial1 .knob.d3{
    -webkit-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    transform: rotate(90deg);
}
.grid{

}

.grid .square{

    position: absolute;
    width: 19.196402%;
    height: 20.8%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/squareOff.png) 50% 50% no-repeat;
    background-size: contain; 
    cursor: pointer;
}
.grid .square.on div{
    left: 0;
    top: 0;
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/squareOn.png) 50% 50% no-repeat;
    background-size: contain; 
}

.sq0{
    left: 14%;
    top: 18%; 
}
.sq1{
    left: 41.9%;
    top: 18%; 
}

.sq2{
    left: 69%;
    top: 18%; 
}

.sq3{
    left: 14%;
    top: 40.5%; 
}
.sq4{
    left: 41.9%;
    top: 40.5%; 
}

.sq5{
    left: 69%;
    top: 40.5%; 
}

  
.sq6{
    left: 14%;
    top: 18%; 
}
.sq7{
    left: 41.9%;
    top: 18%; 
}

.sq8{
    left: 69%;
    top: 18%; 
}

.sq9{
    left: 14%;
    top: 40.5%; 
}
.sq10{
    left: 41.9%;
    top: 40.5%; 
}

.sq11{
    left: 69%;
    top: 40.5%; 
}

.grid .gr1{
display: block;
}
.grid .gr2{
display: none;
}

.grid.g2 .gr2{
display: none;
}
.grid.g2 .gr2{
display: block;
}



.sw1{
    left: 38%;
    top: 63%;
    position: absolute;
    width: 25.92054%;
    height: 9.266667%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/swl.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}
.sw1.on{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/swr.png) 50% 50% no-repeat;
    background-size: contain;
}

.covernote1{
    left: 7%;
    top: 14%;
    position: absolute;
    width: 87.811094%;
    height: 66.466667%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/cover_note1.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(-5deg);
    display: none;
}

.covernote2{
    left: 7%;
    top: 14%;
    position: absolute;
    width: 87.811094%;
    height: 66.466667%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/cover_note2.png) 50% 50% no-repeat;
    background-size: contain;
    transform: rotate(7deg);
    display: none;
}


.slots{

}

.slot{
    left: 17%;
    top: 18%;
    position: absolute;
    width: 15.071964%;
    height: 28.266667%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/slot.png) 50% 50% no-repeat;
    background-size: contain;
}

.slot.slot1{
    left: 12%;
    top: 18%;
}

.slot.slot2{
    left: 32%;
    top: 18%;
}

.slot.slot3{
    left: 52%;
    top: 18%;
}

.slot.slot4{
    left: 72%;
    top: 18%;
}

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


.slot div.g0{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s0.png) 50% 50% no-repeat;
    background-size: contain;
}

.slot div.g1{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s1.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g2{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s2.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g3{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s3.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g4{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s4.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g5{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s5.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g6{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s6.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g7{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s7.png) 50% 50% no-repeat;
    background-size: contain;
}
.slot div.g8{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/s8.png) 50% 50% no-repeat;
    background-size: contain;
}

.slots .btn:active{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/btn_down.png) 50% 50% no-repeat;
    background-size: contain;
}

.slots .btn{
    left: 12%;
    top: 46%;
    position: absolute;
    width: 15.071964%;
    height: 16.266667%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/btn.png) 50% 50% no-repeat;
    background-size: contain;
}

.slots .btn1{
    left: 12%;
    top: 46%;
}

.slots .btn2{
    left: 32%;
    top: 46%;
}

.slots .btn3{
    left: 52%;
    top: 46%;
}

.slots .btn4{
    left: 72%;
    top: 46%;
}


#moon{
    left: 28.6%;
    top: 54.5%;
    position: absolute;
    width: 40.332834%;
    height: 21.933333%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon1.png) 50% 50% no-repeat;
    background-size: contain;
}

#moon.p2{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon2.png) 50% 50% no-repeat;
    background-size: contain; 
}
#moon.p3{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon3.png) 50% 50% no-repeat;
    background-size: contain; 
}
#moon.p4{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon4.png) 50% 50% no-repeat;
    background-size: contain; 
}
#moon.p5{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon5.png) 50% 50% no-repeat;
    background-size: contain; 
}
#moon.p6{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon6.png) 50% 50% no-repeat;
    background-size: contain; 
}
#moon.p7{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon7.png) 50% 50% no-repeat;
    background-size: contain; 
}
#moon.p8{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon8.png) 50% 50% no-repeat;
    background-size: contain; 
}

.moonButton{
    left: 27.8%;
    top: 13%;
    position: absolute;
    width: 5.5847076461769%;
    height: 9.9333333333333%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon_button.png) 50% 50% no-repeat;
    background-size: contain;
    cursor: pointer;
}

.moonButton:active{
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon_button_down.png) 50% 50% no-repeat;
    background-size: contain;
}

.moonPlate{
    left: 27.1%;

    top: 11.6%;
    position: absolute;
    width: 7.2713643178411%;
    height: 12.933333333333%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/moon_plate.png) 50% 50% no-repeat;
    background-size: contain;
    -webkit-transition: left 1s;
    transition: left 1s;

}
.moonPlate.open{
    left: 34%;
}



.drawer3 .letters{
    left: 18%;
    top: 13%;
    position: absolute;
    width: 60%;
    height: 80%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/letters.png) 50% 50% no-repeat;
    background-size: contain;
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

.drawer3 .letter{
    left: 18%;
    top: 25%;
    position: absolute;
    width: 29%;
    height: 25%;
    background: #000;
    border-radius: 100%;
    opacity: 0;
    background-size: contain;
    cursor: pointer;

}

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

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


.drawer3 .letter.l2{
    left: 52%;
    top: 25%;  
}

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

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

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

.tapecode{
    left: 53%;
    top: 46%;
    position: absolute;
    width: 57%;
    height: 15%;
    background: transparent url(https://alone-together2.s3-us-west-1.amazonaws.com/p1/tapecode.png) 50% 50% no-repeat;
    background-size: contain;
    -webkit-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    transform: rotate(-93deg);  
}