@font-face {
  font-family: OpenSans-Regular;
  src: url("OpenSans-Regular.ttf");
}
@font-face {
  font-family: OpenSans-Medium;
  src: url("OpenSans-Medium.ttf");
}
@font-face {
  font-family: OpenSans-Bold;
  src: url("OpenSans-Bold.ttf");
}

body {
  padding: 0;
  margin: 0;
}
.container {
  padding-left: 7%;
  padding-right: 7%;
}
.left {
  float: left;
}
.right {
  float: right;
}
.nav {
  position: fixed;
  width: 100%;
  height: auto;
  padding-top: 1.5vh;
  padding-bottom: 1.5vh;
  background-color: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(10px);
  border-bottom: rgb(200, 200, 200) solid 1px;
}
#logo {
  width: 48px;
  height: 48px;
  background-image: url(../imgs/logomentari.png);
  background-size: 100%;
  background-repeat: no-repeat;
  background-position: center;
}
.nav #navbar {
  width: 70%;
  height: auto;
  font-family: OpenSans-Medium;
}
.nav #navbar ul {
  list-style: none;
}
.nav #navbar ul li {
  margin-right: 1vw;
  display: inline-block;
}
.nav #mobilenavbar {
  display: none;
}
.dropdown {
  font-family: OpenSans-Bold;
}
.dropdown ul {
  list-style: none;
  display: none;
}
.dropdown ul li {
  display: block;
}
.dropdown:hover .dropdown ul {
  display: block;
}
.bannercustom {
  width: 100%;
  height: auto;
  background-image: url("../imgs/fotobanner.JPG");
  background-size: cover;
  background-position: center;
}
.boxbannercustom {
  width: 100%;
  height: auto;
  margin: auto;
  padding-top: 13vh;
  padding-bottom: 13vh;
  text-align: center;
  background-color: rgba(255, 255, 255, 0.4);
}
.boxbannercustom h2 {
  font-family: OpenSans-Bold;
  font-size: 3em;
}
.banner {
  width: 100%;
  height: auto;
  padding-top: 5vh;
  padding-bottom: 5vh;
}
.boxBanner {
  text-align: center;
}
.headBanner {
  width: 100%;
  height: auto;
  text-align: center;
  font-family: OpenSans-Bold;
  font-size: xx-large;
}
.boxItemBannner {
  width: 30%;
  height: auto;
  display: inline-block;
  text-align: center;
  margin: 10px;
}
.boxItemBannner img {
  width: 85%;
  height: auto;
}
.boxItemBannner p {
  font-family: OpenSans-Bold;
  font-size: x-large;
}
.sideboxBanner {
  width: 45%;
  height: auto;
  margin: 10px;
  text-align: justify;
  font-family: OpenSans-Regular;
}
.sideboxBanner img {
  width: 85%;
}
.modal {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  backdrop-filter: blur(20px);
}
.boxmodal {
  width: 40%;
  height: auto;
  background-color: white;
  border-radius: 5px;
  overflow: hidden;
  margin: auto;
  margin-top: 7vh;
}
.boxmodal ul {
  list-style: none;
}
.boxmodal ul li {
  padding-top: 1vh;
  padding-bottom: 1vh;
  font-family: OpenSans-Medium;
}
.textfill {
  width: 94%;
  height: auto;
  padding-left: 2%;
  padding-right: 2%;
  padding-top: 1.5vh;
  padding-bottom: 1.5vh;
  border: none;
  border: rgb(200, 200, 200) solid 1px;
  border-radius: 5px;
  font-family: OpenSans-Medium;
  outline-width: 0;
}
.textfill:focus {
  box-shadow: #0e7f87 0 0 0 2px;
}
.btn-default {
  border: none;
  background-color: #0e7f87;
  padding: 10px;
  border-radius: 5px;
  color: white;
}
@media screen and (max-width: 630px) {
  .boxbannercustom h2 {
    font-size: 2em;
  }
  .boxItemBannner {
    width: 100%;
  }
  .sideboxBanner {
    width: 100%;
  }
  .sideboxBanner img {
    width: 100%;
  }
  .nav #navbar {
    display: none;
  }
  .nav #mobilenavbar {
    display: block;
    font-size: 3em;
  }
  .boxmodal {
    width: 90%;
  }
}