/*PRINCIPAL--------------------------------------------------*/
html, body{
    padding: 0%;
    margin: 0%;
    width: 100%;
    height: 100%;
    font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
}
/*BARRA DE FENOMENOS ------------------------------------------*/
.barraPrin{
    display: flex;
    width: 100%;
    height: 4%;
    background-color: #404040;
}
.barraPrin p{
    position: relative;
    top: -.9em;
    left: 1em;
    color: #fff;
    font-size: 1.8em;
}
.option-button{
    display: list-item;
    text-align: -webkit-match-parent;
    line-height: 1.5;
    background-color: #fff;
    border: none;
    width: 100%;
    font-size: 1em;
}
.option-button:hover{
    background-color: rgba(192, 144, 72, 0.377);
}
.optionsDropdown{
    margin: 0em;
    display: none;
    padding: .2em;
    background-color: #fff;
    background-clip: border-box;
    border: 1.5px solid rgba(0, 0, 0, 0.24);
    border-radius: .17em;
    transform: translate(0em, -.05em);
    position: absolute;
    z-index: 5;
}
#optionsDropdownHidro{
    width: 16.65em;
}
#optionsDropdownGeolo{
    width: 12.45em;
}
#optionsDropdownQuiTec{
    width: 17.11em;
}
.selectCapa{
    background-color: rgba(226, 13, 13, 0.767);
    color: #fff;
    cursor: pointer;
    white-space: normal;
    border-color: #000;
    font-size: 1em;
    padding: .2em .6em;
    text-align: center;
    border-radius: .3em;
    width: auto;
    height: auto;
}
.selectCapa:hover{
    box-shadow: 10px 5px 5px rgb(133, 131, 131);
}
.btnGroup{
    padding: .3em 2em;
    position: relative;
    left: 4em;
}
/*BARRA VULNERABILIDADES-------------------------------------*/
.barraSec{
    display: flex;
    position: absolute;
    bottom: 0%;
    width: 100%;
    height: 4%;
    background-color: #404040;
}
.selectBtn{
    cursor: pointer;
    color: #fff;
    background-color: rgba(226, 13, 13, 0.767);
    border-color: #000;
    width: auto;
    height: auto;
    text-align: center;
    padding: .2em .6em;
    font-size: 1em;
    border-radius: .3em;
}
.selectBtn:hover{
    box-shadow: -.6em -.5em 5px  rgb(133, 131, 131);
}
.btnGroupSec{
    padding: .3em 1em;
    margin-inline-start: 2.5em;
}

/*MAPA------------------------------------------------*/
#viewDiv{
    float: left;
    padding: 0%;
    margin: 0%;
    width: 78%;
    height: 92%;
}
.logos{
    position: absolute;
    width: auto;
    height: 95%;
    right: 1%;
    background-color: #50505085;
    border-radius: 3em;
}
/*BARRA LATERAL-----------------------------------------*/
#feature-title{
    float: none;
    position: relative; 
    top: 0%;
    width: 22%;
    height: 5%;
    background-color: #505050;
    padding: 0em;
    margin: 0em;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
#feature-node{
    float: none;
    width: 22%;
    height: 87%;
    padding: 0em 0em 1em 0em;
    margin: 0em;
    overflow: auto;
    background-color: #505050;
}
#feature-node::-webkit-scrollbar{
    display: none;
}
.esri-widget h1{
    font-size: 1.5em;
    line-height: 1;
    color: #fff;
    background-color: #404040;
    width: 100%;
    text-align: center;
    margin: 0em;
    padding: .2em;
}
.esri-widget h2{
    padding: .2em;
    height: auto;
    margin: .5em 0em;
    background-color: #fff;
    color: #000;
    text-align: center;
    line-height: 1;
    font-size: 1em;
}
.esri-widget p{
    color: #fff;
    font-size: 1em;
    padding: .1em .3em;
    margin: 0;
}
.esri-widget a{
    color: #bc945a;
    font-weight: bold;
    text-decoration: none;
}
.esri-widget a:hover{
    color: #6e152e;
}
.Link a{
    color: #fff;
}
.Link a:hover{
    color: #bc945a;
    border: .063em solid #000;
    padding: 0em .1em;
    background-color: #fff;
}
.text{
    font-size: 1.5em !important;
    text-align: center;
    line-height: 1;
}
/*NOMBRE MUNICIPIO-----------------------------------------------*/
#feedback{
    display: flex;
    position: absolute;
    min-width: 7em;
    max-width: 50em;
    width: auto;
    height: auto;
    bottom: 7.3%;
    right: 23%;
    background-color: rgba(0, 0, 0, 0.699);
    border: .08em solid #fffdfd;
    color: #fff;
    border-radius: .2em;
    padding: .3em;
    align-items: center;
    justify-content: center;
}
#titulo{
    font-weight: 700;
}

