.gameContainer{
    position: absolute;
    top: 80px;
    left: 180px;
    transform: scale(0.80,0.80);
}


/* Background */

.BG_Back_Night1{
    position: absolute;
    top: 30px;
    left: 10px;
}





/*.MG_day1{
    position: absolute;
    top: 145px;
    left: 185px;
}*/

/* Tree Demons */

/*.M_tree1{
    position: absolute;
    top: 145px;
    left: 260px;
}*/

.Tree_DK_enter1{
    position: absolute;
    top: 330px;
    left: 230px;
    background: transparent url(Sprites/DK_TreeEnter1.png) 0 0 no-repeat;
    width: 668px;
    height: 660px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run4 2s steps(25) infinite;
    cursor: pointer;
}

.ApexTree_DK_enter1{
    position: absolute;
    top: 330px;
    left: 230px;
    background: transparent url(Sprites/ApexDK_TreeEnter1.png) 0 0 no-repeat;
    width: 668px;
    height: 660px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run4 2s steps(25) infinite;
    cursor: pointer;
}

.Tree_DK_enter2{
    position: absolute;
    top: 170px;
    left: 265px;
    background: transparent url(Sprites/DK_TreeEnter2.png) 0 0 no-repeat;
    width: 319px;
    height: 375px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run6 2s steps(26) infinite;
    cursor: pointer;
}


.Tree_DK_advance1{
    position: absolute;
    top: 40px;
    left: 760px;
    background: transparent url(Sprites/DK_TreeAdvance1.png) 0 0 no-repeat;
    width: 319px;
    height: 375px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run6 2s steps(26) infinite;
    transform: rotate( 15deg); 
    cursor: pointer;
}
.ApexTree_DK_advance1{
    position: absolute;
    top: 40px;
    left: 760px;
    background: transparent url(Sprites/DK_TreeAdvance1.png) 0 0 no-repeat;
    width: 319px;
    height: 375px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run6 2s steps(26) infinite;
    transform: rotate( 15deg); 
    cursor: pointer;
}

.Tree_DK_advance2{
    position: absolute;
    top: 490px;
    left: 860px;
    background: transparent url(Sprites/DK_TreeAdvance2.png) 0 0 no-repeat;
    width: 319px;
    height: 375px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run6 2s steps(26) infinite; 
    cursor: pointer;
}

.Tree_DK_enter1go{
    position: absolute;
    top: -20px;
    left: 320px;
    transform: rotate(15deg);
    background: transparent url(Sprites/DK_TreeEnter1go.png) 0 0 no-repeat;
    width: 668px;
    height: 760px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run5 0.6s steps(8) infinite;
    pointer-events: none;
}
.ApexTree_DK_enter1go{
    position: absolute;
    top: -20px;
    left: 320px;
    transform: rotate(15deg);
    background: transparent url(Sprites/DK_TreeEnter1go.png) 0 0 no-repeat;
    width: 668px;
    height: 760px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run5 0.6s steps(8) infinite;
    pointer-events: none;
}

.Tree_DK_enter2go{
    position: absolute;
    top: -70px;
    left: 140px;
    transform: rotate(-10deg);
    background: transparent url(Sprites/DK_TreeEnter2go.png) 0 0 no-repeat;
    width: 668px;
    height: 760px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run5 0.65s steps(8) infinite;
    pointer-events: none;
}


.Tree_DK_advance1go{
    position: absolute;
    top: 55px;
    left: 730px;
    transform: rotate(-15deg);
    background: transparent url(Sprites/DK_TreeAdvance1go.png) 0 0 no-repeat;
    width: 668px;
    height: 760px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run5 0.76s steps(8) infinite;
    pointer-events: none;
}
.ApexTree_DK_advance1go{
    position: absolute;
    top: 55px;
    left: 730px;
    transform: rotate(-15deg);
    background: transparent url(Sprites/DK_TreeAdvance1go.png) 0 0 no-repeat;
    width: 668px;
    height: 760px;
    /*transform: translate(-50%, -50%);*/
    margin: 2em auto;
    animation: run5 0.76s steps(8) infinite;
    pointer-events: none;
}

.Tree_DK_advance2go{
    position: absolute;
    top: 270px;
    left: 690px;
    background: transparent url(Sprites/DK_TreeAdvance2go.png) 0 0 no-repeat;
    width: 922px;
    height: 520px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(-5deg);
    margin: 2em auto;
    animation: run7 0.75s steps(7) infinite;
    pointer-events: none;
}

