.titlesSpace {
	background-image: url(stars.png);
	width: 100%;
	height: 100%;
}

.titlesSpaceViewport {
	-webkit-perspective: 50rem;
	-webkit-perspective-origin: center 20rem;
	perspective: 50rem;
	perspective-origin: center 20rem;
	width: 100%;
	height: 37.5rem;
	overflow: hidden;
}

.titlesNotFound {
	position: absolute;
	margin: 5rem;
	color: rgb(74,214,236);
	text-align: center;
	font-size: 1.2rem;
}

.titlesIntro {
	position: absolute;
	top: 10rem;
	left: 5rem;
	opacity: 0;
	color: rgb(74,214,236);
	font-size: 1.5em;
	font-weight: normal;
	-webkit-animation: intro 6s linear 2s 1;
	-moz-animation: intro 6s linear 2s 1;
	animation: intro 6s linear 2s 1;
}

.titlesHeader {
	position: absolute;
	top: 0rem;
	left: 50%;
	margin-left: -1.3em;
	width: 2.6em;
	opacity: 0;
	color: #000000;
	font-size: 18em;
	text-align: center;
	line-height: 0.1em;
	letter-spacing: -0.05em;
	text-shadow: -2px -2px 0 #ff6, 2px -2px 0 #ff6, -2px 2px 0 #ff6, 2px 2px 0 #ff6;
	z-index: 1;
	-webkit-animation: header 7s cubic-bezier(0.000, 0.730, 0.750, 0.750) 9s 1 normal forwards;
	-moz-animation: header 7s cubic-bezier(0.000, 0.730, 0.750, 0.750) 9s 1 normal forwards;
	animation: header 7s cubic-bezier(0.000, 0.730, 0.750, 0.750) 9s 1 normal forwards;
}

.titlesHeader sub {
	margin-top: 1em;
	display: block;
	font-size: 0.4em;
	letter-spacing: 0;
	line-height: 0.8em;
}

.titlesHeader p {
	display: none;
}

/* text shadow and animation do not work in IE9 */
html[data-sap-ui-browser="ie9"] .titlesHeader {
	top: 10%;
	opacity: 1;
	color: #ff6;
	font-size: 6em;
}
html[data-sap-ui-browser="ie9"] .titlesHeader sub {
	margin-top: 1.2em;
}
html[data-sap-ui-browser="ie9"] .titlesHeader p {
	display: block;
	font-weight: normal;
	font-size: 0.12em;
}

.titlesText {
	position: absolute;
	margin: 0 5em 0 5em;
	color: #ff6;
	text-align: center;
	font-size: 1.6em;
	font-weight: bold;
	opacity: 0;
	-webkit-animation: text 120s linear 0s 1 normal forwards;
	-moz-animation: text 120s linear 0s 1 normal forwards;
	animation: text 120s linear 0s 1 normal forwards;
	-webkit-transform-style: preserve-3d;
	-moz-transform-style: preserve-3d;
	transform-style: preserve-3d;
}

.titlesText p {
	text-align: justify;
	margin: 0.3em 0;
}

.titlesText p.caption {
	text-align: center;
	text-transform: uppercase;
}

@-webkit-keyframes intro {
	0% { opacity:0; }
	25% { opacity:1; }
	75% { opacity:1; }
	100% { opacity:0; }
}
@-moz-keyframes intro {
	0% { opacity:0; }
	25% { opacity:1; }
	75% { opacity:1; }
	100% { opacity:0; }
}
@keyframes intro {
	0% { opacity:0; }
	25% { opacity:1; }
	75% { opacity:1; }
	100% { opacity:0; }
}

@-webkit-keyframes header {
	0% { -webkit-transform: scale(1); opacity: 1; }
	100% { -webkit-transform: scale(0.0); opacity: 1; }
}
@-moz-keyframes header {
	0% { -moz-transform: scale(1); opacity: 1; }
	100% { -moz-transform: scale(0.0); opacity: 1; }
}
@keyframes header {
	0% { transform: scale(1); opacity: 1; }
	100% { transform: scale(0.0); opacity: 1; }
}

@-webkit-keyframes text {
	0% { -webkit-transform: rotateX(70deg) translateZ(200px) translateY(1100px); opacity:1; }
	40% { -webkit-transform: rotateX(70deg) translateZ(200px) translateY(-340px); opacity:1; }
	80% { -webkit-transform: rotateX(70deg) translateZ(200px) translateY(-1780px); opacity:1; }
	100% { -webkit-transform: rotateX(70deg) translateZ(200px) translateY(-2500px); opacity:0; }
}
@-moz-keyframes text {
	0% { -moz-transform: rotateX(70deg) translateZ(200px) translateY(1100px); opacity:1; }
	40% { -moz-transform: rotateX(70deg) translateZ(200px) translateY(-340px); opacity:1; }
	80% { -moz-transform: rotateX(70deg) translateZ(200px) translateY(-1780px); opacity:1; }
	100% { -moz-transform: rotateX(70deg) translateZ(200px) translateY(-2500px); opacity:0; }
}
@keyframes text {
	0% { transform: rotateX(70deg) translateZ(200px) translateY(1100px); opacity:1; }
	40% { transform: rotateX(70deg) translateZ(200px) translateY(-340px); opacity:1; }
	80% { transform: rotateX(70deg) translateZ(200px) translateY(-1780px); opacity:1; }
	100% { transform: rotateX(70deg) translateZ(200px) translateY(-2500px); opacity:0; }
}