/*TOTAL #1920x#950*/
@media only screen and (max-height: 915px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    .btnGroup{
        padding: .2em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 1em;
    }
    .logos{
        right: 1.5%;
    }
}
@media only screen and (max-height: 870px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 2%;
    }
}
@media only screen and (max-height: 860px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.6em;
        top: -.95em;
    }
    .btnGroup{
        padding: .1em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.4em;
    }
}
@media only screen and (max-height: 830px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin{
        height: 4.5%;
    }
    .barraPrin p{
        top: -.9em;
    }
    .btnGroup{
        padding: .2em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .barraSec{
        height: 4.5%;
    }
    .btnGroupSec{
        padding: .25em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 86%;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        height: 91%;
    } 
}
@media only screen and (max-height: 770px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    .btnGroup{
        padding: .1em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
    .logos{
        right: 2.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.3em;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 8%;
    }
}
@media only screen and (max-height: 720px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.5em;
    }
    .selectCapa{
        font-size: .9em;
    }
    #optionsDropdownHidro{
        width: 15em;
    }
    #optionsDropdownGeolo{
        width: 11.1em;
    }
    .option-button{
        font-size: .9em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .9em;
    }
    .btnGroupSec{
        padding: .2em 1em;
    }
    .logos{
        right: 3%;
    }
}
@media only screen and (max-height: 680px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.4em;
        top: -.85em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3.8%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
}
@media only screen and (max-height: 665px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.95em;
    }
    .btnGroup{
        padding: .05em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .05em 1em;
    }
    .logos{
        right: 4%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 9%;
    }
}
@media only screen and (max-height: 610px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.3em;
    }
    .selectCapa{
        font-size: .8em;
    }
    #optionsDropdownHidro{
        width: 13.3em;
    }
    #optionsDropdownGeolo{
        width: 9.9em;
    }
    .option-button{
        font-size: .8em;
    }
    .btnGroup{
        padding: .05em 7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .8em;
    }
    .btnGroupSec{
        padding: .12em 1em;
    }
    .logos{
        right: 5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        height: 5.5%;
    }
    #feature-node{
        height: 85.5%;
    }
    .text{
        font-size: 1.4em !important;
    }
    .esri-widget h2{
        font-size: .9em;
    }
    .esri-widget p{
        font-size: .9em;
        line-height: 1.2;
    }
}
@media only screen and (max-height: 570px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin{
        height: 5%;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .barraSec{
        height: 5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.1em;
    }
    #feature-node{
        height: 84.6%;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        height: 90%;
    } 
}
@media only screen and (max-height: 530px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .7em;
    }
    .btnGroup{
        padding: .2em 7em;
    }
    #optionsDropdownHidro{
        width: 11.5em;
    }
    #optionsDropdownGeolo{
        width: 8.6em;
    }
    .option-button{
        font-size: .87m;
    }
    .barraPrin p{
        font-size: 1.2em;
        top: -.9em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .7em;
    }
    .btnGroupSec{
        padding: .2em 3em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h2{
        font-size: .8em;
    }
    .text{
        font-size: 1.2em !important;
    }
    .esri-widget p{
        font-size: .8em;
        line-height: 1.1;
    }
}
@media only screen and (max-height: 490px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    .btnGroup{
        padding: .1em 7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 3em;
    }
    .logos{
        right: 6%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1em;
    }
    .esri-widget p{
        line-height: 1;
    }
    .Link a{
        line-height: 1.15;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 10%;
    }
}
@media only screen and (max-height: 450px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 3em;
    }
}

@media only screen and (max-width: 1860px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em 1em;
        margin-inline-start: 1.8em;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 900px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
        font-size: 1.7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 2%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 865px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
    .logos{
        right: 2.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.4em;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 830px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
    }
    .btnGroup{
        padding: .2em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .25em 1em;
    }
    .logos{
        right: 2%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 770px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    .btnGroup{
        padding: .1em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
    .logos{
        right: 2.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.3em;
    }
    .text{
        font-size: 1.3em !important;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 730px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.95em;
        font-size: 1.6em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        height: 6%;
    }
    #feature-node{
        height: 85%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 720px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 1em;
    }
    .logos{
        right: 3.5%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 9%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 680px){
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 85.1%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 665px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 4%;
    }
    .btnGroupSec{
        padding: .1em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        line-height: 1.2;
    }
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 1860px) and (max-height: 635px){
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 610px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 4.8%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 490px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.2em;
    }
    .btnGroup{
        padding: .1em 5em;
        left: 10em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 5.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .btnGroupSec{
        padding: .1em 3em;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 10.5%;
    }
}
@media only screen and (max-width: 1860px) and (max-height: 435px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 3em;
    }
    .logos{
        right: 6%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1.2em !important;
        line-height: 1.2 !important;
    }
}

@media only screen and (max-width: 1810px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.7em;
    }
    .btnGroup{
        padding: .3em 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em 1em;
        margin-inline-start: 1em;
    }
    #btnGroupVulne{
        margin-inline-start: 2em;
    }
}
@media only screen and (max-width: 1810px) and (max-height: 870px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .2em 3em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.4em;
    }
}
@media only screen and (max-width: 1810px) and (max-height: 840px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
        margin-inline-start: 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.3em;
    }
}
@media only screen and (max-width: 1810px) and (max-height: 670px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.5em;
    }
}
@media only screen and (max-width: 1810px) and (max-height: 580px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.4em;
        top: -1em;
    }
}
@media only screen and (max-width: 1810px) and (max-height: 490px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.2em;
        top: -.9em;
        left: 3em;
    }
    .btnGroup{
        padding: .1em 3em;
        left: 10em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
        margin-inline-start: 5em;
    }
    #btnGroupVulne{
        margin-inline-start: 4em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 1810px) and (max-height: 440px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 3em;
    }
    .barraPrin p{
        font-size: 1em;
        top: -.95em;
        left: 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1.1em !important;
    }
}

