/* Fixed navigation to the top */
nav {
  height: 40px;
  position: fixed;
  z-index: 10;
  top: 0;
}

/* Remove default list styling */
nav ul {
  background-color: black;
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

/* Horizontal list */
nav ul li {
  float: left;
}

/* Style the links inside the list items */
nav ul li a, nav ul li.icon span {
  cursor: pointer;
  display: inline-block;
  text-align: center;
  text-decoration: none;
  transition: 0.3s;
  color: #7F7F7F;
  padding: 14px;
  margin-right: -14px;
}

nav ul li a.selected {
  color: #f2f2f2;
}

/* Hide hamburder if on desktop */
nav ul li.icon {
  display: none;
}

@media screen and (min-width:768px) {
  nav ul li a, nav ul li.icon span {
    padding: 7px 0 15px 0;
    margin-right: 33px;
  }

  /* Hover item */
  nav ul li a:hover, nav ul li.icon span:hover {
    opacity: .5;
  }
}

@media screen and (min-width:992px) {
  nav ul li a, nav ul li.icon span {
    padding: 7px 0 15px 0;
    margin-right: 55px;
  }
}

/* When the screen is less than 768 pixels wide, hide all list items. Show the list item that contains the link to open and close the topnav (li.icon) */
@media screen and (max-width:767px) {
  nav ul {
    background-color: transparent;
  }
  nav ul li {
    display: none;
  }
  nav ul li.icon {
    font-size: 20px;
    float: right;
    display: inline-block;
  }

/* The "responsive" class is added to the topnav with JavaScript when the user clicks on the icon. This class makes the topnav look good on small screens */

  nav ul.responsive {
    position: relative;
    background-color: black;
  }
  nav ul.responsive li.icon {
    position: absolute;
    right: 20px;
    top: 0;
  }
  nav ul.responsive li {
    float: none;
    display: inline;
  }
  nav ul.responsive li a, nav ul.responsive li.icon span {
    display: block;
    text-align: left;
  }
}