.tasks-wrapper,
.tasks-container {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
    z-index: 9999;
    transition: 0.5s opacity;
    background-color: #000;
}

.tasks-background {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0px;
    left: 0px;
}

.tasks-background-img {
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}   

.tasks-background-img > .tasks-background-img-full {
    position: absolute;
    max-width: 100%;
    max-height: 100%;
    transition: 0.5s opacity;
}   



@keyframes taskOneRipShake {
    0% {
        transform: rotateZ(27deg);
    }

    50% {
        transform: rotateZ(33deg);
    }
   
    100% {
        transform: rotateZ(27deg);
    }
}

.task-animated-text {
    font-size: 140px;
    transform: rotateZ(30deg);
    position: absolute;

    animation-name: taskOneRipShake;
    animation-duration: 0.15s;
    animation-iteration-count: infinite
}


.task-cutscene-clickbox {
    position: absolute;
    z-index: 99;
    cursor: pointer;
    transition: opacity 0.5s;
}

.task-cutscene-clickbox .task-handprompt {
    position: absolute;
    width: 120px;
    height: auto;
    right: 80px;
    bottom: 80px;
}

.task-cutscene-clickbox .task-textprompt {
    position: absolute;
    right: -300px;
    bottom: -20px;
    width: 720px;
    font-size: 56px;
    text-align: center;
}

#tasks-06 .task-cutscene-clickbox .task-textprompt{
    bottom: -100px;
}

#tasks-01 .task-cutscene-clickbox {
    top: 340px;
    left: 80px;
    width: 640px;
    height: 360px;
}

#tasks-02 .task-cutscene-clickbox {
    top: 30px; left: 600px; width: 500px; height: 360px;
}

#tasks-03 .task-cutscene-clickbox {
    top: 0px; left: 0px; width: 100%; height: 100%;
}

#tasks-04 .task-cutscene-clickbox{
    top: 290px;
    left: 690px;
    width: 340px;
    height: 340px;
}

#tasks-05 .task-cutscene-clickbox {
    top: 410px;
    left: 910px;
    width: 300px;
    height: 300px;
}

#tasks-06 .task-cutscene-clickbox.tasks-06-01 {
    top: 240px;
    right: 550px;
    width: 320px;
    height: 340px;
}

#tasks-06 .task-cutscene-clickbox.tasks-06-02 {
    top: 380px;
    left: 20px;
    width: 400px;
    height: 270px;
}

#tasks-06 .task-cutscene-clickbox.tasks-06-03 {
    top: 380px;
    left: 450px;
    width: 400px;
    height: 310px;
}

#tasks-06 .task-cutscene-clickbox.tasks-06-04 {
    top: 400px;
    right: 40px;
    width: 510px;
    height: 310px;
}

#tasks-07 .task-cutscene-clickbox {
    bottom: 60px;
    left: 300px;
    width: 360px;
    height: 420px;
}

#tasks-08 .task-cutscene-clickbox.tasks-08-01 {
    top: 400px;
    left: 30px;
    width: 720px;
    height: 340px;
}

#tasks-08 .task-cutscene-clickbox.tasks-08-02 {
    top: 40px;
    left: 0px;
    width: 220px;
    height: 290px;
}

#tasks-08 .task-cutscene-clickbox.tasks-08-03 {
    top: 40px;
    right: 40px;
    width: 540px;
    height: 530px;
}

#tasks-08 .task-cutscene-clickbox.tasks-08-04 {
    bottom: 0px;
    left: 0px;
    width: 100%;
    height: 200px;
}

#tasks-09 .task-cutscene-clickbox.tasks-09-01 {
    bottom: 0px;
    right: 0px;
    width: 480px;
    height: 680px;
}

#tasks-10 .task-cutscene-clickbox.tasks-10-01 {
    bottom: 10px;
    right: 440px;
    width: 260px;
    height: 300px;
}

#tasks-11 .task-cutscene-clickbox.tasks-11-01 {
    bottom: 180px;
    right: 440px;
    width: 260px;
    height: 260px;
}

