.alfavit {
  border-bottom: 1px solid #f5f5f5;
  z-index: 10 !important;
  position: relative; }
  @media screen and (max-width: 999px) {
    .alfavit {
      padding: 0 50px; } }
  @media screen and (max-width: 749px) {
    .alfavit {
      padding: 0;
        display: none;} }
  .alfavit__container {
    position: relative; }
  .alfavit__literals {
    display: flex;
    justify-content: space-between;
    width: 100%; }
    @media screen and (max-width: 999px) {
      .alfavit__literals {
        flex-wrap: wrap; } }
    .alfavit__literals_item {
      padding: 0 10px;
      cursor: pointer; }
      @media screen and (max-width: 999px) {
        .alfavit__literals_item {
          box-sizing: border-box;
          width: 7%;
          white-space: nowrap; } }
      @media screen and (max-width: 749px) {
        .alfavit__literals_item {
          width: 13%; } }
      .alfavit__literals_item span {
        line-height: 50px;
        display: block;
        text-align: center;
        font-weight: bold;
        text-transform: uppercase; }
        @media screen and (max-width: 999px) {
          .alfavit__literals_item span {
            line-height: 30px; } }
      .alfavit__literals_item:first-child {
        cursor: initial; }
        @media screen and (max-width: 999px) {
          .alfavit__literals_item:first-child {
            width: 100%;
            text-align: center; } }
        .alfavit__literals_item:first-child span {
          font-weight: normal;
          text-transform: none; }
        .alfavit__literals_item:first-child:hover span {
          color: #555; }
      .alfavit__literals_item .active .alfavit__literals_popup, .alfavit__literals_item:hover .alfavit__literals_popup {
        display: block; }
      .alfavit__literals_item .active span,
      .alfavit__literals_item:hover span,
      .alfavit__literals_popup_container b {
        color: #eb3f42; }
    .alfavit__literals_popup {
      display: none;
      position: absolute;
      left: 0;
      width: 100%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
      background: #fff;
      padding: 10px;
      box-sizing: border-box;
      z-index: 100; }
      .alfavit__literals_popup_container {
        display: flex;
        flex-wrap: wrap; }
        .alfavit__literals_popup_container > div {
          width: 20%;
          padding: 5px 0; }
          @media screen and (max-width: 999px) {
            .alfavit__literals_popup_container > div {
              width: 33%; } }
          @media screen and (max-width: 749px) {
            .alfavit__literals_popup_container > div {
              width: 50%; } }