:root {
  --mb:10px;
  --outer:18px;
  --max-width: inherit;
  --rat: 56.25%;
  --rec: 177.2%;
  --rw: 720px;
  --bw:60px;
  --expanded:282px;
  --contracted:120px;
  --awardsscroll: 40vh;
}

@media (min-width: 769px) {
  :root {
    --expanded:34vw;
    --contracted:10vw;
    --awardsscroll: 20vh;
  }
}
@media (min-width: 1000px) {
  :root {
    --mb:1vw;
    --outer:30px;
    --bw:67px;
  }
}
@media (min-width: 1180px) {
  :root {
    --outer:2.8vw;
  }
}
/*--------------------------------
	Media Queries
	used for outputting content either between media query tags
	example: basic usage
	.element {
		width: 50%;
		@include mq('tablet-small') {
			width: 20%;
		}
	}
	example: using max-width
	.element {
		width: 50%;
		@include mq('tablet-small', 'max') {
			width: 20%;
		}
	}
*/
/*--------------------------------
	Margin / Padding Quick Resets
	example: top & bottom margin set to $mb
	.element {
		@include push--ends;
	}
	example: left & right padding set to $mb--small
	.element {
		@include soft--sides($mb--small);
	}
*/
/*--------------------------------
	Helper mixins
*/
/*--------------------------------
	Form input placeholder text
	example:
	input,
	textarea {
		@include input-placeholder {
			color: $grey;
		}
	}
*/
/*--------------------------------
	Retina images
	example:
	.element {
		@include retina {
			background-image: url(../img/background@2x.png);
		}
	}
*/
/*--------------------------------
	Content margins
	fore removing first/last child margins
	example: default
	.element {
		@include content-margins;
	}
	output:
	.element > *:first-child {
		margin-top: 0;
	}
	.element > *:last-child {
		margin-bottom: 0;
	}
	example: empty selector
	.element {
		@include content-margins('false');
	}
	output:
	.element:first-child {
		margin-top: 0;
	}
	.element:last-child {
		margin-bottom: 0;
	}
*/
/*--------------------------------
	CSS Triangle
	used for creating CSS only triangles
	example:
	.element {
		&::before {
			@include css-triangle(blue, down);
		}
	}
*/
/*--------------------------------
	Hide text
	example:
	.element {
		@include hide-text;
	}
*/
/*--------------------------------
Font size
*/
body.login {
  overflow: hidden;
  background: black;
}
body.login a, body.login p:not(.message):not(.error), body.login label, body.login span, body.login #backtoblog a, body.login #nav a {
  color: white;
}
body.login #login {
  padding: 2% 3%;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
  width: auto;
  max-width: 500px;
  margin-top: 5%;
}
body.login #loginform {
  border: none;
  background-color: black;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  border-radius: 5px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  -moz-box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
  box-shadow: 0px 0px 0px 0px rgba(0, 0, 0, 0);
}
body.login #loginform .button-primary {
  background: #474484;
  text-shadow: none;
  border: none;
  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  border-radius: 4px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
}
body.login #login_error, body.login .message, body.login #login_error, body.login .message {
  -moz-border-radius: 0px;
  -webkit-border-radius: 0px;
  border-radius: 0px;
  -moz-background-clip: padding;
  -webkit-background-clip: padding-box;
  background-clip: padding-box;
  /* prevents bg color from leaking outside the border */
}
body.login #login h1 a {
  background-image: url(../images/favicon.png) !important;
}

body.login-password-protected form p > label {
  width: 100%;
}