body.login {
  background-color: #ffed00;
}

#login {
  max-width: 100%;
  width: 400px;
  padding: 0;
}

#login h1 {
  max-width: 100%;
  padding: 32px 24px 0;
}

#login h1 a {
  background: url(../images/logo.svg) no-repeat 50% 50%;
  background-size: cover;
  display: block;
  height: 0;
  margin: 0 auto;
  padding: 0 0 14.2%;
  width: 100%;
}

#login h1 a:active,
#login h1 a:hover {
  background-position: 50% 50%;
}

#login form {
  background-color: transparent;
  border: 0;
  box-shadow: none;
  margin-top: 10px;
}

#login input[type=email],
#login input[type=password],
#login input[type=text],
#login input[type=email]:focus,
#login input[type=password]:focus,
#login input[type=text]:focus {
  color: #333;
  border: 0;
  box-shadow: none;
}

#login label {
  color: #000;
}

#login .button-primary {
  background-color: #f00;
}

#login .button-primary,
#login .button-primary.active,
#login .button-primary.focus,
#login .button-primary.hover,
#login .button-primary:active,
#login .button-primary:focus,
#login .button-primary:hover {
  background-image: none;
  border-bottom-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: #fff;
  text-decoration: none;
  text-shadow: 0 1px 0 rgba(51, 51, 51, .1);
  transition: 0.25s;
}

#login .button-primary.active,
#login .button-primary.focus,
#login .button-primary.hover,
#login .button-primary:active,
#login .button-primary:focus,
#login .button-primary:hover {
  background-color: #fff;
  color: #f00;
}

#login #backtoblog,
#login #nav {
  text-shadow: none;
}

#login #backtoblog a,
#login #backtoblog a:focus,
#login #backtoblog a:hover,
#login #nav a,
#login #nav a:focus,
#login #nav a:hover {
  color: #000 !important;
}

.login .message,
.login #login_error {
  background-color: #fff;
  border-left-color: #f00;
  box-shadow: none;
  margin: 16px 24px;
  padding: 12px;
}

.interim-login #login_error,
.interim-login.login .message {
  margin: 16px 24px;
}

@media only screen and (min-width:768px) {
  #login {
    width: 400px;
  }
}