Projekt

Obecné

Profil

Stáhnout (21 KB) Statistiky
| Větev: | Revize:
1
@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap");
2
html, body {
3
  font-family: 'Be Vietnam', sans-serif;
4
  color: #fff;
5
  position: relative;
6
  height: 96.2%;
7
  background: #242C6B;
8
}
9

    
10
@media (max-width: 767.98px) {
11
  html.intro, body.intro {
12
    height: calc(100% - 45px);
13
  }
14
}
15

    
16
header {
17
  height: 70px;
18
  background: #0048A9;
19
}
20

    
21
header .logo {
22
  width: 450px;
23
  height: 181px;
24
  position: absolute;
25
  top: 70px;
26
  left: 0;
27
  z-index: 2;
28
  background: url("../img/header-bg.png");
29
}
30

    
31
@media (max-width: 1400px) {
32
  header .logo {
33
    display: none;
34
  }
35
}
36

    
37
header .logo img {
38
  height: 100px;
39
  position: relative;
40
  top: -50px;
41
  left: 50px;
42
}
43

    
44
header nav.navbar {
45
  height: 70px;
46
  position: relative;
47
}
48

    
49
header .navbar-toggler-icon {
50
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgb(255,255,255)' stroke-width='3' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
51
}
52

    
53
@media (min-width: 1401px) {
54
  header .navbar-brand.shifted {
55
    position: absolute;
56
    top: 0;
57
    left: 450px;
58
  }
59
}
60

    
61
@media (max-width: 1199.98px) {
62
  header .navbar-brand.shifted {
63
    left: 20px;
64
  }
65
}
66

    
67
@media (max-width: 991.98px) {
68
  header #navigation {
69
    width: 100%;
70
    padding: 20px;
71
    position: absolute;
72
    top: 70px;
73
    left: 0;
74
    z-index: 1001;
75
    opacity: .98;
76
    background: #004fb3;
77
  }
78
}
79

    
80
header .nav-item {
81
  margin-right: 40px;
82
}
83

    
84
@media (max-width: 1480px) {
85
  header .nav-item {
86
    margin-right: 30px;
87
  }
88
}
89

    
90
@media (max-width: 1440px) {
91
  header .nav-item {
92
    margin-right: 15px;
93
  }
94
}
95

    
96
@media (max-width: 1199.98px) {
97
  header .nav-item {
98
    margin-right: 30px;
99
  }
100
}
101

    
102
@media (max-width: 991.98px) {
103
  header .nav-item {
104
    margin-right: 0;
105
  }
106
}
107

    
108
header .nav-item .active {
109
  font-weight: 800;
110
}
111

    
112
header .nav-item.button .nav-link {
113
  padding-left: 22px;
114
  padding-right: 22px;
115
  border: 1px solid #fff;
116
  border-radius: 20px;
117
}
118

    
119
header .nav-item.button .nav-link:hover {
120
  background: #004fb3;
121
}
122

    
123
header .navbar-button {
124
  padding: .5rem 22px;
125
  margin-right: 40px;
126
  border: 1px solid #fff;
127
  border-radius: 20px;
128
  text-decoration: none;
129
}
130

    
131
@media (max-width: 991.98px) {
132
  header .navbar-button {
133
    display: none;
134
  }
135
}
136

    
137
header .navbar-button:hover {
138
  background: #004fb3;
139
}
140

    
141
header .btn-secondary {
142
  height: 100%;
143
  font-size: 16px;
144
  text-transform: uppercase;
145
  font-weight: 800;
146
  letter-spacing: 0.4px;
147
  border-radius: 0;
148
  border: #0048A9;
149
  background: #004fb3;
150
}
151

    
152
header .btn-secondary:hover {
153
  background: #0048A9 !important;
154
}
155

    
156
@media (max-width: 991.98px) {
157
  header.map .navbar-nav {
158
    width: 100%;
159
  }
160
}
161

    
162
header.map form {
163
  display: flex;
164
  margin: auto;
165
}
166

    
167
header.map label {
168
  margin: 0 0 0 15px;
169
  font-size: 16px;
170
  font-weight: 800;
171
  letter-spacing: .4px;
172
}
173

    
174
header.map input, header.map .custom-select {
175
  letter-spacing: .4px;
176
  color: #fff;
177
  border-color: #0048A9;
178
  background: #0048A9;
179
}
180

    
181
header.map .nav-item {
182
  margin: 0;
183
  border-right: 1px solid #1C6CC0;
184
}
185

    
186
@media (max-width: 991.98px) {
187
  header.map .nav-item {
188
    margin-bottom: 20px;
189
    border: 0;
190
  }
191
}
192

    
193
header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
194
  width: 300px;
