:root {
	--black: #131313;
	--white: #FEFEFE;
	--cream: #F8F6EF;
	--navy: #32485F;
	--forest-green: #273C2C;
	--deep-blue: #2B528B;
	--medium-blue: #509FD7;
	--baby-blue: #BFE6F7;
	--hunter-green: #316467;
	--brown: #2B1D1D;
	--red: #A72327;
	--orange: #CC793A;
}

.login {
	background: var(--deep-blue);
}
.login h1 a {
	background: url("../images/nav-logo.svg") no-repeat center center;
	background-size: contain;
	width: 7.5rem;
	height: 4.25rem;
}
.login form ~ p a,
.login form ~ p, .login #backtoblog a {
	color: var(--white) !important;
}
.login #login_error,
.login .message,
.login .success {
	color: var(--red);
	border-left: .25rem solid red;
}

.login .button-primary {
	display: inline-block;
	padding: .625rem 1.25rem !important;
	font-size: 1rem;
	line-height: 1!important;
	min-height: .625rem !important;
	color: var(--deep-blue);
	font-weight: 400;
	text-transform: uppercase;
	background: var(--baby-blue);
	border: .125rem solid var(--baby-blue);
	transition: all .6s;
}
.login .button-primary:hover {
	background: transparent;
	color: var(--deep-blue);
	border: .125rem solid var(--deep-blue);
}
.login input[type=checkbox]:focus,
.login input[type=color]:focus,
.login input[type=date]:focus,
.login input[type=datetime-local]:focus,
.login input[type=datetime]:focus,
.login input[type=email]:focus,
.login input[type=month]:focus,
.login input[type=number]:focus,
.login input[type=password]:focus,
.login input[type=radio]:focus,
.login input[type=search]:focus,
.login input[type=tel]:focus,
.login input[type=text]:focus,
.login input[type=time]:focus,
.login input[type=url]:focus,
.login input[type=week]:focus,
.login select:focus,
.login textarea:focus {
    border-color: var(--brown);
    box-shadow: 0 0 0 .0625rem var(--brown);
    outline: .125rem solid transparent;

}

.login form ~ p a,
.login form ~ p {
	color: var(--white) !important;
}
p#nav:hover, p#backtoblog:hover {
	color: var(--white);
}