@media (max-width: 400px){
#app-contenedor{
    width:320px;
    height:600px;
}

#app-b0{
    width:100%;
    height:280px;
    background-image:url('../img/patronFondo-01.png');
}

#app-b1{
    width:100%;
    height:80px;
    text-align:center;
    position:relative;
    top:10px;
}

#app-b2{
    width:100%;
    height:275px;
}

#app-b3{
    width:100%;
    height:5px;
    background-color: #FCCF10;
}

#app-b4{
    width:100%;
    height:240px;
    background-color:#F7F7F7;
}

#app-b5{
    width:100%;
    height:50px;
    background-color:#F7F7F7;
    margin:0px;
}

#app-b1-1{
    width:90%;
    height: 80px;
    text-align:center;
    top: 50%;
    left:50%;
    -ms-transform: translate(5%,0%);
    -webkit-transform: translate(5%,0%);
    transform: translate(5%,0%);
}

#app-b2-1{
    width:100%;
    height: 160px;
    text-align:center;
    top: 50%;
    left:50%;
    -ms-transform: translate(0%,0%);
    -webkit-transform: translate(0%,0%);
    transform: translate(0%,0%);
}

#helperFicha1{
    width:80px;
    height:80px;
}

.div-icono{
    width:73px;
    height:73px;
    position:relative;
    float:left;
}

.div-titulo{
    width:215px;
    height:80px;
    float:left;
    text-align:left;
}

.txt-titulo{
    color:#FCCF10;
    font-family:Arial, Helvetica, sans-serif;
    font-size:14px;
    font-weight:bold;    
}

.txt-instrucciones{
    color:#222;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;    
}

.div-contenedorFlecha{
    width:44px;
    height:160px;
    position:relative;
    float:left;
}

.div-flecha{
    width:44px;
    height:77px;
    position:relative;
    float:left;
    top: 0%;
    left:0%;
    -ms-transform: translate(0%,60%);
    -webkit-transform: translate(0%,60%);
    transform: translate(0%,60%);
    cursor:pointer;
}

.div-flecha:hover{
    width:44px;
    height:77px;
    position:relative;
    float:left;
    background-color:rgba(0,0,0,.1);
    cursor:pointer;
}

.div-ficha{
    width:220px;
    height:160px;
    background-image:url('../img/pieza1.png');
    -webkit-background-size: contain; 
    -moz-background-size: contain; 
    -o-background-size: contain; 
    background-size:contain;
    position:relative;
    top: 0%;
    left:0%;
    -ms-transform: translate(0%,0%);
    -webkit-transform: translate(0%,0%);
    transform: translate(0%,0%);
}
.div-contenedorFicha{
    width:72%;
    height:160px;
    position:relative;
    float:left;
}
.div-contenidoFicha{
    width:140px;
    height:130px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000;
    position:relative;
    float:left;
    top: 25px;
    left:30px;
    -ms-transform: translate(5%,0%);
    -webkit-transform: translate(5%,0%);
    transform: translate(5%,0%);
}

.div-cubreFicha{
    width:100%;
    height:100%;
    position:absolute;
    float:left;
    top: 0px;
    left:0px;
    cursor:move;
}

.div-indicador-off{
    width:15px;
    height:15px;
    background-color:#BBB;
    border-radius:10px;
    float:left;
    margin:5px;
    cursor:pointer;
}

.div-navegacion{
    width:150px;
    height:25px;
    position:relative;
    top:0%;
    left:50%;
    -ms-transform: translate(-55%,0%);
    -webkit-transform: translate(-55%,0%);
    transform: translate(-55%,0%);
}

.div-contenedores{
    width:270px;
    height:220px;
    position:relative;
    float:left;
}

.div-marcoContenedores{
    width:25px;
    height:220px;
    position:relative;
    float:left;
}

.boton{
    width:150px;
    height:20px;
    color:#fff;
    text-align:center;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    border-radius:5px;
    background-color:#FCCF10;
    position:relative;
    top:0%;
    left:50%;
    -ms-transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    cursor:pointer;
}

.boton:hover{
    width:150px;
    height:20px;
    color:#fff;
    text-align:center;
    font-size:13px;
    font-family:Arial, Helvetica, sans-serif;
    border-radius:5px;
    background-color:#FFD415;
    position:relative;
    top:0%;
    left:50%;
    -ms-transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    cursor:pointer;
}

.div-cont-1{
    width:70px;
    height:70px;
    border-radius:50px;
    border:3px solid #FCCF10;
    position:relative;
    float:left;
}

.imagen{
    position:relative;
    top:0%;
    left:0%;
    -ms-transform: translate(0%,62%);
    -webkit-transform: translate(0%,62%);
    transform: translate(0%,62%);
}

.linea{
    position:relative;
    float:left;
    top:50%;
    left:0%;
    -ms-transform: translate(-5%,-10%);
    -webkit-transform: translate(-5%,-10%);
    transform: translate(-5%,-10%);
}

.div-blqContenedor{
    width:70px;
    height:90px;
    text-align:center;
    position:relative;
    float:left;
    margin:10px;
}

.txt-contenedor{
    color:#FCCF10;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-weight:bold;
    font-size:13px;
}

#app-notificacionImg{
    font-family:Arial, Helvetica, sans-serif;
    font-size:22px;
    color:#FFFFFF;
    position:relative;
    top:40px;
}

#app-notificacionTxt{
    font-family:Arial, Helvetica, sans-serif;
    font-size:22px;
    color:#FFFFFF;
    position:absolute;
    top:95px;
    left:62px;
}
}