@media only screen and (max-width: 1725px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        left: 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em 1em;
        margin-inline-start: 0em;
    }
    #btnGroupVulne{
        margin-inline-start: 1.5em;
    }
    .logos{
        right: 0%;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 920px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 880px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .2em 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 1em;
    }
    .logos{
        right: 1.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.4em;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 840px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 2%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.3em;
    }
    .text{
        font-size: 1.4em !important;
        line-height: 1.2;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 770px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1.7%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 720px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 2.3%;
    }
    .btnGroupSec{
        padding: .1em 1em;
        margin-inline-start: 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1.3em !important;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 640px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 3em;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 610px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3.8%;
    }
}
@media only screen and (max-width: 1725px) and (max-height: 460px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.2em;
        top: -1em;
    }
    .btnGroup{
        padding: 0em 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 1em;
    }
    .logos{
        right: 5.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1.1em !important;
    }
}

@media only screen and (max-width: 1677px){
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.4em;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 780px){
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.3em;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 650px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3%;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 620px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.4em;
        left: 2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3.5%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 580px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1.5em;
    }
    #btnGroupVulne{
        margin-inline-start: 3em;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 530px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 2.2em;
    }
    #btnGroupVulne{
        margin-inline-start: 3em;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 490px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.2em;
        left: 4em;
    }
}
@media only screen and (max-width: 1677px) and (max-height: 435px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.1em;
        top: -1em;
    }
    .btnGroup{
        padding: 0em 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 5.5%;
    }
    .btnGroupSec{
        padding: 0em 1em;
    }
}

@media only screen and (max-width: 1630px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .3em 1.5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em .3em;
        margin-inline-start: 0em;
    }
    #btnGroupVulne{
        margin-inline-start: 3em;
    }
    .logos{
        right: 0%;
        height: 98%;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 900px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        height: 100%;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 100%;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 780px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 750px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 1.5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .3em;
        margin-inline-start: 0em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 700px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 2%;
    }
    .btnGroupSec{
        padding: .2em 1em;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 645px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1.3em;
        top: -1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3%;
    }
    .btnGroupSec{
        padding: .1em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1.2em !important;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 530px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 2.2em;
    }
    .logos{
        right: 4%;
    }
}
@media only screen and (max-width: 1630px) and (max-height: 435px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: 1em;
        top: -.9em;
    }
    .btnGroup{
        padding: 0em 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 5.5%;
    }
    .btnGroupSec{
        padding: 0em 1em;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        font-size: .9em;
    }
}

@media only screen and (max-width: 1564px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .3em 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        margin-inline-start: 1em;
    }
    .logos{
        right: 0%;
        height: 96%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1.2em;
    }
    .esri-widget h2{
        font-size: .9em;
    }
    .esri-widget p{
        font-size: .9em;
        line-height: 1.3;
    }
}
@media only screen and (max-width: 1564px) and (max-height: 880px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        height: 96%;
    }
}
@media only screen and (max-width: 1564px) and (max-height: 750px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 1em;
    }
}
@media only screen and (max-width: 1564px) and (max-height: 700px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 2%;
        height: 100%;
    }
}
@media only screen and (max-width: 1564px) and (max-height: 610px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        margin-inline-start: 4em;
    }
}
@media only screen and (max-width: 1564px) and (max-height: 530px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3%;
        height: 100%;
    }
}
@media only screen and (max-width: 1564px) and (max-height: 500px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 4%;
        height: 100%;
    }
}

@media only screen and (max-width: 1500px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        left: 2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 92%;
    } 
    #btnGroupVulne{
        margin-inline-start: 0em;
    }
    .btnGroupSec{
        padding: .3em .2em;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 890px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 96%;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 94%;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 740px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: .5%;
        height: 100%;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 726px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em .2em;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 670px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1.5%;
        height: 100%;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 620px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        left: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 610px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1.7em;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 580px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 3.5%;
        height: 100%;
    }
}
@media only screen and (max-width: 1500px) and (max-height: 435px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 15em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 2.5em;
    }
}

@media only screen and (max-width: 1460px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        left: 1em;
        padding: .3em 1em;
    }
    .barraPrin p{
        left: .5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em 0em;
    }
    .logos{
        right: 0%;
        height: 88%;
    } 
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1.3em !important;
        line-height: 1;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 880px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.85em;
        font-size: 1.6em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 96%;
    }
    #btnGroupVulne{
        margin-inline-start: 1em;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 92%;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 760px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 100%;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 726px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 0em;
    }
    .logos{
        right: 1%;
        height: 100%;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 720px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        margin-inline-start: 5em;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 640px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
        font-size: 1.4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
    }
}
@media only screen and (max-width: 1460px) and (max-height: 610px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
        font-size: 1.1em;
    }
    .btnGroup{
        padding: 0em 1em;
        left: 10em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 0em;
    }
    .logos{
        right: 2.5%;
        height: 100%;
    }
}

