/**
 * Стиль 2
 * 
 * «Гамбургер» превращается в «x» (класс htx). 
 * Берется исходное состояние, затем полоски плавно перемещаются в центр 
 * и трансформируются в «x».
*/
.cmn-toggle-switch__htx {
  background-color: transparent;
}

.cmn-toggle-switch__htx span {
  -webkit-transition: background 0 0.3s;
 transition: background 0 0.3s;
}

.cmn-toggle-switch__htx span::before,
.cmn-toggle-switch__htx span::after {
  -webkit-transition-duration: 0.3s, 0.3s;
 transition-duration: 0.3s, 0.3s;
  -webkit-transition-delay: 0.3s, 0;
 transition-delay: 0.3s, 0;
}

.cmn-toggle-switch__htx span::before {
  -webkit-transition-property: top, -webkit-transform;
 transition-property: top, transform;
}

.cmn-toggle-switch__htx span::after {
  -webkit-transition-property: bottom, -webkit-transform;
 transition-property: bottom, transform;
}

/* активное состояние, т.е. меню открыто */
.cmn-toggle-switch__htx.active {
  background-color: transparent;
}

.cmn-toggle-switch__htx.active span {
  background: transparent;
}

.cmn-toggle-switch__htx.active span::before {
  top: 0;
  -webkit-transform: rotate(45deg);
 -ms-transform: rotate(45deg);
 transform: rotate(45deg);
}

.cmn-toggle-switch__htx.active span::after {
  bottom: 0;
  -webkit-transform: rotate(-45deg);
 -ms-transform: rotate(-45deg);
 transform: rotate(-45deg);
}

.cmn-toggle-switch__htx.active span::before,
.cmn-toggle-switch__htx.active span::after {
  -webkit-transition-delay: 0, 0.3s;
 transition-delay: 0, 0.3s;
}