/* cta button animation */

@keyframes zoom-in-zoom-out {
    0% {
        transform: scale(1, 1);
    }

    50% {
        transform: scale(0.8, 0.8);
    }

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

.modal-content {
    background-color: rgba(255, 255, 255, 0);
    border: 0;
}


/* Desktop devices (tablets, 770px and up) */
@media only screen and (min-width:770px) {


    .section-1 {
        content: url(../images/bg.png);
        width: 36vw;
        position: relative;

    }

    .btn-1 {
        width: 28vw;
        position: absolute;
        margin-top: 43.5%;
        animation: zoom-in-zoom-out 1.5s ease infinite;
        z-index: 1;
        cursor: pointer;
        content: url(../images/cta.png);
    }

    .section-2 {
        content: url(../images/bg-foot.png);
        width: 36vw;
        /* height: 100vh; */
        position: relative;
        margin-top: -1%;
    }

    .bg-wheel {
        content: url(../images/bg-wheel.png);
        width: 35vw;
        position: absolute;
        margin-top: 4%;
    }

    .img-jackpot {
        content: url(../images/jackpot.png);
        width: 15vw;
        position: absolute;
        margin-top: 3.5%;
    }

    .ticker {
        font-size: 1.6vw;
        font-weight: bold;
        width: 13vw;
        position: absolute;
        color: gold;
        margin: 6.5% 0% 0% 0.5%;
        text-shadow: -2px 1px 2px rgb(55 55 55);
        z-index: 1;
    }

    .wheel-border {
        content: url(../images/wheel-border.png);
        width: 35vw;
        position: absolute;
        margin-top: 4%;
    }

    .d-wheel {
        content: url(../images/wheel.png);
        width: 20vw;
        position: absolute;
        margin-top: 16.7%;
    }

    .spin {
        content: url(../images/spin.png);
        width: 4vw;
        position: absolute;
        margin-top: 24%;
        cursor: pointer;
    }

    .d-coin1 {
        content: url(../images/coin1.png);
        width: 7vw;
        position: absolute;
        margin: 11% 28% 0% 0%;
        overflow: hidden;
    }

    .d-coin2 {
        content: url(../images/coin2.png);
        width: 7vw;
        position: absolute;
        margin: 11% -28% 0% 0%;
        overflow: hidden;
    }

    .d-stand {
        content: url(../images/stand.png);
        width: 13vw;
        height: 15vw;
        position: absolute;
        margin-top: 32%;
    }

    .spin_btn {
        content: url(../images/spin_btn.png);
        width: 28vw;
        position: absolute;
        margin-top: 44%;
        cursor: pointer;
        animation: zoom-in-zoom-out 1.5s ease infinite;
    }

    .d-timer {
        color: white;
        font-size: 1.3vw;
        font-weight: bold;
        position: absolute;
        margin-top: 52%;
    }

    .d-games {
        width: 34vw;
        position: absolute;
        margin-top: 56%;
    }

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

    .d-modal_btn1 {
        margin: 38% 0% 5% 0%;
        width: 40%;
        cursor: pointer;
    }

    .d-modal_btn2 {
        margin-top: -61%;
        width: 26vw;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

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

    .modal-text-content {
        margin: 18% 0% 17% 0%;
        color: white;
        text-transform: uppercase;
        font-size: 2vw;
    }

    .modal-footer {
        border: none;
        display: flex;
        justify-content: center;
    }
}

/* Tablets devices (tablets, 768px and down) */
@media only screen and (max-width:769px) {

    /* .desktop-view {
        display: none;
    }

    .mobile-view {
        display: block;
    } */

    .section-1 {
        content: url(../images/bg.png);
        width: 100vw;
        position: relative;

    }

    .btn-1 {
        width: 90vw;
        position: absolute;
        margin-top: 118%;
        animation: zoom-in-zoom-out 1.5s ease infinite;
        z-index: 1;
        cursor: pointer;
        content: url(../images/cta.png);
    }

    .section-2 {
        content: url(../images/bg-foot.png);
        width: 100vw;
        position: relative;
        margin-top: -1%;
    }

    .bg-wheel {
        content: url(../images/bg-wheel.png);
        width: 91vw;
        position: absolute;
        margin-top: 23%;
    }

    .img-jackpot {
        content: url(../images/jackpot.png);
        width: 50vw;
        position: absolute;
        margin-top: 9%;
    }

    .ticker {
        font-size: 5.5vw;
        font-weight: bold;
        width: 13vw;
        position: absolute;
        color: gold;
        margin: 19% 0% 0% -29%;
        text-shadow: -2px 1px 2px rgb(55 55 55);
        z-index: 1;
    }

    .wheel-border {
        content: url(../images/wheel-border.png);
        width: 95vw;
        position: absolute;
        margin-top: 15%;
    }

    .d-wheel {
        content: url(../images/wheel.png);
        width: 52vw;
        position: absolute;
        margin-top: 49.7%;
    }

    .spin {
        content: url(../images/spin.png);
        width: 12vw;
        position: absolute;
        margin-top: 68%;
        cursor: pointer;
    }

    .d-coin1 {
        content: url(../images/coin1.png);
        width: 20vw;
        position: absolute;
        margin: 33% 77% 0% 0%;
    }

    .d-coin2 {
        content: url(../images/coin2.png);
        width: 20vw;
        position: absolute;
        margin: 33% 0% 0% 75%;
        overflow: hidden;
    }

    .d-stand {
        content: url(../images/stand.png);
        width: 25vw;
        height: 11vh;
        position: absolute;
        margin-top: 103%;
    }

    .spin_btn {
        content: url(../images/spin_btn.png);
        width: 80vw;
        position: absolute;
        margin-top: 119%;
        cursor: pointer;
        animation: zoom-in-zoom-out 1.5s ease infinite;
    }

    .d-timer {
        color: white;
        font-size: 4vw;
        font-weight: bold;
        position: absolute;
        margin-top: 142%;
    }

    .d-games {
        width: 94vw;
        position: absolute;
        margin-top: 155%;
    }

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

    .d-modal_btn1 {
        margin: 65% 0% 21% 0%;
        width: 60%;
        cursor: pointer;
    }

    .d-modal_btn2 {
        margin-top: -2%;
        width: 67%;
        cursor: pointer;
        position: relative;
        z-index: 1;
    }

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

    .modal-text-content {
        margin: 18% 0% 16% 0%;
        color: white;
        text-transform: uppercase;
        font-size: 4.5vw;
    }

    .modal-footer {
        border: none;
        margin-top: -19%;
    }

}