.header {
  .header__top-bar {
    background-color: black;
    color: white;
    padding: 10px 0 10px 0;

    svg.icon-pin {
      height: 14px;
      fill: white;
    }

    .top-bar__address {
      padding-left: 5px;
      line-height: 2;
    }

    a, a:link, a:hover, a:visited {
      color: white;
      display: inline-block;
      font-size: 24px;
      line-height: 1;
      text-decoration: none;
    }

    a svg {
      fill: #fff;
      height: 24px;
    }
  }

  a, a:link, a:hover, a:visited {
    text-decoration: none;
  }

  .header__menu-bar {
    background-color: white;
    width: 100%;

    &.sticky {
      position: fixed;
      top: 0;
      z-index: 1000;
      box-shadow: 0px 0px 5px black;
    }

    .desktop-menu {
      display: none;
    }

    .mobile-menu {
      display: block;
      text-align: right;
      position: relative;

      #btnMobileMenu,
      #btnMobileMenu span {
        display: inline-block;
        box-sizing: border-box;
      }
      #btnMobileMenu {
        position: relative;
        width: 40px;
        height: 40px;
        background: none;
        border: none;
        appearance: none;
        cursor: pointer;
        overflow: hidden;
      }
      #btnMobileMenu:focus:not(:focus-visible) {
        outline: none;
      }
      #btnMobileMenu span {
        position: absolute;
        width: 100%;
        height: 4px;
      }
      #btnMobileMenu span:before,
      #btnMobileMenu span:after {
        content: '';
        position: absolute;
        width: 51%;
        height: 4px;
        background: #000;
        transition: .2s;
      }
      #btnMobileMenu span:before {
        left: 0;
        border-radius: 4px 0 0 4px;
      }
      #btnMobileMenu span:after {
        right: 0;
        border-radius: 0 4px 4px 0;
      }
      #btnMobileMenu span:nth-of-type(1) {
        top: 0;
        left: 0;
      }
      #btnMobileMenu span:nth-of-type(2) {
        top: calc(50% - 2px);
        left: 0;
      }
      #btnMobileMenu span:nth-of-type(3) {
        bottom: 0;
        left: 0;
      }
      #btnMobileMenu.active span:nth-of-type(1):before {
        transform: translate(4px, 11px) rotate(45deg);
      }
      #btnMobileMenu.active span:nth-of-type(1):after {
        transform: translate(-3px, 11px) rotate(-45deg);
      }
      #btnMobileMenu.active span:nth-of-type(2):before {
        transform: translateX(-75%);
        opacity: 0;
      }
      #btnMobileMenu.active span:nth-of-type(2):after {
        transform: translateX(75%);
        opacity: 0;
      }
      #btnMobileMenu.active span:nth-of-type(3):before {
        transform: translate(4px, -11px) rotate(-45deg);
      }
      #btnMobileMenu.active span:nth-of-type(3):after {
        transform: translate(-3px, -11px) rotate(45deg);
      }

      nav {
        transition: all .5s ease-in-out;
        position: absolute;
        display: block;
        right: 0;
        background-color: #ffffff;
        border-radius: 10px;
        padding: 20px;
        z-index: 100;
        font-size: 1rem;
        box-shadow: 2px 2px 5px #00000080;
        width: max-content;
        transform: translate(100%, 0);

        & > ul > li {
          display: block;
          text-align: right;
          white-space: nowrap;
          padding: 4px 0;

          a {
            padding: 0;
          }
        }

        .sub-arrow {
          display: none;
        }

        .sub-menu-dropdown {
          display: block;
          width: inherit;

          li {
            padding: 4px 0;
          }
        }

        &.visible {
          /* right: 14px; */
          transform: translate(0, 0);
        }
      }
    }

    nav {
      & > ul {
        text-align: center;
        & > li {
          display: inline-block;
          font-size: 1rem;

          & > a {
            position: relative;
            padding: 10px;
            text-decoration: none;
            transition: all .5s ease-in-out;

            &:link, &:hover, &:visited {
              text-decoration: none;
            }

            &:after {
              transition: all .75s ease-in-out;
              bottom: 0;
              display: block;
              position: absolute;
              content: "";
              border-bottom: 2px solid #978246;
              width: 100%;
              opacity: 0;
            }
          }

          & > a:hover {
            color: #978246;
            position: relative;
          }
        }
      }
    }

    .header-crypto {
      height: 35px;
    }

    .header__menu-bar__logo {
      width: 60px;
    }

    .icon-caret-down {
      width: 1rem;
      height: 1rem;
    }

    .sub-menu-dropdown {
      display: none;
      z-index: 8000;
      width: max-content;
      border-radius: 4px;

      &.visible {
        display: inline-block;
        background-color: white;
        position: absolute;
        top: 100%;
        left: 17px;
      }

      li {
        padding: 5px 20px;
      }
    }
  }

  @media (min-width: 980px) {
    .header__menu-bar {
      .desktop-menu {
        display: block;
      }

      .mobile-menu {
        display: none;
      }

      .header__menu-bar__logo {
        width: 100px;

        nav {
          & > ul {
            & > li {
              & > a:hover {
                &:after {
                  opacity: 1;
                }
              }
            }
          }
        }
      }

      .header-crypto {
        height: 50px;
      }
    }
  }
}