commit dd652e61c4d3f65f55ca95911adccd065239c6dd
Author: Martin Sebela <msebela@zcu.cz>
Date:   Sat May 23 15:41:44 2020 +0200

    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

diff --git a/website/.devcontainer/devcontainer.json b/website/.devcontainer/devcontainer.json
index 81aa22a..461e24c 100644
--- a/website/.devcontainer/devcontainer.json
+++ b/website/.devcontainer/devcontainer.json
@@ -6,7 +6,8 @@
         "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",
diff --git a/website/public/css/_style.css b/website/public/css/_style.css
new file mode 100644
index 0000000..0c210b6
--- /dev/null
+++ b/website/public/css/_style.css
@@ -0,0 +1,1162 @@
+@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;
+}
diff --git a/website/public/css/_style.scss b/website/public/css/_style.scss
new file mode 100755
index 0000000..d185678
--- /dev/null
+++ b/website/public/css/_style.scss
@@ -0,0 +1,1078 @@
+@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
+.slide-text {
+  width: 600px;
+  padding-bottom: 160px;
+  position: relative;
+
+  @include media-breakpoint-down(lg) {
+    width: 100%;
+  }
+
+  @include media-breakpoint-down(lg) {
+    padding-bottom: 80px;
+  }
+
+  .slide-index {
+    display: inline-block;
+    padding-bottom: 20px;
+    font-size: 72px;
+    font-weight: 800;
+
+    @include media-breakpoint-down(xs) {
+      padding-bottom: 10px;
+      font-size: 48px;
+    }
+  }
+
+  .btn-primary {
+    &:after {
+      content: "";
+      display: inline-block;
+      width: 10px;
+      height: 16px;
+      position: absolute;
+      top: 16px;
+      right: 20px;
+      background: url($images-dir + 'btn-play.svg') no-repeat top right;
+    }
+  }
+
+  p {
+    font-size: 18px;
+    font-weight: 600;
+
+    @include media-breakpoint-down(xs) {
+      font-size: 16px;
+    }
+
+    a {
+      text-decoration: underline;
+
+      &:hover {
+        text-decoration: none;
+      }
+    }
+  }
+}
+
+// STRÁNKOVÁNÍ (TLAČÍTKA) SLIDŮ
+.swiper-pagination-buttons {
+  width: 200px;
+  height: 56px;
+  padding: 6px;
+  position: absolute;
+  right: 150px;
+  bottom: 20px;
+  z-index: 1;
+  border-radius: 100px;
+  background: #0B155A;
+
+  @include media-breakpoint-down(lg) {
+    right: 20px;
+  }
+
+  @include media-breakpoint-down(sm) {
+    width: 120px;
+  }
+
+  .btn-prev, .btn-next {
+    display: inline-block;
+    width: 45px;
+    height: 45px;
+    position: relative;
+    border-radius: 50%;
+    border: 2px solid #fff;
+
+    &:after {
+      content: "";
+      display: inline-block;
+      width: 7px;
+      height: 12px;
+      position: absolute;
+      top: calc(50% - 6px);
+      left: calc(50% - 4px);
+    }
+  }
+
+  .btn-prev:after {
+    background: url($images-dir + 'btn-prev.svg') no-repeat top right;
+  }
+
+  .btn-next {
+    float: right;
+
+    &:after {
+      background: url($images-dir + 'btn-next.svg') no-repeat top right;
+    }
+  }
+}
+
+// STRÁNKOVÁNÍ (POZICE) SLIDŮ
+.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;
+
+  @include media-breakpoint-up(lg) {
+    left: 50% !important;
+    transform: translateX(-50%);
+  }
+
+  @include media-breakpoint-down(xs) {
+    display: none;
+  }
+
+  &:before {
+    content: "";
+    width: 100px;
+    position: absolute;
+    top: 13px;
+    left: 15px;
+    z-index: 1;
+    border-top: 2px solid #fff;
+  }
+
+  .swiper-pagination-bullet {
+    width: 20px;
+    height: 20px;
+    position: relative;
+    margin: 4px 15px !important;
+    opacity: 1;
+    border: 2px solid #0B155A;
+    background: #0B155A;
+
+    &:before {
+      content: "";
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      position: absolute;
+      top: 5px;
+      left: 5px;
+      border-radius: 50%;
+      background: #fff;
+    }
+
+    &:first-of-type {
+      margin-left: 5px !important;
+    }
+
+    &:last-of-type {
+      margin-right: 5px !important;
+    }
+  }
+
+  .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;
+
+  &:hover, &:focus, &:active {
+    border: 1px solid #0048A9;
+    background: #0048A9 !important;
+  }
+
+  @include media-breakpoint-down(xs) {
+    width: 100%;
+    max-width: 270px;
+    height: auto;
+    margin-top: 20px;
+  }
+}
+
+.btn-secondary {
+  background: #0B155A;
+
+  &:hover, &:focus, &:active {
+    background: #7378A0 !important;
+  }
+}
+
+// UKÁZKOVÉ BODY NA MAPĚ
+.map-point {
+  width: 50px;
+  height: 50px;
+  z-index: 1;
+  position: absolute;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 2px solid #fff;
+
+  @include media-breakpoint-down(sm) {
+    display: none;
+  }
+
+  &:before {
+    content: "";
+    display: inline-block;
+    width: 16px;
+    height: 16px;
+    position: absolute;
+    top: calc(50% - 8px);
+    left: calc(50% - 8px);
+    background: url($images-dir + 'map-point-plus.svg') no-repeat;
+  }
+
+  &:hover {
+    &:before {
+      z-index: 1;
+      top: calc(50% - 1px);
+      background: url($images-dir + 'map-point-minus.svg') no-repeat;
+    }
+
+    .desc {
+      display: block;
+      width: 210px;
+      padding: 10px 20px;
+      z-index: 0;
+      opacity: 0.75;
+      border-radius: 25px 0 25px 0;
+      background: #0B155A;
+    }
+  }
+
+  .desc {
+    display: none;
+  }
+
+  p {
+    font-size: 14px;
+    font-weight: 400;
+
+    &:last-of-type {
+      margin-bottom: 10px;
+    }
+  }
+
+  strong {
+    display: inline-block;
+    width: 100%;
+    padding: 0 0 20px 40px;
+    font-size: 16px;
+  }
+
+  .circle {
+    width: 50px;
+    height: 50px;
+    position: absolute;
+    top: -2px;
+    left: -2px;
+    border-radius: 50%;
+    border: 2px solid #fff;
+  }
+
+  &.point-1 {
+    bottom: 12%;
+    right: -75%;
+  }
+
+  &.point-2 {
+    top: 21%;
+    right: -92%;
+  }
+
+  &.point-3 {
+    top: 22%;
+    right: -92%;
+  }
+}
+
+#heatmap {
+  height: 100%;
+}
+
+
+// SEZNAM LOKACÍ NA MAPĚ
+.map-locations {
+  position: absolute;
+  top: 105px;
+  right: 50px;
+  z-index: 1000;
+  border-radius: 22px;
+  background-color: rgba(11, 21, 90, .7);
+
+  .mobile {
+    display: none;
+  }
+
+  @include media-breakpoint-down(md) {
+    top: 90px;
+    right: 20px;
+
+    .desktop {
+      display: none;
+    }
+
+    .mobile {
+      display: inline-block;
+    }
+  }
+
+  @include media-breakpoint-down(xs) {
+    max-width: 240px;
+    top: 80px;
+    right: 10px;
+  }
+
+  .menu {
+    width: 100%;
+    display: inline-block;
+    position: relative;
+    padding: 10px 60px 13px 16px;
+    text-decoration: none;
+    border-radius: 50px;
+    opacity: 1;
+    background: #0B155A;
+
+    .circle {
+      display: inline-block;
+      width: 40px;
+      height: 40px;
+      position: absolute;
+      top: 3px;
+      right: 3px;
+      border-radius: 50%;
+      border: 2px solid #fff;
+
+      &:after {
+        content: "";
+        display: inline-block;
+        width: 16px;
+        height: 16px;
+        position: absolute;
+        top: calc(50% - 8px);
+        left: calc(50% - 8px);
+        background: url($images-dir + 'map-point-plus.svg') no-repeat;
+      }
+    }
+  }
+
+  .locations {
+    z-index: 1000;
+
+    ul {
+      margin-top: 10px;
+      padding-left: 36px;
+      padding-right: 20px;
+      font-size: 15px;
+      list-style-image: url($images-dir + 'li-bullet.svg');
+
+      @include media-breakpoint-down(xs) {
+        font-size: 13.5px;
+      }
+    }
+
+    li {
+      margin-bottom: 10px;
+      cursor: pointer;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+}
+
+
+// PŘEHRÁVAČ HEATMAPY
+.player {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+  bottom: -40px;
+  z-index: 1000;
+
+  @include media-breakpoint-down(xs) {
+    bottom: -30px;
+  }
+
+  .next, .prev, .play, .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;
+
+    &:hover {
+      opacity: 1;
+    }
+
+    &:after {
+      content: "";
+      display: inline-block;
+      width: 7px;
+      height: 12px;
+      position: absolute;
+      top: calc(50% - 6px);
+      left: calc(50% - 4px);
+    }
+  }
+
+  .play, .pause {
+    width: 57px;
+    height: 57px;
+    opacity: 1;
+
+    @include media-breakpoint-down(md) {
+      order: 3;
+    }
+
+    &:hover {
+      opacity: .7;
+    }
+
+    &:after {
+      width: 10px;
+      height: 16px;
+      top: calc(50% - 8px);
+    }
+  }
+
+  .play:after {
+    left: calc(50% - 2px);
+    background: url($images-dir + 'btn-play.svg') no-repeat;
+  }
+
+  .pause:after {
+    left: calc(50% - 4px);
+    background: url($images-dir + 'btn-pause.png') no-repeat;
+  }
+
+  .next {
+    @include media-breakpoint-down(md) {
+      order: 3;
+    }
+
+    &:after {
+      background: url($images-dir + 'btn-next.svg') no-repeat;
+    }
+  }
+
+  .prev {
+    @include media-breakpoint-down(md) {
+      order: 2;
+    }
+
+    &:after {
+      background: url($images-dir + 'btn-prev.svg') no-repeat;
+    }
+  }
+
+  .timeline {
+    display: flex;
+    height: 30px;
+    flex-direction: row;
+    position: relative;
+    padding: 0 10px;
+    border-radius: 100px;
+    background-color: rgba(11, 21, 90, .7);
+
+    @include media-breakpoint-down(md) {
+      padding: 0;
+      order: 1;
+      margin-right: 20px;
+    }
+
+    .hour {
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+
+      &:before {
+        content: "";
+        display: inline-block;
+        width: 6px;
+        height: 6px;
+        border-radius: 50%;
+        background: #fff;
+      }
+
+      &:after {
+        content: "";
+        display: inline-block;
+        position: relative;
+        top: -2px;
+        width: 20px;
+        height: 2px;
+        background: #fff;
+      }
+    }
+
+    .end-dot:before {
+      content: "";
+      display: inline-block;
+      width: 6px;
+      height: 6px;
+      border-radius: 50%;
+      background: #fff;
+
+      @include media-breakpoint-down(md) {
+        display: none;
+      }
+    }
+  }
+
+  .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;
+
+    @include media-breakpoint-up(lg) {
+      position: absolute;
+
+      &.hour-0 {left: 0;}
+      &.hour-1 {left: 25px;}
+      &.hour-2 {left: 50px;}
+      &.hour-3 {left: 75px;}
+      &.hour-4 {left: 100px;}
+      &.hour-5 {left: 125px;}
+      &.hour-6 {left: 150px;}
+      &.hour-7 {left: 175px;}
+      &.hour-8 {left: 200px;}
+      &.hour-9 {left: 225px;}
+      &.hour-10 {left: 250px;}
+      &.hour-11 {left: 275px;}
+      &.hour-12 {left: 300px;}
+      &.hour-13 {left: 325px;}
+      &.hour-14 {left: 350px;}
+      &.hour-15 {left: 375px;}
+      &.hour-16 {left: 400px;}
+      &.hour-17 {left: 425px;}
+      &.hour-18 {left: 450px;}
+      &.hour-19 {left: 475px;}
+      &.hour-20 {left: 500px;}
+      &.hour-21 {left: 525px;}
+      &.hour-22 {left: 550px;}
+      &.hour-23 {left: 585px;}
+    }
+  }
+}
+
+
+.slide-background {
+  width: 650px;
+  height: 290px;
+  z-index: 1;
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  background: url($images-dir + 'footer-bg.svg') no-repeat;
+
+  @include media-breakpoint-down(xs) {
+    width: 320px;
+    height: 143px;
+    background-size: 100%;
+  }
+}
+
+
+// COPYRIGHT
+div.copyright {
+  p {
+    font-weight: 400;
+  }
+
+  span {
+    font-size: 17px;
+  }
+}
+
+
+// LOGA V SEKCI "O PROJEKTU"
+p.logos-partners {
+  margin-top: 40px;
+  text-align: right;
+
+  a {
+    text-decoration: none;
+
+    img {
+      margin-left: 50px;
+      height: 80px;
+
+      @media only screen and (max-width: 430px) {
+        height: 70px;
+        margin-left: 0;
+      }
+
+      @media only screen and (max-width: 340px) {
+        height: 60px;
+      }
+    }
+
+    &:first-of-type img {
+      margin-left: 0;
+    }
+  }
+}
+
+// INFORMACE O KONKRÉTNÍM BODĚ V HEATMAPĚ
+.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;
+  }
+
+  .popup-controls {
+    display: flex;
+    margin: 1em 0 1em 0;
+
+    .circle-button {
+      height: 32px;
+      width: 32px;
+      border: 0;
+      border-radius: 24px;
+      background: url($images-dir + 'btn-prev.svg') rgba(255, 255, 255, .1) no-repeat center center;
+      transition: background 0.3s ease-out;
+      outline: none !important;
+
+      &:hover {
+        background: url($images-dir + 'btn-prev.svg') rgba(125, 125, 125, .1) no-repeat center center;
+      }
+      
+      &.next {
+        background: url($images-dir + 'btn-next.svg') rgba(255, 255, 255, .1) no-repeat center center;
+
+        &:hover {
+          background: url($images-dir + 'btn-next.svg') rgba(125, 125, 125, .1) no-repeat center center;
+        }
+      }
+    }
+  }
+
+  #number-info {
+    font-family: monospace;
+    font-size: 24pt;
+    font-weight: 700;
+  }
+
+  #count-info {
+    margin: auto;
+    color: #fff;
+    background-color: #0b155a;
+  }
+}
+
+// ÚPRAVA VZHLEDU HLAVIČKY NA STRÁNCE S HEATMAPOU
+header.map .nav-item {
+  padding: 5px;
+  margin-top: auto;
+  margin-bottom: auto;
+  
+  &:last-child:hover {
+    background: transparent;
+  }
+
+  &:nth-child(3), &:last-child{
+    border: 0;
+  }
+
+  .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: rgba(255, 255, 255, 1);
+    -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) {
+      border-radius: 5px;
+      margin-left: 0px;
+      margin-top: 10px;
+      margin-bottom: -10px;
+    }
+    
+    &:hover {
+      color: #0048a9;
+      background: rgba(255, 255, 255, 1) !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);
+    }
+
+    &:active, &:focus {
+      background: rgba(240, 240, 240, 1) !important;
+      color: #0048a9 !important;
+    }
+  }
+
+  input {
+    &:hover {
+      background: rgba(255, 255, 255, .2);
+    }
+
+    &:focus {
+      background: #fff;
+      color: #000;
+    }
+  }
+
+  select {
+    &:hover {
+      cursor: pointer;
+      background: rgba(255, 255, 255, .2);
+
+      option {
+        background: #0048a9;
+      }
+    }
+
+    &:focus {
+      background: #0048a9;
+      color: white;
+    }
+  }
+}
\ No newline at end of file
diff --git a/website/public/css/bootstrap-4.4.1/_functions.scss b/website/public/css/bootstrap-4.4.1/_functions.scss
new file mode 100755
index 0000000..d2cc91d
--- /dev/null
+++ b/website/public/css/bootstrap-4.4.1/_functions.scss
@@ -0,0 +1,86 @@
+// Bootstrap functions
+//
+// Utility mixins and functions for evaluating source code across our variables, maps, and mixins.
+
+// Ascending
+// Used to evaluate Sass maps like our grid breakpoints.
+@mixin _assert-ascending($map, $map-name) {
+  $prev-key: null;
+  $prev-num: null;
+  @each $key, $num in $map {
+    @if $prev-num == null or unit($num) == "%" {
+      // Do nothing
+    } @else if not comparable($prev-num, $num) {
+      @warn "Potentially invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} whose unit makes it incomparable to #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    } @else if $prev-num >= $num {
+      @warn "Invalid value for #{$map-name}: This map must be in ascending order, but key '#{$key}' has value #{$num} which isn't greater than #{$prev-num}, the value of the previous key '#{$prev-key}' !";
+    }
+    $prev-key: $key;
+    $prev-num: $num;
+  }
+}
+
+// Starts at zero
+// Used to ensure the min-width of the lowest breakpoint starts at 0.
+@mixin _assert-starts-at-zero($map, $map-name: "$grid-breakpoints") {
+  $values: map-values($map);
+  $first-value: nth($values, 1);
+  @if $first-value != 0 {
+    @warn "First breakpoint in #{$map-name} must start at 0, but starts at #{$first-value}.";
+  }
+}
+
+// Replace `$search` with `$replace` in `$string`
+// Used on our SVG icon backgrounds for custom forms.
+//
+// @author Hugo Giraudel
+// @param {String} $string - Initial string
+// @param {String} $search - Substring to replace
+// @param {String} $replace ('') - New value
+// @return {String} - Updated string
+@function str-replace($string, $search, $replace: "") {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+// Color contrast
+@function color-yiq($color, $dark: $yiq-text-dark, $light: $yiq-text-light) {
+  $r: red($color);
+  $g: green($color);
+  $b: blue($color);
+
+  $yiq: (($r * 299) + ($g * 587) + ($b * 114)) / 1000;
+
+  @if ($yiq >= $yiq-contrasted-threshold) {
+    @return $dark;
+  } @else {
+    @return $light;
+  }
+}
+
+// Retrieve color Sass maps
+@function color($key: "blue") {
+  @return map-get($colors, $key);
+}
+
+@function theme-color($key: "primary") {
+  @return map-get($theme-colors, $key);
+}
+
+@function gray($key: "100") {
+  @return map-get($grays, $key);
+}
+
+// Request a theme color level
+@function theme-color-level($color-name: "primary", $level: 0) {
+  $color: theme-color($color-name);
+  $color-base: if($level > 0, $black, $white);
+  $level: abs($level);
+
+  @return mix($color-base, $color, $level * $theme-color-interval);
+}
diff --git a/website/public/css/bootstrap-4.4.1/_variables.scss b/website/public/css/bootstrap-4.4.1/_variables.scss
new file mode 100755
index 0000000..d9e88df
--- /dev/null
+++ b/website/public/css/bootstrap-4.4.1/_variables.scss
@@ -0,0 +1,1123 @@
+// Variables
+//
+// Variables should follow the `$component-state-property-size` formula for
+// consistent naming. Ex: $nav-link-disabled-color and $modal-content-box-shadow-xs.
+
+// Color system
+
+$white:    #fff !default;
+$gray-100: #f8f9fa !default;
+$gray-200: #e9ecef !default;
+$gray-300: #dee2e6 !default;
+$gray-400: #ced4da !default;
+$gray-500: #adb5bd !default;
+$gray-600: #6c757d !default;
+$gray-700: #495057 !default;
+$gray-800: #343a40 !default;
+$gray-900: #212529 !default;
+$black:    #000 !default;
+
+$grays: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$grays: map-merge(
+  (
+    "100": $gray-100,
+    "200": $gray-200,
+    "300": $gray-300,
+    "400": $gray-400,
+    "500": $gray-500,
+    "600": $gray-600,
+    "700": $gray-700,
+    "800": $gray-800,
+    "900": $gray-900
+  ),
+  $grays
+);
+
+$blue:    #007bff !default;
+$indigo:  #6610f2 !default;
+$purple:  #6f42c1 !default;
+$pink:    #e83e8c !default;
+$red:     #dc3545 !default;
+$orange:  #fd7e14 !default;
+$yellow:  #ffc107 !default;
+$green:   #28a745 !default;
+$teal:    #20c997 !default;
+$cyan:    #17a2b8 !default;
+
+$colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$colors: map-merge(
+  (
+    "blue":       $blue,
+    "indigo":     $indigo,
+    "purple":     $purple,
+    "pink":       $pink,
+    "red":        $red,
+    "orange":     $orange,
+    "yellow":     $yellow,
+    "green":      $green,
+    "teal":       $teal,
+    "cyan":       $cyan,
+    "white":      $white,
+    "gray":       $gray-600,
+    "gray-dark":  $gray-800
+  ),
+  $colors
+);
+
+$primary:       $blue !default;
+$secondary:     $gray-600 !default;
+$success:       $green !default;
+$info:          $cyan !default;
+$warning:       $yellow !default;
+$danger:        $red !default;
+$light:         $gray-100 !default;
+$dark:          $gray-800 !default;
+
+$theme-colors: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$theme-colors: map-merge(
+  (
+    "primary":    $primary,
+    "secondary":  $secondary,
+    "success":    $success,
+    "info":       $info,
+    "warning":    $warning,
+    "danger":     $danger,
+    "light":      $light,
+    "dark":       $dark
+  ),
+  $theme-colors
+);
+
+// Set a specific jump point for requesting color jumps
+$theme-color-interval:      8% !default;
+
+// The yiq lightness value that determines when the lightness of color changes from "dark" to "light". Acceptable values are between 0 and 255.
+$yiq-contrasted-threshold:  150 !default;
+
+// Customize the light and dark text colors for use in our YIQ color contrast function.
+$yiq-text-dark:             $gray-900 !default;
+$yiq-text-light:            $white !default;
+
+
+// Options
+//
+// Quickly modify global styling by enabling or disabling optional features.
+
+$enable-caret:                                true !default;
+$enable-rounded:                              true !default;
+$enable-shadows:                              false !default;
+$enable-gradients:                            false !default;
+$enable-transitions:                          true !default;
+$enable-prefers-reduced-motion-media-query:   true !default;
+$enable-hover-media-query:                    false !default; // Deprecated, no longer affects any compiled CSS
+$enable-grid-classes:                         true !default;
+$enable-pointer-cursor-for-buttons:           true !default;
+$enable-print-styles:                         true !default;
+$enable-responsive-font-sizes:                false !default;
+$enable-validation-icons:                     true !default;
+$enable-deprecation-messages:                 true !default;
+
+
+// Spacing
+//
+// Control the default styling of most Bootstrap elements by modifying these
+// variables. Mostly focused on spacing.
+// You can add more entries to the $spacers map, should you need more variation.
+
+$spacer: 1rem !default;
+$spacers: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$spacers: map-merge(
+  (
+    0: 0,
+    1: ($spacer * .25),
+    2: ($spacer * .5),
+    3: $spacer,
+    4: ($spacer * 1.5),
+    5: ($spacer * 3)
+  ),
+  $spacers
+);
+
+// This variable affects the `.h-*` and `.w-*` classes.
+$sizes: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$sizes: map-merge(
+  (
+    25: 25%,
+    50: 50%,
+    75: 75%,
+    100: 100%,
+    auto: auto
+  ),
+  $sizes
+);
+
+
+// Body
+//
+// Settings for the `<body>` element.
+
+$body-bg:                   $white !default;
+$body-color:                $gray-900 !default;
+
+
+// Links
+//
+// Style anchor elements.
+
+$link-color:                              theme-color("primary") !default;
+$link-decoration:                         none !default;
+$link-hover-color:                        darken($link-color, 15%) !default;
+$link-hover-decoration:                   underline !default;
+// Darken percentage for links with `.text-*` class (e.g. `.text-success`)
+$emphasized-link-hover-darken-percentage: 15% !default;
+
+// Paragraphs
+//
+// Style p element.
+
+$paragraph-margin-bottom:   1rem !default;
+
+
+// Grid breakpoints
+//
+// Define the minimum dimensions at which your layout will change,
+// adapting to different screen sizes, for use in media queries.
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px
+) !default;
+
+@include _assert-ascending($grid-breakpoints, "$grid-breakpoints");
+@include _assert-starts-at-zero($grid-breakpoints, "$grid-breakpoints");
+
+
+// Grid containers
+//
+// Define the maximum width of `.container` for different screen sizes.
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px
+) !default;
+
+@include _assert-ascending($container-max-widths, "$container-max-widths");
+
+
+// Grid columns
+//
+// Set the number of columns and specify the width of the gutters.
+
+$grid-columns:                12 !default;
+$grid-gutter-width:           30px !default;
+
+
+// Components
+//
+// Define common padding and border radius sizes and more.
+
+$line-height-lg:              1.5 !default;
+$line-height-sm:              1.5 !default;
+
+$border-width:                1px !default;
+$border-color:                $gray-300 !default;
+
+$border-radius:               .25rem !default;
+$border-radius-lg:            .3rem !default;
+$border-radius-sm:            .2rem !default;
+
+$rounded-pill:                50rem !default;
+
+$box-shadow-sm:               0 .125rem .25rem rgba($black, .075) !default;
+$box-shadow:                  0 .5rem 1rem rgba($black, .15) !default;
+$box-shadow-lg:               0 1rem 3rem rgba($black, .175) !default;
+
+$component-active-color:      $white !default;
+$component-active-bg:         theme-color("primary") !default;
+
+$caret-width:                 .3em !default;
+$caret-vertical-align:        $caret-width * .85 !default;
+$caret-spacing:               $caret-width * .85 !default;
+
+$transition-base:             all .2s ease-in-out !default;
+$transition-fade:             opacity .15s linear !default;
+$transition-collapse:         height .35s ease !default;
+
+$embed-responsive-aspect-ratios: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$embed-responsive-aspect-ratios: join(
+  (
+    (21 9),
+    (16 9),
+    (4 3),
+    (1 1),
+  ),
+  $embed-responsive-aspect-ratios
+);
+
+// Typography
+//
+// Font, line-height, and color for body text, headings, and more.
+
+// stylelint-disable value-keyword-case
+$font-family-sans-serif:      -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji" !default;
+$font-family-monospace:       SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace !default;
+$font-family-base:            $font-family-sans-serif !default;
+// stylelint-enable value-keyword-case
+
+$font-size-base:              1rem !default; // Assumes the browser default, typically `16px`
+$font-size-lg:                $font-size-base * 1.25 !default;
+$font-size-sm:                $font-size-base * .875 !default;
+
+$font-weight-lighter:         lighter !default;
+$font-weight-light:           300 !default;
+$font-weight-normal:          400 !default;
+$font-weight-bold:            700 !default;
+$font-weight-bolder:          bolder !default;
+
+$font-weight-base:            $font-weight-normal !default;
+$line-height-base:            1.5 !default;
+
+$h1-font-size:                $font-size-base * 2.5 !default;
+$h2-font-size:                $font-size-base * 2 !default;
+$h3-font-size:                $font-size-base * 1.75 !default;
+$h4-font-size:                $font-size-base * 1.5 !default;
+$h5-font-size:                $font-size-base * 1.25 !default;
+$h6-font-size:                $font-size-base !default;
+
+$headings-margin-bottom:      $spacer / 2 !default;
+$headings-font-family:        null !default;
+$headings-font-weight:        500 !default;
+$headings-line-height:        1.2 !default;
+$headings-color:              null !default;
+
+$display1-size:               6rem !default;
+$display2-size:               5.5rem !default;
+$display3-size:               4.5rem !default;
+$display4-size:               3.5rem !default;
+
+$display1-weight:             300 !default;
+$display2-weight:             300 !default;
+$display3-weight:             300 !default;
+$display4-weight:             300 !default;
+$display-line-height:         $headings-line-height !default;
+
+$lead-font-size:              $font-size-base * 1.25 !default;
+$lead-font-weight:            300 !default;
+
+$small-font-size:             80% !default;
+
+$text-muted:                  $gray-600 !default;
+
+$blockquote-small-color:      $gray-600 !default;
+$blockquote-small-font-size:  $small-font-size !default;
+$blockquote-font-size:        $font-size-base * 1.25 !default;
+
+$hr-border-color:             rgba($black, .1) !default;
+$hr-border-width:             $border-width !default;
+
+$mark-padding:                .2em !default;
+
+$dt-font-weight:              $font-weight-bold !default;
+
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight:      $font-weight-bold !default;
+
+$list-inline-padding:         .5rem !default;
+
+$mark-bg:                     #fcf8e3 !default;
+
+$hr-margin-y:                 $spacer !default;
+
+
+// Tables
+//
+// Customizes the `.table` component with basic values, each used across all table variations.
+
+$table-cell-padding:          .75rem !default;
+$table-cell-padding-sm:       .3rem !default;
+
+$table-color:                 $body-color !default;
+$table-bg:                    null !default;
+$table-accent-bg:             rgba($black, .05) !default;
+$table-hover-color:           $table-color !default;
+$table-hover-bg:              rgba($black, .075) !default;
+$table-active-bg:             $table-hover-bg !default;
+
+$table-border-width:          $border-width !default;
+$table-border-color:          $border-color !default;
+
+$table-head-bg:               $gray-200 !default;
+$table-head-color:            $gray-700 !default;
+
+$table-dark-color:            $white !default;
+$table-dark-bg:               $gray-800 !default;
+$table-dark-accent-bg:        rgba($white, .05) !default;
+$table-dark-hover-color:      $table-dark-color !default;
+$table-dark-hover-bg:         rgba($white, .075) !default;
+$table-dark-border-color:     lighten($table-dark-bg, 7.5%) !default;
+$table-dark-color:            $white !default;
+
+$table-striped-order:         odd !default;
+
+$table-caption-color:         $text-muted !default;
+
+$table-bg-level:              -9 !default;
+$table-border-level:          -6 !default;
+
+
+// Buttons + Forms
+//
+// Shared variables that are reassigned to `$input-` and `$btn-` specific variables.
+
+$input-btn-padding-y:         .375rem !default;
+$input-btn-padding-x:         .75rem !default;
+$input-btn-font-family:       null !default;
+$input-btn-font-size:         $font-size-base !default;
+$input-btn-line-height:       $line-height-base !default;
+
+$input-btn-focus-width:       .2rem !default;
+$input-btn-focus-color:       rgba($component-active-bg, .25) !default;
+$input-btn-focus-box-shadow:  0 0 0 $input-btn-focus-width $input-btn-focus-color !default;
+
+$input-btn-padding-y-sm:      .25rem !default;
+$input-btn-padding-x-sm:      .5rem !default;
+$input-btn-font-size-sm:      $font-size-sm !default;
+$input-btn-line-height-sm:    $line-height-sm !default;
+
+$input-btn-padding-y-lg:      .5rem !default;
+$input-btn-padding-x-lg:      1rem !default;
+$input-btn-font-size-lg:      $font-size-lg !default;
+$input-btn-line-height-lg:    $line-height-lg !default;
+
+$input-btn-border-width:      $border-width !default;
+
+
+// Buttons
+//
+// For each of Bootstrap's buttons, define text, background, and border color.
+
+$btn-padding-y:               $input-btn-padding-y !default;
+$btn-padding-x:               $input-btn-padding-x !default;
+$btn-font-family:             $input-btn-font-family !default;
+$btn-font-size:               $input-btn-font-size !default;
+$btn-line-height:             $input-btn-line-height !default;
+
+$btn-padding-y-sm:            $input-btn-padding-y-sm !default;
+$btn-padding-x-sm:            $input-btn-padding-x-sm !default;
+$btn-font-size-sm:            $input-btn-font-size-sm !default;
+$btn-line-height-sm:          $input-btn-line-height-sm !default;
+
+$btn-padding-y-lg:            $input-btn-padding-y-lg !default;
+$btn-padding-x-lg:            $input-btn-padding-x-lg !default;
+$btn-font-size-lg:            $input-btn-font-size-lg !default;
+$btn-line-height-lg:          $input-btn-line-height-lg !default;
+
+$btn-border-width:            $input-btn-border-width !default;
+
+$btn-font-weight:             $font-weight-normal !default;
+$btn-box-shadow:              inset 0 1px 0 rgba($white, .15), 0 1px 1px rgba($black, .075) !default;
+$btn-focus-width:             $input-btn-focus-width !default;
+$btn-focus-box-shadow:        $input-btn-focus-box-shadow !default;
+$btn-disabled-opacity:        .65 !default;
+$btn-active-box-shadow:       inset 0 3px 5px rgba($black, .125) !default;
+
+$btn-link-disabled-color:     $gray-600 !default;
+
+$btn-block-spacing-y:         .5rem !default;
+
+// Allows for customizing button radius independently from global border radius
+$btn-border-radius:           $border-radius !default;
+$btn-border-radius-lg:        $border-radius-lg !default;
+$btn-border-radius-sm:        $border-radius-sm !default;
+
+$btn-transition:              color .15s ease-in-out, background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+
+// Forms
+
+$label-margin-bottom:                   .5rem !default;
+
+$input-padding-y:                       $input-btn-padding-y !default;
+$input-padding-x:                       $input-btn-padding-x !default;
+$input-font-family:                     $input-btn-font-family !default;
+$input-font-size:                       $input-btn-font-size !default;
+$input-font-weight:                     $font-weight-base !default;
+$input-line-height:                     $input-btn-line-height !default;
+
+$input-padding-y-sm:                    $input-btn-padding-y-sm !default;
+$input-padding-x-sm:                    $input-btn-padding-x-sm !default;
+$input-font-size-sm:                    $input-btn-font-size-sm !default;
+$input-line-height-sm:                  $input-btn-line-height-sm !default;
+
+$input-padding-y-lg:                    $input-btn-padding-y-lg !default;
+$input-padding-x-lg:                    $input-btn-padding-x-lg !default;
+$input-font-size-lg:                    $input-btn-font-size-lg !default;
+$input-line-height-lg:                  $input-btn-line-height-lg !default;
+
+$input-bg:                              $white !default;
+$input-disabled-bg:                     $gray-200 !default;
+
+$input-color:                           $gray-700 !default;
+$input-border-color:                    $gray-400 !default;
+$input-border-width:                    $input-btn-border-width !default;
+$input-box-shadow:                      inset 0 1px 1px rgba($black, .075) !default;
+
+$input-border-radius:                   $border-radius !default;
+$input-border-radius-lg:                $border-radius-lg !default;
+$input-border-radius-sm:                $border-radius-sm !default;
+
+$input-focus-bg:                        $input-bg !default;
+$input-focus-border-color:              lighten($component-active-bg, 25%) !default;
+$input-focus-color:                     $input-color !default;
+$input-focus-width:                     $input-btn-focus-width !default;
+$input-focus-box-shadow:                $input-btn-focus-box-shadow !default;
+
+$input-placeholder-color:               $gray-600 !default;
+$input-plaintext-color:                 $body-color !default;
+
+$input-height-border:                   $input-border-width * 2 !default;
+
+$input-height-inner:                    calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
+$input-height-inner-half:               calc(#{$input-line-height * .5em} + #{$input-padding-y}) !default;
+$input-height-inner-quarter:            calc(#{$input-line-height * .25em} + #{$input-padding-y / 2}) !default;
+
+$input-height:                          calc(#{$input-line-height * 1em} + #{$input-padding-y * 2} + #{$input-height-border}) !default;
+$input-height-sm:                       calc(#{$input-line-height-sm * 1em} + #{$input-btn-padding-y-sm * 2} + #{$input-height-border}) !default;
+$input-height-lg:                       calc(#{$input-line-height-lg * 1em} + #{$input-btn-padding-y-lg * 2} + #{$input-height-border}) !default;
+
+$input-transition:                      border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$form-text-margin-top:                  .25rem !default;
+
+$form-check-input-gutter:               1.25rem !default;
+$form-check-input-margin-y:             .3rem !default;
+$form-check-input-margin-x:             .25rem !default;
+
+$form-check-inline-margin-x:            .75rem !default;
+$form-check-inline-input-margin-x:      .3125rem !default;
+
+$form-grid-gutter-width:                10px !default;
+$form-group-margin-bottom:              1rem !default;
+
+$input-group-addon-color:               $input-color !default;
+$input-group-addon-bg:                  $gray-200 !default;
+$input-group-addon-border-color:        $input-border-color !default;
+
+$custom-forms-transition:               background-color .15s ease-in-out, border-color .15s ease-in-out, box-shadow .15s ease-in-out !default;
+
+$custom-control-gutter:                 .5rem !default;
+$custom-control-spacer-x:               1rem !default;
+
+$custom-control-indicator-size:         1rem !default;
+$custom-control-indicator-bg:           $input-bg !default;
+
+$custom-control-indicator-bg-size:      50% 50% !default;
+$custom-control-indicator-box-shadow:   $input-box-shadow !default;
+$custom-control-indicator-border-color: $gray-500 !default;
+$custom-control-indicator-border-width: $input-border-width !default;
+
+$custom-control-indicator-disabled-bg:          $input-disabled-bg !default;
+$custom-control-label-disabled-color:           $gray-600 !default;
+
+$custom-control-indicator-checked-color:        $component-active-color !default;
+$custom-control-indicator-checked-bg:           $component-active-bg !default;
+$custom-control-indicator-checked-disabled-bg:  rgba(theme-color("primary"), .5) !default;
+$custom-control-indicator-checked-box-shadow:   none !default;
+$custom-control-indicator-checked-border-color: $custom-control-indicator-checked-bg !default;
+
+$custom-control-indicator-focus-box-shadow:     $input-focus-box-shadow !default;
+$custom-control-indicator-focus-border-color:   $input-focus-border-color !default;
+
+$custom-control-indicator-active-color:         $component-active-color !default;
+$custom-control-indicator-active-bg:            lighten($component-active-bg, 35%) !default;
+$custom-control-indicator-active-box-shadow:    none !default;
+$custom-control-indicator-active-border-color:  $custom-control-indicator-active-bg !default;
+
+$custom-checkbox-indicator-border-radius:       $border-radius !default;
+$custom-checkbox-indicator-icon-checked:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$custom-control-indicator-checked-color}' d='M6.564.75l-3.59 3.612-1.538-1.55L0 4.26 2.974 7.25 8 2.193z'/%3e%3c/svg%3e"), "#", "%23") !default;
+
+$custom-checkbox-indicator-indeterminate-bg:           $component-active-bg !default;
+$custom-checkbox-indicator-indeterminate-color:        $custom-control-indicator-checked-color !default;
+$custom-checkbox-indicator-icon-indeterminate:         str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 4'%3e%3cpath stroke='#{$custom-checkbox-indicator-indeterminate-color}' d='M0 2h4'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-checkbox-indicator-indeterminate-box-shadow:   none !default;
+$custom-checkbox-indicator-indeterminate-border-color: $custom-checkbox-indicator-indeterminate-bg !default;
+
+$custom-radio-indicator-border-radius:          50% !default;
+$custom-radio-indicator-icon-checked:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='#{$custom-control-indicator-checked-color}'/%3e%3c/svg%3e"), "#", "%23") !default;
+
+$custom-switch-width:                           $custom-control-indicator-size * 1.75 !default;
+$custom-switch-indicator-border-radius:         $custom-control-indicator-size / 2 !default;
+$custom-switch-indicator-size:                  calc(#{$custom-control-indicator-size} - #{$custom-control-indicator-border-width * 4}) !default;
+
+$custom-select-padding-y:           $input-padding-y !default;
+$custom-select-padding-x:           $input-padding-x !default;
+$custom-select-font-family:         $input-font-family !default;
+$custom-select-font-size:           $input-font-size !default;
+$custom-select-height:              $input-height !default;
+$custom-select-indicator-padding:   1rem !default; // Extra padding to account for the presence of the background-image based indicator
+$custom-select-font-weight:         $input-font-weight !default;
+$custom-select-line-height:         $input-line-height !default;
+$custom-select-color:               $input-color !default;
+$custom-select-disabled-color:      $gray-600 !default;
+$custom-select-bg:                  $input-bg !default;
+$custom-select-disabled-bg:         $gray-200 !default;
+$custom-select-bg-size:             8px 10px !default; // In pixels because image dimensions
+$custom-select-indicator-color:     $gray-800 !default;
+$custom-select-indicator:           str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 4 5'%3e%3cpath fill='#{$custom-select-indicator-color}' d='M2 0L0 2h4zm0 5L0 3h4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$custom-select-background:          $custom-select-indicator no-repeat right $custom-select-padding-x center / $custom-select-bg-size !default; // Used so we can have multiple background elements (e.g., arrow and feedback icon)
+
+$custom-select-feedback-icon-padding-right: calc((1em + #{2 * $custom-select-padding-y}) * 3 / 4 + #{$custom-select-padding-x + $custom-select-indicator-padding}) !default;
+$custom-select-feedback-icon-position:      center right ($custom-select-padding-x + $custom-select-indicator-padding) !default;
+$custom-select-feedback-icon-size:          $input-height-inner-half $input-height-inner-half !default;
+
+$custom-select-border-width:        $input-border-width !default;
+$custom-select-border-color:        $input-border-color !default;
+$custom-select-border-radius:       $border-radius !default;
+$custom-select-box-shadow:          inset 0 1px 2px rgba($black, .075) !default;
+
+$custom-select-focus-border-color:  $input-focus-border-color !default;
+$custom-select-focus-width:         $input-focus-width !default;
+$custom-select-focus-box-shadow:    0 0 0 $custom-select-focus-width $input-btn-focus-color !default;
+
+$custom-select-padding-y-sm:        $input-padding-y-sm !default;
+$custom-select-padding-x-sm:        $input-padding-x-sm !default;
+$custom-select-font-size-sm:        $input-font-size-sm !default;
+$custom-select-height-sm:           $input-height-sm !default;
+
+$custom-select-padding-y-lg:        $input-padding-y-lg !default;
+$custom-select-padding-x-lg:        $input-padding-x-lg !default;
+$custom-select-font-size-lg:        $input-font-size-lg !default;
+$custom-select-height-lg:           $input-height-lg !default;
+
+$custom-range-track-width:          100% !default;
+$custom-range-track-height:         .5rem !default;
+$custom-range-track-cursor:         pointer !default;
+$custom-range-track-bg:             $gray-300 !default;
+$custom-range-track-border-radius:  1rem !default;
+$custom-range-track-box-shadow:     inset 0 .25rem .25rem rgba($black, .1) !default;
+
+$custom-range-thumb-width:                   1rem !default;
+$custom-range-thumb-height:                  $custom-range-thumb-width !default;
+$custom-range-thumb-bg:                      $component-active-bg !default;
+$custom-range-thumb-border:                  0 !default;
+$custom-range-thumb-border-radius:           1rem !default;
+$custom-range-thumb-box-shadow:              0 .1rem .25rem rgba($black, .1) !default;
+$custom-range-thumb-focus-box-shadow:        0 0 0 1px $body-bg, $input-focus-box-shadow !default;
+$custom-range-thumb-focus-box-shadow-width:  $input-focus-width !default; // For focus box shadow issue in IE/Edge
+$custom-range-thumb-active-bg:               lighten($component-active-bg, 35%) !default;
+$custom-range-thumb-disabled-bg:             $gray-500 !default;
+
+$custom-file-height:                $input-height !default;
+$custom-file-height-inner:          $input-height-inner !default;
+$custom-file-focus-border-color:    $input-focus-border-color !default;
+$custom-file-focus-box-shadow:      $input-focus-box-shadow !default;
+$custom-file-disabled-bg:           $input-disabled-bg !default;
+
+$custom-file-padding-y:             $input-padding-y !default;
+$custom-file-padding-x:             $input-padding-x !default;
+$custom-file-line-height:           $input-line-height !default;
+$custom-file-font-family:           $input-font-family !default;
+$custom-file-font-weight:           $input-font-weight !default;
+$custom-file-color:                 $input-color !default;
+$custom-file-bg:                    $input-bg !default;
+$custom-file-border-width:          $input-border-width !default;
+$custom-file-border-color:          $input-border-color !default;
+$custom-file-border-radius:         $input-border-radius !default;
+$custom-file-box-shadow:            $input-box-shadow !default;
+$custom-file-button-color:          $custom-file-color !default;
+$custom-file-button-bg:             $input-group-addon-bg !default;
+$custom-file-text: (
+  en: "Browse"
+) !default;
+
+
+// Form validation
+
+$form-feedback-margin-top:          $form-text-margin-top !default;
+$form-feedback-font-size:           $small-font-size !default;
+$form-feedback-valid-color:         theme-color("success") !default;
+$form-feedback-invalid-color:       theme-color("danger") !default;
+
+$form-feedback-icon-valid-color:    $form-feedback-valid-color !default;
+$form-feedback-icon-valid:          str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3e%3cpath fill='#{$form-feedback-icon-valid-color}' d='M2.3 6.73L.6 4.53c-.4-1.04.46-1.4 1.1-.8l1.1 1.4 3.4-3.8c.6-.63 1.6-.27 1.2.7l-4 4.6c-.43.5-.8.4-1.1.1z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$form-feedback-icon-invalid-color:  $form-feedback-invalid-color !default;
+$form-feedback-icon-invalid:        str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$form-feedback-icon-invalid-color}' viewBox='-2 -2 7 7'%3e%3cpath stroke='#{$form-feedback-icon-invalid-color}' d='M0 0l3 3m0-3L0 3'/%3e%3ccircle r='.5'/%3e%3ccircle cx='3' r='.5'/%3e%3ccircle cy='3' r='.5'/%3e%3ccircle cx='3' cy='3' r='.5'/%3e%3c/svg%3E"), "#", "%23") !default;
+
+$form-validation-states: () !default;
+// stylelint-disable-next-line scss/dollar-variable-default
+$form-validation-states: map-merge(
+  (
+    "valid": (
+      "color": $form-feedback-valid-color,
+      "icon": $form-feedback-icon-valid
+    ),
+    "invalid": (
+      "color": $form-feedback-invalid-color,
+      "icon": $form-feedback-icon-invalid
+    ),
+  ),
+  $form-validation-states
+);
+
+// Z-index master list
+//
+// Warning: Avoid customizing these values. They're used for a bird's eye view
+// of components dependent on the z-axis and are designed to all work together.
+
+$zindex-dropdown:                   1000 !default;
+$zindex-sticky:                     1020 !default;
+$zindex-fixed:                      1030 !default;
+$zindex-modal-backdrop:             1040 !default;
+$zindex-modal:                      1050 !default;
+$zindex-popover:                    1060 !default;
+$zindex-tooltip:                    1070 !default;
+
+
+// Navs
+
+$nav-link-padding-y:                .5rem !default;
+$nav-link-padding-x:                1rem !default;
+$nav-link-disabled-color:           $gray-600 !default;
+
+$nav-tabs-border-color:             $gray-300 !default;
+$nav-tabs-border-width:             $border-width !default;
+$nav-tabs-border-radius:            $border-radius !default;
+$nav-tabs-link-hover-border-color:  $gray-200 $gray-200 $nav-tabs-border-color !default;
+$nav-tabs-link-active-color:        $gray-700 !default;
+$nav-tabs-link-active-bg:           $body-bg !default;
+$nav-tabs-link-active-border-color: $gray-300 $gray-300 $nav-tabs-link-active-bg !default;
+
+$nav-pills-border-radius:           $border-radius !default;
+$nav-pills-link-active-color:       $component-active-color !default;
+$nav-pills-link-active-bg:          $component-active-bg !default;
+
+$nav-divider-color:                 $gray-200 !default;
+$nav-divider-margin-y:              $spacer / 2 !default;
+
+
+// Navbar
+
+$navbar-padding-y:                  $spacer / 2 !default;
+$navbar-padding-x:                  $spacer !default;
+
+$navbar-nav-link-padding-x:         .5rem !default;
+
+$navbar-brand-font-size:            $font-size-lg !default;
+// Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
+$nav-link-height:                   $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
+$navbar-brand-height:               $navbar-brand-font-size * $line-height-base !default;
+$navbar-brand-padding-y:            ($nav-link-height - $navbar-brand-height) / 2 !default;
+
+$navbar-toggler-padding-y:          .25rem !default;
+$navbar-toggler-padding-x:          .75rem !default;
+$navbar-toggler-font-size:          $font-size-lg !default;
+$navbar-toggler-border-radius:      $btn-border-radius !default;
+
+$navbar-dark-color:                 rgba($white, .5) !default;
+$navbar-dark-hover-color:           rgba($white, .75) !default;
+$navbar-dark-active-color:          $white !default;
+$navbar-dark-disabled-color:        rgba($white, .25) !default;
+$navbar-dark-toggler-icon-bg:       str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-dark-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-dark-toggler-border-color:  rgba($white, .1) !default;
+
+$navbar-light-color:                rgba($black, .5) !default;
+$navbar-light-hover-color:          rgba($black, .7) !default;
+$navbar-light-active-color:         rgba($black, .9) !default;
+$navbar-light-disabled-color:       rgba($black, .3) !default;
+$navbar-light-toggler-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3e%3cpath stroke='#{$navbar-light-color}' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e"), "#", "%23") !default;
+$navbar-light-toggler-border-color: rgba($black, .1) !default;
+
+$navbar-light-brand-color:                $navbar-light-active-color !default;
+$navbar-light-brand-hover-color:          $navbar-light-active-color !default;
+$navbar-dark-brand-color:                 $navbar-dark-active-color !default;
+$navbar-dark-brand-hover-color:           $navbar-dark-active-color !default;
+
+
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                10rem !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
+$dropdown-bg:                       $white !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
+$dropdown-border-width:             $border-width !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-divider-bg:               $gray-200 !default;
+$dropdown-divider-margin-y:         $nav-divider-margin-y !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color:               $gray-900 !default;
+$dropdown-link-hover-color:         darken($gray-900, 5%) !default;
+$dropdown-link-hover-bg:            $gray-100 !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      $gray-600 !default;
+
+$dropdown-item-padding-y:           .25rem !default;
+$dropdown-item-padding-x:           1.5rem !default;
+
+$dropdown-header-color:             $gray-600 !default;
+
+
+// Pagination
+
+$pagination-padding-y:              .5rem !default;
+$pagination-padding-x:              .75rem !default;
+$pagination-padding-y-sm:           .25rem !default;
+$pagination-padding-x-sm:           .5rem !default;
+$pagination-padding-y-lg:           .75rem !default;
+$pagination-padding-x-lg:           1.5rem !default;
+$pagination-line-height:            1.25 !default;
+
+$pagination-color:                  $link-color !default;
+$pagination-bg:                     $white !default;
+$pagination-border-width:           $border-width !default;
+$pagination-border-color:           $gray-300 !default;
+
+$pagination-focus-box-shadow:       $input-btn-focus-box-shadow !default;
+$pagination-focus-outline:          0 !default;
+
+$pagination-hover-color:            $link-hover-color !default;
+$pagination-hover-bg:               $gray-200 !default;
+$pagination-hover-border-color:     $gray-300 !default;
+
+$pagination-active-color:           $component-active-color !default;
+$pagination-active-bg:              $component-active-bg !default;
+$pagination-active-border-color:    $pagination-active-bg !default;
+
+$pagination-disabled-color:         $gray-600 !default;
+$pagination-disabled-bg:            $white !default;
+$pagination-disabled-border-color:  $gray-300 !default;
+
+
+// Jumbotron
+
+$jumbotron-padding:                 2rem !default;
+$jumbotron-color:                   null !default;
+$jumbotron-bg:                      $gray-200 !default;
+
+
+// Cards
+
+$card-spacer-y:                     .75rem !default;
+$card-spacer-x:                     1.25rem !default;
+$card-border-width:                 $border-width !default;
+$card-border-radius:                $border-radius !default;
+$card-border-color:                 rgba($black, .125) !default;
+$card-inner-border-radius:          calc(#{$card-border-radius} - #{$card-border-width}) !default;
+$card-cap-bg:                       rgba($black, .03) !default;
+$card-cap-color:                    null !default;
+$card-color:                        null !default;
+$card-bg:                           $white !default;
+
+$card-img-overlay-padding:          1.25rem !default;
+
+$card-group-margin:                 $grid-gutter-width / 2 !default;
+$card-deck-margin:                  $card-group-margin !default;
+
+$card-columns-count:                3 !default;
+$card-columns-gap:                  1.25rem !default;
+$card-columns-margin:               $card-spacer-y !default;
+
+
+// Tooltips
+
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $white !default;
+$tooltip-bg:                        $black !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   .9 !default;
+$tooltip-padding-y:                 .25rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+// Form tooltips must come after regular tooltips
+$form-feedback-tooltip-padding-y:     $tooltip-padding-y !default;
+$form-feedback-tooltip-padding-x:     $tooltip-padding-x !default;
+$form-feedback-tooltip-font-size:     $tooltip-font-size !default;
+$form-feedback-tooltip-line-height:   $line-height-base !default;
+$form-feedback-tooltip-opacity:       $tooltip-opacity !default;
+$form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
+
+
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 276px !default;
+$popover-border-width:              $border-width !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-lg !default;
+$popover-box-shadow:                0 .25rem .5rem rgba($black, .2) !default;
+
+$popover-header-bg:                 darken($popover-bg, 3%) !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          .75rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+
+// Toasts
+
+$toast-max-width:                   350px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .25rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            rgba($white, .85) !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               .25rem !default;
+$toast-box-shadow:                  0 .25rem .75rem rgba($black, .1) !default;
+
+$toast-header-color:                $gray-600 !default;
+$toast-header-background-color:     rgba($white, .85) !default;
+$toast-header-border-color:         rgba(0, 0, 0, .05) !default;
+
+
+// Badges
+
+$badge-font-size:                   75% !default;
+$badge-font-weight:                 $font-weight-bold !default;
+$badge-padding-y:                   .25em !default;
+$badge-padding-x:                   .4em !default;
+$badge-border-radius:               $border-radius !default;
+
+$badge-transition:                  $btn-transition !default;
+$badge-focus-width:                 $input-btn-focus-width !default;
+
+$badge-pill-padding-x:              .6em !default;
+// Use a higher than normal value to ensure completely rounded edges when
+// customizing padding or font-size on labels.
+$badge-pill-border-radius:          10rem !default;
+
+
+// Modals
+
+// Padding applied to the modal body
+$modal-inner-padding:               1rem !default;
+
+$modal-dialog-margin:               .5rem !default;
+$modal-dialog-margin-y-sm-up:       1.75rem !default;
+
+$modal-title-line-height:           $line-height-base !default;
+
+$modal-content-color:               null !default;
+$modal-content-bg:                  $white !default;
+$modal-content-border-color:        rgba($black, .2) !default;
+$modal-content-border-width:        $border-width !default;
+$modal-content-border-radius:       $border-radius-lg !default;
+$modal-content-box-shadow-xs:       0 .25rem .5rem rgba($black, .5) !default;
+$modal-content-box-shadow-sm-up:    0 .5rem 1rem rgba($black, .5) !default;
+
+$modal-backdrop-bg:                 $black !default;
+$modal-backdrop-opacity:            .5 !default;
+$modal-header-border-color:         $border-color !default;
+$modal-footer-border-color:         $modal-header-border-color !default;
+$modal-header-border-width:         $modal-content-border-width !default;
+$modal-footer-border-width:         $modal-header-border-width !default;
+$modal-header-padding-y:            1rem !default;
+$modal-header-padding-x:            1rem !default;
+$modal-header-padding:              $modal-header-padding-y $modal-header-padding-x !default; // Keep this for backwards compatibility
+
+$modal-xl:                          1140px !default;
+$modal-lg:                          800px !default;
+$modal-md:                          500px !default;
+$modal-sm:                          300px !default;
+
+$modal-fade-transform:              translate(0, -50px) !default;
+$modal-show-transform:              none !default;
+$modal-transition:                  transform .3s ease-out !default;
+
+
+// Alerts
+//
+// Define alert colors, border radius, and padding.
+
+$alert-padding-y:                   .75rem !default;
+$alert-padding-x:                   1.25rem !default;
+$alert-margin-bottom:               1rem !default;
+$alert-border-radius:               $border-radius !default;
+$alert-link-font-weight:            $font-weight-bold !default;
+$alert-border-width:                $border-width !default;
+
+$alert-bg-level:                    -10 !default;
+$alert-border-level:                -9 !default;
+$alert-color-level:                 6 !default;
+
+
+// Progress bars
+
+$progress-height:                   1rem !default;
+$progress-font-size:                $font-size-base * .75 !default;
+$progress-bg:                       $gray-200 !default;
+$progress-border-radius:            $border-radius !default;
+$progress-box-shadow:               inset 0 .1rem .1rem rgba($black, .1) !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   theme-color("primary") !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
+
+
+// List group
+
+$list-group-color:                  null !default;
+$list-group-bg:                     $white !default;
+$list-group-border-color:           rgba($black, .125) !default;
+$list-group-border-width:           $border-width !default;
+$list-group-border-radius:          $border-radius !default;
+
+$list-group-item-padding-y:         .75rem !default;
+$list-group-item-padding-x:         1.25rem !default;
+
+$list-group-hover-bg:               $gray-100 !default;
+$list-group-active-color:           $component-active-color !default;
+$list-group-active-bg:              $component-active-bg !default;
+$list-group-active-border-color:    $list-group-active-bg !default;
+
+$list-group-disabled-color:         $gray-600 !default;
+$list-group-disabled-bg:            $list-group-bg !default;
+
+$list-group-action-color:           $gray-700 !default;
+$list-group-action-hover-color:     $list-group-action-color !default;
+
+$list-group-action-active-color:    $body-color !default;
+$list-group-action-active-bg:       $gray-200 !default;
+
+
+// Image thumbnails
+
+$thumbnail-padding:                 .25rem !default;
+$thumbnail-bg:                      $body-bg !default;
+$thumbnail-border-width:            $border-width !default;
+$thumbnail-border-color:            $gray-300 !default;
+$thumbnail-border-radius:           $border-radius !default;
+$thumbnail-box-shadow:              0 1px 2px rgba($black, .075) !default;
+
+
+// Figures
+
+$figure-caption-font-size:          90% !default;
+$figure-caption-color:              $gray-600 !default;
+
+
+// Breadcrumbs
+
+$breadcrumb-padding-y:              .75rem !default;
+$breadcrumb-padding-x:              1rem !default;
+$breadcrumb-item-padding:           .5rem !default;
+
+$breadcrumb-margin-bottom:          1rem !default;
+
+$breadcrumb-bg:                     $gray-200 !default;
+$breadcrumb-divider-color:          $gray-600 !default;
+$breadcrumb-active-color:           $gray-600 !default;
+$breadcrumb-divider:                quote("/") !default;
+
+$breadcrumb-border-radius:          $border-radius !default;
+
+
+// Carousel
+
+$carousel-control-color:             $white !default;
+$carousel-control-width:             15% !default;
+$carousel-control-opacity:           .5 !default;
+$carousel-control-hover-opacity:     .9 !default;
+$carousel-control-transition:        opacity .15s ease !default;
+
+$carousel-indicator-width:           30px !default;
+$carousel-indicator-height:          3px !default;
+$carousel-indicator-hit-area-height: 10px !default;
+$carousel-indicator-spacer:          3px !default;
+$carousel-indicator-active-bg:       $white !default;
+$carousel-indicator-transition:      opacity .6s ease !default;
+
+$carousel-caption-width:             70% !default;
+$carousel-caption-color:             $white !default;
+
+$carousel-control-icon-width:        20px !default;
+
+$carousel-control-prev-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e"), "#", "%23") !default;
+$carousel-control-next-icon-bg:      str-replace(url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='#{$carousel-control-color}' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e"), "#", "%23") !default;
+
+$carousel-transition-duration:       .6s !default;
+$carousel-transition:                transform $carousel-transition-duration ease-in-out !default; // Define transform transition first if using multiple transitions (e.g., `transform 2s ease, opacity .5s ease-out`)
+
+
+// Spinners
+
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;
+
+
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;
+
+
+// Code
+
+$code-font-size:                    87.5% !default;
+$code-color:                        $pink !default;
+
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
+$kbd-color:                         $white !default;
+$kbd-bg:                            $gray-900 !default;
+
+$pre-color:                         $gray-900 !default;
+$pre-scrollable-max-height:         340px !default;
+
+
+// Utilities
+
+$displays: none, inline, inline-block, block, table, table-row, table-cell, flex, inline-flex !default;
+$overflows: auto, hidden !default;
+$positions: static, relative, absolute, fixed, sticky !default;
+
+
+// Printing
+
+$print-page-size:                   a3 !default;
+$print-body-min-width:              map-get($grid-breakpoints, "lg") !default;
diff --git a/website/public/css/bootstrap-4.4.1/mixins/_breakpoints.scss b/website/public/css/bootstrap-4.4.1/mixins/_breakpoints.scss
new file mode 100755
index 0000000..23a5de9
--- /dev/null
+++ b/website/public/css/bootstrap-4.4.1/mixins/_breakpoints.scss
@@ -0,0 +1,123 @@
+// Breakpoint viewport sizes and media queries.
+//
+// Breakpoints are defined as a map of (name: minimum width), order from small to large:
+//
+//    (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px)
+//
+// The map defined in the `$grid-breakpoints` global variable is used as the `$breakpoints` argument by default.
+
+// Name of the next breakpoint, or null for the last breakpoint.
+//
+//    >> breakpoint-next(sm)
+//    md
+//    >> breakpoint-next(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    md
+//    >> breakpoint-next(sm, $breakpoint-names: (xs sm md lg xl))
+//    md
+@function breakpoint-next($name, $breakpoints: $grid-breakpoints, $breakpoint-names: map-keys($breakpoints)) {
+  $n: index($breakpoint-names, $name);
+  @return if($n != null and $n < length($breakpoint-names), nth($breakpoint-names, $n + 1), null);
+}
+
+// Minimum breakpoint width. Null for the smallest (first) breakpoint.
+//
+//    >> breakpoint-min(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    576px
+@function breakpoint-min($name, $breakpoints: $grid-breakpoints) {
+  $min: map-get($breakpoints, $name);
+  @return if($min != 0, $min, null);
+}
+
+// Maximum breakpoint width. Null for the largest (last) breakpoint.
+// The maximum value is calculated as the minimum of the next one less 0.02px
+// to work around the limitations of `min-` and `max-` prefixes and viewports with fractional widths.
+// See https://www.w3.org/TR/mediaqueries-4/#mq-min-max
+// Uses 0.02px rather than 0.01px to work around a current rounding bug in Safari.
+// See https://bugs.webkit.org/show_bug.cgi?id=178261
+//
+//    >> breakpoint-max(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    767.98px
+@function breakpoint-max($name, $breakpoints: $grid-breakpoints) {
+  $next: breakpoint-next($name, $breakpoints);
+  @return if($next, breakpoint-min($next, $breakpoints) - .02, null);
+}
+
+// Returns a blank string if smallest breakpoint, otherwise returns the name with a dash in front.
+// Useful for making responsive utilities.
+//
+//    >> breakpoint-infix(xs, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    ""  (Returns a blank string)
+//    >> breakpoint-infix(sm, (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px))
+//    "-sm"
+@function breakpoint-infix($name, $breakpoints: $grid-breakpoints) {
+  @return if(breakpoint-min($name, $breakpoints) == null, "", "-#{$name}");
+}
+
+// Media of at least the minimum breakpoint width. No query for the smallest breakpoint.
+// Makes the @content apply to the given breakpoint and wider.
+@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  @if $min {
+    @media (min-width: $min) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media of at most the maximum breakpoint width. No query for the largest breakpoint.
+// Makes the @content apply to the given breakpoint and narrower.
+@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints) {
+  $max: breakpoint-max($name, $breakpoints);
+  @if $max {
+    @media (max-width: $max) {
+      @content;
+    }
+  } @else {
+    @content;
+  }
+}
+
+// Media that spans multiple breakpoint widths.
+// Makes the @content apply between the min and max breakpoints
+@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($lower, $breakpoints);
+  $max: breakpoint-max($upper, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($lower, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($upper, $breakpoints) {
+      @content;
+    }
+  }
+}
+
+// Media between the breakpoint's minimum and maximum widths.
+// No minimum for the smallest breakpoint, and no maximum for the largest one.
+// Makes the @content apply only to the given breakpoint, not viewports any wider or narrower.
+@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints) {
+  $min: breakpoint-min($name, $breakpoints);
+  $max: breakpoint-max($name, $breakpoints);
+
+  @if $min != null and $max != null {
+    @media (min-width: $min) and (max-width: $max) {
+      @content;
+    }
+  } @else if $max == null {
+    @include media-breakpoint-up($name, $breakpoints) {
+      @content;
+    }
+  } @else if $min == null {
+    @include media-breakpoint-down($name, $breakpoints) {
+      @content;
+    }
+  }
+}
diff --git a/website/public/css/style.css b/website/public/css/style.css
index 9063581..8573e8b 100644
--- a/website/public/css/style.css
+++ b/website/public/css/style.css
@@ -1,4 +1,13 @@
-@import url(https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap);body,html{font-family:"Be Vietnam",sans-serif;color:#fff;position:relative;height:96.2%;background:#242c6b}@media (max-width:767.98px){body.intro,html.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:.9;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:.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:-webkit-box;display:-ms-flexbox;display:flex;margin:auto;}header.map label{margin:0 0 0 15px;font-size:16px;font-weight:800;letter-spacing:.4px}header.map .custom-select,header.map input{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}}@media (max-width:1199.98px){header.map .nav-item:nth-of-type(1){margin-left: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:.53px}@media (min-width:992px){h1{line-height:55px}}h2{font-size:16px;font-weight:400;letter-spacing:.4px}@media (min-width:992px){h2{margin:0}}h3{font-size:38px;font-weight:800;letter-spacing:.95px}@media (max-width:575.98px){h3{font-size:28px}}a{color:#fff;outline:0}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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align: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-next,.swiper-pagination-buttons .btn-prev{display:inline-block;width:45px;height:45px;position:relative;border-radius:50%;border:2px solid #fff}.swiper-pagination-buttons .btn-next:after,.swiper-pagination-buttons .btn-prev: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:.8;background:#0b155a}@media (min-width:992px){.swiper-pagination-bullets{left:50%!important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);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:.4px;border-radius:30px;border:1px solid #0b155a;background:#0b155a}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{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:active,.btn-secondary:focus,.btn-secondary:hover{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:.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,.7)}@media (max-width:991.98px){.map-locations{top:90px;right:20px}}.map-locations .menu{display:inline-block;position:relative;padding:10px 60px 13px 16px;text-decoration:none;border-radius:50px;opacity:1;background:#0b155a}@media (max-width:575.98px){.map-locations .menu{min-width:280px;width:100%;padding-bottom:16px;font-size:14px}}.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}.locations li:hover{text-decoration: underline;}.player{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:-40px;z-index:1000}@media (max-width:575.98px){.player{bottom:-30px}}.player .next,.player .pause,.player .play,.player .prev{display:inline-block;width:42px;height:42px;margin-right:20px;position:relative;border-radius:50%;opacity:.7;border:2px solid #fff;-webkit-box-shadow:0 0 0 4px #0b155a;box-shadow:0 0 0 4px #0b155a;background:#0b155a;cursor:pointer}.player .next:hover,.player .pause:hover,.player .play:hover,.player .prev:hover{opacity:1}.player .next:after,.player .pause:after,.player .play:after,.player .prev:after{content:"";display:inline-block;width:7px;height:12px;position:absolute;top:calc(50% - 6px);left:calc(50% - 4px)}.player .pause,.player .play{width:57px;height:57px;opacity:1}.player .pause:hover,.player .play:hover{opacity:.7}.player .pause:after,.player .play: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}.player .next:after{background:url(../img/btn-next.svg) no-repeat}.player .prev:after{background:url(../img/btn-prev.svg) no-repeat}.player .timeline{display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;padding:0 10px;border-radius:100px;background-color:rgba(11,21,90,.7)}@media (max-width:991.98px){.player .timeline{padding:0}}@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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align: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; background-color: #0b155a !important; color:white; text-align: center;} .leaflet-popup-content strong {display: inline-block; margin-bottom: 5px;} .popup-controls {display: flex; margin: 1em 0 1em 0 } #number-info {font-family: monospace; font-size: 24pt; font-weight: bold;} #count-info {background-color: #0b155a; color: white; margin: auto}
+@import url(https://fonts.googleapis.com/css2?family=Be+Vietnam:wght@400;600;700;800&display=swap);body,html{font-family:"Be Vietnam",sans-serif;color:#fff;position:relative;height:96.2%;background:#242c6b}@media (max-width:767.98px){body.intro,html.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:.9;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:.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:-webkit-box;display:-ms-flexbox;display:flex;margin:auto;}header.map label{margin:0 0 0 15px;font-size:16px;font-weight:800;letter-spacing:.4px}header.map .custom-select,header.map input{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}}@media (max-width:1199.98px){header.map .nav-item:nth-of-type(1){margin-left: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:.53px}@media (min-width:992px){h1{line-height:55px}}h2{font-size:16px;font-weight:400;letter-spacing:.4px}@media (min-width:992px){h2{margin:0}}h3{font-size:38px;font-weight:800;letter-spacing:.95px}@media (max-width:575.98px){h3{font-size:28px}}a{color:#fff;outline:0}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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align: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-next,.swiper-pagination-buttons .btn-prev{display:inline-block;width:45px;height:45px;position:relative;border-radius:50%;border:2px solid #fff}.swiper-pagination-buttons .btn-next:after,.swiper-pagination-buttons .btn-prev: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:.8;background:#0b155a}@media (min-width:992px){.swiper-pagination-bullets{left:50%!important;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);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:.4px;border-radius:30px;border:1px solid #0b155a;background:#0b155a}.btn-primary:active,.btn-primary:focus,.btn-primary:hover{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:active,.btn-secondary:focus,.btn-secondary:hover{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:.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,.7)}@media (max-width:991.98px){.map-locations{top:90px;right:20px}}.map-locations .menu{display:inline-block;position:relative;padding:10px 60px 13px 16px;text-decoration:none;border-radius:50px;opacity:1;background:#0b155a}@media (max-width:575.98px){.map-locations .menu{min-width:280px;width:100%;padding-bottom:16px;font-size:14px}}.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}.locations li:hover{text-decoration: underline;}
+
+.player{width:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;position:absolute;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translateX(-50%);bottom:-40px;z-index:1000}
+@media (max-width:575.98px){.player{bottom:-30px}}
+.player .next,.player .pause,.player .play,.player .prev{display:inline-block;width:42px;height:42px;margin-right:20px;position:relative;border-radius:50%;opacity:.7;border:2px solid #fff;-webkit-box-shadow:0 0 0 4px #0b155a;box-shadow:0 0 0 4px #0b155a;background:#0b155a;cursor:pointer}
+.player .next:hover,.player .pause:hover,.player .play:hover,.player .prev:hover{opacity:1}
+.player .next:after,.player .pause:after,.player .play:after,.player .prev:after{content:"";display:inline-block;width:7px;height:12px;position:absolute;top:calc(50% - 6px);left:calc(50% - 4px)}.player .pause,.player .play{width:57px;height:57px;opacity:1}
+.player .pause:hover,.player .play:hover{opacity:.7}.player .pause:after,.player .play: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}.player .next:after{background:url(../img/btn-next.svg) no-repeat}.player .prev:after{background:url(../img/btn-prev.svg) no-repeat}
+.player .timeline{display:-webkit-box;display:-ms-flexbox;display:flex;height:30px;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;position:relative;padding:0 10px;border-radius:100px;background-color:rgba(11,21,90,.7)}@media (max-width:991.98px){.player .timeline{padding:0}}@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:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align: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; background-color: #0b155a !important; color:white; text-align: center;} .leaflet-popup-content strong {display: inline-block; margin-bottom: 5px;} .popup-controls {display: flex; margin: 1em 0 1em 0 } #number-info {font-family: monospace; font-size: 24pt; font-weight: bold;} #count-info {background-color: #0b155a; color: white; margin: auto}
 @keyframes scaleAnimation {
 	from {transform: scale3d(0,0,0);}
 	to {transform: scale3d(1,1,1);}
diff --git a/website/public/css/style.scss b/website/public/css/style.scss
deleted file mode 100755
index db0e10a..0000000
--- a/website/public/css/style.scss
+++ /dev/null
@@ -1,918 +0,0 @@
-@import '../extensions/bootstrap-4.4.1/functions';
-@import '../extensions/bootstrap-4.4.1/variables';
-@import '../extensions/bootstrap-4.4.1/mixins/breakpoints';
-
-$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: .9;
-      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;
-    }
-
-    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) {
-        margin-left: 100px;
-
-        @include media-breakpoint-down(lg) {
-          margin-left: 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
-.slide-text {
-  width: 600px;
-  padding-bottom: 160px;
-  position: relative;
-
-  @include media-breakpoint-down(lg) {
-    width: 100%;
-  }
-
-  @include media-breakpoint-down(lg) {
-    padding-bottom: 80px;
-  }
-
-  .slide-index {
-    display: inline-block;
-    padding-bottom: 20px;
-    font-size: 72px;
-    font-weight: 800;
-
-    @include media-breakpoint-down(xs) {
-      padding-bottom: 10px;
-      font-size: 48px;
-    }
-  }
-
-  .btn-primary {
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 10px;
-      height: 16px;
-      position: absolute;
-      top: 16px;
-      right: 20px;
-      background: url($images-dir + 'btn-play.svg') no-repeat top right;
-    }
-  }
-
-  p {
-    font-size: 18px;
-    font-weight: 600;
-
-    @include media-breakpoint-down(xs) {
-      font-size: 16px;
-    }
-
-    a {
-      text-decoration: underline;
-
-      &:hover {
-        text-decoration: none;
-      }
-    }
-  }
-}
-
-// STRÁNKOVÁNÍ (TLAČÍTKA) SLIDŮ
-.swiper-pagination-buttons {
-  width: 200px;
-  height: 56px;
-  padding: 6px;
-  position: absolute;
-  right: 150px;
-  bottom: 20px;
-  z-index: 1;
-  border-radius: 100px;
-  background: #0B155A;
-
-  @include media-breakpoint-down(lg) {
-    right: 20px;
-  }
-
-  @include media-breakpoint-down(sm) {
-    width: 120px;
-  }
-
-  .btn-prev, .btn-next {
-    display: inline-block;
-    width: 45px;
-    height: 45px;
-    position: relative;
-    border-radius: 50%;
-    border: 2px solid #fff;
-
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 7px;
-      height: 12px;
-      position: absolute;
-      top: calc(50% - 6px);
-      left: calc(50% - 4px);
-    }
-  }
-
-  .btn-prev:after {
-    background: url($images-dir + 'btn-prev.svg') no-repeat top right;
-  }
-
-  .btn-next {
-    float: right;
-
-    &:after {
-      background: url($images-dir + 'btn-next.svg') no-repeat top right;
-    }
-  }
-}
-
-// STRÁNKOVÁNÍ (POZICE) SLIDŮ
-.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;
-
-  @include media-breakpoint-up(lg) {
-    left: 50% !important;
-    transform: translateX(-50%);
-  }
-
-  @include media-breakpoint-down(xs) {
-    display: none;
-  }
-
-  &:before {
-    content: "";
-    width: 100px;
-    position: absolute;
-    top: 13px;
-    left: 15px;
-    z-index: 1;
-    border-top: 2px solid #fff;
-  }
-
-  .swiper-pagination-bullet {
-    width: 20px;
-    height: 20px;
-    position: relative;
-    margin: 4px 15px !important;
-    opacity: 1;
-    border: 2px solid #0B155A;
-    background: #0B155A;
-
-    &:before {
-      content: "";
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      position: absolute;
-      top: 5px;
-      left: 5px;
-      border-radius: 50%;
-      background: #fff;
-    }
-
-    &:first-of-type {
-      margin-left: 5px !important;
-    }
-
-    &:last-of-type {
-      margin-right: 5px !important;
-    }
-  }
-
-  .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;
-
-  &:hover, &:focus, &:active {
-    border: 1px solid #0048A9;
-    background: #0048A9 !important;
-  }
-
-  @include media-breakpoint-down(xs) {
-    width: 100%;
-    max-width: 270px;
-    height: auto;
-    margin-top: 20px;
-  }
-}
-
-.btn-secondary {
-  background: #0B155A;
-
-  &:hover, &:focus, &:active {
-    background: #7378A0 !important;
-  }
-}
-
-// UKÁZKOVÉ BODY NA MAPĚ
-.map-point {
-  width: 50px;
-  height: 50px;
-  z-index: 1;
-  position: absolute;
-  border-radius: 50%;
-  cursor: pointer;
-  border: 2px solid #fff;
-
-  @include media-breakpoint-down(sm) {
-    display: none;
-  }
-
-  &:before {
-    content: "";
-    display: inline-block;
-    width: 16px;
-    height: 16px;
-    position: absolute;
-    top: calc(50% - 8px);
-    left: calc(50% - 8px);
-    background: url($images-dir + 'map-point-plus.svg') no-repeat;
-  }
-
-  &:hover {
-    &:before {
-      z-index: 1;
-      top: calc(50% - 1px);
-      background: url($images-dir + 'map-point-minus.svg') no-repeat;
-    }
-
-    .desc {
-      display: block;
-      width: 210px;
-      padding: 10px 20px;
-      z-index: 0;
-      opacity: 0.75;
-      border-radius: 25px 0 25px 0;
-      background: #0B155A;
-    }
-  }
-
-  .desc {
-    display: none;
-  }
-
-  p {
-    font-size: 14px;
-    font-weight: 400;
-
-    &:last-of-type {
-      margin-bottom: 10px;
-    }
-  }
-
-  strong {
-    display: inline-block;
-    width: 100%;
-    padding: 0 0 20px 40px;
-    font-size: 16px;
-  }
-
-  .circle {
-    width: 50px;
-    height: 50px;
-    position: absolute;
-    top: -2px;
-    left: -2px;
-    border-radius: 50%;
-    border: 2px solid #fff;
-  }
-
-  &.point-1 {
-    bottom: 12%;
-    right: -75%;
-  }
-
-  &.point-2 {
-    top: 21%;
-    right: -92%;
-  }
-
-  &.point-3 {
-    top: 22%;
-    right: -92%;
-  }
-}
-
-#heatmap {
-  height: 100%;
-}
-
-
-// SEZNAM LOKACÍ NA MAPĚ
-.map-locations {
-  position: absolute;
-  top: 105px;
-  right: 50px;
-  z-index: 1000;
-  border-radius: 22px;
-  background-color: rgba(11, 21, 90, .7);
-
-  @include media-breakpoint-down(md) {
-    top: 90px;
-    right: 20px;
-  }
-
-  .menu {
-    display: inline-block;
-    position: relative;
-    padding: 10px 60px 13px 16px;
-    text-decoration: none;
-    border-radius: 50px;
-    opacity: 1;
-    background: #0B155A;
-
-    @include media-breakpoint-down(xs) {
-      min-width: 280px;
-      width: 100%;
-      padding-bottom: 16px;
-      font-size: 14px;
-    }
-
-    .circle {
-      display: inline-block;
-      width: 40px;
-      height: 40px;
-      position: absolute;
-      top: 3px;
-      right: 3px;
-      border-radius: 50%;
-      border: 2px solid #fff;
-
-      &:after {
-        content: "";
-        display: inline-block;
-        width: 16px;
-        height: 16px;
-        position: absolute;
-        top: calc(50% - 8px);
-        left: calc(50% - 8px);
-        background: url($images-dir + 'map-point-plus.svg') no-repeat;
-      }
-    }
-  }
-
-  .locations {
-    z-index: 1000;
-
-    ul {
-      margin-top: 10px;
-      padding-left: 36px;
-      padding-right: 20px;
-      font-size: 15px;
-      list-style-image: url($images-dir + 'li-bullet.svg');
-
-      @include media-breakpoint-down(xs) {
-        font-size: 13.5px;
-      }
-    }
-
-    li {
-      margin-bottom: 10px;
-      cursor: pointer;
-    }
-  }
-}
-
-
-// PŘEHRÁVAČ HEATMAPY
-.player {
-  width: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  position: absolute;
-  left: 50%;
-  transform: translateX(-50%);
-  bottom: -40px;
-  z-index: 1000;
-
-  @include media-breakpoint-down(xs) {
-    bottom: -30px;
-  }
-
-  .next, .prev, .play, .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;
-
-    &:hover {
-      opacity: 1;
-    }
-
-    &:after {
-      content: "";
-      display: inline-block;
-      width: 7px;
-      height: 12px;
-      position: absolute;
-      top: calc(50% - 6px);
-      left: calc(50% - 4px);
-    }
-  }
-
-  .play, .pause {
-    width: 57px;
-    height: 57px;
-    opacity: 1;
-
-    &:hover {
-      opacity: .7;
-    }
-
-    &:after {
-      width: 10px;
-      height: 16px;
-      top: calc(50% - 8px);
-    }
-  }
-
-  .play:after {
-    left: calc(50% - 2px);
-    background: url($images-dir + 'btn-play.svg') no-repeat;
-  }
-
-  .pause:after {
-    left: calc(50% - 4px);
-    background: url($images-dir + 'btn-pause.png') no-repeat;
-  }
-
-  .next:after {
-    background: url($images-dir + 'btn-next.svg') no-repeat;
-  }
-
-  .prev:after {
-    background: url($images-dir + 'btn-prev.svg') no-repeat;
-  }
-
-  .timeline {
-    display: flex;
-    height: 30px;
-    flex-direction: row;
-    position: relative;
-    padding: 0 10px;
-    border-radius: 100px;
-    background-color: rgba(11, 21, 90, .7);
-
-    @include media-breakpoint-down(md) {
-      padding: 0;
-    }
-
-    .hour {
-      @include media-breakpoint-down(md) {
-        display: none;
-      }
-
-      &:before {
-        content: "";
-        display: inline-block;
-        width: 6px;
-        height: 6px;
-        border-radius: 50%;
-        background: #fff;
-      }
-
-      &:after {
-        content: "";
-        display: inline-block;
-        position: relative;
-        top: -2px;
-        width: 20px;
-        height: 2px;
-        background: #fff;
-      }
-    }
-
-    .end-dot:before {
-      content: "";
-      display: inline-block;
-      width: 6px;
-      height: 6px;
-      border-radius: 50%;
-      background: #fff;
-
-      @include media-breakpoint-down(md) {
-        display: none;
-      }
-    }
-  }
-
-  .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;
-
-    @include media-breakpoint-up(lg) {
-      position: absolute;
-
-      &.hour-0 {left: 0;}
-      &.hour-1 {left: 25px;}
-      &.hour-2 {left: 50px;}
-      &.hour-3 {left: 75px;}
-      &.hour-4 {left: 100px;}
-      &.hour-5 {left: 125px;}
-      &.hour-6 {left: 150px;}
-      &.hour-7 {left: 175px;}
-      &.hour-8 {left: 200px;}
-      &.hour-9 {left: 225px;}
-      &.hour-10 {left: 250px;}
-      &.hour-11 {left: 275px;}
-      &.hour-12 {left: 300px;}
-      &.hour-13 {left: 325px;}
-      &.hour-14 {left: 350px;}
-      &.hour-15 {left: 375px;}
-      &.hour-16 {left: 400px;}
-      &.hour-17 {left: 425px;}
-      &.hour-18 {left: 450px;}
-      &.hour-19 {left: 475px;}
-      &.hour-20 {left: 500px;}
-      &.hour-21 {left: 525px;}
-      &.hour-22 {left: 550px;}
-      &.hour-23 {left: 585px;}
-    }
-  }
-}
-
-
-.slide-background {
-  width: 650px;
-  height: 290px;
-  z-index: 1;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  background: url($images-dir + 'footer-bg.svg') no-repeat;
-
-  @include media-breakpoint-down(xs) {
-    width: 320px;
-    height: 143px;
-    background-size: 100%;
-  }
-}
-
-
-// COPYRIGHT
-div.copyright {
-  p {
-    font-weight: 400;
-  }
-
-  span {
-    font-size: 17px;
-  }
-}
-
-
-// LOGA V SEKCI "O PROJEKTU"
-p.logos-partners {
-  margin-top: 40px;
-  text-align: right;
-
-  a {
-    text-decoration: none;
-
-    img {
-      margin-left: 50px;
-      height: 80px;
-
-      @media only screen and (max-width: 430px) {
-        height: 70px;
-        margin-left: 0;
-      }
-
-      @media only screen and (max-width: 340px) {
-        height: 60px;
-      }
-    }
-
-    &:first-of-type img {
-      margin-left: 0;
-    }
-  }
-}
\ No newline at end of file
diff --git a/website/public/js/zcu-heatmap.js b/website/public/js/zcu-heatmap.js
index 24ac7df..f931bc5 100644
--- a/website/public/js/zcu-heatmap.js
+++ b/website/public/js/zcu-heatmap.js
@@ -366,3 +366,15 @@ function initDatepicker (availableDatesSource) {
     })
   })
 }
