Projekt

Obecné

Profil

Stáhnout (20.8 KB) Statistiky
| Větev: | Revize:
1 3c909967 Martin Sebela
@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 4e003182 Martin Sebela
  background: url("../img/bg-1.jpg") no-repeat top center;
306 3c909967 Martin Sebela
  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 4e003182 Martin Sebela
.swiper-slide.slide-bg-3 .slide-text {
320
  width: 100%;
321
}
322
323 3c909967 Martin Sebela
@media (max-width: 767.98px) {
324 4e003182 Martin Sebela
  .swiper-slide .container {
325 3c909967 Martin Sebela
    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 4e003182 Martin Sebela
@media not all and (min-width: 1900px) and (max-width: 2100px) {
576 3c909967 Martin Sebela
  .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 4e003182 Martin Sebela
  width: 220px;
601 3c909967 Martin Sebela
  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 31e22cb9 Martin Sebela
  top: 470px;
640
  right: 32.2%;
641 3c909967 Martin Sebela
}
642
643
.map-point.point-2 {
644 31e22cb9 Martin Sebela
  top: 688px;
645
  right: 21.2%;
646 3c909967 Martin Sebela
}
647
648
.map-point.point-3 {
649 4e003182 Martin Sebela
  bottom: 430px;
650
  right: 20.8%;
651 3c909967 Martin Sebela
}
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 4e003182 Martin Sebela
    max-height: 70%;
687 3c909967 Martin Sebela
    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 4e003182 Martin Sebela
    max-height: 244px;
740
    overflow-y: scroll;
741 3c909967 Martin Sebela
    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 4e003182 Martin Sebela
@media (max-width: 575.98px) {
839
  .player .next {
840
    margin-right: 0;
841
  }
842
}
843
844 3c909967 Martin Sebela
.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 4e003182 Martin Sebela
.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 3c909967 Martin Sebela
.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 4e003182 Martin Sebela
@media (max-width: 390px) {
909
  .player .timeline {
910
    display: inline-block;
911
    margin: 4px 0 0 0;
912
  }
913
}
914
915 3c909967 Martin Sebela
@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: #fff;
1106
  background-color: #0b155a !important;
1107
}
1108
1109
.leaflet-popup-content-wrapper .leaflet-popup-content strong {
1110
  display: inline-block;
1111
  margin-bottom: 8px;
1112
}
1113
1114
.leaflet-popup-content-wrapper .popup-controls {
1115
  display: flex;
1116
  margin: 1em 0 1em 0;
1117
}
1118
1119
.leaflet-popup-content-wrapper .popup-controls .circle-button {
1120
  height: 32px;
1121
  width: 32px;
1122
  border: 0;
1123
  border-radius: 24px;
1124
  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1125
  transition: background 0.3s ease-out;
1126
  outline: none !important;
1127
}
1128
1129
.leaflet-popup-content-wrapper .popup-controls .circle-button:hover {
1130
  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1131
}
1132
1133
.leaflet-popup-content-wrapper .popup-controls .circle-button.next {
1134
  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
1135
}
1136
1137
.leaflet-popup-content-wrapper .popup-controls .circle-button.next:hover {
1138
  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
1139
}
1140
1141
.leaflet-popup-content-wrapper #number-info {
1142
  font-family: monospace;
1143
  font-size: 24pt;
1144
  font-weight: 700;
1145
}
1146
1147
.leaflet-popup-content-wrapper #count-info {
1148
  margin: auto;
1149
  color: #fff;
1150
  background-color: #0b155a;
1151
}
1152
1153
header.map .nav-item {
1154
  padding: 5px;
1155
  margin-top: auto;
1156
  margin-bottom: auto;
1157
}
1158
1159
header.map .nav-item:nth-child(3), header.map .nav-item:last-child {
1160
  border: 0;
1161
}
1162
1163
header.map .nav-item .btn-secondary {
1164
  outline: none;
1165
  border-radius: 50px;
1166
  height: 40px;
1167
  margin-left: 10px;
1168
  font-size: 11pt;
1169
  padding-left: 20px;
1170
  padding-right: 20px;
1171
  padding-top: 3px;
1172
  transition: all 0.2s ease-out;
1173
  color: #0048a9;
1174
  background: white;
1175
  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1176
  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1177
  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1178
}
1179
1180
@media (max-width: 991.98px) {
1181
  header.map .nav-item .btn-secondary {
1182
    border-radius: .25rem;
1183
    margin-left: 0px;
1184
    margin-top: 10px;
1185
    margin-bottom: -10px;
1186
  }
1187
}
1188
1189
header.map .nav-item .btn-secondary:hover {
1190
  color: #0048a9;
1191
  background: white !important;
1192
  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1193
  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1194
  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1195
}
1196
1197
header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
1198
  background: #f0f0f0 !important;
1199
  color: #0048a9 !important;
1200
}
1201
1202
header.map .nav-item input:hover {
1203
  background: rgba(255, 255, 255, 0.2);
1204
}
1205
1206
header.map .nav-item input:focus {
1207
  background: #fff;
1208
  color: #000;
1209
}
1210
1211
header.map .nav-item select:hover {
1212
  cursor: pointer;
1213
  background: rgba(255, 255, 255, 0.2);
1214
}
1215
1216
header.map .nav-item select:hover option {
1217
  background: #0048a9;
1218
}
1219
1220
header.map .nav-item select:focus {
1221
  background: #0048a9;
1222
  color: white;
1223
}