/*** CSS STYLES ***/

html, body, div, span, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, 
a, em, img, small, strike, strong, sub, sup, b, u, i, center,
dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, tr, th, td,
article, aside, details, embed, figure, figcaption, footer, header,  
menu, nav, section, summary, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
}

article, aside, details, figcaption, figure, 
footer, header, menu, nav, section {
	display: block;
}

body {
	line-height: 1.3;
	font-family: 'Roboto', sans-serif;
	font-size: 1.1em;
	background-color: #3e438f;
}

ol, ul {
	list-style: none;
	margin-bottom: 40px;
}

blockquote, q {
	quotes: none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}

table {
	border-collapse: collapse;
	border-spacing: 0;
}

p {
	margin-bottom: 1em;
}

a:link, a:visited {
	color: #a7a9cc;
}

a:hover {
	color: #dddbc7;
}

a:active {
	color: #c06015;
}

header {
	background-image: url(../img/bkgdimg.gif);
}

.logo {
	font-family: 'Big Shoulders Text', cursive;
	font-size: 6em;
	color: #dddbc7;
	margin-left: 30px;
	margin-bottom: -54px;
}

.logo img {
	height: 200px;
}

.kb-mark {
	display: none;
	text-align: center;
	margin: 0 auto;
	padding: 64px 10px 10px;
}

.kb-mark img {
	height: 120px;
}

nav {
	display: block;
	background-color: #4e5399;
	font-family: 'Ubuntu Condensed', sans-serif;
	text-align: center;
	line-height: 1.2;
}

nav ul {
	padding: 10px 0;
	margin-bottom: 0 !important;
}

nav li {
	display: inline;
	font-size: 1.3em;
	padding: 10px 16px;
}

nav a:before {
	-webkit-transition: 1s;
	transition: 1s;
}

nav a:link, nav a:visited {
	text-decoration: none;
	color: #191b39;
}

nav a:hover, nav li:hover {
	color: white;
	background-color: #3e438f;
}

.menu-bars {
	display: none;
}

main {
	min-height: 650px;
	background-image: url(../img/StageBkgdClr.jpg);
	background-size: 100% auto;
	background-repeat: no-repeat;
}

main .content-container {
	padding: 40px 250px;
}

h1 {
	font-size: 3em;
	color: #dddbc7;
	font-family: 'Big Shoulders Stencil Display', cursive;
	font-weight: bold;
	text-transform: uppercase;
	margin-bottom: 40px;
}

h2 {
	font-size: 1.8em;
	color: #c06015;
	font-family: 'Big Shoulders Stencil Display', cursive;
	font-weight: bold;
	margin-bottom: 20px;
}

table {
	width: 100%;
}

th {
	font-weight: bold;
	text-align: left;
}

tr {
	border-bottom: solid 1px black;
}

td {
	height: 52px;
	line-height: 1.8em;
}

td, th {
	padding: 6px 10px;
}

.red {
	color: #ba0707;
}

.cream {
	color: #dddbc7;
}

.light-blue {
	color: #8387b8;
}

.italic {
	font-style: italic;
}

.bullet-list ul {
	list-style-type: disc;
	margin-left: 20px;
}

.hero-image img, .hero-image-mobile img {
	width: 100%;
}

.hero-image-mobile {
	display: none;
}

.news-article {
	border-bottom: dotted 1px black;
	padding-bottom: 10px;
	margin-bottom: 20px; 
}

.news-date {
	color: #a7a9cc;
	font-style: italic;
	font-size: 1em
}

h2.news-hdr {
	margin-bottom: 10px;
}

.news-story {
	
}

.news-photo {
	display: inline-block;
	margin-bottom: 10px;
}

.news-photo figure {
	display: inline-block;
	border: solid 2px #4e5399;
}

.news-photo img {
	width: 200px; 
}

.bio-photo {
	float: left;
	margin: 0 40px 20px 0;
}

.bio-photo img {
	height: 400px;
}

.bio-photo figure {
	display: inline-block;
	border: solid 2px #4e5399;
}

.show-date {
	width: 125px;
}

.show-location {
	width: 175px;
}

.show-time {
	width: 125px;
}

.tickets {
	width: 150px;
}

.show-info {
	width: 40px;
}

