1/* The loader */
2.loader {
3  position: absolute;
4  top: 50%;
5  left: 50%;
6  overflow: hidden;
7  width: 200px;
8  height: 200px;
9  margin-top: -100px;
10  margin-left: -100px;
11  perspective: 1000px;
12  transform-style: perserve-3d;
13}
14
15/* The dots */
16.dots {
17  position: absolute;
18  top: 0;
19  left: 0;
20  width: 100%;
21  height: 100%;
22  perspective: 200px;
23  transform-style: perserve-3d;
24  animation: dots 10000ms linear infinite;
25}
26
27.dots:nth-child(1) {
28  animation-name: dots;
29}
30
31.dots:nth-child(2) {
32  animation-name: dots2;
33}
34
35.dots:nth-child(3) {
36  animation-name: dots3;
37}
38
39.dots:nth-child(4) {
40  animation-name: dots4;
41}
42
43.dots:nth-child(5) {
44  animation-name: dots5;
45}
46
47.dots:nth-child(6) {
48  animation-name: dots6;
49}
50
51@keyframes dots {
52  0% {
53    transform: rotateX(30deg) rotateZ(0deg) translateZ(-50px);
54  }
55
56  50% {
57    transform: rotateX(60deg) rotateZ(5760deg) translateZ(-100px);
58  }
59
60  100% {
61    transform: rotateX(30deg) rotateZ(11520deg) translateZ(-50px);
62  }
63}
64
65@keyframes dots2 {
66  0% {
67    transform: rotateX(30deg) rotateZ(0deg) translateZ(-36px);
68  }
69
70  50% {
71    transform: rotateX(60deg) rotateZ(2880deg) translateZ(-72px);
72  }
73
74  100% {
75    transform: rotateX(30deg) rotateZ(5760deg) translateZ(-36px);
76  }
77}
78
79@keyframes dots3 {
80  0% {
81    transform: rotateX(30deg) rotateZ(0deg) translateZ(-24px);
82  }
83
84  50% {
85    transform: rotateX(60deg) rotateZ(1440deg) translateZ(-48px);
86  }
87
88  100% {
89    transform: rotateX(30deg) rotateZ(2880deg) translateZ(-24px);
90  }
91}
92
93@keyframes dots4 {
94  0% {
95    transform: rotateX(30deg) rotateZ(0deg) translateZ(-14px);
96  }
97
98  50% {
99    transform: rotateX(60deg) rotateZ(720deg) translateZ(-28px);
100  }
101
102  100% {
103    transform: rotateX(30deg) rotateZ(1440deg) translateZ(-14px);
104  }
105}
106
107@keyframes dots5 {
108  0% {
109    transform: rotateX(30deg) rotateZ(0deg) translateZ(-6px);
110  }
111
112  50% {
113    transform: rotateX(60deg) rotateZ(360deg) translateZ(-12px);
114  }
115
116  100% {
117    transform: rotateX(30deg) rotateZ(720deg) translateZ(-6px);
118  }
119}
120
121@keyframes dots6 {
122  0% {
123    transform: rotateX(30deg) rotateZ(0deg) translateZ(0px);
124  }
125
126  50% {
127    transform: rotateX(60deg) rotateZ(180deg) translateZ(-3px);
128  }
129
130  100% {
131    transform: rotateX(30deg) rotateZ(360deg) translateZ(0px);
132  }
133}
134
135/* The dot */
136.dot {
137  position: absolute;
138  top: 50%;
139  left: 50%;
140  width: 10px;
141  height: 10px;
142  margin-left: -5px;
143  margin-top: -5px;
144  border-radius: 100px;
145  background-color: #1e3f57;
146  transform-style: perserve-3d;
147  transform: rotateZ(0) translateY(0);
148}
149
150.dots:nth-child(6) .dot {
151  background-color: #1e3f57;
152}
153
154.dots:nth-child(1) .dot:nth-child(1) {
155  transform: rotateZ(0) translateY(-10px);
156}
157
158.dots:nth-child(1) .dot:nth-child(2) {
159  transform: rotateZ(90deg) translateY(-10px) translateZ(-140px);
160}
161
162.dots:nth-child(1) .dot:nth-child(3) {
163  transform: rotateZ(180deg) translateY(-10px);
164}
165
166.dots:nth-child(1) .dot:nth-child(4) {
167  transform: rotateZ(270deg) translateY(-10px) translateZ(-140px);
168}
169
170.dots:nth-child(5) .dot {
171  background-color: #295068;
172}
173
174.dots:nth-child(2) .dot:nth-child(1) {
175  transform: rotateZ(0) translateY(-22px);
176}
177
178.dots:nth-child(2) .dot:nth-child(2) {
179  transform: rotateZ(45deg) translateY(-22px) translateZ(-120px);
180}
181
182.dots:nth-child(2) .dot:nth-child(3) {
183  transform: rotateZ(90deg) translateY(-22px);
184}
185
186.dots:nth-child(2) .dot:nth-child(4) {
187  transform: rotateZ(135deg) translateY(-22px) translateZ(-120px);
188}
189
190.dots:nth-child(2) .dot:nth-child(5) {
191  transform: rotateZ(180deg) translateY(-22px);
192}
193
194.dots:nth-child(2) .dot:nth-child(6) {
195  transform: rotateZ(225deg) translateY(-22px) translateZ(-120px);
196}
197
198.dots:nth-child(2) .dot:nth-child(7) {
199  transform: rotateZ(270deg) translateY(-22px);
200}
201
202.dots:nth-child(2) .dot:nth-child(8) {
203  transform: rotateZ(315deg) translateY(-22px) translateZ(-120px);
204}
205
206.dots:nth-child(4) .dot {
207  background-color: #3b6a83;
208}
209
210.dots:nth-child(3) .dot:nth-child(1) {
211  transform: rotateZ(0) translateY(-34px);
212}
213
214.dots:nth-child(3) .dot:nth-child(2) {
215  transform: rotateZ(30deg) translateY(-34px) translateZ(-100px);
216}
217
218.dots:nth-child(3) .dot:nth-child(3) {
219  transform: rotateZ(60deg) translateY(-34px);
220}
221
222.dots:nth-child(3) .dot:nth-child(4) {
223  transform: rotateZ(90deg) translateY(-34px) translateZ(-100px);
224}
225
226.dots:nth-child(3) .dot:nth-child(5) {
227  transform: rotateZ(120deg) translateY(-34px);
228}
229
230.dots:nth-child(3) .dot:nth-child(6) {
231  transform: rotateZ(150deg) translateY(-34px) translateZ(-100px);
232}
233
234.dots:nth-child(3) .dot:nth-child(7) {
235  transform: rotateZ(180deg) translateY(-34px);
236}
237
238.dots:nth-child(3) .dot:nth-child(8) {
239  transform: rotateZ(210deg) translateY(-34px) translateZ(-100px);
240}
241
242.dots:nth-child(3) .dot:nth-child(9) {
243  transform: rotateZ(240deg) translateY(-34px);
244}
245
246.dots:nth-child(3) .dot:nth-child(10) {
247  transform: rotateZ(270deg) translateY(-34px) translateZ(-100px);
248}
249
250.dots:nth-child(3) .dot:nth-child(11) {
251  transform: rotateZ(300deg) translateY(-34px);
252}
253
254.dots:nth-child(3) .dot:nth-child(12) {
255  transform: rotateZ(330deg) translateY(-34px) translateZ(-100px);
256}
257
258.dots:nth-child(3) .dot {
259  background-color: #4d86a0;
260}
261
262.dots:nth-child(4) .dot:nth-child(1) {
263  transform: rotateZ(0) translateY(-46px);
264}
265
266.dots:nth-child(4) .dot:nth-child(2) {
267  transform: rotateZ(20deg) translateY(-46px) translateZ(-80px);
268}
269
270.dots:nth-child(4) .dot:nth-child(3) {
271  transform: rotateZ(40deg) translateY(-46px);
272}
273
274.dots:nth-child(4) .dot:nth-child(4) {
275  transform: rotateZ(60deg) translateY(-46px) translateZ(-80px);
276}
277
278.dots:nth-child(4) .dot:nth-child(5) {
279  transform: rotateZ(80deg) translateY(-46px);
280}
281
282.dots:nth-child(4) .dot:nth-child(6) {
283  transform: rotateZ(100deg) translateY(-46px) translateZ(-80px);
284}
285
286.dots:nth-child(4) .dot:nth-child(7) {
287  transform: rotateZ(120deg) translateY(-46px);
288}
289
290.dots:nth-child(4) .dot:nth-child(8) {
291  transform: rotateZ(140deg) translateY(-46px) translateZ(-80px);
292}
293
294.dots:nth-child(4) .dot:nth-child(9) {
295  transform: rotateZ(160deg) translateY(-46px);
296}
297
298.dots:nth-child(4) .dot:nth-child(10) {
299  transform: rotateZ(180deg) translateY(-46px) translateZ(-80px);
300}
301
302.dots:nth-child(4) .dot:nth-child(11) {
303  transform: rotateZ(200deg) translateY(-46px);
304}
305
306.dots:nth-child(4) .dot:nth-child(12) {
307  transform: rotateZ(220deg) translateY(-46px) translateZ(-80px);
308}
309
310.dots:nth-child(4) .dot:nth-child(13) {
311  transform: rotateZ(240deg) translateY(-46px);
312}
313
314.dots:nth-child(4) .dot:nth-child(14) {
315  transform: rotateZ(260deg) translateY(-46px) translateZ(-80px);
316}
317
318.dots:nth-child(4) .dot:nth-child(15) {
319  transform: rotateZ(280deg) translateY(-46px);
320}
321
322.dots:nth-child(4) .dot:nth-child(16) {
323  transform: rotateZ(300deg) translateY(-46px) translateZ(-80px);
324}
325
326.dots:nth-child(4) .dot:nth-child(17) {
327  transform: rotateZ(320deg) translateY(-46px);
328}
329
330.dots:nth-child(4) .dot:nth-child(18) {
331  transform: rotateZ(340deg) translateY(-46px) translateZ(-80px);
332}
333
334.dots:nth-child(2) .dot {
335  background-color: #5ea0ba;
336}
337
338.dots:nth-child(5) .dot:nth-child(1) {
339  transform: rotateZ(0) translateY(-58px);
340}
341
342.dots:nth-child(5) .dot:nth-child(2) {
343  transform: rotateZ(15deg) translateY(-58px) translateZ(-40px);
344}
345
346.dots:nth-child(5) .dot:nth-child(3) {
347  transform: rotateZ(30deg) translateY(-58px);
348}
349
350.dots:nth-child(5) .dot:nth-child(4) {
351  transform: rotateZ(45deg) translateY(-58px) translateZ(-40px);
352}
353
354.dots:nth-child(5) .dot:nth-child(5) {
355  transform: rotateZ(60deg) translateY(-58px);
356}
357
358.dots:nth-child(5) .dot:nth-child(6) {
359  transform: rotateZ(75deg) translateY(-58px) translateZ(-40px);
360}
361
362.dots:nth-child(5) .dot:nth-child(7) {
363  transform: rotateZ(90deg) translateY(-58px);
364}
365
366.dots:nth-child(5) .dot:nth-child(8) {
367  transform: rotateZ(105deg) translateY(-58px) translateZ(-40px);
368}
369
370.dots:nth-child(5) .dot:nth-child(9) {
371  transform: rotateZ(120deg) translateY(-58px);
372}
373
374.dots:nth-child(5) .dot:nth-child(10) {
375  transform: rotateZ(135deg) translateY(-58px) translateZ(-40px);
376}
377
378.dots:nth-child(5) .dot:nth-child(11) {
379  transform: rotateZ(150deg) translateY(-58px);
380}
381
382.dots:nth-child(5) .dot:nth-child(12) {
383  transform: rotateZ(165deg) translateY(-58px) translateZ(-40px);
384}
385
386.dots:nth-child(5) .dot:nth-child(13) {
387  transform: rotateZ(180deg) translateY(-58px);
388}
389
390.dots:nth-child(5) .dot:nth-child(14) {
391  transform: rotateZ(195deg) translateY(-58px) translateZ(-40px);
392}
393
394.dots:nth-child(5) .dot:nth-child(15) {
395  transform: rotateZ(210deg) translateY(-58px);
396}
397
398.dots:nth-child(5) .dot:nth-child(16) {
399  transform: rotateZ(225deg) translateY(-58px) translateZ(-40px);
400}
401
402.dots:nth-child(5) .dot:nth-child(17) {
403  transform: rotateZ(240deg) translateY(-58px);
404}
405
406.dots:nth-child(5) .dot:nth-child(18) {
407  transform: rotateZ(255deg) translateY(-58px) translateZ(-40px);
408}
409
410.dots:nth-child(5) .dot:nth-child(19) {
411  transform: rotateZ(270deg) translateY(-58px);
412}
413
414.dots:nth-child(5) .dot:nth-child(20) {
415  transform: rotateZ(285deg) translateY(-58px) translateZ(-40px);
416}
417
418.dots:nth-child(5) .dot:nth-child(21) {
419  transform: rotateZ(300deg) translateY(-58px);
420}
421
422.dots:nth-child(5) .dot:nth-child(22) {
423  transform: rotateZ(315deg) translateY(-58px) translateZ(-40px);
424}
425
426.dots:nth-child(5) .dot:nth-child(23) {
427  transform: rotateZ(330deg) translateY(-58px);
428}
429
430.dots:nth-child(5) .dot:nth-child(24) {
431  transform: rotateZ(345deg) translateY(-58px) translateZ(-40px);
432}
433
434.dots:nth-child(1) .dot {
435  background-color: #6bb1cd;
436}
437
438.dots:nth-child(6) .dot:nth-child(1) {
439  transform: rotateZ(0deg) translateY(-70px);
440}
441
442.dots:nth-child(6) .dot:nth-child(2) {
443  transform: rotateZ(10deg) translateY(-70px) translateZ(-20px);
444}
445
446.dots:nth-child(6) .dot:nth-child(3) {
447  transform: rotateZ(20deg) translateY(-70px);
448}
449
450.dots:nth-child(6) .dot:nth-child(4) {
451  transform: rotateZ(30deg) translateY(-70px) translateZ(-20px);
452}
453
454.dots:nth-child(6) .dot:nth-child(5) {
455  transform: rotateZ(40deg) translateY(-70px);
456}
457
458.dots:nth-child(6) .dot:nth-child(6) {
459  transform: rotateZ(50deg) translateY(-70px) translateZ(-20px);
460}
461
462.dots:nth-child(6) .dot:nth-child(7) {
463  transform: rotateZ(60deg) translateY(-70px);
464}
465
466.dots:nth-child(6) .dot:nth-child(8) {
467  transform: rotateZ(70deg) translateY(-70px) translateZ(-20px);
468}
469
470.dots:nth-child(6) .dot:nth-child(9) {
471  transform: rotateZ(80deg) translateY(-70px);
472}
473
474.dots:nth-child(6) .dot:nth-child(10) {
475  transform: rotateZ(90deg) translateY(-70px) translateZ(-20px);
476}
477
478.dots:nth-child(6) .dot:nth-child(11) {
479  transform: rotateZ(100deg) translateY(-70px);
480}
481
482.dots:nth-child(6) .dot:nth-child(12) {
483  transform: rotateZ(110deg) translateY(-70px) translateZ(-20px);
484}
485
486.dots:nth-child(6) .dot:nth-child(13) {
487  transform: rotateZ(120deg) translateY(-70px);
488}
489
490.dots:nth-child(6) .dot:nth-child(14) {
491  transform: rotateZ(130deg) translateY(-70px) translateZ(-20px);
492}
493
494.dots:nth-child(6) .dot:nth-child(15) {
495  transform: rotateZ(140deg) translateY(-70px);
496}
497
498.dots:nth-child(6) .dot:nth-child(16) {
499  transform: rotateZ(150deg) translateY(-70px) translateZ(-20px);
500}
501
502.dots:nth-child(6) .dot:nth-child(17) {
503  transform: rotateZ(160deg) translateY(-70px);
504}
505
506.dots:nth-child(6) .dot:nth-child(18) {
507  transform: rotateZ(170deg) translateY(-70px) translateZ(-20px);
508}
509
510.dots:nth-child(6) .dot:nth-child(19) {
511  transform: rotateZ(180deg) translateY(-70px);
512}
513
514.dots:nth-child(6) .dot:nth-child(20) {
515  transform: rotateZ(190deg) translateY(-70px) translateZ(-20px);
516}
517
518.dots:nth-child(6) .dot:nth-child(21) {
519  transform: rotateZ(200deg) translateY(-70px);
520}
521
522.dots:nth-child(6) .dot:nth-child(22) {
523  transform: rotateZ(210deg) translateY(-70px) translateZ(-20px);
524}
525
526.dots:nth-child(6) .dot:nth-child(23) {
527  transform: rotateZ(220deg) translateY(-70px);
528}
529
530.dots:nth-child(6) .dot:nth-child(24) {
531  transform: rotateZ(230deg) translateY(-70px) translateZ(-20px);
532}
533
534.dots:nth-child(6) .dot:nth-child(25) {
535  transform: rotateZ(240deg) translateY(-70px);
536}
537
538.dots:nth-child(6) .dot:nth-child(26) {
539  transform: rotateZ(250deg) translateY(-70px) translateZ(-20px);
540}
541
542.dots:nth-child(6) .dot:nth-child(27) {
543  transform: rotateZ(260deg) translateY(-70px);
544}
545
546.dots:nth-child(6) .dot:nth-child(28) {
547  transform: rotateZ(270deg) translateY(-70px) translateZ(-20px);
548}
549
550.dots:nth-child(6) .dot:nth-child(29) {
551  transform: rotateZ(280deg) translateY(-70px);
552}
553
554.dots:nth-child(6) .dot:nth-child(30) {
555  transform: rotateZ(290deg) translateY(-70px) translateZ(-20px);
556}
557
558.dots:nth-child(6) .dot:nth-child(31) {
559  transform: rotateZ(300deg) translateY(-70px);
560}
561
562.dots:nth-child(6) .dot:nth-child(32) {
563  transform: rotateZ(310deg) translateY(-70px) translateZ(-20px);
564}
565
566.dots:nth-child(6) .dot:nth-child(33) {
567  transform: rotateZ(320deg) translateY(-70px);
568}
569
570.dots:nth-child(6) .dot:nth-child(34) {
571  transform: rotateZ(330deg) translateY(-70px) translateZ(-20px);
572}
573
574.dots:nth-child(6) .dot:nth-child(35) {
575  transform: rotateZ(340deg) translateY(-70px);
576}
577
578.dots:nth-child(6) .dot:nth-child(36) {
579  transform: rotateZ(350deg) translateY(-70px) translateZ(-20px);
580}