@charset "UTF-8"; 

.nav-container {
  max-width: 61.25rem;
  margin: 0 0 0 0.375rem;
  padding: 0;
}

nav {
  float: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

nav ul {
  display:inline-block;
  margin: 0;
  padding: 0;
  list-style: none;
}

nav ul li {
  float: left;
  position: relative;
}

nav ul li a,
nav ul li a:visited {
  display: block;
  background: #9C27B0;
  color: yellow;
  text-decoration: none;
  font-size: 1.2rem;
  margin: 0 auto;
  border-left: #594431 solid 0.125rem;
  border-right: #594431 solid 0.125rem;
  border-bottom: #594431 solid 0.125rem;
}
nav ul li a:hover,
nav ul li a:visited:hover {
  background: #000080;
  color: white;
    text-shadow: 0.0625rem 0.0625rem 0.125rem #6666FF, 0 0 1.5625rem blue, 0 0 0.3125rem darkblue;
  font-size: 1.2rem;
  /*font-weight: 700;*/
}
nav ul li a:not(:only-child):after,
nav ul li a:visited:not(:only-child):after {
  content: "\25BE";
}
nav ul li ul li {
  min-width: 12rem;
}
nav ul li ul li a {
 padding: 0.75rem;
}

.nav-dropdown {
  position: absolute;
  display: none;
  z-index: 1;
  /*box-shadow: 0 0.1875rem 0.75rem rgba(0, 0, 0, 0.15);*/
}
.nav-mobile {
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  background: #262626;
  width: 4.375rem;
}

@media only screen and (max-width: 40rem) {
  .nav-mobile {
    display: block;
  }

  nav {
    width: 100%;
   /*padding: 0.5rem 0 0.1rem;*/
  }
  nav ul {
    display: none;
  }
  nav ul li {
    float: none;
  }
  nav ul li a {
  padding: 0 1.5%;
  margin-top: 0.3%;
  }
  nav ul li ul li a {
    margin: 0.03rem 4rem;
  }

  .nav-dropdown {
    position: static;
    width: 100%;
  }
}

@media screen and (min-width: 40rem) {
  .nav-list {
    display: block !important;
  }
}

#nav-toggle {
    position: absolute;
    /*left: 1.125rem;
    top: 1.375rem;*/
    cursor: pointer;
    /*padding: 0.625rem 2.1875rem 1rem 0;*/
    padding: 3rem 3rem 4rem 0.75rem;
    margin: 0rem 0rem 0rem -1.5rem;
    background-color: rgb(201, 1, 1);
    border-radius: 1.625rem;
  }
  #nav-toggle span,
  #nav-toggle span:before,
  #nav-toggle span:after {
    cursor: pointer;
    border-radius: 0.125rem;
    height: 0.3125rem;
    width: 2.1875rem;
    background: yellow;
    position: absolute;
    display: block;
    content: '';
    transition: all 300ms ease-in-out;
  }
  #nav-toggle span:before {
    top: -0.625rem;
  }
  #nav-toggle span:after {
    bottom: -0.625rem;
  }
  #nav-toggle.active span {
    background-color: transparent;
  }
  #nav-toggle.active span:before, #nav-toggle.active span:after {
    top: 0;
  }
  #nav-toggle.active span:before {
    transform: rotate(45deg);
  }
  #nav-toggle.active span:after {
    transform: rotate(-45deg);
  }
  #nav-toggle span:hover {
    top: 0;
  }
  #nav-toggle span:hover {
    bottom: 0;
  }