body {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#1e5799+0,2989d8+0,a80500+0,d68246+69,ccce44+100 */
	background: #1e5799; /* Old browsers */
	background: -moz-linear-gradient(top, #1e5799 0%, #2989d8 0%, #a80500 0%, #d68246 69%, #ccce44 100%); /* FF3.6-15 */
	background: -webkit-linear-gradient(top, #1e5799 0%,#2989d8 0%,#a80500 0%,#d68246 69%,#ccce44 100%); /* Chrome10-25,Safari5.1-6 */
	background: linear-gradient(to bottom, #1e5799 0%,#2989d8 0%,#a80500 0%,#d68246 69%,#ccce44 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1e5799', endColorstr='#ccce44',GradientType=0 ); /* IE6-9 */

	background-attachment: fixed;
}

html, body {
	height: 100%;
}

button.go::after, a.go::after {
	content: ' »';
}

div.rating {
	white-space: nowrap;
	letter-spacing: -4px;
}

div.rating a {
	text-decoration: none;
}

div.rating a.reviews {
	letter-spacing: initial;
	margin-left: 8px;
}

div#review textarea {
	width: 100%;
	height: 100px;
}

div#review p.stars span.dancer {
	width: 21px;
	height: 27px;
	background-size: 21px 27px;
}

span.star {
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url( '/images/star.png' );
	background-repeat: no-repeat;
	background-size: 18px 18px;
}

span.star.fraction {
	overflow: hidden;
}

span.star.off {
	opacity: 0.2; /* color: #ccccea; */
}

p.stars.error {
	color: red;
	font-weight: bold;
}

span.dancer {
	display: inline-block;
	width: 14px;
	height: 18px;
	background-image: url( '/images/dancer.png' );
	background-repeat: no-repeat;
	background-size: 14px 18px;
	vertical-align: top;
}

span.dancer.fraction {
	overflow: hidden;
}

span.dancer.off {
	opacity: 0.3; /* color: #ccccea; */
}

table.other-reviews div.date {
	white-space: nowrap;
	font-weight: bold;
}

table.other-reviews div.ago {
	font-size: 1.2rem;
	white-space: nowrap;
}

table.other-reviews div.stars {
	white-space: nowrap;
}

table.other-reviews div.username {
	white-space: nowrap;
	font-style: italic;
}

table.other-reviews div.review:before,
table.other-reviews div.review:after {
	position: relative;
	font-size: 3rem;
	font-weight: bold;
	color: #999999;
	line-height: 20px;
	top: 8px;
}

table.other-reviews div.review:before {
	content: '“';
	left: 2px;
}

table.other-reviews div.review:after {
	content: '”';
	left: 1px;
}

.loader {
	border: 8px solid #f3f3f3; /* Light grey */
	border-top: 8px solid #3498db; /* Blue */
	border-radius: 50%;
	width: 60px;
	height: 60px;
	animation: spin 2s linear infinite;
	margin: auto;
}

@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

body > div.container {
	background-color: white;
	padding-top: 15px;
	margin-top: 35px;
	margin-bottom: 10px;
	box-shadow: 0px 5px 5px 5px rgba( 0, 0, 0, 0.3 );
	border-radius: 5px;
	padding-left: 0px;
	padding-right: 0px;
}

/* All top-level divs within the container EXCEPT the home one: */
body > div.container > div:not(:first-child), footer {
	margin: 0px 15px 0px 15px;
	padding-bottom: 40px;
}

a.anchor {
	padding-top: 60px;
}

div.map {
	width: 100%;
	height: 600px;
}

div.map iframe {
	width: 100%;
	height: 100%;
}

a {
	text-decoration: underline;
}

a.btn {
	text-decoration: none;
}

.w100, .w100 input {
	width: 100% !important;
}

p.description {
	opacity: 0.8;
	font-size: 1.3rem;
	clear: both;
}

/*
td.desc {
	font-size: 1.3rem;
	opacity: 0.8;
}
*/

h1 {
	color: #a80500;
	font-size: 3rem;
}

h2 {
	color: #a80500;
	font-size: 3rem;
	text-align: center;
}

h3 {
	color: #a80500;
	font-size: 2rem;
}

div.contact div.text-center {
	padding: 20px;
}

footer {
	font-size: 1rem;
	opacity: 0.5;
}

.badge-new {
  background-color: #ff0000;
}

.badge-new::before {
	content: 'New!' !important;
	text-transform: uppercase;
	font-size: 1rem;
}

.badge:hover {
  color: #ffffff;
  text-decoration: none;
  cursor: pointer;
}
.badge-wcs {
  background-color: #b94a48;
}
.badge-wcs:hover {
  background-color: #953b39;
}
.badge-ecs {
  background-color: #f89406;
}
.badge-ecs:hover {
  background-color: #c67605;
}
.badge-lindy {
  background-color: #468847;
}
.badge-lindy:hover {
  background-color: #356635;
}
.badge-blues {
  background-color: #3a87ad;
}
.badge-blues:hover {
  background-color: #2d6987;
}
.badge-inverse {
  background-color: #333333;
}
.badge-inverse:hover {
  background-color: #1a1a1a;
}

/* CUSTOMIZE THE CAROUSEL
-------------------------------------------------- */

/* Carousel base class */
.carousel {
	width: 100%;
	xheight: 660px;
}
/* Since positioning the image, we need to help out the caption */
.carousel-caption {
	z-index: 10;
}

/* Put the controls above the caption: https://stackoverflow.com/a/41751706/378779 */
/* 9/28/18: Don't do this, because they interfere with the Calendar, etc, buttons when the screen is a bit narrow. */
.carousel-control.left, .carousel-control.right {
	xxx-z-index: 11;
}


/* Declare heights because of positioning of img element */
.carousel .item {
	height: 660px;
	background-color: #777;
}
.carousel-inner > .item > img {
	position: absolute;
	top: 0;
	left: 0;
	min-width: 100%;
	xheight: 660px;
	object-fit: contain;
	opacity: 0.5;
	filter: grayscale(50%);
	xfilter: blur(4px);
}

/* Changes position of caption */
.carousel-caption {
    top: 30%;
    bottom: auto;
}

.main-text
{
    position: absolute;
    top: 25%;
    width: 96.66666666666666%;
    color: #FFF;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.5), 2px 0 5px rgba(0, 0, 0, 0.5);
	/* -2px 0 5px rgba(0, 0, 0, 0.5), 0 -2px 5px rgba(0, 0, 0, 0.5); */
}

.main-text h1 {
	font-size: 4vw;
	line-height: 4vw;
	font-weight: normal;
	color: #ffffcc;
	opacity: 1.0;
}

.main-text h2 {
	font-size: 2vw;
	line-height: 3vw;
	color: #ffffff;
}

.main-text h3 {
	line-height: 1vw;
	font-size: 1.5vw;
	color: #ffffff;
	opacity: 0.8;
}

.main-text p {
	margin-top: 40px;
}

.main-text a {
	text-decoration: none !important;
	text-shadow: none;
}

.main-text a.btn {
	margin-left: 5px;
	margin-right: 5px;
}

.btn-min-block
{
    min-width: 170px;
    line-height: 26px;
}
.btn-clear
{
    color: #FFF;
    background-color: transparent;
    border-color: #FFF;
    margin-right: 15px;
}
.btn-clear:hover
{
    color: #000;
    background-color: #FFF;
}

/* Make the slides fade, not wipe: https://stackoverflow.com/a/39595947 */

.carousel.fade {
     opacity: 1;
}
.carousel.fade .item {
    transition: opacity ease-out 1.7s;
    left: 0;
    opacity: 0; /* hide all slides */
    top: 0;
    position: absolute;
    width: 100%;
    display: block;
}
.carousel.fade .item:first-child {
    top: auto;
    opacity: 1; /* show first slide */
    position: relative;
}
.carousel.fade .item.active {
    opacity: 1;
}

div.entity {
	padding-top: 15px;
	padding-bottom: 5px;
	border-bottom: 1px dotted #cccccc;
}

ul.pager li a {
	text-decoration: none !important;
}

a.badges {
	text-decoration: none !important;
	white-space: nowrap;
}

span.label {
	display: inline-block;
}

span.label > img {
	margin-right: 5px;
}

/* Dim labels for unchecked checkboxes on search modal: */
input[type="checkbox"]:not(:checked) + span.label {
	opacity: 0.6;
}

.modal-body table {
	margin-bottom: 20px;
}

.modal-body table td:nth-child(2) {
	width: 100%;
}

div.address {
	float: left;
	display: inline-block;
	margin-bottom: 10px;
	margin-right: 20px;
}

div.glyph-links {
	text-align: left;
	font-size: 1.2rem;
	line-height: 12px;
}

div.glyph-links a {
	text-decoration: none !important;
}

div.glyph-links div {
	text-align: center;
	min-width: 1px;
	margin-right: 15px;
	padding-bottom: 10px;
	display: inline-block;
}

div.glyph-links div span {
	font-size: 3rem;
	color: #880500;
	opacity: 1.0;
}

div.glyph-links div a[href*="google.com/maps"] span {
	font-size: 3rem;
}

div.glyph-links div a:hover {
	opacity: 0.5;
}

/* Have to do this because Bootstrap doesn't (WTF?) */
.modal-body .img-responsive {
	width: 100%;
}

.modal-body table th, .modal-body table td {
	vertical-align: top;
	padding: 5px;
	text-align: left;
}

div.infowindow div.upcoming-events:before, div.entity div.upcoming-events:before {
	content: 'Upcoming Events';
	font-size: 1.3rem;
	font-weight: bold;
	opacity: 0.7;
	margin-bottom: 15px;
}

div.infowindow div.upcoming-events.band:before, div.entity div.upcoming-events.band:before {
	content: 'Upcoming Performances';
}

div.infowindow div.upcoming-events p, div.entity div.upcoming-events p {
	font-size: 1.2rem; 
	margin-top: 3px;
	margin-bottom: 0;
}

div span.glyphicon.glyphicon-new-window {
	opacity: 0.5;
	font-weight: normal;
}

div.add-to-calendar {
	clear: both;
	display: none; /* Disabled because that API is no longer working */
}

p.full-schedule a {
	font-weight: bold;
	text-decoration: none;
	text-transform: capitalize;
}

.modal-body h1 {
	line-height: 26px;
	margin-bottom: 0px;
	text-align: center;
}

div#search, div#mailinglist {
	text-align: center;
}

