/* Global css */

@font-face {
font-family: Hellenica-Serif;
src: url("../Images/PF\ Hellenica\ Serif\ Pro\ Regular.ttf");
}

                                                                             
#container{
    position: relative; 
    width: 1920px; 
    height: 1080px; 
    border: 0px;
}

.greek-lang {
    display: inline;
    width:45px;
    cursor: pointer;
}

.english-lang {
    display: inline;
    width: 45px;
    cursor: pointer;
}
#home-hrB{
    position: absolute;
    top: 688px;
    left: 980px;
}

.tiltEffect{
  animation: tiltAnimation 1s linear;
}

.textTitlEffect{
    animation: texttiltAnimation 1s linear;
}

.zoomEffect{
    transform-origin: center;
    animation: zoomAnimation 1s ease-in-out forwards;
}

@keyframes tiltAnimation {
    from {-ms-transform: rotate(3deg); /* IE 9 */
        transform: rotate(3deg);}
    to {-ms-transform: rotate(-3deg); /* IE 9 */
        transform: rotate(-3deg);}
  }

@keyframes texttiltAnimation {
from {-ms-transform: rotate(3deg); /* IE 9 */
    transform: rotate(3deg) scale(1.2);}
to {
    -ms-transform: rotate(-3deg); /* IE 9 */
    transform: rotate(-3deg) scale(1);
}
}

@keyframes zoomAnimation {
    from {
        transform:scale(0.1);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity:1;
    }
    }

#HomeText1{
    position: absolute;
    left: 600px;
    top: 255px;
}

#HomeGraphic1{
    position: absolute;
    left: 590px;
    top: 18px;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 12px #fff);
    filter: drop-shadow(0px 0px 12px #fff);
}

#HomeText2{
    position: absolute;
    left: 1572px;
    top: 301px;
}

#HomeGraphic2{
    position: absolute;
    left: 1580px;
    top: 15px;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 12px #fff);
    filter: drop-shadow(0px 0px 12px #fff);
}

#HomeText3{
    position: absolute;
    left: 25px;
    top: 633px;
}

#HomeGraphic3{
    position: absolute;
    left: 45px;
    top: 335px;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 12px #fff);
    filter: drop-shadow(0px 0px 12px #fff);
}

#HomeText4{
    position: absolute;
    left: 1180px;
    top: 665px;
}

#HomeGraphic4{
    position: absolute;
    left: 1230px;
    top: 322px;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 12px #fff);
    filter: drop-shadow(0px 0px 12px #fff);
}

#HomeText5{
    position: absolute;
    left: 790px;
    top: 915px;
}

#HomeGraphic5{
    position: absolute;
    left: 830px;
    top: 649px;
    opacity: 0;
    -webkit-filter: drop-shadow(0px 0px 12px #fff);
    filter: drop-shadow(0px 0px 12px #fff);
}

#horseAnimation{
    position: absolute;
    top: 0;
}

#horseStatic{
    position: absolute;
    top: 725px;
    right: 75px;
}

.game-select-btns {
    padding: 50px;
    margin: 10px;
    position: relative;
    top: 40%;
    left: 30%;
}

.button0{
    background-color: Transparent;
    background-repeat:no-repeat;
    border: none !important;
    cursor:pointer;
    overflow: hidden;   
    outline: none !important;
}

img {
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -o-user-select: none;
    user-select: none;
    }

                                                                             /* Game 1 */

.lithos01{
    position: absolute;
    left: 113px;
    top: 250px;
    -webkit-transform: scale(0.2);
    filter: blur(3px) ;
}   
                                                                          
.lithos1{
    position: absolute;
    transform-origin: center;
    animation: animateLithos1 4s ease-in-out forwards;
}

@keyframes animateLithos1{
    from{
        transform: scale(0.2)
    }
    to{
        transform: scale(1.1)
    }
}

.lithos02{
    position: absolute;
    left: 844px;
    top: 160px;
    -webkit-transform: scale(0.2);
    filter: blur(3px) ;
}   
                                                                          
