.navbar {
  &__btn {
    display: none;
    height: 18px;
    width: 18px;
    position: relative;
    @media (max-width: 649px) {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
    }
    &::after {
      content: '';
      background: #5C6570;
      position: absolute;
      width: 40px;
      height: 40px;
      border-radius: 50%;
      left: -11px;
      top: -11px;
      z-index: 1;
      transform: scale(0);
      transition: all .2s;
    }
    & span {
      display: block;
      width: 100%;
      height: 2px;
      background: #F4F4F4;
      z-index: 2;
      transition: all .2s;
    }
    &.active {
      justify-content: center;
      & span:nth-child(1) {
        transform: rotate3d(1, 1, 1, 60deg);
        position: absolute;
        top: 8px;
        left: 0;
      }
      & span:nth-child(3) {
        transform: rotate3d(1, 2, 1, -180deg);
        position: absolute;
        top: 8px;
        left: 0;
      }
      & span:nth-child(2) {
        opacity: 0;
      }
      &::after {
        transform: scale(1);
      }
    }
  }
  &__menu {
    margin: 0;
    padding: 0;
    @media (max-width: 649px) {
      display: none;
    }
    & li {
      display: inline-block;
      @media (max-width: 992px) {
        margin-left: 10px;
        margin-right: 10px;
      }
      &.active {
        & a {
          opacity: .7;
        }
      }
      & a {
        color: #fff;
        text-decoration: none;
        font-family: 'TT Norms', sans-serif;
        font-style: normal;
        font-weight: normal;
        font-size: 16px;
        line-height: 100%;
        transition: all .2s;
        @media (max-width: 1400px) {
          font-size: 11px;
        }
        &:hover {
          opacity: .7;
        }
      }
      & + li {
        margin-left: 32px;
        @media (max-width: 1400px) {
          margin-left: 10px;
          margin-right: 10px;
        }
        @media (max-width: 1140px) {
          margin-left: 0;
          margin-right: 0;
        }
        @media (max-width: 992px) {
          margin-left: 10px;
          margin-right: 10px;
        }
      }
    }
  }
}

#mainMenu {
  & .ts-content-container {
    background: #4b5561;
    max-height: calc(100vh - 72px);
    & .ts-content-item {
      display: grid;
      align-items: end;
      & > div {
        padding: 0 25px 50px 25px;
      }
      & .mainNav {
        margin-bottom: 30px;
        &__item {
          margin-bottom: 15px;
          &.active {}
          & a {
            font-family: 'TT Norms', sans-serif;
            font-style: normal;
            font-weight: 600;
            font-size: 24px;
            line-height: 110%;
            letter-spacing: -0.02em;
            color: #FFFFFF;
            text-decoration: none;
            transition: all .2s;
          }
        }
      }
      & .signin {
        margin-bottom: 30px;
        & li {
          margin-bottom: 12px;
          & a {
            font-family: 'TT Norms', sans-serif;
            font-style: normal;
            font-weight: normal;
            font-size: 15px;
            line-height: 18px;
            letter-spacing: 0.01em;
            color: #FFFFFF;
            opacity: 0.6;
            text-decoration: none;
          }
          &:last-child {
            margin-bottom: 0;
          }
        }
      }
      & .phoneBox {
        & a {
          font-family: 'TT Norms', sans-serif;
          font-style: normal;
          font-weight: normal;
          font-size: 16px;
          line-height: 100%;
          letter-spacing: -0.02em;
          color: #FFFFFF;
          text-decoration: none;
        }
        & p {
          font-family: 'TT Norms', sans-serif;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          line-height: 100%;
          color: #FFFFFF;
          opacity: 0.4;
        }
      }
    }
  }
}