.tutorial {
    display: none;
    color: white;
    width: 200px;
    height: 200px;
    white-space: nowrap;
    text-align: center;
    position: absolute;
    z-index: 9999;
    font-size: 14px;
}

.img-cancel {
    width: 30px;
}

#tutorial-1 {
    top: 7%;
    left: 3%;
    position: relative;
}

#text-tutorial-1 {
    position: absolute;
    top: 90%;
    left: 73%;
    transform: translate(-50%, -50%);
}

#tutorial-1-cancel {
    position: absolute;
    top: 62%;
    right: -25%;
}

#tutorial-2 {
    top: 15%;
    left: 35%;
}

#text-tutorial-2 {
    position: absolute;
    top: 50%;
    left: 90%;
    transform: translate(-50%, -50%);
}

#tutorial-2-cancel {
    position: absolute;
    top: 13%;
    right: -68%;
}

#tutorial-3 {
    bottom: 8%;
    left: 25%;
}

#text-tutorial-3 {
    position: absolute;
    top: 43%;
    left: 80%;
    transform: translate(-50%, -50%);
}

#tutorial-3-cancel {
    position: absolute;
    top: 18%;
    right: -49%;
}

#tutorial-4 {
    bottom: 12%;
    left: 0%;
}

#text-tutorial-4 {
    position: absolute;
    top: 50%;
    left: 85%;
    transform: translate(-50%, -50%);
}

#tutorial-4-cancel {
    position: absolute;
    top: 16%;
    right: -60%;
}

#tutorial-5 {
    bottom: 28%;
    left: 43%;
}

#text-tutorial-5 {
    position: absolute;
    top: 45%;
    left: 75%;
    transform: translate(-37%, -50%);
}

#tutorial-5-cancel {
    position: absolute;
    top: 10%;
    right: -78%;
}


/* tutorial 6 */

#tutorial-6 {
    top: 25%;
    left: 40%;
    position: relative;
}

#text-tutorial-6 {
    position: absolute;
    top: 30%;
    left: 35%;
    text-align: left;
}

#tutorial-6-cancel {
    position: absolute;
    top: 15%;
    right: -62%;
}

#tutorial-6-checkbox {
    bottom: 25%;
    left: 20%;
    position: absolute;
    transform: scale(1.6);
}


/*  Responsive */

@media only screen and (max-width: 1440px) {
    .img-cancel {
        width: 26px;
    }
    #tutorial-1 {
        left: 7%;
    }
    #tutorial-2 {
        left: 30%;
    }
    #tutorial-3 {
        left: 35%;
    }
    #tutorial-5 {
        bottom: 30%;
        left: 60%;
    }
    #tutorial-6 {
        top: 25%;
        left: 30%;
    }
}

@media only screen and (max-width: 1024px) {
    .img-cancel {
        width: 24px;
    }
    #tutorial-1 {
        left: 6%;
    }
    #tutorial-2 {
        left: 25%;
    }
    #tutorial-3 {
        left: 40%;
    }
    #tutorial-5 {
        bottom: 30%;
        left: 30%;
    }
    #tutorial-6 {
        top: 25%;
        left: 30%;
    }
}

@media only screen and (max-width: 800px) {}

@media only screen and (max-width: 768px) {
    .tutorial {
        font-size: 13px !important;
    }
    .img-cancel {
        width: 20px;
    }
    /*  1 */
    #tutorial-1 {
        left: 10%;
        top: 8%;
    }
    #tutorial-1-image {
        width: 200px;
    }
    #text-tutorial-1 {
        top: 65%;
        left: 54%;
        font-size: 12px;
    }
    #tutorial-1-cancel {
        top: 44%;
        right: 9%;
    }
    /*  2 */
    #tutorial-2 {
        left: 40%;
    }
    #tutorial-2-image {
        width: 300px;
    }
    #text-tutorial-2 {
        top: 42%;
        left: 76%;
    }
    #tutorial-2-cancel {
        top: 12%;
        right: -40%;
    }
    /*  3 */
    #tutorial-3 {
        left: 40%;
        bottom: 3%;
    }
    #tutorial-3-image {
        width: 265px;
    }
    #text-tutorial-3 {
        top: 38%;
        left: 65%;
    }
    #tutorial-3-cancel {
        top: 15%;
        right: -18%;
    }
    /*  4 */
    #tutorial-4 {
        bottom: 5%;
        left: -1%;
    }
    #tutorial-4-image {
        width: 330px;
    }
    #text-tutorial-4 {
        top: 44%;
        left: 70%;
    }
    #tutorial-4-cancel {
        top: 14%;
        right: -30%;
    }
    /*  5 */
    #tutorial-5 {
        bottom: 22%;
        left: 60%;
    }
    #tutorial-5-image {
        width: 315px;
    }
    #text-tutorial-5 {
        top: 37%;
        left: 61%;
    }
    #tutorial-5-cancel {
        top: 8%;
        right: -50%;
    }
    /*  6 */
    #tutorial-6 {
        top: 25%;
        left: 30%;
    }
    #tutorial-6-image {
        width: 325px;
    }
    #text-tutorial-6 {
        top: 30%;
        left: 32%;
    }
    #tutorial-6-cancel {
        top: 13%;
        right: -42%;
    }
    #tutorial-6-checkbox {
        bottom: 28%;
        left: 16%;
        transform: scale(1.4);
    }
}

@media only screen and (max-width: 600px) {
    /*  1 */
    #tutorial-1 {
        display: none;
    }
    /*  2 */
    #tutorial-2 {
        left: 8%;
        top: 6%;
    }
    #tutorial-2-image {
        width: 300px;
    }
    #text-tutorial-2 {
        top: 42%;
        left: 76%;
    }
    #tutorial-2-cancel {
        top: 12%;
        right: -40%;
    }
    /*  3 */
    #tutorial-3 {
        left: 10%;
        top: 5%;
    }
    #tutorial-3-image {
        width: 265px;
        content: url("../images/mobile/tutorial-3-bg.png");
    }
    #text-tutorial-3 {
        top: 70%;
        left: 65%;
    }
    #tutorial-3-cancel {
        top: 44%;
        right: -24%;
    }
    /*  4 */
    #tutorial-4 {
        top: 3%;
        left: 5%;
    }
    #tutorial-4-image {
        width: 310px;
        content: url("../images/mobile/tutorial-4-bg.png");
    }
    #text-tutorial-4 {
        top: 78%;
        left: 76%;
    }
    #tutorial-4-cancel {
        top: 48%;
        right: -45%;
    }
    /*  5 */
    #tutorial-5 {
        bottom: 62%;
        left: 8%;
    }
    #tutorial-5-image {
        width: 313px;
        content: url("../images/mobile/tutorial-5-bg.png");
    }
    #text-tutorial-5 {
        top: 40%;
        left: 60%;
    }
    #tutorial-5-cancel {
        top: 7%;
        right: -48%;
    }
    /*  6 */
    #tutorial-6 {
        top: 8%;
        left: 10%;
    }
    #tutorial-6-image {
        width: 325px;
    }
    #text-tutorial-6 {
        top: 28%;
        left: 30%;
    }
    #tutorial-6-cancel {
        top: 15%;
        right: -40%;
    }
    #tutorial-6-checkbox {
        bottom: 29%;
        left: 15%;
        transform: scale(1.2);
    }
}