.shows ul {
	border-bottom: solid 1px black;
	margin: 0;
}

.shows ul li:nth-child(1) {
	color: #8387b8;
}

.shows ul li:nth-child(3), .shows ul li:nth-child(5) {
	color: #dddbc7;
}

.shows ul li:nth-child(7) a:link, .shows ul li:nth-child(7) a:visited {
	color: #191b39;
	font-size: 1.5em;
}

.shows ul:nth-child(1) li {
	font-weight: bold;
	color: black !important;
}

.shows li {
	display: inline-block;
	vertical-align: text-top;
	padding: 14px 10px 14px 0;
}

.shows li:nth-child(6) div {
	width: 100px;
	text-transform: uppercase;
	text-align: center;
	padding: 6px 6px;
	border: solid 2px #c06015;
}

.shows li:nth-child(6) a:link, .shows li:nth-child(6) a:visited {
	text-decoration: none;
	color: #c06015;
}

.shows li:nth-child(6) div:hover {
	background-color: #c06015;
	color: #3e438f;
}

.shows li:nth-child(1) {
	width: 8%;
}

.shows li:nth-child(2) {
	width: 25%;
}

.shows li:nth-child(3) {
	width: 20%;
}

.shows li:nth-child(4) {
	width: 15%;
}

.shows li:nth-child(5) {
	width: 7%;
}

.shows li:nth-child(6) {
	width: 9%;
}

.shows li:nth-child(7) {
	width: 2%;
	padding-right: 0;
}

.dates-button a:link, .dates-button a:visited {
	color: #8387b8;
	border: solid 2px #8387b8;
	background-color: #262961;
	font-size: 1em;
	text-align: center;
	padding: 5px 20px;
}

.dates-button a:hover {
	color: #262961;
	background-color: #8387b8;
}

.playlist {
	width: 800px;
	border: solid 2px #4e5399;
	margin: 0 auto;
}

.playlist iframe {
	width: 800px;
	height: 450px;
}

.video iframe {
	width: 800px;
	height: 450px;
}

.video {
	text-align: center;
	margin-bottom: 40px;
}

.video figure {
	display: inline-block;
	border: solid 2px #4e5399;
	background-color: #4e5399;
}

.video figcaption {
	color: #dddbc7;
	padding: 4px 10px;
	margin: 0 auto;
}

.gallery img {
	height: 300px;
}

.gallery {
	margin: 0 auto;
}

.photo-container {
	display: -webkit-flex;
	display: flex;
	margin-bottom: 20px;
	text-align: center;
}

.photo-container figure {
	margin-right: 20px;
	border: solid 2px #4e5399;
}

.store embed {
	display: inline-block;
	height: 700px;
	width: 700px;
	border: solid 2px #4e5399;
}

.contact-controls {
	text-align: center;
}

form.contact-form {
	width: 801px;
	border: solid 2px #4e5399;
	background-color: #262961;
	color: #8387b8;
	text-align: left;
	padding: 40px;
	margin: 0 auto;
}

.form-label {
	font-weight: bold;
	margin-bottom: 4px;
}

.form-field input[type=text], .form-field input[type=password], .form-field textarea {
	width: 100%;
	border-radius: 4px;
	border: solid 1px #8387b8;
	font-size: 1em;
	background-color: #8387b8;
	padding: 4px 10px;
	margin-bottom: 20px;
	font-family: Arial, Helvetica, sans-serif;
}

.form-field .date-field, .form-field .time-field, .form-field .select {
	border-radius: 4px;
	border: solid 1px #8387b8;
	font-size: 1em;
	background-color: #8387b8;
	padding: 4px 10px;
	margin-bottom: 20px;
	font-family: Arial, Helvetica, sans-serif;
}

.form-field textarea {
	height: 8em;
}

.form-button input[type=submit] {
	color: #8387b8;
	border: solid 2px #8387b8;
	background-color: #262961;
	font-size: 1em;
	text-transform: uppercase;
	text-align: center;
	padding: 5px 20px;
}

.form-button input[type=submit]:hover {
	color: #262961;
	background-color: #8387b8;
}

.admin-mgmt li {
	font-size: 1.8em;
	color: #c06015;
	font-family: 'Big Shoulders Stencil Display', cursive;
	font-weight: bold;
}