#tasks-12 .task-cutscene-clickbox.tasks-12-01 {
    bottom: 40px;
    left: 40px;
    width: 320px;
    height: 390px;
}

#tasks-12 .task-cutscene-clickbox.tasks-12-02 {
    bottom: 0px;
    left: 440px;
    width: 470px;
    height: 270px;
}

#tasks-12 .task-cutscene-clickbox.tasks-12-03 {
    bottom: 210px;
    left: 520px;
    width: 470px;
    height: 240px;
}

#tasks-12 .task-cutscene-clickbox.tasks-12-04 {
    bottom: 0px;
    right: 0px;
    width: 380px;
    height: 420px;
}

#tasks-13 .task-cutscene-clickbox.tasks-13-01 {
    bottom: 160px;
    left: 0px;
    width: 350px;
    height: 330px;
}

#tasks-13 .task-cutscene-clickbox.tasks-13-02 {
    bottom: 0px;
    left: 490px;
    width: 680px;
    height: 280px;
}

#tasks-13 .task-cutscene-clickbox.tasks-13-03 {
    bottom: 280px;
    right: 0px;
    width: 680px;
    height: 250px;
}

#tasks-13 .task-cutscene-clickbox.tasks-13-04 {
    bottom: 0px;
    left: 0px;
    width: 620px;
    height: 250px;
}

#tasks-14 .task-cutscene-clickbox.tasks-14-01 {
    top: 90px;
    right: 700px;
    width: 280px;
    height: 330px;
}

#tasks-14 .task-cutscene-clickbox.tasks-14-02 {
    top: 140px;
    left: 670px;
    width: 380px;
    height: 370px;
}

#tasks-14 .task-cutscene-clickbox.tasks-14-03 {
    top: 280px;
    left: 1010px;
    width: 230px;
    height: 340px;
}

#tasks-15 .task-cutscene-clickbox.tasks-15-01 {
    bottom: 80px;
    right: 80px;
    width: 480px;
    height: 360px;
}

#tasks-16 .task-cutscene-clickbox.tasks-16-01 {
    left: 140px;
    top: 40px;
    width: 360px;
    height: 360px;
}

#tasks-16 .task-cutscene-clickbox.tasks-16-02 {
    left: 540px;
    top: 40px;
    width: 360px;
    height: 360px;
}

#tasks-16 .task-cutscene-clickbox.tasks-16-03 {
    right: 150px;
    top: 40px;
    width: 360px;
    height: 360px;
}

#tasks-17 .task-cutscene-clickbox.tasks-17-01 {
    left: 0px;
    bottom: 0px;
    width: 270px;
    height: 270px;
}

#tasks-18 .task-cutscene-clickbox.tasks-18-01 {
    left: 0px;
    bottom: 280px;
    width: 270px;
    height: 270px;
}

#tasks-18 .task-cutscene-clickbox.tasks-18-02 {
    right: 0px;
    bottom: 230px;
    width: 400px;
    height: 250px;
}

#tasks-18 .task-cutscene-clickbox.tasks-18-03 {
    right: 0px;
    top: 50px;
    width: 400px;
    height: 250px;
}

#tasks-18 .task-cutscene-clickbox.tasks-18-04 {
    left: 0px;
    top: 150px;
    width: 200px;
    height: 240px;
}

#tasks-18 .task-cutscene-clickbox.tasks-18-05 {
    right: 0px;
    top: 190px;
    width: 280px;
    height: 250px;
}


#tasks-19 .task-cutscene-clickbox.tasks-19-01 {
    left: 640px;
    bottom: 270px;
    width: 240px;
    height: 260px;
}

#tasks-19 .task-cutscene-clickbox.tasks-19-02 {
    left: 510px;
    bottom: 170px;
    width: 410px;
    height: 330px;
}

#tasks-19 .task-cutscene-clickbox.tasks-19-03 {
    left: 480px;
    bottom: 110px;
    width: 520px;
    height: 290px;
}

