/*
Author: Cole Thorsen

COLOURS
____________________________________
BLUE			#002f65
LIGHT BLUE		#005695
RED				#e31837
GRAY			#eaeaea
DARK GRAY		#333
*/

body, select, input, textarea {
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

body {
	color: #333;
}

:root {
	--dark-blue: #006bb0;
	--lt-blue: #4c97c8;
	--red: #ee3b33;

	--base: #333;
	--bg: #fff;

	--primary-color: var(--dark-blue);
	--primary-reverse: #fff;
	--secondary-color: var(--lt-blue);
	--tertiary-color:  var(--red);

	--link-color: var(--dark-blue);

	--nav-bg: var(--dark-blue);
	--nav-color: #fff;
	--header-bg: var(--lt-blue);

	--hero-panel-bg: rgba(76,151,200,.7);
	--hero-panel-glow: var(--red);

	--module-top: var(--lt-blue);
	--module-corner: var(--red);

	--highlight: rgba(238, 59, 51, .3); /*GNCC red at low opacity*/
	--highlight-alt: rgba(76, 151, 200, .3); /*GNCC lt_blue at low opacity*/
}

/* $THEMES
____________________________________*/
.text_primary {
	color: var(--primary-color);
}

/*
@media (prefers-color-scheme: dark) {

	:root {
		--base: #fff;
		--bg: #313133;
		--lt_gray: #252526;
		--lt_gray-semi-transparent: rgba(20,20,20,.8);
		--charcoal: #000;
		--red: #d93731;
		--primary-color: var(--red);
		--secondary-bg: var(--lt_gray);
	}
		svg,
		.charcoal svg {
			fill:  #dddfe1;
		}
}
*/

.module_heading,
.display_font {
	font-family: "Anton", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-weight: 300;
	text-transform: uppercase;
}

h1 + h1,
h1 + h2 {
	margin-top: -10px;
}

a {
	color: var(--link-color);
	text-decoration: none;
}
a:hover {
	color: #036;
}
::-moz-selection {
	background: #09b4f7;
	color:#fff;
	text-shadow: none;
}
::selection {
	background:#09b4f7;
	color:#fff;
	text-shadow: none;
}
a:link {
	-webkit-tap-highlight-color: #09b4f7;
}


h1, h2, h3, h4, h5, h6 {
	font-weight: 300;
	margin-bottom: 10px;
	font-size: 16px;
	line-height: 20px;
}

.header_xl {
	font-size: 36px;
	line-height: 36px;
}
.header_lg {
	font-size: 28px;
	line-height: 33px;
}
.header_md {
	font-size: 24px;
	line-height: 29px;
}
.header_sm {
	font-size: 18px;
	line-height: 22px;
}


/*
STYLING
____________________________________*/
strong {
	font-weight: 600;
}

.uppercase {
	text-transform: uppercase;
}

.micro {
	font-size: 11px;
	line-height: 15px;
}
.num {
	text-align: right;
}

.text_right {
	text-align: right;
}

.ui_lighten {
	opacity: 40%;
}

/*
TABLES
____________________________________*/
.ui_table {
	width: 100%;
	padding: 0;
	border-collapse: collapse;
}
	th {
		text-align: left;
	}
	.ui_table th,
	.ui_table > thead td,
	.ui_table_zebra > tfoot td {
		font-weight: bold;
		background: none !important;
		border-bottom:1px solid #333 !important;
	}
	.ui_table > tfoot td {
		border-top:1px solid #333 !important;
	}
	.ui_table td,
	.ui_table th {
		padding: 10px 5px;
		font-size: 14px;
		line-height: 20px;
	}
	.ui_table td > a {
		display: block;
	}

/* $ZEBRA
^ul ^ol ^list ^table
____________________________________*/
.zebra {}
	.zebra li:nth-child(odd),
	.zebra tr:nth-child(odd) td,
	.ui_table_zebra tr:nth-child(odd) td {
		background: #f1f1f1;
	}

/* HIGHLIGHT
____________________________________*/
.highlight,
.highlight_alt {
	background: var(--highlight);
	border-radius: 2px;
	padding: 3px;
	margin: -3px;
}

.highlight_alt {
	background: var(--highlight-alt);
}


/* $UI_LINK
^navigation ^lists ^a ^links
____________________________________*/
.ui_link, .ui_link:hover {
	display: block;
	position: relative;
	color: #333;
}
	.link_title {
		color: var(--link-color);
	}
	.ui_link:hover .link_title {
		color: #036;
	}
	.split {
		float: right;
	}
	.excerpt {
		display: block;
		overflow: hidden;
		height: 3.4em;
		width: 100%;
		border-bottom: 1px solid #f1f1f1;
		margin: 0 0 5px;
		padding: 0 0 5px;
	}
	.extra_info {
		display: block;
		border-bottom: 1px solid #f1f1f1;
		margin: 0 0 5px;
		padding: 0 0 5px;
	}
		.info_item {
			display: block;
			float: left;
			width: 50%;
		}

@media only screen and (min-width: 1200px) {
	.info_item {
			width: 33%;
		}

}

.big_link {
	border-top: 10px solid var(--module-top);
	padding: 5px 0 40px;
}
	.big_link .img_wrap {
		margin-top: 10px;
		padding-bottom: 47%;
	}
	.bar_icon {
		position: absolute;
		top: -17px;
		padding: 0 10px 0 0;
		background: #fff;
		font-size: 1.5em;
	}
		.bar_icon i {
			margin: 0;
		}
		.bar_icon svg {
			fill: var(--module-corner);
		}
	.big_link > .link_title {
		font-weight: bold;
		display: block;
		padding: 10px 0 0 0;
		font-size: 18px;
	}