/* Change Width and Height of Logo Image + Add Custom Image File */
.login .wp-login-logo a {
  background-image: url(../img/logo.png);
  width: 100%;
  height: 78px;
  background-size: contain;
}

.login {
  background-color: #124571;
}
.login #nav {
  margin-bottom: 10px !important;
}
.login #backtoblog a, 
.login #nav a {
  color:white;
  transition: 0.3s ease;
  font-style: italic;
  text-decoration:underline;
}


.login #backtoblog a:hover, 
.login #nav a:hover {
  color: #FAA918;
}

body.login {
  display:flex;
  align-items:center;
  background-image:url(../img/login-bg.svg);
  background-position: 10% 50%;
  background-size: 450px;
  background-repeat: no-repeat;
}

body.login #login {
  width: 50%;
  margin-left:auto;
  margin-right:0px;
  padding: 0px 0%;
}

.login h1,
.login form,
.login p,
.login .message, .login .notice, .login .success {
  max-width:450px;
  margin: 0px auto;
}

.login form {
  padding: 0px;
  background: none;
  border: none;
  margin-bottom:10px;
}

.login p {
  margin: 0px auto !important;
  text-align:center;
}

.login form p {
  text-align:left;
  color:white;

}

.login form p label,
.login label{
  color:white;
  margin-bottom:10px;
}

.login form .forgetmenot {
  float: none;
}

.login #wp-submit {
  width:100%;
  color: #124571;
  transition: 0.3s ease;
  background-color: #FAA918;
}

.login #wp-submit:hover{
background-color: #04A4CC;
color:white;
}

.login .message, .login .notice, .login .success {
  padding: 10px 0px !important;
  margin-bottom: 20px !important;
}

@media only screen and (max-width:768px) {
  body.login #login {
    width: 100%;
  }

  body.login {
    background-position: center;
  }
}