.lithos2{
    position: absolute;
    transform-origin: center;
    animation: animateLithos2 4s ease-in-out forwards;
}

@keyframes animateLithos2{
    from{
        transform: scale(0.2)
    }
    to{
        transform: scale(1.1)
    }
}

.lithos03{
    position: absolute;
    left: 535px;
    top: 80px;
    -webkit-transform: scale(0.2);
    filter: blur(3px) ;
}   
                                                                          
.lithos3{
    position: absolute;
    transform-origin: center;
    animation: animateLithos3 4s ease-in-out forwards;
}

@keyframes animateLithos3{
    from{
        transform: scale(0.2)
    }
    to{
        transform: scale(1)
    }
}

.blurred {
    filter: blur(10px);
}

#brush{
    position: absolute;
    top: 100px;
    left: 20px;
    -webkit-transform: scale(0.6);
}

#sponge{
    position: absolute;
    top: 100px;
    left: 200px;
    -webkit-transform: scale(0.6);
}

.score {
    position: absolute;
    right: 48px;
    top: 0;
    font-size: 68px;
    color: white;
    font-weight: 700;
}

.box1{
    width: 200px;
    height: 200px;
    background: rgb(157,143,124);
    display: none;
}

.boxCl{
    width: 200px;
    height: 200px;
    background: #ffffff65;
    position: absolute;
    filter: blur(40px);
}

.box1S{
    width: 200px;
    height: 200px;
    background: rgb(157,143,124);
    display: none;
    
}

.box2{
    width: 200px;
    height: 200px;
    background: rgb(197,192,180);
    display: none;
}

.box2S{
    width: 200px;
    height: 200px;
    background: rgb(197,192,180);
    display: none;
}

.box3{
    width: 200px;
    height: 200px;
    background: rgb(127,119,106);
    display: none;
}

.box3S{
    width: 200px;
    height: 200px;
    background: rgb(127,119,106);
    display: none;
}

.s1_firstRow1{
    position: absolute;
    top: 333px;
    left: 250px;
    filter: blur(40px);
}

.s1_firstRow2{
    position: absolute;
    top: 333px;
    left: 450px;
    filter: blur(40px);
}

.s1_firstRow3{
    position: absolute;
    top: 333px;
    left: 650px;
    filter: blur(40px);
}

.s1_firstRow4{
    position: absolute;
    top: 333px;
    left: 850px;
    filter: blur(40px);
}

.s1_secondRow1{
    position: absolute;
    top: 570px;
    left: 250px;
    filter: blur(40px);
}

.s1_secondRow2{
    position: absolute;
    top: 570px;
    left: 450px;
    filter: blur(40px);
}

.s1_secondRow3{
    position: absolute;
    top: 570px;
    left: 650px;
    filter: blur(40px);
}

.s1_secondRow4{
    position: absolute;
    top: 570px;
    left: 850px;
    filter: blur(40px);
}

.s1_thirdRow1{
    position: absolute;
    top: 850px;
    left: 250px;
    filter: blur(40px);
}

.s1_thirdRow2{
    position: absolute;
    top: 800px;
    left: 450px;
    filter: blur(40px);
}

.s1_thirdRow3{
    position: absolute;
    top: 800px;
    left: 650px;
    filter: blur(40px);
}

.s1_thirdRow4{
    position: absolute;
    top: 800px;
    left: 800px;
    filter: blur(40px);
}

.s1_firstRow1S{
    position: absolute;
    top: 320px;
    left: 250px;
    filter: blur(70px);
}

.s1_firstRow2S{
    position: absolute;
    top: 320px;
    left: 400px;
    filter: blur(70px);
}

.s1_firstRow3S{
    position: absolute;
    top: 320px;
    left: 600px;
    filter: blur(70px);
}

.s1_firstRow4S{
    position: absolute;
    top: 320px;
    left: 800px;
    filter: blur(70px);
}

.s1_secondRow1S{
    position: absolute;
    top: 520px;
    left: 250px;
    filter: blur(70px);
}

