/*
* Skeleton V1.2
* Copyright 2011, Dave Gamache
* www.getskeleton.com
* Free to use under the MIT license.
* http://www.opensource.org/licenses/mit-license.php
* 6/20/2012
*/

/* Table of Content
==================================================
	#Site Styles
	#Page Styles
	#Media Queries
	#Font-Face */

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

	body, html {
		height: 100%;
		color: #000;
		font: 18px/27px Palatino, "Palatino Linotype", "Palatino LT STD", "Book Antiqua", Georgia, serif;
	}
	
	a, a:visited {
		color: #000;
		text-decoration: underline;
	}
	
	hr {
		margin: 50px 0;
		border: solid rgba(0,0,0,0.3);
		border-width: 1px 0 0;
	}
	
	strong {
		color: #000;
	}
	
	#navigation {
		position: fixed;
		top: 0;
		z-index: 999;
		width: 100%;
		height: 85px;
		border-top: 5px solid #5f5f5f;
		background: black;
		-webkit-box-shadow: 0 0 65px rgba(0,0,0,.75); /* drop shadow */
		-moz-box-shadow: 0 0 65px rgba(0,0,0,.75); /* drop shadow */
		box-shadow: 0 0 65px rgba(0,0,0,.75); /* drop shadow */
		color: #fff;
		text-transform: uppercase;
		font: 700 14px/85px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		
		-webkit-animation-name: header-reveal;
		-moz-animation-name: header-reveal;
		-ms-animation-name: header-reveal;
		-o-animation-name: header-reveal;
		animation-name: header-reveal;
		
		-webkit-animation-duration: 1.5s;
		-moz-animation-duration: 1.5s;
		-ms-animation-duration: 1.5s;
		-o-animation-duration: 1.5s;
		animation-duration: 1.5s;
	}
	
	/* footer */
	footer {
		width: 100%;
		border-bottom: 10px solid #67cac0;
		background-color: #1e170f;
		color: #fff;
		text-transform: uppercase;
		font: 700 14px/1.75em 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	footer .nav-links {
		text-align: left;
		margin: 30px 0;
	}
	
	.footer-logos {
		text-align: right;
		line-height: 100px;
	}
	
	.footer-logos img {
		display: inline-block;
		margin-left: 30px;
		vertical-align: middle;
	}
	
	.copyright, .copyright a, .copyright a:visited {
		color: #71614f;
		font-weight: 400;
		text-transform: none;
		font-size: 13px;
	}
	
	.copyright a {
		text-decoration: underline;
	}
	
	/* basic slide structure */
	
	.slide {
		overflow: hidden;
		padding: 50px 0 120px;
		width: 100%;
		background-color: #666;
		background-attachment: fixed;
		background-size: cover;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}
	
	/* typography */
	
	h1, h2, h3, h4 {
		font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	h2 {
		margin-bottom: 60px;
		font-weight: 300;
		font-size: 78px;
		line-height: 1.25em;
	}
	
	h2 a {
		display: inline-block;
		border-bottom: 3px solid black;
		text-decoration: none;
		line-height: 1em;
	}
	
	div.section-title {
		margin: 50px 0;
		padding-bottom: 50px;
		min-width: 260px;
		width: 260px;
		border-bottom: 10px solid #000;
		text-transform: uppercase;
		font-weight: 400;
		font-size: 30px;
		font-family: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		line-height: 1.25em;
	}
	
	.call-out {
		text-transform: uppercase;
		font: 700 15px/27px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	/* typography */
	
	div#navigation a, div#navigation a:visited, div#navigation a:hover, footer a, footer a:visited, footer a:hover {
		color: #fff;
		text-decoration: none;
	}
	
	.nav-links {
		text-align: center;
	}
	
	.nav-links ul {
		margin-bottom: 0;
	}
	
	.nav-links ul li {
		display: inline-block;
		margin-bottom: 0;
	}
	
	.nav-logo {
		text-align: right;
	}
	
	.nav-logo img {
		vertical-align: middle;
	}
	
	.delimiter {
		display: inline-block;
		margin: 0 5px;
		color: #646464;
	}
	
	
	
	/* #Page Styles
	================================================== */
	
	/* cover */
	#cover {
		position: relative;
		overflow: hidden;
		padding-top: 25px;
		width: 100%;
		height: 100%;
		background-color: #666;
		background-image: url(../images/background-poster.jpg);
		background-attachment: fixed;
		background-size: cover;
		text-align: center;
		-webkit-background-size: cover;
		-moz-background-size: cover;
		-o-background-size: cover;
	}
	
	#cover:before {
	  display: inline-block;
	  margin-right: -0.25em; /* Adjusts for spacing */
	  height: 100%;
	  content: '';
	  vertical-align: middle;
	}
	
	#poster-logo {
		position: relative;
		z-index: 100;
		display: inline-block;
		width: 354px;
		height: 354px;
		background-image: url(../images/logo-poster.png);
		background-size: 354px 354px;
		vertical-align: middle;
	}
	
	/* intro */
	#show-intro {
		background: #67cac0;
	}
	
	/* time and place */
	#show-time-place {
		background-color: #223137;
		background-image: url(../images/background-map.png);
		color: #fff;
	}
	
	#show-time-place h2 {
		color: #fff;
	} 
	
	
	#show-time-place div.section-title {
		border-color: #fff;
		color: #fff;
	}
	
	
	/* artist flip cards */
	
	#artists {
		background: #000;
	}
	
	#artists .row {
		margin-bottom: 0;
	}
	
	/* panel colors */
	
	.teal 	{ background-color: #67cac0; }
	.pink 	{ background-color: #c7557b; }
	.navy 	{ background-color: #212f35; }
	.yellow { background-color: #e9cb00; }
	.brown 	{ background-color: #3e2d18; }
	
	.teal, .pink, .navy, .brown { color: #fff; }
	.yellow { color: #000; }
	
	/* panel setup */
	.panel {
		position: relative;
		float: left;
		width: 20%;
		height: 250px;
		font-size: .8em;
		
		-webkit-perspective: 600px;
		-moz-perspective: 600px;
	}
	
	.panel img {
		width: 100%;
	}
	
	.panel .front {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 900;
		float: none;
		width: 100%;
		height: inherit;
		background-size: cover;

		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		-o-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;
	
		-webkit-transform: rotateX(0deg) rotateY(0deg);
		-moz-transform: rotateX(0deg) rotateY(0deg);
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		-moz-transform-style: preserve-3d;
		-moz-backface-visibility: hidden;
	
		/* -- transition is the magic sauce for animation -- */
	}
	.panel.flip .front {
		z-index: 900;
		background-color: #333;
		background-size: cover;
	
		-webkit-transform: rotateY(180deg);
		-moz-transform: rotateY(180deg);
	}
	
	.panel .back {
		position: absolute;
		top: 0;
		left: 0;
		z-index: 800;
		float: none;
		width: 100%;
		height: inherit;

		-webkit-transition: all .4s ease-in-out;
		-moz-transition: all .4s ease-in-out;
		-ms-transition: all .4s ease-in-out;
		-o-transition: all .4s ease-in-out;
		transition: all .4s ease-in-out;
		
		-webkit-transform: rotateY(-180deg);
		-moz-transform: rotateY(-180deg);
		-webkit-transform-style: preserve-3d;
		-webkit-backface-visibility: hidden;
		-moz-transform-style: preserve-3d;
		-moz-backface-visibility: hidden;
	
		/* -- transition is the magic sauce for animation -- */
	}
	
	.panel.flip .back {
		z-index: 1000;
	
		-webkit-transform: rotateX(0deg) rotateY(0deg);
		-moz-transform: rotateX(0deg) rotateY(0deg);
	}
	
	.artist-info {
		position: absolute;
		top: 20px;
		left: 20px;
		text-transform: uppercase;
		font: 400 34px/40px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
	}
	
	.title-card {
		background-color: #000;
		color: #fff;
	}
	
	/* artist thumbnails */
	.carly-ealey		  { background-image: url(../images/artists/artist-carly-ealey.jpg); }
	.bradford-lynn		  { background-image: url(../images/artists/artist-bradford-lynn.jpg); }
	.dave-persue		  { background-image: url(../images/artists/artist-dave-persue.jpg); }
	.chandu-reading		  { background-image: url(../images/artists/artist-chandu-reading.jpg); }
	.chris-konecki		  { background-image: url(../images/artists/artist-chris-konecki.jpg); }
	.dane-danner		  { background-image: url(../images/artists/artist-dane-danner.jpg); }
	.katherine-brannock	  { background-image: url(../images/artists/artist-katherine-brannock.jpg); }
	.dusty-dirtweed		  { background-image: url(../images/artists/artist-dusty-dirtweed.jpg); }
	.elliott-moeller	  { background-image: url(../images/artists/artist-elliott-moeller.jpg); }
	.eric-wixon			  { background-image: url(../images/artists/artist-eric-wixon.jpg); }
	.exist				  { background-image: url(../images/artists/artist-exist.jpg); }
	.honkey-kong		  { background-image: url(../images/artists/artist-honkey-kong.jpg); }
	.product-etcetera	  { background-image: url(../images/artists/artist-product-etcetera.jpg); }
	.diekuts			  { background-image: url(../images/artists/artist-diekuts.jpg); }
	.joshua-krause		  { background-image: url(../images/artists/artist-joshua-krause.jpg); }
	.josh-hunter		  { background-image: url(../images/artists/artist-josh-hunter.jpg); }
	.dnza				  { background-image: url(../images/artists/artist-dnza.jpg); }
	.kyle-miller		  { background-image: url(../images/artists/artist-kyle-miller.jpg); }
	.that-kid-peep		  { background-image: url(../images/artists/artist-that-kid-peep.jpg); }
	.nate-banuelos		  { background-image: url(../images/artists/artist-nate-banuelos.jpg); }
	.neko-burke			  { background-image: url(../images/artists/artist-neko-burke.jpg); }
	.sean-dejecacion	  { background-image: url(../images/artists/artist-sean-dejecacion.jpg); }
	.taylor-johnson		  { background-image: url(../images/artists/artist-taylor-johnson.jpg); }
	.senz-wen			  { background-image: url(../images/artists/artist-senz-wen.jpg); }
	.surge				  { background-image: url(../images/artists/artist-surge.jpg); }
	.tocayo				  { background-image: url(../images/artists/artist-tocayo.jpg); }
	.wes-bruce			  { background-image: url(../images/artists/artist-wes-bruce.jpg); }
	.michael-tussey		  { background-image: url(../images/artists/artist-michael-tussey.jpg); }
	.bujwah-strangers	  { background-image: url(../images/artists/artist-bujwah-strangers.jpg); }
	.tyler-cristobal	  { background-image: url(../images/artists/artist-tyler-cristobal.jpg); }
	.brent-sandor		  { background-image: url(../images/artists/artist-brent-sandor.jpg); }
	.jordan-josafat		  { background-image: url(../images/artists/artist-jordan-josafat.jpg); }
	.chris-bilyeu		  { background-image: url(../images/artists/artist-chris-bilyeu.png); }
	.christina-liu		  { background-image: url(../images/artists/artist-christina-liu.jpg); }
	.nick-mcpherson		  { background-image: url(../images/artists/artist-nick-mcpherson.jpg); }
	.celeste-byers		  { background-image: url(../images/artists/artist-celeste-byers.jpg); }
	.alli-bautista		  { background-image: url(../images/artists/artist-alli-bautista.jpg); }
	.saratoga-sake		  { background-image: url(../images/artists/artist-saratoga-sake.jpg); }
	.eric-whitman		  { background-image: url(../images/artists/artist-eric-whitman.jpg); }
	.dolan-stearns		  { background-image: url(../images/artists/artist-dolan-stearns.jpg); }
	
	
	/* thank you */
	#thank-you {
		background-color: #6b5a20;
		background-image: url(../images/background-thanks.jpg);
		color: #dcc57d;
	}
	
	#thank-you a, #thank-you a:visited {
		color: #dcc57d;
	}
	
	#thank-you .section-title {
		width: 100%;
		border-width: 1px;
		border-color: #8a783b;
		text-align: center;
	}
	
	.sponsor-logo {
		text-align: center;
	}
	
	.sponsor-logo img {
		width: 198px;
	}
	
	/* teaser */
	
	#teaser {
		background-color: #242424;
		background-image: url(../images/background-texture.png);
		background-size: auto;
		color: #fff;
	}
	
	#teaser .section-title {
		color: #fff;
		border-color: #fff;
	}
	

/* #Media Queries
================================================== */
	
	@media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5) {
		
		#poster-logo {
			position: relative;
			z-index: 100;
			display: inline-block;
			width: 354px;
			height: 354px;
			background-image: url(../images/logo-poster@2x.png);
			background-size: 354px 354px;
			vertical-align: middle;
		}
		
		/* fixes weird background-size behavior on mobile devices */
		#cover, .slide {
			background-attachment: scroll;
		}
		
		/* eliminates parallax on mobile devices */
		#cover[style], .slide[style] {
			background-position: 50% 0 !important;
		}
	}

	/* 960 (devices and browsers) */
	@media only screen and (max-width: 1199px) and (min-width: 960px) {
		/* artist flipcards */
		.panel {
			height: 215px;
		}
		
		h2 {
			font-size: 69px;
		}
		
		.artist-info {
			font: 400 30px/37px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		.sponsor-logo img {
			width: 178px;
		}
	}

	/* Tablet Portrait size to standard 960 (devices and browsers) */
	@media only screen and (min-width: 768px) and (max-width: 959px) {	

		/* artist flipcards */
		.panel {
			height: 155px;
		}
		
		.artist-info {
			font: 400 20px/27px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		h2 {
			font-size: 54px;
			line-height: 1.30em;
		}
		
		div.section-title {
			margin: 30px 0;
			padding-bottom: 30px;
			min-width: 220px;
			width: 220px;
			border-bottom: 7px solid #000;
			text-transform: uppercase;
			font-size: 25px;
		}
		
		.sponsor-logo img {
			width: 158px;
		}
	
	}

	/* All Mobile Sizes (devices and browser) */
	@media only screen and (max-width: 767px) { }

	/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
	@media only screen and (min-width: 480px) and (max-width: 767px) {
		/* structure */
		
		#navigation {
			display: none;
		}
		
		#cover {
			padding-top: 0;
		}
		
		#poster-logo {
			width: 177px;
			height: 177px;
			background-size: 177px 177px;
		}
		
		/* typography */
		
		h2 {
			margin-bottom: 20px;
			font-size: 40px;
		}
		
		div.section-title {
			margin: 0 0 25px;
			padding-bottom: 20px;
			min-width: 100px;
			width: 100px;
			border-bottom: 3px solid #000;
			font-weight: 400;
			font-size: 15px;
		}
		
		/* artist flipcards */
		.panel {
			height: 85px;
		}
		
		.artist-info {
			top: 15px;
			left: 10px;
			font: 400 12px/17px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		.sponsor-list {
			display: none;
		}
		
		/* footer */
		footer {
			padding: 40px 0;
			font: 700 14px/1.75em 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		.footer-logos, footer .nav-links {
			text-align: center;
			
		}
		
		.footer-logos img {
			margin-right: 10px;
			margin-left: 10px;
		}
		
		.copyright {
			margin-top: 20px;
		}
		
		.design-credit {
			display: block;
		}
	}

	/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
	@media only screen and (max-width: 479px) {
		/* structure */
		
		#navigation {
			display: none;
		}
		
		#cover {
			padding-top: 0;
		}
		
		#poster-logo {
			width: 177px;
			height: 177px;
			background-size: 177px 177px;
		}
		
		/* typography */
		
		h2 {
			margin-bottom: 20px;
			font-size: 40px;
		}
		
		div.section-title {
			margin: 0 0 25px;
			padding-bottom: 20px;
			min-width: 100px;
			width: 100px;
			border-bottom: 3px solid #000;
			font-weight: 400;
			font-size: 15px;
		}
		
		/* artist flipcards */
		.panel {
			height: 65px;
		}
		
		.artist-info {
			top: 15px;
			left: 10px;
			font: 400 9px/13px 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		.sponsor-list {
			display: none;
		}
		
		footer {
			padding: 40px 0;
			font: 700 14px/1.75em 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif;
		}
		
		.footer-logos, footer .nav-links {
			text-align: center;
			
		}
		
		.footer-logos img {
			margin-right: 10px;
			margin-left: 10px;
		}
		
		.design-credit {
			display: block;
		}
		
		.copyright {
			margin-top: 20px;
		}
	}
	

