html, body {
  font-family: 'Lato', sans-serif;
  background-image: url('/images/background.png');
  height: 100%;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  background-color: #3e3e3e;
}

h1, h2, h3, h4, h5, p, label {
  color: #fff;
}

.form-control {
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  background-color: #ffffff00;
  background-clip: padding-box;
  border: 1px solid #707070;
  border-radius: 0.25rem;
}

.form-control:focus {
  font-size: 1rem;
  line-height: 1.5;
  color: #fff;
  background-color: #ffffff00;
  background-clip: padding-box;
  border: .5px solid;
  border-radius: 0.25rem;
  box-shadow: 0 0 0 0.1rem rgb(219, 219, 219);
  border-color: rgb(219, 219, 219);
}

.help-block {
  margin-top: 10px;
  color: #fff;
}

.btn-outline-secondary:focus {
  box-shadow: 0 0 0 0.2rem rgba(248, 156, 4);
  background-color: #f89c04;
}


a {
  color: #f3f0f0;
}

a:hover {
  text-decoration: none;
  color: #f89c04;
}

.footer {
  position: fixed;
  bottom: 0;
  width: 100%;
  /* Set the fixed height of the footer here */
  height: 30px;
  line-height: 30px; /* Vertically center the text there */
  background-color: #00000075;
  font-size: .8em;
}

.logo {
  height: 150px;
}

.alert-success {
  color: #fff;
  background-color: #08205c;
  border-color: fff;
}

.close {
  color: #fff;
}

/* phones */
@media only screen and (max-width: 600px) {
  .logo {
    height: 120px;
}
}


/* desktop */
@media screen and (min-height: 1000px) {
  .area {
    padding-top: 20%;
  }

}