/*
Author: Cole Thorsen

TABLE OF CONTENTS

LAYOUT ........... General Layout
MAIN ............. HTML/BODY, tags
NAV .............. Various nav bars for the site.
HEADER ........... Logo, ads
FOOTER ........... Disclaimer, Links
CONTENT .......... General Content Styles
ALIGN ............ alignment for blocks and the site in general.
HERO ............. custom hero styling.
MESSAGES ......... Alert, Info, Success message design.
BTN .............. styling for various buttons
IMAGES ........... nicely deal with lazyloading images.
COOKIE_CONSENT ... style cookie consent.
RECAPTCHA ........ hide the recaptcha badge.
OSANO ............ customize the osano widget.

/* $MAIN
____________________________________*/
body, select, input, textarea {
	color: #333;
	font-size: 14px;
	line-height: 1.5em;
}
body {
	background: #fdfeff;
}

/* $LAYOUT
____________________________________*/
.sidebar {
	display: none;
}

.container {
	position:relative;
	width: auto;
	margin: 0 30px;
}

.well {
	background: #e5e5e5;
	box-shadow: inset 0 3px 10px #bfbfbf;
}
@media print {
	.well {
		box-shadow: none;
	}
}
.body {
	position: relative;
	width: 100%;
	background: #fff;
}
.main_content {
	margin: 0;
	overflow: hidden;
}
.container.full > .sidebar {
	display: none;
}
.container.full > .main_content {
	margin-right: 0;
}
.main_content > .container {
	width: 100%;
}

@media only screen and (min-width: 1360px) {
	.container {
		margin:0px auto;
		width:1300px;
	}
}

@media only screen and (min-width: 870px) {
	.sidebar {
		display: block;
		position: relative;
		width: 300px;
		float: right;
		margin-left: -300px;
		padding: 20px 0;
		display: block;
		min-height: 600px;
		position: relative;
	}
	.halfpage {
		width: 300px;
		height: 600px;
	}
	/*TODO:  figure out an elegant way to make this play nicely with the content builder;
	.main_content {
		margin-right: 300px;
		margin-left: -20px;
	}
	*/
	.main_content {
		margin:  20px 320px 20px 0;
	}
}


/* $NAV
____________________________________*/
.nav {
	font-size: 16px;
}
	.nav ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}
	.nav a {
		display: block;
		padding: 5px 10px;
	}

/*
Extends `.nav` in site.css
*/
.nav_horiz {}
	.nav_horiz li {
		display: inline-block;
	}

/*
Extends `.nav{}` in layout.css
*/
.nav_header {
	display: none;
}
.nav_main {
	position: fixed;
	background: var(--nav-bg);
	width: 100%;
	z-index: 10;
	box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.3);
	height: auto;
	overflow: visible;
}
	.nav_main li {
		float: left;
	}
		.nav_main li > a {
			padding: 10px 10px;
			color: var(--nav-color);
		}
		.nav_main .home {
			margin: 0;
			font-size: 1.1em;
		}
		.nav_main li:hover > a,
		.nav_main .current > a,
		.nav_header a:hover {
			background: rgba(0,0,0,.1);
			color: #fff;
		}
			.nav_main li ul {
				display: none;
				position: absolute;
				background: #fff;
				padding: 10px 0 0;
				border: 1px solid #c4c4c4;
				border-top: 0;
				border-bottom: 5px solid var(--nav-bg);
				box-shadow: none;
			}
			.nav_main .parent:hover .subnav {
				display: block;
			}

				.nav_main li ul li {
					display: block;
					float: none;
					min-width: 200px;
				}
				.nav_main li ul li > a {
					color: #333;
					padding: 7px 10px;
				}
				.nav_main li ul li > a:hover {
					background: var(--nav-bg);
				}
				.detail {
					color: #c4c4c4;
					font-size: .8em;
					float: right;
					display: block;
					padding: 0 0 0 10px;
				}
			.nav_main li ul:before {
				content: '';
				position: absolute;
				top: 0;
				left:20px;
				width: 0;
				height: 0;
				border-left: 10px solid transparent;
				border-right: 10px solid transparent;
				border-top: 8px solid var(--nav-bg);
			}


