.mobile {
    display: none;
}

@media only screen and (max-width: 1600px) and (min-width: 1001px) {
    .wrapper2{
        width: 700px;
    }

    .text2 {
        font-size: 16px;
    }

    .sectionfot {
        font-size: 20px;
    }

    .qr {
        width: 50%;
        height: 50%;
    }
}

@media only screen and (max-width: 1000px) and (min-width: 770px) {

    .wrapper2{
        width: 700px;
    }
    

    .text2 {
        font-size: 14px;
    }

    .sectionfot {
        font-size: 18px;
    }

    .qr {
        width: 50%;
        height: 50%;
    }

    .img-border {
        width: 270px;
        height: 190px;
    }

}

@media only screen and (max-width: 769px) and (min-width: 500px) {
    
    .d3mustext {
        font-size: 18px;
    }
    
    .text {
        font-size: 16px;
    }
    
    .logo {
        width: 70px;
        height: 106px;
    }
    
    .obr {
        width: 91px;
        height: 71px;
    }
    
    .text2 {
        font-size: 12px;
    }

    .sectionfot {
        font-size: 14px;
    }

    .play-sound {
        max-width: 48px;
        max-height: 48px;
    }

    .qr {
        width: 60%;
        height: 60%;
    }

    .img-border {
        width: 200px;
        height: 140px;
        padding: 5px;
        margin: 5px;
    }

    .img-bor {
        width: 140px;
        height: 200px;
        padding: 5px;
        margin: 5px;
    }

    .range, .range2, .range3, .range4 {
        width: 50%;
        height: 50%;
    }


}

@media only screen and (max-width: 500px) {

.img-bor {
    width: 140px;
    height: 180px;
}

.img-border {
    width: 180px;
    height: 140px;
    }


.d3mustext {
        font-size: 16px;
    }
    
    .text {
        font-size: 16px;
    }
    
    .logo {
        width: 70px;
        height: 106px;
    }
    
    .obr {
        width: 91px;
        height: 71px;
    }

    .text2 {
        font-size: 12px;
    }

    .sectionfot {
        font-size: 14px;
    }

    .play-sound {
        max-width: 48px;
        max-height: 48px;
    }

    .qr {
        width: 80%;
        height: 80%;
    }

    .range, .range2, .range3, .range4 {
        width: 50%;
        height: 50%;
    }

}

@media only screen and (max-width: 470px) and (min-width: 280px) {

    .wrapper2{
        width: 350px;
    }

    .d3mustext {
        font-size: 14px;
    }
    
    .text {
        font-size: 10px;
    }
    
    .logo {
        width: 50px;
        height: 86px;
    }
    
    .obr {
        width: 71px;
        height: 51px;
    }
    
    .img-bor {
        width: 140px;
        height: 180px;
    }
    
    .img-border {
        width: 180px;
        height: 140px;
    }

    .text2 {
        font-size: 12px;
    }

    .sectionfot {
        font-size: 14px;
        padding-left: 20px;
    }

    .play-sound {
        max-width: 48px;
        max-height: 48px;
        margin-left: 10px;
    }

    .qr {
        width: 80%;
        height: 80%;
    }

    .range, .range2, .range3, .range4 {
        width: 50%;
        height: 50%;
    }

    .bigdisplay {
        display: none;
    }

    .mobile {
        display: block;
    }

}