195
}
196

    
197
@media (max-width: 1500px) {
198
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
199
    width: 280px;
200
  }
201
}
202

    
203
@media (max-width: 1400px) {
204
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
205
    width: 230px;
206
  }
207
}
208

    
209
@media (max-width: 1400px) {
210
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
211
    max-width: 230px;
212
    width: auto;
213
  }
214
}
215

    
216
@media (max-width: 991.98px) {
217
  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
218
    max-width: none;
219
  }
220
}
221

    
222
@media (max-width: 991.98px) {
223
  header.map .nav-item .btn {
224
    width: 100%;
225
  }
226
}
227

    
228
h1 {
229
  text-transform: uppercase;
230
  font-size: 21px;
231
  font-weight: 700;
232
  letter-spacing: 0.53px;
233
}
234

    
235
@media (min-width: 992px) {
236
  h1 {
237
    line-height: 55px;
238
  }
239
}
240

    
241
h2 {
242
  font-size: 16px;
243
  font-weight: 400;
244
  letter-spacing: 0.4px;
245
}
246

    
247
@media (min-width: 992px) {
248
  h2 {
249
    margin: 0;
250
  }
251
}
252

    
253
h3 {
254
  font-size: 38px;
255
  font-weight: 800;
256
  letter-spacing: 0.95px;
257
}
258

    
259
@media (max-width: 575.98px) {
260
  h3 {
261
    font-size: 28px;
262
  }
263
}
264

    
265
a {
266
  color: #fff;
267
  outline: none;
268
}
269

    
270
a:hover {
271
  color: #fff;
272
}
273

    
274
hr {
275
  width: 300px;
276
  text-align: left;
277
  margin: 30px 0;
278
  border-top: 2px solid #fff;
279
}
280

    
281
@media (max-width: 1199.98px) {
282
  hr {
283
    width: 90%;
284
  }
285
}
286

    
287
@media (max-width: 575.98px) {
288
  hr {
289
    margin: 15px 0;
290
  }
291
}
292

    
293
.swiper-container {
294
  height: 100%;
295
  position: relative;
296
}
297

    
298
.swiper-slide {
299
  display: flex;
300
  justify-content: center;
301
  align-items: center;
302
}
303

    
304
.swiper-slide.slide-bg-1 {
305
  background: url("../img/bg-1.jpg") no-repeat top center;
306
  background-size: cover;
307
}
308

    
309
.swiper-slide.slide-bg-2 {
310
  background: url("../img/bg-2.jpg") no-repeat bottom center;
311
  background-size: cover;
312
}
313

    
314
.swiper-slide.slide-bg-3 {
315
  background: url("../img/bg-3.jpg") no-repeat bottom center;
316
  background-size: cover;
317
}
318

    
319
.swiper-slide.slide-bg-3 .slide-text {
320
  width: 100%;
321
}
322

    
323
@media (max-width: 767.98px) {
324
  .swiper-slide .container {
325
    max-width: 100%;
326
    height: 100%;
327
    overflow-y: scroll;
328
  }
329
}
330

    
331
.slide-text {
332
  width: 600px;
333
  padding-bottom: 160px;
334
  position: relative;
335
}
336

    
337
@media (max-width: 1199.98px) {
338
  .slide-text {
339
    width: 100%;
340
  }
341
}
342

    
343
@media (max-width: 1199.98px) {
344
  .slide-text {
345
    padding-bottom: 80px;
346
  }
347
}
348

    
349
.slide-text .slide-index {
350
  display: inline-block;
351
  padding-bottom: 20px;
352
  font-size: 72px;
353
  font-weight: 800;
354
}
355

    
356
@media (max-width: 575.98px) {
357
  .slide-text .slide-index {
358
    padding-bottom: 10px;
359
    font-size: 48px;
360
  }
361
}
362

    
363
.slide-text .btn-primary {
364
  z-index: 1000;
365
}
366

    
367
.slide-text .btn-primary:after {
368
  content: "";
369
  display: inline-block;
370
  width: 10px;
371
  height: 16px;
372
  position: absolute;
373
  top: 16px;
374
  right: 20px;
375
  background: url("../img/btn-play.svg") no-repeat top right;
376
}
377

    
378
.slide-text p {
379
  font-size: 18px;
380
  font-weight: 600;
381
}
382

    
383
@media (max-width: 575.98px) {
384
  .slide-text p {
385
    font-size: 16px;
386
  }
387
}
388

    
389
.slide-text p a {
390
  text-decoration: underline;
391
}
392

    
393
.slide-text p a:hover {
394
  text-decoration: none;
395
}
396

    
397
.swiper-pagination-buttons {
398
  width: 200px;
399
  height: 56px;
400
  padding: 6px;
401
  position: absolute;
402
  right: 150px;
403
  bottom: 20px;
404
  z-index: 1;
405
  border-radius: 100px;
406
  background: #0B155A;
407
}
408

    
409
@media (max-width: 1199.98px) {
410
  .swiper-pagination-buttons {
411
    right: 20px;
412
  }
413
}
414

    
415
@media (max-width: 767.98px) {
416
  .swiper-pagination-buttons {
417
    width: 120px;
418
  }
419
}
420

    
421
@media (max-width: 575.98px) {
422
  .swiper-pagination-buttons {
423
    bottom: 10px;
424
  }
425
}
426

    
427
.swiper-pagination-buttons .btn-prev, .swiper-pagination-buttons .btn-next {
428
  display: inline-block;
429
  width: 45px;
430
  height: 45px;
431
  position: relative;
432
  border-radius: 50%;
433
  border: 2px solid #fff;
434
}
435

    
436
.swiper-pagination-buttons .btn-prev:after, .swiper-pagination-buttons .btn-next:after {
437
  content: "";
438
  display: inline-block;
439
  width: 7px;
440
  height: 12px;
441
  position: absolute;
442
  top: calc(50% - 6px);
443
  left: calc(50% - 4px);
444
}
445

    
446
.swiper-pagination-buttons .btn-prev:after {
447
  background: url("../img/btn-prev.svg") no-repeat top right;
448
}
449

    
450
.swiper-pagination-buttons .btn-next {
451
  float: right;
452
}
453

    
454
.swiper-pagination-buttons .btn-next:after {
455
  background: url("../img/btn-next.svg") no-repeat top right;
456
}
457

    
458
.swiper-pagination-bullets {
459
  display: inline-block;
460
  width: auto !important;
461
  height: 30px;
462
  position: absolute;
463
  left: 20px !important;
464
  bottom: 30px !important;
465
  border-radius: 100px;
466
  opacity: 0.8;
467
  background: #0B155A;
468
}
469

    
470
@media (min-width: 992px) {
471
  .swiper-pagination-bullets {
472
    left: 50% !important;
473
    transform: translateX(-50%);
474
  }
475
}
476

    
477
@media (max-width: 575.98px) {
478
  .swiper-pagination-bullets {
479
    display: none;
480
  }
481
}
482

    
483
.swiper-pagination-bullets:before {
484
  content: "";
485
  width: 100px;
486
  position: absolute;
487
  top: 13px;
488
  left: 15px;
489
  z-index: 1;
490
  border-top: 2px solid #fff;
491
}
492

    
493
.swiper-pagination-bullets .swiper-pagination-bullet {
494
  width: 20px;
495
  height: 20px;
496
  position: relative;
497
  margin: 4px 15px !important;
498
  opacity: 1;
499
  border: 2px solid #0B155A;
500
  background: #0B155A;
501
}
502

    
503
.swiper-pagination-bullets .swiper-pagination-bullet:before {
504
  content: "";
505
  display: inline-block;
506
  width: 6px;
507
  height: 6px;
508
  position: absolute;
509
  top: 5px;
510
  left: 5px;
511
  border-radius: 50%;
512
  background: #fff;
513
}
514

    
515
.swiper-pagination-bullets .swiper-pagination-bullet:first-of-type {
516
  margin-left: 5px !important;
517
}
518

    
519
.swiper-pagination-bullets .swiper-pagination-bullet:last-of-type {
520
  margin-right: 5px !important;
521
}
522

    
523
.swiper-pagination-bullets .swiper-pagination-bullet-active {
524
  border: 2px solid #fff;
525
}
526

    
527
.btn-primary {
528
  width: 300px;
529
  height: 50px;
530
  line-height: 32px;
531
  position: relative;
532
  padding-left: 30px;
533
  margin-top: 40px;
534
  text-align: left;
535
  font-size: 16px;
536
  text-transform: uppercase;
537
  letter-spacing: 0.4px;
538
  border-radius: 30px;
539
  border: 1px solid #0B155A;
540
  background: #0B155A;
541
}
542

    
543
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
544
  border: 1px solid #0048A9;
