Projekt

Obecné

Profil

Stáhnout (20.9 KB) Statistiky
| Větev: | Revize:
1
@import 'bootstrap-4.4.1/_functions.scss';
2
@import 'bootstrap-4.4.1/_variables.scss';
3
@import 'bootstrap-4.4.1/mixins/_breakpoints.scss';
4

    
5
$images-dir: '../img/';
6

    
7
@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
8

    
9
html, body {
10
  font-family: 'Be Vietnam', sans-serif;
11
  color: #fff;
12
  position: relative;
13
  height: 96.2%;
14
  background: #242C6B;
15

    
16
  &.intro {
17
    @include media-breakpoint-down(sm) {
18
      height: calc(100% - 45px);
19
    }
20
  }
21
}
22

    
23
header {
24
  height: 70px;
25
  background: #0048A9;
26

    
27
  .logo {
28
    width: 450px;
29
    height: 181px;
30
    position: absolute;
31
    top: 70px;
32
    left: 0;
33
    z-index: 2;
34
    background: url($images-dir + 'header-bg.png');
35

    
36
    @media (max-width: 1400px) {
37
      display: none;
38
    }
39

    
40
    img {
41
      height: 100px;
42
      position: relative;
43
      top: -50px;
44
      left: 50px;
45
    }
46
  }
47

    
48
  nav.navbar {
49
    height: 70px;
50
    position: relative;
51
  }
52

    
53
  .navbar-toggler-icon {
54
    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");
55
  }
56

    
57
  .navbar-brand.shifted {
58
    @media (min-width: 1401px) {
59
      position: absolute;
60
      top: 0;
61
      left: 450px;
62
    }
63

    
64
    @include media-breakpoint-down(lg) {
65
      left: 20px;
66
    }
67
  }
68

    
69
  @include media-breakpoint-down(md) {
70
    #navigation {
71
      width: 100%;
72
      padding: 20px;
73
      position: absolute;
74
      top: 70px;
75
      left: 0;
76
      z-index: 1001;
77
      opacity: .98;
78
      background: #004fb3;
79
    }
80
  }
81

    
82
  .nav-item {
83
    margin-right: 40px;
84

    
85
    @media (max-width: 1480px) {
86
      margin-right: 30px;
87
    }
88

    
89
    @media (max-width: 1440px) {
90
      margin-right: 15px;
91
    }
92

    
93
    @include media-breakpoint-down(lg) {
94
      margin-right: 30px;
95
    }
96

    
97
    @include media-breakpoint-down(md) {
98
      margin-right: 0;
99
    }
100

    
101
    .active {
102
      font-weight: 800;
103
    }
104

    
105
    &.button {
106
      .nav-link {
107
        padding-left: 22px;
108
        padding-right: 22px;
109
        border: 1px solid #fff;
110
        border-radius: 20px;
111

    
112
        &:hover {
113
          background: #004fb3;
114
        }
115
      }
116
    }
117
  }
118

    
119
  .navbar-button {
120
    padding: .5rem 22px;
121
    margin-right: 40px;
122
    border: 1px solid #fff;
123
    border-radius: 20px;
124
    text-decoration: none;
125

    
126
    @include media-breakpoint-down(md) {
127
      display: none;
128
    }
129

    
130
    &:hover {
131
      background: #004fb3;
132
    }
133
  }
134

    
135
  .btn-secondary {
136
    height: 100%;
137
    font-size: 16px;
138
    text-transform: uppercase;
139
    font-weight: 800;
140
    letter-spacing: 0.4px;
141
    border-radius: 0;
142
    border: #0048A9;
143
    background: #004fb3;
144

    
145
    &:hover {
146
      background: #0048A9 !important;
147
    }
148
  }
149

    
150
  // NAVIGACE NA STRÁNCE S MAPOU
