﻿@media (min-width:280px) {
    .spin_button {
        width: 49px;
        position: absolute;
        top: 173px;
        left: 75px;
        z-index: 2;
    }

    .wheel-body {
        position: absolute;
        top: 92px;
        left: -11px;
        z-index: 1;
        width: 220px;
    }

    #arrow {
        position: absolute;
        width: 40px;
        top: 74px;
        left: 78px;
        z-index: 2;
    }

    #wheel-header {
        position: absolute;
        width: 190px;
        z-index: 1;
        left: 5px;        
    }


    #wheel-stand {
        position: absolute;
        width: 164px;
        top: 256px;
        left: 18px;
        z-index: 0;
    }

    #container {
        max-width: 200px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    #lbl-Wheel {
        position: absolute;
        font-size: 20px;
        left: 95px;
        top: 0px;
        color: white;
    }

    #lbl-Balance {
        position: absolute;
        border-radius: 10px;
        left: 1px;
        top: 319px;
    }

    #lbl-Token {
        position: absolute;
        border-radius: 10px;
        left: 64px;
        top: 6px;
        width: 24px;
    }

    #img-ribbon {
        width: 200px;
    }
}

@media (min-width:321px) {
    .spin_button {
        width: 70px;
        position: absolute;
        top: 236px;
        left: 105px;
        z-index: 2;
    }

    .wheel-body {
        position: absolute;
        top: 132px;
        left: -6px;
        z-index: 1;
        width: 290px;
    }

    #arrow {
        position: absolute;
        width: 52px;
        top: 109px;
        left: 113px;
        z-index: 2;
    }

    #wheel-header {
        position: absolute;
        width: 270px;
        z-index: 1;
        left: 6px;
    }


    #wheel-stand {
        position: absolute;
        width: 249px;
        top: 344px;
        left: 15px;
        z-index: 0;
    }

    #container {
        max-width: 280px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

#lbl-Wheel {
    position: absolute;
    font-size: 16px;
    left: 95px;
    top: 3px;
    color: white;
}

    #lbl-Balance {
        position: absolute;
        border-radius: 10px;
        left: 52px;
        top: 438px;
    }

#lbl-Token {
    position: absolute;
    border-radius: 10px;
    left: 66px;
    top: 6px;
    width: 20px;
}

    #img-ribbon {
        width: 180px;
    }
}

@media (min-width:410px) {
    .spin_button {
        width: 80px;
        position: absolute;
        top: 260px;
        left: 104px;
        z-index: 2;
    }

    .wheel-body {
        position: absolute;
        top: 163px;
        left: -1px;
        z-index: 1;
    }

    #arrow {
        position: absolute;
        width: 77px;
        top: 127px;
        left: 105px;
        z-index: 2;
    }

    #wheel-header {
        position: absolute;
        width: 350px;
        z-index: 1;
        left: -25px;
        top: 0px;
    }

    #wheel-stand {
        position: absolute;
        width: 280px;
        top: 377px;
        left: 9px;
        z-index: 0;
    }

    #container {
        max-width: 300px;
        height: 100%;
        margin: 0 auto;
        position: relative;
    }

    #lbl-Wheel {
        position: absolute;
        font-size: 20px;
        left: 126px;
        top: 5px;
        color: white;
    }

    #lbl-Balance {
        position: absolute;
        border-radius: 10px;
        left: 26px;
        top: 490px;
    }

    #lbl-Token {
        position: absolute;
        border-radius: 10px;
        left: 92px;
        top: 11px;
        width: 25px;
    }

    #img-ribbon {
        width: 253px;
    }
}

@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
}

@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */
}

@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */
}

@media (min-width:1281px) { /* hi-res laptops and desktops */
}