@media
only screen and (min-device-width: 320px) and (max-device-width: 568px),
only screen and (min-width: 320px) and (max-width: 568px) {

    #gui {
        -ms-transform: scale(.5);
        -webkit-transform: scale(.5);
        transform: scale(.5);
        transform-origin: center top;
        height: 320px;
        width: 542px;
        left: 50%;
        margin-left: -300px;
        top: 0px;
    }
    
    #img {
        background-size: 650px;
    }
    
    #form_ingreso{
        margin-top: 70px;
        margin-left: -250px;
    }
    #form_registro{
        margin-top: 70px;
    }
    #seleccionMapa{
        margin-left: -435px;
    }

    #seleccionAuto{
        margin-left: -435px;
    }

    #resultado{
        margin-left: -405px;
    }
    #resultado .result{
        transform: scale(0.8);
        transform-origin: center top;
    }
    .btnJugar{
        bottom: 120px;
    }
    .btnFacebookCC{
        bottom: 120px;   
    }
    .btnInicio3{
        top: 30px;
    }
    #instrucciones{
        margin-left: -432px;
    }
    #instrucciones #paso2 .content_box .leftBox {
        width: 236px;
    }
    #ranking{
        margin-left: -431px;
    }
    #ranking .get_content{
        height: 360px;
    }
    #ranking .get_content .list{
        height: 330px;
    }
    #mute {
        right: 5px;
        bottom: 5px;
        transform: scale(0.6);
        transform-origin: right bottom;
    }
    #como_jugar {
        width: 568px;
        height: 320px;
        background-color: rgba(0, 0, 0, 0.7);
        top: 0px;
        position: absolute;
        margin-left: 0;
        left: 0;
    }
    #como_jugar .mano {
        left: 110px;
        position: absolute;
        margin-left: 0px;
        bottom: 0px;
    }
    #como_jugar .mano img{
        width: 130px;
    }
    #como_jugar .btnJugara {
        background-position: 0px 0px;
        width: 264px;
        height: 61px;
        position: absolute;
        right: 30px;
        bottom: 130px;
    }
    
    /*
    #form_registro{
        top:0;
    }
    #instrucciones{
        -ms-transform: scale(.7); 
        -webkit-transform: scale(.7); 
        transform: scale(.7);
    }
    #resultado {
        margin-top:-30%;
        -ms-transform: scale(.8); 
        -webkit-transform: scale(.8); 
        transform: scale(.8);
    }
    */
}

@media 
only screen and (max-width: 320px) {
    /*
    #gui {
        -ms-transform: scale(.5); 
        -webkit-transform: scale(.5); 
        transform: scale(.5);
    }
    #gui > *{
        margin-top:-35%;
        -ms-transform: scale(.6); 
        -webkit-transform: scale(.6); 
        transform: scale(.6);
    }
    #mision{
        margin-top:-30%;
    }
    */
}