div#search p, div#mailinglist p {
	font-weight: bold;
}

div#search input, div#search select, div#search option,
div#mailinglist input, div#mailinglist select, div#mailinglist option {
	font-weight: normal;
}

span.miles-from {
	opacity: 0.7;
	font-style: italic;
}

div#search div.offer, div#mailinglist div.offer {
	/* Centered: */
	display: inline-block;
	margin: auto;
	text-align: left;
	padding: 15px;
	font-size: 1.8rem;
}

div#search h1, div#mailinglist h1 {
	margin-bottom: 20px;
}

.modal-body h2 {
	margin-top: 10px;
	line-height: 22px;
	font-size: 2.5rem;
}

.modal-body p.desc {
	margin: 15px 0px 15px 0px;
	font-size: 1.7rem;
	line-height: 2.3rem;
	text-align: left;
}

div.share {
	text-align: center;
	border: 1px solid #cccccc;
	border-radius: 3px;
	padding: 5px;
	background-color: #eeeeee;
}

div.share:before {
	content: 'Share';
	font-size: 1.3rem;
	opacity: 0.7;
}

div.share div {
	margin: 10px 7px 7px 7px;
}

div.share span {
	display: inline-block;
	width: 30px;
	height: 30px;
	background-repeat: no-repeat;
	background-position: center;
	background-color: black;
	border-radius: 30px;
}