@media only screen and (max-width: 1415px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
        font-size: 1.5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        padding: .1em .2em;
        font-size: 1em;
    }
    .btnGroupSec{
        padding: .3em 0em;
        margin-inline-start: 0em;
    }
    #btnGroupVulne{
        margin-inline-start: 1em;
    }
}
@media only screen and (max-width: 1415px) and (max-height: 655px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
        font-size: 1.3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 0em;
        margin-inline-start: 0em;
    }
}
@media only screen and (max-width: 1415px) and (max-height: 620px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 10em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
        margin-inline-start: 0em;
    }
}
@media only screen and (max-width: 1415px) and (max-height: 590px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .9em;
    }
    #btnGroupVulne{
        margin-inline-start: 5em;
    }
}
@media only screen and (max-width: 1415px) and (max-height: 500px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .8em;
    }
    #btnGroupVulne{
        margin-inline-start: 9em;
    }
}
@media only screen and (max-width: 1415px) and (max-height: 490px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.8em;
        font-size: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .7em;
    }
    .logos{
        right: 3.56%;
        height: 100%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1em;
    }
    .esri-widget h2{
        font-size: .8em;
    }
    .esri-widget p{
        font-size: .8em;
    }
    .text{
        font-size: 1em !important;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        font-size: .85em;
    }
}
@media only screen and (max-width: 1415px) and (max-height: 420px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em .5em;
    }
}

@media only screen and (max-width: 1368px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
        font-size: 1.3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 84%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        width: 22%;
    }
    #feature-node{
        width: 22%;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        width: 78%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 900px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 88%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 84%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 780px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 90%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 720px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 98%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 670px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
    }
    .logos{
        right: 1%;
        height: 100%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 490px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.8em;
        font-size: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
    #btnGroupVulne{
        margin-inline-start: 3em;
    }
    .logos{
        right: 2.5%;
        height: 100%;
    }
}
@media only screen and (max-width: 1368px) and (max-height: 420px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 4%;
        height: 100%;
    }
    .btnGroupSec{
        padding: 0em 1em;
    }
}

@media only screen and (max-width: 1350px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 90%;
    }
    .selectBtn{
        width: auto;
        height: 1.5em;
        padding: .1em .15em;
        font-size: .9em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        width: 24%;
    }
    #feature-node{
        width: 24%;
    }
    .btnGroupSec{
        padding: .5em .4em;
    }
    #btnGroupVulne{
        margin-inline-start: 0em;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        width: 76%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        right: 25%;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 850px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
    }
    .btnGroup{
        padding: .2em 1em;
        left: 2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .4em .4em;
    }
    .logos{
        right: 0%;
        height: 98%;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 92%;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 730px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em 1em;
        left: 2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        height: 100%;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 650px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .4em;
    }
    .logos{
        right: 2.5%;
        height: 100%;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 610px){
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1em;
    }
    .esri-widget h2{
        font-size: .8em;
    }
    .esri-widget p{
        font-size: .8em;
    }
    .text{
        font-size: 1em !important;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 490px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 1em;
    }
    .selectBtn{
        width: auto;
        height: 1.5em;
        padding: .1em .15em;
        font-size: .8em;
    }
    .logos{
        right: 4%;
        height: 100%;
    }
}
@media only screen and (max-width: 1350px) and (max-height: 420px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 1em;
    }
    .logos{
        right: 6%;
        height: 100%;
    }
}

@media only screen and (max-width: 1310px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .9em;
    }
    .option-button{
        font-size: .9em;
    }
    #optionsDropdownHidro{
        width: 15em;
    }
    #optionsDropdownGeolo{
        width: 11.2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .45em 0em;
        margin-inline-start: 0em;
    }
    #btnGroupVulne{
        margin-inline-start: 2em;
    }
    .logos{
        right: 0%;
        height: 89%;
    }
}
@media only screen and (max-width: 1310px) and (max-height: 850px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 96%;
    }
}
@media only screen and (max-width: 1310px) and (max-height: 690px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em 0em;
        margin-inline-start: 0em;
    }
    .logos{
        right: 1%;
        height: 100%;
    }
}
@media only screen and (max-width: 1310px) and (max-height: 590px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .8em;
    }
    .option-button{
        font-size: .8em;
    }
    #optionsDropdownHidro{
        width: 13.3em;
    }
    #optionsDropdownGeolo{
        width: 9.8em;
    }
    .btnGroup{
        padding: 0em 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
        margin-inline-start: 0em;
    }
    .logos{
        right: 2.5%;
        height: 100%;
    }
}
@media only screen and (max-width: 1310px) and (max-height: 580px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .7em;
    }
    .option-button{
        font-size: .7em;
    }
    #optionsDropdownHidro{
        width: 11.5em;
    }
    #optionsDropdownGeolo{
        width: 8.6em;
    }
    .btnGroup{
        padding: .1em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        margin-inline-start: 2em;
    }
    .logos{
        right: 4%;
        height: 100%;
    }
}
@media only screen and (max-width: 1310px) and (max-height: 450px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 5%;
        height: 100%;
    }
    .btnGroupSec{
        padding: 0em 0em;
        margin-inline-start: 0em;
    }
}

@media only screen and (max-width: 1280px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: .5em;
        margin-inline-start: 0;
    }
}
@media only screen and (max-width: 1280px) and (max-height: 490px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: 4em;
    }
}

