@media screen {

	body {
		margin: 0;
		padding: 0;
		background-color: #fff;
		font-family: 'Lato', sans-serif;
		font-size: 16px;
		line-height: 22px;
		font-weight: 300; }

	#logo {
		position: absolute;
		top: 0;
		left: 50%;
		margin-left: -489px;
		width: 225px;
		height: 229px;
		z-index: 20; }

		#logo a {
			display: block;
			width: 225px;
			height: 229px; }

			#logo a {
				background: url(../layout/logo.png); }

				#logo a span {
					display: none; }


	#banner {
		position: relative;
		background: url(../layout/banner.gif) no-repeat center top;
		width: 100%;
		height: 107px; }

	#mobile-menu {
		display: none; }

	#mobile-bar {
		display: none; }

	#content-bar {
		position: relative;
		width: 100%;
		background: #f1f1f1 url(../layout/menu-back.gif) repeat-x left bottom;
		background-color: #f1f1f1; }

		#content {
			position: relative;
			margin: 0 auto;
			padding: 0;
			width: 980px; }

			#content h1 {
				font-family: 'Roboto Slab', serif;
				margin: 0;
				padding: 36px 480px 0 178px;
				font-size: 18px;
				font-weight: 700;
				line-height: 23px; }

			#content p {
				font-family: 'Lato', serif;
				margin: 0;
				padding: 4px 480px 90px 178px;
				font-size: 16px;
				font-weight: 300;
				line-height: 22px; }

			#photo {
				position: absolute;
				bottom: 0;
				right: 0;
				width: 470px;
				z-index: 10px; }

				.photo-home { height: 600px; background: url(../layout/photo-home.png) no-repeat left bottom; }
				.photo-about { height: 600px; background: url(../layout/photo-about.png) no-repeat left bottom; }
				.photo-shows { height: 600px; background: url(../layout/photo-shows.png) no-repeat left bottom; }
				.photo-cissy { height: 600px; background: url(../layout/photo-cissy.png) no-repeat left bottom; }
				.photo-man { height: 600px; background: url(../layout/photo-man.png) no-repeat left bottom; }
				.photo-photos { height: 600px; background: url(../layout/photo-photos.png) no-repeat left bottom; }
				.photo-videos { height: 600px; background: url(../layout/photo-videos.png) no-repeat left bottom; }
				.photo-contact { height: 600px; background: url(../layout/photo-contact.png) no-repeat left bottom; }

			#social {
				position: absolute;
				width: 32px;
				height: 120px;
				margin: 0;
				padding: 0;
				left: 74px;
				top: 122px; }

				#social ul {
					margin: 0;
					padding: 0;
					list-style: none; }

					#social ul li {
						margin: 0 0 10px 0;
						padding: 0; }

						#social ul li a,
						#social ul li a:active,
						#social ul li a:visited {
							display: block;
							width: 32px;
							height: 32px;
							text-decoration: none; }

							#social ul li#facebook		a { background: url(../layout/social-facebook.png); }
							#social ul li#instagram		a { background: url(../layout/social-instagram.png); }
							#social ul li#youtube		a { background: url(../layout/social-youtube.png); }

							#social ul li a:hover {
								display: block;
								text-decoration: none; }

							#social ul li a span {
								display: none; }

			#nav-bar {
				position: absolute;
				bottom: 0;
				left: 0;
				width: 100%;
				height: 60px;
				background-color: rgba(0, 0, 0, 0.75);
				z-index: 20; }

				#nav {
					position: relative;
					width: 960px;
					margin: 0 auto; }

					#nav ul {
						margin: 0;
						padding: 14px 0 0 0;
						text-align: center;
						list-style: none; }

						#nav ul li {
							float: none;
							display: inline-block;
							font-family: 'Roboto Slab', serif;
							font-size: 18px;
							font-weight: 700;
							line-height: 22px;
							margin: 0 12px 0 0;
							padding: 0; }

							#nav ul li a,
							#nav ul li a:active,
							#nav ul li a:visited {
								display: block;
								margin: 0;
								padding: 4px 14px 6px 14px;
								text-decoration: none;
								color: #fff; }

								#nav ul li.on a,
								#nav ul li.on a:active,
								#nav ul li.on a:visited {
									color: #16afe5; }

								#nav ul li a:hover {
									display: block;
									color: #fff;
									background-color: #000;
									border-radius: 10px;
									text-decoration: none; }

	#feature-bar {
		width: 100%;
		margin: 0;
		padding: 30px 0;
		border-top: 2px solid #fff;
		background-color: #16afe5; }

	#sub-feature-bar {
		width: 100%;
		margin: 0;
		padding: 30px 0;
		border-top: 2px solid #fff;
		background-color: #fff; }

		#feature {
			position: relative;
			width: 900px;
			margin: 0 auto; }

			#feature h2 {
				margin: 0;
				padding: 0;
				font-family: 'Roboto Slab', serif;
				font-size: 24px;
				font-weight: 100;
				line-height: 28px;
				text-align: center;
				text-transform: uppercase;
				color: #000; }

			#feature h3 {
				margin: 0;
				padding: 30px 0 5px 0;
				font-family: 'Lato', serif;
				font-size: 24px;
				font-weight: 300;
				line-height: 28px;
				text-align: left;
				color: #000; }

			#feature h4 {
				margin: 0;
				padding: 20px 0 0 0;
				text-align: center;
				font-size: 18px;
				font-weight: 900; }

			#feature h5 {
				margin: 0;
				padding: 5px 0 10px 0;
				font-size: 14px;
				font-weight: 300;
				text-align: center; }

				#feature h5 span {
					padding-left: 6px;
					padding-right: 6px; }

			#feature p {
				font-family: 'Lato', serif;
				margin: 0;
				padding: 10px 0 20px 0;
				font-size: 15px;
				font-weight: 300;
				line-height: 20px;
				text-align: left;
				color: #000; }

			#feature a {
				color: #fff;
				font-weight: 700;
				text-decoration: none; }

				#feature a:hover {
					text-decoration: underline; }

				#sub-feature-bar #feature a {
					color: #ec2228;
					font-weight: 700;
					text-decoration: none; }

					#sub-feature-bar #feature a:hover {
						text-decoration: underline; }

			.feature_half {
				float: left;
				width: 430px;
				margin: 0;
				padding: 20px 10px 0 10px; }

				.feature_half h3 {
					padding: 10px 0 0 0 !important; }

	#footer-bar {
		position: relative;
		width: 100%;
		background-color: #f1f1f1; }

		#footer {
			position: relative;
			width: 880px;
			margin: 0 auto; }

			#footer p {
				margin: 0;
				padding: 40px 0 20px 0;
				font-size: 14px;
				line-height: 20px;
				text-align: center; }

				#footer p span {
					display: none; }

			#footer p:nth-child(2) {
				padding: 20px 0 80px 0; }

	.youtube_100_percent {
		position: relative;
		margin: 0 auto;
		width: 100%; }

	.youtube_90_percent {
		position: relative;
		margin: 0 auto;
		width: 90%; }

		.youtube_video {
			position: relative;
			padding-bottom: 56.25%;
			padding-top: 0;
			height: 0;
			overflow: hidden; }

			.youtube_video iframe {
				position: absolute;
				top:0;
				left: 0;
				width: 100%;
				height: 100%; }

	a {
		color: #ec2228;
		font-weight: 700;
		text-decoration: none; }

		a:hover {
			text-decoration: underline; }

	.source {
		display: block;
		padding-top: 5px;
		font-weight: bold; }

}

