.main-map {
  position: relative;
  padding: 60px 0 0 0;
  background: #ffffff; }
  @media only screen and (max-width: 992px) {
    .main-map {
      padding: 30px 0 0 0; } }
  .main-map__wrapper {
    position: relative; }
    .main-map__wrapper--list .main-map__top-item {
      color: #282828; }
      .main-map__wrapper--list .main-map__top-item--map {
        color: #c2c9cf;
        cursor: pointer; }
      .main-map__wrapper--list .main-map__top-item--list {
        color: #282828;
        cursor: default; }
    .main-map__wrapper--list .main-map__decor i {
      left: 16px; }
  .main-map__title {
    position: relative;
    text-align: center;
    margin: 0 auto;
    max-width: 1340px;
    min-width: 320px;
    padding: 0 20px;
    width: 100%;
    font: bold 50px/130% "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    margin-bottom: 20px; }
    @media only screen and (max-width: 768px) {
      .main-map__title {
        padding: 0 10px; } }
    @media only screen and (max-width: 992px) {
      .main-map__title {
        font: bold 30px/130% "Roboto Condensed", sans-serif; } }
  .main-map__top {
    position: relative;
    margin: 0 auto;
    max-width: 1340px;
    min-width: 320px;
    padding: 0 20px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 30px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    @media only screen and (max-width: 768px) {
      .main-map__top {
        padding: 0 10px; } }
    @media only screen and (max-width: 768px) {
      .main-map__top {
        margin-bottom: 20px; } }
  .main-map__top-item {
    position: relative;
    padding: 0 20px 0 0;
    text-transform: uppercase;
    font: bold 18px/100% "Roboto Condensed", sans-serif;
    -webkit-transition: color .3s ease;
    -o-transition: color .3s ease;
    transition: color .3s ease;
    cursor: pointer; }
    .main-map__top-item:last-child {
      padding: 0 0 0 20px; }
    .main-map__top-item--map {
      color: #282828;
      cursor: default; }
    .main-map__top-item--list {
      color: #c2c9cf;
      cursor: pointer; }
  .main-map__decor {
    position: relative;
    width: 40px;
    height: 24px;
    -webkit-border-radius: 24px;
    border-radius: 24px;
    background: #d2d6db;
    cursor: pointer;
    z-index: 1; }
    .main-map__decor i {
      position: absolute;
      left: 0;
      width: 24px;
      height: 24px;
      -webkit-border-radius: 24px;
      border-radius: 24px;
      background: #ffffff;
      -webkit-box-shadow: 0 1px 4px 0 #caced2;
      box-shadow: 0 1px 4px 0 #caced2;
      cursor: pointer;
      -webkit-transition: left .3s ease;
      -o-transition: left .3s ease;
      transition: left .3s ease; }
  .main-map__map {
    position: relative;
    width: 100%;
    display: block; }
  .main-map__list {
    position: relative;
    width: 100%;
    display: none; }
  .main-map__map-wrap {
    position: relative;
    margin: 0 -10px; }
  .main-map__map-list {
    position: relative;
    margin: 0 auto;
    max-width: 1340px;
    min-width: 320px;
    padding: 0 20px;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    margin-bottom: 10px; }
    @media only screen and (max-width: 768px) {
      .main-map__map-list {
        padding: 0 10px; } }
    @media only screen and (max-width: 1200px) {
      .main-map__map-list {
        -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap; } }
  .main-map__map-item {
    position: relative;
    width: 25%;
    padding: 0 10px;
    margin: 0 0 10px 0; }
    @media only screen and (max-width: 1200px) {
      .main-map__map-item {
        width: 50%; } }
    @media only screen and (max-width: 768px) {
      .main-map__map-item {
        width: 100%; } }
    .main-map__map-item--difference {
      color: #de5364; }
      .main-map__map-item--difference .main-map__map-title:before {
        background: #de5364; }
    .main-map__map-item--agro {
      color: #95be69; }
      .main-map__map-item--agro .main-map__map-title:before {
        background: #95be69; }
    .main-map__map-item--logistics {
      color: #4a90e2; }
      .main-map__map-item--logistics .main-map__map-title:before {
        background: #4a90e2; }
    .main-map__map-item--prod {
      color: #444577; }
      .main-map__map-item--prod .main-map__map-title:before {
        background: #444577; }
  .main-map__map-title {
    height: 100%;
    width: 100%;
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    background: #fafafa;
    color: inherit;
    padding: 20px 23px 20px 15px;
    font: bold 16px/110% "Roboto Condensed", sans-serif;
    text-transform: uppercase;
    cursor: pointer;
    -webkit-transition: background-color .4s;
    -o-transition: background-color .4s;
    transition: background-color .4s; }
    @media only screen and (max-width: 992px) {
      .main-map__map-title {
        font: bold 16px/110% "Roboto Condensed", sans-serif;
        padding: 10px 20px 10px 15px; } }
    @media only screen and (max-width: 768px) {
      .main-map__map-title {
        font: bold 14px/110% "Roboto Condensed", sans-serif;
        padding: 8px 20px 8px 15px; } }
    .main-map__map-title:hover {
      background: #f5f5f5; }
    .main-map__map-title:before {
      content: '';
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      width: 6px;
      -webkit-transition: width .5s, -webkit-box-shadow .5s;
      transition: width .5s, -webkit-box-shadow .5s;
      -o-transition: width .5s, box-shadow .5s;
      transition: width .5s, box-shadow .5s;
      transition: width .5s, box-shadow .5s, -webkit-box-shadow .5s;
      -webkit-box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0);
      box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0); }
    .main-map__map-title span {
      -webkit-transition: color .4s;
      -o-transition: color .4s;
      transition: color .4s;
      position: relative; }
    .main-map__map-title--active {
      color: #fff; }
      .main-map__map-title--active:before {
        width: 100%; }
      .main-map__map-title--active:hover:before {
        -webkit-box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.08);
        box-shadow: inset 0 0 0 50px rgba(0, 0, 0, 0.08); }
      .main-map__map-title--active:after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        right: 9px;
        width: 9px;
        -webkit-transition: width .5s;
        -o-transition: width .5s;
        transition: width .5s;
        background: url(/local/static/build/img/svg/disable-map-filter.svg) no-repeat center; }
  .main-map__maps {
    height: 520px;
    position: relative;
    width: 100%; }
    @media only screen and (max-width: 992px) {
      .main-map__maps {
        height: 440px; } }
    @media only screen and (max-width: 768px) {
      .main-map__maps {
        height: 300px; } }

.map {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0; }

.main-map-list {
  position: relative;
  display: block;
  margin: 0 auto;
  max-width: 1340px;
  min-width: 320px;
  padding: 0 20px;
  width: 100%; }
  @media only screen and (max-width: 768px) {
    .main-map-list {
      padding: 0 10px; } }
  .main-map-list__wrapper {
    position: relative;
    margin: 0 -10px; }
  .main-map-list__grid {
    position: relative;
    width: 100%;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 0 0 60px 0; }
    @media only screen and (max-width: 992px) {
      .main-map-list__grid {
        padding: 0 0 30px 0; } }
  .main-map-list__item {
    position: relative;
    width: 16.6666666667%;
    padding: 0 10px 20px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-transition: opacity .5s;
    -o-transition: opacity .5s;
    transition: opacity .5s; }
    @media only screen and (max-width: 992px) {
      .main-map-list__item {
        width: 33.3333333%; } }
    @media only screen and (max-width: 768px) {
      .main-map-list__item {
        width: 50%; } }
    .main-map-list__item:hover {
      opacity: .7; }
  .main-map-list__item-wrap {
    position: relative;
    width: 100%;
    padding: 20px;
    height: 120px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center; }
    .main-map-list__item-wrap img {
      display: block;
      margin: 0 auto;
      mix-blend-mode: multiply;
      max-height: 100%;
      max-width: 100%;
      position: absolute;
      top: 50%;
      left: 50%;
      -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
      transform: translate(-50%, -50%); }
      @supports (display: flex) {
        .main-map-list__item-wrap img {
          position: static;
          -webkit-transform: none;
          -ms-transform: none;
          transform: none; } }