@media only screen and (max-width: 870px) {
	.nav_main .container {
		margin: 40px 0 0;
	}
	.nav_header {
		display: block;
		position: fixed;
		width: 100%;
		top: 0;
		z-index: 10;
		background:var(--nav-bg);
		box-shadow: 0px 2px 2px -1px rgba(0,0,0,0.3);
	}
	.open_nav {
		position: absolute;
		top: 0;
		right: 0;
		padding: 0 !important;
		margin:0;
		border-left: 1px solid rgba(0,0,0,.2);
		color: #fff;
		font-size: 24px;
	}
		.open_nav i {
			margin: 11px 15px;
		}
		.open_nav svg {
			fill: var(--nav-color);
		}
	.nav_logo {
		padding: 5px;
		display: inline-block;
	}
		.nav_logo img {
			height:35px;
		}

	.nav_main {
		right: 0;
		width: 250px;
		z-index: 1;
		height: 100%;
		overflow: auto;
	}
		.nav_main li {
			display: block;
			float: none;
		}
			.nav_main li > a,
			.nav_main li ul li > a {
				padding:10px 20px;
				color: #fff;
			}
			.nav_main li ul {
				display: none;
				position: relative;
				padding: 10px 0 0;
				background: #444;
				box-shadow: inset 0 3px 10px #3c3c3c;
				border-bottom: 1px solid #666;
			}

	.body {
		-webkit-box-shadow: 0 0 10px rgba(0,0,0,0.5);
		box-shadow: 0 0 10px rgba(0,0,0,0.5);
		z-index: 2;

		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
		/*-webkit-transition: -webkit-transform 250ms ease;
		-moz-transition: -moz-transform 250ms ease;
		-o-transition: -o-transform 250ms ease;
		-ms-transition: -ms-transform 250ms ease;
		transition: transform 250ms ease;*/
	}
	.body.nav_open {
		-webkit-transform: translate3d(-250px,0,0);
		-moz-transform: translate3d(-250px,0,0);
		-o-transform: translate3d(-250px,0,0);
		-ms-transform: translate3d(-250px,0,0);
		transform: translate3d(-250px,0,0);
	}
}
/*
Extends `.nav{}` in layout.css
*/
.nav_context {
	margin:10px 0;
	border-bottom: 1px solid #cfcfcf;
}
	.nav_context li {
		display: inline-block;
	}
	.nav_context li > a {
		padding: 7px 10px;
	}
	.nav_context li {
		border: 1px solid #fff;
		border-bottom: 1px solid #cfcfcf;
		margin: 0 0 -1px;
	}
	.nav_context li.current {
		border: 1px solid #cfcfcf;
		border-bottom: 1px solid #fff;
	}

/* $NAV-BREADCRUMBS
^navigation ^lists ^a ^links
____________________________________*/
.nav_breadcrumbs {
	overflow: hidden;
	white-space: nowrap;
}
.content .nav_breadcrumbs ul {
	margin: 0;
}
	.nav_breadcrumbs li {
		display: inline-block;
	}
		.nav_breadcrumbs a {
			position: relative;
			display: block;
			padding: 10px;
		}
		.nav_breadcrumbs li:last-child a {
			color: #333;
			cursor: default;
		}
			.nav_breadcrumbs li a:after {
				content: '';
				position: absolute;
				transform: rotate(45deg);
				right: -6px;
				top: 17px;

				height: 10px;
				width: 10px;
				border-top: 3px solid #ccc;
				border-right: 3px solid #ccc;
			}

			.nav_breadcrumbs li:last-child a:after {
				display: none;
			}

.nav_social {
	font-size: 30px;
}
	.nav_social a {
		padding: 13px 5px;
		height: 60px;
	}
	.nav_social i {
		margin: 0;
	}
	.nav_social svg {
		fill: var(--primary-color);
	}