.s1_secondRow2S{
    position: absolute;
    top: 520px;
    left: 400px;
    filter: blur(70px);
}

.s1_secondRow3S{
    position: absolute;
    top: 520px;
    left: 600px;
    filter: blur(70px);
}

.s1_secondRow4S{
    position: absolute;
    top: 520px;
    left: 800px;
    filter: blur(70px);
}

.s1_thirdRow1S{
    position: absolute;
    top: 725px;
    left: 250px;
    filter: blur(70px);
}

.s1_thirdRow2S{
    position: absolute;
    top: 725px;
    left: 400px;
    filter: blur(70px);
}

.s1_thirdRow3S{
    position: absolute;
    top: 725px;
    left: 600px;
    filter: blur(70px);
}

.s1_thirdRow4S{
    position: absolute;
    top: 725px;
    left: 800px;
    filter: blur(70px);
}

.s2_firstRow1{
    position: absolute;
    top: 206px;
    left: 952px;
    filter: blur(40px);
}

.s2_firstRow2{
    position: absolute;
    top: 206px;
    left: 1155px;
    filter: blur(40px);
}

.s2_firstRow3{
    position: absolute;
    top: 206px;
    left: 1355px;
    filter: blur(40px);
}

.s2_secondRow1{
    position: absolute;
    top: 406px;
    left: 952px;
    filter: blur(40px);
}

.s2_secondRow2{
    position: absolute;
    top: 406px;
    left: 1155px;
    filter: blur(40px);
}

.s2_secondRow3{
    position: absolute;
    top: 406px;
    left: 1355px;
    filter: blur(40px);
}

.s2_thirdRow1{
    position: absolute;
    top: 606px;
    left: 952px;
    filter: blur(40px);
}

.s2_thirdRow2{
    position: absolute;
    top: 606px;
    left: 1155px;
    filter: blur(40px);
}

.s2_thirdRow3{
    position: absolute;
    top: 606px;
    left: 1355px;
    filter: blur(40px);
}

.s2_firstRow1S{
    position: absolute;
    top: 206px;
    left: 952px;
    filter: blur(70px);
}

.s2_firstRow2S{
    position: absolute;
    top: 206px;
    left: 1155px;
    filter: blur(70px);
}

.s2_firstRow3S{
    position: absolute;
    top: 206px;
    left: 1355px;
    filter: blur(70px);
}

.s2_secondRow1S{
    position: absolute;
    top: 406px;
    left: 952px;
    filter: blur(70px);
}

.s2_secondRow2S{
    position: absolute;
    top: 406px;
    left: 1155px;
    filter: blur(70px);
}

.s2_secondRow3S{
    position: absolute;
    top: 406px;
    left: 1355px;
    filter: blur(70px);
}

.s2_thirdRow1S{
    position: absolute;
    top: 606px;
    left: 952px;
    filter: blur(70px);
}

.s2_thirdRow2S{
    position: absolute;
    top: 606px;
    left: 1155px;
    filter: blur(70px);
}

.s2_thirdRow3S{
    position: absolute;
    top: 606px;
    left: 1355px;
    filter: blur(70px);
}

.s3_firstRow1{
    position: absolute;
    top: 131px;
    left: 593px;
    filter: blur(40px);
}

.s3_firstRow2{
    position: absolute;
    top: 131px;
    left: 805px;
    filter: blur(40px);
}

.s3_firstRow3{
    position: absolute;
    top: 131px;
    left: 1018px;
    filter: blur(40px);
}

.s3_secondRow1{
    position: absolute;
    top: 312px;
    left: 593px;
    filter: blur(40px);
}

.s3_secondRow2{
    position: absolute;
    top: 312px;
    left: 805px;
    filter: blur(40px);
}

.s3_secondRow3{
    position: absolute;
    top: 312px;
    left: 1018px;
    filter: blur(40px);
}

.s3_thirdRow1{
    position: absolute;
    top: 511px;
    left: 593px;
    filter: blur(40px);
}

.s3_thirdRow2{
    position: absolute;
    top: 511px;
    left: 805px;
    filter: blur(40px);
}

