1.burger {
2  position: relative;
3  width: 40px;
4  height: 30px;
5  background: transparent;
6  cursor: pointer;
7  display: block;
8}
9
10.burger input {
11  display: none;
12}
13
14.burger span {
15  display: block;
16  position: absolute;
17  height: 4px;
18  width: 100%;
19  background: black;
20  border-radius: 9px;
21  opacity: 1;
22  left: 0;
23  transform: rotate(0deg);
24  transition: .25s ease-in-out;
25}
26
27.burger span:nth-of-type(1) {
28  top: 0px;
29  transform-origin: left center;
30}
31
32.burger span:nth-of-type(2) {
33  top: 50%;
34  transform: translateY(-50%);
35  transform-origin: left center;
36}
37
38.burger span:nth-of-type(3) {
39  top: 100%;
40  transform-origin: left center;
41  transform: translateY(-100%);
42}
43
44.burger input:checked ~ span:nth-of-type(1) {
45  transform: rotate(45deg);
46  top: 0px;
47  left: 5px;
48}
49
50.burger input:checked ~ span:nth-of-type(2) {
51  width: 0%;
52  opacity: 0;
53}
54
55.burger input:checked ~ span:nth-of-type(3) {
56  transform: rotate(-45deg);
57  top: 28px;
58  left: 5px;
59}