/*LOGIN*/
html {
  background-color: #222;
}
body.login {
	background-image: url('../../images/demo/example.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center bottom;
  background-color: #222;
}
body.login::before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.6);
    z-index: 0;
}
body.login::after {
  content: '';
  display: block;
  clear: both;
}
body.login > #login{
	  width: 320px;
    position: relative;
    z-index: 5;
}
body.login > #login h1 {
	margin-top: 40px;
}

.login #login_error, .login .message {
	background: rgba(149, 165, 166,.7);
    color: #fff;
    border: 0;
    text-align: center;
}

/*form style*/
#login h1 a {
    background-image: url(../../images/rings.png);
    background-repeat: no-repeat;
    background-size: 100%;
    width: 130px;
    height: 95px;
    outline: 0!important;
}
#login h1 a:focus, #login h1 a:active, #login h1 a:hover{
	box-shadow: none;
}

#login > form {
	background: #fff;
	box-shadow: none;
	padding: 30px;
	border-bottom: 2px solid #ccc;
}
#login > form label{
	color: #999;
}

#login input[type="text"], #login input[type="password"], #login input[type="email"] {
	border: 1px solid #ddd;
	box-shadow: none;
	outline: none;
	background: #fbfbfb;
	margin: 0 0 15px;
	display: block;
	color: #333;
}

.login form .forgetmenot {
	float: none;
}
#login form p.submit {
	display: block;
	float: none;
	clear: both;
	margin: 20px 0 0;
	padding: 0;
}

#login form p.submit input#wp-submit {
	display: block;
  width: 100%;
  height: 50px;
  text-transform: uppercase;
  font-size: 14px;
  background-color: #74a8e7;
  border: 0;
  box-shadow: none;
  text-shadow:none;
  transition: opacity .5s;
  border-radius: 0;
}
#login form p.submit input#wp-submit:hover {
  opacity: 0.85;
}

::-webkit-input-placeholder {
   color: #ccc;
   font-size: 16px;
   text-transform: uppercase;
   line-height: 30px;
}

:-moz-placeholder { /* Firefox 18- */
   color: #ccc; 
   font-size: 16px; 
   text-transform: uppercase;
   line-height: 30px;
}

::-moz-placeholder {  /* Firefox 19+ */
   color: #ccc;
   font-size: 16px;
   text-transform: uppercase;
   line-height: 30px;
}

:-ms-input-placeholder {  
   color: #ccc;
   font-size: 16px;
   text-transform: uppercase;
   line-height: 30px;
}

/*link*/
p#nav, p#backtoblog {text-align: center;}
.login #backtoblog a, .login #nav a, .login h1 a {
	color: #fff;
}
.login #backtoblog a:hover, .login #nav a:hover, .login h1 a:hover {
	color: #fff;
  text-decoration: underline;
}

/*forced chrome yellow state*/
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
-webkit-box-shadow: 0 0 0 10000px rgb(255,255,255) inset!important;
-webkit-text-fill-color: #666 !important;
background-color: none!important;
}

/*RESPONSIVE*/
@media (max-width: 500px) {
  #login {
    padding: 20px; 
  }
  body.login #login h1 {
      margin-top: 0px;
  }
  body.login #login h1 a{
    margin-bottom: 0;
  }
}