1.hamburger {
2  cursor: pointer;
3}
4
5.hamburger input {
6  display: none;
7}
8
9.hamburger svg {
10  /* The size of the SVG defines the overall size */
11  height: 3em;
12  /* Define the transition for transforming the SVG */
13  transition: transform 600ms cubic-bezier(0.4, 0, 0.2, 1);
14}
15
16.line {
17  fill: none;
18  stroke: white;
19  stroke-linecap: round;
20  stroke-linejoin: round;
21  stroke-width: 3;
22  /* Define the transition for transforming the Stroke */
23  transition: stroke-dasharray 600ms cubic-bezier(0.4, 0, 0.2, 1),
24              stroke-dashoffset 600ms cubic-bezier(0.4, 0, 0.2, 1);
25}
26
27.line-top-bottom {
28  stroke-dasharray: 12 63;
29}
30
31.hamburger input:checked + svg {
32  transform: rotate(-45deg);
33}
34
35.hamburger input:checked + svg .line-top-bottom {
36  stroke-dasharray: 20 300;
37  stroke-dashoffset: -32.42;
38}
39