/*
@font-face{
font-family:'Source Sans Pro';font-style:normal;font-weight:300;src:local("Source Sans Pro Light"),local("SourceSansPro-Light"),url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGNbE_oMaV8t2eFeISPpzbdE.woff) format("woff")
}

@font-face{
font-family:'Source Sans Pro';font-style:normal;font-weight:400;src:local("Source Sans Pro"),local("SourceSansPro-Regular"),url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/ODelI1aHBYDBqgeIAH2zlBM0YzuT7MdOe03otPbuUS0.woff) format("woff")
}

@font-face{
font-family:'Source Sans Pro';font-style:normal;font-weight:600;src:local("Source Sans Pro Semibold"),local("SourceSansPro-Semibold"),url(http://themes.googleusercontent.com/static/fonts/sourcesanspro/v6/toadOcfmlt9b38dHJxOBGJ6-ys_j0H4QL65VLqzI3wI.woff) format("woff")
}

body,html{
height:100%
}

body{
background-color:#12171a;color:#516774;border:1px solid transparent;font-family:"Source Sans pro",sans-serif
}

a{
color:#fff;text-decoration:none
}

a:hover{
color:inherit
}

header{
position:fixed;top:0;left:0;right:0;width:100%;padding:10px 30px;background-color:rgba(0,0,0,.5)
}

h1{
font-size:5em;font-weight:400;text-align:center;margin:100px auto 30px;font-weight:300
}

h2{
font-size:2em;text-align:center;font-weight:300
}

p{
text-align:center
}

*/

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

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

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.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{
padding:2rem 1rem;transition:.3s;cursor:pointer;user-select:none;border-radius:.57143rem
}

.lines-button:hover{
opacity:1
}

.lines-button:active{
transition:0
}

.lines{
display:inline-block;width:4rem;height:.20000rem;background:#ecf0f1;border-radius:.10000rem;transition:.3s;position:relative
}

.lines:after,.lines:before{
display:inline-block;width:4rem;height:.20000rem;background:#ecf0f1;border-radius:.10000rem;transition:.3s;position:absolute;left:0;content:'';-webkit-transform-origin:.28571rem center;transform-origin:.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.close{
-webkit-transform:scale3d(.8,.8,.8);transform:scale3d(.8,.8,.8)
}

.lines-button.arrow.close .lines:after,.lines-button.arrow.close .lines:before{
top:0;width:2.22222rem
}

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

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

.lines-button.arrow-up.close{
-webkit-transform:scale3d(.8,.8,.8) rotate3d(0,0,1,90deg);transform:scale3d(.8,.8,.8) rotate3d(0,0,1,90deg)
}

.lines-button.minus.close .lines:after,.lines-button.minus.close .lines:before{
-webkit-transform:none;transform:none;top:0;width:4rem
}

.lines-button.x.close .lines{
background:0 0
}

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

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

.lines-button.x.close .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: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:4rem
}

.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)
}