@media only screen and (max-width: 1260px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.8em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 80%;
    }
}
@media only screen and (max-width: 1260px) and (max-height: 680px){
    /*BARRA LATERAL------------------------------------------------*/
    .logos{
        right: 1%;
        height: 100%;
    }
}
@media only screen and (max-width: 1260px) and (max-height: 600px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    .selectCapa{
        font-size: .75em;
    }
    .option-button{
        font-size: .75em;
    }
    #optionsDropdownHidro{
        width: 12.4em;
    }
    #optionsDropdownGeolo{
        width: 9.1em;
    }
    .btnGroup{
        padding: .1em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
        margin-inline-start: 0em;
    }
    .logos{
        right: 2%;
        height: 100%;
    }
}
@media only screen and (max-width: 1260px) and (max-height: 460px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        height: 1.7em;
    }
}
@media only screen and (max-width: 1260px) and (max-height: 420px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em 0em;
        margin-inline-start: 0em;
    }
    .logos{
        right: 4%;
        height: 100%;
    }
}
@media only screen and (max-width: 1250px) and (max-height: 600px){
    .btnGroup{
        padding: .1em 1em;
        position: relative;
        left: 1em;
    }
    .barraPrin p{
        font-size: 1em;
        top: -.7em;
    }
    #optionsDropdownQuiTec{
        width: 12.6em;
    }
}
@media only screen and (max-width: 1220px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        width: 12em;
        height: 2.7em;
        padding: .2em .15em;
        font-size: .8em;
        line-height: 1;
    }
    .btnGroupSec{
        padding: .2em .5em;
        margin-inline-start: 0em;
    }
    #btnGroupVulne{
        padding-left: 2.5em;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 930px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .7em;
    }
    #btnGroupVulne{
        padding-left: 5em;
    }
    .logos{
        right: 0%;
        height: 82%;
        bottom: 15%;
    }
    .btnGroupSec{
        padding: .2em .7em;
        margin-inline-start: 0em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1em;
    }
    .esri-widget h2{
        font-size: .8em;
    }
    .esri-widget p{
        font-size: .8em;
    }
    .text{
        font-size: 1em !important;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 840px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 94%;
        bottom: 0;
    }
    .btnGroupSec{
        padding: .1em .7em;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .7em;
    }
    .logos{
        right: 0%;
        height: 84%;
        bottom: 5%;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 760px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em .7em;
    }
    .logos{
        right: 0%;
        height: 90%;
        bottom: 0%;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 710px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
    }
    .selectCapa{
        font-size: .7em;
    }
    .option-button{
        font-size: .7em;
    }
    #optionsDropdownHidro{
        width: 11.5em;
    }
    #optionsDropdownGeolo{
        width: 8.5em;
    }
    .btnGroup{
        padding: .3em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 74%;
        bottom: 15%;
    }
    .barraSec{
        height: 6%;
    }
    .btnGroupSec{
        padding: .3em .7em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 83.5%;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        height: 89%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 10.5%;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 630px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    .btnGroup{
        padding: .2em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .7em;
    }
    .logos{
        right: 0%;
        height: 82%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 560px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
        font-size: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em .7em;
    }
    .logos{
        right: 0%;
        height: 94%;
        bottom: 0%;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 500px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
    }
    .btnGroup{
        padding: .1em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        width: 16em;
    }
    #btnGroupVulne{
        padding-left: .5em;
    }
    .btnGroupSec{
        padding: .1em .1em;
    }
    .barraSec{
        height: 7%;
    }
    .logos{
        right: 0%;
        height: 88%;
        bottom: 0%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 82.5%;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        height: 88%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 12%;
    }
}
@media only screen and (max-width: 1220px) and (max-height: 450px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        font-size: .65em;
        width: 17em;
        height: 2em;
    }
    #btnGroupVulne{
        padding-left: 4em;
    }
    .btnGroupSec{
        padding: .2em .78em;
    }
    #selectVulnerabilidad{
        width: 14.2em;
    }
    #selectRezago{
        width: 11.03em;
    }
    #selectMargina{
        width: 10.58em;
    }
    #selectResiliencia{
        width: 9.58em;
    }
    #selectCambio{
        width: 21em;
    }
    .logos{
        right: 0%;
        height: 96%;
        bottom: 0%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        height: 7%;
    }
    #feature-node{
        height: 81.5%;
    }
}

@media only screen and (max-width: 1180px) and (max-height: 500px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #selectVulnerabilidad{
        width: 14.2em;
    }
    #selectRezago{
        width: 11.03em;
    }
    #selectMargina{
        width: 10.58em;
    }
    #selectResiliencia{
        width: 9.58em;
    }
    #selectCambio{
        width: 21em;
    }
    .selectBtn{
        height: 2em;
    }
    .btnGroupSec{
        padding: .3em .5em;
    }
    #btnGroupVulne{
        padding-left: 3em;
    }
    .logos{
        right: 0%;
        height: 86%;
        bottom: 0%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        height: 7%;
    }
    #feature-node{
        height: 81.5%;
    }
}
@media only screen and (max-width: 1180px) and (max-height: 450px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 1em;
        left: 3em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 95%;
        bottom: 0%;
    }
}
@media only screen and (max-width: 1180px) and (max-height: 400px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .5em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: .95em;
    }
    .logos{
        right: 1%;
        height: 100%;
        bottom: 0%;
    }
}