.s3_thirdRow3{
    position: absolute;
    top: 511px;
    left: 1018px;
    filter: blur(40px);
}

.s3_firstRow1S{
    position: absolute;
    top: 131px;
    left: 593px;
    filter: blur(70px);
}

.s3_firstRow2S{
    position: absolute;
    top: 131px;
    left: 805px;
    filter: blur(70px);
}

.s3_firstRow3S{
    position: absolute;
    top: 131px;
    left: 1018px;
    filter: blur(70px);
}

.s3_secondRow1S{
    position: absolute;
    top: 312px;
    left: 593px;
    filter: blur(70px);
}

.s3_secondRow2S{
    position: absolute;
    top: 312px;
    left: 805px;
    filter: blur(70px);
}

.s3_secondRow3S{
    position: absolute;
    top: 312px;
    left: 1018px;
    filter: blur(70px);
}

.s3_thirdRow1S{
    position: absolute;
    top: 511px;
    left: 593px;
    filter: blur(70px);
}

.s3_thirdRow2S{
    position: absolute;
    top: 511px;
    left: 805px;
    filter: blur(70px);
}

.s3_thirdRow3S{
    position: absolute;
    top: 511px;
    left: 1018px;
    filter: blur(70px);
}

#hrB{
    position: absolute;
    top: 727px;
    left: 980px;
}

#hrBL2{
    position: absolute;
    top: 727px;
    left: 300px;
}

#ht1{
    position: absolute;
    top: 717px;
    left: 970px;
}

#ht1L2{
    position: absolute;
    top: 717px;
    left: 385px;
}

#ht1HELP{
    position: absolute;
    top: 717px;
    left: 970px;
}

#ht1L2HELP {
    position: absolute;
    top: 717px;
    left: 385px;
}

#ht2{
    position: absolute;
    top: 717px;
    left: 970px;
    z-index: 1;
}

#ht2L2{
    position: absolute;
    top: 717px;
    left: 385px;
}

#ht3{
    position: absolute;
    top: 717px;
    left: 970px;
    z-index: 1;
}

#ht4{
    position: absolute;
    top: 717px;
    left: 970px;
}

#ht6{
    position: absolute;
    top: 717px;
    left: 970px;
}

#ht8{
    position: absolute;
    top: 717px;
    left: 970px;
}

#ht3L2{
    position: absolute;
    top: 717px;
    left: 385px;
}

#ht5{
    position: absolute;
    top: 717px;
    left: 970px;
}

 #ht7{
     position: absolute;
     top: 717px;
     left: 970px;
 }


#ht5L2{
    position: absolute;
    top: 717px;
    left: 385px;
}

#next{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 1150px;
}

#next1{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 1540px;
    top: 630px;
}

#next1L2{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 450px;
    top: 630px;
}

#next2{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 1150px;
}

#next2L2{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 590px;
}

#nextS1E{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 1540px;
    top: 630px;
}
#nextS1E2{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 1150px;
    top: 730px;
}

#nextS2E{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 450px;
    top: 630px;
}

#nextS2E2{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 1166px;
    top: 730px;
}

#nextS1F{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 1150px;
    z-index: 1;
}

#nextS2F{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 1150px;
}


#nextL2{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 600px;
}

#nextS3E{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 1560px;
    top: 630px;
}
#nextS3E2{
    position: absolute;
    -webkit-transform: scale(0.1);
    left: 1186px;
    top: 730px;
}

#nextS3F{
    position: absolute;
    -webkit-transform: scale(0.1);
    top: 730px;
    left: 1150px;
}

.s1_word{
    /*position: absolute;*/
    display: none;
    z-index: 2;
}
.s1_word_hint{
    display: none;
    z-index: 1;
}

.s2_word{
    display: none;
    z-index: 2;
}

.s2_word_hint{
    display: none;
    z-index: 1;
}

.s3_word{
    display: none;
    z-index: 2;
}

.s3_word_hint{
    display: none;
    z-index: 1;
}

