Projekt

Obecné

Profil

Stáhnout (20.9 KB) Statistiky
| Větev: | Revize:
1 dd652e61 Martin Sebela
@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 500e20aa msebela
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 351696d5 Martin Sebela
  font-family: 'Be Vietnam', sans-serif;
11
  color: #fff;
12 500e20aa msebela
  position: relative;
13
  height: 96.2%;
14
  background: #242C6B;
15
16 351696d5 Martin Sebela
  &.intro {
17
    @include media-breakpoint-down(sm) {
18 3c909967 Martin Sebela
      height: calc(100% - 45px);
19 351696d5 Martin Sebela
    }
20 500e20aa msebela
  }
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 c236b33a msebela
      z-index: 1001;
77 dd652e61 Martin Sebela
      opacity: .98;
78 500e20aa msebela
      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 c236b33a msebela
  .navbar-button {
120
    padding: .5rem 22px;
121 351696d5 Martin Sebela
    margin-right: 40px;
122 c236b33a msebela
    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 500e20aa msebela
  .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 c236b33a msebela
    background: #004fb3;
144 500e20aa msebela
145
    &:hover {
146 c236b33a msebela
      background: #0048A9 !important;
147 500e20aa msebela
    }
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 dd652e61 Martin Sebela
      margin: auto;
161 500e20aa msebela
    }
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 c236b33a msebela
  outline: none;
250 500e20aa msebela
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 4e003182 Martin Sebela
    background: url($images-dir + 'bg-1.jpg') no-repeat top center;
283 500e20aa msebela
    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 212d3445 Martin Sebela
      width: 100%;
297 500e20aa msebela
    }
298
  }
299 4e003182 Martin Sebela
300
  @include media-breakpoint-down(sm) {
301
    .container {
302
      max-width: 100%;
303
      height: 100%;
304
      overflow-y: scroll;
305
    }
306
  }
307 500e20aa msebela
}
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 3c909967 Martin Sebela
    z-index: 1000;
337
338 500e20aa msebela
    &: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 212d3445 Martin Sebela
358
    a {
359
      text-decoration: underline;
360
361
      &:hover {
362
        text-decoration: none;
363
      }
364
    }
365 500e20aa msebela
  }
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 3c909967 Martin Sebela
  @include media-breakpoint-down(xs) {
389
    bottom: 10px;
390
  }
391
392 500e20aa msebela
  .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 4e003182 Martin Sebela
  @media not all and (min-width: 1900px) and (max-width: 2100px) {
537 500e20aa msebela
    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 4e003182 Martin Sebela
      width: 220px;
561 500e20aa msebela
      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 31e22cb9 Martin Sebela
    top: 470px;
601
    right: 32.2%;
602 500e20aa msebela
  }
603
604
  &.point-2 {
605 31e22cb9 Martin Sebela
    top: 688px;
606
    right: 21.2%;
607 500e20aa msebela
  }
608
609
  &.point-3 {
610 4e003182 Martin Sebela
    bottom: 430px;
611
    right: 20.8%;
612 500e20aa msebela
  }
613
}
614
615
#heatmap {
616
  height: 100%;