@media only screen and (max-width: 1150px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .2em .3em;
        left: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em 0em;
    }
    #selectResiliencia{
        width: 9.58em;
    }
    #selectMargina{
        width: 10.58em;
    }
    #selectRezago{
        width: 11.03em;
    }
    #selectVulnerabilidad{
        width: 14.2em;
    }
    #btnGroupVulne{
        padding-left: 0em;
    }
    #selectCambio{
        width: 21em;
    }
    .logos{
        right: 0%;
        height: 78%;
        bottom: 10%;
    }
    .selectBtn{
        height: 2em;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 930px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: 1em;
    }
    .btnGroupSec{
        padding: .4em .8em;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 860px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 86%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 80%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 710px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .2em .3em;
        left: 4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        height: 2.5em;
    }
    .logos{
        right: 0%;
        height: 70%;
        bottom: 10%;
    }

}
@media only screen and (max-width: 1150px) and (max-height: 610px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        height: 2.2em;
    }
    .logos{
        right: 0%;
        height: 80%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 540px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .selectBtn{
        height: 2em;
    }
    .logos{
        right: 0%;
        height: 90%;
        bottom: 0%;
    }
    .btnGroupSec{
        padding: .2em .7em;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 500px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .1em .3em;
        left: 4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 84%;
        bottom: 10%;
    }
    .btnGroupSec{
        padding: .3em .7em;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 470px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 90%;
        bottom: 0%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: .9em;
    }
    .esri-widget h2{
        font-size: .7em;
    }
    .esri-widget p{
        font-size: .7em;
        line-height: 1;
    }
    .text{
        font-size: .9em !important;
    }
}
@media only screen and (max-width: 1150px) and (max-height: 450px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em .3em;
        left: 4em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 96%;
        bottom: 0%;
    }
    #btnGroupVulne{
        padding-left: 2.5em;
    }
    .btnGroupSec{
        padding: .2em .7em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 1140px) and (max-height: 600px){
    .barraPrin p{
        top: -.7em;
    }
    .logos{
        right: 0%;
        height: 65%;
        bottom: 10%;
    }
    #optionsDropdownQuiTec{
        width: 11.9em;
    }
}

@media only screen and (max-width: 1125px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
        font-size: 1.2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #selectResiliencia{
        width: 9.51em;
    }
    #selectMargina{
        width: 10.51em;
    }
    #selectRezago{
        width: 10.95em;
    }
    #selectVulnerabilidad{
        width: 14.1em;
    }
    #selectCambio{
        width: 19.75em;
    }
    #btnGroupVulne{
        padding-left: .5em;
    }
    .logos{
        right: 0%;
        height: 76%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 930px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .8em;
    }
    .option-button{
        font-size: .8em;
    }
    #optionsDropdownHidro{
        width: 13.2em;
    }
    #optionsDropdownGeolo{
        width: 9.9em;
    }
    .btnGroup{
        padding: .3em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .4em .4em;
    }
    #selectResiliencia{
        width: 9.8em;
    }
    #selectMargina{
        width: 10.8em;
    }
    #selectRezago{
        width: 11em;
    }
    #selectVulnerabilidad{
        width: 14.3em;
    }
    #selectCambio{
        width: 19.9em;
    }
    #btnGroupVulne{
        padding-left: 2em;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 740px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .2em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em .4em;
    }
    .logos{
        right: 0%;
        height: 86%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 710px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 68%;
        bottom: 15%;
    }
    .btnGroupSec{
        padding: .4em .4em;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 640px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 76%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 590px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .05em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 80%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 540px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .3em .4em;
    }
    .logos{
        right: 0%;
        height: 90%;
        bottom: 0%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 500px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .7em;
    }
    .option-button{
        font-size: .7em;
    }
    #optionsDropdownHidro{
        width: 11.6em;
    }
    #optionsDropdownGeolo{
        width: 8.6em;
    }
    .btnGroup{
        padding: .1em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 80%;
        bottom: 10%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 450px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
        font-size: 1em;
    }
    .btnGroup{
        padding: 0em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: 3em;
    }
    .logos{
        right: 0%;
        height: 95%;
        bottom: 0%;
    }
    #selectRezago{
        width: 11.1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        width: 26%;
    }
    #feature-node{
        width: 26%;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        width: 74%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        right: 27%;
    }
}
@media only screen and (max-width: 1125px) and (max-height: 410px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        height: 100%;
        bottom: 0%;
    }
}

@media only screen and (max-width: 1100px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.5em;
        font-size: 1.1em;
    }
    .selectBtn{
        font-size: .7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #selectResiliencia{
        width: 9.8em;
    }
    #selectMargina{
        width: 10.8em;
    }
    #selectRezago{
        width: 11em;
    }
    #selectVulnerabilidad{
        width: 14.3em;
    }
    #selectCambio{
        width: 19.9em;
    }
    .btnGroupSec{
        padding: .4em .4em;
    }
    #btnGroupVulne{
        padding-left: 1em;
    }
}
@media only screen and (max-width: 1100px) and (max-height: 650px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
    }
}
@media only screen and (max-width: 1100px) and (max-height: 530px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectCapa{
        font-size: .7em;
    }
    .option-button{
        font-size: .7em;
    }
    #optionsDropdownHidro{
        width: 11.6em;
    }
    #optionsDropdownGeolo{
        width: 8.6em;
    }
    .btnGroup{
        padding: .1em .3em;
        left:5em;
    }
    .barraPrin p{
        top: -.9em;
    }
}
@media only screen and (max-width: 1100px) and (max-height: 460px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em .3em;
        left:5em;
    }
    .barraPrin p{
        font-size: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .4em;
    }
}