.redLines {
    position: absolute;
    /* width: 100px;
    height: 4px;
    top: 777px;
    left: 1377px; */
    background-color: red;
}

#prosfora, #prosfora-hint{
    position: absolute;
    top: 419px;
    left: 519px;
    opacity: 0;
}

#parthenonas, #parthenonas-hint{
    position: absolute;
    top: 880px;
    left: 443px;
    opacity: 0;
}

#iero, #iero-hint{
    position: absolute;
    top: 445px;
    left: 416px;
    opacity: 0;
}

#thea, #thea-hint{
    position: absolute;
    top: 369px;
    left: 673px;
    opacity: 0;
}

#gluptis, #gluptis-hint{
    position: absolute;
    top: 572px;
    left: 762px;
    opacity: 0;
}

#afieroma, #afieroma-hint{
    position: absolute;
    top: 294px;
    left: 468px;
    opacity: 0;
}

#anathetis, #anathetis-hint{
    position: absolute;
    top: 607px;
    left: 414px;
    opacity: 0;
}

#akropoli, #akropoli-hint{
    position: absolute;
    top: 704px;
    left: 439px;
    opacity: 0;
}

#athina, #athina-hint{
    position: absolute;
    top: 524px;
    left: 621px;
    opacity: 0;
}

#agalma, #agalma-hint{
    position: absolute;
    top: 755px;
    left: 804px;
    opacity: 0;
}

#apolonas, #apolonas-hint{
    position: absolute;
    top: 294px;
    left: 843px;
    opacity: 0;
}

#asklipieio, #asklipieio-hint{
    position: absolute;
    top: 229px;
    left: 980px;
    opacity: 0;
}

#asklipios, #asklipios-hint{
    position: absolute;
    top: 451px;
    left: 708px;
    opacity: 0;
}

#afierwma, #afierwma-hint{
    position: absolute;
    top: 637px;
    left: 668px;
    opacity: 0;
}

#therapeia, #therapeia-hint{
    position: absolute;
    top: 548px;
    left: 557px;
    opacity: 0;
}

#iash, #iash-hint{
    position: absolute;
    top: 257px;
    left: 692px;
    opacity: 0;
}

#iero3, #iero3-hint{
    position: absolute;
    top: 522px;
    left: 895px;
    opacity: 0;
}

#stoa, #stoa-hint{
    position: absolute;
    top: 567px;
    left: 796px;
    opacity: 0;
}

#ugeia, #ugeia-hint{
    position: absolute;
    top: 619px;
    left: 888px;
    opacity: 0;
}

#akropoliS2, #akropoliS2-hint{
    position: absolute;
    top: 654px;
    left: 1028px;
    opacity: 0;
}

#apogonoi, #apogonoi-hint{
    position: absolute;
    top: 676px;
    left: 1354px;
    opacity: 0;
}

#arxontas, #arxontas-hint{
    position: absolute;
    top: 604px;
    left: 1263px;
    opacity: 0;
}

#dhmos, #dhmos-hint{
    position: absolute;
    top: 559px;
    left: 1168px;
    opacity: 0;
}

#eponimos, #eponimos-hint{
    position: absolute;
    top: 461px;
    left: 1098px;
    opacity: 0;
}

#pronomoia, #pronomoia-hint{
    position: absolute;
    top: 413px;
    left: 1306px;
    opacity: 0;
}

#prutaneio, #prutaneio-hint{
    position: absolute;
    top: 381px;
    left: 1075px;
    opacity: 0;
}

#summaxia, #summaxia-hint{
    position: absolute;
    top: 317px;
    left: 1288px;
    opacity: 0;
}

#sunthiki, #sunthiki-hint{
    position: absolute;
    top: 536px;
    left: 1370px;
    opacity: 0;
}

#fulh, #fulh-hint{
    position: absolute;
    top: 698px;
    left: 1298px;
    opacity: 0;
}

#yhfisma,#yhfisma-hint{
    position: absolute;
    top: 466px;
    left: 1314px;
    opacity: 0;
}

#as1{
    position: absolute;
    display: none;
    -webkit-transform: scale(0.8);
}

