@charset "utf-8";
/* CSS Document */

/* Smartphones (portrait and landscape) ----------- */
@media screen 
and (max-width: 767px) {
	body {
		font-size: 100%;
	}
	
	div#masthead, #nav-and-bg nav, .section-content {
		width: 100%;	
	}

	div#masthead {
		margin: 0;
		height: 200px;	
		padding: 0px;
		text-align: left;
	}

		#masthead #main-logo {
			float: none;
			width: calc(100% - 50px);
			height: 100px;
			padding: 25px;
		}

		#masthead #main-logo img {
			width: 270px;
			height: auto;
		}
		
		#masthead #social-links {
			float: none;
			padding: 0 25px 0 0;
			width: calc(100% - 25px);
			min-height: 50px;
			margin-top: 0px;
			background-color: #5d5672;
		}
		
			#masthead #social-links a {
				float: right;
				line-height: 50px;
				margin-left: 20px;
				font-size: 30px;
				height: 50px;
			}

				#masthead #social-links a:first-of-type {
					margin-left: 20px;
				}

				#masthead #social-links a:last-of-type {
					margin-left: 0;
				}

				#masthead #social-links a.phone-only {
					display: inline-block;	
				}

				#masthead #social-links a:hover {
					color: #373542;
				}
		
		#masthead #search-group {
			float: none;
			clear: both;
			height: 35px;
			width: calc(100% - 30px);
			margin-top: 0;
			padding: 15px;
			background-color: #373542;
			display: none;
		}
		
			#masthead #search-group input {
				width: calc(100% - 40px);
				position: absolute;
				top: 15px;
				left: 15px;
			}
			
			#masthead #search-group button {
				top: 15px;
				right: 15px;
			}

	#nav-and-splash, body.home #nav-and-splash {
		height: auto;
	}		

		#nav-and-bg {
			position: relative;	
			min-height: 0px;
			background-color: #373542;
		}
		
		#nav-and-bg nav, nav ul#main-menu {
			line-height: 65px;
		}
		
		#nav-and-splash #splash {
			display: none;
		}

		#nav-and-splash #main-nav {
			display: none;	
		}

		#nav-and-splash .responsiveMenuSelect {
			appearance: none;
			-webkit-appearance: none;
			-moz-appearance: none;
			-webkit-border-radius: 0;
			margin: 11px 15px 15px 15px;
			width: calc(100% - 30px);
			font-size: 1em;
			font-weight: 700;
			font-family: "Source Sans Pro", Helvetica, Arial, sans-serif;
			height: 35px;
			background-color: #5d5672;
			color: #AEAABF;
			border: none;
			padding-left: 10px;
		}

		#nav-and-splash .responsiveMenuSelect::-ms-expand {
			display: none;
		}

		#nav-and-splash .responsiveSelectContainer {
			position: relative;
		}

			#nav-and-splash .responsiveSelectContainer:after { /* drop-down arrow for select box */
				position: absolute;
				font-family: FontAwesome;
				font-size: 2em;
				color: #373542;
				top:0;
				right:25px;
				content: "\f107" !important;
				pointer-events: none;
			}

	.home main aside {
		height: auto;
		line-height: inherit;
		padding: 20px 25px;
	}

	main article {
		height: auto;
		padding: 0;
	}
	
		main article .section-content {
			height: auto;	
		}

		main article .section-copy {
			width: calc(100% - 50px);
			padding: 25px;
			margin: 0;
			height: auto;
		}

			main article .section-copy header {
				margin-bottom: 25px;
			}

		.home main article .section-image {
			float: none;
			width: 100%;
			height: auto;
			min-height:59vw;
		}
		
			main article .band-photo-link {
				height: auto;
			}

				main article .band-photo-link button {
					height: 100%;
					background-color: transparent;
					color: #AEAABF;
					opacity: 0.75;
					bottom: 0;
					left: 0;
					font-size: 4em;
					line-height: 100%;
				}
		
					main article .band-photo-link:hover button {
						background-color: transparent;
						color: #AEAABF;
					}

					main article .band-photo-link:active button {
						background-color: transparent;
						color: #CCC878;
						opacity: 1;
					}

					main article .band-photo-link button .preview-button-text {
						display: none;
					}
		
		main article .button-container {
			margin-top: 25px;
			position: inherit;
		}
			
			main article .button-container button {
				height: 50px;
				width: calc((100% - 15px) / 2);
				margin: 0 15px 0 0;
				line-height: 50px;
				min-width: 100px;
			}
			
				main article .button-container button:hover {
					background-color: #373542;
					color: #CCC878;
				}
				
				main article .button-container button:active {
					background-color: #CCC878;
					color: #373542;
				}

				main article .button-container button:last-of-type {
					float: right;
				}

	body > footer {
		position: inherit;
		height: auto;
		padding: 25px;
	}

		body > footer #address, body > footer #hours {
			display: block;
			float: none;
			width: 100%;
			margin-right: 0;
			height: auto;
			margin-bottom: 25px;
		}

		body > footer nav {
			display: none;
		}
		
		body > footer div#footer-footer {
			position: inherit;
		}
		
		body > footer div#footer-footer p {
			display: block;
		}
		
			body > footer div#footer-footer #copyright {
				float: none;	
			}
	
			body > footer div#footer-footer #designer-credit {
				float: none;
				text-align: left;	
			}

		
}