@media (min-width: 992px) {
    .side-container {
        flex-direction: column;
    }
}

@media (min-width: 768px) {
    .desktop-flex {
        display: flex !important;
    }
    .desktop-hidden {
        display: none !important;
    }
    .desktop-block {
        display: block !important;
    }

    .side-container {
        order: 1;
        width: 16.6667%;
        display: none;
    }
    .slot {
        order: 2;
        width: 66.6667%;
    }
    .col-md-8 {
        flex: 0 0 auto;
        width: 66.66666667%;
    }
}

@media (max-width: 991.98px) {
    .mobile-hidden {
        display: none !important;
    }

    .mobile-block {
        display: block !important;
    }

    .mobile-inline {
        display: inline-block !important;
    }

    .mobile-flex {
        display: flex !important;
    }
    
    [data-theme="bonanza"] {
        background-image: url(../images/background_mobile.webp);
        background-size: cover;
        padding-top: 1rem;
        padding-right: 0;
        padding-left: 0;
        height: 100vh;
    }

    .game-modal-text {
        padding: 0;
    }

    .game-modal-text > .gt-1 > .gt-2 {
        font-size: 3rem !important;
    }

    .rotation-container > .gt-1 {
        font-size: 1.25rem !important;
    }

    .rotation-container > .gt-2 {
        font-size: 1.5rem !important;
    }

    .game-modal-content {
        margin-top: 0;
        margin-left: 0;
    }

    .game-modal-body {
        padding-left: 1rem;
        padding-right: 1rem;
    }

    .gt-1 {
        font-size: 2rem !important;
    }

    .game-modal-spins-text > .gt-5 {
        font-size: 2.25rem !important;
    }

    .game-modal-spins-text > .gt-7 {
        font-size: 2.5rem !important;
    }

    .bonus-spins-container {
        height: 150px;
        width: 150px;
    }
    
    .bonus-spins-container > div:nth-child(-n+3)  {
        font-family: 'Helv', sans-serif !important;
        letter-spacing: -1px;
        font-size: 1.5rem;
        text-shadow: 0px 0px 5px rgb(255, 0, 76);
        text-transform: uppercase;
        color: white;
        margin-bottom: -7.5px;
        -webkit-background-clip: text;
        -webkit-text-fill-color: white;
        -webkit-text-stroke: 1px #000000;
    }

    #bonus-spins-left-sm {
        position: relative;
        font-family: 'Helv', sans-serif;
        font-size: 2rem;
        text-transform: uppercase;
        letter-spacing: -2px !important;
        font-weight: 900;
        color: rgb(255, 255, 255);
        margin-bottom: -7.5px;
        background: -webkit-linear-gradient(#ffe600 30%, #ffbd30 40%, #ff682c 50%, #ff0606 60%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        -webkit-text-stroke: 1.5px #ffffff;
    }
    
    #bonus-spins-left-sm::before {
        content: attr(data-text);
        position: absolute;
        z-index: -1;
        font-size: inherit;
        letter-spacing: -2px;
        font-weight: 900;
        -webkit-background-clip: text;
        -webkit-text-fill-color: black;
        -webkit-text-stroke: 7px #000000;
    }

    .fireworks {
        height: 60px !important;
        width: 60px !important;
        transform: scale(1.75) !important;
    }

    .slot {
        width: 100% !important;
        margin-bottom: -15px;
        border-radius: 1.1rem;
    }

    .landing-slot {
        width: 100% !important;
        margin-bottom: -15px;
        border-radius: 1.1rem; 
    }

    .slot-body {
        width: 100% !important;
    }

    .landing-slot-body {
        width: 100% !important;
    }

    .slot::before {
        background: linear-gradient(45deg, #fff1f1 25%, #ff4747 25%, #ff4747 50%, #fff1f1 50%, #fff1f1 75%, #ff4747 75%, #ff4747 100%);
        background-size: 22.63px 22.63px;
        padding: 1.25mm;
    }

    .slot::after {
        height: 99.5%;
        width: 99.5%;
        padding: 1.5px;

    }

    .spoils-body {
        border-radius: 1.2rem;
        width: 132px;
        height: 118.5px;
        box-shadow: 
        0 10px 30px rgba(255, 255, 255, 0.5),
        inset 0px 0px 5px 7px rgba(0, 0, 0, .5);
    }

    .spoils-body::after {
        padding: 1px;
    }

    .spoils-popup {
        font-size: 1.5rem !important;
    }

    .spoils-body::before {
        padding: 1mm;
        background-image: linear-gradient(45deg, #fcd2fa 25%, #ea00ff 25%, #ea00ff 50%, #fcd2fa 50%, #fcd2fa 75%, #ea00ff 75%, #ea00ff 100%);
        background-size: 14.14px 14.14px;
    }

    #spoils-sm {
        background: radial-gradient(circle, #ff00c860 1%, rgba(102,102,102,0) 75%);
        height: 100%;
        padding: .25rem !important;
        display: flex;
        flex-direction: column-reverse;
        justify-content: flex-start;
    }

    .scroll.up, .scroll.down {
        width: 60px;
        height: 12px;
    }

    .wrapper {
        margin-top: -100px;
        padding-left: 0px;
        padding-right: 0px;
    }

    #buy-feature-sm::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        padding: 2mm;
        background: linear-gradient(180deg, #ca008e 20%, #ff4b99 30%);
        -webkit-mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        mask: 
            linear-gradient(#fff 0 0) content-box, 
            linear-gradient(#fff 0 0);
        -webkit-mask-composite: xor;
        mask-composite: exclude;
        box-shadow: 
        inset 0px 4px 1px #e100ffe8,
        inset 0px -1px 4px #fa3db2;
        z-index: -1;
    }

    #buy-feature-sm {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        position: relative;
        border-radius: 1.75rem;
        padding: 6px;
        background: rgba(255, 255, 255, 0.15);
        background-image: linear-gradient(35deg, #ff9914 25%, #ffb412 25%, #ffb412 50%, #ff9914 50%, #ff9914 75%, #ffb412 75%, #ffb412 100%);
        background-size: 87.17px 61.04px;
        box-shadow: 
            0px 10px 10px rgba(0, 0, 0, 0.753),
            inset 0 35px 15px -10px rgb(252, 242, 186),
            inset 0 -35px 15px -10px rgba(252, 242, 186);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(8px);
        width: 126px;
        height: 77.8px !important;
        min-height: 50px;
        border-radius: 1.2rem;
        cursor: pointer;
        border: none;
    }
    
    #buy-feature-sm:hover {
        box-shadow: 
        0px 10px 5px rgba(0, 0, 0, 0.5),
        inset 0 35px 15px -10px rgb(255, 249, 196),
        inset 0 -35px 15px -10px rgb(255, 249, 196);
        background-image: linear-gradient(35deg, #ffd414 25%, #fffb12 25%, #fffb12 50%, #ffd414 50%, #ffd414 75%, #fffb12 75%, #fffb12 100%);
        background-size: 87.17px 61.04px;
    
    }
    #buy-feature-sm::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        border-radius: inherit;
        box-shadow: 
        inset 0px 2px 2px #ffffffe8,
        inset 0px 0px 0px #ffffff00;
    }

    .feature-title {
        font-size: .9rem;
    }

    .side-container {
        align-items: center;
    }

    .stripe-purple {
        background-image: linear-gradient(50deg, #b700cb 25%, #cb00da 25%, #cb00da 50%, #b700cb 50%, #b700cb 75%, #cb00da 75%, #cb00da 100%);
        background-size: 46.99px 56.01px;
    }

    #spin {
        position: inherit;
        transform: none;
    }

    #autoplay-settings-button, #autoplay-stop-button {
        position: inherit;
        transform: none;
    
    }
    .radial {
        background: radial-gradient(circle, rgba(0, 0, 0, 0.356) 46%, rgba(102,102,102,0) 100%);
    }

    .radial:first-of-type {
        margin-top: 15px;
        text-align: center;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    .radial:last-of-type {
        text-align: center;
        height: 50px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .b

    .blob > * {
        font-size: 2.5rem !important;
    }

    .radial > * {
        margin-bottom: 0;
        color: white;
        text-transform: uppercase;
        font-weight: 900;
    }

    .mr-15 {
        margin-right: 0;
    }

    .mr-25 {
        margin-right: 0;
    }

    .ml-lg-50 {
        margin-left: 0px;
    }

    .frosting-container {
        position: relative;
        display: inline-block;
        width: 100%;
        text-align: center;
        top: -80px;
        left: 80px; 
    }
    
    .banner1, .rotation-1, .text-2, .text-3, .frosting{
        position: relative;
    }

    .frosting {
        top: 0;
        left: 0;
        transform: translate(-6%, 10%);
        width: 90%;
    }

    .add-spins {
        width: 50%;
        height: 50%;
        transform: translate(50%, 50%);
        top: 25%;
        left: 25%;
    }

    .add-spins > div:first-child {
        font-size: 2rem;
        margin-top: 20px;
    }
    
    .add-spins > div:last-child {
        font-size: 1.5rem;
        margin-bottom: 15px;
    }
    
    .mobile-top {
        margin-top: -20px;
    }

    .reels {
        padding: 0;
    }

    .reel {
        height: 250px;
    }

    .landing-reel {
        height: 250px;
    }

    #landing-transition {
        height: 50px !important;
        width: 50px !important;
    }

    .landing-rotation-item {
        font-size: 1.2rem !important;
    }

    .landing-rotation-item > span {
        font-size: 1.5rem !important;
    }

    #landing > .row > .col-md-5 {
        margin-top: -150px;
    }

    #hide-landing-container {
        margin-bottom: -50px;
    }

    .symbol {
        height: 50px;
    }

    .symbol > img {
        max-width: 50px;
        height: auto !important;
    }

    .scatter {
        z-index: 10;
        width: 85px !important;
        height: 85px !important;
        position: absolute;
        max-width: none !important;
        max-height: none !important;
    }

    .cycle, 
    .spinning {
        height: 60px;
        width: 60px;
    }

    .side:last-child {
        min-height: 155px !important;
        max-height: 155px !important;
    }

    .row {
        --bs-gutter-x: 0rem;
    }

    .mb-3 {
        margin-bottom: .25rem !important;
    }

    .bomb-symbol {
        height: 32px;
        width: auto;
    }

    .slot-container {
        margin-top: 10px;
        width: 100%;
    }

    .landing-slot-container {
        width: 100%;
    }

    .slot-header {
        margin-bottom: -20px;
    }

    .tumble-win-body {
        width: 300px;
        height: 35px;
        border-radius: 14px;
    }

    .tumble-win-body > div > span {
        font-size: 2rem;
    }

    .landing-symbol > img:not(.scatter, .bomb){
        width: 50px;
    }
    
    .landing-symbol > img.scatter, .landing-symbol > img.bomb {
        z-index: 10;
        position: absolute;
        width: 108px !important;
        height: 108px !important;
        max-width: none !important;
        max-height: none !important;
        filter: drop-shadow(5px 3px 1px rgba(31, 31, 31, 0.45));
        -webkit-backface-visibility: hidden; 
        -ms-transform: translateZ(0);
        -webkit-transform: translateZ(0);
        transform: translateZ(0);
    }

    .spectacular {
        width: 90%;
    }
    
    .super {
        width: 90%;
    }
    
    .amazing {
        width: 90%;
    }
    
    .mega {
        width: 90%;
    }

}

.d-none {
    display: none !important;
}