/* $PAGINATION
____________________________________*/
.pagination {
	margin: 0 auto 10px;
	text-align: center;
}
	.pagination > a,
	.pagination > .current {
		padding: 7px 13px;
		display: inline-block;
		border-top: 5px solid var(--secondary-color);
	}
	.pagination > .current {
		border-color: var(--tertiary-color);
		margin: 0 5px;
	}

/* $HEADER
^header ^div
____________________________________*/
.header_main {
	background: var(--header-bg);
	padding: 60px 0 20px;
}
	.logo {
		display: none;
	}
	.leaderboard {
		display: none;
	}
	.mobile {
		display: block;
		width: 320px;
		height: 50px;
		margin: 0 auto;
	}

@media only screen and (min-width: 760px) {
	.mobile {
		display: none;
	}
	.leaderboard {
		display: block;
		width: 728px;
		height: 90px;
		margin: 0 auto;
		float: none;
	}
}
@media only screen and (min-width: 875px) {
	.header_main .container {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.logo {
		display: block;
		margin: 0 10px 0 0;
	}
		.logo img {
			width: 100%;
			max-width: 136px;
			margin: 0;
		}
	.header_main .ad_wrap {

	}
}


/* $FOOTER
^footer ^div
____________________________________*/
.copyright {
	padding: 16px 0 20px;
	float: left;
	font-size: 14px;
}
.authorship {
	font-size: 14px;
	float:right;
	padding: 15px 0 20px;
}
	.authorship a {
	}
	.authorship .i_impulse-studios {
		width: 1.3em;
		height: 1.3em;
	}
	.authorship svg {
		fill: var(--link-color);
	}
	.authorship i {
		margin: 0 3px 0 5px;
	}

/* $SUB_HEAD
^div ^box ^container
____________________________________*/
.sub_head {
	display: none;
}

@media only screen and (min-width: 760px) {
	.sub_head {
		display: block;
	}
		.sub_head .container {
			margin-bottom: 15px;
		}
			.subhead_grid > div:before,
			.subhead_grid > div:after {
				content:  '';
				position: absolute;
				top: 15px;
				bottom:  0;
			}
			.subhead_grid > div:after {
				border-right: 1px solid rgba(255,255,255,.3);
				right: -1px;
			}
			.subhead_grid > div:before {
				border-right: 1px solid rgba(0,0,0,.1);
				right: 0;
			}
				.sub_head h3 {
					color: #c4c4c4;
					font-size: 24px;
					display: inline-block;
				}
				.sub_head svg {
					fill: #c4c4c4;
				}
				.sub_title {
					font-size: 16px;
					display: inline-block;
					padding: 0 6px;
				}
				.sub_title_event {
					padding: 20px 0 0;
				}

			.subhead_links {
				width: 100%;
				margin: 0;

			}
				.subhead_links svg {
					fill: var(--link-color);
				}

}

@media only screen and (max-width: 1000px) {
	.subhead_grid > div:last-child:before,
	.subhead_grid > div:last-child:after {
		border-right: none;
	}
}

@media only screen and (min-width: 1000px) {
	.sub_head .container {
		display: flex;
		flex-direction: row-reverse;
		margin-bottom: 0;
	}
	.subhead_grid {
		flex-grow: 1;
		margin-bottom: 0 !important;
	}
	.subhead_links {
		width: 250px;
		margin: 0 15px 15px 30px;
	}
}

/* $TAGS
____________________________________*/
.tag {
	font-size: 9px;
	text-transform: uppercase;
	color: #595959;
	display: block;
	line-height: 12px;
}
/*
Extends `.tag` in layout.css
*/
.ad_tag {
	line-height: 21px;
	text-align: center;
}

.header_main .ad_tag {
	color: #ddd;
	position: absolute;
	width: 100%;
}
.header_main .ad_tag a {
	color: #ddd;
}

.ad_wrap {
	position: relative;
	margin:  0;
}

/* $MODULE
^div ^box ^container
____________________________________*/

	.module_heading {
		position: relative;
		border-top: 10px solid var(--module-top);
		color: #c4c4c4;
		margin: 0;
		padding: 5px 0 0;
		margin-bottom: 10px;
		font-size: 30px;
		line-height: 34px;
	}
	.module_heading a {
		color: #c4c4c4;
		display: block;
	}
	.module_heading:before {
		content: '';
		display: block;
		background: var(--module-corner);
		width: 50px;
		height: 10px;
		position: absolute;
		top: -10px;
		border-right: 5px solid #fff;
	}


/* $UI-LIST
^ul ^ol ^list
____________________________________*/
.ui_list {
	list-style: none;
	padding: 0;
	margin: 5px 0;
}
	.ui_list > li {
		padding: 3px;
	}

	.block {
		display: block;
	}
	.light {
		color: #c4c4c4;
	}
		.light svg {
			fill: #c4c4c4;
		}
	.green {
		color: #38be31;
	}
	.red {
		color: #e30000;
	}
	.gray {
		color: #bbb;
	}
.list_big {
	position: relative;
	margin: 0;
	padding: 10px 0 0;
	font-size: 16px;
}
	.list_big .i {
		font-size: 1.2em;
	}
	.list_big > li > a {
		display: block;
		padding: 4px 0;
	}
@media only screen and (max-width: 1000px) {
	.list_big {
		border-bottom: 1px solid rgba(255,255,255,.3);
		margin: 0 -30px;
		padding: 15px 30px;
	}
	.list_big:before {
		content: '';
		border-bottom: 1px solid rgba(0,0,0,.1);
		position: absolute;
		bottom: 0;
		left:0;
		width: 100%;
	}
		.list_big li {
			display: inline-block;
			width: 32%;
		}
			.list_big a {
				text-align: center;
			}
}
/*
Extends `.ui_list{}` in layout.css
*/
.ui_line > li {
	border-bottom: 1px solid #cfcfcf;
	padding: 15px 0;
}
.ui_line h2 {
	margin-top: 0;
}

/* $MAP
____________________________________*/
.directions .map {
	height: 460px;
}
.track_map {
	height: 460px;
}

	.map_locations {
		display: none;
	}
	.map_directions {
		display: none;
	}
			.map_info > .icon {
				float: left;
			}
			.map_info > address {
				margin: 0 0 0 70px;
			}
	.map_sidebar > form p {
		float: left;
	}
	.map_sidebar label {
		display: none;
	}
	.map_sidebar input {
		margin-top: 0;
		float: left;
	}
	.map_sidebar #input_from {
		width: 265px;
		padding: 4px;
		font-size: 13px;
		margin: 0 -8px 0 10px;
		height: 20px;
	}
