button{display:inline-block;margin:0 1em;border:none;background:none}button span{display:block}.grid-button{padding:2rem;cursor:pointer;user-select:none}.grid-button .grid{width:1rem;height:1rem;background:#ecf0f1;color:#ecf0f1;transition:.3s}.grid-button.closed .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.closed .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.closed .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{padding:16px 0 0;margin:0;transition:.3s;cursor:pointer;user-select:none}.lines-button:hover{opacity:1}.lines-button:active{transition:0}.lines{display:inline-block;width:22px;height:3px;background:#222;transition:.2s;position:relative}.lines:before,.lines:after{display:inline-block;width:22px;height:3px;background:#222;transition:.2s;position:absolute;left:0;content:'';-webkit-transform-origin:.28571rem center;transform-origin:.28571rem center}.lines:before{top:8px}.lines:after{top:-8px}.lines-button:hover .lines:before{top:10px}.lines-button:hover .lines:after{top:-10px}.lines-button.open{-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)}.lines-button.arrow.open .lines:before,.lines-button.arrow.open .lines:after{top:0;width:2.22222rem}.lines-button.arrow.open .lines:before{-webkit-transform:rotate3d(0,0,1,40deg);transform:rotate3d(0,0,1,40deg)}.lines-button.arrow.open .lines:after{-webkit-transform:rotate3d(0,0,1,-40deg);transform:rotate3d(0,0,1,-40deg)}.lines-button.arrow-up.open{-webkit-transform:scale3d(.8,.8,.8) rotate3d(0,0,1,90deg);transform:scale3d(.8,.8,.8) rotate3d(0,0,1,90deg)}.lines-button.minus.open .lines:before,.lines-button.minus.open .lines:after{-webkit-transform:none;transform:none;top:0;width:4rem}.lines-button.x.open .lines{background:transparent!important}.lines-button.x.open .lines:before,.lines-button.x.open .lines:after{-webkit-transform-origin:50% 50%;transform-origin:50% 50%;top:0;width:4rem}.lines-button.x.open .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}.lines-button.x.open .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}.lines-button.x2 .lines{transition:background .3s .5s ease}.lines-button.x2 .lines:before,.lines-button.x2 .lines:after{-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.open .lines{transition:background .3s 0s ease;background:transparent}.lines-button.x2.open .lines:before,.lines-button.x2.open .lines:after{transition:top .3s ease , -webkit-transform .3s .5s ease;transition:top .3s ease , transform .3s .5s ease;top:0;width:4rem}.lines-button.x2.open .lines:before{-webkit-transform:rotate3d(0,0,1,45deg);transform:rotate3d(0,0,1,45deg)}.lines-button.x2.open .lines:after{-webkit-transform:rotate3d(0,0,1,-45deg);transform:rotate3d(0,0,1,-45deg)}