545
  background: #0048A9 !important;
546
}
547

    
548
@media (max-width: 575.98px) {
549
  .btn-primary {
550
    width: 100%;
551
    max-width: 270px;
552
    height: auto;
553
    margin-top: 20px;
554
  }
555
}
556

    
557
.btn-secondary {
558
  background: #0B155A;
559
}
560

    
561
.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
562
  background: #7378A0 !important;
563
}
564

    
565
.map-point {
566
  width: 50px;
567
  height: 50px;
568
  z-index: 1;
569
  position: absolute;
570
  border-radius: 50%;
571
  cursor: pointer;
572
  border: 2px solid #fff;
573
}
574

    
575
@media not all and (min-width: 1900px) and (max-width: 2100px) {
576
  .map-point {
577
    display: none;
578
  }
579
}
580

    
581
.map-point:before {
582
  content: "";
583
  display: inline-block;
584
  width: 16px;
585
  height: 16px;
586
  position: absolute;
587
  top: calc(50% - 8px);
588
  left: calc(50% - 8px);
589
  background: url("../img/map-point-plus.svg") no-repeat;
590
}
591

    
592
.map-point:hover:before {
593
  z-index: 1;
594
  top: calc(50% - 1px);
595
  background: url("../img/map-point-minus.svg") no-repeat;
596
}
597

    
598
.map-point:hover .desc {
599
  display: block;
600
  width: 220px;
601
  padding: 10px 20px;
602
  z-index: 0;
603
  opacity: 0.75;
604
  border-radius: 25px 0 25px 0;
605
  background: #0B155A;
606
}
607

    
608
.map-point .desc {
609
  display: none;
610
}
611

    
612
.map-point p {
613
  font-size: 14px;
614
  font-weight: 400;
615
}
616

    
617
.map-point p:last-of-type {
618
  margin-bottom: 10px;
619
}
620

    
621
.map-point strong {
622
  display: inline-block;
623
  width: 100%;
624
  padding: 0 0 20px 40px;
625
  font-size: 16px;
626
}
627

    
628
.map-point .circle {
629
  width: 50px;
630
  height: 50px;
631
  position: absolute;
632
  top: -2px;
633
  left: -2px;
634
  border-radius: 50%;
635
  border: 2px solid #fff;
636
}
637

    
638
.map-point.point-1 {
639
  top: 470px;
640
  right: 32.2%;
641
}
642

    
643
.map-point.point-2 {
644
  top: 688px;
645
  right: 21.2%;
646
}
647

    
648
.map-point.point-3 {
649
  bottom: 430px;
650
  right: 20.8%;
651
}
652

    
653
#heatmap {
654
  height: 100%;