+
+function initLocationsMenu() {
+  var locationsWrapper = '.locations';
+  var locationsDisplayClass = 'show';
+
+  if ($(window).width() <= 480) {  
+    $(locationsWrapper).removeClass(locationsDisplayClass);
+  }
+  else {
+    $(locationsWrapper).addClass(locationsDisplayClass);
+  }
+}
\ No newline at end of file
diff --git a/website/symfony.code-workspace b/website/symfony.code-workspace
index 251f92f..8f39029 100644
--- a/website/symfony.code-workspace
+++ b/website/symfony.code-workspace
@@ -23,7 +23,8 @@
 			"felixfbecker.php-intellisense",
 			"whatwedo.twig",
 			"felixfbecker.php-debug",
-			"junstyle.php-cs-fixer"
+			"junstyle.php-cs-fixer",
+			"refgd.easy-compile"
 		]
 	},
 	"tasks": {
diff --git a/website/templates/heatmap.html.twig b/website/templates/heatmap.html.twig
index 252d628..773a587 100644
--- a/website/templates/heatmap.html.twig
+++ b/website/templates/heatmap.html.twig
@@ -4,7 +4,7 @@
 {% block stylesheets %}
   <link rel="stylesheet" href="{{ asset('css/leaflet.css') }}">
   <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}">