span.fb {
	background-image: url( '/images/fb.png' );
	background-size: auto 80%;
}

span.tw {
	background-image: url( '/images/twitter.png' );
	background-size: auto 66%;
}

span.email {
	background-image: url( '/images/email.png' );
	background-size: auto 50%;
}


div.modal-image {
	position: relative;
	padding-bottom: 20px;
}

div.modal-image div {
	position: absolute;
	top: 15%;
	left: 0;
	width: 100%;
}

div.modal-image div h1, div.modal-image div h2 {
	padding-left: 10px;
	padding-right: 10px;
	font-size: 5.9vw;
	line-height: 6.2vw;
	font-weight: bold;
	color: white;
	text-shadow: 0 2px 5px rgba(0, 0, 0, 0.9), 2px 0 5px rgba(0, 0, 0, 0.9);
	opacity: 0.9;
}

div.modal-image div h2 {
	font-size: 3.0vw;
	line-height: 3.5vw;
	padding-top: 1vw;
}

div.event p.event a {
	color: white;
	text-decoration: none !important;
	border: 1px solid #cccccc;
	border-radius: 5px;
	background-color: #555555;
	font-size: 1.1rem;
	line-height: 1.5rem;
	padding: 3px;
	display: inline-block;
	width: 100%;
}

div.event p.event a span {
	opacity: 0.7;
}

div.event p.event a span:before {
	content: ' | ';
}

div.event p.event a span.nopipe:before {
	content: '';
}

div.event img {
	xborder: 1px solid rgba( 255, 255, 255, 0.5 );
	border-radius: 2px;
}

div.event img.lessons {
	background-color: #d9534f;
}

div.event img.social {
	background-color: #f0ad4e;
}

div.event img.music {
	background-color: #5cb85c;
}

p.event.past {
	opacity: 0.4;
}

div.modal {
	opacity: 1.0 !important;
}

div.modal-dialog div.modal-header {
	background-color: #cccccc;
	border-radius: 5px 5px 0px 0px;
}

div.alert {
	margin-left: 5px;
	margin-right: 5px;
}

div.search-alert a {
	text-decoration: none !important;
}

div.search-alert {
	text-align: center;
}

div.search-alert div {
	margin-top: 15px;
}

/* Remove underlines on contact buttons: */

div.contact a.btn {
	text-decoration: none !important;
}