655
}
656

    
657
.map-locations {
658
  position: absolute;
659
  top: 95px;
660
  right: 25px;
661
  z-index: 1000;
662
  border-radius: 22px;
663
  background-color: rgba(11, 21, 90, 0.7);
664
}
665

    
666
.map-locations .mobile {
667
  display: none;
668
}
669

    
670
@media (max-width: 991.98px) {
671
  .map-locations {
672
    top: 90px;
673
    right: 20px;
674
  }
675
  .map-locations .desktop {
676
    display: none;
677
  }
678
  .map-locations .mobile {
679
    display: inline-block;
680
  }
681
}
682

    
683
@media (max-width: 575.98px) {
684
  .map-locations {
685
    max-width: 240px;
686
    max-height: 70%;
687
    top: 80px;
688
    right: 10px;
689
  }
690
}
691

    
692
.map-locations .menu {
693
  width: 100%;
694
  display: inline-block;
695
  position: relative;
696
  padding: 10px 60px 13px 16px;
697
  text-decoration: none;
698
  border-radius: 50px;
699
  opacity: 1;
700
  background: #0B155A;
701
}
702

    
703
.map-locations .menu .circle {
704
  display: inline-block;
705
  width: 40px;
706
  height: 40px;
707
  position: absolute;
708
  top: 3px;
709
  right: 3px;
710
  border-radius: 50%;
711
  border: 2px solid #fff;
712
}
713

    
714
.map-locations .menu .circle:after {
715
  content: "";
716
  display: inline-block;
717
  width: 16px;
718
  height: 16px;
719
  position: absolute;
720
  top: calc(50% - 8px);
721
  left: calc(50% - 8px);
722
  background: url("../img/map-point-plus.svg") no-repeat;
723
}
724

    
725
.map-locations .locations {
726
  z-index: 1000;
727
}
728

    
729
.map-locations .locations ul {
730
  margin-top: 10px;
731
  padding-left: 36px;
732
  padding-right: 20px;
733
  font-size: 15px;
734
  list-style-image: url("../img/li-bullet.svg");
735
}
736

    
737
@media (max-width: 575.98px) {
738
  .map-locations .locations ul {
739
    max-height: 244px;
740
    overflow-y: scroll;
741
    font-size: 13.5px;
742
  }
743
}
744

    
745
.map-locations .locations li {
746
  margin-bottom: 10px;
747
  cursor: pointer;
748
}
749

    
750
.map-locations .locations li:hover {
751
  text-decoration: underline;
752
}
753

    
754
.player {
755
  width: 100%;
756
  display: flex;
757
  justify-content: center;
758
  align-items: center;
759
  position: absolute;
760
  left: 50%;
761
  transform: translateX(-50%);
762
  bottom: -40px;
763
  z-index: 1000;
764
}
765

    
766
@media (max-width: 575.98px) {
767
  .player {
768
    bottom: -30px;
769
  }
770
}
771

    
772
.player .next, .player .prev, .player .play, .player .pause {
773
  display: inline-block;
774
  width: 42px;
775
  height: 42px;
776
  margin-right: 20px;
777
  position: relative;
778
  border-radius: 50%;
779
  opacity: .7;
780
  border: 2px solid #fff;
781
  box-shadow: 0 0 0 4px #0B155A;
782
  background: #0B155A;
783
  cursor: pointer;
784
}
785

    
786
.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover {
787
  opacity: 1;
788
}
789

    
790
.player .next:after, .player .prev:after, .player .play:after, .player .pause:after {
791
  content: "";
792
  display: inline-block;
793
  width: 7px;
794
  height: 12px;
795
  position: absolute;
796
  top: calc(50% - 6px);
797
  left: calc(50% - 4px);
798
}
799

    
800
.player .play, .player .pause {
801
  width: 57px;
802
  height: 57px;
803
  opacity: 1;
804
}
805

    
806
@media (max-width: 991.98px) {
807
  .player .play, .player .pause {
808
    order: 3;
809
  }
810
}
811

    
812
.player .play:hover, .player .pause:hover {
813
  opacity: .7;
814
}
815

    
816
.player .play:after, .player .pause:after {
817
  width: 10px;
818
  height: 16px;
819
  top: calc(50% - 8px);
820
}
821

    
822
.player .play:after {
823
  left: calc(50% - 2px);
824
  background: url("../img/btn-play.svg") no-repeat;
825
}
826

    
827
.player .pause:after {
828
  left: calc(50% - 4px);
829
  background: url("../img/btn-pause.png") no-repeat;
830
}
831

    
832
@media (max-width: 991.98px) {
833
  .player .next {
834
    order: 3;
835
  }
836
}
837

    
838
@media (max-width: 575.98px) {
839
  .player .next {
840
    margin-right: 0;
841
  }
842
}
843

    
844
.player .next:after {
845
  background: url("../img/btn-next.svg") no-repeat;
846
}
847

    
848
@media (max-width: 991.98px) {
849
  .player .prev {
850
    order: 2;
851
  }
852
}
853

    
854
.player .prev:after {
855
  background: url("../img/btn-prev.svg") no-repeat;
856
}
857

    
858
.player .datetime {
859
  display: flex;
860
}
861

    
862
@media (max-width: 390px) {
863
  .player .datetime {
864
    display: block;
865
    text-align: center;
866
    margin-right: 10px;
867
  }
868
}
869

    
870
.player .date {
871
  font-size: 15px;
872
  padding: 3px 12px 4px 12px;
873
  margin-right: 10px;
874
  text-align: center;
875
  border-radius: 15px;
876
  cursor: pointer;
877
  background: #0B155A;
878
}
879

    
880
@media (max-width: 390px) {
881
  .player .date {
882
    margin-right: 0;
883
  }
884
}
885

    
886
.player .date:hover {
887
  opacity: .7;
888
}
889

    
890
.player .timeline {
891
  display: flex;
892
  height: 30px;
893
  flex-direction: row;
894
  position: relative;
895
  padding: 0 10px;
896
  border-radius: 100px;
897
  background-color: rgba(11, 21, 90, 0.7);
898
}
899

    
900
@media (max-width: 991.98px) {
901
  .player .timeline {
902
    padding: 0;
903
    order: 1;
904
    margin-right: 20px;
905
  }
906
}
907

    
908
@media (max-width: 390px) {
909
  .player .timeline {
910
    display: inline-block;
911
    margin: 4px 0 0 0;
912
  }
913
}
914

    
915
@media (max-width: 991.98px) {
916
  .player .timeline .hour {
917
    display: none;
918
  }
919
}
920

    
921
.player .timeline .hour:before {
922
  content: "";
923
  display: inline-block;
924
  width: 6px;
925
  height: 6px;
926
  border-radius: 50%;
927
  background: #fff;
928
}
929

    
930
.player .timeline .hour:after {
931
  content: "";
932
  display: inline-block;
933
  position: relative;
934
  top: -2px;
935
  width: 20px;
936
  height: 2px;
937
  background: #fff;
938
}
939

    
940
.player .timeline .end-dot:before {
941
  content: "";
942
  display: inline-block;
943
  width: 6px;
944
  height: 6px;
945
  border-radius: 50%;
946
  background: #fff;
947
}
948

    
949
@media (max-width: 991.98px) {
950
  .player .timeline .end-dot:before {
951
    display: none;
952
  }
953
}
954

    
955
.player .time {
956
  display: flex;
957
  justify-content: center;
958
  align-items: center;
959
  width: 64px;
960
  font-size: 15px;
961
  padding: 3px 0 4px 0;
962
  z-index: 1000;
963
  border-radius: 15px;
964
  background: #0B155A;
965
}
966

    
967
@media (min-width: 992px) {
968
  .player .time {
969
    position: absolute;
970
  }
971
  .player .time.hour-0 {
972
    left: 0;
973
  }
974
  .player .time.hour-1 {
975
    left: 25px;
976
  }
977
  .player .time.hour-2 {
978
    left: 50px;
979
  }
980
  .player .time.hour-3 {
981
    left: 75px;
982
  }
983
  .player .time.hour-4 {
984
    left: 100px;
985
  }
986
  .player .time.hour-5 {
987
    left: 125px;
988
  }
989
  .player .time.hour-6 {
990
    left: 150px;
991
  }
992
  .player .time.hour-7 {
993
    left: 175px;
994
  }
995
  .player .time.hour-8 {
996
    left: 200px;
997
  }
998
  .player .time.hour-9 {
999
    left: 225px;
1000
  }
1001
  .player .time.hour-10 {
1002
    left: 250px;
1003
  }
1004
  .player .time.hour-11 {
1005
    left: 275px;
1006
  }
1007
  .player .time.hour-12 {
1008
    left: 300px;
1009
  }
1010
  .player .time.hour-13 {
1011
    left: 325px;
1012
  }
1013
  .player .time.hour-14 {
1014
    left: 350px;
1015
  }
1016
  .player .time.hour-15 {
1017
    left: 375px;
1018
  }
1019
  .player .time.hour-16 {
1020
    left: 400px;
1021
  }
1022
  .player .time.hour-17 {
1023
    left: 425px;
1024
  }
1025
  .player .time.hour-18 {
1026
    left: 450px;
1027
  }
1028
  .player .time.hour-19 {
1029
    left: 475px;
1030
  }
1031
  .player .time.hour-20 {
1032
    left: 500px;
1033
  }
1034
  .player .time.hour-21 {
1035
    left: 525px;
1036
  }
1037
  .player .time.hour-22 {
1038
    left: 550px;
1039
  }
1040
  .player .time.hour-23 {
1041
    left: 585px;
1042
  }
1043
}
1044

    
1045
.slide-background {
1046
  width: 650px;
1047
  height: 290px;
1048
  z-index: 1;
1049
  position: absolute;
1050
  bottom: 0;
1051
  left: 0;
1052
  background: url("../img/footer-bg.svg") no-repeat;
1053
}
1054

    
1055
@media (max-width: 991.98px) {
1056
  .slide-background {
1057
    width: 320px;
1058
    height: 143px;
1059
    background-size: 100%;
1060
  }
1061
}
1062

    
1063
div.copyright p {
1064
  font-weight: 400;
1065
}
1066

    
1067
div.copyright span {
1068
  font-size: 17px;
1069
}
1070

    
1071
p.logos-partners {
1072
  margin-top: 40px;
1073
  text-align: right;
1074
}
1075

    
1076
p.logos-partners a {
1077
  text-decoration: none;
1078
}
1079

    
1080
p.logos-partners a img {
1081
  margin-left: 50px;
1082
  height: 80px;
1083
}
1084

    
1085
@media only screen and (max-width: 430px) {
1086
  p.logos-partners a img {
1087
    height: 70px;
1088
    margin-left: 0;
1089
  }
1090
}
1091

    
1092
@media only screen and (max-width: 340px) {
1093
  p.logos-partners a img {
1094
    height: 60px;
1095
  }
1096
}
1097

    
1098
p.logos-partners a:first-of-type img {
1099
  margin-left: 0;
1100
}
1101

    
1102
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
1103
  font-family: 'Be Vietnam', sans-serif;
