.fixed-nav-bar {
    position: fixed;
    margin-bottom: 70px;
 
    width: 100%;
    background-color: #ce5b48;
  
  }
  
  /* The element at the top of the page right after the fixed navigation bar
     MUST have sufficient top margin or else it will be covered by the bar */
  .content {
    margin-top: 20px;
  }
  
  /* Example responsive navigation menu  */
  .fixed-nav-bar li, .fixed-nav-bar a { 
    height: 50px;
    line-height: 50px;
      color: #fff;
  }
  .menu {
    width: 90%;
    max-width: 960px;
    margin: 0 auto;
  }
  
  .menu a:hover, .menu a:target {
    color: #ebebeb;
  }
  .menu-items {
    display: inline-block;
      color: #fff;
  }
  .sitename {
    display: inline-block;
    margin-right: 20px;
    margin-left: 10px;
  }
  a.sitename, a:visited.sitename {
    color: #e0e0e0;
  }
  .menu-items li {
    display: inline-block;
      color: #fff;
    margin-right: 10px;
    margin-left: 10px;
  }
  .menu-items a {
    text-decoration: none;
      color: #fff;
  }
  .show, .hide {
    display: none;
    padding-left: 15px;
    background-color: transparent;
    background-repeat: no-repeat;
    background-position: center left;
    color: #dde1e2;
  }
  .show {
    background-image: url(assets/down-arrow-icon.png);
  }
  .hide {
    background-image: url(assets/up-arrow-icon.png);
  }
  
  @media only screen and (max-width: 800px) {
    .menu { 
      position: relative;
      width: 100%;
    }
    .sitename {
      position: absolute;
      top: 0;
      left: 15px;
      margin-left: 0px;
    }
    .menu-items {
      display: none; 
      width: 100%;
      margin-top: 50px;
      background-color: #008378;
    }
    .menu-items li {
      display: block;
      text-align: center;
    }
    .show, .hide {  
      position: absolute;
      top: 0;
      right: 15px;
    }
    .show {
      display: inline-block;
    }
    .hide {
      display: none;
    }
    #menu:target .show {
      display: none;
    }
    #menu:target .hide, #menu:target .menu-items {
      display: inline-block;
    }
  }
  
  @media only screen and (max-width: 220px) {
    .sitename, .show, .hide {
      font-size: 14px;
    }
  }
  
   /* Dropdown Button */
  .dropbtn {
      background-color: #4CAF50;
      color: white;
      padding: 16px;
      font-size: 16px;
      border: none;
      cursor: pointer;
  }
  
  /* The container <div> - needed to position the dropdown content */
  .dropdown {
      position: relative;
      display: inline-block;
  }
  
  /* Dropdown Content (Hidden by Default) */
  .dropdown-content {
      display: none;
      position: absolute;
      background-color: #f9f9f9;
      min-width: 160px;
      box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
      z-index: 1;
  }
  
  /* Links inside the dropdown */
  .dropdown-content a {
      color: black;
      padding: 2px 6px;
      text-decoration: none;
      display: block;
  }
  
  /* Change color of dropdown links on hover */
  .dropdown-content a:hover {background-color: #c67365}
  
  /* Show the dropdown menu on hover */
  .dropdown:hover .dropdown-content {
      display: block;
  }
  
  /* Change the background color of the dropdown button when the dropdown content is shown */
  .dropdown:hover .dropbtn {
      background-color: #fff444;
  }