@font-face {
  font-family: "RevxNeue-V3";
  src: url("RevxNeue-V3.ttf");
}

body {
  background: #f9f9f9;
}

#main-register {
  font-family: "RevxNeue-V3";
}

.box-register {
  padding: 30px;
  background: #FFF;
  width: 100%;
  box-shadow: 0 0.5em 1em -0.125em rgb(28 28 28 / 10%), 0 0 0 1px rgb(28 28 28 / 2%);
  display: flex;
  flex-direction: column;
}

.form-control {
  padding: 0.75rem 0.75rem;
}

.form-select {
  padding: 0.75rem 0.75rem;
}

.button-register {
  display: flex;
  padding-top: 40px;
}

.register-btn {
  text-transform: uppercase;
  padding: 15px 50px 15px 50px;
  color: #FFF;
  background-color: #005148;
  border: 1px solid #005148;
}

#inputTesserato.form-select {
  padding: 0.75rem;
}

#footer {
  border-top: 1px solid #f9f9f9;
}

#footer .footer-bottom {
  display: flex;
  justify-content: center!important;
}

/* Schermi piccoli (meno di 576px)
 Non è necessaria alcuna media query, in quanto la progettazione mobile-first fa sì che questo sia il codice di default */

/* Schermi medio-piccoli (almeno 576px) */
@media (min-width: 576px) {
  #hero .hero-img img {
    width: 60%;
  }
}

/* Schermi medi (almeno 768px) */
@media (min-width: 768px) {
  #hero .hero-img img {
    width: 70%;
  }
}

/* Schermi grandi (almeno 992px) */
@media (min-width: 992px) {
  #hero .hero-img img {
    width: 80%;
  }
}

/* Schermi molto grandi (almeno 1200px) */
@media (min-width: 1200px) {
  #hero .hero-img img {
    width: 100%;
  }
}