151
  &.map {
152
    @include media-breakpoint-down(md) {
153
      .navbar-nav {
154
        width: 100%;
155
      }
156
    }
157

    
158
    form {
159
      display: flex;
160
      margin: auto;
161
    }
162

    
163
    label {
164
      margin: 0 0 0 15px;
165
      font-size: 16px;
166
      font-weight: 800;
167
      letter-spacing: .4px;
168
    }
169

    
170
    input, .custom-select {
171
      letter-spacing: .4px;
172
      color: #fff;
173
      border-color: #0048A9;
174
      background: #0048A9;
175
    }
176

    
177
    .nav-item {
178
      margin: 0;
179
      border-right: 1px solid #1C6CC0;
180

    
181
      @include media-breakpoint-down(md) {
182
        margin-bottom: 20px;
183
        border: 0;
184
      }
185

    
186
      &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
187
        width: 300px;
188

    
189
        @media (max-width: 1500px) {
190
          width: 280px;
191
        }
192

    
193
        @media (max-width: 1400px) {
194
          width: 230px;
195
        }
196

    
197
        @media (max-width: 1400px) {
198
          max-width: 230px;
199
          width: auto;
200
        }
201

    
202
        @include media-breakpoint-down(md) {
203
          max-width: none;
204
        }
205
      }
206

    
207
      @include media-breakpoint-down(md) {
208
        .btn {
209
          width: 100%;
210
        }
211
      }
212
    }
213
  }
