div.menu-btn {
    display: block;
    height: 24px;
    width: 32px;
    position: relative;
    background: url(/img/icon-menu.png) no-repeat;
    cursor: pointer;
    margin-top: 11px;
    margin-left: 7px;
    float: left;
}
/*body.nav-collapsed div#responsive-menu,*/
body.nav-collapsed div#allholder{
    ms-transform: translate(0px, 0);
    -moz-transform: translate(0px, 0);
    -webkit-transform: translate3d(0px, 0, 0);
    transform: translate(0px, 0);
}
div.header div.desktop,
div.header div.mobile{ display: none;}

body div#allholder{
}
body.nav-collapsed div#responsive-menu{
    transform: translate(-263px, 0);
}

div#responsive-menu{
    display: block;
    float: left;
    position: absolute;
    padding: 10px 7px;
    width: 35px;
    height: auto;
    transform: translate(0px, 0);
    transition: transform 0.28s ease-in-out;
    z-index: 850;
    background: rgba(255, 255, 255, 0.8);
    color: #fff;
    margin-top: 57px;
}
div.menu-elementos>div>span{
    width: 38px;
    height: 34px;
    display: block;
    position: relative;
    background-repeat: no-repeat !important;
    margin-top: 10px;
    margin-bottom: 10px;
}
div.controles-mano span{ background: url("/img/hand.png"); }
div.controles-medirlinea span{ background: url("/img/measure-line.png"); }
div.controles-medirpoligono span{ background: url("/img/measure-polygon.png"); }
div.controles-querypoint span{ background: url("/img/infopoint.png"); }
div.controles-refesh span{ background: url("/img/refesh.png"); }
div.controles-navegador span{ background: url("/img/navegador.png"); }
div.controles-centrarubicacion:hover span,
div.controles-centrarubicacion.active span,
div.controles-centrarubicacion span
{ background: url("/img/centrar-ubicacion.png"); }
div.controles-leyenda span{ background: url("/img/leyenda.png"); }
div.controles-grilla span{ background: url("/img/grilla.png"); }
div.controles-capas span{ background: url("/img/capas.png"); }
div.controles-btn-location:hover span,
div.controles-btn-location:active span,
div.controles-btn-location span

{ background: url("/img/my-location.png"); }

div.controles-mano:hover span,
div.controles-mano.active span{ background: url("/img/hand-active.png"); }
div.controles-medirlinea:hover span,
div.controles-medirlinea.active span{ background: url("/img/measure-line-active.png"); }
div.controles-medirpoligono:hover span,
div.controles-medirpoligono.active span{ background: url("/img/measure-polygon-active.png"); }
div.controles-querypoint:hover span,
div.controles-querypoint.active span{ background: url("/img/infopoint-active.png"); }
div.controles-refesh:hover span,
div.controles-refesh.active span{ background: url("/img/refesh-active.png"); }
div.controles-navegador:hover span,
div.controles-navegador.active span{ background: url("/img/navegador-active.png"); }
div.controles-leyenda:hover span,
div.controles-leyenda.active span{ background: url("/img/leyenda-active.png"); }
div.controles-grilla:hover span,
div.controles-grilla.active span{ background: url("/img/grilla-active.png"); }
div.controles-capas:hover span,
div.controles-capas.active span{ background: url("/img/capas-active.png"); }
div.map-grayoverlay{
    display: none;
    width: 100%;
    height: 100%;
    background-color: #000;
    background-color: rgba(31, 30, 30, 0.63);
    opacity: 1;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 10000;
}
body.nav-collapsed #allholder div.map-grayoverlay{
    display: none;
}



@media (max-width: 767px){
    /*Mobile*/
    div.bottom_toolbar{display: none;}
    div.header div.mobile{ display: block;}
    div.olControlPanZoom{display: none;}

    #layerlist_ {
        height: calc(100% - 90px);
    }

    span.checkboxlayers-holder {

        width: calc(100% - 55px);
    }
    div#layerlist-holder{
        height: 100%;
    }
    div.controles-contenido {
        height: calc(100% - 60px);
    }
    div#controles-holder-capas{
        height: 100%;
        width: 100% !important;
    }
    div#overmap-holder{
        max-height: 100%;
        height: 100%;
    }
    div.olControlScale,
    div#mousepositiontxt{display: none;}

    div.mobile div.right_subheader {
        display: none;
    }
    .ui-dialog {
        width: 100% !important;
        bottom: 0px !important;
        top: auto !important;
    }

    div.mobile div.left_subheader_txt {
        width: calc(100% - 40px) !important;
        margin-top: 6px;
    }

    div.mobile div.left_subheader_txt span {
        font-size: 14px !important;
    }
    div#controles-holder-leyenda{
        height: 80%;
    }

    div.dialog3_body,
    div.ws_PopUpInfoArea.onlytd ,
    div.tablecont{
        height: 100% !important;
    }
    .head-n1,
    .head-n2{
        font-size: 12px !important;
    }
    .header{
        height: 48px;
    }
}
@media (min-width:768px){
    /*Desktop*/
    div.header div.desktop{ display: block;}
}



div#responsive-menu div.menu-elementos div.active {
    background: #C5C5C5;
}




/*Mobile extra*/

div.olControlZoom {
    position: absolute;
    bottom: 8px;
    left: 8px;
    background: rgba(255,255,255,0.4);
    border-radius: 4px;
    padding: 2px;
}
* {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
div.olControlZoom a {
    display: block;
    margin: 1px;
    padding: 0;
    color: white;
    font-size: 28px;
    font-family: sans-serif;
    font-weight: bold;
    text-decoration: none;
    text-align: center;
    height: 32px;
    width: 32px;
    line-height: 28px;
    text-shadow: 0 0 3px rgba(0,0,0,0.8);
    background: #130085; /* fallback for IE - IE6 requires background shorthand*/
    background: rgba(0, 60, 136, 0.5);
    filter: alpha(opacity=80);
}
a.olControlZoomIn {
    border-radius: 4px 4px 0 0;
}
a.olControlZoomOut {
    border-radius: 0 0 4px 4px;
}
div.olControlZoom a:hover {
    background: #130085; /* fallback for IE */
    background: rgba(0, 60, 136, 0.7);
    filter: alpha(opacity=100);
}
@media only screen and (max-width: 600px) {
    div.olControlZoom a:hover {
        background: rgba(0, 60, 136, 0.5);
    }
}
div.olMapViewport {
    -ms-touch-action: none;
}
.olLayerGrid .olTileImage {
    -webkit-transition: opacity 0.2s linear;
    -moz-transition: opacity 0.2s linear;
    -o-transition: opacity 0.2s linear;
    transition: opacity 0.2s linear;
}
/* Turn on GPU support where available */
.olTileImage {
    -webkit-transform: translateZ(0);
    -moz-transform: translateZ(0);
    -o-transform: translateZ(0);
    -ms-transform: translateZ(0);
    transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
    -ms-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-perspective: 1000;
    -moz-perspective: 1000;
    -ms-perspective: 1000;
    perspective: 1000;
}