.menu-main {
  background-color: $color-5;

  ul {
    padding: 0;
    margin: 0;
    list-style: none;
  }

  ul ul {
    //  display: none; // TODO: change to not visible

    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  ul > li:hover,
  ul > li:focus,
  ul > li:focus-within {
    ul {
      width: inherit !important;
      height: inherit !important;
      padding: inherit !important;
      margin: inherit !important;
      overflow: inherit !important;
      clip: inherit !important;
      white-space: inherit !important;
      border: inherit !important;
    }
  }

  ul.list {
    display: flex;

    justify-content: center;
    li {
      a {
        display: inline-block;
        text-decoration: none;
        text-transform: uppercase;
        color: $color-white;
        padding: 0.5rem 1rem;
        transition: all 0.4s ease-out;
        &:hover,
        &:focus {
          background-color: $color-white;
          color: $color-5;
        }
      }
    }
  }

  ul.sublist {
    position: absolute;
    background-color: rgba($color-5, 0.8);
    li {
      a {
        display: inline-block;
        background-color: $color-5;
        color: $color-white;
        padding: 0.5rem 1rem;
        transition: all 0.4s ease-out;
        &:hover,
        &:focus {
          background-color: $color-white;
          color: $color-5;
        }
      }
    }
  }
}