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

.btn1 {
    top: 35.5%;
}

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

.utama {
    top: 38%;
    width: 95%;
    left: 0;
    height: 50%;
}

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

.wbg img {
    width: 100%;
}

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

.wcoin1 img {
    width: 100%;
}

.wcoin2 {
    top: 33%;
    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: 51%;
    left: 27%;
}

.wstand img {
    width: 100%;
}

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

.wborder img {
    width: 100%;
}

.wspin {
    top: 18%;
    left: 25%;
}

.wspin img {
    width: 100%;
    
}

.warrow {
    top: 50%;
    left: 47%;
}

.warrow img {
    width: 100%;
}

.wcta {
    top: 61%;
    left: 17%;
}

.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 {
    color: #f6da1c;
    font-weight: bold;
    font-size: 9vw;
    margin-top: -37vw;
    left: 24%;
}

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

/* .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;
}

.modal-text-content img {
    margin-bottom: -350px;
    width: 51%;
}

@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%;
}

.modal1 .modal-dialog {
    background-image: url('/image/modal/spinagain_bg.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.modal2 .modal-dialog {
    background-image: url('/image/modal/winbg.png');
    background-position: center;
    background-size: contain;
    background-repeat: no-repeat;
}

.modal1 .modal-body {
    padding-top: 48%;
}

.modal2 .modal-body {
    padding-top: 41%;
}

.aftereffect {
    width: 100%;
}

.timer {
    color: white;
    font-weight: bold;
    font-size: 3.5vw;
    padding-top: 9px;
    /* 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(2817deg);
    }
    95% {
        transform: rotate(2815deg);
    }
    100% {
        transform: rotate(2816deg);
    }
}

@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(2517deg);
    }
    95% {
        transform: rotate(2515deg);
    }
    100% {
        transform: rotate(2517deg);
    }
}

@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: 24%;
    }
    .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: 24%;
    }
}

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

@media (min-width: 1400px) {
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1.5vw;
        margin-top: -6.4vw;
        left: 24%;
    }
}

@media (min-width: 1440px) {
    .jackpot_amnt {
        color: #f6da1c;
        font-weight: bold;
        font-size: 1.5vw;
        margin-top: -6.4vw;
        left: 24%;
    }
}

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