.login_screen{
  width: 100%;
  display:flex;
  justify-content: center;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
.login_logo{
  position: fixed;
  align-self: flex-start;
  text-indent: -9999px;
  background: url(../img/gallup-small-logo.svg) no-repeat center center ;
  background-size: 25px 25px;
  width: 60px;
  height: 60px;
  background-color: #222222;
}
@supports not (grid-area: auto){
  .login_logo{
    display: none;
  }
}
@media screen and (-ms-high-contrast: active), screen and (-ms-high-contrast: none) {
  .login_logo{
    display: none;
  }
}
@media only screen and (max-width: 991px) {
  .login_logo{
    display: none;
  }
}
.login_form {
  background-color: #FFFFFF;
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 660px;
}
.login_form .login_go_back{
  display: flex;
  background-color: #D0AD6C;
  height: 60px;
}
.login_go_back h1{
  align-self: center;
  color: #FFFFFF;
  font-size: 19px;
  font-weight: bold;
}
.login_form .login_header{
  width: 100%;
  color: #222222;
  font-size: 34px;
  font-weight: bold;
  align-self: center;
  justify-self: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.login_form .login_header #user_messages {
  list-style: none;
  font-size: 1rem;
  padding:0;
}
.login_form .login_header .login_header_heading{
  margin-bottom: 0;
  font-size: 3rem;
}
.login_form form {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.login_inputs {
  display: flex;
  flex-direction: column;
  width: 80%;
}
.login_inputs input {
  border: 1px solid #BFC6C6;
  border-radius: 5px;
  height: 60px;
  padding: 0 20px;
  box-sizing: border-box;
  width: 100%;
  margin: 10px 0;
  color: #98A3A3;
  font-size: 16px;
  line-height: 24px;
}
.login_buttons {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 80%;
  margin: 10px 0;
}
.login_buttons.single-button{
  justify-content: flex-end;
}

.login_buttons  .login_forgotten {
  display: flex;
  text-decoration: underline;
  color: #4F86A0;
  font-size: 16px;
  font-weight: bold;
  align-self: center;
}

.login_buttons .login_button {
  border-radius: 4px;
  background-color: #6CD070;
  border: #6CD070;
  color: #FFFFFF;
  font-size: 16px;
  font-weight: bold;
}
.login_seperator{
  visibility: hidden;
}

.login_background_image {
  display: none;
}
.go_back {
  display: flex;
  cursor: pointer;
}
@media only screen and (min-width: 992px) {
  @supports (grid-area: auto){
    .login_form .login_go_back{
      display: none;
    }
    .login_screen{
      display: grid;
      grid-template-columns: 1fr 5fr 1fr;
      position: absolute;
      top: 50%;
      left: 50%;
      /* bring your own prefixes */
      transform: translate(-50%, -50%);
    }
    .login_form{
      display: grid;
      grid-column: 1 / 4;
      grid-template-columns: 3fr 2fr;
      grid-template-rows: 0.5fr 3fr 0.5fr 1fr 1fr;
      grid-template-areas:
      "loginHeader backgroundImage"
      "signIn backgroundImage"
      "signIn backgroundImage"
      "signIn backgroundImage"
      " . backgroundImage";
      max-width: 100%;
    }
    .login_form .login_header{
      grid-area: loginHeader;
    }
    .login_form form {
     grid-area: signIn;
    }
    .hidden_when_desktop {
      display: none;
    }
    .login_background_image {
      background-color: #D0AD6C;
      display: flex;
      grid-area: backgroundImage;
      background: url(../img/background.jpg) ;
      background-size: cover;
      position: relative;
    }
    .login_image_overlay{
      position: absolute;
      top: 0;
      left: 0;
      background: rgba(208, 173, 108, 0.75);
      width: 100%;
      height: 100%;
    }
    .login_text_overlay{
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;
    }
    .login_background_image h1 {
      color: #FFFFFF;
      font-size: 34px;
      font-weight: bold;
      text-shadow: 1px 2px 3px 0 rgba(0,0,0,0.14);
    }
    .login_background_image h2 {
      color: #FFFFFF;
      font-size: 20px;
      text-shadow: 1px 2px 3px 0 rgba(0,0,0,0.14);
    }
  }
}