body, html {
  height: 100%;
}

.header
{
  width: 100%;
  font-size:50px;
}

.bgimg {
  background-position: center;
  background-position-y: 50%;
  background-size: cover;
  background-image: url("banner.jpeg");
  min-height: 50%;
}

.menu {
  display: none;
}

.profile-pic {
  float: left;
  width:170px;height:170px;margin-right:15px;
}

.map-name-vertical
{
  display: none;
}

.map-name-horizontal
{
  display: flex;
  justify-content: space-around;
}

.spacer-map
{
  width: 1em;
}


.horizontal-menu
{
  display: block;
}
.vertical-menu
{
  display: none;
}

@media (max-width:768px)
{
  .map-name-vertical
  {
    display: block;
    flex-shrink: 0;
    text-align: center;
  }
  .map-name-horizontal
  {
    display: none;
  }

  .spacer-map
  {
    height: 2em;
  }
}

@media (max-width:650px)
{
  .horizontal-menu
  {
    display: none;
  }
  .vertical-menu
  {
    display: block;
  }

  .header
  {
    font-size:35px;
  }
}