* { margin: 0 0 0 0; padding: 0 0 0 0; }

.content {
  position:relative;
  overflow: hidden;
}

.top {
  display: flex;
  align-items: center;
}
 
.logo { width: 30%; }

#osm-map { height:100%; width:100%; }

#foot { padding:5px; width: 100%; font-family: arial,helvetica; font-size:20px; }

#topmsg { display:inline; padding:5px; width: 70%; color: #040; font-family: arial,helvetica; font-size:30px; text-align: center; }

#msg { 
  position:absolute;
  width:100%;
  left: 0;
  bottom: 0;
  color:#000;
  background: rgba(0,0,0,0);
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  z-index:10;
}

#direct-wrap { 
  width:100%;
  position:absolute;
  bottom:-600px;
  background-color:#000;
  color:#fff;
  transition:0.4s ease;
}
#direct-wrap > i { float:right; margin: 5px 5px 5px 5px; cursor:pointer; }
#directions { font-size: 20px; }

#menu-wrap { 
  width:100%;
  min-height: 50%;
  position:absolute;
  top: 0;
  left:-6000px;
  background-color:#000;
  color:#fff;
  transition:0.4s ease;
}
#menu-wrap > i { float:right; margin: 5px 5px 5px 5px; cursor:pointer; }

#menu {
  position:relative;
  padding: 5px 5px 5px 5px;

  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  
  justify-content: center;
  gap: 2rem;
}

#menu-bc {
  cursor:pointer;  
}
.menu-bc {
  padding: 5px 5px 5px 5px;
  color: #f90;
  font-weight:bold;
  font-size: 20px;
}
.menu-bclast {
  color:#fff;
}

#menu-entry {
  padding: 5px 5px 5px 5px;
  width:100%;
  min-height: 50%;
  position:absolute;
  top: 60px;
  left:-6000px;
  width:100%;
  background-color:#444;
  color:#fff;
  transition:0.4s ease;
}

#ol-info-wrap { 
  xxwidth:100%;
  max-height: 600px;
  position:absolute;
  top: 0;
  left:-6000px;
  background-color:#000;
  color:#fff;
  overflow-x: auto;
  overflow-y: auto;

  transition:0.4s ease;
}
#ol-info-wrap > i { float:right; margin: 5px 10px 5px 5px; cursor:pointer; }

#ol-info {
  position:relative;
  padding: 5px 5px 5px 5px;

  overflow-x: scroll;
  overflow-y: scroll;

}