/* Animations
================================================== */	

	@-webkit-keyframes header-reveal {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-60px);
		}
		
		50% {
			opacity: 0;
			-webkit-transform: translateY(-30px);
		}
		
		100% {
			-webkit-transform: translateY(0);
			opcity: 1;
		}
	}
	
	@-moz-keyframes header-reveal {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-60px);
		}
		
		50% {
			-webkit-transform: translateY(-30px);
		}
		
		100% {
			-webkit-transform: translateY(0);
			opcity: 1;
		}
	}
	
	@-ms-keyframes header-reveal {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-60px);
		}
		
		50% {
			-webkit-transform: translateY(-30px);
		}
		
		100% {
			-webkit-transform: translateY(0);
			opcity: 1;
		}
	}
	
	@-o-keyframes header-reveal {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-60px);
		}
		
		50% {
			-webkit-transform: translateY(-30px);
		}
		
		100% {
			-webkit-transform: translateY(0);
			opcity: 1;
		}
	}
	
	@keyframes header-reveal {
		0% {
			opacity: 0;
			-webkit-transform: translateY(-60px);
		}
		
		50% {
			-webkit-transform: translateY(-30px);
		}
		
		100% {
			-webkit-transform: translateY(0);
			opcity: 1;
		}
	}

/* #Font-Face
================================================== */

	@font-face {
	    font-weight: 300;
	    font-style: normal;
	    font-family: 'Oswald';
	    src: url('../fonts/oswald/Oswald-Light-webfont.eot');
	    src: url('../fonts/oswald/Oswald-Light-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/oswald/Oswald-Light-webfont.woff') format('woff'),
	         url('../fonts/oswald/Oswald-Light-webfont.ttf') format('truetype'),
	         url('../fonts/oswald/Oswald-Light-webfont.svg#OswaldLight') format('svg');
	
	}
	
	@font-face {
	    font-weight: 400;
	    font-style: normal;
	    font-family: 'Oswald';
	    src: url('../fonts/oswald/Oswald-Regular-webfont.eot');
	    src: url('../fonts/oswald/Oswald-Regular-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/oswald/Oswald-Regular-webfont.woff') format('woff'),
	         url('../fonts/oswald/Oswald-Regular-webfont.ttf') format('truetype'),
	         url('../fonts/oswald/Oswald-Regular-webfont.svg#OswaldBook') format('svg');
	
	}
	
	@font-face {
	    font-weight: 700;
	    font-style: normal;
	    font-family: 'Oswald';
	    src: url('../fonts/oswald/Oswald-Bold-webfont.eot');
	    src: url('../fonts/oswald/Oswald-Bold-webfont.eot?#iefix') format('embedded-opentype'),
	         url('../fonts/oswald/Oswald-Bold-webfont.woff') format('woff'),
	         url('../fonts/oswald/Oswald-Bold-webfont.ttf') format('truetype'),
	         url('../fonts/oswald/Oswald-Bold-webfont.svg#OswaldBold') format('svg');
	
	}