#overlay-menu-toggle {
  @apply
    cursor-pointer
    ml-5
    z-[9001]

    md:hidden;

  .hamburger-inner {
    @apply
      bg-primary-500

      before:bg-primary-500

      after:bg-primary-500;
  }
}

#overlay-menu {
  @apply
    fixed
    hidden
    bg-primary-500
    text-white
    top-0
    right-0
    bottom-0
    left-0
    text-center
    z-[9000];

  .overlay-menu-inner {
    @apply
      flex
      flex-wrap
      flex-row
      py-12
      px-6
      overflow-x-hidden
      overflow-y-auto;
  }

  .brand {
    @apply
      flex
      mb-6
      justify-center
      w-full;

    img {
      @apply
        h-16;
    }
  }

  .nav-primary {
    @apply
      w-full
      flex
      pb-16
      my-auto
      items-center
      relative;

    ul {
      @apply
        text-left;

      li {
        @apply
          my-2
          text-3xl
          font-medium;

        a {
          @apply
            text-primary-100

            hover:opacity-50;
        }

        ul {
          @apply
            mb-3
            ml-4;

          li {
            @apply
              text-2xl;

            a {
              @apply
                opacity-75;
            }
          }
        }
      }
    }
  }
}