1104
  text-align: center;
1105
  color: white;
1106
}
1107

    
1108
.leaflet-popup-content-wrapper .leaflet-popup-content strong {
1109
  display: inline-block;
1110
  margin-bottom: 8px;
1111
}
1112

    
1113
.leaflet-popup-content-wrapper .popup-controls {
1114
  display: flex;
1115
  margin: 1em 0 1em 0;
1116
}
1117

    
1118
.leaflet-popup-content-wrapper .popup-controls .circle-button {
1119
  height: 32px;
1120
  width: 32px;
1121
  border: 0;
1122
  border-radius: 24px;
1123
  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1124
  transition: background 0.3s ease-out;
1125
  outline: none !important;
1126
}
1127

    
1128
.leaflet-popup-content-wrapper .popup-controls .circle-button:hover {
1129
  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1130
}
1131

    
1132
.leaflet-popup-content-wrapper .popup-controls .circle-button.next {
1133
  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1134
}
1135

    
1136
.leaflet-popup-content-wrapper .popup-controls .circle-button.next:hover {
1137
  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1138
}
1139

    
1140
.leaflet-popup-content-wrapper #number-info {
1141
  font-family: monospace;
1142
  font-size: 24pt;
1143
  font-weight: 700;
1144
}
1145

    
1146
.leaflet-popup-content-wrapper #count-info {
1147
  margin: auto;
