/*  */
/*  */
/* style_menu.css */

/* fake-index-page */
#fake {
  display: none;
}
/*  */
/* styles from old menu */
/* main menu list items and menu-button*/

/* nav > ul > li, */
div.button {
  display: inline-block;
  position: relative;
  width: 100%;
  text-align: left;
  font-size: 1.2em;
  background-color: #fdfdfd;
}

/* MENU BUTTON */
/* top button to show/hide main menu */
div.button {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 0;
  width: 100%;
  height: 5em;
  background-color: #588593;
}

div.button a {
  display: block;
  text-align: center;
  text-transform: uppercase;
  text-decoration: none;
  color: #f0f0f0;
  padding-top: 2em;
  height: 5em;
  font-weight: lighter;
}

div.button p {
  font-size: 0.6em;
}

/*  */
/* new menu */
/* style nav */

nav {
  background-color: #fdfdfd;
  margin-top: 5.9em;
  top: 0em;
  position: fixed;
  width: 100%;
  z-index: 4;
}

.topnav {
  overflow: hidden;
  height: 2.5em;
  box-shadow: 0 1px 6px 0 #84a7a6;
}

/* nav links */

.topnav a {
  float: left;
  display: block;
  color: #588593;
  padding: 10px 20px 10px 10px;
  text-decoration: none;
  font-size: 1em;
  min-width: 130px;
  text-align: center;
  height: 2.5em;
}

button a {
  margin: -0.6em;
  font-weight: lighter;
}

/*  highlight the current page */
.active {
  background-color: #bbdbb4;
}

/* menu icon */
a.icon {
  font-size: 25px;
  opacity: 0.75;
  padding: 3px 15px 3px 15px;
}

/* dropdown icon */
i.fa {
  float: right;
  margin: 5px 0px 0px -20px;
  padding: 1px 6px;
  z-index: 100;
}

/* Dropdown container (needed to position the dropdown content) */
.dropdown {
  float: left;
  overflow: hidden;
}

/* dropdown button to fit inside the topnav */
.dropdown .dropbtn {
  color: #588593;
  font-size: 1em;
  border: none;
  outline: none;
  padding: 10px 5px 10px 10px;
  background-color: inherit;
  font-family: inherit;
  text-align: left;
  min-width: 130px;
  height: 2.5em;
}

/* dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #fdfdfd;
  min-width: 130px;
  z-index: 1;
}

/* links inside the dropdown */
.dropdown-content a {
  float: none;
  padding: 10px 18px;
  text-decoration: none;
  display: block;
  text-align: left;
  height: 2.5em;
}

/* background of menu-lins on hover */
.topnav a:hover:not(.active),
.topnav .dropbtn a:hover:not(.active) {
  color: #fdfdfd;
  background-color: #84a7a6;
}

/* background of dropdown links on hover */
.dropdown-content a:hover:not(.active) {
  color: #fdfdfd;
  background-color: #84a7a6;
  opacity: 0.5;
}

/* show dropdown menu on hover dropdown button */
.dropdown:hover .dropdown-content {
  display: block;
}

.show {
  display: block;
}

@media screen and (max-width: 350px) {
  div.button {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 2;
    width: 100%;
    height: 4em;
    background-color: #84a7a6;
  }
  div.button a {
    padding-top: 1.2em;
    height: 4em;
  }

  nav {
    margin-top: 4.8em;
  }
}

@media screen and (max-width: 800px) {
  .topnav {
    display: none;
    position: relative;
    padding-right: 0px;
    height: unset;
  }

  .topnav a {
    float: none;
    display: block;
    text-align: left;
  }

  .topnav a.icon {
    position: absolute;
    display: block;
    float: right;
    text-align: right;
    right: 0px;
    top: 0;
  }

  .topnav .dropdown {
    float: none;
  }

  .topnav .dropdown .dropbtn {
    display: block;
    width: 100%;
    text-align: left;
  }

  .topnav .dropdown-content {
    position: relative;
    background-color: #f0f0f0;
    opacity: 0.75;
  }

  i.fa {
    float: right;
    margin-top: -25px;
    padding: 6px 20px 6px 20px;
    background-color: #f0f0f0;
    z-index: 100;
  }

  /*  */
  .show {
    display: block;
  }
}