.mobile_menu_label {
    position: absolute;
    top: 10px;
    right: 10px;
}

.mobile_menu_label button {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
    border: medium none;
    display: inline-block;
    /* margin: 5px; */
}

.mobile_menu_label button span {
    display: block;
}

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

.grid-button .grid {
    background: #ecf0f1 none repeat scroll 0 0;
    color: #ecf0f1;
    height: 1rem;
    transition: all 0.3s ease 0s;
    width: 1rem;
}

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

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

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

.grid-button.collapse .grid {
    box-shadow: -1.25rem 0px, -1.25rem 1.25rem, 1.25rem 0px, 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 0px, 0 0 rgba(0, 0, 0, 0), 1rem 0px, 0 0 rgba(0, 0, 0, 0), 0 -1rem, 0 0 rgba(0, 0, 0, 0), 0 1rem, 0 0 transparent;
}

.lines-button {
    border-radius: 0.57143rem;
    cursor: pointer;
    padding: 1.5rem .5rem;
    transition: all 1s ease 0s;
}

.lines-button:hover {
    opacity: 1;
}

.lines-button:active {
}

.lines {
    background-color: white;
    border-radius: 0.28571rem;
    display: inline-block;
    height: 0.47143rem;
    position: relative;
    transition: all 1s ease 0s;
    width: 3.5rem;
}

.lines::before, .lines::after {
    background-color: white;
    border-radius: 0.28571rem;
    content: "";
    display: inline-block;
    height: 0.47143rem;
    left: 0;
    position: absolute;
    transform-origin: 0.28571rem center 0;
    transition: all 1s ease 0s;
    width: 3.5rem;
}

.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.close {
    transform: scale3d(0.8, 0.8, 0.8);
}

.lines-button.x.close .lines {
    background: rgba(0, 0, 0, 0) none repeat scroll 0 0;
}

.lines-button.x.close .lines::before, .lines-button.x.close .lines::after {
    top: 0;
    transform-origin: 50% 50% 0;
    width: 4rem;
}

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

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