214
}
215

    
216
h1 {
217
  text-transform: uppercase;
218
  font-size: 21px;
219
  font-weight: 700;
220
  letter-spacing: 0.53px;
221

    
222
  @include media-breakpoint-up(lg) {
223
    line-height: 55px;
224
  }
225
}
226

    
227
h2 {
228
  font-size: 16px;
229
  font-weight: 400;
230
  letter-spacing: 0.4px;
231

    
232
  @include media-breakpoint-up(lg) {
233
    margin: 0;
234
  }
235
}
236

    
237
h3 {
238
  font-size: 38px;
239
  font-weight: 800;
240
  letter-spacing: 0.95px;
241

    
242
  @include media-breakpoint-down(xs) {
243
    font-size: 28px;
244
  }
245
}
246

    
247
a {
248
  color: #fff;
249
  outline: none;
250

    
251
  &:hover {
252
    color: #fff;
253
  }
254
}
255

    
256
hr {
257
  width: 300px;
258
  text-align: left;
259
  margin: 30px 0;
260
  border-top: 2px solid #fff;
261

    
262
  @include media-breakpoint-down(lg) {
263
    width: 90%;
264
  }
265

    
266
  @include media-breakpoint-down(xs) {
267
    margin: 15px 0;
268
  }
269
}
270

    
271
.swiper-container {
272
  height: 100%;
273
  position: relative;
274
}
275

    
276
.swiper-slide {
277
  display: flex;
278
  justify-content: center;
279
  align-items: center;
280

    
281
  &.slide-bg-1 {
282
    background: url($images-dir + 'bg-1.jpg') no-repeat top center;
283
    background-size: cover;
284
  }
285

    
286
  &.slide-bg-2 {
287
    background: url($images-dir + 'bg-2.jpg') no-repeat bottom center;
288
    background-size: cover;
289
  }
290

    
291
  &.slide-bg-3 {
292
    background: url($images-dir + 'bg-3.jpg') no-repeat bottom center;
293
    background-size: cover;
294

    
295
    .slide-text {
296
      width: 100%;
297
    }
298
  }
299

    
300
  @include media-breakpoint-down(sm) {
301
    .container {
302
      max-width: 100%;
303
      height: 100%;
304
      overflow-y: scroll;
305
    }
306
  }
307
}
308

    
309
// TEXT VE SLIDU
310
.slide-text {
311
  width: 600px;
312
  padding-bottom: 160px;
313
  position: relative;
314

    
315
  @include media-breakpoint-down(lg) {
316
    width: 100%;
317
  }
318

    
319
  @include media-breakpoint-down(lg) {
320
    padding-bottom: 80px;
321
  }
322

    
323
  .slide-index {
324
    display: inline-block;
325
    padding-bottom: 20px;
326
    font-size: 72px;
327
    font-weight: 800;
328

    
329
    @include media-breakpoint-down(xs) {
330
      padding-bottom: 10px;
331
      font-size: 48px;
332
    }
333
  }
334

    
335
  .btn-primary {
336
    z-index: 1000;
337

    
338
    &:after {
339
      content: "";
340
      display: inline-block;
341
      width: 10px;
342
      height: 16px;
343
      position: absolute;
344
      top: 16px;
345
      right: 20px;
346
      background: url($images-dir + 'btn-play.svg') no-repeat top right;
347
    }
348
  }
349

    
350
  p {
351
    font-size: 18px;
352
    font-weight: 600;
353

    
354
    @include media-breakpoint-down(xs) {
355
      font-size: 16px;
356
    }
357

    
358
    a {
359
      text-decoration: underline;
360

    
361
      &:hover {
362
        text-decoration: none;
363
      }
364
    }
365
  }
366
}
367

    
368
// STRÁNKOVÁNÍ (TLAČÍTKA) SLIDŮ
369
.swiper-pagination-buttons {
370
  width: 200px;
371
  height: 56px;
372
  padding: 6px;
373
  position: absolute;
374
  right: 150px;
375
  bottom: 20px;
376
  z-index: 1;
377
  border-radius: 100px;
378
  background: #0B155A;
379

    
380
  @include media-breakpoint-down(lg) {
381
    right: 20px;
382
  }
383

    
384
  @include media-breakpoint-down(sm) {
385
    width: 120px;
386
  }
387

    
388
  @include media-breakpoint-down(xs) {
389
    bottom: 10px;
390
  }
391

    
392
  .btn-prev, .btn-next {
393
    display: inline-block;
394
    width: 45px;
395
    height: 45px;
396
    position: relative;
397
    border-radius: 50%;
398
    border: 2px solid #fff;
399

    
400
    &:after {
401
      content: "";
402
      display: inline-block;
403
      width: 7px;
404
      height: 12px;
405
      position: absolute;
406
      top: calc(50% - 6px);
407
      left: calc(50% - 4px);
408
    }
409
  }
410

    
411
  .btn-prev:after {
412
    background: url($images-dir + 'btn-prev.svg') no-repeat top right;
413
  }
414

    
415
  .btn-next {
416
    float: right;
417

    
418
    &:after {
419
      background: url($images-dir + 'btn-next.svg') no-repeat top right;
420
    }
421
  }
422
}
423

    
424
// STRÁNKOVÁNÍ (POZICE) SLIDŮ
425
.swiper-pagination-bullets {
426
  display: inline-block;
427
  width: auto !important;
428
  height: 30px;
429
  position: absolute;
430
  left: 20px !important;
431
  bottom: 30px !important;
432
  border-radius: 100px;
433
  opacity: 0.8;
434
  background: #0B155A;
435

    
436
  @include media-breakpoint-up(lg) {
437
    left: 50% !important;
438
    transform: translateX(-50%);
439
  }
440

    
441
  @include media-breakpoint-down(xs) {
442
    display: none;
443
  }
444

    
445
  &:before {
446
    content: "";
447
    width: 100px;
448
    position: absolute;
449
    top: 13px;
450
    left: 15px;
451
    z-index: 1;
452
    border-top: 2px solid #fff;
453
  }
454

    
455
  .swiper-pagination-bullet {
456
    width: 20px;
457
    height: 20px;
458
    position: relative;
459
    margin: 4px 15px !important;
460
    opacity: 1;
461
    border: 2px solid #0B155A;
462
    background: #0B155A;
463

    
464
    &:before {
465
      content: "";
466
      display: inline-block;
467
      width: 6px;
468
      height: 6px;
469
      position: absolute;
470
      top: 5px;
471
      left: 5px;
472
      border-radius: 50%;
473
      background: #fff;
474
    }
475

    
476
    &:first-of-type {
477
      margin-left: 5px !important;
478
    }
479

    
480
    &:last-of-type {
481
      margin-right: 5px !important;
482
    }
483
  }
484

    
485
  .swiper-pagination-bullet-active {
486
    border: 2px solid #fff;
487
  }
488
}
489

    
490
.btn-primary {
491
  width: 300px;
492
  height: 50px;
493
  line-height: 32px;
494
  position: relative;
495
  padding-left: 30px;
496
  margin-top: 40px;
497
  text-align: left;
498
  font-size: 16px;
499
  text-transform: uppercase;
500
  letter-spacing: 0.4px;
501
  border-radius: 30px;
502
  border: 1px solid #0B155A;
503
  background: #0B155A;
504

    
505
  &:hover, &:focus, &:active {
506
    border: 1px solid #0048A9;
507
    background: #0048A9 !important;
508
  }
509

    
510
  @include media-breakpoint-down(xs) {
511
    width: 100%;
512
    max-width: 270px;
513
    height: auto;
514
    margin-top: 20px;
515
  }
516
}
517

    
518
.btn-secondary {
519
  background: #0B155A;
520

    
521
  &:hover, &:focus, &:active {
522
    background: #7378A0 !important;
523
  }
524
}
525

    
526
// UKÁZKOVÉ BODY NA MAPĚ
527
.map-point {
528
  width: 50px;
529
  height: 50px;
530
  z-index: 1;
531
  position: absolute;
532
  border-radius: 50%;
533
  cursor: pointer;
534
  border: 2px solid #fff;
535

    
536
  @media not all and (min-width: 1900px) and (max-width: 2100px) {
537
    display: none;
538
  }
539

    
540
  &:before {
541
    content: "";
542
    display: inline-block;
543
    width: 16px;
544
    height: 16px;
545
    position: absolute;
546
    top: calc(50% - 8px);
547
    left: calc(50% - 8px);
548
    background: url($images-dir + 'map-point-plus.svg') no-repeat;
549
  }
550

    
551
  &:hover {
552
    &:before {
553
      z-index: 1;
554
      top: calc(50% - 1px);
555
      background: url($images-dir + 'map-point-minus.svg') no-repeat;
556
    }
557

    
558
    .desc {
559
      display: block;
560
      width: 220px;
561
      padding: 10px 20px;
562
      z-index: 0;
563
      opacity: 0.75;
564
      border-radius: 25px 0 25px 0;
565
      background: #0B155A;
566
    }
567
  }
568

    
569
  .desc {
570
    display: none;
571
  }
572

    
573
  p {
574
    font-size: 14px;
575
    font-weight: 400;
576

    
577
    &:last-of-type {
578
      margin-bottom: 10px;
579
    }
580
  }
581

    
582
  strong {
583
    display: inline-block;
584
    width: 100%;
585
    padding: 0 0 20px 40px;
586
    font-size: 16px;
587
  }
588

    
589
  .circle {
590
    width: 50px;
591
    height: 50px;
592
    position: absolute;
593
    top: -2px;
594
    left: -2px;
595
    border-radius: 50%;
596
    border: 2px solid #fff;
597
  }
598

    
599
  &.point-1 {
600
    top: 455px;
601
    right: 32.5%;
602
  }
603

    
604
  &.point-2 {
605
    top: 235px;
606
    right: 18%;
607
  }
608

    
609
  &.point-3 {
610
    bottom: 430px;
611
    right: 20.8%;
612
  }
613
}
614

    
615
#heatmap {
616
  height: 100%;
