@media (max-width:480px) {
    .play-spin {
        position: absolute;
        z-index: 1000;
        top: 33%;
        left: 36%;
    }
    .score-xs {
        margin-top: -5px;
    }
    .info-history td {
        color: #000;
    }
    canvas#canvas {
        width: 100%;
        margin-left: 0px;
        border-radius: 100%;
        overflow: hidden;
    }
    .loading-spin {
        display: none;
        position: absolute;
        z-index: 99999;
        /* width: 52%; */
        /* overflow: hidden; */
        top: 50%;
        left: 48%;
        transform: translate(-20%, -57%);
    }
    .present-box img {
        width: 100%;
        height: 364px;
    }
    img#spin-not-active {
        width: 100%;
        border-radius: 100%;
        overflow: hidden;
        border-radius: 100%;
    }
    img#mui-ten {
        width: 8%;
        position: absolute;
        transform: rotate(-4deg);
        top: -5%;
        left: 50%;
        margin-left: 0px !important;
        transform: translateX(-50%);
        -moz-transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
        -o-transform: translateX(-50%);
        -ms-transform: translateX(-50%);
    }
    .canvas-spin {
        margin-top: 22px;
        margin-left: 0px;
        position: relative;
    }
    .info-mobile.hidden-md.hidden-lg {
        margin-top: 6%;
        margin-bottom: 20px;
    }

    .play-spin {
        width: 55%;
        position: absolute;
        z-index: 1000;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        -moz-transform: translate(-50%, -50%);
        -webkit-transform: translate(-50%, -50%);
        -o-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
    }

    .spin-main {
        padding-right: 0px !important;
        background: #fff url(img/bg_mobile.jpg) no-repeat;
        height: auto;
        background-size: 100% 100%;
        overflow-x: hidden;
    }

}
@media (min-width:240px) and (max-width: 320px) {
    .spin-not-active {
        transform: rotate(18deg);
        border-radius: 100%;
    }
}
@media (min-width:321px) and  (max-width: 645px) {
    .spin-not-active {
        transform: rotate(18deg);
        border-radius: 100%;
    }
}

    @media (min-width:414px) and (max-width: 736px) {

    .title-mobile img {
        width: 75%;
        height: 125px;
    }

    .spin-main {
        padding-right: 0px !important;
        background: #fff url(img/bg_mobile.jpg) no-repeat;
        height: auto;
        background-size: 100% 100%;
        overflow-x: hidden;
    }
    .spin-not-active {
        transform: rotate(18deg);
        border-radius: 100%;
    }
}
@media (min-width:768px) and (max-width: 1024px) {}

@media (min-width:1024px) {}