-  <link rel="stylesheet" href="{{ asset('css/style.css') }}">
+  <link rel="stylesheet" href="{{ asset('css/_style.css') }}">
   <link rel="stylesheet" href="{{ asset('css/bootstrap-datepicker3.css') }}">
 {% endblock %}
 
@@ -90,17 +90,18 @@
 
   <div class="map-locations">
     <a class="menu" data-toggle="collapse" href="#mapLocations" role="button" aria-expanded="false" aria-controls="mapLocations">
-      Prohlédněte si jednotlivé oblasti
+      <span class="desktop">Prohlédněte si jednotlivé oblasti</span>
+      <span class="mobile">Jednotlivé oblasti</span>
       <div class="circle"></div>
     </a>
-    <div class="locations collapse show" id="mapLocations">
+    <div class="locations collapse" id="mapLocations">
       <ul>
         <li onclick="setMapView(49.7248, 13.3521, 17)">Kampus ZČU</li>
         <li onclick="setMapView(49.7367263, 13.3709177, 18)">FPE &ndash; Pedagogická fakulta</li>
         <li onclick="setMapView(49.7474950, 13.3748308, 18)">FPR &ndash; Právnická fakulta</li>
         <li onclick="setMapView(49.7450169, 13.3702668, 18)">FZS &ndash; Fakulta zdravotnických studií</li>