#tasks-19 .task-cutscene-clickbox.tasks-19-04 {
    left: 560px;
    bottom: 60px;
    width: 340px;
    height: 250px;
}

#tasks-20 .task-cutscene-clickbox.tasks-20-01 {
    left: 0px;
    top: 0px;
    width: 680px;
    height: 560px;
}

#tasks-21 .task-cutscene-clickbox.tasks-21-01 {
    right: 200px;
    bottom: 0px;
    width: 410px;
    height: 450px;
}

#task-21-no {
    transition: opacity 0.5s;
}


#tasks-03 .task-cutscene-clickbox.tasks-03-f2 {
    left: 200px;
    top: 150px;
    width: 800px;
    height: 510px;
}

#tasks-03 .task-cutscene-clickbox.tasks-03-f3 {
    top: 160px;
    left: unset;
    right: 380px;
    width: 460px;
    height: 440px;
}

#tasks-03 .task-cutscene-clickbox.tasks-03-f4 {
    top: 280px;
    left: unset;
    right: 600px;
    width: 460px;
    height: 440px;
}

#tasks-03 .task-cutscene-clickbox.tasks-03-f5 {
    top: unset;
    bottom: 0px;
    left: 0px;
    width: 380px;
    height: 320px;
}


#tasks-03 .task-cutscene-clickbox.tasks-03-f6 {
    top: unset;
    bottom: 0px;
    left: unset;
    right: 0px;
    width: 520px;
    height: 320px;
}

#tasks-03 .task-cutscene-clickbox.tasks-03-f7 {
    top: unset;
    bottom: 190px;
    left: unset;
    right: 30px;
    width: 640px;
    height: 520px;
}