.admin-mgmt li {
	font-weight: bold;
}

.admin-mgmt ul {
	margin-bottom: 10px;
}

.admin-mgmt ul li {
	font-family: 'Roboto', sans-serif;
	font-size: .6em;
	font-weight: normal;
	color: black;
	list-style-type: disc;
	margin-left: 20px;
}

footer {
	background-color: #191b39;
	color: #4e5399;
	text-align: center;
	padding: 20px;
	border-top: solid 4px #4e5399;
}

footer a:link, footer a:visited {
	text-decoration: none;
	color: #4e5399;
}

footer a:hover {
	color: #8387b8;
}

footer a:active {
	color: #a7a9cc;
}

footer .contact {
	margin-top: 10px;
}

footer .login {
	font-size: .7em;
}

header .logout a:link, header .logout a:visited {
	color: white;
	font-size: 1em;
	font-family: Arial, Helvetica, sans-serif;
}

.social {
	font-size: 2em;
	margin-bottom: 20px;
}

.social a {
	color: #4e5399;
	margin-right: 20px;
}

.social-links li {
	display: inline-block;
	margin-right: 20px;
}

.social-links a:link, .social-links a:visited {
	font-size: 4em;
	color: #191b39;
	text-decoration: none;
}

.social-links a:hover {
	color: #a7a9cc;
}

/*** BEGIN MEDIA QUERIES ***/

@media only screen and (max-width: 1729px) {
	.shows li:nth-child(2) {
		width: 20%;
	}

	.shows li:nth-child(4) {
		width: 15%;
	}
}

@media only screen and (max-width: 1200px) {
	.test-box {
		background-color: purple;
	}
	.kb-mark {
		display: none;
	}
	nav {
		display: block;
	}
	main .content-container {
		padding: 40px 50px;
	}
	.menu-bars {
		display: none;
	}
}

@media only screen and (max-width: 1024px) {
	.logo img {
		display: none;
	}
	.kb-mark	{
		display: block;
		margin: 0 auto;
	}
	.menu-bars {
		display: inline;
	}
	nav ul {
		display: none;
	}
	nav li {
		display: block;
		/*width: 100%;*/
		padding: 10px 0 10px 16px;
	}
	nav {
		text-align: left;
	}
	.menu-links a {
		display: inline-block;
	}
	.playlist  {
		width: 550px;
	}
	.playlist iframe {
		width: 550px;
		height: 309px;
	}
	.video iframe {
		width: 550px;
		height: 309px;
	}
	form.contact-form {
		width: 550px;
	}
	.contact-controls img {
		width: 632px;
	}
}

@media only screen and (max-width: 768px) {
	.test-box {
		background-color: orange;
	}
	main {
		min-height: 0;
	}
	main .content-container {
		padding: 40px 20px;
	}
	.hero-image {
		display: none;
	}
	.hero-image-mobile {
		display: inline;
	}
	.bio-photo {
		float: none;
	}
	ul.shows-hdr {
		display: none;
	}
	.shows li {
		display: block;
		width: 100%;
		padding: 4px 0;
		margin-right: 0;
	}
	.shows li:nth-child(1), .shows li:nth-child(2), .shows li:nth-child(3), .shows li:nth-child(4), .shows li:nth-child(5), .shows li:nth-child(6), .shows li:nth-child(7) {
		width: 100%;
	}
	.playlist {
		width: 438px;
	}
	.playlist iframe {
		width: 438px;
		height: 246px;
	}
	.video iframe {
		width: 438px;
		height: 246px;
	}
	.store embed {
		width: 438px;
	}
	form.contact-form {
		width: 438px;
	}
	.contact-controls img {
		width: 520px;
	}
}

@media only screen and (max-width: 480px) {
	.playlist {
		width: 333px;
	}
	.playlist iframe {
		width: 333px;
		height: 214px;
	}
	.video iframe {
		width: 333px;
		height: 187px;
	}
	.photo-container {
		display: block;
	}
	.gallery img {
		width: 100%;
		height: auto;
	}
	.gallery figure {
		margin-bottom: 20px;
	}
	.store embed {
		width: 331px;
	}
	form.contact-form {
		width: 250px;
	}
	.contact-controls img {
		width: 333px;
	}
}