/*new*/

.wheel-section.year-end {
    height: 720px;
    width: 100%;
    overflow: hidden;
    background-image: url(../images/background.jpg)!important;
    background-repeat: no-repeat, repeat;
    background-position: center top; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    z-index: -99;
}

.year-end .lucky-draw-title {
    height: 140px;
}

.year-end .winners {
    position: relative;
    margin-top: 30px;
    border: 2px solid #ff0000!important;
    background-color: black!important;
    border-collapse:separate;
    border-radius:6px;
    z-index: 10
}

.year-end .winners.table td {
    border-right: 2px solid #ff0000!important;
    border-left: 2px solid #ff0000!important;
    border-bottom: 2px solid transparent;
}

.year-end .winners.table th{
    border: 2px solid #ff0000!important;
}
.year-end .winners.table-bordered>tbody>tr>td{
    border-right: 2px solid #ff0000!important;
    border-left:2px solid #ff0000!important;
    border-bottom:transparent!important;
    border-top: transparent!important;
}

.year-end table.winners .no-winner {
    height: 600px;
}

.year-end canvas {
    display: block;
    position: relative;
    z-index: 9!important;
    width: 61%;
    left: 90px;
    top: 40px;
}

.year-end .charPointer{
    position: absolute;
    left: 360px;
    top: 320px;
    z-index: 11;
    width: 50%;
}
.year-end .char-2{
    position: absolute;
    left: -50px;
    top: 270px;
    z-index: 11;
    width: 65%;
}
.year-end .prizePointer {
    position: absolute;
    left: 100px;
    top: 210px;
    z-index: 10;
    width: 60%;
}
.modal-dialog{
    /* width: 35vw; */
}
@media(max-width:1440px) {
    .wheel-section.year-end {
        height: 720px;
        width: 100%;
        overflow: hidden;
        background-image: url(../images/background-2.jpg)!important;
        background-repeat: no-repeat, repeat;
        background-position: center top; 
        -webkit-background-size: cover;
        -moz-background-size: cover;
        -o-background-size: cover;
        background-size: cover;
        z-index: -99;
    }
}
@media(max-width:1024px) {
    .wheel-section.year-end {
        height: 677px;
    }

    .year-end canvas {
        width: 60%;
        top: 23px;
        left: 60px;
    }
    
    .year-end .prizePointer {
        left: 69px;
        top: 191px;
        width: 59.5%;
    }
    
    .year-end .winners {
        font-size: 0.9em;
        position: relative;
        margin-top: 80px;
        border: 2px solid #ff0000!important;
        background-color: black!important;
        border-collapse:separate;
        border-radius:6px;
        z-index: 10
    }
    
    table.winners .no-winner {
        height: 525px;
    }
}

@media (max-width:768px) {
    .wheel-section.year-end {
        height: 848px;
        background-position: center right;
    }

    .year-end .lucky-draw-title {
        height: 180px;
    }
    
    #btn-spin .small-button {
        width: 25%;
    }

    .year-end canvas {
        width: 50%;
        top: 20px;
        left: 165px;
    }
    
    .year-end .prizePointer {
        left: 175px;
        top: 239px;
        width: 50%;
    }
    
    .year-end .charPointer{
        left: 475px;
        top: 310px;
        width: 40%;

    }
    .year-end .char-2{
        left: 0px;
        top: 260px;
        width: 50%

    }
}

@media( max-width: 425px) {
    .wheel-section.year-end {
        height: 100%;
    }

    .year-end .lucky-draw-title {
        height: 100px;
    }
    
    #btn-spin .small-button {
        width: 40%;
    }

    .year-end canvas {
        width: 51%;
        top: 20px;
        left: 75px;
    }
    
    .year-end .prizePointer {
        left: 85px;
        top: 150px;
        width: 49.5%;
    }
    
    .year-end .charPointer {
        left: 220px;
        top: 200px;
        width: 50%;
    }
    .year-end .char-2{
        left: 0px;
        top: 165px;
        width: 55%;
    }
    .modal-dialog{
        width: 90vw;
    }
}

@media( max-width: 375px) {
    .wheel-section.year-end {
        height: 100%;
    }

    .year-end .lucky-draw-title {
        height: 80px;
    }

    #btn-spin .small-button {
        width: 35%;
    }

    .year-end canvas {
        width: 58%;
        top: 3px;
        left: 63px;
    }
    
    .year-end .prizePointer {
        left: 75px;
        top: 105px;
        width: 55%;
    }

    .year-end .charPointer {
        left: 205px;
        top: 180px;
        width: 45%;
    }
    .year-end .char-2{
        left: 0px;
        top: 135px;
        width: 50%;

    }

    .year-end .winners {
        margin-top: 35px;
    }
}

@media( max-width: 325px) {
    .wheel-section.year-end {
        height: 100%;
    }

    .year-end .lucky-draw-title {
        height: 70px;
    }

    #btn-spin .small-button {
        width: 40%;
    }

    .year-end canvas {
        width: 60%;
        top: 5px;
        left:5px;
    }
    
    .year-end .prizePointer {
        left: 16px;
        top: 94px;
        width: 57%;
    }

    .year-end .charPointer {
        left: 140px;
        top: 120px;
        width: 55%;
    }

    .year-end .winners {
        margin-top: 41px;
    }
}