617
}
618
619 c236b33a msebela
620
// SEZNAM LOKACÍ NA MAPĚ
621
.map-locations {
622
  position: absolute;
623 3c909967 Martin Sebela
  top: 95px;
624
  right: 25px;
625 c236b33a msebela
  z-index: 1000;
626
  border-radius: 22px;
627
  background-color: rgba(11, 21, 90, .7);
628
629 dd652e61 Martin Sebela
  .mobile {
630
    display: none;
631
  }
632
633 351696d5 Martin Sebela
  @include media-breakpoint-down(md) {
634
    top: 90px;
635
    right: 20px;
636 dd652e61 Martin Sebela
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 4e003182 Martin Sebela
    max-height: 70%;
649 dd652e61 Martin Sebela
    top: 80px;
650
    right: 10px;
651 351696d5 Martin Sebela
  }
652
653 c236b33a msebela
  .menu {
654 dd652e61 Martin Sebela
    width: 100%;
655 351696d5 Martin Sebela
    display: inline-block;
656 c236b33a msebela
    position: relative;
657
    padding: 10px 60px 13px 16px;
658 351696d5 Martin Sebela
    text-decoration: none;
659 c236b33a msebela
    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 351696d5 Martin Sebela
    z-index: 1000;
688
689 c236b33a msebela
    ul {
690 351696d5 Martin Sebela
      margin-top: 10px;
691 c236b33a msebela
      padding-left: 36px;
692
      padding-right: 20px;
693
      font-size: 15px;
694
      list-style-image: url($images-dir + 'li-bullet.svg');
695 351696d5 Martin Sebela
696
      @include media-breakpoint-down(xs) {
697 4e003182 Martin Sebela
        max-height: 244px;
698
        overflow-y: scroll;
699 351696d5 Martin Sebela
        font-size: 13.5px;
700
      }
701 c236b33a msebela
    }
702
703
    li {
704
      margin-bottom: 10px;
705
      cursor: pointer;
706 dd652e61 Martin Sebela
707
      &:hover {
708
        text-decoration: underline;
709
      }
710 c236b33a msebela
    }
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 351696d5 Martin Sebela
  @include media-breakpoint-down(xs) {
728
    bottom: -30px;
729
  }
730
731 a48642fb vastja
  .next, .prev, .play, .pause {
732 c236b33a msebela
    display: inline-block;
733 351696d5 Martin Sebela
    width: 42px;
734
    height: 42px;
735 c236b33a msebela
    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 351696d5 Martin Sebela
    &:hover {
745
      opacity: 1;
746
    }
747
748 c236b33a msebela
    &: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 a48642fb vastja
  .play, .pause {
760 351696d5 Martin Sebela
    width: 57px;
761
    height: 57px;
762 c236b33a msebela
    opacity: 1;
763
764 dd652e61 Martin Sebela
    @include media-breakpoint-down(md) {
765
      order: 3;
766
    }
767
768 351696d5 Martin Sebela
    &:hover {
769
      opacity: .7;
770
    }
771
772 c236b33a msebela
    &:after {
773
      width: 10px;
774
      height: 16px;
775
      top: calc(50% - 8px);
776
    }
777
  }
778
779 212d3445 Martin Sebela
  .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 a48642fb vastja
  }
788
789 dd652e61 Martin Sebela
  .next {
790
    @include media-breakpoint-down(md) {
791
      order: 3;
792
    }
793
794 4e003182 Martin Sebela
    @include media-breakpoint-down(xs) {
795
      margin-right: 0;
796
    }
797
798 dd652e61 Martin Sebela
    &:after {
799
      background: url($images-dir + 'btn-next.svg') no-repeat;
800
    }
801 c236b33a msebela
  }
802
803 dd652e61 Martin Sebela
  .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 c236b33a msebela
  }
812
813 4e003182 Martin Sebela
  .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 351696d5 Martin Sebela
  .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 dd652e61 Martin Sebela
      order: 1;
853
      margin-right: 20px;
854 351696d5 Martin Sebela
    }
855
856 4e003182 Martin Sebela
    @media (max-width: 390px) {
857
      display: inline-block;
858
      margin: 4px 0 0 0;
859
    }
860
861 351696d5 Martin Sebela
    .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 c236b33a msebela
  .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 351696d5 Martin Sebela
    z-index: 1000;
908 c236b33a msebela
    border-radius: 15px;
909
    background: #0B155A;
910 351696d5 Martin Sebela
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 c236b33a msebela
  }
940
}
941
942
943 500e20aa msebela
.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 3c909967 Martin Sebela
  @include media-breakpoint-down(md) {
953
    
954 500e20aa msebela
    width: 320px;
955
    height: 143px;
956
    background-size: 100%;
957
  }
958
}
959
960 212d3445 Martin Sebela
961
// COPYRIGHT
962
div.copyright {
963
  p {
964
    font-weight: 400;
965
  }
966
967
  span {
968
    font-size: 17px;
969
  }
970
}
971
972
973 500e20aa msebela
// LOGA V SEKCI "O PROJEKTU"
974 212d3445 Martin Sebela
p.logos-partners {
975 500e20aa msebela
  margin-top: 40px;
976 212d3445 Martin Sebela
  text-align: right;
977 500e20aa msebela
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 dd652e61 Martin Sebela
}
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 3c909967 Martin Sebela
  .btn-secondary {
1066 dd652e61 Martin Sebela
    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 3c909967 Martin Sebela
    @media (max-width: 991.98px) {
1082
      border-radius: .25rem;
1083 dd652e61 Martin Sebela
      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 500e20aa msebela
}