body {
	font-family: 'Roboto Condensed', sans-serif;
	color: #fcfb0d;
	background: #000;
}
.container {
	width: 100%; 
	margin: 0 auto;
	text-align: center;
}
h2, .logo {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}
img {
	max-width: 800px;
	width: 100%;
	height: auto;
}
h1 {
	color: #4BD5EE;
	font-size: 200%;
	font-weight: 400;
}
audio { 
   display:none;
}
#intro {
	position: absolute;
	width: 100%;
	height: 45em;
	bottom: 0;
	left: 50%;
	margin-left: -25em;
	text-align: left;
	z-index: 100;
}
.intro {
  	position: absolute;
	font-size: 450%;
	font-weight: 400;
  	color: #4BD5EE;
    opacity: 0;
	animation: intro 3s ease-out 1s;
}
@keyframes intro {
  0% {
    opacity: 0;
  }  
	20% { 
    opacity: 1; 
  }
	90% { 
    opacity: 1; 
  }
	100% { 
    opacity: 0;
  }
}
#logo {
	position: absolute;
	width: 100%;
	height: 50em;
	bottom: 0;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
	z-index: 100;
}
.logo {
    opacity: 0;
    animation: logo 4s ease-out 4s; 
}    
@keyframes logo {
	0%  {
		transform:scale(1.0);
		opacity: 1;
	}
    100% {
    	transform:scale(0.1);
    	opacity: 0;
    }
}
#titles {
	position: absolute;
	width: 18em;
	height: 50em;
	bottom: 0;
	left: 50%;
	margin-left: -9em;
	font-size: 350%;
	font-weight: bold;
	text-align: justify;
	overflow: hidden;
	transform-origin: 50% 100%;
	transform: perspective(600px) rotateX(25deg);
	z-index: 100;
}
#titles:after {
	position: absolute;
	content: ' ';
	left: 0;
	right: 0;
	top: 0;
	bottom: 60%;
	background-image: linear-gradient(top, rgba(0,0,0,1) 0%, transparent 100%);
	pointer-events: none;
}
#titlecontent {
	position: absolute;
	top: 100%;
	animation: scroll 250s linear 4s;
}
@keyframes scroll {
	0% { top: 100%; }
	100% { top: -170%; }
}
/* MEDIA QUERIES */
@media only screen and (max-width: 980px) {
	#titles {
		font-size: 250%;
	}
	#intro {
		font-size: 80%;
		width: 100%;
		height: 50em;
		left: 25%;
		margin-left: -9em;
		text-align: left;
	}
}
@media only screen and (max-width: 640px) {
	#titles {
		font-size: 180%;
	}
	#intro {
		font-size: 60%;
		left: 20%;
	}
	#logo {
		height: 40em;
	}
}
@media only screen and (max-width: 420px) {
	#titles {
		font-size: 125%;
	}
	#intro {
		font-size: 40%;
		height: 60em;
		left: 25%;
	}
}