#as2{
     position: absolute;
     display: none;
     -webkit-transform: scale(0.8);
}

#as3{
     position: absolute;
     display: none;
     -webkit-transform: scale(0.8);
}

.borderL{
    border-style: solid;
    border-color: white;
    border-radius: 250px;
    border-width: 23px;
}

.horse1{
    top: 483px;
    left: 1467px;
    position: absolute;
    display: none;
}

.horseL2{
    top: 470px;
    left: 0px;
    position: absolute;
    -webkit-transform: scaleX(-1);
    display: none;
}
                                                                             /* Game 2 */
.protomh{
    position: absolute;
}

.stratigosActive{
    animation: animationStratigos 2s forwards;
}

@keyframes animationStratigos{
    from{
        transform: translate(0);
    }
    to{
        transform: translate(-990px, 224px);
    }
}

.politikosActive{
    animation: animationPolitikos 2s forwards;
}

@keyframes animationPolitikos{
    from{
        transform: translate(0);
    }
    to{
        transform: translate(-820px, 280px);
    }
}

.evergetisActive{
    animation: animationEvergetis 2s forwards;
}

@keyframes animationEvergetis{
    from{
        transform: translate(0);
    }
    to{
        transform: translate(-1170px, 140px);
    }
}

.asthenisActive{
    animation: animationAsthenis 2s forwards;
}

@keyframes animationAsthenis{
    from{
    transform: translate(0);
    }
    to{
        transform: translate(-700px, 150px);
    }
}
.protomhH{
    position: absolute;
    display: none;
}

.protomhF{
    position: absolute;
    display: none;
    top: 737px;
}

.anagorisi{
    position: absolute;
    display: none;
    top: 320px;
    left: 1252px;
}

.bubbleProtomhs, .horseTxt{
    position: absolute;
    display: none;
    top: 100px;
    left: 1100px;
}

.horseTxt1{
    position: absolute;
    top: 100px;
    left: 1100px;
}

#hrBG2{
    position: absolute;
    top: 100px;
    left: 1100px;
}

#slideShow{
    position: absolute;
    top: -45px;
    left: 600px;
}

.fa{
    color: rgb(200, 200, 200)!important;
}

.container-slideShow{
    display: none;
}

#keyboard{
    position: absolute;
    display: none;
    top: 840px;
    left: 714px;
}

.keyboardButtonsOn, .keyboardButtons{
    position: absolute;
    display: none;
}

.keyboardImage{
    position: absolute;
    display: none;
    top: 484px;
    left: 755px;
    width: 367px;
    height: 300px;
}

#protomiBtn{
    position: absolute;
    display: none;
    -webkit-transform: scale(0.1);
    left: 1275px;
    top: 100px;
}

#finalBtn{
    position: absolute;
    display: none;
    -webkit-transform: scale(0.1);
    left: 1275px;
    top: 115px;
}

#hrBG22{
    position: absolute;
    display: none;
    top: 322px;
    left: 890px;
}

#finalBtn2{
    position: absolute;
    display: none;
    -webkit-transform: scale(0.1);
    left: 1070px;
    top: 335px;
}

#horseTxt8{
    position: absolute;
    display: none;
    top: 315px;
    left: 905px;
}
                                                                             /* Game 3 */

#hrWrong {
    position: absolute;
    top: 717px;
    left: 970px;
    z-index: 5;
}

#hrHint {
    position: absolute;
    top: 717px;
    left: 970px;
    z-index: 5;
}

#hrSuccess {
    position: absolute;
    top: 717px;
    left: 970px;
    z-index: 5;
}

#hrB3{
    position: absolute;
    top: 727px;
    left: 980px;
    z-index: 5;
}

.horsePop{
    top: 483px;
    left: 1467px;
    position: absolute;
    z-index: 5;
    /* display: none !important; */
}

#background3A{
    position: absolute;
    width: 1920px;
    height: 1080px;
}

#background3B{
    position: absolute;
    display: none;
    width: 1920px;
    height: 1080px;
}