617
}
618

    
619

    
620
// SEZNAM LOKACÍ NA MAPĚ
621
.map-locations {
622
  position: absolute;
623
  top: 95px;
624
  right: 25px;
625
  z-index: 1000;
626
  border-radius: 22px;
627
  background-color: rgba(11, 21, 90, .7);
628

    
629
  .mobile {
630
    display: none;
631
  }
632

    
633
  @include media-breakpoint-down(md) {
634
    top: 90px;
635
    right: 20px;
636

    
637
    .desktop {
638
      display: none;
639
    }
640

    
641
    .mobile {
642
      display: inline-block;
643
    }
644
  }
645

    
646
  @include media-breakpoint-down(xs) {
647
    max-width: 240px;
648
    max-height: 70%;
649
    top: 80px;
650
    right: 10px;
651
  }
652

    
653
  .menu {
654
    width: 100%;
655
    display: inline-block;
656
    position: relative;
657
    padding: 10px 60px 13px 16px;
658
    text-decoration: none;
659
    border-radius: 50px;
660
    opacity: 1;
661
    background: #0B155A;
662

    
663
    .circle {
664
      display: inline-block;
665
      width: 40px;
666
      height: 40px;
667
      position: absolute;
668
      top: 3px;
669
      right: 3px;
670
      border-radius: 50%;
671
      border: 2px solid #fff;
672

    
673
      &:after {
674
        content: "";
675
        display: inline-block;
676
        width: 16px;
677
        height: 16px;
678
        position: absolute;
679
        top: calc(50% - 8px);
680
        left: calc(50% - 8px);
681
        background: url($images-dir + 'map-point-plus.svg') no-repeat;
682
      }
683
    }
684
  }
685

    
686
  .locations {
687
    z-index: 1000;
688

    
689
    ul {
690
      margin-top: 10px;
691
      padding-left: 36px;
692
      padding-right: 20px;
693
      font-size: 15px;
694
      list-style-image: url($images-dir + 'li-bullet.svg');
695

    
696
      @include media-breakpoint-down(xs) {
697
        max-height: 244px;
698
        overflow-y: scroll;
699
        font-size: 13.5px;
700
      }
701
    }
702

    
703
    li {
704
      margin-bottom: 10px;
705
      cursor: pointer;
706

    
707
      &:hover {
708
        text-decoration: underline;
709
      }
710
    }
711
  }
712
}
713

    
714

    
715
// PŘEHRÁVAČ HEATMAPY
716
.player {
717
  width: 100%;
718
  display: flex;
719
  justify-content: center;
720
  align-items: center;
721
  position: absolute;
722
  left: 50%;
723
  transform: translateX(-50%);
724
  bottom: -40px;
725
  z-index: 1000;
726

    
727
  @include media-breakpoint-down(xs) {
728
    bottom: -30px;
729
  }
730

    
731
  .next, .prev, .play, .pause {
732
    display: inline-block;
733
    width: 42px;
734
    height: 42px;
735
    margin-right: 20px;
736
    position: relative;
737
    border-radius: 50%;
738
    opacity: .7;
739
    border: 2px solid #fff;
740
    box-shadow: 0 0 0 4px #0B155A;
741
    background: #0B155A;
742
    cursor: pointer;
743

    
744
    &:hover {
745
      opacity: 1;
746
    }
747

    
748
    &:after {
749
      content: "";
750
      display: inline-block;
751
      width: 7px;
752
      height: 12px;
753
      position: absolute;
754
      top: calc(50% - 6px);
755
      left: calc(50% - 4px);
756
    }
757
  }
758

    
759
  .play, .pause {
760
    width: 57px;
761
    height: 57px;
762
    opacity: 1;
763

    
764
    @include media-breakpoint-down(md) {
765
      order: 3;
766
    }
767

    
768
    &:hover {
769
      opacity: .7;
770
    }
771

    
772
    &:after {
773
      width: 10px;
774
      height: 16px;
775
      top: calc(50% - 8px);
776
    }
777
  }
778

    
779
  .play:after {
780
    left: calc(50% - 2px);
781
    background: url($images-dir + 'btn-play.svg') no-repeat;
782
  }
783

    
784
  .pause:after {
785
    left: calc(50% - 4px);
786
    background: url($images-dir + 'btn-pause.png') no-repeat;
787
  }
788

    
789
  .next {
790
    @include media-breakpoint-down(md) {
791
      order: 3;
792
    }
793

    
794
    @include media-breakpoint-down(xs) {
795
      margin-right: 0;
796
    }
797

    
798
    &:after {
799
      background: url($images-dir + 'btn-next.svg') no-repeat;
800
    }
801
  }
802

    
803
  .prev {
804
    @include media-breakpoint-down(md) {
805
      order: 2;
806
    }
807

    
808
    &:after {
809
      background: url($images-dir + 'btn-prev.svg') no-repeat;
810
    }
811
  }
812

    
813
  .datetime {
814
    display: flex;
815
    
816
    @media (max-width: 390px) {
817
      display: block;
818
      text-align: center;
819
      margin-right: 10px;
820
    }
821
  }
822

    
823
  .date {
824
    font-size: 15px;
825
    padding: 3px 12px 4px 12px;
826
    margin-right: 10px;
827
    text-align: center;
828
    border-radius: 15px;
829
    cursor: pointer;
830
    background: #0B155A;
831

    
832
    @media (max-width: 390px) {
833
      margin-right: 0;
834
    }
835

    
836
    &:hover {
837
      opacity: .7;
838
    }
839
  }
840

    
841
  .timeline {
842
    display: flex;
843
    height: 30px;
844
    flex-direction: row;
845
    position: relative;
846
    padding: 0 10px;
847
    border-radius: 100px;
848
    background-color: rgba(11, 21, 90, .7);
849

    
850
    @include media-breakpoint-down(md) {
851
      padding: 0;
852
      order: 1;
853
      margin-right: 20px;
854
    }
855

    
856
    @media (max-width: 390px) {
857
      display: inline-block;
858
      margin: 4px 0 0 0;
859
    }
860

    
861
    .hour {
862
      @include media-breakpoint-down(md) {
863
        display: none;
864
      }
865

    
866
      &:before {
867
        content: "";
868
        display: inline-block;
869
        width: 6px;
870
        height: 6px;
871
        border-radius: 50%;
872
        background: #fff;
873
      }
874

    
875
      &:after {
876
        content: "";
877
        display: inline-block;
878
        position: relative;
879
        top: -2px;
880
        width: 20px;
881
        height: 2px;
882
        background: #fff;
883
      }
884
    }
885

    
886
    .end-dot:before {
887
      content: "";
888
      display: inline-block;
889
      width: 6px;
890
      height: 6px;
891
      border-radius: 50%;
892
      background: #fff;
893

    
894
      @include media-breakpoint-down(md) {
895
        display: none;
896
      }
897
    }
898
  }
899

    
900
  .time {
901
    display: flex;
902
    justify-content: center;
903
    align-items: center;
904
    width: 64px;
905
    font-size: 15px;
906
    padding: 3px 0 4px 0;
907
    z-index: 1000;
908
    border-radius: 15px;
909
    background: #0B155A;
910

    
911
    @include media-breakpoint-up(lg) {
912
      position: absolute;
913

    
914
      &.hour-0 {left: 0;}
915
      &.hour-1 {left: 25px;}
916
      &.hour-2 {left: 50px;}
917
      &.hour-3 {left: 75px;}
918
      &.hour-4 {left: 100px;}
919
      &.hour-5 {left: 125px;}
920
      &.hour-6 {left: 150px;}
921
      &.hour-7 {left: 175px;}
922
      &.hour-8 {left: 200px;}
923
      &.hour-9 {left: 225px;}
924
      &.hour-10 {left: 250px;}
925
      &.hour-11 {left: 275px;}
926
      &.hour-12 {left: 300px;}
927
      &.hour-13 {left: 325px;}
928
      &.hour-14 {left: 350px;}
929
      &.hour-15 {left: 375px;}
930
      &.hour-16 {left: 400px;}
931
      &.hour-17 {left: 425px;}
932
      &.hour-18 {left: 450px;}
933
      &.hour-19 {left: 475px;}
934
      &.hour-20 {left: 500px;}
935
      &.hour-21 {left: 525px;}
936
      &.hour-22 {left: 550px;}
937
      &.hour-23 {left: 585px;}
938
    }
939
  }
940
}
941

    
942

    
943
.slide-background {
944
  width: 650px;
945
  height: 290px;
946
  z-index: 1;
947
  position: absolute;
948
  bottom: 0;
949
  left: 0;
950
  background: url($images-dir + 'footer-bg.svg') no-repeat;
951

    
952
  @include media-breakpoint-down(md) {
953
    
954
    width: 320px;
955
    height: 143px;
956
    background-size: 100%;
957
  }
958
}
959

    
960

    
961
// COPYRIGHT
962
div.copyright {
963
  p {
964
    font-weight: 400;
965
  }
966

    
967
  span {
968
    font-size: 17px;
969
  }
970
}
971

    
972

    
973
// LOGA V SEKCI "O PROJEKTU"
974
p.logos-partners {
975
  margin-top: 40px;
976
  text-align: right;
977

    
978
  a {
979
    text-decoration: none;
980

    
981
    img {
982
      margin-left: 50px;
983
      height: 80px;
984

    
985
      @media only screen and (max-width: 430px) {
986
        height: 70px;
987
        margin-left: 0;
988
      }
989

    
990
      @media only screen and (max-width: 340px) {
991
        height: 60px;
992
      }
993
    }
994

    
995
    &:first-of-type img {
996
      margin-left: 0;
997
    }
998
  }
999
}
1000

    
1001
// INFORMACE O KONKRÉTNÍM BODĚ V HEATMAPĚ
1002
.leaflet-popup-content-wrapper, .leaflet-popup-tip {
1003
  font-family: 'Be Vietnam', sans-serif;
1004
  text-align: center;
1005
  color: #fff;
1006
  background-color: #0b155a !important;
1007
}
1008

    
1009
.leaflet-popup-content-wrapper {
1010
  .leaflet-popup-content strong {
1011
    display: inline-block;
1012
    margin-bottom: 8px;
1013
  }
1014

    
1015
  .popup-controls {
1016
    display: flex;
1017
    margin: 1em 0 1em 0;
1018

    
1019
    .circle-button {
1020
      height: 32px;
1021
      width: 32px;
1022
      border: 0;
1023
      border-radius: 24px;
1024
      background: url($images-dir + 'btn-prev.svg') rgba(255, 255, 255, .1) no-repeat center center;
1025
      transition: background 0.3s ease-out;
1026
      outline: none !important;
1027

    
1028
      &:hover {
1029
        background: url($images-dir + 'btn-prev.svg') rgba(125, 125, 125, .1) no-repeat center center;
1030
      }
1031
      
1032
      &.next {
1033
        background: url($images-dir + 'btn-next.svg') rgba(255, 255, 255, .1) no-repeat center center;
1034

    
1035
        &:hover {
1036
          background: url($images-dir + 'btn-next.svg') rgba(125, 125, 125, .1) no-repeat center center;
1037
        }
1038
      }
1039
    }
1040
  }
1041

    
1042
  #number-info {
1043
    font-family: monospace;
1044
    font-size: 24pt;
1045
    font-weight: 700;
1046
  }
