:root {
	/* CSS Variables */
	--primary: rgb(117, 25, 110);
	--primaryDk: rgb(94, 20, 87);
	--secondary: rgb(125, 213, 65);
	--white: #ffffff;
	--xlgray: #f6f6f6;
	--ltgray: #dddddd;
	--mdgray: #666666;
	--dkgray: #222222;
	--black: #000000;
}

@font-face {
	font-family: 'Museo700';
	src: url('museo700regular.eot');
	src: url('museo700regular.eot?#iefix') format('embedded-opentype'),
		url('museo700regular.woff') format('woff'),
		url('museo700regular.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
}

html {
	position: relative;
	min-height: 100%;
}

body {
	color: var(--darkgray);
	margin-bottom: 60px;
	background-color: var(--xlgray);
	/*
	background-color: var(--white);
	background-image: url('../img/gears-bg.gif');
	background-position: bottom right;
	background-attachment: fixed;
	background-repeat: no-repeat;
	*/
}

h1,
h2,
h3,
h4,
h5 {
	font-family: 'Museo700', Arial, Helvetica, sans-serif;
}

a {
	color: var(--primary);
	transition: color 0.25s ease;
}

a:hover {
	color: var(--secondary);
}

.navbar {
	background-color: var(--primary);
	background-image: url('../img/gears-loop.jpg');
	background-attachment: fixed;
	background-position: bottom;
	box-shadow: 0 3px 5px var(--ltgray);
}

.navbar-brand h5 {
	position: relative;
	top: 0.25em;
}

.nav-item a {
	color: var(--ltgray);
}

main {
	margin-bottom: 1em;
}

header {
	padding-top: 56px;
	color: var(--white);
	background-color: var(--ltgray);
	margin-bottom: 2.5em;
	text-shadow: 2px 2px 5px var(--mdgray);
	background-image: url('../img/title-bar-bg.png');
	background-position: right top;
	background-repeat: no-repeat;
}

header h1 {
	margin-top: 50px;
	font-size: 3em;
}

header .input-group {
	margin: 0 auto 50px auto;
	max-width: 600px;
}

.login_screen {
	margin: 15vh auto 0;
	max-width: 400px;
	background-color: var(--white);
	padding: 1.5em 1.5em 2em;
	border-radius: 10px;
	border-bottom: 1px solid var(--ltgray);
	margin-bottom: 1em;
}

.login_screen h3 {
	margin-bottom: 0.5em;
}

aside {
	background-color: var(--white);
	padding: 2em 1em;
	border-radius: 10px;
	border-bottom: 1px solid var(--ltgray);
	margin-bottom: 1em;
}

aside h3 {
	color: var(--mdgray);
}

a.navbar-brand,
.nav-item.active a {
	color: var(--white);
}

.dropdown-menu {
	background-color: var(--xlgray);
}

a.dropdown-item {
	color: var(--dkgray);
}

a.dropdown-item:hover,
a.dropdown-item:focus,
a.dropdown-item:active {
	color: var(--white);
	background-color: var(--secondary);
}

.btn-primary {
	background-color: var(--primary);
	border-color: var(--primary);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active {
	background-color: var(--primaryDk);
	border-color: var(--primaryDk);
}

footer {
	background-color: var(--mdgray);
	position: absolute;
	bottom: 0;
	height: 60px;
	line-height: 60px;
	width: 100%;
	background-image: url('../img/title-bar-bg.png');
	background-position: right center;
	background-repeat: no-repeat;
}

footer p {
	margin: 0;
	color: var(--white);
	text-align: left;
}

footer a,
footer a:hover {
	color: var(--white);
	text-decoration: underline;
}

@-webkit-keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@keyframes fadeIn {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

#cover {
	display: none;
	overflow: hidden;
	position: fixed;
	background: rgba(0, 0, 0, 0.15);
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 1031;
	-webkit-animation: fadeIn 1s;
	animation: fadeIn 1s;
}

.cover-icon {
	color: var(--white);
	height: 120px;
	width: 120px;
	margin: -60px 0 0 -60px;
	text-align: center;
	position: fixed;
	top: 30%;
	left: 50%;
	font-size: 3em;
	/* background-color: rgba(0, 0, 0, 0.1); */
	border-radius: 50%;
}

.cover-icon .fa-cog {
	position: absolute;
	margin: 0.7em 0 0 -1.6em;
}

.cover-icon .fa-cog:nth-child(2) {
	animation-direction: reverse;
	font-size: 1.5em;
	margin: -0.2em 0 0 -0.6em;
}

.cover-icon .fa-cog:nth-child(3) {
	font-size: 2em;
	margin: 0.3em 0 0 0;
}