﻿.my-menu-open {
  /* width: 100%; */
  /* height: 900px; */
  width: fit-content;
  z-index: 10;
}

.menu-categories {
  position: fixed;
  bottom: 0;
  left: 0;
  display: none;
  width: 100%;
  max-height: 570px;
  background: #fff;
  padding: 50px 50px 40px 50px;
  z-index: 10;
  box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  overflow-y: scroll;
}

.menu-categories-title {
  font-size: 16px;
  font-weight: 700;
  color: #333;
  margin-bottom: 27px;
  display: block;
}

.menu-categories-title:not(:first-child) {
  margin-top: 30px;
}

.menu-categories__list {
  width: 100%;
}

.menu-categories__column {
  column-count: 5;
}

.menu-categories__list-item {
  font-size: 16px;
  color: #666;
  margin: 15px 0;
  display: block;
  transition: 0.3s ease;
}

.menu-categories__list-item:hover {
  color: #5f9fff;
}

.menu_as-container {
  margin: -45px -48px -96px -48px;
}

.menu_as-container + .breadcrumbs {
  margin-top: 130px;
}

.menu_as {
  display: none;
}

@media screen and (max-width: 1536px) {
  .tiles-violet {
    position: relative;
  }

  .menu_as {
    display: block;
    width: 288px !important;
    position: absolute;
    left: 0;
    top: 0;
    background: #fff;
    /* height: 100%; */
    height: auto;
    padding: 50px 40px;
    z-index: 100;
    opacity: 0;
    pointer-events: none;
    transform: rotateY(90deg);
    transform-origin: 0 0;
    transition: 0.3s ease;
    box-shadow: 0px 10px 50px rgba(0, 0, 0, 0.1);
  }

  .menu_as.openmenu {
    opacity: 1;
    pointer-events: auto;
    transform: rotateY(0);
  }

  .menu_as .category-top-link {
    font-size: 14px;
    font-weight: 300;
  }

  .category-top-link:not(:last-child) {
    display: block;
    margin-bottom: 20px;
  }

  .menu-categories {
    position: absolute;
    left: initial;
    right: 0;
    bottom: initial;
    top: 193px;
    width: calc(100% - 288px) !important;
    box-shadow: none;
    max-height: 100%;
  }

  .menu-categories .menu-categories__column {
    column-count: 3;
  }

  .menu_as .ico {
    min-width: 20px;
    width: 20px;
    min-height: 20px;
    height: 20px;
    background-repeat: no-repeat;
    background-position-x: center;
    background-position-y: center;
    background-size: contain;
    margin-right: 12px;
  }

  .menu_as .category-top-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
  }

  .menu_as .veterinaria {
    background-image: url(../Images/icons_categories/gray/veterinaria.svg),
      url(../Images/icons_categories/blue/veterinaria.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .kosmetologia {
    background-image: url(../Images/icons_categories/gray/kosmetologia.svg),
      url(../Images/icons_categories/blue/kosmetologia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .lab {
    background-image: url(../Images/icons_categories/gray/lab.svg),
      url(../Images/icons_categories/blue/lab.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .lor {
    background-image: url(../Images/icons_categories/gray/lor.svg),
      url(../Images/icons_categories/blue/lor.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .luchevaya_diagnostic {
    background-image: url(../Images/icons_categories/gray/luchevaya_diagnostic.svg),
      url(../Images/icons_categories/blue/luchevaya_diagnostic.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .mebel {
    background-image: url(../Images/icons_categories/gray/mebel.svg),
      url(../Images/icons_categories/blue/mebel.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .neonatologia {
    background-image: url(../Images/icons_categories/gray/neonatologia.svg),
      url(../Images/icons_categories/blue/neonatologia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .oftalmologia {
    background-image: url(../Images/icons_categories/gray/oftalmologia.svg),
      url(../Images/icons_categories/blue/oftalmologia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .patanomia {
    background-image: url(../Images/icons_categories/gray/patanomia.svg),
      url(../Images/icons_categories/blue/patanomia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .proktologia {
    background-image: url(../Images/icons_categories/gray/proktologia.svg),
      url(../Images/icons_categories/blue/proktologia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .reabilitacia {
    background-image: url(../Images/icons_categories/gray/reabilitacia.svg),
      url(../Images/icons_categories/blue/reabilitacia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .slujba_crovi {
    background-image: url(../Images/icons_categories/gray/slujba_crovi.svg),
      url(../Images/icons_categories/blue/slujba_crovi.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .sterelizacia {
    background-image: url(../Images/icons_categories/gray/sterelizacia.svg),
      url(../Images/icons_categories/blue/sterelizacia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .stomatologia {
    background-image: url(../Images/icons_categories/gray/stomatologia.svg),
      url(../Images/icons_categories/blue/stomatologia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .urologia {
    background-image: url(../Images/icons_categories/gray/urologia.svg),
      url(../Images/icons_categories/blue/urologia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .fizio {
    background-image: url(../Images/icons_categories/gray/fizio.svg),
      url(../Images/icons_categories/blue/fizio.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .functional_diagnostic {
    background-image: url(../Images/icons_categories/gray/functional_diagnostic.svg),
      url(../Images/icons_categories/blue/functional_diagnostic.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .hirurgia {
    background-image: url(../Images/icons_categories/gray/hirurgia.svg),
      url(../Images/icons_categories/blue/hirurgia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .endoskopia {
    background-image: url(../Images/icons_categories/gray/endoskopia.svg),
      url(../Images/icons_categories/blue/endoskopia.svg);
    background-size: contain, 0px 0px;
  }

  .menu_as .dot {
    background-image: url(../Images/icons_categories/gray/dot.svg),
      url(../Images/icons_categories/blue/dot.svg);
    background-size: 20px 20px, 0px 0px !important;
  }

  .menu_as .odezhda {
    background-image: url(../Images/icons_categories/gray/odezhda.svg),
      url(../Images/icons_categories/blue/odezhda.svg);
    background-size: contain, 0px 0px !important;
  }

  .menu_as .oborudovanie {
    background-image: url(../Images/icons_categories/gray/oborudovanie.svg),
      url(../Images/icons_categories/blue/oborudovanie.svg);
    background-size: contain, 0px 0px !important;
  }

  .menu_as .optika {
    background-image: url(../Images/icons_categories/gray/optika.svg),
      url(../Images/icons_categories/blue/optika.svg);
    background-size: contain, 0px 0px !important;
  }

  .menu_as .apteka {
    background-image: url(../Images/icons_categories/gray/apteka_gray.svg),
      url(../Images/icons_categories/blue/apteka_blue.svg);
    background-size: contain, 0px 0px !important;
  }

  .menu_as .vitamins {
    background-image: url(../Images/icons_categories/gray/vitamins_gray.svg),
      url(../Images/icons_categories/blue/vitamins_blue.svg);
    background-size: contain, 0px 0px !important;
  }

  .menu_as .dezsredstva {
    background-image: url(../Images/icons_categories/gray/dezsredstva_gray.svg),
      url(../Images/icons_categories/blue/dezsredstva_blue.svg);
    background-size: contain, 0px 0px !important;
  }

  .menu_as .kosmetika {
    background-image: url(../Images/icons_categories/gray/kosmetika_gray.svg),
      url(../Images/icons_categories/blue/kosmetika_blue.svg);
    background-size: contain, 0px 0px !important;
  }

  /* иконки верхнего меню */
  .menu_as .category-top-link:hover > .acusherstvo {
    background-image: url(../Images/icons_categories/blue/acusherstvo.svg),
      url(../Images/icons_categories/gray/acusherstvo.svg);
  }

  .menu_as .category-top-link:hover > .anasteziologia {
    background-image: url(../Images/icons_categories/blue/anasteziologia.svg),
      url(../Images/icons_categories/gray/anasteziologia.svg);
  }

  .menu_as .category-top-link:hover > .veterinaria {
    background-image: url(../Images/icons_categories/blue/veterinaria.svg),
      url(../Images/icons_categories/gray/veterinaria.svg);
  }

  .menu_as .category-top-link:hover > .kosmetologia {
    background-image: url(../Images/icons_categories/blue/kosmetologia.svg),
      url(../Images/icons_categories/gray/kosmetologia.svg);
  }

  .menu_as .category-top-link:hover > .lab {
    background-image: url(../Images/icons_categories/blue/lab.svg),
      url(../Images/icons_categories/gray/lab.svg);
  }

  .menu_as .category-top-link:hover > .lor {
    background-image: url(../Images/icons_categories/blue/lor.svg),
      url(../Images/icons_categories/gray/lor.svg);
  }

  .menu_as .category-top-link:hover > .luchevaya_diagnostic {
    background-image: url(../Images/icons_categories/blue/luchevaya_diagnostic.svg),
      url(../Images/icons_categories/gray/luchevaya_diagnostic.svg);
  }

  .menu_as .category-top-link:hover > .mebel {
    background-image: url(../Images/icons_categories/blue/mebel.svg),
      url(../Images/icons_categories/gray/mebel.svg);
  }

  .menu_as .category-top-link:hover > .neonatologia {
    background-image: url(../Images/icons_categories/blue/neonatologia.svg),
      url(../Images/icons_categories/gray/neonatologia.svg);
  }

  .menu_as .category-top-link:hover > .oftalmologia {
    background-image: url(../Images/icons_categories/blue/oftalmologia.svg),
      url(../Images/icons_categories/gray/oftalmologia.svg);
  }

  .menu_as .category-top-link:hover > .patanomia {
    background-image: url(../Images/icons_categories/blue/patanomia.svg),
      url(../Images/icons_categories/gray/patanomia.svg);
  }

  .menu_as .category-top-link:hover > .proktologia {
    background-image: url(../Images/icons_categories/blue/proktologia.svg),
      url(../Images/icons_categories/gray/proktologia.svg);
  }

  .menu_as .category-top-link:hover > .reabilitacia {
    background-image: url(../Images/icons_categories/blue/reabilitacia.svg),
      url(../Images/icons_categories/gray/reabilitacia.svg);
  }

  .menu_as .category-top-link:hover > .slujba_crovi {
    background-image: url(../Images/icons_categories/blue/slujba_crovi.svg),
      url(../Images/icons_categories/gray/slujba_crovi.svg);
  }

  .menu_as .category-top-link:hover > .sterelizacia {
    background-image: url(../Images/icons_categories/blue/sterelizacia.svg),
      url(../Images/icons_categories/gray/sterelizacia.svg);
  }

  .menu_as .category-top-link:hover > .stomatologia {
    background-image: url(../Images/icons_categories/blue/stomatologia.svg),
      url(../Images/icons_categories/gray/stomatologia.svg);
  }

  .menu_as .category-top-link:hover > .urologia {
    background-image: url(../Images/icons_categories/blue/urologia.svg),
      url(../Images/icons_categories/gray/urologia.svg);
  }

  .menu_as .category-top-link:hover > .fizio {
    background-image: url(../Images/icons_categories/blue/fizio.svg),
      url(../Images/icons_categories/gray/fizio.svg);
  }

  .menu_as .category-top-link:hover > .functional_diagnostic {
    background-image: url(../Images/icons_categories/blue/functional_diagnostic.svg),
      url(../Images/icons_categories/gray/functional_diagnostic.svg);
  }

  .menu_as .category-top-link:hover > .hirurgia {
    background-image: url(../Images/icons_categories/blue/hirurgia.svg),
      url(../Images/icons_categories/gray/hirurgia.svg);
  }

  .menu_as .category-top-link:hover > .endoskopia {
    background-image: url(../Images/icons_categories/blue/endoskopia.svg),
      url(../Images/icons_categories/gray/endoskopia.svg);
  }

  .menu_as .category-top-link:hover > .dot {
    background-image: url(../Images/icons_categories/blue/dot.svg),
      url(../Images/icons_categories/gray/dot.svg);
    background-size: 20px 20px !important;
  }

  .menu_as .category-top-link:hover > .odezhda {
    background-image: url(../Images/icons_categories/blue/odezhda.svg),
      url(../Images/icons_categories/gray/odezhda.svg);
  }

  .menu_as .category-top-link:hover > .oborudovanie {
    background-image: url(../Images/icons_categories/blue/oborudovanie.svg),
      url(../Images/icons_categories/gray/oborudovanie.svg);
  }

  .menu_as .category-top-link:hover > .optika {
    background-image: url(../Images/icons_categories/blue/optika.svg),
      url(../Images/icons_categories/gray/optika.svg);
  }

  .menu_as .category-top-link:hover > .apteka {
    background-image: url(../Images/icons_categories/blue/apteka_blue.svg),
      url(../Images/icons_categories/gray/apteka_gray.svg);
  }

  .menu_as .category-top-link:hover > .vitamins {
    background-image: url(../Images/icons_categories/blue/vitamins_blue.svg),
      url(../Images/icons_categories/gray/vitamins_gray.svg);
  }

  .menu_as .category-top-link:hover > .dezsredstva {
    background-image: url(../Images/icons_categories/blue/dezsredstva_blue.svg),
      url(../Images/icons_categories/gray/dezsredstva_gray.svg);
  }

  .menu_as .category-top-link:hover > .kosmetika {
    background-image: url(../Images/icons_categories/blue/kosmetika_blue.svg),
      url(../Images/icons_categories/gray/kosmetika_gray.svg);
  }
}

@media screen and (max-width: 1200px) {
  .menu-categories .menu-categories__column {
    column-count: 2;
  }
}
