nav.menu {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  nav.menu a,
  nav.menu button {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  
  nav.menu > * > button {
    padding: 1rem;
  }

  nav.menu button svg line {
    stroke: #bb5a5a;
    stroke-width: 2.3;
  }

  nav.menu button + * {
    display: none;
  }

  nav.menu .expanded > button + * {
    display: flex;
    flex-flow: column nowrap;
    justify-content: flex-start;
    align-items: stretch;
    
    list-style-type: none;
    
    padding: 1em;
    margin: 0em;
  }

  nav.menu > .expanded > button + * {
    position: absolute;
    
    background-color: #f9f7f7;
    z-index: 100;
  }
  

  nav.menu button + * button,
  nav.menu button + * a {
    display: flex;
    flex-flow: row nowrap;
    justify-content: flex-start;
    align-items: center;
  }
  
  nav.menu button + * li {
    padding: 0.25em;
  }
  
  nav.menu button + * li.highlighted {
    font-family: 'OPEN-SANS-SEMIBOLD', sans-serif;
    color: #bb5a5a;
    border-bottom: 2px solid #3f72af;
  }
  
  nav.menu button + * button span {
    padding-right: 0.5em;
  }
  
  nav.menu .bookAuthor > a {
    display: inline-block;
  }

  nav.menu a.logo {
    padding: 1em 0em;
  }
  
  nav.menu a.logo img {
    display: block;
    width: 6em;
  }

  #mainMenu > button {
    height: 100%;
  }
  
  #mainMenu > button svg {
    width: 1.5em;
    height: 1.25em;
  }
  
  #mainMenu li {
    min-width: 13em;
  }
  
  #mainMenu li:hover {
    cursor: pointer;
  }
  
  #dashboardLinks > div {
    padding: 0.25em;
  }

  #dashboardLinks {
    padding-top: 1em;
  }
  
  #dashboardLinks .switchDashboard {
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: space-between;
  }
  
  #dashboardLinks .switchDashboard > *{
    margin: 0em;
  }
  
  nav.menu #dashboardLinks  li {
    padding: 0.25em;
  }
  

  @media screen and (min-width: 380px) {
    nav.menu a.logo img {
      width: 7em;
      max-height: 2em;
    }
  }

  @media screen and (min-width: 841px) {
    #mainMenu {
      order: 5;
      flex-basis: 100%;
    }
    
    .menu-icon {
      display: none;
    }
    
    nav.menu a.logo {
      padding: 1em;
    }
    
    #goToDashboard {
      display: block;
      margin-left: auto;
    }
    
    #menuLinks {
      position: static;
      height: auto;
      width: auto;
      visibility: visible;
      
      flex-flow: row wrap;
      align-items: baseline;
      
      border: none;
      overflow-y: hidden;
    }
    
    #mainMenu li {
      min-width: auto;
      display: inline-block;
    }
    
    #mainMenu > button {
      display: none;
    }
    
    #mainMenu > ul {
      display: flex;
    }
    
    #menuLinks a {
      padding-right: 1em;
      padding-left: 1em;
      padding-bottom: 1em;
    }
    
    #goToDashboard {
      display: block;
      margin-left: auto;
    }
    
    #menu::before {
      border-top: 0.05em solid #e0e0e0;
    }
    
    #menuLinks {
      border-top: 0.05em solid #e0e0e0;
    }
    
    #mainMenu > ul {
      overflow-y: hidden;
      height: auto;
    }
    
    nav.menu button + * li {
      padding: 1em;
    }
    
  }