Revize dd652e61

Re #8079
- added VS Code plugin for live SASS compilation
- all CSS codes changed to SASS syntax
- menu locations in heatmap changes (auto collapsed on mobile resolutions)
- time label position changed on mobile resolutions (due user fingers)
- other CSS minor changes

website/.devcontainer/devcontainer.json

@@ -6 +6 @@
         "whatwedo.twig",
         "felixfbecker.php-debug",
         "junstyle.php-cs-fixer",
-        "dbaeumer.vscode-eslint"
+        "dbaeumer.vscode-eslint",
+        "refgd.easy-compile"
     ],
     "workspaceFolder": "/var/www/symfony",
     "service": "php-fpm",

website/public/css/_style.css

@@ +1 @@
+@import url("https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap");
+html, body {
+  font-family: 'Be Vietnam', sans-serif;
+  color: #fff;
+  position: relative;
+  height: 96.2%;
+  background: #242C6B;
+}
+
+@media (max-width: 767.98px) {
+  html.intro, body.intro {
+    height: auto;
+  }
+}
+
+header {
+  height: 70px;
+  background: #0048A9;
+}
+
+header .logo {
+  width: 450px;
+  height: 181px;
+  position: absolute;
+  top: 70px;
+  left: 0;
+  z-index: 2;
+  background: url("../img/header-bg.png");
+}
+
+@media (max-width: 1400px) {
+  header .logo {
+    display: none;
+  }
+}
+
+header .logo img {
+  height: 100px;
+  position: relative;
+  top: -50px;
+  left: 50px;
+}
+
+header nav.navbar {
+  height: 70px;
+  position: relative;
+}
+
+header .navbar-toggler-icon {
+  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");
+}
+
+@media (min-width: 1401px) {
+  header .navbar-brand.shifted {
+    position: absolute;
+    top: 0;
+    left: 450px;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  header .navbar-brand.shifted {
+    left: 20px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  header #navigation {
+    width: 100%;
+    padding: 20px;
+    position: absolute;
+    top: 70px;
+    left: 0;
+    z-index: 1001;
+    opacity: .98;
+    background: #004fb3;
+  }
+}
+
+header .nav-item {
+  margin-right: 40px;
+}
+
+@media (max-width: 1480px) {
+  header .nav-item {
+    margin-right: 30px;
+  }
+}
+
+@media (max-width: 1440px) {
+  header .nav-item {
+    margin-right: 15px;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  header .nav-item {
+    margin-right: 30px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  header .nav-item {
+    margin-right: 0;
+  }
+}
+
+header .nav-item .active {
+  font-weight: 800;
+}
+
+header .nav-item.button .nav-link {
+  padding-left: 22px;
+  padding-right: 22px;
+  border: 1px solid #fff;
+  border-radius: 20px;
+}
+
+header .nav-item.button .nav-link:hover {
+  background: #004fb3;
+}
+
+header .navbar-button {
+  padding: .5rem 22px;
+  margin-right: 40px;
+  border: 1px solid #fff;
+  border-radius: 20px;
+  text-decoration: none;
+}
+
+@media (max-width: 991.98px) {
+  header .navbar-button {
+    display: none;
+  }
+}
+
+header .navbar-button:hover {
+  background: #004fb3;
+}
+
+header .btn-secondary {
+  height: 100%;
+  font-size: 16px;
+  text-transform: uppercase;
+  font-weight: 800;
+  letter-spacing: 0.4px;
+  border-radius: 0;
+  border: #0048A9;
+  background: #004fb3;
+}
+
+header .btn-secondary:hover {
+  background: #0048A9 !important;
+}
+
+@media (max-width: 991.98px) {
+  header.map .navbar-nav {
+    width: 100%;
+  }
+}
+
+header.map form {
+  display: flex;
+  margin: auto;
+}
+
+header.map label {
+  margin: 0 0 0 15px;
+  font-size: 16px;
+  font-weight: 800;
+  letter-spacing: .4px;
+}
+
+header.map input, header.map .custom-select {
+  letter-spacing: .4px;
+  color: #fff;
+  border-color: #0048A9;
+  background: #0048A9;
+}
+
+header.map .nav-item {
+  margin: 0;
+  border-right: 1px solid #1C6CC0;
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item {
+    margin-bottom: 20px;
+    border: 0;
+  }
+}
+
+header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+  width: 300px;
+}
+
+@media (max-width: 1500px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    width: 280px;
+  }
+}
+
+@media (max-width: 1400px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    width: 230px;
+  }
+}
+
+@media (max-width: 1400px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    max-width: 230px;
+    width: auto;
+  }
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item:nth-of-type(1), header.map .nav-item:nth-of-type(2), header.map .nav-item:nth-of-type(3) {
+    max-width: none;
+  }
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item .btn {
+    width: 100%;
+  }
+}
+
+h1 {
+  text-transform: uppercase;
+  font-size: 21px;
+  font-weight: 700;
+  letter-spacing: 0.53px;
+}
+
+@media (min-width: 992px) {
+  h1 {
+    line-height: 55px;
+  }
+}
+
+h2 {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
+}
+
+@media (min-width: 992px) {
+  h2 {
+    margin: 0;
+  }
+}
+
+h3 {
+  font-size: 38px;
+  font-weight: 800;
+  letter-spacing: 0.95px;
+}
+
+@media (max-width: 575.98px) {
+  h3 {
+    font-size: 28px;
+  }
+}
+
+a {
+  color: #fff;
+  outline: none;
+}
+
+a:hover {
+  color: #fff;
+}
+
+hr {
+  width: 300px;
+  text-align: left;
+  margin: 30px 0;
+  border-top: 2px solid #fff;
+}
+
+@media (max-width: 1199.98px) {
+  hr {
+    width: 90%;
+  }
+}
+
+@media (max-width: 575.98px) {
+  hr {
+    margin: 15px 0;
+  }
+}
+
+.swiper-container {
+  height: 100%;
+  position: relative;
+}
+
+.swiper-slide {
+  z-index: -1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.swiper-slide.slide-bg-1 {
+  background: url("../img/bg-1.jpg") no-repeat bottom center;
+  background-size: cover;
+}
+
+.swiper-slide.slide-bg-2 {
+  background: url("../img/bg-2.jpg") no-repeat bottom center;
+  background-size: cover;
+}
+
+.swiper-slide.slide-bg-3 {
+  background: url("../img/bg-3.jpg") no-repeat bottom center;
+  background-size: cover;
+}
+
+.swiper-slide.slide-bg-3 .slide-text {
+  width: 100%;
+}
+
+.slide-text {
+  width: 600px;
+  padding-bottom: 160px;
+  position: relative;
+}
+
+@media (max-width: 1199.98px) {
+  .slide-text {
+    width: 100%;
+  }
+}
+
+@media (max-width: 1199.98px) {
+  .slide-text {
+    padding-bottom: 80px;
+  }
+}
+
+.slide-text .slide-index {
+  display: inline-block;
+  padding-bottom: 20px;
+  font-size: 72px;
+  font-weight: 800;
+}
+
+@media (max-width: 575.98px) {
+  .slide-text .slide-index {
+    padding-bottom: 10px;
+    font-size: 48px;
+  }
+}
+
+.slide-text .btn-primary:after {
+  content: "";
+  display: inline-block;
+  width: 10px;
+  height: 16px;
+  position: absolute;
+  top: 16px;
+  right: 20px;
+  background: url("../img/btn-play.svg") no-repeat top right;
+}
+
+.slide-text p {
+  font-size: 18px;
+  font-weight: 600;
+}
+
+@media (max-width: 575.98px) {
+  .slide-text p {
+    font-size: 16px;
+  }
+}
+
+.slide-text p a {
+  text-decoration: underline;
+}
+
+.slide-text p a:hover {
+  text-decoration: none;
+}
+
+.swiper-pagination-buttons {
+  width: 200px;
+  height: 56px;
+  padding: 6px;
+  position: absolute;
+  right: 150px;
+  bottom: 20px;
+  z-index: 1;
+  border-radius: 100px;
+  background: #0B155A;
+}
+
+@media (max-width: 1199.98px) {
+  .swiper-pagination-buttons {
+    right: 20px;
+  }
+}
+
+@media (max-width: 767.98px) {
+  .swiper-pagination-buttons {
+    width: 120px;
+  }
+}
+
+.swiper-pagination-buttons .btn-prev, .swiper-pagination-buttons .btn-next {
+  display: inline-block;
+  width: 45px;
+  height: 45px;
+  position: relative;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+
+.swiper-pagination-buttons .btn-prev:after, .swiper-pagination-buttons .btn-next:after {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 12px;
+  position: absolute;
+  top: calc(50% - 6px);
+  left: calc(50% - 4px);
+}
+
+.swiper-pagination-buttons .btn-prev:after {
+  background: url("../img/btn-prev.svg") no-repeat top right;
+}
+
+.swiper-pagination-buttons .btn-next {
+  float: right;
+}
+
+.swiper-pagination-buttons .btn-next:after {
+  background: url("../img/btn-next.svg") no-repeat top right;
+}
+
+.swiper-pagination-bullets {
+  display: inline-block;
+  width: auto !important;
+  height: 30px;
+  position: absolute;
+  left: 20px !important;
+  bottom: 30px !important;
+  border-radius: 100px;
+  opacity: 0.8;
+  background: #0B155A;
+}
+
+@media (min-width: 992px) {
+  .swiper-pagination-bullets {
+    left: 50% !important;
+    transform: translateX(-50%);
+  }
+}
+
+@media (max-width: 575.98px) {
+  .swiper-pagination-bullets {
+    display: none;
+  }
+}
+
+.swiper-pagination-bullets:before {
+  content: "";
+  width: 100px;
+  position: absolute;
+  top: 13px;
+  left: 15px;
+  z-index: 1;
+  border-top: 2px solid #fff;
+}
+
+.swiper-pagination-bullets .swiper-pagination-bullet {
+  width: 20px;
+  height: 20px;
+  position: relative;
+  margin: 4px 15px !important;
+  opacity: 1;
+  border: 2px solid #0B155A;
+  background: #0B155A;
+}
+
+.swiper-pagination-bullets .swiper-pagination-bullet:before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  position: absolute;
+  top: 5px;
+  left: 5px;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.swiper-pagination-bullets .swiper-pagination-bullet:first-of-type {
+  margin-left: 5px !important;
+}
+
+.swiper-pagination-bullets .swiper-pagination-bullet:last-of-type {
+  margin-right: 5px !important;
+}
+
+.swiper-pagination-bullets .swiper-pagination-bullet-active {
+  border: 2px solid #fff;
+}
+
+.btn-primary {
+  width: 300px;
+  height: 50px;
+  line-height: 32px;
+  position: relative;
+  padding-left: 30px;
+  margin-top: 40px;
+  text-align: left;
+  font-size: 16px;
+  text-transform: uppercase;
+  letter-spacing: 0.4px;
+  border-radius: 30px;
+  border: 1px solid #0B155A;
+  background: #0B155A;
+}
+
+.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
+  border: 1px solid #0048A9;
+  background: #0048A9 !important;
+}
+
+@media (max-width: 575.98px) {
+  .btn-primary {
+    width: 100%;
+    max-width: 270px;
+    height: auto;
+    margin-top: 20px;
+  }
+}
+
+.btn-secondary {
+  background: #0B155A;
+}
+
+.btn-secondary:hover, .btn-secondary:focus, .btn-secondary:active {
+  background: #7378A0 !important;
+}
+
+.map-point {
+  width: 50px;
+  height: 50px;
+  z-index: 1;
+  position: absolute;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid #fff;
+}
+
+@media (max-width: 767.98px) {
+  .map-point {
+    display: none;
+  }
+}
+
+.map-point:before {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: calc(50% - 8px);
+  left: calc(50% - 8px);
+  background: url("../img/map-point-plus.svg") no-repeat;
+}
+
+.map-point:hover:before {
+  z-index: 1;
+  top: calc(50% - 1px);
+  background: url("../img/map-point-minus.svg") no-repeat;
+}
+
+.map-point:hover .desc {
+  display: block;
+  width: 210px;
+  padding: 10px 20px;
+  z-index: 0;
+  opacity: 0.75;
+  border-radius: 25px 0 25px 0;
+  background: #0B155A;
+}
+
+.map-point .desc {
+  display: none;
+}
+
+.map-point p {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+.map-point p:last-of-type {
+  margin-bottom: 10px;
+}
+
+.map-point strong {
+  display: inline-block;
+  width: 100%;
+  padding: 0 0 20px 40px;
+  font-size: 16px;
+}
+
+.map-point .circle {
+  width: 50px;
+  height: 50px;
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+
+.map-point.point-1 {
+  bottom: 12%;
+  right: -75%;
+}
+
+.map-point.point-2 {
+  top: 21%;
+  right: -92%;
+}
+
+.map-point.point-3 {
+  top: 22%;
+  right: -92%;
+}
+
+#heatmap {
+  height: 100%;
+}
+
+.map-locations {
+  position: absolute;
+  top: 105px;
+  right: 50px;
+  z-index: 1000;
+  border-radius: 22px;
+  background-color: rgba(11, 21, 90, 0.7);
+}
+
+.map-locations .mobile {
+  display: none;
+}
+
+@media (max-width: 991.98px) {
+  .map-locations {
+    top: 90px;
+    right: 20px;
+  }
+  .map-locations .desktop {
+    display: none;
+  }
+  .map-locations .mobile {
+    display: inline-block;
+  }
+}
+
+@media (max-width: 575.98px) {
+  .map-locations {
+    max-width: 240px;
+    top: 80px;
+    right: 10px;
+  }
+}
+
+.map-locations .menu {
+  width: 100%;
+  display: inline-block;
+  position: relative;
+  padding: 10px 60px 13px 16px;
+  text-decoration: none;
+  border-radius: 50px;
+  opacity: 1;
+  background: #0B155A;
+}
+
+.map-locations .menu .circle {
+  display: inline-block;
+  width: 40px;
+  height: 40px;
+  position: absolute;
+  top: 3px;
+  right: 3px;
+  border-radius: 50%;
+  border: 2px solid #fff;
+}
+
+.map-locations .menu .circle:after {
+  content: "";
+  display: inline-block;
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  top: calc(50% - 8px);
+  left: calc(50% - 8px);
+  background: url("../img/map-point-plus.svg") no-repeat;
+}
+
+.map-locations .locations {
+  z-index: 1000;
+}
+
+.map-locations .locations ul {
+  margin-top: 10px;
+  padding-left: 36px;
+  padding-right: 20px;
+  font-size: 15px;
+  list-style-image: url("../img/li-bullet.svg");
+}
+
+@media (max-width: 575.98px) {
+  .map-locations .locations ul {
+    font-size: 13.5px;
+  }
+}
+
+.map-locations .locations li {
+  margin-bottom: 10px;
+  cursor: pointer;
+}
+
+.map-locations .locations li:hover {
+  text-decoration: underline;
+}
+
+.player {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -40px;
+  z-index: 1000;
+}
+
+@media (max-width: 575.98px) {
+  .player {
+    bottom: -30px;
+  }
+}
+
+.player .next, .player .prev, .player .play, .player .pause {
+  display: inline-block;
+  width: 42px;
+  height: 42px;
+  margin-right: 20px;
+  position: relative;
+  border-radius: 50%;
+  opacity: .7;
+  border: 2px solid #fff;
+  box-shadow: 0 0 0 4px #0B155A;
+  background: #0B155A;
+  cursor: pointer;
+}
+
+.player .next:hover, .player .prev:hover, .player .play:hover, .player .pause:hover {
+  opacity: 1;
+}
+
+.player .next:after, .player .prev:after, .player .play:after, .player .pause:after {
+  content: "";
+  display: inline-block;
+  width: 7px;
+  height: 12px;
+  position: absolute;
+  top: calc(50% - 6px);
+  left: calc(50% - 4px);
+}
+
+.player .play, .player .pause {
+  width: 57px;
+  height: 57px;
+  opacity: 1;
+}
+
+@media (max-width: 991.98px) {
+  .player .play, .player .pause {
+    order: 3;
+  }
+}
+
+.player .play:hover, .player .pause:hover {
+  opacity: .7;
+}
+
+.player .play:after, .player .pause:after {
+  width: 10px;
+  height: 16px;
+  top: calc(50% - 8px);
+}
+
+.player .play:after {
+  left: calc(50% - 2px);
+  background: url("../img/btn-play.svg") no-repeat;
+}
+
+.player .pause:after {
+  left: calc(50% - 4px);
+  background: url("../img/btn-pause.png") no-repeat;
+}
+
+@media (max-width: 991.98px) {
+  .player .next {
+    order: 3;
+  }
+}
+
+.player .next:after {
+  background: url("../img/btn-next.svg") no-repeat;
+}
+
+@media (max-width: 991.98px) {
+  .player .prev {
+    order: 2;
+  }
+}
+
+.player .prev:after {
+  background: url("../img/btn-prev.svg") no-repeat;
+}
+
+.player .timeline {
+  display: flex;
+  height: 30px;
+  flex-direction: row;
+  position: relative;
+  padding: 0 10px;
+  border-radius: 100px;
+  background-color: rgba(11, 21, 90, 0.7);
+}
+
+@media (max-width: 991.98px) {
+  .player .timeline {
+    padding: 0;
+    order: 1;
+    margin-right: 20px;
+  }
+}
+
+@media (max-width: 991.98px) {
+  .player .timeline .hour {
+    display: none;
+  }
+}
+
+.player .timeline .hour:before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #fff;
+}
+
+.player .timeline .hour:after {
+  content: "";
+  display: inline-block;
+  position: relative;
+  top: -2px;
+  width: 20px;
+  height: 2px;
+  background: #fff;
+}
+
+.player .timeline .end-dot:before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #fff;
+}
+
+@media (max-width: 991.98px) {
+  .player .timeline .end-dot:before {
+    display: none;
+  }
+}
+
+.player .time {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 64px;
+  font-size: 15px;
+  padding: 3px 0 4px 0;
+  z-index: 1000;
+  border-radius: 15px;
+  background: #0B155A;
+}
+
+@media (min-width: 992px) {
+  .player .time {
+    position: absolute;
+  }
+  .player .time.hour-0 {
+    left: 0;
+  }
+  .player .time.hour-1 {
+    left: 25px;
+  }
+  .player .time.hour-2 {
+    left: 50px;
+  }
+  .player .time.hour-3 {
+    left: 75px;
+  }
+  .player .time.hour-4 {
+    left: 100px;
+  }
+  .player .time.hour-5 {
+    left: 125px;
+  }
+  .player .time.hour-6 {
+    left: 150px;
+  }
+  .player .time.hour-7 {
+    left: 175px;
+  }
+  .player .time.hour-8 {
+    left: 200px;
+  }
+  .player .time.hour-9 {
+    left: 225px;
+  }
+  .player .time.hour-10 {
+    left: 250px;
+  }
+  .player .time.hour-11 {
+    left: 275px;
+  }
+  .player .time.hour-12 {
+    left: 300px;
+  }
+  .player .time.hour-13 {
+    left: 325px;
+  }
+  .player .time.hour-14 {
+    left: 350px;
+  }
+  .player .time.hour-15 {
+    left: 375px;
+  }
+  .player .time.hour-16 {
+    left: 400px;
+  }
+  .player .time.hour-17 {
+    left: 425px;
+  }
+  .player .time.hour-18 {
+    left: 450px;
+  }
+  .player .time.hour-19 {
+    left: 475px;
+  }
+  .player .time.hour-20 {
+    left: 500px;
+  }
+  .player .time.hour-21 {
+    left: 525px;
+  }
+  .player .time.hour-22 {
+    left: 550px;
+  }
+  .player .time.hour-23 {
+    left: 585px;
+  }
+}
+
+.slide-background {
+  width: 650px;
+  height: 290px;
+  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: url("../img/footer-bg.svg") no-repeat;
+}
+
+@media (max-width: 575.98px) {
+  .slide-background {
+    width: 320px;
+    height: 143px;
+    background-size: 100%;
+  }
+}
+
+div.copyright p {
+  font-weight: 400;
+}
+
+div.copyright span {
+  font-size: 17px;
+}
+
+p.logos-partners {
+  margin-top: 40px;
+  text-align: right;
+}
+
+p.logos-partners a {
+  text-decoration: none;
+}
+
+p.logos-partners a img {
+  margin-left: 50px;
+  height: 80px;
+}
+
+@media only screen and (max-width: 430px) {
+  p.logos-partners a img {
+    height: 70px;
+    margin-left: 0;
+  }
+}
+
+@media only screen and (max-width: 340px) {
+  p.logos-partners a img {
+    height: 60px;
+  }
+}
+
+p.logos-partners a:first-of-type img {
+  margin-left: 0;
+}
+
+.leaflet-popup-content-wrapper, .leaflet-popup-tip {
+  font-family: 'Be Vietnam', sans-serif;
+  text-align: center;
+  color: #fff;
+  background-color: #0b155a !important;
+}
+
+.leaflet-popup-content-wrapper .leaflet-popup-content strong {
+  display: inline-block;
+  margin-bottom: 8px;
+}
+
+.leaflet-popup-content-wrapper .popup-controls {
+  display: flex;
+  margin: 1em 0 1em 0;
+}
+
+.leaflet-popup-content-wrapper .popup-controls .circle-button {
+  height: 32px;
+  width: 32px;
+  border: 0;
+  border-radius: 24px;
+  background: url("../img/btn-prev.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
+  transition: background 0.3s ease-out;
+  outline: none !important;
+}
+
+.leaflet-popup-content-wrapper .popup-controls .circle-button:hover {
+  background: url("../img/btn-prev.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
+}
+
+.leaflet-popup-content-wrapper .popup-controls .circle-button.next {
+  background: url("../img/btn-next.svg") rgba(255, 255, 255, 0.1) no-repeat center center;
+}
+
+.leaflet-popup-content-wrapper .popup-controls .circle-button.next:hover {
+  background: url("../img/btn-next.svg") rgba(125, 125, 125, 0.1) no-repeat center center;
+}
+
+.leaflet-popup-content-wrapper #number-info {
+  font-family: monospace;
+  font-size: 24pt;
+  font-weight: 700;
+}
+
+.leaflet-popup-content-wrapper #count-info {
+  margin: auto;
+  color: #fff;
+  background-color: #0b155a;
+}
+
+header.map .nav-item {
+  padding: 5px;
+  margin-top: auto;
+  margin-bottom: auto;
+}
+
+header.map .nav-item:last-child:hover {
+  background: transparent;
+}
+
+header.map .nav-item:nth-child(3), header.map .nav-item:last-child {
+  border: 0;
+}
+
+header.map .nav-item .btn-secondary {
+  outline: none;
+  border-radius: 50px;
+  height: 40px;
+  margin-left: 10px;
+  font-size: 11pt;
+  padding-left: 20px;
+  padding-right: 20px;
+  padding-top: 3px;
+  transition: all 0.2s ease-out;
+  color: #0048a9;
+  background: white;
+  -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
+  -moz-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
+  box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.17);
+}
+
+@media (max-width: 991.98px) {
+  header.map .nav-item .btn-secondary {
+    border-radius: 5px;
+    margin-left: 0px;
+    margin-top: 10px;
+    margin-bottom: -10px;
+  }
+}
+
+header.map .nav-item .btn-secondary:hover {
+  color: #0048a9;
+  background: white !important;
+  -webkit-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+  -moz-box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+  box-shadow: 0px 0px 30px 0px rgba(0, 0, 0, 0.22);
+}
+
+header.map .nav-item .btn-secondary:active, header.map .nav-item .btn-secondary:focus {
+  background: #f0f0f0 !important;
+  color: #0048a9 !important;
+}
+
+header.map .nav-item input:hover {
+  background: rgba(255, 255, 255, 0.2);
+}
+
+header.map .nav-item input:focus {
+  background: #fff;
+  color: #000;
+}
+
+header.map .nav-item select:hover {
+  cursor: pointer;
+  background: rgba(255, 255, 255, 0.2);
+}
+
+header.map .nav-item select:hover option {
+  background: #0048a9;
+}
+
+header.map .nav-item select:focus {
+  background: #0048a9;
+  color: white;
+}

