.xlines { 
	display: inline-block; 
	margin: 0 auto;
}
.xtrigger { cursor: pointer; }
.xlines {
	height: 40px;
	width: 40px;
	position: relative;
}
.xlines>div, .xlines>div:before, .xlines>div:after {
  content: "";
  position: absolute;
  height: 2px;
  width: 70%;
  background-color: black;
}
.xlines>div {
	left: 50%; top: 50%;
	transform: translate(-50%, -50%);
}

.xlines>div:before, .xlines>div:after {
	width: 100%;
}
.xlines>div:before {
	top: -8px;
}
.xlines>div:after {
	top: 8px;
}

.xlines.changeBG {
	transition: background-color ease-in-out 0.3s;
}
.xlines.changeBG.active {
	background-color: var(--color-sidebarbg);
}

/* TO X VALUE */
  .xmenu>div
  , .toX>div {
	transition: background-color ease 0.0s 0.3s;
  }
  .xmenu>div:before, .xmenu>div:after
  , .toX>div:before, .toX>div:after {

    transition: transform ease 0.5s, top ease-in-out 0.2s 0.3s;
  }

  .xmenu:hover>div
  , .toX.active>div {
    background-color: transparent;
    transition: background-color ease 0s 0.2s;
  }
  .xmenu:hover>div:before, .xmenu:hover>div:after
  , .toX.active>div:before, .toX.active>div:after{
    top: 0px;
    background-color: white;
    transition: top ease-in-out 0.2s, transform ease 0.3s 0.2s;
  }
  .xmenu:hover>div:before
  , .toX.active>div:before {
    transform: rotate(-45deg);
  }
  .xmenu:hover>div:after
  , .toX.active>div:after {
    transform: rotate(45deg);
  }
/* END */

/* TO DOWN VALUE */
  .downmenu>div,
  .toDown>div {
    transition: all ease 0.2s 0.3s;
  }
  .downmenu>div:before, .downmenu>div:after
  ,.toDown>div:before, .toDown>div:after {
    transition: top ease-in-out 0.2s 0.5s,
                margin-left ease-in-out 0.2s,
                width ease-in-out 0.2s 0.2s,
                transform ease-in-out 0.2s;
  }

  .downmenu:hover>div,
  .toDown.active>div {
    transform: rotate(90deg);
    left: 10%;
    transition: all ease 0.2s;
  }
  .downmenu:hover>div:before, .downmenu:hover>div:after
  , .toDown.active>div:before, .toDown.active>div:after {
    top: 0px; width: 60%; margin-left: 38%;
    transition: top ease-in-out 0.2s,
                margin-left ease-in-out 0.2s 0.3s,
                width ease-in-out 0.2s 0.3s,
                transform ease-in-out 0.2s 0.3s;
  }
  .downmenu:hover>div:before
  , .toDown.active>div:before {
    transform: rotate(45deg) translate(-22%,-330%);
  }
  .downmenu:hover>div:after
  , .toDown.active>div:after {
    transform: rotate(-45deg) translate(-22%,330%);
  }
/* END */

/* TO RIGHT VALUE */
  .rightmenu>div:before, .rightmenu>div:after
  , .toRight>div:before, .toRight>div:after {
    transition: top ease-in-out 0.2s 0.5s,
                margin-left ease-in-out 0.2s,
                width ease-in-out 0.2s 0.2s,
                transform ease-in-out 0.2s;
  }

  .rightmenu:hover>div:before, .rightmenu:hover>div:after
  , .toRight.active>div:before, .toRight.active>div:after {
    top: 0%; width: 60%; margin-left: 38%;
    transition: top ease-in-out 0.2s,
                margin-left ease-in-out 0.2s 0.3s,
                width ease-in-out 0.2s 0.3s,
                transform ease-in-out 0.2s 0.3s;
  }
  .rightmenu:hover>div:before
  , .toRight.active>div:before {
   transform: rotate(45deg) translate(-22%,-330%);
  }
  .rightmenu:hover>div:after
  , .toRight.active>div:after {
    transform: rotate(-45deg) translate(-22%,330%);
  }
/* END */

/* TO leftmenu VALUE */
  .leftmenu>div:before, .leftmenu>div:after 
  , .toLeft>div:before, .toLeft>div:after {
    transition: top ease-in-out 0.2s 0.5s,
                margin-left ease-in-out 0.2s,
                width ease-in-out 0.2s 0.2s,
                transform ease-in-out 0.2s;
  }

  .leftmenu:hover>div:before, .leftmenu:hover>div:after 
  , .toLeft.active>div:before, .toLeft.active>div:after {
    top: 0%; width: 60%;
    transition: top ease-in-out 0.2s,
                margin-left ease-in-out 0.2s 0.3s,
                width ease-in-out 0.2s 0.3s,
                transform ease-in-out 0.2s 0.3s;
  }
  .leftmenu:hover>div:before 
  , .toLeft.active>div:before {
   transform: rotate(45deg) translate(22%,330%);
  }
  .leftmenu:hover>div:after 
  , .toLeft.active>div:after {
    transform: rotate(-45deg) translate(22%,-330%);
  }
/* END */

/* TO leftmenu VALUE */
  .upmenu>div 
  , .toUp>div {
    transition: all ease 0.2s 0.3s;
  }
  .upmenu>div:before, .upmenu>div:after 
  , .toUp>div:before, .toUp>div:after {
    transition: top ease-in-out 0.2s 0.5s,
                margin-left ease-in-out 0.2s,
                width ease-in-out 0.2s 0.2s,
                transform ease-in-out 0.2s;
  }

  .upmenu:hover>div 
  , .toUp.active>div {
    transform: rotate(90deg);
    left: 10%;
    transition: all ease 0.2s;
  }
  .upmenu:hover>div:before, .upmenu:hover>div:after 
  , .toUp.active>div:before, .toUp.active>div:after {
    top: 0%; width: 60%;
    transition: top ease-in-out 0.2s,
                margin-left ease-in-out 0.2s 0.3s,
                width ease-in-out 0.2s 0.3s,
                transform ease-in-out 0.2s 0.3s;
  }
  .upmenu:hover>div:before 
  , .toUp.active>div:before {
   transform: rotate(45deg) translate(22%,330%);
  }
  .upmenu:hover>div:after 
  , .toUp.active>div:after {
    transform: rotate(-45deg) translate(22%,-330%);
  }
/* END */
.x-burgers {}
.x { 
  position: relative; 
  height: 40px; width: 40px; 
  background-color: transparent; 
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.5s ease-in-out;
}
.x > div { position: relative; width: 70%; }
.x > div, .x > div:before, .x > div:after { 
  content: ' '; 
  background-color: var(--color-white);
  left: 0;
  height: 4px; 
  transition: background-color 0.25s ease-in-out, top 0.25s ease-in-out 0.25s, transform 0.25s ease-in-out; 
}
.x > div:before, .x > div:after { 
  position: absolute; width: 100%;
}
.x > div:before { top: -10px; }
.x > div:after { top: 10px; }

.x:hover > div, .x:hover > div:before, .x:hover > div:after { background-color: var(--color-white); }

.x.active { background-color: transparent; }
.x.active > div { background-color: transparent; }
.x.active > div:before, .x.active > div:after { background-color: var(--color-white); }

.x.active > div:before, .x.active > div:after { 
  top: 0; 
  transition: top 0.25s ease-in-out, transform 0.25s ease-in-out 0.25s 
}
.x.active > div:before { transform: rotate(45deg); }
.x.active > div:after { transform: rotate(-45deg); }