/* Menu Toggles */

.menu-icon {
  display: block;
  min-width: 30px;
  cursor: pointer;
  margin: 0px 15px;

}
.menu-icon span {
  position: relative;
  display: block;
  height: 2px;
  width: 100%;
  margin-top: 6px;
  margin-bottom: 6px;
  transition: all .25s;
  background-color: var(--coc-header-item-sub-color);
}	  
.menu-icon[aria-expanded="true"] span:first-child {
  transform: rotate(45deg) translate(-1px, 6px);
}
.menu-icon[aria-expanded="true"] span:nth-child(2) {
  display:none;
}
.menu-icon[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg) translate(-1px, -6px);
}

/* Left arrow */
.menu-icon.arrow-left span:first-child {
  width:15px;
}
.menu-icon[aria-expanded="true"].arrow-left span:first-child {
  transform: rotate(-45deg) translate(-5px, 1px);
  width:12px;

}
.menu-icon.arrow-left[aria-expanded="true"] span:nth-child(2) {
  display:block;
}

.menu-icon[aria-expanded="true"].arrow-left span:last-child {
  transform: rotate(45deg) translate(-5px, -1px);
  width:12px;
}
/* Left-right arrow */
/*.menu-icon .arrow-left span:first-child {*/
/*  transform: rotate(45deg) translate(12px, -6px);*/
/*  width:12px;*/
/*  margin-right:auto;*/

/*}*/
/*.menu-icon .arrow-left span:last-child {*/
/*  transform: rotate(-45deg) translate(12px, 6px);*/
/*  width:12px;*/
/*  margin-right: auto;*/
/*}*/


/* right arrow */
.menu-icon.arrow-right span:first-child {
  width:15px; 
  margin-left:auto;
}
.menu-icon.arrow-right[aria-expanded="true"] span:first-child {
  transform: rotate(45deg) translate(14px, -8px);
  width:12px;
  margin-left: unset;
  margin-right:auto;
  left:5px;
}
.menu-icon.arrow-right[aria-expanded="true"] span:nth-child(2) {
  display:block;
}
.menu-icon.arrow-right[aria-expanded="true"] span:last-child {
  transform: rotate(-45deg) translate(14px, 8px);
  width:12px;
  margin-right: auto;
  left:5px;
}

/* dots to X */
.circle {
  width: 4px;
  height: 4px;
  margin: 4px;
  background: black;
  border-radius: 50%;
  display: block;
}
.menu-icon--Vdots {
  display: inline-block;
  flex-direction: column;
  position: relative;
  transition: all 300ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
  padding: 10px 8px;
  margin: 0px 10px;
}
.menu-icon--Vdots .circle:nth-child(4),
.menu-icon--Vdots .circle:nth-child(5) {
  position: absolute;
  opacity: 0;
  bottom: 18px;
}
.menu-icon--Vdots .circle:nth-child(4) {
  left: 0px;
}
.menu-icon--Vdots .circle:nth-child(5) {
  left: 16px;
}
.menu-icon--Vdots[aria-expanded="true"] {
  transform: rotate(45deg);
}
.menu-icon--Vdots[aria-expanded="true"] .circle, .menu-icon--Vdots:focus .circle {
  opacity: 1;
}
/* Menu Toggles End */