1047

    
1048
  #count-info {
1049
    margin: auto;
1050
    color: #fff;
1051
    background-color: #0b155a;
1052
  }
1053
}
1054

    
1055
// ÚPRAVA VZHLEDU HLAVIČKY NA STRÁNCE S HEATMAPOU
1056
header.map .nav-item {
1057
  padding: 5px;
1058
  margin-top: auto;
1059
  margin-bottom: auto;
1060

    
1061
  &:nth-child(3), &:last-child{
1062
    border: 0;
1063
  }
1064

    
1065
  .btn-secondary {
1066
    outline: none;
1067
    border-radius: 50px;
1068
    height: 40px;
1069
    margin-left: 10px;
1070
    font-size: 11pt;
1071
    padding-left: 20px;
1072
    padding-right: 20px;
1073
    padding-top: 3px;
1074
    transition: all 0.2s ease-out;
1075
    color: #0048a9;
1076
    background: rgba(255, 255, 255, 1);
1077
    -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1078
    -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1079
    box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
1080

    
1081
    @media (max-width: 991.98px) {
1082
      border-radius: .25rem;
1083
      margin-left: 0px;
1084
      margin-top: 10px;
1085
      margin-bottom: -10px;
1086
    }
1087
    
1088
    &:hover {
1089
      color: #0048a9;
1090
      background: rgba(255, 255, 255, 1) !important;
1091
      -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1092
      -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1093
      box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
1094
    }
1095

    
1096
    &:active, &:focus {
1097
      background: rgba(240, 240, 240, 1) !important;
1098
      color: #0048a9 !important;
1099
    }
1100
  }
1101

    
1102
  input {
1103
    &:hover {
1104
      background: rgba(255, 255, 255, .2);
1105
    }
1106

    
1107
    &:focus {
1108
      background: #fff;
1109
      color: #000;
1110
    }
1111
  }
1112

    
1113
  select {
1114
    &:hover {
1115
      cursor: pointer;
1116
      background: rgba(255, 255, 255, .2);
1117

    
1118
      option {
1119
        background: #0048a9;
1120
      }
1121
    }
1122

    
1123
    &:focus {
1124
      background: #0048a9;
1125
      color: white;
1126
    }
1127
  }
1128
}
(5-5/6)