/* Basic styles
-------------------------------------------------- */

html, body { height: 100%; }

body {
	/* font-family: 'Source Sans Pro', 'Josefin Slab', 'Myriad Pro', Arial, sans-serif; */
	font-family: 'Average', serif; 
	background: #fff;
	font-weight: 400;
	font-size: 15px;
	color: #333;
	margin: 0;
}

h1 { font-family: 'Poiret One', 'Myriad Pro', Arial, sans-serif;  }
h2,h3,h4 { font-family: 'Josefin Sans', 'Myriad Pro', Arial, sans-serif; font-weight: 300; }
h4 { margin: 0; font-size: 150%; font-weight: normal; color: #333; }

a { color: #555; text-decoration: none; }
a:hover { text-decoration: underline; }

.screen-reader { position: absolute; top: -99999px; }

/* Selection style */
::selection, ::-moz-selection { background-color: #FFA620; color: #fff; }


/* Navigation
-------------------------------------------------- */

nav ul { display: table; list-style: none; margin: 0; padding: 0; width: 100%; table-layout: fixed; }
nav li { display: table-cell; margin: 0; padding: 0; }

nav {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 501;
	text-align: center;
}

nav .nav-links {
	background: #464646;
	background: rgba(70,70,70,0.7);
}

nav a {
	display: block;
	height: 40px;
	position: relative;
	color: #fff;
	line-height: 40px;
	font-size: 16px;
}

#nav-toggle { position: fixed; visibility: hidden; height: 0; }

nav .nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	background: #464646 url(../images/nav-toggle-icon.gif) 11px 12px no-repeat;
	background-color: rgba(70,70,70,0.7);
	position: fixed;
	right: 0;
	padding: 0;
	margin: 0;
	text-indent: -99999px;
	cursor: pointer;
	z-index: 502;
}

nav a.active, nav a.active:hover { background: #990000; color: #fff; opacity: 1; }
nav a.active:after, nav a.active:hover:after {
	top: 100%;
	content: '';
	height: 0;
	width: 0;
	position: absolute;
	pointer-events: none;
	border: 20px solid transparent;
	border-top-color: #990000;
	left: 50%;
	margin-left: -20px;
	opacity: 1;
}

nav a:hover { background: #fff; color: #464646; text-decoration: none; }
nav a:hover:after { border-top-color: #FFF; }

@media screen and (max-width: 750px) {
	nav a { font-size: 13px; }
}
@media screen and (max-width: 580px) {
	nav { text-align: left; left: 100%; bottom: 0; }
	nav .nav-toggle { display: block; }
	nav, nav .nav-toggle, section {
		-webkit-transition: height 0.2s, left 0.2s;
		-moz-transition: height 0.2s, left 0.2s;
		-o-transition: height 0.2s, left 0.2s;
		-ms-transition: height 0.2s, left 0.2s;
		transition: height 0.2s, left 0.2s;
	}

	nav a { font-size: 14px; }

	nav ul, nav li { display: block; }
	nav .nav-links a { padding: 0 40px; height: 40px; }
	nav .nav-links a:after { display: none; }
	
	nav .nav-links {
		position: relative;
		background: #333;
		height: 100%;
		padding: 40px 0;
		border-right: 40px solid transparent;
		box-sizing: border-box;
		overflow-y: auto;
	}

	#nav-toggle:checked ~ nav { left: 0; }
	#nav-toggle:checked ~ nav .nav-toggle {
		background-color: #464646;
		height: 100%;
	}
	#nav-toggle:checked ~ section { left: -100%; }

	@media screen and (-webkit-min-device-pixel-ratio:0) {
		/* webkit removes elem when it moves completely off-screen */
		#nav-toggle:checked ~ section { left: -99%; }
	}
}
/*@media screen and (max-width: 360px) {
	nav { font-size: 10px; }
}*/

/* Footer
-------------------------------------------------- */

footer {
	background: #464646;
	color: #FFF;
	position: relative;
	padding: 2.5em 0;
	font-size: 90%;
	height: 100px;
	box-sizing: border-box;
	text-align: center;
}

#footer-wrap {
	width: 900px;
	margin: 0 auto;
}

#colophon { float: left; }
#links { font-style: italic; float: right; }

footer a {
	color: #FFF;
	font-style: normal; 
}

/* Content
-------------------------------------------------- */

section.panel { 
	position: relative;
	width: 100%;
	background: #fff;
	overflow-x: hidden;
	text-align: center;
}

.panel-wrapper {
	min-height: 100%;
	padding: 40px 0 60px 0;
	box-sizing: border-box;
	overflow: hidden;
}

section.panel h2 {
	width: 900px;
	color: #474747;
	font-size: 54px;
	font-weight: normal;
	line-height: 0.9;
	margin: 40px auto 40px auto;
	padding: 0;
	-webkit-backface-visibility: hidden;
}

section.panel div.panel-body {
	width: 900px;
	font-size: 16px;
	line-height: 22px;
	color: #8b8b8b;
	z-index: 2;
	padding: 0;
	margin: 0 auto;
	-webkit-backface-visibility: hidden;
}

section.panel p { margin-top: 0; }
section.panel h3 {
	color: #474747;
	font-size: 27px;
	font-weight: 900;
	line-height: 1.15;
	margin: 1.5em 0 0.5em 0;
}


@media screen and (min-width: 1300px) {
	section.panel h2,
	section.panel div.panel-body,
	#footer-wrap { width: 1200px; }
}

@media screen and (max-width: 1000px) {
	section.panel h2,
	section.panel div.panel-body,
	#footer-wrap { width: 700px; }
}

@media screen and (max-width: 750px) {
	section.panel h2 { font-size: 42px; width: 80%; left: 10%; margin: 60px auto 30px auto; }
	section.panel div.panel-body { width: 80%; left: 10%; }
	#footer-wrap { width: 80%; }
}

@media screen and (max-width: 560px) {
	section.panel h2 { font-size: 36px; margin: 20px auto 10px auto; }
	section.panel div.panel-body { font-size: 14px; }
}

/* Section-specific
-------------------------------------------------- */

div.grid { margin: 0 0 2em 0; overflow: auto; text-align: left; }
div.grid.three-cell div.grid-cell:first-child { margin: 0; }
div.grid.three-cell div.grid-cell h3 { margin: 1em 0 0 0; font-weight: normal; font-size: 1.5em; background: #7493a2; color: #FFF; }
div.grid.three-cell div.grid-cell h3,
div.grid.three-cell div.grid-cell li { padding: 8px 12px; }
div.grid.three-cell div.grid-cell li:nth-child(even) { background: #eee; }
div.grid.three-cell div.grid-cell li:nth-child(odd) { background: #fff; }

div.grid.two-cell div.grid-cell:first-child { margin: 0; }
div.grid.two-cell div.grid-cell h3 { margin: 1.5em 0 0 0; font-weight: normal; font-size: 1.5em; background: #7493a2; color: #FFF; }
div.grid.two-cell div.grid-cell h3,
div.grid.two-cell div.grid-cell li { padding: 8px 12px; }
div.grid.two-cell div.grid-cell li:nth-child(even) { background: #eee; }
div.grid.two-cell div.grid-cell li:nth-child(odd) { background: #fff; }

@media screen and (min-width: 750px) {
	div.grid.three-cell div.grid-cell { width: 32%; margin: 0 0 0 2%; float: left; }
	div.grid.three-cell div.grid-cell.grid-span-2 { width: 66%; }
	div.grid.two-cell div.grid-cell { width: 49%; margin: 0 0 0 2%; float: left; }
}

#section-splash { background: none; height: 100%; overflow: hidden; }
#section-about ul { list-style: none; margin: 0 0 0.5em 0; padding: 0; }
#section-about li > strong > a { padding-right: 12px; display: inline-block; background: url(../images/arrow.gif) right no-repeat; }
#section-about strong { font-weight: normal; color: #464646; margin: 0 0.5em 0 0; display: block; }
#section-about div.grid-span-2 ul { -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2; }
section:last-of-type { min-height: 100%; box-sizing: border-box; padding-bottom: 100px; margin-bottom: -100px; }

#section-past { background: #e6e6e6; }
#section-past ul { list-style: none; margin: 0 0 2.5em 0; padding: 0; }
#section-past li { display: inline-block; }
#section-past a { display: block; padding: 10px 15px; background: #936241; color: #FFF; margin: 0 0 0.5em 0.5em; font-size: 1.5em; text-decoration: none; }
#section-past a:hover { background: #A37251; }

#section-talent { background: #f3f3f3; }
#section-talent ul.setlist { -webkit-column-count: 4; -moz-column-count: 4; -o-column-count: 4; column-count: 4; list-style: none; margin: 2.5em 0 1em 0; padding: 0; line-height: 1.25; }
#section-talent li { display: inline-block; width: 100%; margin: 0 0 1.5em 0; }
#section-talent h4 { line-height: 1.25; margin-bottom: 0.1em; }

#section-workshops ul.setlist { list-style: none; margin: 2.5em 0 1em 0; padding: 0; line-height: 1.25; }
#section-workshops li { margin: 0 0 1.5em 0; }
#section-workshops h4 { line-height: 1.25; margin-bottom: 0.25em; }

#section-sponsors { background: #e6e6e6; }
#section-sponsors ul { list-style: none; width: 100%; margin: 2.5em 0 1em 0; padding: 0; font-size: 150%; }
#section-sponsors li { margin: 0 0 1.5em 0; }

#section-pictures { background-color: #7493a2; color: #DDEEFF; }
#section-pictures h2 { color: #DDEEFF; }
#section-pictures div.grid { text-align: center; }
#section-pictures div.grid embed { width: 100%; height: 300px; }

@media screen and (max-width: 1000px) {
	#section-about strong { display: block; }
	#section-talent ul.setlist { -webkit-column-count: 3; -moz-column-count: 3; -o-column-count: 3; column-count: 3; }
}

@media screen and (max-width: 800px) {
	#section-talent ul.setlist { -webkit-column-count: 2; -moz-column-count: 2; -o-column-count: 2; column-count: 2; }
}
	

@media screen and (max-width: 560px) {
	#section-about div.grid-span-2 ul { -webkit-column-count: 1; -moz-column-count: 1; -o-column-count: 1; column-count: 1; }
	#section-past ul { margin: 0; }
	#section-talent ul.setlist { -webkit-column-count: 1; -moz-column-count: 1; -o-column-count: 1; column-count: 1; }
	#links, #colophon { float: none; }
}

/* Transitions 
-------------------------------------------------- */

#container {
	-webkit-perspective: 1200px;
	-moz-perspective: 1200px;
	perspective: 1200px;
	position: relative;
	height: 100%;
}


/* Splash page
-------------------------------------------------- */

.cover{
	margin: 0;
	padding: 0;
	overflow: hidden;
	height: 100%;
}

body {
	background: url(../images/pitt-bg.jpg) no-repeat center center fixed;
	background-size: cover;
}

.init{
	display: none;
}

@-webkit-keyframes pan {
	0%   { -webkit-transform: translateX(0); }
	100% { -webkit-transform: translateX(-1768px); }
}
@-moz-keyframes pan {
	0%   { -moz-transform: translateX(0); }
	100% { -moz-transform: translateX(-1768px); }
}
@-o-keyframes pan {
	0%   { -o-transform: translateX(0); }
	100% { -o-transform: translateX(-1768px); }
}
@-ms-keyframes pan {
	0%   { -ms-transform: translateX(0); }
	100% { -ms-transform: translateX(-1768px); }
}
@keyframes pan {
	0%   { transform: translateX(0); }
	100% { transform: translateX(-1768px); }
}

#clouds{
	background-image:  url(../images/clouds.png);
	position: absolute;
	left: 0;
	z-index: 100;
	min-width: 3336px;
	width: 200%;
	height: 261px;
	margin-top: 20px;
	-webkit-animation: pan 10s infinite linear;
	-moz-animation: pan 10s infinite linear;
	-o-animation: pan 10s infinite linear;
	-ms-animation: pan 10s infinite linear;
	animation: pan 10s infinite linear;
}
#moon{
	background-image:  url(../images/moon.png);
	width: 310px;
	height: 313px;
	z-index: 70;
	position: absolute;
	right: 20px;
	top: 20px;
	-webkit-transform-origin: 100% 0%;
	-moz-transform-origin: 100% 0%;
	-o-transform-origin: 100% 0%;
	-ms-transform-origin: 100% 0%;
	transform-origin: 100% 0%;
}
/*#mountain1{
	background-image:  url(../images/rsz_city1.png);
	height: 587px;
	width: 100%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
 
		z-index: 200;
}
#mountain2{
	background-image:  url(../images/rsz_city2.png);
	height: 170px;
	width: 100%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: -10px;
	right: -855px;
	z-index: 300;
}
#mountain3{
	background-image:  url(../images/rsz_city3.png);
	background-repeat: no-repeat;
	height: 310px;
	width: 100%;
	position: absolute;
	bottom: 0;
	right: -460px;
	z-index: 100;
}   */

@-webkit-keyframes fly {
	0%, 100% { -webkit-transform: translate( 0px,  0px); }
	50%      { -webkit-transform: translate(35px, 30px); }
}
@-moz-keyframes fly {
	0%, 100% { -moz-transform: translate( 0px,  0px); }
	50%      { -moz-transform: translate(35px, 30px); }
}
@-o-keyframes fly {
	0%, 100% { -o-transform: translate( 0px,  0px); }
	50%      { -o-transform: translate(35px, 30px); }
}
@-ms-keyframes fly {
	0%, 100% { -ms-transform: translate( 0px,  0px); }
	50%      { -ms-transform: translate(35px, 30px); }
}
@keyframes fly {
	0%, 100% { transform: translate( 0px,  0px); }
	50%      { transform: translate(35px, 30px); }
}

#dragon {
	position: absolute;
	top: 175px;
	left: 12.5%;
	z-index: 300;
	-webkit-transform-origin: 0% 0%;
	-moz-transform-origin: 0% 0%;
	-o-transform-origin: 0% 0%;
	-ms-transform-origin: 0% 0%;
	transform-origin: 0% 0%;
}

#dragon .sprite {
	display: block;
	background-image:  url(../images/dragon.png);
	height: 354px;
	width: 850px;
	background-repeat: no-repeat;
	
	-webkit-transform: translate(-100px, -550px);
	-moz-transform: translate(-100px, -550px);
	-o-transform: translate(-100px, -550px);
	-ms-transform: translate(-100px, -550px);
	transform: translate(-100px, -550px);

	-webkit-animation: fly 4s infinite ease-in-out;
	-moz-animation: fly 4s infinite ease-in-out;
	-o-animation: fly 4s infinite ease-in-out;
	-ms-animation: fly 4s infinite ease-in-out;
	animation: fly 4s infinite ease-in-out;
}

/*#dragon:hover {
	opacity: .7;
	-webkit-transition: opacity .25s ease-in-out;
	-moz-transition: opacity .25s ease-in-out;
	-o-transition: opacity .25s ease-in-out;
	-ms-transition: opacity .25s ease-in-out;
	transition: opacity .25s ease-in-out;
}*/

#middle-content {
	/*width: 1000px;
	height: 1000px;*/
	max-width: 1500px;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	position: relative;
}

#light {
	position: absolute;
	top: 90px;
	left: 40px;
	display: none;
	z-index: 100;
	width: 697px;
	height: 480px;
	background-repeat: no-repeat;
	background-image:  url(../images/light2.png);
}
/*.title-text {
	position: absolute;
	bottom: 60px;
	left: 220px;
	z-index: 400;
}

.title-text h1 {
	color:#fff;
	font-size: 70px;
	font-family: 'Open Sans', sans-serif;
	font-weight: 800;
	text-shadow: 0px 5px #ccc;
}*/

.title-text {
	position: absolute;
	bottom: 20%;
	right: 7%;
	z-index: 400;
}

.title-text h1 {
	color: #464646;
	font-size: 100px;
	font-weight: 700;
	/* text-shadow: 0px 5px #ccc;*/
	background: #FFF;
	background: rgba(255,255,255,0.8);
	padding: 0.1em 25px;
	margin: 0.67em 0 0.67em 20px;
	white-space: nowrap;

	-webkit-transition: font-size 0.2s;
	-moz-transition: font-size 0.2s;
	-o-transition: font-size 0.2s;
	-ms-transition: font-size 0.2s;
	transition: font-size 0.2s;
}

/* webkit line-height hack 
@media screen and (-webkit-min-device-pixel-ratio:0) {
	.title-text h1 { line-height: 0.9; min-height: 1.2em; }	
}*/

.countdown {
	color: #FFF;
	font-size: 50px;
	position: absolute;
	bottom: 20%;
	right: 7%;
	z-index: 401;
	padding: 0.1em 25px;
	margin-left: 20px;
	/*margin-left: 20%;
	margin-top: 10%;*/
	/* font-family: 'SansationBold', Arial, Verdana, sans-serif;
	text-shadow: 5px 5px 0px #000; */
	text-decoration: none;
	background: #990000;
	background: rgba(153,0,0,0.8);
	white-space: nowrap;

	-webkit-transition: font-size 0.2s;
	-moz-transition: font-size 0.2s;
	-o-transition: font-size 0.2s;
	-ms-transition: font-size 0.2s;
	transition: font-size 0.2s;
}

#dragon, #moon {
	-webkit-transition-duration: 0.2s;
	transition-duration: 0.2s;
}

@media screen and (max-width: 840px), screen and (max-height: 760px) {
	.title-text h1 { font-size: 70px; }
	.countdown { font-size: 35px; }
	#dragon, #moon {
		-webkit-transform: scale(0.75);
		-moz-transform: scale(0.75);
		-o-transform: scale(0.75);
		-ms-transform: scale(0.75);
		transform: scale(0.75);
	}
}

