LESS
body {
background: #DF4F32 url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/242518/a3owknpciq8-alexandre-chambon%20(1).jpg") no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
font-family: "Open Sans";
text-align: center;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
&::before {
content: '';
position: fixed;
top: 0;
left: 0;
background: #DF4F32; /* IE Fallback */
background: rgba(50, 223, 203, 0.8);
width: 100%;
height: 100%;
}
}
.toggle {
position: absolute;
display: block;
cursor: pointer;
top: 50%;
left: 50%;
margin: -14px 0 0 -21px;
span {
display: block;
background: #FFF;
width: 42px;
height: 4px;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
border-radius: 3px;
-webkit-transition: .25s margin .25s, .25s transform;
-moz-transition: .25s margin .25s, .25s transform;
transition: .25s margin .25s, .25s transform;
}
span:nth-child(1) { margin-bottom: 8px; }
span:nth-child(3) { margin-top: 8px; }
&.active {
span {
-webkit-transition: .25s margin, .25s transform .25s;
-moz-transition: .25s margin, .25s transform .25s;
transition: .25s margin, .25s transform .25s;
}
span:nth-child(1) {
margin-top: 8px;
margin-bottom: -4px;
}
span:nth-child(1), span:nth-child(2) {
transform: rotate(45deg);
}
span:nth-child(3) {
margin-top: -4px;
transform: rotate(135deg);
}
}
}
