/* кнопка меню*/

.mainMenuButton {
  position: fixed;
  top: 1px;
  left: 1px;
  width: 54px;
  height: 54px;
  z-index: 100;
  box-sizing: border-box;
  padding: 18px;
}

.mainMenuButton > div {
  width: 18px;
  height: 2px;
  background-color: white;
  margin-bottom: 1px;
  margin: 3px auto 0 auto;
  transition: transform;
  transition-duration: 0.5s;
}

.mainMenuButton.toArrow > div:nth-child(1) {
  transform-origin: 50% 7px; 
}

.mainMenuButton.toArrow > div:nth-child(2) {
  transform-origin: 50% 50%; 
}

.mainMenuButton.toArrow > div:nth-child(3) {
  transform-origin: 50% -5px; 
}

.mainMenuButton.toCross > div:nth-child(1) {
  transform-origin: 50% 7px; 
}

.mainMenuButton.toCross > div:nth-child(2) {
  transform-origin: 50% 50%; 
}

.mainMenuButton.toCross > div:nth-child(3) {
  transform-origin: 50% -5px; 
}

/* анимация стелки */

.mainMenuButton.toArrow.backBtn > div:nth-child(1) {
  transform-origin: 50% 7px; 
  transform: rotate(225deg) translateY(2px) scaleX(0.7);
}

.mainMenuButton.toArrow.backBtn > div:nth-child(2) {
  transform-origin: 50% 50%;
  transform: rotate(180deg) translateX(-3px);
}

.mainMenuButton.toArrow.backBtn > div:nth-child(3) {
  transform-origin: 50% -5px; 
  transform: rotate(135deg) translateY(-2px) scaleX(0.7);
}

/* анимация стрелки */

.mainMenuButton.toCross.menuOpened > div:nth-child(1) {
  transform-origin: 50% 7px;
  transform: rotate(225deg) translateX(0px) translateY(6px) scale(0.9);
}

.mainMenuButton.toCross.menuOpened > div:nth-child(2) {
  transform-origin: 50% 50%;
  transform: rotate(180deg) scaleX(0);
}

.mainMenuButton.toCross.menuOpened > div:nth-child(3) {
  transform-origin: 50% -5px;
  transform: rotate(135deg) translateX(1px) translateY(-7px) scale(0.9);
}