/*
*
* No Tan Lines
* By Michael Tussey
* May 2013
*
*/

/* Table of Content
==================================================
	#Site Styles
	#Slide Styles
	#Media Queries

/* #Site Styles
================================================== */

	body, html, #content {
		height: 100%;
		color: #000;
		font: 18px/27px "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	
	a {
		text-decoration: none;
	}
	
	/* overall wrapper */
	#content {
		position: relative;
		z-index: 10;
	}
	
	/* acts as a fixed background on both desktop and mobile.
	   lives behind #content and nav */
	#flyer-background {
		position: fixed;
		top: 0;
		left: 0;
		z-index: 2;
		width: 100%;
		height: 100%;
		background-image: url(../images/background-flyer.jpg);
		background-attachment: scroll;
		background-position: 50%;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}
	
	/* desktop-specific styles */
	.desktop { }
	
	/* mobile and generic hidden style. mobile is hidden by default,
	   and revealed using media queries */
	.hidden, .mobile {
		display: none;
	}
	
	
	/********** nav setup **********/
	nav {
		position: absolute;
		z-index: 100;
		width: 100%;	
	}
	
	/* sticky nav, triggered via waypoints */
	nav.stuck {
		position: fixed;
		top: 0;
		opacity: 1;
	}
	
	.nav-links {
		margin: 0 auto;
		width: 560px;
		background: #fff;
		text-align: center;
	}
	
	.nav-links ul, .nav-title ul {
		margin-bottom: 0;
	}
	
	.nav-links ul li, .nav-title ul li {
		display: inline-block;
		margin: 25px 45px 30px 0;
		padding-bottom: 10px;
		border-bottom: 3px solid #fff;
		font-weight: bold;
	}
	
	.nav-links ul li.active {
		border-bottom: 3px solid #353533;
	}
	
	.nav-links ul li:last-child {
		margin-right: 0;
	}
	
	/* title hashtag, located to far left of site */
	nav .nav-title {
		position: absolute;
		top: 0;
		left: 0;
	}
	
	/* title background is yellow by default */
	nav .nav-title.yellow {
		background: #ffc039;
	}
	
	/* hover state is white. background also transitions
	   to white when user hits #lineup via waypoints */
	nav .nav-title:hover, nav .nav-title.white {
		background: #fff;
	}
	
	 .nav-title ul li {
		margin: 25px 45px 30px;
 		border-bottom: 3px solid #353533;
	 }
	
	
	/* the back-to-top arrow on far right. positioned out of view
	   until user gets to #flyer. */
	nav .back-to-top {
		position: absolute;
		top: -174px;
		right: 60px;
	}
	
	/* waypoint pushes arrow into view */
	nav.stuck .back-to-top {
		top: 0;
	}
	
	/* this is the actual back-to-top link */
	.back-to-top a {
		display: block;
		width: 77px;
		height: 174px;
		background: url(../images/icon-arrow-up.png);
		
	}
	
	/********** Footer **********/
	footer {
		width: 100%;
		background-color: #fff;
		color: #1f7587;
		font: bold 14px/1.75em 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	footer .nav-links {
		margin: 70px 0;
		text-align: left;
	}
	
	footer .nav-links a {
		color: #1f7587;
	}
	
	.delimiter {
		font-weight: 400;
	}
	
	footer .nav-links ul, .copyright {
		margin-left: 30px;
	}
	
	footer .nav-links ul li {
		margin: 0;
		padding-bottom: 0;
		text-align: left;
	}
	
	.footer-logos {
		text-align: right;
		line-height: 100px;
	}
	
	.footer-logos img {
		display: inline-block;
		margin: 75px 0 75px 30px;
		vertical-align: middle;
	}
	
	.copyright, .copyright a, .copyright a:visited {
		color: #1f7587;
		text-transform: none;
		font-weight: 400;
		font-size: 13px;
	}
	
	/********** Transitions **********/
	.down-to-flyer, nav .back-to-top, .nav-links ul li.active, #cover-logo, .nav-title {
		-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		-ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
		
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	
	
/* Slide Styles
================================================== */

	/********** Cover Slide **********/
	#cover {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 100%;
		background-color: #ffc039;
		text-align: center;
	}
	
	#cover:before {
	  display: inline-block;
	  margin-right: -0.25em; /* Adjusts for spacing */
	  height: 100%;
	  content: '';
	  vertical-align: middle;
	}
	
	#cover-logo {
		position: relative;
		z-index: 100;
		display: inline-block;
		margin-bottom: 200px;
		width: 212px;
		height: 95px;
		background-image: url(../images/logo-cover.png);
		background-size: 212px 95px;
		vertical-align: middle;
		
		opacity: 0;
	}
	
	/* arrow button at lower right of yeller cover slide */
	.down-to-flyer {
		position: absolute;
		right: 60px;
		bottom: 0;
		opacity: 1;
	}
	
	/* this class hides it by default. we animate and reveal with jquery */
	.down-arrow-reveal {
		bottom: -77px;
	}
	
	.down-to-flyer a {
		display: block;
		width: 77px;
		height: 77px;
		background: url(../images/icon-arrow-down.png);
		
	}
	
	/* we slide it back down, push it back up with a waypoint, so it
	   looks like the back to top arrow kinda turns into the down arrow */
	.down-to-flyer.stuck {
		bottom: -77px;
		opacity: 0;
	}
	
	/********** Flyer Slide **********/
	#flyer {
		position: relative;
		overflow: hidden;
		width: 100%;
		background-image: url(../images/background-pattern.png);
		background-attachment: fixed;
	}
	
	/* the show title image is set as a background */
	h1.show-title {
		overflow: hidden;
		margin: 150px auto 50px;
		width: 940px;
		height: 894px;
		background-image: url(../images/show-title.png);
		background-size: 940px 894px;
		text-indent: -9999px;
	}
	
	/* info blocks contain both the date and address */
	.info {
		float: left;
		margin-bottom: 20px;
		color: #fff;
		font-size: 30px;
		line-height: 1.1em;
	}
	
	/* push the date and rsvp over so it lines up with title image */
	.date, .rsvp {
		margin-left: 350px;
	}
	
	/* line up address with title image */
	.address {
		margin-left: 30px;
	}
	
	/* rsvp button */
	.rsvp, .rsvp:visited {
		display: block;
		overflow: hidden; -webkit-box-sizing: border-box;
		
		-moz-box-sizing: border-box; box-sizing: border-box;
		margin-top: 0px;
		margin-bottom: 150px;
		width: 175px;
		height: 74px;
		border: 5px solid #fff;
		color: #fff;
		text-align: center;
		font-weight: bold;
		font-size: 20px;
		line-height: 65px;
		
		-webkit-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		-moz-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		-ms-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		-o-transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); 
		transition: all 500ms cubic-bezier(0.770, 0.000, 0.175, 1.000); /* easeInOutQuart */
		
		-webkit-transform: translate3d(0,0,0);
		-moz-transform: translate3d(0,0,0);
		-ms-transform: translate3d(0,0,0);
		-o-transform: translate3d(0,0,0);
		transform: translate3d(0,0,0);
	}
	
	/* hover state transitions the border */
	.rsvp:hover {
		border: 37px solid #fff;
		background: #fff;
		line-height: 0;
	}
	
	/********** Lineup Slide **********/
	#lineup {
		overflow: hidden;
		padding: 200px 0;
		width: 100%;
		background: #1f7587;
		color: #fff;
		font-size: 16px;
	}
	
	#lineup h2 {
		margin-bottom: 70px;
		color: white;
		font: bold 30px "Helvetica Neue", Helvetica, Arial, sans-serif;
	}
	
	/* the little border thing above each h2 */
	#lineup h2:before {
		display: block;
		margin-bottom: 30px;
		width: 50px;
		height: 5px;
		background: #fff;
		content: '';
	}
	
	.artists {
		margin-bottom: 140px;
	}
	
	/* community logo link */
	.community {
		display: block;
		overflow: hidden;
		width: 64px;
		height: 102px;
		background-image: url(../images/icon-community.png);
		background-size: 64px 102px;
		text-indent: -9999px;
	}
	

