@media (min-width: 768px) {
	html, body {
		height: 100%;
		overflow-y: hidden; /* no scrolling until ignite */
	}

	.blur {
		filter: url(hot.svg#blur); /* FIREFOX */
		-webkit-filter: blur(5px); /* WEBKIT */
		        filter: blur(5px); /* LOL */
	}
	.abscenter {
		position: absolute;
		margin: auto;
		text-align: center;
		top: 0; left: 0; bottom: 0; right: 0;
	}

	#intro {
		position: absolute;

		width: 100%;
		height: 100%;

		background: rgba(0,0,0,0.5);
		z-index: 100;
		cursor: pointer;
	}
	#intro > .abscenter {
		width: 60%;
		height: 400px;
	}

	#intro h1 {
		font-size: 85pt;
		margin-bottom: 40px;
	}
	#intro h1.en {
		font-size: 70pt;
	}
	#intro h2 {
		font-size: 18pt;
	}
	#intro h2.en {
		font-size: 16pt;
	}
	#quote {
		font-size: 11pt;
		font-style: italic;
		margin-top: 3em;
		line-height: 1.5;
	}

	#video {
		position: fixed;
		width: 100%;
		height: 100%;
		z-index: 400;
	}
	#video > .abscenter {
		width: 800px;
		height: 450px;
		border: 1px solid rgba(160,160,160,0.8);
		-moz-box-sizing: content-box; -webkit-box-sizing: content-box; box-sizing: content-box;
	}
	#video video {
		display: none;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	#controls {
		/*display: none;*/
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		opacity: 0;
		transition: opacity 0.4s;
	}
	#controls:hover {
		opacity: 1;
	}
	#close {
		position: absolute;
		top: 8px;
		right: 8px;
	}
	#playpause {
		position: absolute;
		bottom: 8px;
		left: 5px;
	}
	#time {
		position: absolute;
		right: 10px;
		bottom: 16px;
		color: white;
		font-size: smaller;
		font-family: sans-serif;
	}
	#close, #playpause {
		cursor: pointer;
	}
	#progresscontainer {
		/*border: 1px solid red;*/
		position: absolute;
		height: 7px;
		width: 660px;
		left: 40px;
		bottom: 20px;
		cursor: pointer;
		background-color: rgba(255,255,255, 0.1)
	}
	#progressbar {
		width: 0%;
		height: 100%;
		background-color: white;
	}

	#totheleft {
		position: fixed;
		right: 80px;
		bottom: 10px;
		z-index: 100;
		opacity: 0.8;
	}
	#totheright {
		position: fixed;
		right: 10px;
		bottom: 10px;
		z-index: 100;
		opacity: 0.8;
	}

	#content {
		width: 2425px;   /* 6 *  .slide (341px) + #credits (379px) */
		height: 100%;
	}

	.slide {
		width: 341px;
		height: 100%;
		float: left;
		background: #999;

		font-size: 15pt;
		letter-spacing: 1px;
	}
	.slide span {
		padding: 4px;
		font-weight: normal;
		font-size: 15pt;
	}
	.slide > div {
		position: relative;
		width: 100%;
		height: 35%;
	}
	.slide > div > a {
		display: block;
		width: 100%;
		height: 100%;
	}
	.slide > div > span, .slide > div > a > span {
		color: white;
		text-decoration: none;
		position: absolute;
		width: 100%;
		text-align: center;
		bottom: 0;
	}
	.slide > div + div {
		height: 65%;
		border-top: 2px solid #ddd;
	}
	.slide > div + div > span, .slide > div + div > a > span {
		top: 0;
	}
	/*.slide > .backstage {
		height: 65%;
	}
	.slide > .artist {
		height: 35%;
	}*/

	.slide .abscenter {
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
	.slide .icon {
		position: absolute;
		text-align: center;
		color: white;
		width: 280px;
		height: 120px;
		margin: auto;
		top: 0; bottom: 0; left: 0; right: 0;
	}

	.artist > a:after, .backstage > a:after {
		content: "";
	    display: block;
	    height: 100%;
	    width: 100%;
	    opacity: 0;
	    background: rgba(0,0,0,0.4);
	}
	.artist > a:hover:after, .backstage > a:hover:after {
		opacity: 1;
	}
	.artist:hover > a > span, .backstage:hover > a > span {
		color: #888;
	}

	#jyvaskyla > .artist {
		background-position: top;
	}

	#credits {
		width: 379px;
		height: 100%;
		padding: 0 30px;
		float: left;
		position: relative; 
		height: 100%;
	}
	#credits h2 {
		font-size: 30pt;
		margin-top: 15px;
	}
	#credits h3 {
		font-size: 10pt;
	}
	#credits h4 {
		font-size: 18pt;
	}
	#credits h5 {
		font-size: 18pt;
		margin-top: 5px;
	}
	#credits div {
		position: absolute;
		bottom: 40px;
		left: 0;
		width: 100%;
	}
}

@media (max-width: 799px) {
	#video > .abscenter, #video video {
		width: 560px;
		height: 315px;
	}
	#progresscontainer {
		width: 462px;
	}
}

@media (max-height: 730px), (max-width: 767px) {
	#credits h2 {
		font-size: 24pt;
	}
	#credits h3 {
		font-size: 10pt;
		margin-top: 20px;
	}
	#credits h4 {
		font-size: 14pt;
	}
	#credits h5 {
		font-size: 14pt;
	}
	#credits div {
		bottom: 5px;
	}
	#credits a {
		font-size: smaller;
	}
}
@media (max-height: 590px), (max-width: 767px) {
	#credits h2 {
		font-size: 16pt;
	}
	#credits h3 {
		font-size: 9pt;
		margin-top: 15px;
	}
	#credits h4 {
		font-size: 11pt;
	}
	#credits h5 {
		font-size: 11pt;
	}
}
@media (max-height: 494px) {
	#credits div, #credits > a {
		display: none;
	}
}