@media only screen and (max-width: 800px) {
	.directions .map {
		height: 300px;
	}
	.track_map {
		height: 300px;
	}
}
@media only screen and (max-width: 570px) {
	.directions .map {
		height: 150px;
	}
}

/* $HERO
^div ^carousel ^header
____________________________________*/
.hero {
	position: relative;
}
	.hero h1,
	.hero h2,
	.hero h3 {
		text-shadow: 1px 1px 0 #000;
		pointer-events:none;
		margin-top: 0;
	}
	.hero svg {
		fill: #fff;
		filter: drop-shadow(1px 1px 0 #000);
	}
	.hero h1 {
		font-size: 55px;
		line-height: 65px;
	}
	.hero > h2 {
		font-size: 38px;
		opacity: .5;
		z-index: 2;
		top: 0;
		position: absolute;
		margin: 20px;
		color: #fff;
	}
	.panel {
		position: relative;
		height: 235px;
		display: block;
		overflow: hidden;
		border: 1px solid #fff;
		border-bottom: 0;
		border-left: 0;
		background: url(//gncc.iscdn.net/i/icons/loader.gif) center no-repeat;
		padding-bottom: 0 !important;
	}
	.panel_header {
		height: 350px;
	}
		.panel_title {
			position: absolute;
			color: #fff;
			z-index: 3;
			margin: 20px 20px 15px 0;
			bottom: 0;
			background: var(--hero-panel-bg);
			padding: 8px 15px 8px 20px;
		}
		h3.panel_title {
			font-size: 30px;
			line-height: 34px;
		}
		.panel_title .date {
			font-size: 16px;
		}
	.glow {
		margin: 0;
		bottom: 0;
		position: absolute;
		height: 100%;
		width: 100%;
		z-index: 2;
		-webkit-transition: box-shadow 1s ease-in-out;
	}
	a.panel:hover .glow {
		box-shadow: inset 31px -30px 211px 11px var(--hero-panel-glow);
	}
		.panel > img {
			width: 100%;
			height: 100%;
			object-fit: cover;
			position: absolute;
			z-index: 1;
		}

.hero .btn {
	margin-top: 14px;
}
.btn_newsletter {
	margin-left: 10px;
}

@media only screen and (max-width: 850px) {
	.btn_newsletter {
		float: right;
	}
}

.social_icons a {
	font-size: 2.2em;
	padding: 20px 2px 0px;
}
	.tw:hover {
		color: #00aced;
	}
	.fb:hover {
		color: #3b5998;
	}
	.ig:hover {
		color: #b19a84;
	}
	.yt:hover {
		color: #b92a27;
	}

@media only screen and (max-width: 600px) {
	.panel,
	.panel_header {
		height: 300px;
	}
	.panel_header {
		height: 350px;
	}
}
@media only screen and (max-width: 570px) {
	.panel,
	.panel_header {
		height: 150px;
	}
	.hero h1,
	.hero h3 {
		font-size: 28px;
	}
}
@media only screen and (min-width: 1300px) {
	.panel {
		height: 300px;
	}
	.panel_header {
		height: 550px;
	}
}

/* $POST_HEADERS
__________________________________*/
.video_container {
	padding: 20px 0;
	background: #333;
}
	.video_container .block_container {
		padding: 0;
	}

/* EVENT_HEADER
____________________________________*/
.info_header {
	font-size: 18px;
	display: inline-block;
	padding: 0 20px 0 0;
}
	.info_header svg {
		fill: var(--tertiary-color);
	}

/* $AUTHOR
____________________________________*/
.author {
	display: block;
	float: right;
	background: #f1f1f1;
	padding: 10px;
	margin: 0 0 20px 10px;
	text-align: center;
	position: relative;
	border-radius: 50%;
	height: 120px;
	width: 120px;
}
	.author img {
		box-shadow: 0px 2px 10px rgba(0,0,0,.1);
	}

	.circle {
		display: inline-block;
		border-radius: 50%;
		overflow: hidden;
	}
		.circle img {
			display: block;
		}

/* $MESSAGES
__________________________________*/
.message {
	padding:10px;
	background: #ffdedb;
	border: 1px solid #e02929;
	z-index: 4;
	position: relative;
	color: #333;
	text-align: left;
}
	.message > i {
		display: block;
		float: left;
		background: url(/images/icons/info-icons.png);
		background-size: 26px auto;
		height: 26px;
		width: 26px;
		margin: -3px 10px 0 0;
	}
	.message ul {
		list-style: none;
		margin: 0;
		padding: 0;
	}

.success {
	background: #e9fece;
	border-color: #68b904;
}
	.success > i {
		background-position: 0 80px;
	}
.info {
	background: #ddeefc;
	border-color: #68abdd;
}
	.info > i {
		background-position: 0 53px;
	}

/* IMAGES
ensures images to have an alloted space before they are loaded.
____________________________________*/
.img_wrap {
	position: relative;
	display: block;
	padding-bottom: 66.6%;
}
	.img_wrap > img {
		width: 100%;
		position: absolute;
		top: 0;
		opacity: 0;
		transition: .3s;
	}
	.img_wrap > img.lazyloaded {
		opacity: 1;
	}

/* $COOKIE_CONSENT
__________________________________*/
.cc-theme-classic {
	background: #000;
	color: #fff;
}

/* $RECAPTCHA
__________________________________*/
.grecaptcha-badge { visibility: hidden; }

/* $HTML embeds.
__________________________________*/
.instagram-media {
	margin: 0 auto;
}

/* $OSANO
__________________________________*/
.osano-cm-widget{display: none;}

.consent_required {
	position: absolute !important;
	z-index: 3;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,.8);
	color: #fff;
	padding: 20px;
}