.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

#topnav.nav-sticky {
  @apply bg-white/80 backdrop-blur-md shadow-sm;
}

@layer base {
  #topnav {
    @apply fixed right-0 left-0 top-0 z-50 bg-transparent border-0 transition-all duration-500 ease-in-out;

    & .logo {
      @apply float-left text-black;

      & .l-dark {
        @apply hidden;
      }

      & .l-light {
        @apply inline-block;
      }

      &:focus {
        @apply outline-hidden;
      }
    }

    & .has-submenu {
      @apply relative;

      &.active {
        & a {
          @apply text-white;
        }

        & .submenu {
          & li {
            &.active {
              & > a {
                @apply text-green-600;
              }
            }
          }
        }

        &.active {
          & .menu-arrow {
            @apply border-green-600;
          }
        }
      }

      & .submenu {
        & .submenu-arrow {
          border-width: 0px 0.125rem 0.125rem 0px;
          @apply absolute right-5 top-3.5 border-black rounded-xs inline-block p-0.5 -rotate-45;
        }

        & .has-submenu {
          &:hover {
            & > .submenu-arrow {
              @apply border-green-600;
            }
          }

          & .submenu {
            & .has-submenu {
              &:hover {
                & .submenu-arrow {
                  @apply border-green-600;
                }

                & > .submenu-arrow {
                  @apply border-green-600;
                }
              }
            }
          }
        }
      }
    }

    & .navbar-toggle {
      @apply border-0 relative p-0 m-0 cursor-pointer;

      & .lines {
        @apply w-6 block relative h-5 mt-8 mr-0 mb-6 ml-2.5;
      }

      & span {
        @apply h-0.5 w-full bg-black block mb-1;
      }

      &.open {
        & span {
          @apply absolute;

          &:first-child {
            @apply top-1.5 rotate-45;
          }

          &:nth-child(2) {
            @apply invisible;
          }

          &:last-child {
            @apply w-full top-1.5 -rotate-45;
          }

          &:hover {
            @apply bg-green-600;
          }
        }
      }

      &:hover,
      &:focus,
      & .navigation-menu > li > a:hover {
        @apply bg-transparent;
      }
    }

    & .buy-button {
      @apply float-right leading-none;

      & > li {
        @apply leading-none;
      }

      & .login-btn-primary,
      & .btn-icon-dark {
        @apply hidden;
      }

      & .login-btn-light,
      & .btn-icon-light {
        @apply inline-block;
      }

      & .search-bar {
        & .menu-search {
          & form {
            @apply relative;
          }
        }
      }

      & .searchform {
        @apply after:absolute after:right-3.5 after:top-3.5 after:text-xl after:leading-5 after:pointer-events-none;

        & input[type="text"] {
          @apply shadow-none py-2.5 pr-10 pl-3 h-11 text-sm block outline-hidden;
        }

        & input[type="submit"] {
          @apply hidden;
        }

        &:after {
          content: "\f0349";
          font-family: "Material Design Icons";
        }
      }
    }

    & .buy-button,
    & .buy-menu-btn {
      & .dropdown {
        & .dropdown-toggle {
          @apply after:hidden;
        }
      }
    }

    & .navigation-menu {
      @apply list-none m-0 p-0;

      & > li {
        @apply float-left block relative my-0 mx-2.5;

        & > a {
          @apply block text-black text-base bg-transparent font-medium tracking-wide leading-6 px-4;

          &:hover,
          &:active {
            @apply text-green-600;
          }
        }

        &:hover,
        &.active {
          & > a {
            @apply text-green-600;
          }
        }

        & .submenu.megamenu {
          & li {
            & .megamenu-head {
              @apply py-2.5 px-5 whitespace-nowrap text-xs uppercase tracking-tight font-semibold text-slate-400;
            }
          }
        }
      }

      & .has-submenu {
        & .menu-arrow {
          @apply border-black rounded-xs inline-block p-0.5 rotate-45 absolute transition-all duration-500 right-0 top-8;
        }
      }
    }

    & .menu-extras {
      @apply float-right;
    }

    &.scroll {
      @apply bg-white border-none shadow-sm;

      & .navigation-menu {
        & > li {
          & > a {
            @apply text-black;
          }

          & > .menu-arrow {
            @apply border-black;
          }

          &:hover,
          &.active {
            & > a {
              @apply text-green-600;
            }

            & > .menu-arrow {
              @apply border-green-600;
            }
          }
        }
      }

      & .logo {
        @apply leading-relaxed;
      }
    }

    &.defaultscroll {
      &.dark-menubar {
        & .logo {
          @apply leading-loose;
        }
      }

      &.scroll {
        & .logo {
          @apply leading-relaxed;
        }
      }
    }

    &.nav-sticky {
      & .navigation-menu {
        &.nav-light {
          & > li {
            & > a {
              @apply text-black;
            }

            &.active {
              & > a {
                @apply text-green-600;
              }
            }

            &:hover,
            &.active {
              & > .menu-arrow {
                @apply border-green-600;
              }
            }

            &:hover,
            &.active {
              & > a {
                @apply text-green-600;
              }
            }
          }

          & .has-submenu {
            & .menu-arrow {
              @apply border-black;
            }
          }
        }
      }

      &.tagline-height {
        @apply top-12;
      }

      & .buy-button {
        & .login-btn-primary,
        & .btn-icon-dark {
          @apply inline-block;
        }

        & .login-btn-light,
        & .btn-icon-light {
          @apply hidden;
        }
      }

      & .logo {
        & .l-dark {
          @apply inline-block;
        }

        & .l-light {
          @apply hidden;
        }
      }
    }
  }

  .logo {
    @apply font-semibold text-2xl mr-4 pt-0 px-1.5 pb-0 tracking-wide leading-loose;
  }

  @media (min-width: 1025px) {
    #topnav {
      & .navigation-menu {
        & > li {
          & .submenu {
            &.megamenu {
              @apply max-w-7xl;
            }
          }
        }
      }
    }
  }

  @media screen and (max-width: 1024px) and (min-width: 992px) {
    #topnav {
      & .navigation-menu {
        & > li {
          & .submenu {
            &.megamenu {
              @apply max-w-6xl;
            }
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    #topnav {
      & .navigation-menu {
        @apply flex flex-wrap justify-center;

        & > li {
          & .submenu {
            transition: all 0.2s ease;
            @apply absolute top-full left-0 z-50 py-4 px-0 list-none min-w-48 invisible opacity-0 mt-2.5 rounded-md bg-white shadow-sm;

            & li {
              @apply relative;

              & a {
                transition: all 0.3s;
                @apply block py-2.5 px-5 clear-both whitespace-nowrap text-base tracking-tight font-normal text-black leading-normal;

                &:hover {
                  @apply text-green-600;
                }
              }

              & ul {
                @apply list-none pl-0 m-0;
              }
            }

            &.megamenu {
              @apply max-w-7xl;

              & > li {
                @apply overflow-hidden align-top w-1/5;

                & .submenu {
                  @apply left-full top-0 ml-2.5 -mt-px;
                }
              }
            }

            & > li {
              & .submenu {
                @apply left-full top-0 ml-2.5 -mt-px;
              }
            }
          }

          & > a {
            @apply py-6 min-h-16;
          }

          &:hover {
            & > .menu-arrow {
              @apply border-green-600;
            }
          }

          &:hover,
          &.active {
            & > a {
              @apply text-green-600;
            }
          }

          &.last-elements {
            & .submenu {
              @apply left-auto right-0 before:left-auto before:right-2.5;

              & > li {
                &.has-submenu {
                  & .submenu {
                    @apply left-auto right-full ml-0 mr-2.5;
                  }
                }
              }
            }
          }
        }

        &.nav-light {
          & > li {
            & > a {
              @apply text-white/50;
            }

            &.active {
              & > a {
                @apply text-white;
              }
            }

            &:hover {
              & > .menu-arrow {
                @apply border-white;
              }

              & > a {
                @apply text-white;
              }
            }
          }

          & .has-submenu {
            & .menu-arrow {
              @apply border-white/50;
            }

            &.active {
              & .menu-arrow {
                @apply border-white;
              }
            }
          }
        }
      }

      & .buy-button {
        @apply pl-4 ml-4;
      }

      & .navbar-toggle {
        @apply hidden;
      }

      & #navigation {
        @apply block;
      }

      &.scroll {
        @apply top-0;

        & .navigation-menu {
          & > li {
            & > a {
              @apply py-6;
            }
          }
        }
      }

      &.scroll-active {
        & .navigation-menu {
          & > li {
            & > a {
              @apply py-6;
            }
          }
        }
      }
    }
  }

  @media (max-width: 991px) {
    #topnav {
      @apply bg-white shadow-sm min-h-20;

      & .logo {
        & .l-dark {
          @apply inline-block;
        }

        & .l-light {
          @apply hidden;
        }
      }

      & .container {
        @apply w-auto;
      }

      & #navigation {
        @apply max-h-96 shadow-sm;
      }

      & .navigation-menu {
        @apply float-none;

        & > li {
          @apply float-none;

          & .submenu {
            @apply hidden list-none pl-5 m-0;

            & li {
              & a {
                transition: all 0.3s;
                @apply block relative py-1.5 px-4 tracking-tight text-black;
              }
            }

            &.megamenu {
              & li {
                & .megamenu-head {
                  @apply py-1.5 px-4;
                }
              }

              & > li {
                & > ul {
                  @apply list-none pl-0;

                  & > li {
                    & > span {
                      @apply block relative py-2.5 px-4 uppercase text-xs tracking-wider text-slate-200;
                    }
                  }
                }
              }
            }

            &.open {
              @apply block;
            }

            & .submenu {
              @apply hidden list-none;

              &.open {
                @apply block;
              }
            }
          }

          & > a {
            @apply text-black py-2.5 px-5 after:absolute after:right-4;
          }

          & > a:hover,
          & .submenu li a:hover,
          &.has-submenu.open > a {
            @apply text-green-600;
          }
        }
      }

      & .menu-extras {
        & .menu-item {
          @apply border-gray-200;
        }
      }

      & .navbar-header {
        @apply float-left;
      }

      & .buy-button {
        & .login-btn-primary,
        & .btn-icon-dark {
          @apply inline-block;
        }

        & .login-btn-light,
        & .btn-icon-light {
          @apply hidden;
        }
      }

      & .has-submenu {
        & .submenu {
          & .submenu-arrow {
            @apply rotate-45 absolute right-5 top-3;
          }
        }

        &.active {
          & a {
            @apply text-green-600;
          }
        }
      }
    }

    #navigation {
      @apply absolute top-20 left-0 w-full hidden h-auto bg-white overflow-auto;

      &.open {
        @apply block overflow-y-auto;
      }
    }
  }

  @media (max-width: 768px) {
    #topnav {
      & .navigation-menu {
        & .has-submenu {
          & .menu-arrow {
            @apply right-2 top-4;
          }
        }
      }
    }
  }

  @media (min-width: 768px) {
    #topnav {
      & .navigation-menu {
        & > li {
          &.has-submenu {
            &:hover {
              & > .submenu {
                @apply visible opacity-100 mt-0;

                & > li {
                  &.has-submenu {
                    &:hover {
                      & > .submenu {
                        @apply visible opacity-100 ml-0 mr-0;

                        & > li {
                          &:hover {
                            & > .submenu {
                              @apply visible opacity-100 ml-0 mr-0;
                            }
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }

    .navbar-toggle {
      @apply block;
    }
  }

  @media (max-width: 425px) {
    #topnav {
      & .buy-menu-btn {
        @apply block my-0 mx-2.5 py-2.5 px-5;

        & .dropdown {
          & .dropdown-menu {
            &.show {
              transform: translate3d(0px, -54px, 0px) !important;
            }
          }
        }
      }
    }
  }

  .tagline {
    @apply absolute w-full z-50 text-sm py-3 px-0;
  }

  @media screen and (max-width: 575px) {
    .tagline {
      @apply hidden;
    }

    .tagline-height {
      @apply top-12;
    }
  }

  @media (min-width: 576px) {
    .tagline-height {
      @apply top-12;
    }
  }
}

@layer base {
  .btn {
    @apply focus:outline-hidden text-base font-medium h-10 px-7 rounded-lg inline-flex items-center justify-center align-middle;

    &.btn-lg {
      @apply h-14 px-7 text-lg;
    }

    &.btn-sm {
      @apply h-7 px-4 text-sm;
    }

    &.btn-icon {
      @apply p-0 h-10 w-10 inline-flex items-center text-center justify-center text-base;

      &.btn-lg {
        @apply h-14 w-14 text-lg;
      }

      &.btn-sm {
        @apply h-7 w-7;
      }
    }

    &.btn-link {
      @apply relative h-7 p-0 border-none after:content-none after:absolute after:h-px after:w-0 after:right-0 after:bottom-0 after:left-0 after:transition-all after:duration-500;

      &:hover {
        @apply after:w-full after:right-auto;
      }
    }
  }
}

button .when-disabled {
  display: none;
}

button[disabled] .when-disabled {
  display: initial;
}

button .when-enabled {
  display: initial;
}

button[disabled] .when-enabled {
  display: none;
}

.topnav {
  @apply mr-4 flex justify-center items-center space-x-4 lg:space-x-6 text-sm lg:text-base;

  .topnav-item {
    @apply text-gray-800 font-semibold hover:text-green-600 tracking-wide;

    &.current {
      @apply text-green-600;
    }

    &:hover,
    &.active {
      @apply hover:text-green-600;
    }
  }
}