website/public/css/_style.scss

@@ +1 @@
+@import 'bootstrap-4.4.1/_functions.scss';
+@import 'bootstrap-4.4.1/_variables.scss';
+@import 'bootstrap-4.4.1/mixins/_breakpoints.scss';
+
+$images-dir: '../img/';
+
+@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap');
+
+html, body {
+  font-family: 'Be Vietnam', sans-serif;
+  color: #fff;
+  position: relative;
+  height: 96.2%;
+  background: #242C6B;
+
+  &.intro {
+    @include media-breakpoint-down(sm) {
+      height: auto;
+    }
+  }
+}
+
+header {
+  height: 70px;
+  background: #0048A9;
+
+  .logo {
+    width: 450px;
+    height: 181px;
+    position: absolute;
+    top: 70px;
+    left: 0;
+    z-index: 2;
+    background: url($images-dir + 'header-bg.png');
+
+    @media (max-width: 1400px) {
+      display: none;
+    }
+
+    img {
+      height: 100px;
+      position: relative;
+      top: -50px;
+      left: 50px;
+    }
+  }
+
+  nav.navbar {
+    height: 70px;
+    position: relative;
+  }
+
+  .navbar-toggler-icon {
+    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");
+  }
+
+  .navbar-brand.shifted {
+    @media (min-width: 1401px) {
+      position: absolute;
+      top: 0;
+      left: 450px;
+    }
+
+    @include media-breakpoint-down(lg) {
+      left: 20px;
+    }
+  }
+
+  @include media-breakpoint-down(md) {
+    #navigation {
+      width: 100%;
+      padding: 20px;
+      position: absolute;
+      top: 70px;
+      left: 0;
+      z-index: 1001;
+      opacity: .98;
+      background: #004fb3;
+    }
+  }
+
+  .nav-item {
+    margin-right: 40px;
+
+    @media (max-width: 1480px) {
+      margin-right: 30px;
+    }
+
+    @media (max-width: 1440px) {
+      margin-right: 15px;
+    }
+
+    @include media-breakpoint-down(lg) {
+      margin-right: 30px;
+    }
+
+    @include media-breakpoint-down(md) {
+      margin-right: 0;
+    }
+
+    .active {
+      font-weight: 800;
+    }
+
+    &.button {
+      .nav-link {
+        padding-left: 22px;
+        padding-right: 22px;
+        border: 1px solid #fff;
+        border-radius: 20px;
+
+        &:hover {
+          background: #004fb3;
+        }
+      }
+    }
+  }
+
+  .navbar-button {
+    padding: .5rem 22px;
+    margin-right: 40px;
+    border: 1px solid #fff;
+    border-radius: 20px;
+    text-decoration: none;
+
+    @include media-breakpoint-down(md) {
+      display: none;
+    }
+
+    &:hover {
+      background: #004fb3;
+    }
+  }
+
+  .btn-secondary {
+    height: 100%;
+    font-size: 16px;
+    text-transform: uppercase;
+    font-weight: 800;
+    letter-spacing: 0.4px;
+    border-radius: 0;
+    border: #0048A9;
+    background: #004fb3;
+
+    &:hover {
+      background: #0048A9 !important;
+    }
+  }
+
+  // NAVIGACE NA STRÁNCE S MAPOU
+  &.map {
+    @include media-breakpoint-down(md) {
+      .navbar-nav {
+        width: 100%;
+      }
+    }
+
+    form {
+      display: flex;
+      margin: auto;
+    }
+
+    label {
+      margin: 0 0 0 15px;
+      font-size: 16px;
+      font-weight: 800;
+      letter-spacing: .4px;
+    }
+
+    input, .custom-select {
+      letter-spacing: .4px;
+      color: #fff;
+      border-color: #0048A9;
+      background: #0048A9;
+    }
+
+    .nav-item {
+      margin: 0;
+      border-right: 1px solid #1C6CC0;
+
+      @include media-breakpoint-down(md) {
+        margin-bottom: 20px;
+        border: 0;
+      }
+
+      &:nth-of-type(1), &:nth-of-type(2), &:nth-of-type(3) {
+        width: 300px;
+
+        @media (max-width: 1500px) {
+          width: 280px;
+        }
+
+        @media (max-width: 1400px) {
+          width: 230px;
+        }
+
+        @media (max-width: 1400px) {
+          max-width: 230px;
+          width: auto;
+        }
+
+        @include media-breakpoint-down(md) {
+          max-width: none;
+        }
+      }
+
+      @include media-breakpoint-down(md) {
+        .btn {
+          width: 100%;
+        }
+      }
+    }
+  }
+}
+
+h1 {
+  text-transform: uppercase;
+  font-size: 21px;
+  font-weight: 700;
+  letter-spacing: 0.53px;
+
+  @include media-breakpoint-up(lg) {
+    line-height: 55px;
+  }
+}
+
+h2 {
+  font-size: 16px;
+  font-weight: 400;
+  letter-spacing: 0.4px;
+
+  @include media-breakpoint-up(lg) {
+    margin: 0;
+  }
+}
+
+h3 {
+  font-size: 38px;
+  font-weight: 800;
+  letter-spacing: 0.95px;
+
+  @include media-breakpoint-down(xs) {
+    font-size: 28px;
+  }
+}
+
+a {
+  color: #fff;
+  outline: none;
+
+  &:hover {
+    color: #fff;
+  }
+}
+
+hr {
+  width: 300px;
+  text-align: left;
+  margin: 30px 0;
+  border-top: 2px solid #fff;
+
+  @include media-breakpoint-down(lg) {
+    width: 90%;
+  }
+
+  @include media-breakpoint-down(xs) {
+    margin: 15px 0;
+  }
+}
+
+.swiper-container {
+  height: 100%;
+  position: relative;
+}
+
+.swiper-slide {
+  z-index: -1000;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  &.slide-bg-1 {
+    background: url($images-dir + 'bg-1.jpg') no-repeat bottom center;
+    background-size: cover;
+  }
+
+  &.slide-bg-2 {
+    background: url($images-dir + 'bg-2.jpg') no-repeat bottom center;
+    background-size: cover;
+  }
+
+  &.slide-bg-3 {
+    background: url($images-dir + 'bg-3.jpg') no-repeat bottom center;
+    background-size: cover;
+
+    .slide-text {
+      width: 100%;
+    }
+  }
+}
+
+// TEXT VE SLIDU