@charset "UTF-8";
#nav-icon4 {
  width: 45px;
  height: 28px;
  position: relative;
  /* ОСТАВЛЯЕМ выравнивание блока иконки по левому краю */
  margin: 15px 0;
  transform: rotate(0deg);
  transition: 0.5s ease-in-out;
  cursor: pointer;
  transform-style: preserve-3d;
  -webkit-tap-highlight-color: transparent;
}

#nav-icon4 span {
  display: block;
  position: absolute;
  height: 4px;
  background: #ff732d;
  border-radius: 2px;
  opacity: 1;
  transform: rotate(0deg);
  /* ВАЖНО: Возвращаем точку трансформации в центр для ровной анимации крестика */
  transform-origin: center center;
  /* Обновляем transition */
  transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out, top 0.25s ease-in-out, left 0.25s ease-in-out, width 0.25s ease-in-out;
}

/* Верхняя палочка */
#nav-icon4 span:nth-child(1) {
  top: 0px;
  width: 36px;
  /* Возвращаем центрирование КОРОТКОЙ линии внутри контейнера */
  left: 4.5px;
}

/* Средняя палочка */
#nav-icon4 span:nth-child(2) {
  top: 12px;
  width: 45px; /* Полная ширина */
  /* Начинается слева, т.к. ширина равна контейнеру */
  left: 4.5px;
}

/* Нижняя палочка */
#nav-icon4 span:nth-child(3) {
  top: 24px;
  width: 36px;
  /* Возвращаем центрирование КОРОТКОЙ линии внутри контейнера */
  left: 4.5px;
}

/* Анимация в крестик (.is-active)*/
#nav-icon4.is-active span:nth-child(1) {
  /* Используем translateY для смещения к центру и rotate */
  /* Эта трансформация не зависит от left: 4.5px, она применяется к текущему положению */
  transform: translateY(12px) rotate(45deg);
  /* Ширину можно не менять, чтобы X был из линий разной длины, как бургер */
}

#nav-icon4.is-active span:nth-child(2) {
  /* Исчезает через масштаб */
  transform: scaleX(0);
  opacity: 0;
}

#nav-icon4.is-active span:nth-child(3) {
  /* Используем translateY для смещения к центру и rotate */
  transform: translateY(-12px) rotate(-45deg);
  /* Ширину можно не менять */
}

.hamburger {
  position: relative;
  z-index: 1;
  display: block;
}

/*
@media (max-width: 1536px) and (min-width: 769px) {//notebook laptop
  #nav-icon4 {
    width: 30px;
    height: 19px;
  }
  #nav-icon4 span{height: 3px;}
}
  */
@media (max-width: 1536px) {
  #nav-icon4 {
    width: 24px;
    height: 24px;
  }
  #nav-icon4 span {
    height: 3px;
  }
  #nav-icon4 span:nth-child(1) {
    top: 0px;
    width: 24px;
  }
  #nav-icon4 span:nth-child(2) {
    top: 10px;
    width: 34px;
  }
  #nav-icon4 span:nth-child(3) {
    top: 20px;
    width: 24px;
  }
  #nav-icon4.is-active span:nth-child(1) {
    /* Используем translateY для смещения к центру и rotate */
    /* Эта трансформация не зависит от left: 4.5px, она применяется к текущему положению */
    transform: translateY(10px) rotate(45deg);
    /* Ширину можно не менять, чтобы X был из линий разной длины, как бургер */
  }
  #nav-icon4.is-active span:nth-child(2) {
    /* Исчезает через масштаб */
    transform: scaleX(0);
    opacity: 0;
  }
  #nav-icon4.is-active span:nth-child(3) {
    /* Используем translateY для смещения к центру и rotate */
    transform: translateY(-10px) rotate(-45deg);
    /* Ширину можно не менять */
  }
}/*# sourceMappingURL=hamb.css.map */