/* Tree Hits and Deaths */

.DK_treeHit1{
    position: absolute;
    top: 140px;
    left: -130px;
    background: transparent url(Sprites/DK_TreeDead3.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(0deg);
    margin: 2em auto;
    animation: run9 1.25s steps(13) infinite; 
    pointer-events: none;
}
.ApexDK_treeHit1{
    position: absolute;
    top: 140px;
    left: -180px;
    background: transparent url(Sprites/DK_TreeDead4.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(0deg);
    margin: 2em auto;
    animation: run9 1.05s steps(13) infinite;   
    pointer-events: none;
}

.DK_treeHit2{
    position: absolute;
    top: -220px;
    left: -180px;
    background: transparent url(Sprites/DK_TreeDead2.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(40deg);
    margin: 2em auto;
    animation: run9 1.25s steps(13) infinite;
    pointer-events: none;  
}
.DK_treeHit3{
    position: absolute;
    top: -120px;
    left: 390px;
    background: transparent url(Sprites/DK_TreeDead3.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(50deg);
    margin: 2em auto;
    animation: run9 1.25s steps(13) infinite;
    pointer-events: none;  
}

.ApexDK_treeHit3{
    position: absolute;
    top: -190px;
    left: 440px;
    background: transparent url(Sprites/DK_TreeDead4.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(50deg);
    margin: 2em auto;
    animation: run9 1.25s steps(13) infinite;
    pointer-events: none;  
}

.DK_treeHit4{
    position: absolute;
    top: 140px;
    left: 300px;
    background: transparent url(Sprites/DK_TreeDead2.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    /*transform: translate(-50%, -50%);*/
    transform: rotate(0deg);
    margin: 2em auto;
    animation: run9 1.05s steps(13) infinite;
    pointer-events: none; 
}


/*.L_tree1{
    position: absolute;
    top: 145px;
    left: 185px;
}

.R_tree1{
    position: absolute;
    top: 145px;
    left: 600px;
}*/

.BG_Mid_Night1{
    position: absolute;
    top: 30px;
    left: 10px;
    pointer-events: none;
}

/* Path 1 */

.DK_enter1{
    position: absolute;
    top: 395px;
    left: 12px;
    background: transparent url(Sprites/DK_Enter1.png) 0 0 no-repeat;
    width: 600px;
    height: 755px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run 1.25s steps(14) infinite;
    cursor: pointer;
}

.DK_stand1{
    position: absolute;
    top: 550px;
    left: 190px;
    background: transparent url(Sprites/DK_Stand1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
    cursor: pointer;
}

.DK_stance1{
    position: absolute;
    top: 560px;
    left: 155px;
    background: transparent url(Sprites/DK_Stance1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
    cursor: pointer;
}

.DK_advance1{
    position: absolute;
    top: 553px;
    left: 190px;
    background: transparent url(Sprites/DK_Advance1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
    cursor: pointer;
}

.DK_tooClose1{
    position: absolute;
    top: 553px;
    left: 190px;
    background: transparent url(Sprites/DK_TooClose.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
}

.DK_grab1{
    position: absolute;
    top: 260px;
    left: 1035px;
}

/* Path 2 */

.DK_enter_hit1{
    position: absolute;
    top: 528px;
    left: 182px;
    background: transparent url(Sprites/DK_Enter1_Hit1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run3 1.80s steps(20) infinite;
}

.DK_hit1_glint1{
    position: absolute;
    top: 550px;
    left: 190px;
    background: transparent url(Sprites/DK_Stand_Hit1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
    cursor: pointer;
}

.DK_stance10{
    position: absolute;
    top: 550px;
    left: 190px;
    background: transparent url(Sprites/DK_Stance1_Hit1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run3 1.80s steps(20) infinite;
    cursor: pointer;
}

.DK_advance10{
    position: absolute;
    top: 553px;
    left: 190px;
    background: transparent url(Sprites/DK_Advance1_Hit1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
    cursor: pointer;
}

.DK_tooClose10{
    position: absolute;
    top: 553px;
    left: 190px;
    background: transparent url(Sprites/DK_TooClose_Hit1.png) 0 0 no-repeat;
    width: 416px;
    height: 495px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run2 1.25s steps(14) infinite;
}

/*Path 3 */

.DK_stance100{
    position: absolute;
    top: 350px;
    left: 320px;
    cursor: pointer;
}

.DK_advance100{
    position: absolute;
    top: 350px;
    left: 320px;
    cursor: pointer;
}

.DK_tooClose100{
    position: absolute;
    top: 350px;
    left: 680px;
}

/*choice*/

.Demon_Knight_Container{
    display: flex;
    padding: 10px;
    flex-wrap: wrap;
    justify-content: space-around;
}

.DK_hit1_dead1{
    position: fixed;
    top: 450px;
    left: -50px;
    background: transparent url(Sprites/DK_Hit1_Dead2.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run9 1.25s steps(13) infinite;
    pointer-events: none;
}



.DK_hit1_dead1b{
    position: absolute;
    top: 500px;
    left: 290px;
    background: transparent url(Sprites/DK_Hit1_Dead1.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run9 1.25s steps(13) infinite;
    pointer-events: none;
}

.DK_hit2_dead1{
    position: absolute;
    top: 550px;
    left: -10px;
    background: transparent url(Sprites/DK_Hit2_Dead4.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run9 1.05s steps(13) infinite;
    pointer-events: none;
}

.DK_hit2_dead1b{
    position: absolute;
    top: 560px;
    left: 290px;
    background: transparent url(Sprites/DK_Hit2_Dead4.png) 0 0 no-repeat;
    width: 720px;
    height: 595px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run9 1.05s steps(13) infinite;
    pointer-events: none;
}

.DK_hit3_dead1{
    position: absolute;
    top: 350px;
    left: 520px;
} 

/* Roem */

.Roem_Zero1{
    position: absolute;
    top: 515px;
    left: 1570px;
    background: transparent url(Sprites/Roem_Zero1.png) 0 0 no-repeat;
    width: 283px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run10 4.75s steps(56) infinite;
    animation-play-state: running;
    pointer-events: none;
}

.Roem_Zero2{
    position: absolute;
    top: 515px;
    left: 1570px;
    background: transparent url(Sprites/Roem_Zero2.png) 0 0 no-repeat;
    width: 283px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run10 4.75s steps(56) infinite;
    pointer-events: none;
}

.Roem_G1{
    position: absolute;
    top: 515px;
    left: 1570px;
    background: transparent url(Sprites/Roem_G1.png) 0 0 no-repeat;
    width: 283px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run10 4.75s steps(56) infinite;
    pointer-events: none;
}

.Roem_D1{
    position: absolute;
    top: 515px;
    left: 1570px;
    background: transparent url(Sprites/Roem_D1.png) 0 0 no-repeat;
    width: 283px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run10 4.75s steps(56) infinite;
    pointer-events: none;
}

.Scepter1{
    
    position: absolute;
    top: 770px;
    left: 1400px;
    transform: rotate( -9deg); 

}

/* Payla */

.Payla_1{
    position: absolute;
    top: 515px;
    left: 1280px;
    background: transparent url(Sprites/Payla_DefaultStance.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
}

.Payla_lowshot1{
    position: absolute;
    top: 515px;
    left: 1320px;
    background: transparent url(Sprites/Payla_LowShot.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
    opacity: 0.0;
}

.Payla_midshot1{
    position: absolute;
    top: 515px;
    left: 1280px;
    background: transparent url(Sprites/Payla_MidShot.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
    opacity: 0.0;
}

.Payla_pullback1{
    position: absolute;
    top: 515px;
    left: 1365px;
    background: transparent url(Sprites/Payla_Pullback.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
    opacity: 0.0;
}

.Payla_treeLeft{
    position: absolute;
    top: 515px;
    left: 1280px;
    background: transparent url(Sprites/Payla_TreeLeft.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
    opacity: 0.0;
}

.Payla_treeLeft_B{
    position: absolute;
    top: 515px;
    left: 1280px;
    background: transparent url(Sprites/Payla_TreeLeft_b.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
    opacity: 0.0;
}

.Payla_treeRight{
    position: absolute;
    top: 515px;
    left: 1370px;
    background: transparent url(Sprites/Payla_TreeRight.png) 0 0 no-repeat;
    width: 415px;
    height: 529px;
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run8 4.75s steps(58) infinite;
    pointer-events: none;
    opacity: 0.0;
}

.BG_Front_Night1{
    position: absolute;
    top: 30px;
    left: 10px;
    pointer-events: none;
}


/*Victory Screen*/

.levelComplete{

    position: absolute;
    top: 30px;
    left: 10px;
    pointer-events: none;
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
    
}

.Dark_BG2{

    position: absolute;
    top: 30px;
    left: 10px;
    mix-blend-mode: overlay;
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
    pointer-events: none;

}

.menuButtonLC{

    position: absolute;
    top: 737px;
    left: 1540px;   
    cursor:pointer;
    animation: fadeIn 1s;
    animation-timing-function: ease-in;

}

.WIPtext{

    position: absolute;
    top: 490px;
    left: 180px;   
    animation: fadeIn 1s;
    animation-timing-function: ease-in;

}

.lvl1{

    position: absolute;
    top: 178px;
    left: 1760px;   
    animation: fadeIn 1s;
    animation-timing-function: ease-in;

}

.lvl2{

    position: absolute;
    top: 178px;
    left: 1750px;   
    animation: fadeIn 1s;
    animation-timing-function: ease-in;

}

.lvl3{

    position: absolute;
    top: 178px;
    left: 1750px;   
    animation: fadeIn 1s;
    animation-timing-function: ease-in;

}

.LC_Line1A{
    position: absolute;
    top: 0px;
    left: 1385px;
    background: transparent url(Sprites/GO_Line1.png) 0 0 no-repeat;
    width: 437px;
    height: 800px;
    margin: 2em auto;
    animation: run17 1s steps(12) infinite;
    opacity: 0.7;
    pointer-events: none;
}

.LC_Line1B{
    position: absolute;
    top: 0px;
    left: 1318px;
    background: transparent url(Sprites/GO_Line1.png) 0 0 no-repeat;
    width: 437px;
    height: 800px;
    margin: 2em auto;
    animation: run17 1s steps(12) infinite;
    opacity: 0.7;
    pointer-events: none;
}

.LC_Line2{
    position: absolute;
    top: 350px;
    left: 123px;
    background: transparent url(Sprites/GO_Line2.png) 0 0 no-repeat;
    width: 1875px;
    height: 28px;
    margin: 2em auto;
    animation: run18 1.83s steps(13) infinite;
    animation-delay: 250ms;
    filter:brightness(600%);
}

.LC_Line3A{
    position: absolute;
    top: 0px;
    left: 50px;
    background: transparent url(Sprites/GO_Line3.png) 0 0 no-repeat;
    width: 26px;
    height: 800px;
    margin: 2em auto;
    animation: run19 1.83s steps(13) infinite;
    animation-delay: 250ms;
}

.LC_Line3B{
    position: absolute;
    top: 0px;
    left: 114px;
    background: transparent url(Sprites/GO_Line3.png) 0 0 no-repeat;
    width: 26px;
    height: 800px;
    margin: 2em auto;
    animation: run19 1.83s steps(13) infinite;
    animation-delay: 250ms;
}


.next_level{

    position: absolute;
    top: 737px;
    left: 1540px;   
    cursor:pointer;
    animation: fadeIn 1s;
    animation-timing-function: ease-in;

}

/*Instructions*/

.instruct_BG{
    position: absolute;
    top: 33px;
    left: 12px;
    pointer-events: none;
    transform: scale(1,1);
    
}

.instruct_Backdrop{
    position: absolute;
    top: 105px;
    left: 7px;
    pointer-events: none;
    animation: fadeIn 2s;
}

.GO_Line2B{
    position: absolute;
    top: 196px;
    left: 3px;
    background: transparent url(Sprites/GO_Line2.png) 0 0 no-repeat;
    width: 1875px;
    height: 28px;
    transform: translate(-50%, -50%);
    transform: scale(1.20,1.20);
    margin: 2em auto;
    animation: run18 1.83s steps(13) infinite;
    animation-delay: 250ms;
}

.GO_Line3B{
    position: absolute;
    top: -89px;
    left: 1085px;
    background: transparent url(Sprites/GO_Line3.png) 0 0 no-repeat;
    width: 26px;
    height: 800px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run19 1.83s steps(13) infinite;
    animation-delay: 250ms;
}

.GO_Line3B2{
    position: absolute;
    top: -89px;
    left: 120px;
    background: transparent url(Sprites/GO_Line3.png) 0 0 no-repeat;
    width: 26px;
    height: 800px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run19 1.83s steps(13) infinite;
    animation-delay: 250ms;
}

.instruct_TextContent1{
    position: absolute;
    top: 30px;
    left: 127px;
    pointer-events: none;
    animation: fadeIn .5s;
}

.instruct_TextContent2{
    position: absolute;
    top: 30px;
    left: 127px;
    pointer-events: none;
    animation: fadeIn 1s, slide4 .5s ease-in;
}

.instruct_Button{
    position: absolute;
    top: 439px;
    left: 1010px;
    cursor: pointer;
    animation: fadeIn .5s;
}



.Animation1_A{
    position: absolute;
    top: 555px;
    left: 947px;
    background: transparent url(Sprites/Animation1_A.png) 0 0 no-repeat;
    width: 490px;
    height: 460px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    pointer-events: none;
    animation: run14 2.03s steps(28) infinite;
}

.Animation1_B{
    position: absolute;
    top: 555px;
    left: 947px;
    background: transparent url(Sprites/Animation1_B.png) 0 0 no-repeat;
    width: 490px;
    height: 460px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    pointer-events: none;
    animation: run15 4.09s steps(58) infinite;
}

.Animation1_C{
    position: absolute;
    top: 555px;
    left: 947px;
    background: transparent url(Sprites/Animation1_C.png) 0 0 no-repeat;
    width: 490px;
    height: 460px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    pointer-events: none;
    animation: run15 4.09s steps(58) infinite;
}

.Animation1_D{
    position: absolute;
    top: 555px;
    left: 947px;
    background: transparent url(Sprites/Animation1_D.png) 0 0 no-repeat;
    width: 490px;
    height: 460px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    pointer-events: none;
    animation: run15 4.09s steps(58) infinite;
}

.nightSky1{

    position: absolute;
    top: 28px;
    left: 8px;
    pointer-events: none;
    animation: slide2 12s infinite, fadeIn2 6s infinite, fadeOut2 1s 4s infinite;
    
}

.nightSky2{

    position: absolute;
    top: 28px;
    left: 8px;
    pointer-events: none;
    animation: slide2 12s infinite, fadeIn2 6s infinite, fadeOut2 1s 4s infinite;
    
}

.nightSky1B{

    position: absolute;
    top: 28px;
    left: 8px;
    pointer-events: none;
    animation: slide2 12s infinite, fadeIn2 6s infinite, fadeOut2 1s 4s infinite;
    
}

.nightSky2B{

    position: absolute;
    top: 28px;
    left: 8px;
    pointer-events: none;
    animation: slide2 12s infinite, fadeIn2 6s infinite, fadeOut2 1s 4s infinite;
    
}

.cardBackdrop{
    position: absolute;
    top: 28px;
    left: 10px;
    transform: scale(1.05,1.15);
    pointer-events: none;
    /*mix-blend-mode: overlay;*/
    animation: expandIn 1s;
    opacity: 0.95;

}

.blueCardButton{
    position: absolute;
    transform: scale(19%);
    top: 510px;
    left: 957px;
    transition: .5s ease-in-out;
    opacity: 0.5;
    cursor:pointer;
}

.blueCardButton:hover{
    opacity: 0.8;
    
}

.blueCardButton2{
    position: absolute;
    transform: scale(19%);
    top: 510px;
    left: 957px;
    transition: .5s ease-in-out;
    opacity: 0.5;
    cursor:pointer;
}

.blueCardButton2:hover{
    opacity: 0.8;
    
}

.blueCardButton3{
    position: absolute;
    transform: scale(19%);
    top: 510px;
    left: 957px;
    transition: .5s ease-in-out;
    opacity: 0.5;
    cursor:pointer;
}

.blueCardButton3:hover{
    opacity: 0.8;
    
}

.Card1c{
    position: absolute;
    top: 400px;
    left: 950px;
    background: transparent url(Sprites/Card1c_lofi.png) 0 0 no-repeat;
    width: 700px;
    height: 380px;   
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run11 4.09s steps(55) infinite;
}

.Card1b{
    position: absolute;
    top: 400px;
    left: 950px;
    background: transparent url(Sprites/Card1b_lofi.png) 0 0 no-repeat;
    width: 700px;
    height: 380px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run11 4.09s steps(55) infinite;
}

.Card1a{
    position: absolute;
    top: 400px;
    left: 950px;
    background: transparent url(Sprites/Card1a_lofi.png) 0 0 no-repeat;
    width: 700px;
    height: 380px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run11 4.09s steps(55) infinite;
}

.exDistressedRoem1{
    position: absolute;
    top: 56px;
    left: 1240px;

}

.exDistressedRoem2{
    position: absolute;
    top: 56px;
    left: 1240px;
}

.exNormalPayla1{
    position: absolute;
    top: 176px;
    left: 90px;
}

.exNormalPayla2{
    position: absolute;
    top: 176px;
    left: 90px;
}

.exNormalRoem1{
    position: absolute;
    top: 56px;
    left: 1240px;
}

.exNormalRoem2{
    position: absolute;
    top: 56px;
    left: 1240px;
}

.exSeriousPayla1{
    position: absolute;
    top: 176px;
    left: 90px;
}

.exSeriousPayla2{
    position: absolute;
    top: 176px;
    left: 90px;
}

.scene1Text{
    position: absolute;
    top: 760px;
    left: 947px;
    background: transparent url(Sprites/Scene1_Text.png) 0 0 no-repeat;
    width: 1875px;
    height: 87px;  
    transform: translate(-50%, -50%);
    margin: 2em auto;
    animation: run13 4.5s steps(54) infinite;

}

.TextButton1{
    position: absolute;
    transform: scale(15%);
    top: 726px;
    left: 1673px;
    transition: .5s ease-in-out;
    opacity: 0.5;
    cursor:pointer;
}

.TextButton2{
    position: absolute;
    transform: scale(15%);
    top: 726px;
    left: 1673px;
    transition: .5s ease-in-out;
    opacity: 0.5;
    cursor:pointer;
}

.TextButton3{
    position: absolute;
    transform: scale(15%);
    top: 726px;
    left: 1673px;
    transition: .5s ease-in-out;
    opacity: 0.5;
    cursor:pointer;
}

.TextButton1:hover{
    opacity: 1.0;
}

.TextButton2:hover{
    opacity: 1.0;
}

.TextButton3:hover{
    opacity: 1.0;
}

.loadScreen{
    position: absolute;
    top: 25px;
    left: 2px;
    width: 1875px;
    height: 800px;  
    background-color: black;
    opacity: 1.0;
}

.Black_Screen{
    position: absolute;
    transform: scale(0.80,0.80);
    top: 25px;
    left: 2px;
    animation: fadeIn .25s;
    animation-timing-function: ease-in;
}

.Black_Screen2{
    position: absolute;
    transform: scale(0.80,0.80);
    top: 25px;
    left: 2px;
    animation: fadeOut 1.25s;
    animation-timing-function: ease-out;
}

.Black_Screen3{
    position: absolute;
    top: 30px;
    left: 10px;
    animation: fadeOut 1.25s;
    animation-timing-function: ease-out;
}

.loadingAnimation{

    position: absolute;
    top: 350px;
    left: 835px;
    background: transparent url(Sprites/loadingAnimation.png) 0 0 no-repeat;
    width: 138px;
    height: 123px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run20 1.83s steps(22) infinite;
    pointer-events: none;

}

.newLoader{

    position: absolute;
    top: 440px;
    left: 835px;
    height: 10px;
    width: 150px;
    background-color: rgba(85, 85, 85, 0);
    display: flex;
    justify-content: space-between;
    animation: loadAction 1.83s infinite;

}

.newLoader:after,
.newLoader:before {
  content: '';
  background: rgb(255, 197, 90);
  height: 25px;
  width: 25px;
  border-radius: 50%;
}

@keyframes loadAction {
    0% { transform: rotate(0) }
    100% { transform: rotate(360deg) }

}

.DK_advance1animate10{
    position: absolute;
    top: 10px;
    left: 0px;
    animation: slide 3.5s;
}

.DK_tooClose1animate10{
    position: absolute;
    top: 10px;
    left: 485px;
    animation: slide 2s;
}



.DK_advance1animate{
    position: absolute;
    top: 10px;
    left: 0px;
    animation: slide 3.5s;
}

.DK_tooClose1animate{
    position: absolute;
    top: 10px;
    left: 485px;
    animation: slide 2s;
}

/*Grab and Game Over*/

.DK_OuterGrab_Hit1{
    position: absolute;
    top: 218px;
    left: 1000px;
    background: transparent url(Sprites/DK_Grab_Hit1.png) 0 0 no-repeat;
    width: 478px;
    height: 525px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run16 2.01s steps(25) infinite;
}

.DK_OuterGrab{
    position: absolute;
    top: 218px;
    left: 1000px;
    background: transparent url(Sprites/DK_Grab.png) 0 0 no-repeat;
    width: 478px;
    height: 525px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run16 2.01s steps(25) infinite;
}

.GO_Line1{
    position: absolute;
    top: 0px;
    left: 984px;
    background: transparent url(Sprites/GO_Line1.png) 0 0 no-repeat;
    width: 437px;
    height: 800px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run17 1s steps(12) infinite;
}

.GO_Line2{
    position: absolute;
    top: 250px;
    left: 3px;
    background: transparent url(Sprites/GO_Line2.png) 0 0 no-repeat;
    width: 1875px;
    height: 28px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run18 1.83s steps(13) infinite;
    animation-delay: 250ms;
}

.GO_Line3{
    position: absolute;
    top: 0px;
    left: 260px;
    background: transparent url(Sprites/GO_Line3.png) 0 0 no-repeat;
    width: 26px;
    height: 800px;
    transform: translate(-50%, -50%);
    transform: scale(0.80,0.80);
    margin: 2em auto;
    animation: run19 1.83s steps(13) infinite;
    animation-delay: 250ms;
}

.RedGameOver_BG{
    position: absolute;
    top: 28px;
    left: 4px;
    transform: scale(0.80,0.80);
    pointer-events: none;
}

.Dark_BG{
    position: absolute;
    top: 28px;
    left: 28px;
    transform: scale(0.80,0.80);
    pointer-events: none;
    mix-blend-mode: overlay;
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
}

.redBars{
    position: absolute;
    top: 73px;
    left: 5px;
    transform: scale(0.80,0.80);
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
}

.captured{
    position: absolute;
    top: 170px;
    left: 265px;
    transform: scale(0.80,0.80);
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
}

.GO_Image{
    position: absolute;
    top: 225px;
    left: 985px;
    transform: scale(0.80,0.80);
    animation: fadeIn 800ms;
    animation-timing-function: ease-in;
}

.GO_Image1{
    position: absolute;
    top: 225px;
    left: 986px;
    transform: scale(0.80,0.80);
    animation: fadeIn 800ms;
    animation-timing-function: ease-in;
}

.restartLevel1{
    position: absolute;
    top: 355px;
    left: 295px;
    transform: scale(0.80,0.80);
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
}

.menuButton1{
    position: absolute;
    top: 455px;
    left: 305px;
    transform: scale(0.80,0.80);
    animation: fadeIn 1s;
    animation-timing-function: ease-in;
}

.restartLevelHover1{
    position: absolute;
    top: 355px;
    left: 295px;
    transform: scale(0.80,0.80);
    opacity: 0.0;
    transition: ease-in-out;
    cursor:pointer;
}

.menuButtonHover1{
    position: absolute;
    top: 455px;
    left: 305px;
    transform: scale(0.80,0.80);
    opacity: 0.0;
    transition: ease-in-out;
    cursor:pointer;
}

.restartLevelHover1:hover{
    opacity: 1.0;
}

.menuButtonHover1:hover{
    opacity: 1.0;
}

/*Main Menu*/

.maineMenu{
    position: absolute;
    top: 30px;
    left: 10px;
    opacity: 1.0;
    pointer-events: none;
}

.mmButton1{
    position: absolute;
    top: 320px;
    left: 167px;

    opacity: 0.0;
    cursor:pointer;
}

.mmButton2{
    position: absolute;
    top: 435px;
    left: 167px;

    opacity: 0.0;
    cursor:pointer;
}

.mmButton3{
    position: absolute;
    top: 543px;
    left: 170px;

    opacity: 0.0;
    cursor:pointer;
}

.mmButton4{
    position: absolute;
    top: 652px;
    left: 170px;

    opacity: 0.0;
    cursor:pointer;
}

.mmButton5{
    position: absolute;
    top: 372px;
    left: 585px;
    transform: scale(1.00,2.10);
    opacity: 0.0;
    cursor:pointer;
}

.mmStoryMode{
    position: absolute;
    top: 30px;
    left: 10px;
    opacity: 1.0;
    pointer-events: none;
}

.mmArcadeMode{
    position: absolute;
    top: 30px;
    left: 10px;

    pointer-events: none;
}

.mmAboutPage{
    position: absolute;
    top: 30px;
    left: 10px;
}

.mmCreditsPage{
    position: absolute;
    top: 30px;
    left: 10px;
}

.backButton1{
    position: absolute;
    top: 100px;
    left: 0px;
    transform: scale(1.00,2.10);
    opacity: 0.0;
    cursor:pointer;
}

.backButton2{
    position: absolute;
    top: 100px;
    left: 0px;
    transform: scale(1.00,2.10);
    opacity: 0.0;
    cursor:pointer;
}



/*.overlay{
    
    box-shadow: 0 0 500px ;
    pointer-events: none;
    opacity: 50%;
    mix-blend-mode: overlay;
    position: absolute;
    top: 25px;
    left: 5px;
} */


.BG_Borderbox{
    position: absolute;
    top: -130px;
    left: -234px;
    transform: scale(0.80,0.80);
    pointer-events: none;
    /*border-style: dotted;
    border-width: 5px;*/
    opacity: 1;
}

.BG_Borderbox2{
    position: absolute;
    top: -120px;
    left: -227px;
    pointer-events: none;
    /*border-style: dotted;
    border-width: 5px;*/
    opacity: 1;
}

.BG_Borderbox3{
    position: absolute;
    top: -120px;
    left: -227px;
    pointer-events: none;
    /*border-style: dotted;
    border-width: 5px;*/
    opacity: 1;
}


@keyframes run {
    100% {
        background-position: -8400px, 0; }
}

@keyframes run2 {
    100% {
        background-position: -5824px, 0; }
}

@keyframes run3 {
    100% {
        background-position: -8320px, 0; }
}

@keyframes run4 {
    100% {
        background-position: -16700px, 0; }
}

@keyframes run5 {
    100% {
        background-position: -5344px, 0; }
}

@keyframes run6 {
    100% {
        background-position: -8294px, 0; }
}

@keyframes run7 {
    100% {
        background-position: -6454px, 0; }
}

@keyframes run8 {
    100% {
        background-position: -24070px, 0; }
}

@keyframes run9 {
    100% {
        background-position: -9360px, 0; }
}

@keyframes run10 {
    100% {
        background-position: -15848px, 0; }
}

@keyframes run11 {
    100% {
        background-position: -38500px, 0; }
}

@keyframes run12 {
    100% {
        background-position: -22500px, 0; }
}

@keyframes run13 {
    100% {
        background-position: -101250px, 0; }
}

@keyframes run14 {
    100% {
        background-position: -13720px, 0; }
}

@keyframes run15 {
    100% {
        background-position: -28420px, 0; }
}

@keyframes run16 {
    100% {
        background-position: -11950px, 0; }
}

@keyframes run17 {
    100% {
        background-position: -5244px, 0; }
}

@keyframes run18 {
    100% {
        background-position: -24375px, 0; }
}

@keyframes run19 {
    100% {
        background-position: -338px, 0; }
}

@keyframes run20 {
    100% {
        background-position: -3036px, 0; }
}



@keyframes slide {
    0%{
        transform: translate3d(0px, 0px, 0px);
    }
    10%{
        transform: translate3d(0px, 0px, 0x);        
    }
    100%{
        transform: translate3d(800px, 0px, 0px);
    }
}

@keyframes fadeIn {
    0% {opacity:0;
    }
    100% {opacity:1;
    }
}

@keyframes fadeOut {
    0% {opacity:1;
    }
    100% {opacity:0;
    }
}

@keyframes fadeIn2 {
    0% {opacity:0;
    }
    20% {opacity:1;
    }
    100% {opacity:1;
    }
}

@keyframes fadeOut2 {
    0% {opacity:1;
    }
    100% {opacity:0;
    }
}

@keyframes slide2 {
    0%{
        transform: translate3d(0px, 0px, 0px);
    }
    100%{
        transform: translate3d(0px, -200px, 0px);
    }
}

@keyframes expandIn {
    0%{
        transform: scale(1.00,1.00);
    }
    100%{
        transform: scale(1.05,1.15);
    }
}

@keyframes contractOut {
    0%{
        transform: scale(1.00,1.00);
    }
    100%{
        transform: scale(1.05,1.15);
    }
}

@keyframes slide3 {
    0%{
        transform: translate3d(0px, 0px, 0px);
    }
    100%{
        transform: translate3d(-200px, 0px, 0px);
    }
}

@keyframes slide4 {
    0%{
        transform: translate3d( 200px, 0px, 0px);
    }
    100%{
        transform: translate3d( 0px, 0px, 0px);
    }
}