@media screen and (max-width: 724px) {

	#logo {
		margin-left: -140px;
		width: 140px;
		height: 142px;}

		#logo a {
			width: 140px;
			height: 142px; }

			#logo a {
				background-size: 140px 142px; }

	#banner {
		margin: 0 auto;
		background: url(../layout/mobile-banner.png) no-repeat center top;
		background-size: 405px 39px;
		width: 405px;
		height: 39px; }

	#mobile-menu {
		display: block;
		position: relative;
		background-color: #062c39;
		border-top: 2px solid #fff;
		margin: 0 auto;
		width: 405px;
		height: 53px; }

		#mobile-menu a {
			display: inline-block;
			background: url(../layout/mobile-hamburger.png) no-repeat;
			background-size: 41px 32px;
			margin-top: 10px;
			margin-left: 327px;
			width: 41px;
			height: 32px; }

			#mobile-menu a span {
				display: none; }

	#mobile-bar {
		display: block;
		position: relative;
		margin: 0 auto;
		padding: 0;
		width: 405px;
		background-color: #fff; }

		#mobile {
			position: relative;
			margin: 0 auto;
			padding: 0;
			width: 405px;
			background-color: #f1f1f1; }

			ul#social-mobile {
				margin: 0;
				padding: 15px 0 23px 135px;
				list-style: none; }

				ul#social-mobile li {
					float: left;
					display: inline;
					margin: 0 10px;
					padding: 0; }

					ul#social-mobile li a,
					ul#social-mobile li a:active,
					ul#social-mobile li a:visited {
						display: block;
						width: 32px;
						height: 32px;
						text-decoration: none; }

						ul#social-mobile li#facebook	a { background: url(../layout/social-facebook.png) no-repeat; }
						ul#social-mobile li#instagram	a { background: url(../layout/social-instagram.png) no-repeat; }
						ul#social-mobile li#youtube		a { background: url(../layout/social-youtube.png) no-repeat; }

						ul#social-mobile li a:hover {
							display: block;
							text-decoration: none; }

						ul#social-mobile li a span {
							display: none; }

			ul#nav-mobile {
				margin: 0;
				padding: 0;
				list-style: none; }

				ul#nav-mobile li {
					display: block;
					font-size: 24px;
					font-weight: 700;
					line-height: 27px;
					margin: 0;
					padding: 0;
					border-top: 1px solid #f16b6f; }

					ul#nav-mobile li a,
					ul#nav-mobile li a:active,
					ul#nav-mobile li a:visited {
						display: block;
						margin: 0;
						padding: 13px 41px;
						text-decoration: none;
						background-color: #ec2228;
						color: #fff; }

						ul#nav-mobile li a:hover {
							display: block;
							color: #fff;
							background-color: #bd161b;
							text-decoration: none; }

	#content-bar {
		width: 405px;
		height: auto;
		margin: 0 auto;
		background-color: #fff;
		background: -moz-linear-gradient(top, rgba(215,215,215,1) 0%, rgba(215,215,215,0) 100%); /* FF3.6-15 */
		background: -webkit-linear-gradient(top, rgba(215,215,215,1) 0%,rgba(215,215,215,0) 100%); /* Chrome10-25,Safari5.1-6 */
		background: linear-gradient(to bottom, rgba(215,215,215,1) 0%,rgba(215,215,215,0) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
		filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#d7d7d7', endColorstr='#00d7d7d7',GradientType=0 ); /* IE6-9 */
		background-size: auto 38px;
		background-repeat: repeat-x; }

		#content {
			width: 405px; }

			#content h1 {
				padding: 18px 38px 0 38px;
				font-size: 24px;
				line-height: 29px;
				text-align: right; }

			#content p {
				padding: 6px 38px 15px 38px;
				font-size: 16px;
				line-height: 22px;
				text-align: right; }

			#photo {
				position: relative;
				margin: 0 auto;
				top: auto;
				right: auto;
				width: 285px; }

				.photo-home { height: 299px; background-size: 285px 299px; }
				.photo-about { height: 272px; background-size: 280px 272px; }
				.photo-shows { height: 254px; background-size: 285px 254px; }
				.photo-cissy { height: 338px; background-size: 285px 338px; }
				.photo-man { height: 279px; background-size: 285px 279px; }
				.photo-photos { height: 212px; background-size: 285px 212px; }
				.photo-videos { height: 264px; background-size: 285px 264px; }
				.photo-contact { height: 277px; background-size: 285px 277px; }

			#social {
				display: none; }

			#nav-bar {
				display: none; }

	#feature-bar {
		margin: 0 auto;
		border-top: none;
		width: 405px; }

	#sub-feature-bar {
		margin: 0 auto;
		border-top: none;
		width: 405px; }

		#feature {
			width: 90%; }

			#feature h2 {
				padding: 0; }

			#feature p {
				padding: 10px 0 20px 0; }

		.feature_half {
			width: 100%;
			padding: 20px 0 0 0; }

			.feature_half h2 {
				padding: 0; }

			.feature_half p {
				padding: 10px 0 20px 0; }

	#footer-bar {
		margin: 0 auto;
		width: 405px; }

		#footer {
			width: 325px; }

				#footer p span {
					display: inline; }

}