@media only screen and (max-width: 1440px) {
    .task-cutscene-clickbox .task-handprompt {
        width: 8.333vw;
        right: 5.556vw;
        bottom: 5.556vw;
    }
    
    .task-cutscene-clickbox .task-textprompt {
        right: -20.833vw;
        bottom: -1.389vw;
        width: 50vw;
        font-size: 3.889vw;
    }

    #tasks-06 .task-cutscene-clickbox .task-textprompt{
        bottom: -6.944vw;
    }

  
    .task-animated-text {
        font-size: 9.722vw;
    }

    #tasks-01 .task-cutscene-clickbox {
        top: 23.611vw;
        left: 5.556vw;
        width: 44.444vw;
        height: 25vw;
    }

    #tasks-02 .task-cutscene-clickbox {
        top: 2.083vw; left: 41.667vw; width: 34.722vw; height: 25vw;
    }
    
    #tasks-03 .task-cutscene-clickbox {
        top: 0vw; left: 0vw; width: 100%; height: 100%;
    }
    
    #tasks-04 .task-cutscene-clickbox{
        top: 20.139vw;
        left: 47.917vw;
        width: 23.611vw;
        height: 23.611vw;
    }
    
    #tasks-05 .task-cutscene-clickbox {
        top: 28.472vw;
        left: 63.194vw;
        width: 20.833vw;
        height: 20.833vw;
    }
    
    #tasks-06 .task-cutscene-clickbox.tasks-06-01 {
        top: 16.667vw;
        right: 38.194vw;
        width: 22.222vw;
        height: 23.611vw;
    }
    
    #tasks-06 .task-cutscene-clickbox.tasks-06-02 {
        top: 26.389vw;
        left: 1.389vw;
        width: 27.778vw;
        height: 18.75vw;
    }
    
    #tasks-06 .task-cutscene-clickbox.tasks-06-03 {
        top: 26.389vw;
        left: 31.25vw;
        width: 27.778vw;
        height: 21.528vw;
    }
    
    #tasks-06 .task-cutscene-clickbox.tasks-06-04 {
        top: 27.778vw;
        right: 2.778vw;
        width: 35.417vw;
        height: 21.528vw;
    }
    
    #tasks-07 .task-cutscene-clickbox {
        bottom: 4.167vw;
        left: 20.833vw;
        width: 25vw;
        height: 29.167vw;
    }

    #tasks-08 .task-cutscene-clickbox.tasks-08-01 {
        top: 27.778vw;
        left: 2.083vw;
        width: 50vw;
        height: 23.611vw;
    }
    
    #tasks-08 .task-cutscene-clickbox.tasks-08-02 {
        top: 2.778vw;
        left: 0vw;
        width: 15.278vw;
        height: 20.139vw;
    }
    
    #tasks-08 .task-cutscene-clickbox.tasks-08-03 {
        top: 2.778vw;
        right: 2.778vw;
        width: 37.5vw;
        height: 36.806vw;
    }
    
    #tasks-08 .task-cutscene-clickbox.tasks-08-04 {
        bottom: 0vw;
        left: 0vw;
        width: 100%;
        height: 13.889vw;
    }
    
    #tasks-09 .task-cutscene-clickbox.tasks-09-01 {
        bottom: 0vw;
        right: 0vw;
        width: 33.333vw;
        height: 47.222vw;
    }

    #tasks-10 .task-cutscene-clickbox.tasks-10-01 {
        bottom: 0.694vw;
        right: 30.556vw;
        width: 18.056vw;
        height: 20.833vw;
    }

    #tasks-11 .task-cutscene-clickbox.tasks-11-01 {
        bottom: 12.5vw;
        right: 30.556vw;
        width: 18.056vw;
        height: 18.056vw;
    }

    #tasks-12 .task-cutscene-clickbox.tasks-12-01 {
        bottom: 2.778vw;
        left: 2.778vw;
        width: 22.222vw;
        height: 27.083vw;
    }

    #tasks-12 .task-cutscene-clickbox.tasks-12-02 {
        bottom: 0vw;
        left: 30.556vw;
        width: 32.639vw;
        height: 18.75vw;
    }

    #tasks-12 .task-cutscene-clickbox.tasks-12-03 {
        bottom: 14.583vw;
        left: 36.111vw;
        width: 32.639vw;
        height: 16.667vw;
    }

    #tasks-12 .task-cutscene-clickbox.tasks-12-04 {
        bottom: 0vw;
        right: 0vw;
        width: 26.389vw;
        height: 29.167vw;
    }

    #tasks-13 .task-cutscene-clickbox.tasks-13-01 {
        bottom: 11.111vw;
        left: 0vw;
        width: 24.306vw;
        height: 22.917vw;
    }

    #tasks-13 .task-cutscene-clickbox.tasks-13-02 {
        bottom: 0vw;
        left: 34.028vw;
        width: 47.222vw;
        height: 19.444vw;
    }

    #tasks-13 .task-cutscene-clickbox.tasks-13-03 {
        bottom: 19.444vw;
        right: 0vw;
        width: 47.222vw;
        height: 17.361vw;
    }

    #tasks-13 .task-cutscene-clickbox.tasks-13-04 {
        bottom: 0vw;
        left: 0vw;
        width: 43.056vw;
        height: 17.361vw;
    }

    #tasks-14 .task-cutscene-clickbox.tasks-14-01 {
        top: 6.25vw;
        right: 48.611vw;
        width: 19.444vw;
        height: 22.917vw;
    }

    #tasks-14 .task-cutscene-clickbox.tasks-14-02 {
        top: 9.722vw;
        left: 46.528vw;
        width: 26.389vw;
        height: 25.694vw;
    }

    #tasks-14 .task-cutscene-clickbox.tasks-14-03 {
        top: 19.444vw;
        left: 70.139vw;
        width: 15.972vw;
        height: 23.611vw;
    }

    #tasks-15 .task-cutscene-clickbox.tasks-15-01 {
        bottom: 5.556vw;
        right: 5.556vw;
        width: 33.333vw;
        height: 25vw;
    }
    
    #tasks-16 .task-cutscene-clickbox.tasks-16-01 {
        left: 9.722vw;
        top: 2.778vw;
        width: 25vw;
        height: 25vw;
    }
    
    #tasks-16 .task-cutscene-clickbox.tasks-16-02 {
        left: 37.5vw;
        top: 2.778vw;
        width: 25vw;
        height: 25vw;
    }
    
    #tasks-16 .task-cutscene-clickbox.tasks-16-03 {
        right: 10.417vw;
        top: 2.778vw;
        width: 25vw;
        height: 25vw;
    }
    
    #tasks-17 .task-cutscene-clickbox.tasks-17-01 {
        left: 0vw;
        bottom: 0vw;
        width: 18.75vw;
        height: 18.75vw;
    }
    
    #tasks-18 .task-cutscene-clickbox.tasks-18-01 {
        left: 0vw;
        bottom: 19.444vw;
        width: 18.75vw;
        height: 18.75vw;
    }
    
    #tasks-18 .task-cutscene-clickbox.tasks-18-02 {
        right: 0vw;
        bottom: 15.972vw;
        width: 27.778vw;
        height: 17.361vw;
    }
    
    #tasks-18 .task-cutscene-clickbox.tasks-18-03 {
        right: 0vw;
        top: 3.472vw;
        width: 27.778vw;
        height: 17.361vw;
    }
    
    #tasks-18 .task-cutscene-clickbox.tasks-18-04 {
        left: 0vw;
        top: 10.417vw;
        width: 13.889vw;
        height: 16.667vw;
    }
    
    #tasks-18 .task-cutscene-clickbox.tasks-18-05 {
        right: 0vw;
        top: 13.194vw;
        width: 19.444vw;
        height: 17.361vw;
    }
    
    
    #tasks-19 .task-cutscene-clickbox.tasks-19-01 {
        left: 44.444vw;
        bottom: 18.75vw;
        width: 16.667vw;
        height: 18.056vw;
    }
    
    #tasks-19 .task-cutscene-clickbox.tasks-19-02 {
        left: 35.417vw;
        bottom: 11.806vw;
        width: 28.472vw;
        height: 22.917vw;
    }
    
    #tasks-19 .task-cutscene-clickbox.tasks-19-03 {
        left: 33.333vw;
        bottom: 7.639vw;
        width: 36.111vw;
        height: 20.139vw;
    }
    
    #tasks-19 .task-cutscene-clickbox.tasks-19-04 {
        left: 38.889vw;
        bottom: 4.167vw;
        width: 23.611vw;
        height: 17.361vw;
    }
    
    #tasks-20 .task-cutscene-clickbox.tasks-20-01 {
        left: 0vw;
        top: 0vw;
        width: 47.222vw;
        height: 38.889vw;
    }
    
    #tasks-21 .task-cutscene-clickbox.tasks-21-01 {
        right: 13.889vw;
        bottom: 0vw;
        width: 28.472vw;
        height: 31.25vw;
    }

    #tasks-03 .task-cutscene-clickbox.tasks-03-f2 {
        left: 13.889vw;
        top: 10.417vw;
        width: 55.556vw;
        height: 35.417vw;
    }
    
    #tasks-03 .task-cutscene-clickbox.tasks-03-f3 {
        top: 11.111vw;
        left: unset;
        right: 26.389vw;
        width: 31.944vw;
        height: 30.556vw;
    }
    
    #tasks-03 .task-cutscene-clickbox.tasks-03-f4 {
        top: 19.444vw;
        left: unset;
        right: 41.667vw;
        width: 31.944vw;
        height: 30.556vw;
    }
    
    #tasks-03 .task-cutscene-clickbox.tasks-03-f5 {
        top: unset;
        bottom: 0vw;
        left: 0vw;
        width: 26.389vw;
        height: 22.222vw;
    }
    
    
    #tasks-03 .task-cutscene-clickbox.tasks-03-f6 {
        top: unset;
        bottom: 0vw;
        left: unset;
        right: 0vw;
        width: 36.111vw;
        height: 22.222vw;
    }
    
    #tasks-03 .task-cutscene-clickbox.tasks-03-f7 {
        top: unset;
        bottom: 13.194vw;
        left: unset;
        right: 2.083vw;
        width: 44.444vw;
        height: 36.111vw;
    }
}