button {
  display: inline-block;
  margin: 0 1em;
  border: none;
  background: none;
  background: none transparent;
  border: none;
}
button span {
  display: block;
}


/* ====================== lines button ==================================================*/
.lines-button {
    padding: 2rem 1rem;
    transition: .3s;
    cursor: pointer;
    user-select: none;
    border-radius: 0.57143rem;
}
.lines-button:hover {
    opacity: 1;
}
.lines-button:active {
    transition: 0;
}

.lines {
    display: inline-block;
    width: 4rem;
    height: 0.57143rem;
    background: #162e5a;
    border-radius: 0.28571rem;
    transition: 0.3s;
    position: relative;
}
.lines:before, .lines:after {
    display: inline-block;
    width: 4rem;
    height: 0.57143rem;
    background: #162e5a;
    border-radius: 0.28571rem;
    transition: 0.3s;
    position: absolute;
    left: 0;
    content: '';
    -webkit-transform-origin: 0.28571rem center;
    transform-origin: 0.28571rem center;
}
.lines:before {
    top: 1rem;
}
.lines:after {
    top: -1rem;
}

.lines-button:hover .lines:before {
    top: 1.14286rem;
}
.lines-button:hover .lines:after {
    top: -1.14286rem;
}

.lines-button.x.close .lines {
    /*hide the middle line*/
    background: transparent;
}

/*overlay the lines by setting both their top values to 0*/
.lines-button.x.close .lines:before, .lines-button.x.close .lines:after{
    transform-origin: 50% 50%;
    top:0;
    width: $button-size;
}

/*rotate the lines to form the x shape*/ 
.lines-button.x.close .lines:before{
    transform: rotate3d(0,0,1,45deg); 
}

.lines-button.x.close .lines:after{
    transform: rotate3d(0,0,1,-45deg); 
}