/* #Media Queries
================================================== */

	/* Smaller than standard 960 (devices and browsers) */
	@media only screen and (max-width: 959px) { }
	
	@media only screen and (min-width: 960px) and (max-width: 1199px) {
		
		/********** Navigation **********/
		.nav-title {
			display: none;
		}
		
		/********** Flyer Slide **********/
		.date, .rsvp {
			margin-left: 230px;
		}
		
		
		/********** Lineup Slide **********/
		#lineup {
			font-size: 14px;
		}
		
		#lineup h2 {
			margin-bottom: 50px;
			font-size: 24px;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {
		/********** Navigation **********/
		.back-to-top, .nav-title {
			display: none;
		}
		
		/********** Flyer Slide **********/
		h1.show-title {
			margin: 100px auto 30px;
			width: 748px;
			height: 711px;
			background-image: url(../images/show-title.png);
			background-size: 748px 711px;
		}
		
		.info {
			font-size: 24px;
			line-height: 1.2em;
		}
		
		.date, .rsvp {
			margin-left: 185px;
		}
		
		
		/********** Lineup Slide **********/
		#lineup {
			font-size: 13px;
		}
		
		#lineup h2 {
			margin-bottom: 50px;
			font-size: 20px;
		}
		
		#lineup h2:before {
			margin-bottom: 20px;
		}
		
		
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) {
		/********** Site-wide Structural Styles **********/
		#flyer-background {
			background-image: url(../images/background-flyer-mobile.jpg);
			background-position: center top;
		}
		
		.mobile {
			display: block;
		}
		
		.desktop {
			display: none;
		}
		
		#content  {
			height: auto;
		}
		
		nav, .back-to-top, .nav-title {
			display: none;
		}
		
		/********** Cover Slide **********/
		#cover {
			display: none;
		}
		
		/********** Flyer Slide **********/
		#flyer {
			padding-top: 40px;
			height: 522px;
		}
		
		.date, .address, .rsvp {
			margin-left: 0;
		}
		
		#flyer img {
			margin-bottom: 15px;
		}
		
		#flyer p {
			margin-bottom: 10px;
			padding-left: 50px;
			color: #fff;
			font-weight: bold;
			font-size: 14px;
			line-height: 14px;
		}
		
		#flyer .sticky-wrapper {
			display: none;
		}
		
		/********** Lineup Slide **********/
		#lineup {
			padding: 50px 0 0;
		}
		
		#lineup h2 {
			margin-bottom: 10px;
		}
		
		#lineup li {
			display: inline;
		}
		
		#lineup li:after {
			content: ' / ';
		}
		
		#lineup li:last-child:after {
			content: '';
		}
		
		#lineup ul {
			margin-bottom: 0;
		}
		
		.artists {
			margin-bottom: 35px;
		}
		
		.vendors .columns {
			margin-bottom: 30px;
		}
		
		.community {
			margin-top: 40px;
			width: 32px;
			height: 51px;
			background-size: 32px 51px;
		}
		
		/********** Footer **********/
		footer {
			position: relative;
			padding: 25px 0 15px;
			background: #fff;
		}
		
		footer.hidden {
			display: block;
		}
		
		footer ul, footer, .footer-logos {
			text-align: center;
		}
		
		.footer-logos {
			line-height: 70px;
		}
		
		.footer-logos img {
			margin: 0;
		}
		
		footer .nav-links ul, .copyright {
			margin-left: 0;
		}	
	}

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		/* alternate show title lockup */
		h1.show-title {
			margin: 0 auto 100px;
			width: 420px;
			height: 399px;
			background-image: url(../images/show-title.png);
			background-size: 420px 399px;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		/* alternate show title lockup */
		h1.show-title {
			margin: 0 auto 100px;
			width: 300px;
			height: 285px;
			background-image: url(../images/show-title.png);
			background-size: 300px 285px;
		}
	}