1148
  color: #fff;
1149
}
1150

    
1151
header.map .nav-item {
1152
  padding: 5px;
1153
  margin-top: auto;
1154
  margin-bottom: auto;
1155
}
1156

    
1157
header.map .nav-item:nth-child(3), header.map .nav-item:last-child {
1158
  border: 0;
1159
}
1160

    
1161
header.map .nav-item .btn-secondary {
1162
  outline: none;
1163
  border-radius: 50px;
1164
  height: 40px;
1165
  margin-left: 10px;
1166
  font-size: 11pt;
1167
  padding-left: 20px;
1168
  padding-right: 20px;
1169
  padding-top: 3px;
1170
  transition: all 0.2s ease-out;
1171
  color: #0048a9;
1172
  background: white;
1173
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1174
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1175
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1176
}
1177

    
1178
@media (max-width: 991.98px) {
1179
  header.map .nav-item .btn-secondary {
1180
    border-radius: .25rem;
1181
    margin-left: 0px;
1182
    margin-top: 10px;
1183
    margin-bottom: -10px;
1184
  }
1185
}
1186

    
1187
header.map .nav-item .btn-secondary:hover {
1188
  color: #0048a9;
1189
  background: white !important;
1190
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1191
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1192
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1193
}
1194

    
1195
header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
1196
  background: #f0f0f0 !important;
1197
  color: #0048a9 !important;
1198
}
1199

    
1200
header.map .nav-item input:hover {
1201
  background: rgba(255, 255, 255, 0.2);
1202
}
1203

    
1204
header.map .nav-item input:focus {
1205
  background: #fff;
1206
  color: #000;
1207
}
1208

    
1209
header.map .nav-item select:hover {
1210
  cursor: pointer;
1211
  background: rgba(255, 255, 255, 0.2);
1212
}
1213

    
1214
header.map .nav-item select:hover option {
1215
  background: #0048a9;
1216
}
1217

    
1218
header.map .nav-item select:focus {
1219
  background: #0048a9;
1220
  color: white;
1221
}
1222

    
1223
.custom-dropdown-item {
1224
  margin: 0px !important;
1225
}
1226

    
1227
.custom-dropdown-item .disabled {
1228
  cursor: not-allowed !important;
1229
}
1230

    
1231
.custom-control-label {
1232
  font-weight: 300 !important;
1233
  margin: 0px !important;
1234
}
1235

    
1236
.custom-dropdown {
1237
  cursor: not-allowed;
1238
}
(5-5/7)