/* ==========================================================================
Import
========================================================================== */

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

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

a, a:hover { color: #009da7; 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 { color: #134E9A; font-weight: 700; }

/* ==========================================================================
Typography
========================================================================== */
.text-caps 		{ text-transform: uppercase }
.text-justify 	{ text-align: justify }
.text-right		{ text-align:right; }
.text-center	{ text-align:center; }
.text-bold 		{ font-weight: 700; }
.text-light 	{ font-weight: 200;  }
.text-italic 	{ font-style: italic; }
.text-underline { text-decoration: underline !important; }
.text-white 	{ color:white; }
.text-black 	{ color:black !important; }
.text-blue	 	{ color: #134E9A; }
.text-lightblue { color: #009da7 !important } 
.color-primary 	{ color: #134E9A !important }
.color-secondary { color: #ca392c !important }
.error 			{ color: #a94442; }
.pointer 		{ cursor: pointer; }

.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 { background-color: #c2c2c2; padding: 20px; }
.well-lightblue { background-color: #009da7; color: #fff !important; padding: 20px; }
.well-lightgrey { background-color: #e1e1e1; padding: 20px; }
.well-border    { border: 1px solid #009da7; padding: 20px; }

.well-lightblue a, .well-lightblue a:hover { color: #fff; text-decoration: none; }

.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: #e1e1e1; }
.background-white { background-color: #fff; }
.background-secondary { background-color: #009da7; }
.background-blue { background-color: #134E9A; }

.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-xs { border-radius: 0; font-size: 10px !important; font-weight: bold; }

.btn-default { background-color: #134E9A; color: #fff !important; }
.btn-default:hover { background-color: #009da7; color: #fff !important; transition: background-color 1s;  }

.btn-blue { background-color: #009da7; color: #FFF !important;  }
.btn-blue:hover { background-color: #134E9A; color: #fff !important; transition: background-color 1s; }

.btn-red { background-color: #ca392c; color: #FFF !important;  }
.btn-red:hover { background-color: #134E9A; color: #fff !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-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: #134E9A; 
	border-bottom: 1px solid white;
	font-size: 18px; 
	line-height: 1.2;
	position: fixed;
	top: 0;
	width: 100%;
	z-index: 9999;
}

#masthead div { height: 45px; }

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

#event-countdown {
	font-size: 20px; 
	padding: 3px 0 0 15px;
	text-align: center;
}
#event-countdown > div {
	width: 40px;
	color: #fff; 
	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; }

@media screen and (max-width: 992px) {
	#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: #134E9A; color: #fff;}
#footer section img { margin-left: 20px; }
#footer a { color: #134E9A; font-size: 14px; }

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

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

/* ==========================================================================
NavBar
========================================================================== */
#navbar { z-index: 9999; }
.navbar-nav li a {
	color: #134E9A;
	font-size: 18px;
	font-weight: bold;
	margin-right: 5px;
	line-height: 1.1;
}
.dropdown-menu {
	margin: 0;
}
.dropdown-item, .dropdown-menu a {
	color: #134E9A !important;
}
.dropdown-item { white-space: normal; min-width: 300px; }
.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: 10px; }
}
@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: 45px;
  width: 100%;
}

.sticky + .content {
  padding-top: 45px;
}

/* ==========================================================================
Preloader
========================================================================== */
.site-preloader-area {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 9999;
	background-color: #fff;
}

.site-preloader-area .site-preloader {
	top: 20%;
	left: 0%;
	width:  100%;
	position: absolute;
}

/* ==========================================================================
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; }

.profile {
	display: inline-block;
	width: 250px;
	aspect-ratio : 1 / 1;
	border-radius: 50%;
	max-width: 100%;

	background-repeat: no-repeat;
	background-position: center center;
	background-size: cover;
}

.sticky-top { top: 120px; }
@media screen and (max-width: 992px) {
	.sticky-top { top: 60px; }
}