1.cont input[type="radio"] {
2  display: none;
3}
4
5.cont {
6  width: 140px;
7  position: absolute;
8  transform: translateX(-50%);
9}
10
11.cont label:before {
12  cursor: pointer;
13  content: '';
14  display: block;
15  height: 20px;
16  width: 20px;
17  border: 2px solid #111;
18  border-radius: 50%;
19  float: left;
20  margin: 0 10px;
21}
22
23.cont .slider > .dot {
24  height: 10px;
25  width: 10px;
26  border-radius: 50%;
27  position: relative;
28  top: 5px;
29  left: 15px;
30  opacity: 0;
31  background-color: #111;
32  transition: all 0.3s;
33}
34
35.cont input[type="radio"]:checked ~ .slider > .dot {
36  opacity: 1;
37}
38
39.cont .line1 {
40  height: 65px;
41  width: 2px;
42  background-color: #111;
43  position: absolute;
44  transform-origin: bottom;
45  transform: translateX(65px) translateY(20px);
46  transition: all 0.3s;
47}
48
49.cont .line2 {
50  position: absolute;
51  height: 150px;
52  width: 2px;
53  background-color: #111;
54  transform: translateX(65px) translateY(80px);
55}
56
57.cont .dot2 {
58  position: absolute;
59  height: 6.66667px;
60  width: 6.66667px;
61  background-color: #111;
62  border-radius: 50%;
63  transform: translateX(62.66667px) translateY(76.66667px);
64}
65
66.cont #r1:checked ~ .slider > .dot, .cont #r4:checked ~ .slider > .dot {
67  transform: translateX(2px) translateY(2px);
68}
69
70.cont #r1:checked ~ .slider > .line1, .cont #r4:checked ~ .slider > .line1 {
71  transform: translateX(63px) translateY(13px) rotate(-32deg) scaleY(1.2)
72}
73
74.cont #r2:checked ~ .slider > .dot, .cont #r5:checked ~ .slider > .dot {
75  transform: translateX(46px) translateY(2px);
76}
77
78.cont #r2:checked ~ .slider > .line1, .cont #r5:checked ~ .slider > .line1 {
79  transform: translateX(65px) translateY(15px);
80}
81
82.cont #r3:checked ~ .slider > .dot, .cont #r6:checked ~ .slider > .dot {
83  transform: translateX(90px) translateY(2px);
84}
85
86.cont #r3:checked ~ .slider > .line1, .cont #r6:checked ~ .slider > .line1 {
87  transform: translateX(66px) translateY(16px) rotate(32deg) scaleY(1.3)
88}
89
90.cont:nth-of-type(2) {
91  transform: translateX(-50%) scaleY(-1) translateY(37px);
92}
93
94.zapp, .zapp:after, .zapp:before {
95  content: '';
96  position: absolute;
97  height: 40px;
98  width: 4px;
99  margin-left: -2px;
100  background-color: #f00;
101}
102
103.zapp {
104  transform: translateY(-40px);
105}
106
107.zapp:after {
108  transform: translateX(42px);
109}
110
111.zapp:before {
112  transform: translateX(-38px);
113}
114
115#c1:checked ~ #c4:checked ~ .zapp {
116  display: none;
117}
118