/* Colors */
/* Shadows */
/* Breakpoints */
/* Layout Dimensions */
main {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

div.container {
  display: inline-block;
  width: 50%;
  /* position: absolute; */
}

div.login-form-container {
  display: block;
  position: relative;
  text-align: center;
  top: 50%;
  -webkit-transform: translate(0, -50%);
          transform: translate(0, -50%);
}

div.title {
  margin-bottom: 2em;
}

div.title > * {
  margin: 0.3em 0;
}

div#hero {
  min-height: 600px;
  background-size: cover;
}

.login-form-container p {
  max-width: 80%;
  margin: auto;
}

form#set-password {
  margin-top: 1.5em;
}

@media all and (max-width: 700px) {
  main {
    display: block;
  }
  div.container {
    width: 100%;
  }
  div.login-form-container {
    top: unset;
    -webkit-transform: unset;
            transform: unset;
    margin-top: 64px;
    margin-bottom: 64px;
  }
  div#hero {
    min-height: unset;
    height: 120px;
  }
}