@media screen and (max-width: 640px), screen and (max-height: 600px)  {
	.title-text h1 { font-size: 60px; }
	.countdown { font-size: 28px; }
	#dragon, #moon {
		-webkit-transform: scale(0.55);
		-moz-transform: scale(0.55);
		-o-transform: scale(0.55);
		-ms-transform: scale(0.55);
		transform: scale(0.55);
	}
}

@media screen and (max-width: 520px), screen and (max-height: 420px)  {
	.title-text h1 { font-size: 38px; }
	.countdown { font-size: 20px; }
	#dragon, #moon {
		-webkit-transform: scale(0.4);
		-moz-transform: scale(0.4);
		-o-transform: scale(0.4);
		-ms-transform: scale(0.4);
		transform: scale(0.4);
	}
}

@media screen and (max-width: 360px), screen and (max-height: 280px) {
	.title-text h1 { font-size: 28px; }
	.countdown { font-size: 15px; }
	#dragon, #moon {
		-webkit-transform: scale(0.3);
		-moz-transform: scale(0.3);
		-o-transform: scale(0.3);
		-ms-transform: scale(0.3);
		transform: scale(0.3);
	}
}

@media screen and (max-width: 950px) {
	#dragon { left: 0; }
}

@media screen and (max-height: 900px) {
	#dragon { top: 80px; }
}

@media screen and (max-height: 600px) {
	#dragon { top: 50px; }
}

@media screen and (max-height: 320px) {
	#dragon { top: 20px; }
}

/*speech bubble */
.init{ display: none; }
.balloon.init { opacity: 0; }
.balloon {
	background-image: url(../images/balloon.png);
	width: 273px;
	height: 181px;
	background-repeat: no-repeat;
	position: absolute;
	right: 0;
	top:-85px;
	font-family: 'Finger Paint', cursive;
}
.balloon .text{
	text-align: center;
	color:#000;
	text-shadow: 0px 1px 0px #fff;
}

#Grid .mix{
	    opacity: 0;
	    display: none;
	}