/* Main styles */
@font-face {
    font-family: "Aachen Bold";
	src: url("../../fonts/Aachen Bold.eot"); /* IE9*/
	src: url("../../fonts/Aachen Bold.eot?#iefix") format("embedded-opentype"), /* IE6-IE8 */
		url("../../fonts/Aachen Bold.woff2") format("woff2"), /* chrome、firefox */
		url("../../fonts/Aachen Bold.woff") format("woff"), /* chrome、firefox */
		url("../../fonts/Aachen Bold.ttf") format("truetype"), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
		url("../../fonts/Aachen Bold.svg#Aachen Bold") format("svg"); /* iOS 4.1- */
}

.text {
  fill: url(#p-fire);
  overflow: hidden;
padding: 0;
margin: 0;
position: absolute;
top: 0;
left: 0;
text-align: center;
}

/* Other styles */
html, body {
  height: 60px;
}

body {
  font-family:"Aachen Bold" !important;
  background: #000;
/*  background-size: .2em 100%; */
  font-size: 30px;
  margin: 0;
  font-style:normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h2  {
	font-family:"Aachen Bold" !important;
	font-weight: lighter;
    font-size:30px;
	width: 100%;
	overflow: hidden;
	padding: 0;
	margin: 0;
	position: absolute;
	top: 8px;
	left: 0;
	text-align: center;
    color: red;
	height: 100%;
	opacity: 0;
	/* Centering with flexbox 
	display: -webkit-box;
	display: -moz-box;
	display: -ms-flexbox;
	display: -webkit-flex;
	display: flex;
	-webkit-flex-direction: row;
	-ms-flex-direction: row;
	flex-direction: row;
	-webkit-box-pack: center;
	-moz-box-pack: center;
	-webkit-justify-content: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-align: center;
	-moz-box-align: center;
	-webkit-align-items: center;
	-ms-flex-align: center;
	align-items: center;
	background-color: #000;*/
/*    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;*/
}

svg {
  position: absolute;
  width: 100%;
  height: 60px;
}

#ele1 {
	display: inline-block;
	-webkit-animation: FadeIn 5.2s linear forwards;
	-moz-animation: FadeIn 5.2s linear forwards;
	animation: FadeIn 5.2s linear forwards;
}

#ele2 {
	display: inline-block;
	-webkit-animation: FadeIn 5s linear 5s;
	-moz-animation: FadeIn 5s linear 5s;
	animation: FadeIn 5s linear 5s;
}

#ele3 {
	display: inline-block;
	-webkit-animation: FadeIn 5s linear 10s;
	-moz-animation: FadeIn 5s linear 10s;
	animation: FadeIn 5s linear 10s;
}

#ele4 {
	display: inline-block;
	-webkit-animation: FadeIn 5s linear 15s;
	-moz-animation: FadeIn 5s linear 15s;
	animation: FadeIn 5s linear 15s;
}

/* Titulo */
#ele5 {
	font-size: 40px;
	/*letter-spacing: .15em;*/
	display: inline-block;
	-webkit-animation: FadeIn 8s linear 21s;
	-moz-animation: FadeIn 8s linear 21s;
	animation: FadeIn 8s linear 21s;
	opacity: 0;
}

#ele6 {
	font-size: 25px;
	display: inline-block;
	-webkit-animation: FadeIn 5s linear 29s;
	-moz-animation: FadeIn 5s linear 29s;
	animation: FadeIn 5s linear 29s;
}

#ele7 {
	display: inline-block;
	-webkit-animation: FadeIn 5s linear 34s;
	-moz-animation: FadeIn 5s linear 34s;
	animation: FadeIn 5s linear 34s;
}

#ele8 {
	font-size: 30px;
	display: inline-block;
	letter-spacing: 5px;
	-webkit-animation: FadeIn 5s linear 39s forwards;
	-moz-animation: FadeIn 5s linear 39s forwards;
	animation: FadeIn 5s linear 39s forwards;
}

@-webkit-keyframes FadeIn { 
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0.75;
	}
	80% {
		opacity: 0.75;
	}
	100% {
		opacity: 0;
	}
}

@-moz-keyframes FadeIn { 
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0.75;
	}
	80% {
		opacity: 0.75;
	100% {
		opacity: 0;
	}
}

@keyframes FadeIn { 
	0% {
		opacity: 0;
	}
	40% {
		opacity: 0.75;
	}
	80% {
		opacity: 0.75
	}
	100% {
		opacity: 0;
	}
}