body { margin: 0px; }

* { box-sizing: border-box;}

#container {
  height: 100vh;
  display: flex;
  flex-flow:column nowrap;
  overflow: hidden;
}

#headline {box-sizing: border-box;
  flex: 0 0 min(15vw , 120px);
  background-color: saddlebrown;
  color:white;

  display: flex;
  flex-flow: row nowrap;
  justify-content: flex-start;
  align-items: center;
}

#headline>img { height:min(12vw , 100px); margin: auto 10px;}
#headline>div {
  height:min(6vw , 50px); margin: auto 10px;
  font-size: min(9vw , 75px);
}

#gallery {
  flex: 1 1 auto;
  display: flex;
  flex-flow: row nowrap;
  overflow: hidden;
}

#nav {
  flex: 0 0 140px;
  background-color: lightgray;
  align-items: center;

  display: flex;
  flex-flow: column nowrap;
  overflow:auto;
}

#nav>img{
  max-width: 120px;
  max-height: 120px;
}

#picture {
  flex: 1 0 auto;
  background-color: white;
}

#picture>img {
  max-height:100%; max-width:100%;
}

@media screen and (max-width:800px) {

  #gallery { flex-flow: column nowrap;}
  #nav { flex-flow: row nowrap;}
  #picture { flex: 1 1 auto;  overflow: hidden;}
  #picture>img { overflow: auto;}
}