/*MAIN*/

	@font-face {
		font-family: Gafata;
		src: url(Gafata-Regular.ttf);
	}

	body {
		background-color: #000;
		font-family: Gafata, Tahoma, Verdana;
		padding: 0 0 0 0;
		margin: 0 0 0 0;
		text-align: left;
		color: #FFF;
	}

	div {
		margin: 0 0 0 0;
		padding: 0 0 0 0;
	}

	a {
		color: inherit;
		text-decoration: none;
		cursor: pointer;
	}

	h1 {
		margin: 2em 0 0 0;
		padding: 0 0 0 0;
		font-size: 2em;
		color: #FFF;
		font-weight: normal;
	}

	h2 {
		border-left: 0.5em #FFF solid;
		margin: 3em 0 -0.5em 0;
		padding: 0 0 0 0.5em;
		font-size: 1.2em;
		color: #FFF;
		font-weight: normal;
	}

	h2:first-of-type {
		margin-top: 2em; 
	}

	img {
		border: 1px solid #666;
	}

/*NAV*/

	#nav {
		display: block;
		top: 0;
		margin-left: auto;
		margin-right: auto;
		height: 1em;
		width: 70%;
		text-align: right;
	}

	#nav div {
		display: inline-block;
		top: 0;
		padding: 1em;
		width: 5em;
		border-top: 8px solid #CCC;
		text-transform: uppercase;
		font-size: 0.7em;
		text-align: center;
		margin-right: 2px;
	}

	#nav div:hover {
		border-top: 8px solid #CC9900;
		border-bottom: 1px solid #CC9900;
		color: #CC9900;
		font-weight: bold;
	}


/*CONTENT*/

	div.biotop {
		color: #AAA;
		font-size: 0.9em;
		line-height: 1.3em;
	}

	p.copy {
		color: #BBB;
	}

	.perf {
		margin: 1.8em 0 1.8em 0;
	}
	
	.title {
		color: #CC9900;
		text-transform: uppercase;
		font-size: 1.2em;
		padding-right: 15%;
	}

	.subtitle {
		color: #CC9900;
		font-size: 0.75em;
		line-height: 0.95em;
	}

	.date {
		margin-top: 1.2em;
		font-size: 0.8em;
	}

	.venue {
		font-size: 0.8em;
	}

	.prog {
		margin-top: 1.2em;
		font-size: 0.8em;
		color: #BBB;
	}

	.prog div span {
		text-transform: uppercase;
		margin-right: 0.6em;
	}
	
	#footer {
		margin-top: 8em;
		margin-bottom: 2em;
		color: #999;
		font-size: 0.7em;
	}

	.divider {
		border: 1px solid #FFF;
		width: 1.2em;
	}

	#expand, #contract {
		cursor: pointer;
	}

	#expand:hover, #contract:hover {
		color: #CC9900;
	}

	@media screen and (min-width: 1024px) {
		body{
			font-size: 1.1em;
		}	
		#page {
			margin: auto;
			width: 45%;
			padding-top: 7em;
			padding-left: 30%;
			padding-right: 10%;
			background-image: url(photo.jpg);
			background-repeat: no-repeat;
			background-size: 33%;
			background-position: 0 1em;
		}
		#vc {
			font-size: 2.4em;
			letter-spacing: 0.28em;
			text-transform: uppercase;
			color: #FFF;
		}
		div.biotop {
			padding-right: 4%;
		}
	}

	@media screen and (max-width: 1024px) {
		#page {
			margin: auto;
			width: 90%;
			padding-top: 80em;
			background-image: url(photo.jpg);
			background-repeat: no-repeat;
			background-size: 100%;
			background-position: 0 -2em;
		}
		#vc {
			font-size: 4.7em;
			letter-spacing: 0.28em;
			text-transform: uppercase;
			color: #FFF;
		}
		div.biotop {
			font-size: 1.1em;
			line-height: 2em;
		}
		div.biotop p {
			margin-top: 3.5em;
		}		
		h1 {
			margin: 3em 0 1em 0;
			font-size: 4em;
		}
		h2 {
			margin: 6em 0 -0.5em 0;
		}
		.perf {
			margin: 4em 0 4em 0;
		}
		.divider {
			border: 1px solid #FFF;
			width: 1.2em;
			margin: 4em 0 4em 0;
		}
		#footer {
			margin-top: 16em;
			margin-bottom: 4em;
		}
	}