* {
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}

html { height: 100%; overflow-y:hidden }
body {
  font-family: Arial, Helvetica, sans-serif;
  height: 100%;
  overflow-y:hidden;
}
/* Define grid areas #f3f3f3 */
.hg-header { grid-area: header; background:#333; font-size:1.2em;color:white;padding:0.9em;}
.hg-footer { grid-area: footer; background:#111; font-size:0.8em;color:white;padding:0.9em}
.hg-main { grid-area: main; }
/* .hg-left { grid-area: navigation;} */
.hg-right { grid-area: ads; padding:0.5em;overflow-y:scroll}


.hg {
	display: grid;
	grid-template-areas: "header header"
	                     "main ads"
                         "footer footer";

	grid-template-columns: 75% 25%;

	grid-template-rows: 60px 
						1fr
                        30px;
    min-height: 100vh;
}

@media screen and (max-width: 600px) {
	.hg {
		grid-template-areas: "header"
		                     "main"
		                     "ads"
                             "footer";

		grid-template-columns: 100%;
		grid-template-rows: 60px  
							50%
							1fr
                            40px;
	}
}
p {padding:0.5em}
h2 {padding:0.5em}

#map {
  width: 100%;
  height: 100%;
}
#info {
    position:relative;
    width:200px;
    height:60px;
    background: white;
    border 1px solid black;
    top:20px:
    right:10px;
    z-index: 200;
}