#elevator{
    position: absolute;
    display: none;
    width: 1920px;
    height: 1080px;
}

#elevatorOpen{
    position: absolute;
    display: none;
    width: 1920px;
    height: 1080px;
}

#boxes{
    position: absolute;
    display: none;
    width: 1920px;
    height: 1080px;
}

#wood{
    position: absolute;
    display: none;
    width: 1920px;
    height: 1080px;
}

#lastBox{
    position: absolute;
    display: none;
    width: 1920px;
    height: 1080px;
}

#envelopeClosed{
    position: absolute;
    top: 500px;
    left: 300px;
}   

#envelopeOpen{
    position: absolute;
    display: none;
    top: 500px;
    left: 300px;
}   

#letter{
    position: absolute;
    display: none;
    top: 70px;
    left: 100px;
}

.textG3{
    position: absolute;
    display: none;
    top: 70px;
    left: 100px;
}

#postItText{
    position: absolute;
    display: none;
    top: 600px;
    left: 850px;
}

#zeroIdle{
    position: absolute;
    display: none;
    left: 1482px;
    top: 358px;
}

#zeroUp{
    position: absolute;
    display: none;
    left: 1482px;
    top: 358px;
}

#oneIdle{
    position: absolute;
    display: none;
    top: 187px;
    left: 1388px;
}

#oneUp{
    position: absolute;
    display: none;
    top: 187px;
    left: 1388px;
}

#twoIdle{
    position: absolute;
    display: none;
    left: 1482px;
    top: 187px;
}

#twoUp{
    position: absolute;
    display: none;
    left: 1482px;
    top: 187px;
}

#threeIdle{
    position: absolute;
    display: none;
    top: 187px;
    left: 1575px;
}

#threeUp{
    position: absolute;
    display: none;
    top: 187px;
    left: 1575px;
}

#fourIdle{
    position: absolute;
    display: none;
    left: 1388px;
    top: 244px;
}
#fourUp{
    position: absolute;
    display: none;
    left: 1388px;
    top: 244px;
}

#fiveIdle{
    position: absolute;
    display: none;
    left: 1482px;
    top: 244px;
}

#fiveUp{
    position: absolute;
    display: none;
    left: 1482px;
    top: 244px;
}

#sixIdle{
    position: absolute;
    display: none;
    left: 1575px;
    top: 244px;
}

#sixUp{
    position: absolute;
    display: none;
    left: 1575px;
    top: 244px;
}

#sevenIdle{
    position: absolute;
    display: none;
    left: 1388px;
    top: 301px;
}

#sevenUp{
    position: absolute;
    display: none;
    left: 1388px;
    top: 301px;
}

#eightIdle{
    position: absolute;
    display: none;
    left: 1482px;
    top: 301px;
}

#eightUp{
    position: absolute;
    display: none;
    left: 1482px;
    top: 301px;
}

#nineIdle{
    position: absolute;
    display: none;
    left: 1575px;
    top: 301px;
}

#nineUp{
    position: absolute;
    display: none;
    left: 1575px;
    top: 301px;
}

#backIdle{
    position: absolute;
    display: none;
    left: 1575px;
    top: 358px;
}

#backUp{
    position: absolute;
    display: none;
    left: 1575px;
    top: 358px;
}

#errorIdle{
    position: absolute;
    display: none;
    left: 1388px;
    top: 358px;
}

#errorUp{
    position: absolute;
    display: none;
    left: 1388px;
    top: 358px;
}

#codeFrame{
    position: absolute;
    display: none;
    left: 1550px;
    top: 600px;
}

.buttons0{
    display: none;
    position: absolute;
    width: 178px;
    height: 60px;
}
#button0_1{
    top: 701px;
    left: 884px;
}
#button0_2{
    top: 850px;
    left: 1115px;
}
#button0_3{
    top: 702px;
    left: 1160px;
}
#button0_4{
    top: 578px;
    left: 1511px;
}
#button0_5{
    top: 337px;
    left: 1117px;
}

