.main-nav {
  //display: none;
  float: right;
  ul {
    padding: 0;
    margin: 0;
    list-style: none;
    -webkit-font-smoothing: subpixel-antialiased;
    -moz-osx-font-smoothing: grayscale;
    li {
      display: inline;
      position: relative;
      float: left;
      &:hover {
        background: $color-systemml-accent;
      }
      a {
        color: #fff;
        font-weight: $font-weight-medium;
        display: block;
        padding: 10px;
        @media (min-width: $bp-medium) {
          padding: 20px;
        }
        &:hover {
          color: #fff;
        }
        .icon-chevron-down {
          top: -1px;
          background-size: 10.987px 6.201px;
      		width: 10.987px; height: 6.201px;
          margin-left: 10px;
        }
      }
    }
    ul {
      display: none;
      background-color: #f9f9fb;
      border: 1px solid #e0e0e0;
      border-width: 0 1px 1px 1px;
    }
  }

  li ul {
    position: absolute;
    right: 0;
    top: 66px;
    min-width: 200px;
    li {
      width: 100%;
      a {
        color: #152935;
        padding: 5px 20px;
        transition: $transition-default;
        &:hover {
          color: #fff;
          background: $color-systemml-accent;
        }
      }
    }
  }
  ul li:hover > ul {
    display: block;
  }
  @media (min-width: $bp-medium) {
    display: block;
  }
}