.buttons-container {
    margin: 100px auto;
    text-align: center
}

button {
    display: inline-block;
    margin: 0;
    padding: 0px;
    border: none;
    background: 0;
    width: 26px;
    height: 26px;
}
button:focus {outline:0;}

button span {
    display: block
}

.grid-button {
    padding: 2rem;
    cursor: pointer;
    user-select: none
}

.grid-button .grid {
    width: 1rem;
    height: 1rem;
    background: #26395b;
    color: #26395b;
    transition: .3s
}

.grid-button.close .grid {
    -webkit-transform: rotate3d(0, 0, 1, -45deg) scale3d(.8, .8, .8);
    transform: rotate3d(0, 0, 1, -45deg) scale3d(.8, .8, .8)
}

.grid-button.rearrange .grid {
    box-shadow: -1.25rem -1.25rem, 0 -1.25rem, 1.25rem -1.25rem, -1.25rem 0, 1.25rem 0, -1.25rem 1.25rem, 0 1.25rem, 1.25rem 1.25rem
}

.grid-button.rearrange.close .grid {
    box-shadow: 0 -1rem, 0 -2rem, 1rem 0, -2rem 0, 2rem 0, -1rem 0, 0 2rem, 0 1rem
}

.grid-button.collapse .grid {
    box-shadow: -1.25rem 0, -1.25rem 1.25rem, 1.25rem 0, 1.25rem -1.25rem, 0 -1.25rem, -1.25rem -1.25rem, 0 1.25rem, 1.25rem 1.25rem
}

.grid-button.collapse.close .grid {
    box-shadow: -1rem 0, 0 0 transparent, 1rem 0, 0 0 transparent, 0 -1rem, 0 0 transparent, 0 1rem, 0 0 transparent
}

.lines-button {
    transition: .3s;
    cursor: pointer;
    user-select: none;
    border-radius: 3px;
}

.lines-button:hover {
    opacity: 1
}

.lines-button:active {
    transition: 0
}

.lines {
    display: inline-block;
    width: 26px;
    height: 3px;
    background: #26395b;
    border-radius: 3px;
    transition: .3s;
    position: relative
}

.lines:after,
.lines:before {
    display: inline-block;
    width: 26px;
    height: 3px;
    background: #26395b;
    border-radius: 3px;
    transition: .3s;
    position: absolute;
    left: 0;
    content: '';
    -webkit-transform-origin: .28571rem center;
    transform-origin: .28571rem center
}

.lines:before {
    top: 7px
}

.lines:after {
    top: -7px
}

.lines-button.close {
    -webkit-transform: scale3d(.8, .8, .8);
    transform: scale3d(.8, .8, .8)
}
.lines-button.x2 .lines {
    transition: background .3s .5s ease
}

.lines-button.x2 .lines:after,
.lines-button.x2 .lines:before {
    -webkit-transform-origin: 50% 50%;
    transform-origin: 50% 50%;
    transition: top .3s .6s ease, -webkit-transform .3s ease;
    transition: top .3s .6s ease, transform .3s ease
}

.lines-button.x2.close .lines {
    transition: background .3s 0s ease;
    background: 0 0
}

.lines-button.x2.close .lines:after,
.lines-button.x2.close .lines:before {
    transition: top .3s ease, -webkit-transform .3s .5s ease;
    transition: top .3s ease, transform .3s .5s ease;
    top: 0;
    width: 26px;}

.lines-button.x2.close .lines:before {
    -webkit-transform: rotate3d(0, 0, 1, 45deg);
    transform: rotate3d(0, 0, 1, 45deg)
}

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