+        <li onclick="setMapView(50.0762590, 12.3640213, 17)">FEK &ndash; pracoviště Cheb</li>
         <li onclick="setMapView(49.7236785, 13.3353118, 18)">NTC &ndash; výzkumné centrum</li>
-        <li onclick="setMapView(50.0762590, 12.3640213, 17)">FEK &ndash; pobočka Cheb</li>
         <li onclick="setMapView(49.9590236, 13.1597114, 18)">Zámek ZČU &ndash; Nečtiny</li>
         <li onclick="setMapView(49.7345564, 13.3585038, 18)">Koleje Borská</li>
         <li onclick="setMapView(49.7250373, 13.3696772, 18)">Koleje Bory</li>
@@ -161,11 +162,16 @@
     <script src="{{ asset('js/zcu-heatmap.js') }}"></script>
     <script>
         initDatepicker("{{ path('dates') }}");
+        initLocationsMenu();
         initMap();
         checkDataSetsAvailability("{{ path('available') }}")
         {% if submitted %}
         loadCurrentTimeHeatmap("{{ path('opendata') }}", "{{ path('positions') }}");
         {% endif %}
+
+        $(window).resize(function() {
+          initLocationsMenu();
+        });
   </script>
 
 {% endblock %}
\ No newline at end of file
diff --git a/website/templates/index.html.twig b/website/templates/index.html.twig
index 5f5bc55..d3057a8 100644
--- a/website/templates/index.html.twig
+++ b/website/templates/index.html.twig
@@ -3,7 +3,7 @@
 {% block title %} Heatmap.ZČU {% endblock %}
 {% block stylesheets %}
   <link rel="stylesheet" href="{{ asset('css/bootstrap.min.css') }}" />
-  <link rel="stylesheet" href="{{ asset('css/style.css') }}" />
+  <link rel="stylesheet" href="{{ asset('css/_style.css') }}" />
   <link rel="stylesheet" href="{{ asset('css/swiper.min.css') }}" />
 {% endblock %}
 