@media only screen and (max-width: 1070px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .4em 0em;
    }
    #btnGroupVulne{
        padding-left: 2em;
    }
    .logos{
        right: 1%;
        height: 70%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1070px) and (max-height: 740px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        height: 80%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1070px) and (max-height: 710px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        height: 65%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1070px) and (max-height: 670px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 80%;
        bottom: 0%;
    }
}
@media only screen and (max-width: 1070px) and (max-height: 435px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 0em;
    }
    .logos{
        right: 0%;
        height: 98%;
        bottom: 0%;
    }
}

@media only screen and (max-width: 1024px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.5em;
        font-size: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 70%;
        bottom: 15%;
    }
    #btnGroupVulne{
        padding-left: .7em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .text{
        font-size: 1em !important;
        text-align: center;
        line-height: 1;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        max-width: 27em;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 750px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 80%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 710px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 60%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 680px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 65%;
        bottom: 15%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: .9em;
    }
    .esri-widget h2{
        font-size: .7em;
    }
    .esri-widget p{
        font-size: .7em;
        line-height: 1;
    }
}
@media only screen and (max-width: 1024px) and (max-height: 640px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.8em;
        font-size: 1em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: 1em;
    }
    .logos{
        right: 0%;
        height: 70%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 990px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    #btnGroupVulne{
        padding-left: 0em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 65%;
        bottom: 15%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: 1em;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        max-width: 25em;
    }
}
@media only screen and (max-width: 990px) and (max-height: 850px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 75%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 990px) and (max-height: 830px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 70%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 990px) and (max-height: 710px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 60%;
        bottom: 15%;
    }
    .esri-widget h1{
        font-size: .9em;
    }
}
@media only screen and (max-width: 990px) and (max-height: 640px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 65%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 990px) and (max-height: 550px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 75%;
        bottom: 15%;
    }
}
@media only screen and (max-width: 990px) and (max-height: 400px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 0%;
        height: 95%;
        bottom: 0%;
    }
    .barraPrin p{
        top: -.9em;
        font-size: .9em;
    }
}

@media only screen and (max-width: 965px){
    /*Principal*/
    html, body{
        background-color: #404040;
    }
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.5em;
        font-size: .9em;
    }
    .selectCapa{
        font-size: .7em;
    }
    .option-button{
        font-size: .7em;
    }
    #optionsDropdownHidro{
        width: 11.6em;
    }
    #optionsDropdownGeolo{
        width: 8.6em;
    }
    .btnGroup{
        padding: .4em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        position: absolute;
        right: 0%;
        bottom: 100%;
        height: 1.5em;
        width: 14em;
    }
    #btnGroupVulne{
        padding-left: 2em;
    }
    .btnGroupSec{
        padding: .4em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 84%;
    }
}
@media only screen and (max-width: 965px) and (max-height: 830px){
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 83%;
    }
}
@media only screen and (max-width: 965px) and (max-height: 730px){
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 82%;
    }
    .logos{
        bottom: 99%;
    }
}
@media only screen and (max-width: 965px) and (max-height: 710px){
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 80%;
    }
    .logos{
        bottom: 99%;
    }
    #viewDiv{
        width: 74%;
    }
    #feature-title{
        width: 26%;
    }
    #feature-node{
        width: 26%;
    }
    #feedback{
        right: 28%;
        font-size: .9em;
    }
}
@media only screen and (max-width: 965px) and (max-height: 620px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .2em .3em;
        left:5em;
    }
}
@media only screen and (max-width: 965px) and (max-height: 580px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
        font-size: .9em;
    }
    .btnGroup{
        padding: .1em .3em;
        left:5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em 1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 79%;
    }
}
@media only screen and (max-width: 965px) and (max-height: 500px){
    /*BARRA LATERAL------------------------------------------------*/
    #feature-node{
        height: 75%;
    }
}
@media only screen and (max-width: 965px) and (max-height: 460px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em .3em;
        left:5em;
    }
    .barraPrin p{
        top: -.9em;
    }
}

@media only screen and (max-width: 913px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .3em .3em;
        left: 2em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .4em .5em;
    }
    .logos{
        right: 1%;
        width: 15em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    #feature-title{
        width: 28%;
    }
    #feature-node{
        width: 28%;
    }
    .esri-widget h2{
        font-size: .8em;
    }
    .esri-widget p{
        font-size: .8em;
    }
    /*MAPA---------------------------------------------------------*/
    #viewDiv{
        width: 72%;
    }
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        max-width: 20em;
        font-size: .9em;
        right: 29%;
    }
}
@media only screen and (max-width: 913px) and (max-height: 610px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: .12em .3em;
        left: 2em;
    }
    .barraPrin p{
        top: -.8em;
    }
}
@media only screen and (max-width: 913px) and (max-height: 540px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .5em;
    }
}
@media only screen and (max-width: 913px) and (max-height: 460px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em .3em;
        left: 2em;
    }
}

@media only screen and (max-width: 875px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        width: 14em;
    }
}
@media only screen and (max-width: 875px) and (max-height: 770px){
    /*BARRA LATERAL------------------------------------------------*/
    .esri-widget h1{
        font-size: .9em;
    }
    .esri-widget h2{
        font-size: .8em;
    }
}

@media only screen and (max-width: 840px){
    /*BARRA DE FENOMENOS ------------------------------------------*//*-------------------------------------------------------------------------------------------------------*/
    .btnGroup{
        left: 1em;
    }
    .barraPrin p{
        top: -.4em;
        font-size: .8em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: .5em;
    }
}
@media only screen and (max-width: 840px) and (max-height: 470px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
        font-size: .8em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}

