#overlay-menu-toggle {
  @apply
    inline-block
    ml-6
    cursor-pointer;

  z-index: 9999;

  @screen md {
    @apply
      hidden;
  }

  .hamburger-box {
    height: 20px;
  }

  .hamburger-inner,
  .hamburger-inner::before,
  .hamburger-inner::after {
    width: 1.7rem;
  }
}

#overlay-menu {
  @apply
    fixed
    opacity-0
    pointer-events-none
    top-0
    mx-auto
    right-0
    bottom-0
    left-0
    overflow-auto
    max-h-full
    text-left;

  z-index: 9990;
  transition: all 0.25s ease-in-out;

  &.active {
    @apply
      pointer-events-auto
      opacity-100;
  }

  .overlay-menu-inner {
    @apply
      flex
      flex-row
      h-full
      overflow-x-hidden
      overflow-y-auto;
  }

  .overlay-1 {
    .nav-primary {
      @apply
        flex
        w-full
        overflow-y-auto
        mx-auto
        items-center
        justify-between
        pt-8
        pb-24
        flex-col
        bottom-0
        overflow-x-hidden;

      @screen md {
        @apply
          pt-0
          mt-10
          pb-24
          flex-row;
      }

      .overlay-primary-container {
        @apply
          opacity-0;

        max-width: 520px;
        margin-top: 150px;
        transition: all 1s ease-in-out;

        &.active {
          @apply opacity-100;
        }

        @screen md {
          @apply
            mt-0;
        }

        ul {
          li {
            @apply
              py-2
              leading-none;

            @screen md {
              @apply
                py-4;
            }

            ul.sub-menu {
              @apply
                mt-3;

              @screen md {
                @apply
                  mt-6;
              }

              li {
                @apply
                  py-2;

                ul.sub-menu {
                  @apply
                    mb-1;

                  li {
                    @apply
                      py-1;

                    a {
                      @apply
                        pl-2
                        list-disc
                        list-inside
                        text-lg;
                    }
                  }
                }

                a {
                  @apply
                    text-2xl;
                }
              }
            }

            a {
              @apply
                text-3xl;

              @screen md {
                @apply
                  w-3/5
                  text-4xl;
              }
            }
          }
        }
      }

      .overlay-secondary-container {
        @apply
          flex
          justify-between
          flex-col
          opacity-0
          mt-24
          mb-12;

        transition: all 1.7s ease-in-out;

        &.active {
          @apply opacity-100;
        }

        max-width: 480px;

        @screen md {
          @apply
            mt-0
            mb-0;
        }

        .socialbar {
          @apply
            mt-16;
        }

        ul,
        .socialbar {
          @apply
            text-center;

          @screen md {
            @apply
              text-right;
          }

          li {
            @apply
              mb-2;

            a {
              @apply
                text-base;
            }
          }
        }
      }

      ul {
        @apply
          text-left;

        li {
          a {
            @apply
              leading-none
              text-gray-100;

            &:hover {
              @apply
                opacity-50;
            }
          }

          ul {
            @apply
              ml-6;

            li {
              @apply
                text-2xl;

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

  &.overlay-menu-2 {
    @apply
      bottom-auto;

    .overlay-menu-inner {
      @apply
        h-auto;
    }

    .nav-primary {
      @apply
        flex
        w-full
        overflow-y-auto
        pt-8
        pb-24
        mt-0
        overflow-x-hidden;

      margin-top: 150px;

      @screen md {
        margin-top: 190px;
      }

      .overlay-2 {
        @apply
          w-full;

        transition: all 1s ease-in-out;
        max-width: 100%;

        .col {
          @apply
            pr-4
            pl-4;

          .col-inner {
            .widget {
              @apply
                pb-10;

              &:not(:first-child) {
                @apply
                  pt-16;
              }
            }
          }

          &:last-child {
            @apply
              pr-8;

            @screen sm {
              border-right: none;
            }
          }
        }

        ul {
          li {
            ul {
              @apply
                mt-2
                mb-3;

              li {
                @apply
                  mx-3;

                a {
                  @apply
                    text-sm;
                }
              }
            }

            a {
              @apply
                leading-relaxed
                text-base;
            }

            &.btn {
              @apply
                my-3;
            }
          }
        }
      }
    }
  }
}
