/*
	(c)2012 - visuallizard.com
	
	Mobile styles using Media Queries
*/


/* !Media Queries ============================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 1024px) {
		.container,
		#content .container,
		#footer .container { width: 100%; padding: 30px; }
		#search-block { margin: -115px 0 0 0; }
		#search-block .container { padding: 45px 0 15px 0; }
		#search-block a#search-close { top: 10px; right: 10px; }
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 768px) {
		.container,
		#content .container,
		#footer .container { padding: 20px; }
		#search-block form div.input.text input[type="text"],
		#content form.search-form div.input.text input[type="text"] {	font-size: 36px; }
		#responsive-nav {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			background: #000;
			padding: 0;
			margin: 0;
		}
		#responsive-nav > a {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			padding: 20px 0 20px 35px;
			margin: 0;
			font-size: 16px;
			font-weight: 600;
			line-height: 16px;
			text-transform: uppercase;
			text-decoration: none;
			background: #ffd300;
			color: #000;
		}
		#responsive-nav > a:before {
			content: "";
			display: block;
			position: absolute;
			top: 20px;
			left: 10px;
			width: 20px;
			height: 2px;
			padding: 0;
			margin: 0;
			border-top: 6px double #000;
			border-bottom: 6px double #000;
		}
		#responsive-nav ul.nav_1 {
			display: none;
			position: relative;
			float: left;
			width: 100%;
			padding: 0;
			margin: 0;
			list-style: none;
			font-size: 16px;
			font-weight: 600;
			text-transform: uppercase;
		}
		#responsive-nav ul.nav_1.active { display: block; }
		#responsive-nav ul.nav_1 li {
			display: block;
			position: relative;
			float: left;
			width: 100%;
			padding: 0;
			margin: 0;
			border-bottom: 1px dotted #ffd300;
		}
		#responsive-nav ul.nav_1 li:last-child {
			border-bottom: none;
		}
		#responsive-nav ul.nav_1 li a {
			display: block;
			position: relative;
			width: 100%;
			padding: 2% 3%;
			margin: 0;
			line-height: 16px;
			text-decoration: none;
			color: #ffd300;
		}
		#responsive-nav ul.nav_1 li a:hover { background: #ffd300; color: #000; }
		#responsive-nav div.dates {
				display: block;
				position: relative;
				clear: both;
				float: left;
				width: 100%;
				padding: 1em 0;
				margin: 0;
				font-size: 18px;
				font-weight: 600;
				text-align: center;
				background: #eb9321;
				color: #fff;
			}
		#header { border: none; }
		#header .container { padding-top: 30px; background-position: 180px 40px; background-size: 75%; }
		#header h1 .logo { position: relative; width: 100%; background-position: 25px center; }
		#header #nav { display: none; position: relative; width: 100%; }
		#header ul.social-media { margin: 0 0 10px 0; }
		#feature {  }
		#feature .container { width: 100%; min-height: 300px; padding: 0; }
		#feature .container #feature-performance { position: relative; width: 100%; height: auto; padding: 5%; }
		#feature .container #feature-performance h2 { margin: 0 0 10px 0; }
		#feature .container img#feature-performance-img { position: relative; max-width: 100%; }
		#promotion .container { width: 100%; padding: 0; }
		#promotion ul { width: 100%; }
		#promotion ul li { width: 50%; border-bottom: 1px solid #ccc; }
		#promotion form.search-form { float: left; width: 100%; }
		#latest-news .news-article,
		#latest-news .news-article:nth-of-type(2n+1) { width: 100%; margin: 0 0 1.5em 0; }
		#latest-news .news-article h3 { font-size: 16px; }
		#latest-news a#more-news,
		#latest-news a#schedule-link { width: 100%; }
		div.news-list-item div.article-copy { float: none; width: 100%; margin-bottom: 2rem; }
		div.news-list-item ul.share-list { clear: none; width: auto; }
		#content.home .container h2 { line-height: 1.2; }
		ul#alpha-list { flex-wrap: wrap; }
		ul#alpha-list li,
		ul#alpha-list li:first-of-type { flex-grow: 0;  margin: 0 2px 2px 0; min-width: 1.5em; }
		div.events-block div.event { width: 100%; min-width: 100%; margin: 0 0 2% 0; }
		.calendar .day { width: 100%; margin: 0 0 2% 0; }
		.calendar .day h3 { padding: 3% 0; margin: 0; font-size: 34px; text-align: center; background: #d9d9d9; }
		div.performer, div.performer.first { width: 100%; padding: 1.5em 0; margin: 0; border-top: 1px dotted #000; }
		div.performer a.catchact { top: 2em; }
		div.performer.profile .performer-img { float: left; width: 100%; height: auto; margin: 0 0 3% 0; background: none; }
		div.performer.profile .performer-img .img_right { margin: 0 0 1em 0; }
		div.performer.profile iframe { max-width: 100%; }
		#facebook-comment-block { display: none; }
		#footer { min-height: 20px; }
		#footer .container > * { display: none; }
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 670px) {
		
		#search-block form div.input.text,
		#content form.search-form div.input.text { width: 65%; }
		#search-block form div.input.text input[type="text"],
		#content form.search-form div.input.text input[type="text"] {	font-size: 24px; }
		#search-block form div.input.submit,
		#content form.search-form div.input.submit { width: 35%; }
		#search-block form div.input.submit input[type="submit"],
		#content form.search-form div.input.submit input[type="submit"] { font-size: 24px; }
		div#mc_embed_signup form { margin: 2em 0 !important; }

		#header .container { padding-top: 30px; background: none; }
		#nav { display: none; }
		
		div.performer.profile ul.performer-events { width: 100%; margin: 0 0 15px 0; }
		div.performer.profile ul.performer-events:before { position: relative; top: auto; margin: 0 0 15px 0; }
		div.performer.profile ul.performer-events li a { line-height: 18px; }
	}