1.section-center {
2  z-index: 10;
3  width: 100%;
4  margin: 0 auto;
5  text-align: center;
6  -webkit-transition: all 500ms linear;
7  transition: all 500ms linear;
8}
9
10.section-path {
11  position: relative;
12  width: 238px;
13  height: 76px;
14  border-radius: 35px;
15  margin: 0 auto;
16  text-align: center;
17  background-color: #3B3B3B;
18  box-shadow: inset -2px 20px 10px 0 rgba(0,0,0,.06),
19      inset -2px 30px 10px 0 rgba(0,0,0,.04);
20  border: 3px groove rgba(225,225,225,0.07);
21  overflow: hidden;
22  -webkit-transition: all 300ms linear;
23  transition: all 300ms linear;
24}
25
26.globe {
27  position: relative;
28  width: 66px;
29  height: 66px;
30  overflow: hidden;
31  margin-top: 2px;
32  margin-left: 2px;
33  border-radius: 50%;
34  box-shadow: 0 10px 40px rgba(0,0,0,0.65);
35  animation: rotateBall 4s ease infinite;
36  -webkit-transition: all 300ms linear;
37  transition: all 300ms linear;
38}
39
40@keyframes rotateBall {
41  0% {
42    transform: translateX(0);
43  }
44
45  50% {
46    transform: translateX(162px);
47  }
48
49  100% {
50    transform: translateX(0);
51  }
52}
53
54.globe:after {
55  position: absolute;
56  width: 5px;
57  height: 12px;
58  background-color: rgba(255, 255, 255, 0.1);
59  content: '';
60  left: 40px;
61  top: 15px;
62  border-radius: 50%;
63  z-index: 2;
64  box-shadow: 0 0 14px 7px rgba(255, 255, 255, 0.1);
65}
66
67.globe:before {
68  position: absolute;
69  width: 100%;
70  height: 100%;
71  content: '';
72  left: 0;
73  top: 0;
74  border-radius: 50%;
75  z-index: 1;
76  box-shadow: inset 0 0 15px #1a252f;
77  opacity: 0.4;
78  -webkit-transition: all 300ms linear;
79  transition: all 300ms linear;
80}
81
82.globe .wrapper {
83  position: absolute;
84  width: 528px;
85  height: 528px;
86  top: 0;
87  left: -462px;
88  animation: moveBall 4s ease infinite;
89}
90
91@keyframes moveBall {
92  0% {
93    left: -462px;
94  }
95
96  50% {
97    left: 0;
98  }
99
100  100% {
101    left: -462px;
102  }
103}
104
105.globe .wrapper span {
106  position: absolute;
107  width: 33px;
108  height: 528px;
109  top: 0;
110  left: 0;
111  background-color: #F2F2F2;
112  box-shadow: inset 0 0 25px #E1E1E1;
113}
114
115.globe .wrapper span:nth-child(2) {
116  left: 33px;
117  background-color: #F2F2F2;
118}
119
120.globe .wrapper span:nth-child(3) {
121  left: 66px;
122}
123
124.globe .wrapper span:nth-child(4) {
125  left: 99px;
126  background-color: #F2F2F2;
127}
128
129.globe .wrapper span:nth-child(5) {
130  left: 132px;
131}
132
133.globe .wrapper span:nth-child(6) {
134  left: 165px;
135  background-color: #F2F2F2;
136}
137
138.globe .wrapper span:nth-child(7) {
139  left: 198px;
140}
141
142.globe .wrapper span:nth-child(8) {
143  left: 231px;
144  background-color: #F2F2F2;
145}
146
147.globe .wrapper span:nth-child(9) {
148  left: 264px;
149}
150
151.globe .wrapper span:nth-child(10) {
152  left: 297px;
153  background-color: #F2F2F2;
154}
155
156.globe .wrapper span:nth-child(11) {
157  left: 330px;
158}
159
160.globe .wrapper span:nth-child(12) {
161  left: 363px;
162  background-color: #F2F2F2;
163}
164
165.globe .wrapper span:nth-child(13) {
166  left: 396px;
167}
168
169.globe .wrapper span:nth-child(14) {
170  left: 429px;
171  background-color: #F2F2F2;
172}
173
174.globe .wrapper span:nth-child(15) {
175  left: 462px;
176}
177
178.globe .wrapper span:nth-child(16) {
179  left: 495px;
180  background-color: #F2F2F2;
181}
182
183#switch,
184  #circle {
185  cursor: pointer;
186  -webkit-transition: all 300ms linear;
187  transition: all 300ms linear;
188}
189
190#switch {
191  width: 70px;
192  height: 8px;
193  margin: 0 auto;
194  text-align: center;
195  border: 2px solid #5C5C5C;
196  border-radius: 27px;
197  background: #000;
198  position: relative;
199  display: inline-block;
200  margin-top: 40px;
201  margin-bottom: 20px;
202}
203
204#circle {
205  position: absolute;
206  top: -11px;
207  left: 5px;
208  width: 26px;
209  height: 26px;
210  border-radius: 50%;
211  box-shadow: 0 4px 4px rgba(0,0,0,0.25), 0 0 0 1px rgba(26,53,71,0.07);
212  background: #000;
213}
214
215.switched {
216  border-color: #000 !important;
217  background: #5C5C5C !important;
218}
219
220.switched #circle {
221  left: 35px;
222  background: #fff;
223}
224
225.section-center p span {
226  position: relative;
227  padding: 4px 10px;
228  margin: 0 5px;
229}
230
231.section-center p span:before {
232  position: absolute;
233  content: '';
234  width: 100%;
235  height: 100%;
236  border-radius: 4px;
237  background-color: #5C5C5C;
238  box-shadow: 0 2px 4px rgba(0,0,0,0.25);
239  left: 0;
240  top: 0;
241  z-index: -1;
242  -webkit-transition: all 300ms linear;
243  transition: all 300ms linear;
244}
245
246.section-center p span:after {
247  position: absolute;
248  content: '';
249  width: calc(100% - 10px);
250  height: 2px;
251  border-radius: 4px;
252  background-color: #fff;
253  left: 5px;
254  top: 50%;
255  z-index: 1;
256  -webkit-transition: all 300ms linear;
257  transition: all 300ms linear;
258}
259
260.section-center p span:nth-child(2):after {
261  opacity: 0;
262}