div.contact h1 {
	font-size: 55px;
	color: rgba( 0, 0, 0, 0.3 );
}

/* Make mobile nav high enough to show all items: */
.navbar-fixed-top .navbar-collapse {
	max-height: 450px;
}

.nav {
	padding-bottom: 10px;
}

/* Tighten up nav item padding: */
.nav li a {
	padding-left: 5px;
	padding-right: 5px;
	padding-bottom: 0px;
}

.navbar-nav > li > .dropdown-menu {
	background-color: black;
}

.dropdown-menu > li > a:focus, .dropdown-menu > li > a:hover {
	background-color: #555555;
}

.kcalendar li.today {
	border: 1px solid #ccc !important;
	box-shadow:
		  0px 0px 10px 5px rgba( 205, 30, 30, 0.6 )
	;
}

.calendar-header {
	margin-top: 240px;
	text-align: center;
	font-size: 20px;
	font-weight: normal !important;
	color: #888888;
}

.calendar nav ul {
	padding-top: 80px important;
	padding-bottom: 10px important;
	margin-bottom: 10px !important;
}

/* Add breathing room between bottom of calendar and lower nav: */
.calendar > nav ul {
	margin-top: 80px !important;
}

.kcalendar ul.days li {
	scrollbar-width: thin;
	scrollbar-color: firebrick lightgrey;
}

.kcalendar ul.days li div.more {
	background-color: firebrick;
	position: relative;
	top: 0px;
	z-index: 2;
	visibility: hidden;
	padding: 2px;
	border-radius: 2px;
	margin-top: 0px;
}

.kcalendar ul.days li div.more span {
	color: white;
	float: right;
}

.kcalendar ul.days li div.more:before {
	content: 'Scroll for more';
	padding: 2px;
	color: white;
}

@media only screen and (max-width: 767px){
	.kcalendar ul.days li div.more {
		display: none;
	}
}


/* Ensure the "x days from now" message on the modals is not too close to the date */
.modal-body table td.when span {
	margin-left: 5px;
}

.nav.navbar-nav a {
    color: white !important;
}

p.permalink {
	text-align: center;
}

.easy-nav a.btn {
	margin-bottom: 20px;
}

.easy-nav a.btn {
	box-shadow: 0px 0px 10px 5px rgba( 0, 0, 0, 0.4 );
}

p.wide-button-nav {
	margin: 20px;
}

p.wide-button-nav {
	margin: 20px;
}

.thumbnail {
	border: none;
}

.resources .thumbnail > a {
	background-color: lightblue;
	display: inline-block;
	width: 126px;
	border-radius: 63px;
}

.thumbnail .caption {
	padding-top: 0px;
}

/*
Align rows: https://stackoverflow.com/a/37441120/378779
*/

.aligned-row {
	display: flex;
	flex-flow: row wrap;
}

.aligned-row::before {
	display: block;
}

/***********************************************************
MOBILE:
***********************************************************/

@media screen and (min-width: 1px) {
	.carousel .item {
		height: 150px;
	}
}

@media screen and (min-width: 320px) {
	.carousel .item {
		height: 220px;
	}
}

@media screen and (min-width: 480px) {
	.carousel .item {
		height: 390px;
	}
}

@media screen and (min-width: 768px) {
	.carousel .item {
		height: 420px;
	}


	div.modal-image div h1 {
		font-size: 4rem;
		line-height: 45px;
	}
	div.modal-image div h2 {
		font-size: 3rem;
		line-height: 12px;
		margin-top: 20px;
	}
}

@media screen and (min-width: 992px) {
	.carousel .item {
		height: 540px;
	}
}

@media screen and (min-width: 1200px) {
	.carousel .item {
		height: 660px;
	}
}

@media screen and (max-width: 800px) {
	div.map {
		margin: 0;
	}

	.main-text h1 {
		font-size: 5vw;
		line-height: 5vw;
	}

	.main-text h2 {
		font-size: 4vw;
		line-height: 4vw;
	}
}

@media screen and (max-width: 768px) {
	body {
		background: none;
		font-size: 2rem;
	}

	body > div.container {
		box-shadow: initial;
		border-radius: initial;
		margin-top: initial;
	}

	div.event p.event a {
		font-size: 1.8rem;
		line-height: 2.2rem;
	}

	p.description {
		font-size: 1.7rem;
	}

	div.infowindow div.upcoming-events:before,
	div.entity div.upcoming-events:before
	div.infowindow div.upcoming-events.band:before,
	div.entity div.upcoming-events.band:before {
		font-size: 1.5rem;
	}

	div.infowindow div.upcoming-events p, div.entity div.upcoming-events p {
		font-size: 1.5rem;
	}

}

@media screen and (max-width: 400px) {
	div.modal-image div {
		top: 15%;
	}

}