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

#app-b0{
    width:100%;
    height:500px;
    background-image:url('../img/pattern.jpg');
}

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

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

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

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

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

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

#app-b2-1{/*contenedor de las fichas*/
    width:100%;
    height: 100px;
    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:30px;
    height:30px;
    position:relative;
    float:left;
}
.div-icono img{
    width:30px;
    height:30px;
    
}

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

.txt-titulo{
    color:#C43501;
    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:100px;
    position:relative;
    float:left;
    -ms-transform: translate(100%,0%);
    -webkit-transform: translate(100%,0%);
    transform: translate(100%,0%)
}

.div-flecha{
    width:44px;
    height:77px;
    position:relative;
    float:left;
    top: 0%;
    left:0%;
    -ms-transform: translate(0%,30%);
    -webkit-transform: translate(0%,30%);
    transform: translate(0%,30%);
    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:140px;
    height:100px;
    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:-35%;
    -ms-transform:scale(0.7,0.7) translate(50%,0%);
    -webkit-transform:scale(0.7,0.7) translate(50%,0%);
    transform:scale(0.7,0.7) translate(50%,0%);
}
.div-contenedorFicha{
    width:140px;
    height:100px;
    position:relative;
    float:left;
    left:50px;
}
.div-contenidoFicha{
    width:140px;
    height:100px;
    text-align:center;
    font-family:Arial, Helvetica, sans-serif;
    font-size:11px;
    color:#000;
    position:relative;
    float:left;
    top: 0px;
    left:0px;
    -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:200px;
    height:25px;
    position:relative;
    top:0%;
    left:50%;
    -ms-transform: translate(-45%,0%);
    -webkit-transform: translate(-45%,0%);
    transform: translate(-45%,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:#BA3107;
    position:relative;
    top:0%;
    left:45%;
    -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:45%;
    -ms-transform: translate(-50%,0%);
    -webkit-transform: translate(-50%,0%);
    transform: translate(-50%,0%);
    cursor:pointer;
}

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

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

.div-cont-1{
    width:60px;
    height:30px;
    border-radius:50px;
    border:0px solid #BA3107;
    position:relative;
    float:left;
}

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

.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:#BA3107;
    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:17px;
    color:#720E0E;
    position:relative;
    top:20px;
}

#app-notificacionTxt{
    font-family:Arial, Helvetica, sans-serif;
    font-size:17px;
    color:#720E0E;
    position:absolute;
    top:75px;
    left:62px;
}

.circle-container {
    position: relative;
    width: 310px;
    height: 310px;
    padding: 0em;
    background-image:url('../img/mesa.png');
    background-size:100% 100%;
    /*2.8em = 2em*1.4 (2em = half the width of a link with img, 1.4 = sqrt(2))*/
    border: dashed 0px;
    border-radius: 50%;
    margin: 0em auto 0;
}
.circle-container div {
    display: block;
    position: absolute;
    top: 125px; left: 105px;
    width: 100px; height: 60px;
    /*margin: -2em;*/
}
.circle-container img { display: block; width: 100%; }
.center { transform:; }
.deg0 { transform: translate(145px) rotate(90deg); } /* 12em = half the width of the wrapper */
.deg45 { transform: rotate(45deg) translate(145px) rotate(90deg); }
.deg90 { transform: rotate(90deg) translate(145px) rotate(90deg); }
.deg135 { transform: rotate(135deg) translate(145px) rotate(90deg); }
.deg180 { transform: translate(-145px) rotate(-90deg); }
.deg225 { transform: rotate(225deg) translate(145px) rotate(90deg); }
.deg270 { transform: rotate(270deg) translate(145px) rotate(90deg); }
.deg315 { transform: rotate(315deg) translate(145px) rotate(90deg); }
}