/*
 * Header
 * -------------------------------------------------- */

#logo {
  position: fixed;
  top: 0;
  left: 0;
  padding: 3vh 1.25vh;
}

#logo .logoimg{
  max-height: 7vh;
  /*max-width: 100px;*/
  max-width: 8vw;
}

#logo a {
  display: block;
  border-bottom: none;
  height: 20px;
}
#logo a svg {
  display: block;
  height: 20px;
}
#logo a svg:hover {
  fill: #0000ff;
}

.navbar {
  position: fixed;
  width: 100%;
  top: 0;
  text-align: center;
  background: #ffffff;
  /*
  border-top: 2px solid #000;
  */
}
.navbar nav {
  padding: 38px 5vh;
}

.navbar ul {
  margin: 0;
  list-style: none;
}
.navbar li {
  display: inline-block;
}
.active a {
  border-bottom: 2px solid #0000ff;
}

.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  text-align: right;
  padding: 2.5vh;
  display: none;
}

@media all and (max-width: 736px) {
  #logo {
    padding: 2.5vh 0 0 0;
  }
  .mobile-menu {
    display: block;
    cursor: pointer;
  }
  
  .hidden>nav {
    display:none;
  }
  .visible>nav {
    display:block;
  }
  
  .navbar {
    position: fixed;
    width: 100%;
    bottom: auto;
    top: 0;
    padding: calc(20px + 5vh) 0 0 0;
  }
  .navbar nav {
    height: 90vh;
    margin-top: 2vh;
    padding: 0vh 0;
    text-align: center;
  }
  .navbar li {
    display: inline-block;
    width: 100%;
  }
  .active a {
    border-bottom: 2px solid #0000ff;
  }
}