@media only screen and (max-width: 817px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .4em .1em;
    }
    #btnGroupVulne{
        padding-left: 2em;
    }
    .logos{
        right: 1%;
        width: 13em;
    }
}
@media only screen and (max-width: 817px) and (max-height: 510px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.7em;
    }
}
@media only screen and (max-width: 817px) and (max-height: 440px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .1em;
    }
}
@media only screen and (max-width: 784px){
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: .5em;
    }
}
@media only screen and (max-width: 766px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        width: 25em;
        top: -.7em;
        line-height: 1;
    }
    .btnGroupSec{
        padding: .4em 0em;
    }
}
@media only screen and (max-width: 766px) and (max-height: 640px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        top: -.9em;
        font-size: .7em;
    }
}
@media only screen and (max-width: 766px) and (max-height: 470px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        font-size: .6em;
    }
}
@media only screen and (max-width: 766px) and (max-height: 420px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroupSec{
        padding: .2em 0em;
    }
}
@media only screen and (max-width: 766px) and (max-height: 395px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
    }
    .barraPrin p{
        display: none;
    }
    .btnGroup{
        left: 1em;
        padding: 0em 3em;
    }
    #viewDiv{
        height: 87%;
    }
}
@media only screen and (max-width: 766px) and (max-height: 365px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .selectBtn{
        height: 1.5em;
    }
    .selectCapa{
        height: 1.5em;
        padding: 0em .1em;
    }
    .barraPrin{
        height: 6%;
    }
    #feature-node{
        height: 73%;
    }
}
@media only screen and (max-width: 740px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .logos{
        right: 1%;
        width: 12em;
        height: 1.2em;
        bottom: 105%;
    }
    .selectBtn{
        font-size: .6em;
    }
    .btnGroupSec{
        padding: .4em .3em;
    }
    #btnGroupVulne{
        padding-left: 2em;
    }
    #selectRezago{
        width: 11.1em;
    }
}
@media only screen and (max-width: 740px) and (max-height: 420px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .3em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 740px) and (max-height: 390px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        display: none;
    }
    .btnGroup{
        padding: 0em 3em;
        left: 1em;
    }
    .selectBtn{
        height: 1.7em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 710px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .4em .1em;
    }
    #btnGroupVulne{
        padding-left: 1em;
    }
    .btnGroup{
        left: .1em;
    }
    .logos{
        right: .5%;
        width: 12em;
        height: 1.2em;
        bottom: 105%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 710px) and (max-height: 420px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .2em .1em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 683px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        width: 21em;
        top: -.7em;
        line-height: 1;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    #btnGroupVulne{
        padding-left: .7em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        font-size: .8em;
    }
}
@media only screen and (max-width: 683px) and (max-height: 430px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        width: 21em;
        top: -1em;
        line-height: 1;
        font-size: .6em;
    }
    .logos{
        right: 0%;
        width: 12em;
        height: 1.2em;
        bottom: 105%;
    }
}
@media only screen and (max-width: 660px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraPrin p{
        width: 19em;
    }
    #btnGroupVulne{
        padding-left: .1em;
    }
    .logos{
        right: 0%;
        width: 11em;
        height: 1.2em;
        bottom: 105%;
    }
    #viewDiv{
        height: 86%;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 660px) and (max-height: 320px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: 0em .1em;
    }
    .barraPrin{
        height: 7%;
    }
    #feature-node{
        height: 72%;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}

@media only screen and (max-width: 650px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    #btnGroupVulne{
        padding-left: 0em;
    }
    .btnGroupSec{
        padding: .4em 0em;
    }
    .barraPrin p{
        display: none;
    }
    .btnGroup{
        padding: .4em 2em;
        left: 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 650px) and (max-height: 510px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .btnGroup{
        padding: 0em 2em;
        left: 5em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: 640px) and (max-height: 400px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    .btnGroupSec{
        padding: .1em 0em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
    #feedback{
        bottom: 13%;
    }
}
@media only screen and (max-width: 640px) and (max-height: 360px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    .barraSec{
        height: 10%;
    }
    #feature-node{
        height: 70%;
    }
    #viewDiv{
        height: 84%;
    }
    .btnGroupSec{
        padding: .1em 0;
    }
    #selectVulnerabilidad{
        width: 10em;
        height: 2.7em;
    }
    #selectRezago{
        width: 10em;
        height: 2.7em;
    }
    #selectMargina{
        width: 10em;
        height: 2.7em;
    }
    #selectCambio{
        width: 15em;
        height: 2.7em;
    }
    #selectResiliencia{
        width: 9em;
        height: 2.7em;
    }
    #btnGroupVulne{
        margin-inline-start: 2.5em;
    }
    .logos{
        width: 10em;
    }
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
/*
@media only screen and (max-width: 640px) and (max-height: 280px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*//*
    .btnGroupSec{
        padding: 0em 0em;
    }
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
   /*
}*/












@media only screen and (max-width: px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-height: px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}
@media only screen and (max-width: px) and (max-height: px){
    /*BARRA DE FENOMENOS ------------------------------------------*/
    /*BARRA VULNERABILIDADES---------------------------------------*/
    /*BARRA LATERAL------------------------------------------------*/
    /*MAPA---------------------------------------------------------*/
    /*NOMBRE MUNICIPIO---------------------------------------------*/
}