#base{
    display: none;
    position: absolute;
    left: 1000px;
    top: 100px;
}

#wheel{
    display: none;
    position: absolute;
    left: 1000px;
    top: 100px;
    transform: rotate(40deg);
    -webkit-transform: rotate(40deg);
    -moz-transform: rotate(40deg);
    -o-transform: rotate(40deg);
    -ms-transform: rotate(40deg);
}

#wheelSpin {
    position: absolute;
    top: 150px;
    right: 135px;
    width: 52px;
    cursor: pointer;
}

.pass-light {
    position: absolute;
    top: 76px;
}

.idleLight {
    top: 95px !important;
}

.code{
    position: absolute;
    display: none;
}

#codeError{
    left: 1553px;
    top: 721px;
}

#codeErrorUp{
    left: 1553px;
    top: 721px;
}

#codeBack{
    left: 1774px;
    top: 721px;
}

#codeBackUp{
    left: 1774px;
    top: 721px;
}

#codePIIII{
    left: 1745px;
    top: 662px;
}

#codePIIIIp{
    left: 1745px;
    top: 662px;
}

#codePIII{
    left: 1681px;
    top: 662px;
}

#codePIIIp{
    left: 1680px;
    top: 662px;
    width: 64px;
    height: 46px;
}

#codePII{
    left: 1617px;
    top: 662px;
}

#codePIIp{
    left: 1617px;
    top: 662px;
}

#codePI{
    left: 1562px;
    top: 662px;
}

#codePIp{
    left: 1562px;
    top: 662px;
}

#codePp{
    left: 1805px;
    top: 613px;
}

#codeP{
    left: 1805px;
    top: 613px;
}

#codeIIII{
    left: 1745px;
    top: 613px;
}

#codeIIIIp{
    left: 1745px;
    top: 613px;
}

#codeIII{
    left: 1680px;
    top: 613px;
}

#codeIIIp{
    left: 1680px;
    top: 613px;
}
#codeII{
    left: 1617px;
    top: 613px;
}

#codeIIp{
    left: 1617px;
    top: 613px;
}

#codeI{
    left: 1558px;
    top: 609px;
}

#codeIp{
    left: 1558px;
    top: 609px;
}

#codeD{
    left: 1805px;
    top: 662px;
}

#codeDp{
    left: 1805px;
    top: 662px;
}
                                                                             
                                                                             /* Game 4 */
                                                                            
#game4background{
    position: absolute;
    width: 1920px;
    height: 1080px;
}                                                                             

#crowd{
    position: absolute;
    width: 1920px;
    height: 1080px;
}

.start{
    position: absolute;
    top: 75px;
    left: 390px;
    display: none;
}

 .end{
     position: absolute;
     top: 75px;
     left: 390px;
     display: none;
 }

.show{
    position: absolute;
    display: none;
    -webkit-transform: scale(0.8);
    top: 60px;
    left: 375px;;
}

#main{
    position: absolute; 
    width: 1181px; 
    height: 700px; 
    top: 100px;
    left: 370px; 
    display: none;
}

#screen1{
    position: absolute;
    display: none;
    top: 841px;
    left: 306px;
    -webkit-transform: scale(0.8);
}

#screen2{
     position: absolute;
     display: none;
     top: 841px;
     left: 716px;
     -webkit-transform: scale(0.8);
}

#screen3{
     position: absolute;
     display: none;
     top: 841px;
     left: 1126px;
     -webkit-transform: scale(0.8);
}

.question{
    position: absolute; 
    display: none;
    top: 30px;
    left: 380px;
}

.answer{
    position: absolute; 
    display: none;
    top: 813px;
    -webkit-transform: scale(0.8);
}

.green{
    position: absolute;
    display: none;
    top: 745px;
    -webkit-transform: scale(0.5);
}

.red{
    position: absolute;
    display: none;
    top: 745px;
    -webkit-transform: scale(0.5);
}

#score{
    position: absolute;
    display: none;
    top: 400px;
    font-family: sans-serif;
    font-size: 32px;
    font-weight: bold;
    left: 660px;
}