#main-nav li {
  display: inline-block;
  position: relative;
  list-style: none;
}

#main-nav li a {
  text-decoration: none;
  display: block;
  font-weight:400!important;
}

#main-nav li a:hover, #main-nav li a:focus {
  font-weight:400!important;
}

#main-nav li>ul {
  display: none;
  position: absolute;
  right: 0;
  text-align: left;
  background: var(--navy);
  padding: 0;
  border-radius: 2px;
  box-shadow: rgba(0, 0, 0, 0.45) 0px 0px 20px 0px;
}

#main-nav li ul>li {
  display: block;
}

#main-nav li:hover>ul, #main-nav li:focus>ul {
  display: block;
}

#main-nav li ul {
  z-index: 40;
}

#main-nav li ul:after {
  content: "";
  position: absolute;
  right: 15px;
  top: -10px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 17px 17px 17px;
  border-color: transparent transparent var(--navy) transparent;
  z-index: -1;
}

@media (min-width:1200px){
  .sub-menu {
    width:200px;
  }
}

@media (max-width: 1200px) {
  #main-nav {
    position: fixed;
    top: 0;
    right: -9999px;
    width: 250px;
  }

  #toggle {
    display: flex;
  }

  #main-nav {
    background: var(--navy);
    padding: 70px 0 0 0;
    list-style: none;
    width: 100%;
    height: 105vh;
  }

  #main-nav li {
    list-style: none;
  }

  #main-nav li a {
    text-decoration: none;
    display: block;
    color: var(--white);
    margin-bottom:12px;
  }

  #main-nav li:hover > a, #main-nav li:focus > a {
    color:var(--teal);
  }

  #main-nav li.menu-item-has-children:hover > a,
  #main-nav li.menu-item-has-children:focus > a {
    color:var(--white);
    cursor:default;
  }

  #main-nav li a:active {
    color: var(--teal);
  }

  #main-nav .menu-item-has-children {
    position: relative;
    width: 100%;
    box-sizing: border-box;
  }

  #main-nav .menu-item-has-children .sub-menu {
    display: block;
    padding: 0;
  }

  #main-nav .active > .sub-menu {
    display: block;
  }

  #main-nav li:last-child {
    border-bottom: none;
  }

  #main-nav ul {
    padding-left: 0;
  }

  #nav li ul:after {
    display: none;
  }

  #nav {
    padding-left: 0;
  }

  #nav li>ul {
    box-shadow: none;
  }

  #nav ul {
    height: auto !important;
  }

  #nav li {
    width: 100%;
  }

  #nav li ul li>a {
    padding-left: 24px !important;
  }

  ul.sub-menu {
    min-height:100vh;
    background:transparent!important;
  }
}