html {
	overflow-y: scroll;
}
body, html {
	height: 100%;
	margin: 0;
	background-color: black;
}

#loader {
	/* background-color: #000;
	z-index: 1; */
	width: 100vw;
	height: 100vh;

	position: fixed;
	top: 0;
	left: 0;
	display: flex;
	justify-content: center;
	align-items: center;

	z-index:  1;
}

#loader img {
	/*position: absolute;
	left: 50%;
	top: 50%;
	width: 60px;
	height: 60px;
	margin: -30px 0 0 -30px;
	z-index: 1;*/
	max-width: 80vw;
}

#loader img.hidden {
	display: none;
}
#loader img.button {
	cursor: pointer;
	animation: spin 20s linear infinite;
}
#loader img.logo {
	animation: titlefade 2s linear;
}


@keyframes spin {
	0% { transform: rotate(0deg); }
	100% { transform: rotate(360deg); }
}

@keyframes titlefade { 
	0% { opacity:0 } 
	100% { opacity:1 }
}

#hidden {
	display: none;
}


.title {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	margin: auto;
	height: 100%;
	width: 100%;
	object-fit: cover;
	
	animation-name: titlefade;
	animation-duration: 5s;
}

#title img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

a {
	color: inherit;
	text-decoration: underline;
}

a:hover { text-decoration:none; }
			
.container {
	text-align: center;
	padding-top: calc(100vh - 40px);
}

#content {
	font-family: 'Raleway', sans-serif;
	font-weight: 200;
	color: white;
	text-shadow: 1px 1px 2px  #000, -1px -1px 2px  #000, 1px -1px 2px  #000, -1px 1px 2px  #000;
	width: 50%;
	display: inline-block;
	font-size: 1.5em;
	line-height: 1.6;

	position: relative;
	z-index: 3;
}

section { padding: 3em; }

#bottom { height: 100vh; }

#audioControl { 
	position: fixed; 
	left: 0; 
	top: 0; 
	z-index: 3;
}
#audioControl.hidden { display:none; }		

@keyframes fade {
	0%   { opacity: 0; }
	0.893%  { opacity: 1; }
	1.488%  { opacity: 1; }
	2.38%  { opacity: 0; }
	100% { opacity: 0; }
}

.fadein {
	position:fixed;
	top: 0;
	left: 0;
	height:100%;
	width:100%;
	/* background-color: #000; */
	z-index: 2;
	
}
.fadein img {
	position:absolute;
	left:0;
	right:0;
	height:100%;
		width:100%;
	object-fit:cover;
	opacity:0;
	animation-name: fade;
	animation-duration: 336s;
	animation-iteration-count: infinite;
}

.fadein img:nth-child(1) { animation-delay: 16s; }
.fadein img:nth-child(2) { animation-delay: 40s; }
.fadein img:nth-child(3) { animation-delay: 64s; }
.fadein img:nth-child(4) { animation-delay: 88s; }
.fadein img:nth-child(5) { animation-delay: 112s; }
.fadein img:nth-child(6) { animation-delay: 136s; }
.fadein img:nth-child(7) { animation-delay: 160s; }
.fadein img:nth-child(8) { animation-delay: 184s; }
.fadein img:nth-child(9) { animation-delay: 208s; }
.fadein img:nth-child(10) { animation-delay: 232s; }
.fadein img:nth-child(11) { animation-delay: 256s; }
.fadein img:nth-child(12) { animation-delay: 280s; }
.fadein img:nth-child(13) { animation-delay: 304s; }
.fadein img:nth-child(14) { animation-delay: 328s; }
			
@media screen and (max-device-width: 800px) {
	#content { width: 80%; }
	.container { padding-top: calc(100vh - 200px); }
}