*{
    /* border: 2px solid red; */
    font-family: sans-serif;
}

.btn1{
    top: 37%;
    z-index: 1;
}


.btn1 img{
    width: 65%;
    max-width: 599px;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}

.btn2{
    top: 79%;
}


.btn2 img{
    width: 55%;
    max-width: 599px;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}


.utama{

    top: 38%;
    width: 95%;
    left: 1%;
    height: 50%;
    z-index: 0;
}

.wbg{
    top: 20%;
    left: 11%;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}


.wbg img{
    width: 100%;
 
}

.wcoin1{
    top: 35%;
    left: -4%;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}


.wcoin1 img{
    width: 100%;
 
}

.wcoin2{
    top: 37%;
    right: -4%;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
}


.wcoin2 img{
    width: 100%;
 
}



.wjackpot{
    top: 10%;
    left: 13%;
}


.wjackpot img{
    width: 100%;
    
}


.wstand{
    top: 72%;
    left: 27%;
}


.wstand img{
    width: 100%;
    
}

.wborder {
    top: 24.5%;
    left: 6%;
}


.wborder img{
    width: 100%;
    
}
.wspin {

   
    top: 41%;
    left: 25%;
}
    




.wspin img{
    width: 100%;
    
}
.warrow {
    top: 54%;
    left: 47%;
}

.warrow img{
    width: 100%;
    
}
.wcta{
    top: 81%;
    left: 15%;
}


.wcta img{
    width: 100%;
    animation: pulse 0.8s infinite;
    animation-timing-function: linear;
    
}

.content h1 {
    font-size: 8rem !important;
}

.content p {
    font-weight: 600;
    color: red;
    font-size: 1.5rem;
}

.content span {
    color: #898989;
    font-size: 1.5rem;
}

.jackpot_amnt {
    
        width: 100%;
        color: #f6da1c;
        font-weight: bold;
        font-size: 8vw;
        margin-top: -36vw;
        /* left: 10%; */

}

.modal-content{
    background-color: transparent !important;
    border: 0 !important;
}

@media(max-width:768px){
    .modal-content {
        background-color: transparent !important;
        border: none !important;
        top: 35%;
        width: 95%;
        left: 1%;
        height: 50%;
    
    }
}





/* .modal-text{
    top: 34%;
    text-align: center;
    left: 15%;
} */

.modal-bg-2 {
    background-image: url(/image/modal/win_result.png);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    
}



h1.modal-text-content2{
    font-size: 98%;
    color: white;
    top: 40%;
    margin: 25vw 0 19vw 0;
    text-transform: uppercase;

}


@media(max-width:320px){
    h1.modal-text-content2{
        font-size: 81%;
    color: white;
    top: 2%;
    margin: 25vw 0 19vw 0;
    text-transform: uppercase;
    }
}



.btnagain {
    top: 59%;
    left: 2%;
}
.btnagain img {
    width: 63%;
}

.claim {
    top:68%;
}

.claim img {
    width: 68%;
}



@media(min-width:768px){
    .claim{
        top: 64%;
    }
}






.aftereffect {
    width: 100%;
}

.timer {
   
    color:brown;
    font-weight: bold;
    font-size: 5vw;
    /* margin-top: 105vw; */
}

.image1 {
    animation: spinClockwise 4s ease normal forwards;
}

.image2 {
    animation: spinCounterClockwise 4s ease normal forwards;
}

.image3 {
    animation: spinWin 4s ease normal forwards;
}

.image4 {
    animation: spinCounterClockwise 4s ease normal forwards;
}

@keyframes spinClockwise {
    0% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(2701deg);
    }

    95% {
        transform: rotate(2699deg);
    }

    100% {
        transform: rotate(2700deg);
    }
}

@keyframes spinCounterClockwise {
    0% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(-2882deg);
    }

    95% {
        transform: rotate(-2880deg);
    }

    100% {
        transform: rotate(-2881deg);
    }
}

@keyframes spinWin {
    0% {
        transform: rotate(0deg);
    }

    90% {
        transform: rotate(2627deg);
    }

    95% {
        transform: rotate(2626deg);
    }

    100% {
        transform: rotate(2625deg);
    }
}

@keyframes pulse {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.1);
    }

    100% {
        transform: scale(1);
    }
}

.modal-bg-1 {
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
}

/* .modal-body {
    position: relative;
    flex: 1 1 auto;
    padding: var(--bs-modal-padding);
} */










/* // Large devices (desktops, 992px and up) */
@media (min-width: 992px) { 
    #spin{
        height:100vh;
        
    }

    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1.4vw;
        margin-top: -6.1vw;
        left: 11%;
    }

    .timer {
        color: white;
        font-weight: bold;
        font-size: 0.6vw;
   
    }
    .wcoin1 {
        
        left: 2%;
    }
    


}
/* @media (min-width: 1024px){
   
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1.3vw;
        margin-top: -5.3vw;
        left: 10%;
    
    }
}*/

@media (min-width: 1024px) { 
  
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1.3vw;
        margin-top: -6.1vw;
        left: 9%;
    }

  
    


}
@media (min-width: 1300px) { 
  
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1vw;
        margin-top: -4.7vw;
        left: 13%;
    }

  
    


}


@media (min-width: 1400px){
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1vw;
        margin-top: -4.4vw;
        left: 11%;
    }
}
@media (min-width: 1440px){
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1vw;
        margin-top: -4.7vw;
        left: 11%;
    }
}

@media (min-width: 1920px){
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1.3vw;
        margin-top: -5.8vw;
        left: 10%;
    }
}