.arrowComercial {
  position: relative;
  background: white;
  width: 1rem;
  height: 0.08rem;
  transition: 0.5s;
  border-radius: 1rem;
  transform-origin: right center;
  transform: rotate(180deg);
  margin-left: 15px;
}
.arrowComercial:before {
  transform: rotate(-35deg);
}
.arrowComercial:after {
  transform: rotate(35deg);
}
.arrowComercial:before,
.arrowComercial:after {
  display: block;
  content: "";
  position: relative;
  left: 0;
  background: white;
  width: 0.5rem;
  height: 0.04rem;
  transform-origin: 0.07rem center;
  transition: 0.5s;
  border-radius: 1rem;
}
.switch.right .arrowComercial:before,
.switch.right .arrowComercial:after {
  left: 2rem;
}
.switch.right .arrowComercial:before {
  transform: rotate(140deg);
}
.switch.right .arrowComercial:after {
  transform: rotate(-140deg);
}
.flip {
  transform: translateZ(1rem) perspective(600);
}
.flip.right {
  transform: translateZ(1rem) perspective(600) rotateY(180deg);
}