/* Change background and font family */
body {
  background: #f8fafa;
  font-family: Arial,Verdana,sans-serif;
}
body.login {
	margin-top: 35px;
    background-image: url(login_bg.jpg);
	background-repeat: no-repeat;
    background-size: cover;
	background-attachment:fixed;
}

form#loginform {
	padding:24px;
}
.login form {
	margin:0px;
	width:225px;
}
/* Change Width and Height of Logo Image + Add Custom Image File */
.login h1 a {
  margin:0;
  background-image: url(login-unkrautlogo.jpg) !important;
  width: 272px;
  height: 60px;
  background-size: 272px 60px;
}
.login form .input,
.login input[type="text"] {
	font-size: 18px;
	width: 100%;
	padding: 3px;
	margin: 2px 6px 10px 0;
}
#first_name, #last_name {
    font-size: 18px;
	width:210px;
}
#pass1, #pass2 {
    font-size: 18px;
	width:210px;
}
/* Add a few changes to the color and style of form itself */
.login label {
  color: #454545;
  display: block;
  margin-bottom: 0px;
  font-weight: bold;
}
.login form .input {
  width:210px;
  font-weight: normal;
}
.login #pass-strength-result {
  width:210px;
}
.login p#nav, .login p#backtoblog {
	width:225px;
}
.login p#nav, p#backtoblog {
  background-color: #CCCCCC;
  margin:0px;
}
.login #backtoblog a, .login #nav a {
  color: #2B4908;
  padding:0px;
}
.login #backtoblog a:hover, .login #nav a:hover {
  color: #FFFFFF;
  background: #4F7327;
}
.login #nav {
	padding-top:5px;
}
.login #backtoblog {
	padding-bottom:5px;
}
.login .button-primary {
  margin-right:70px;
  margin-top:20px;
  background: #2B4908;
}
.login .button-primary:hover {
  background: #4F7327;
}
.login .message {
	width:245px;
	background-color:#dddddd;
}
.login #login_error {
	width:245px;
	font-weight:bold;
	background-color:#ff0000;
}

/* Smartphones (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */
@media only screen 
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen 
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
	#login {
		width: auto;
		position: absolute;
		left: 50%;
		margin-right: 0;
		transform: translate(-50%);
		-ms-transform: translate(-50%);
		-webkit-transform: translate(-50%);
	}
	.login p {
  	    
	}
	
}