/* ==========================================================================
Import
========================================================================== */
@font-face {
font-family: 'Interstate';
	src: url('/fonts/Interstate-Light.ttf') format('ttf')
}
@font-face {
	font-family: 'Interstate Bold';
		src: url('/fonts/Interstate-Bold.ttf') format('ttf');
		font-weight: bold;
}
@font-face {
	font-family: 'Interstate Italic';
		src: url('/fonts/Interstate-Regular-Italic.ttf') format('ttf');
		font-style: italic;
}

/* ==========================================================================
Base
========================================================================== */

*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}
html {font-size: 1em}
body {
	font-family: "Interstate", Arial, Helvetica, sans-serif;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	padding-top: 94px;
	font-size: 16px;
	height: 100%;
}
td {
	padding: 10px;
	text-align: left;
}

a, a:hover { color: #cb001d; text-decoration: none; }
a, a:active, a:focus{ outline: none }
.well-green a, .well-green a:hover { font-weight: 700; color: #fff; }
.well-blue a,  .well-blue  a:hover { font-weight: 700; color: #fff; }
.well-brown a, .well-brown a:hover { font-weight: 700; color: #D1B750; }

h1 { margin-top: 0; font-weight: 700; }
h2 { font-size: 24px; }
h3 { font-size: 20px; }
h4 { font-size: 18px; }
h5 { font-size: 16px; }
h1, h2, h3, h4, h5 {  font-family: "Interstate Bold", Arial, Helvetica, sans-serif; font-weight: 700; color: rgb(194,0,22); }

/* ==========================================================================
Typography
========================================================================== */
.text-caps 				{ text-transform: uppercase }
.text-justify 		{ text-align: justify }
.text-right				{ text-align: right; }
.text-center			{ text-align: center !important; }
.text-bold 				{ font-family: "Interstate Bold", Arial, Helvetica, sans-serif; font-weight: 700; }
.text-light 			{ font-weight: 200;  }
.text-italic 			{ font-family: "Interstate Italic", Arial, Helvetica, sans-serif; font-style: italic; }
.text-underline 	{ text-decoration: underline; }
.color-primary 		{ color: rgb(194,0,22) !important}
.color-secondary 	{ color: rgb(122,122,122) !important;}
.color-accent			{ color: rgb(24,61,100) !important }
.text-white 			{ color: white; }
.text-black 			{ color: rgb(9,25,31) !important; }
.text-blue	 			{ color: rgb(24,61,100) !important; }

.text-xl 		{ font-size: 4em !important; }
.text-lg 		{ font-size: 2em !important; }
.text-md 		{ font-size: 1.2em !important; }
.text-regular 	{ font-size: 1em !important; }
.text-sm 		{ font-size: 0.8em !important; }
.text-xs 		{ font-size: 0.7em !important; }

.lh1   { line-height: 1 !important; }
.lh1-1 { line-height: 1.1 !important; }
.lh1-2 { line-height: 1.2 !important; }
.lh1-3 { line-height: 1.3 !important; }

/* ==========================================================================
Helper Classes
========================================================================== */
.cursor-pointer { cursor: pointer; }
.display-none 	{ display: none !important; }
.list-no-indent { padding-left: 18px; list-style-position: outside; }
.no-indent 			{ list-style-position: inside; padding-left: 0; }
.no-padding 		{ padding: 0; }
.no-wrap 				{ white-space:nowrap; }
.relative 			{ position: relative; }
.wrap 					{ white-space: normal; }

.well h1, .wel1 h2, .well h3, .well h4, .well h5 { color: #ffffff; }
.well 					{ background-color: rgb(194,0,22); padding: 20px; color: #fff; }
.well-secondary { background-color: rgb(122,122,122); color: #fff !important; padding: 20px; }
.well-lightgrey { background-color: #e1e1e1; color: #000 !important; padding: 20px; }
.well-border		{ border: 2px solid rgb(24,61,100); border-radius: 10px; padding: 20px; }

.img-responsive { max-width:100%; }
.img-center 		{ display:block; margin-left:auto; margin-right:auto; }
.img-fill 			{ width: 100%; height: 100%; object-fit: cover; }

.background-grey 			{ background-color: rgb(122,122,122); }
.background-lightgrey { background-color: #e1e1e1; }
.background-white 		{ background-color: #ffffff; }
.background-secondary { background-color: rgb(122,122,122); }
.background-red 			{ background-color: rgb(194,0,22); }
.background-mda				{ background-image: linear-gradient(to right, rgb(249,0,66), rgb(251,155,0)); }

.background-grey a { color: #ffffff; }

.border-white { border: 1px solid white; }
.border-none 	{ border: none !important; }

/* ==========================================================================
Buttons
========================================================================== */
.btn { border-radius: 0; font-size: 14px; font-weight: bold; }
.btn-xl { border-radius: 0; font-size: 20px; font-weight: bold; }
.btn-lg { border-radius: 0; font-size: 16px; font-weight: bold; }
.btn-sm { border-radius: 0; font-size: 12px !important; font-weight: bold; }
.btn-xs { border-radius: 0; font-size: 10px !important; font-weight: bold; }

.btn-cta 						{ background-color: #666; color: #fff !important; font-size: 18px; line-height: 1; }
.btn-cta:hover 			{ background-color: #aaa; color: #000 !important; }

.btn-default 				{ background-color: #c6c6c6; color: #000 !important; }
.btn-default:hover { background-color: #fff; color: #000 !important; transition: background-color 1s;  }

.btn-grey 					{ background-color: #c2c2c2; color: #000;  }
.btn-grey:hover 		{ background-color: #64513E; color: #fff !important; transition: background-color 1s; }

.btn-red 						{ background-color: rgb(194,0,22); color: #FFF !important;  }
.btn-red:hover 			{ background-color: #93939A; color: #fff !important; transition: background-color 1s; }

.btn-outline 				{ background-color: transparent;  border: 1px solid #64513E; color: #64513E !important; }
.btn-outline:hover 	{ background-color: #64513E;  border: 1px solid #64513E; color: #fff !important; transition: background-color 1s; }
.btn-active 				{ background-color: #144e3a;  border: 1px solid #144e3a; color: #fff !important; }

/* ==========================================================================
Masthead
========================================================================== */
#masthead { 
	background-color: rgb(122,122,122); 
	font-size: 18px; 
	line-height: 1.2;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 999;
}

/*#masthead div { height: 45px; }*/

#masthead i { font-size: 26px; }

#event-countdown {
	font-size: 20px; 
	padding: 3px 0 0 0;
	text-align: center;
	width: 180px;
	margin-left: auto;
	margin-right: auto;
}
#event-countdown > div {
	width: 40px;
	color: #FFFFFF; 
	font-weight: 700;
	line-height: 1.1;
	margin-top: 2px;
	margin-bottom: 4px;
}

#event-countdown .label {
	padding: 0;
	font-size: 45%; 
	text-transform: uppercase;
	font-weight: 400;
	display: block;
}

.breadcrumb 		{ background-color: transparent; margin-bottom: 0; }
.colocated img 	{ height: 45px; }
.registernow a 	{ border-radius: 5px; padding: 6px 8px; }

@media screen and (max-width: 1200px) {
	.colocated 					{ font-size: 12px; }
	.colocated img 			{ height: 35px; }
	.colocated div div 	{ margin-top: 3px; }
	.registernow a 			{ border-radius: 5px; padding: 6px 8px; }	
}
@media screen and (max-width: 992px) {
	body 			{ padding-top: 23px; }
	#masthead { font-size: 14px; }
	/*	
	#event-countdown { font-size: 16px; padding-top: 7px; }
	#event-countdown > div { width: 30px; }*/
}
@media screen and (max-width: 768px) {
	#masthead { font-size: 14px; }
	#masthead i { font-size: 18px; }
}

header.header--tab {
	border-bottom: solid 3px #D1B750;
	margin-bottom: 20px;
}
header.header--tab h3 {
	background: #D1B750; 
	color: #fff; 
	padding: 10px 10px 7px; margin: 0;
	font-weight: 700;
	text-transform: uppercase;
	font-size: 16px;
	display: inline-block;
}

/* ==========================================================================
Footer
========================================================================== */
#footer > .container { padding-top: 50px; padding-bottom: 50px; }
#footer section { background-color: #e1e1e1; color: #000;}
#footer section img { margin-left: 20px; }
#footer a { color: #FFF; font-size: 14px; }
#footer section a { color: #000;}

@media screen and (max-width: 992px) {
	#footer { margin-bottom: 50px; }
}

/* ==========================================================================
Bottom Navbar (Mobile)
========================================================================== */
.navbar-footer {
	position: fixed;
	bottom: 0;
	background-color: #93939A;
	width: 100%;
}

/* ==========================================================================
NavBar
========================================================================== */
#navbar { z-index: 200; opacity: 0.9; }
.navbar-nav li a {
	color: #fff;
	font-size: 15px;
	font-weight: bold;
	margin-right: 5px;
	line-height: 1.1;
}
.dropdown-menu {
	margin: 0;
}
.dropdown-item, .dropdown-menu a {
	color: #000 !important;
}
.dropdown-item:hover {
	background-color: #999;
	color: #fff !important;
}
.dropright .dropdown-menu {
	margin-left: 0;
}

@media screen and (max-width: 1200px) {
	.navbar-nav li a { font-size: 15px; margin-right: 5px; }
}
@media (min-width: 992px) { 
	.dropdown:hover>.dropdown-menu { display: block; }
	.dropright:hover>.dropdown-menu { display: block; }
}

#search div { height: auto !important }
#search .dropdown-menu { left: auto; right: 0; }

@media screen and (max-width: 992px) {
	#navbar { display: none; }
}

/* ==========================================================================
Carousel
========================================================================== */
.carousel-indicators { 
	bottom: -45px;
}
.carousel-indicators li { background-color: #ccc !important;}
.carousel-indicators .active { background-color: #ca392c !important;}

.carousel-control-prev {
	left: -120px;
}

.carousel-control-next {
	right: -120px;
}

.carousel-control-prev-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
}

.carousel-control-next-icon {
	background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
}

/* ==========================================================================
Back to Top
========================================================================== */
.cd-top {
	display: inline-block;
	height: 40px; width: 40px;
	position: fixed; bottom: 40px;right: 10px;
	box-shadow: 0 0 10px rgba(0,0,0,0.05);
	overflow: hidden;
	text-indent: 100%;
	white-space: nowrap;
	background: transparent url(../img/back-to-top.png) no-repeat center 50%;
	visibility: hidden;
	opacity: 0;
	-webkit-transition: opacity .3s 0s,visibility 0 .3s;
	-moz-transition: opacity .3s 0s,visibility 0 .3s;
	transition: opacity .3s 0s,visibility 0 .3s;
}

.cd-top.cd-is-visible,.no-touch .cd-top:hover, {
	-webkit-transition: opacity .3s 0s,visibility 0 0;
	-moz-transition: opacity .3s 0s,visibility 0 0;
	transition: opacity .3s 0s,visibility 0 0;
}

.cd-top.cd-is-visible {visibility: visible;opacity: 1}

.cd-top:hover,
.no-touch .cd-top:hover {
	background-color: ##7e7e7e;
	opacity: 1;
}

@media only screen and (min-width: 768px) {
	.cd-top {right: 20px;bottom: 20px}
}

@media only screen and (min-width: 1024px) {
	.cd-top {
		height: 40px;width: 40px;
		right: 30px;bottom: 30px;
	}
}

/* ==========================================================================
Image Zoom on Hover
========================================================================== */
.zoom {
  transition: transform .2s; /* Animation */
}

.zoom:hover {
  transform: scale(1.05); /* (150% zoom - Note: if the zoom is too large, it will go outside of the viewport) */
}

/* ==========================================================================
Forms
========================================================================== */
.ceForm {
	padding-bottom: 1.25rem;
}
.ceForm input, .ceForm select {
	margin: 0 .25rem;
	border: 1px solid #ccc;
	border-left: 3px solid;
	border-radius: 5px;
	padding-left: 5px;
	transition: border-color .5s ease-out;
}
.ceForm input:optional, .ceForm select:optional {
	border-left-color: #999;
}
.ceForm input:required:valid, .ceForm select:required:valid {
	border-left-color: green;
}
.ceForm input:invalid, .ceForm select:invalid {
	border-left-color: red;
}

/* Hide Spinner in Numeric Input Fields */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	margin: 0; 
}
option { color: #ccc !important; }

.invalid-feedback { margin-left: 10px; }

input[type="text"], input[type="text"]:focus, 
input[type="email"], input[type="email"]:focus,
select, select:focus {
	outline: 0;
	box-shadow:none;
}

input[type="text"] {
	padding: 2px 5px !important;
}

input[type="submit"]:valid {
	background-image: none !important;
}

/* ==========================================================================
Sticky Menu
========================================================================== */
.sticky {
  position: fixed;
  top: 25px;
  width: 100%;
}

.sticky + .content {
/*  padding-top: 25px;*/
}

/* ==========================================================================
Modals
========================================================================== */
.modal-dialog { max-width: 800px; }
.modal .close { float: right; }

/* ==========================================================================
Pagination
========================================================================== */
.pagination li { padding: 0px 4px 2px 4px; }
.pagination .current { border: 1px solid #ccc; }

/* ==========================================================================
Custom Radio Buttons
========================================================================== */
.customRadio label {
	text-transform: uppercase;
	padding: 12px 10px;
	float:left; 
	background-color:#ddd;
	border-radius:3px;
	margin-right:10px;
	margin-bottom:5px;
	}
.customRadio label:hover {
	background-color: #999;
}
.customRadio input[type=radio]:checked + label { background-color: #666; color:#fff; }
.customRadio input[type=radio] { display:none; }

/* ==========================================================================
Miscellaneous
========================================================================== */
.cookiefooter {
	width: 100%;
	height: 100px;
	position: fixed;
	bottom: 0px;
	background-color:#ccc;
	color:#333;
	padding:10px 20px;
	text-align:center;
	z-index: 9999;
	opacity: 0.9;
	filter: alpha(opacity=90); /* For IE8 and earlier */
}
@media screen and (max-width: 576px) {
	.cookiefooter { height: 160px; }
}

.modal-backdrop.in {
	opacity:0.5 !important;
	position:fixed;// This makes it cover the entire scrollable page, not just browser height
	height:100%;
}

.sr .reveal { visibility: hidden; }

.thumbnail { border: 1px solid #ddd; }