html,
body {
  height: 100%;
  width: 100%;
}

body {
  position: relative;
}

#login-container {
  display: flex;
}

#login-banner-header img {
  width: 65%;
}

#login-banner-footer {
  font-size: 0.75rem;
}

#login-banner-footer p {
  font-weight: 100;
}

#login-box {
  padding: 6rem 2rem 0.5rem 2rem;
}

#login-box-header img {
  width: 50%;
}

#login-box-body .form-message h5 {
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 1.25rem;
}

#login-box-body .form-message p {
  font-size: 1.1rem;
}

#login-box-body form {
  padding: 4rem 0 0 0;
}

#login-box-body form input::placeholder {
  color: rgba(0, 0, 0, 0.35);
}

#login-box-body form .form-check .form-check-input {
  border-color: #000;
  height: 0.95em;
  width: 0.95em;
}

#login-box-body form .form-check .form-check-label {
  margin-top: 0.15em;
  margin-left: 0.25em;
}

#login-box-forgot-password-link {
  margin-top: 0.15em;
}

#login-box-sign-up-link {
  font-size: 0.875rem;
  margin-top: 2rem;
}

@media (min-width: 1024px) {
  body {
    background: #416bd0;
  }

  #login-container {
    flex-direction: row;
    height: 100%;
  }

  #login-banner {
    align-items: center;
    display: flex;
    justify-content: center;
    height: 100%;
    width: 50%;
  }

  #login-banner-header img {
    display: block;
  }

  #login-box {
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
    width: 50%;
  }

  #login-box-header img {
    display: none;
  }

  #login-box-body {
    width: 70%;
  }
}

@media (max-width: 1023px) {
  #login-container {
    flex-direction: column;
  }

  #login-banner {
    display: none;
  }

  #login-banner-header img {
    display: none;
  }

  #login-box {
    padding: 2.5rem 1rem;
    width: 100%;
  }

  #login-box-header img {
    display: block;
  }

  #login-box-body .form-message {
    margin-top: 3rem;
  }
}