.infoBox { background-color: #FFF; width: 300px; font-family: Arial, Helvetica, sans-serif; font-size: 14px; border: 2px solid #3fa7d8; border-radius: 3px; margin-top: 10px }
.infoBox p { padding: 0 15px }
.infoBox:before { border-left: 10px solid transparent; border-right: 10px solid transparent; border-bottom: 10px solid #3fa7d8; top: -10px; content: ""; height: 0; position: absolute; width: 0; left: 138px }
div.custominfostyle {text-align: center;font-family: 'lato';}

html { height: 100%; margin: 0; padding: 0 }
body { height: 100%; margin: 0; padding: 0 }
#mapa { height: 100% }


@media only screen and (max-width: 1920px) and (min-width: 900px) {
    #logo {
        background: url(../img/logo_ZHp.png) no-repeat; width: 300px; height: 300px;float: left;position: absolute;z-index: 999999; left: 90px;
    }
}

@media only screen and (max-width: 899px) and (min-width: 500px) {
    #logo {
        background: url(../img/logo_ZHp.png) no-repeat; width: 150px; height: 150px;float: left;position: absolute;z-index: 999999; left: 70px;
    }
}

@media only screen and (max-width: 499px) {
    #logo {
        background: url(../img/logo_ZHp.png) no-repeat; width: 50px; height: 50px;float: left;position: absolute;z-index: 999999; left: 40px;
    }
}

/*@media only screen and (max-width: 999px) {
    #logo {
        background: url(../img/logo_ZHp.png) no-repeat; width: 50px; height: 50px;float: left;position: absolute;z-index: 999999; left: 40px;
    }
}*/