/* CSS Document */

#mapid {
    height: 100vh;
    margin: 0;
    padding: 0;
}

/* Optional: Makes the sample page fill the window. */

html, body {
    height: 100vh;	
    margin: 0;
    padding: 0;
}

body {
    padding: 0;
    margin: 0;
}
html, body, #mapid {
    height: 100%;
    width: 100vw;
}
/*ICONO CIRCULAR*/
.icon-pron {
    width: 50px;
    height:50px;
    margin-top:-25px;
    margin-left:-25px;
    text-align:center;
    /*line-height: 55px;*/
    border-radius: 50%;
    /*opacity:0.5;*/
    background-color: rgba(0, 0, 0, 0.45);
}

/*ICONO CIRCULAR*/
.icon-pron-temp {
    width: 36px;
    height:36px;
    margin-top:-18px;
    margin-left:-18px;
    text-align:center;
    line-height: 36px;
    border-radius: 35%;
    /*opacity:0.5;*/
    background-color: rgba(0, 0, 0, 0.45);
}

/*ICONO CIRCULAR*/
.icon-pron-hum {
    width: 36px;
    height:36px;
    margin-top:-18px;
    margin-left:-18px;
    text-align:center;
    line-height: 36px;
    border-radius: 35%;
    /*opacity:0.5;*/
    background-color: rgba(0, 0, 0, 0.45);
}

.icon-pron img {
    width: 47px;
    height:47px;
}
/*NOMBRE DE LA CIUDAD*/
.label-pron {
    color:#FFFFFF;
    /*background: blue;*/
    width: 80px;
    display: inline-block;
    /*width: 125px;*/
    text-align:center;
    margin-left:-40px;
}

/*NOMBRE DE LA CIUDAD*/
.label-pron-temp {
    color:#FFFFFF;
    /*background: blue;*/
    width: 80px;
    display: inline-block;
    /*width: 125px;*/
    text-align:center;
    margin-left:-40px;
}

/*NOMBRE DE LA CIUDAD*/
.label-pron-hum {
    color:#FFFFFF;
    /*background: blue;*/
    width: 80px;
    display: inline-block;
    /*width: 125px;*/
    text-align:center;
    margin-left:-40px;
}

/*TEXTO DEL NOMBRE DE LA CIUDAD*/
.nom-sector{
    padding-top:2px;
    font-weight:bold;
    font-family: 'Oswald', sans-serif;
    text-align:center;
    font-weight:600;
    font-size: 10px;
    font-stretch:normal;
}

/*TEXTO DEL NOMBRE DE LA CIUDAD*/
.nom-sector-temp{
    padding-top:2px;
    font-weight:bold;
    font-family: 'Oswald', sans-serif;
    text-align:center;
    font-weight:600;
    font-size: 9px;
    font-stretch:normal;
}

/*TEXTO DEL NOMBRE DE LA CIUDAD*/
.nom-sector-hum{
    padding-top:2px;
    font-weight:bold;
    font-family: 'Oswald', sans-serif;
    text-align:center;
    font-weight:600;
    font-size: 9px;
    font-stretch:normal;
}

.nom-sector.light{
    text-shadow:
            1px 1px 0 #FFFFFF,
            1px -1px 0 #FFFFFF,
            -1px 1px 0 #FFFFFF,
            -1px -1px 0 #FFFFFF,
            1px 0px 0 #FFFFFF,
            0px 1px 0 #FFFFFF,
            -1px 0px 0 #FFFFFF,
            0px -1px 0 #FFFFFF;
}

.nom-sector-temp.dark{
    text-shadow:
            1px 1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            -1px -1px 0 #000,
            1px 0px 0 #000,
            0px 1px 0 #000,
            -1px 0px 0 #000,
            0px -1px 0 #000;
}
.nom-sector-hum.dark{
    text-shadow:
            1px 1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            -1px -1px 0 #000,
            1px 0px 0 #000,
            0px 1px 0 #000,
            -1px 0px 0 #000,
            0px -1px 0 #000;
}
.nom-sector.dark{
    text-shadow:
            1px 1px 0 #000,
            1px -1px 0 #000,
            -1px 1px 0 #000,
            -1px -1px 0 #000,
            1px 0px 0 #000,
            0px 1px 0 #000,
            -1px 0px 0 #000,
            0px -1px 0 #000;
}

/*VALOR NUMERICO DENTRO DEL CIRCULAR*/
.temp-sector{
    font-family: 'Oswald', sans-serif;
    font-size: 2.1em;
    font-weight: bold;
    font-stretch:extra-expanded;
    text-shadow: 1px 3px #000;
    color: #FFFFFF;
    opacity:1;
}

/*VALOR NUMERICO DENTRO DEL ICONO CIRCULAR*/
.temp-sector-temp{
    font-family: 'Oswald', sans-serif;
    font-size: 1.5em;
    font-weight: bold;
    font-stretch:extra-expanded;
    text-shadow: 1px 3px #000;
    color: #ffeb3b;
    opacity:1;
}
/*VALOR NUMERICO DENTRO DEL ICONO CIRCULAR*/
.temp-sector-hum{
    font-family: 'Oswald', sans-serif;
    font-size: 1.2em;
    font-weight: bold;
    font-stretch:extra-expanded;
    text-shadow: 1px 3px #000;
    color: #5fccff;
    opacity:1;
}