@font-face {
  font-family: "Montserrat";
  font-weight: normal;
  font-style: normal;
  src: url("../font/Montserrat-Regular.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: bold;
  src: url("../font/Montserrat-Bold.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-weight: normal;
  font-style: italic;
  src: url("../font/Montserrat-Italic.ttf");
}

@font-face {
  font-family: "Montserrat";
  font-weight: bold;
  font-style: italic;
  src: url("../font/Montserrat-BoldItalic.ttf");
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
  background: #2d6edf;
}

::-webkit-scrollbar-thumb:hover {
  background: #043486;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  font-family: "Montserrat";
}

.tingle-modal {
  user-select: text !important;
}

/* Title page*/

.title-container {
  width: 100vw;
  height: 100vh;
}

.title-col1 {
  height: 100%;
  background-image: url("../img/back.jpg");
  background-size: auto 100%;
  background-repeat: no-repeat;
  border-right: 5px solid white;
}

.title-col2 {
  height: 100%;
  background-color: #2d6edf;
}

#logo {
  position: absolute;
  top: 3vh;
  right: 3vw;
}

#logo img {
  width: 22vh;
  height: 7vh;
}

#title {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  right: 3vw;
  text-align: right;
  width: 70%;
  color: white;
  font-weight: bold;
}
#title #caption {
  font-size: 4vh;
  text-transform: uppercase;
}

#title #more {
  font-weight: bold;
  font-size: 2vh;
}

#city {
  position: absolute;
  bottom: 2.5vh;
  left: 3vw;
  color: white;
}

.delimeter-solid {
  border-top: 0.8vh solid white;
}

.title-menu {
  position: absolute;
  width: 50%;
  bottom: 10vh;
  left: 10vw;
  padding: 1rem;
  font-weight: bold;
  text-align: center;
  padding: 0 15px;
  border: solid 1px white;
}
.title-menu a {
  color: inherit;
  text-decoration: none;
  font-size: 3vh;
}
.title-menu-item-1 {
  color: white;
  padding: 0.5rem;
  background-color: #2d6edf;
}
.title-menu-item-2 {
  color: #2d6edf;
  padding: 0.5rem;
  background-color: white;
}
.title-menu-item-3 {
  color: white;
  padding: 0.5rem;
  background-color: #ff6666;
}

/* Content page*/
.content {
  position: absolute;
  left: 0;
  top: 0;
}
.content-item {
  border: solid 1px white;
  background-color: rgba(255, 255, 255, 0.8);
  padding: 1vh;
  margin: 1vh;
}
.content-item a {
  text-decoration: none;
  color: black;
  font-size: 2vh;
  margin: 0 1rem;
}

.content-menu {
  position: absolute;
  width: 40%;
  bottom: 2vh;
  right: 1vw;
  height: 5;
  padding: 1rem;
  font-weight: bold;
  font-size: 2vh;
  text-align: center;
  border: solid 1px white;
  padding: 0 15px;
}

.content-menu a {
  color: inherit;
  text-decoration: none;
}
.content-menu-item-1 {
  color: white;
  padding: 0.5rem;
  background-color: #2d6edf;
}
.content-menu-item-2 {
  color: #2d6edf;
  padding: 0.5rem;
  background-color: white;
}
.content-menu-item-3 {
  color: white;
  padding: 0.5rem;
  background-color: #ff6666;
}

#panel {
  position: absolute;
  width: 98vw;
  top: 1vh;
  left: 1vw;
  bottom: 9vh;
  padding: 1rem;
  background-color: white;
  border: solid 3px #2d6edf;

  font-size: 1.5vh;
}

input[type="text"],
input[type="number"],
input[type="password"],
.btn,
textarea {
  outline: none;
  box-shadow: none !important;
  border: 1px solid #ccc !important;
}

.card * {
  padding: 0.5rem;
  font-size: 1rem;
}

.card p {
  margin: 0;
}

.card hr {
  margin: 0;
  padding: 0;
}

.card-body {
  background-color: #fff9c4;
  padding: 0;
}
.card-header {
  color: white;
  background-color: #2d6edf;
}

#lense {
  position: absolute;
  top: 50%;
  left: 50%;
  scale: 50%;
  transform: translate(-50%, -50%);
  opacity: 0.5;
}

#lense img {
  animation: upDown 3s alternate infinite ease-in-out;
}

@keyframes upDown {
  to {
    transform: translatey(20px);
  }
}

.lang-marker {
  display: inline;
  padding: 0 1rem;
  margin-right: 1rem;
  font-weight: bold;
}