@font-face { /*deklarálom a használandó betűtípust*/
    font-family: 'journalregular';
    src: url('journal-webfont.eot');
    src: url('journal-webfont.eot?#iefix') format('embedded-opentype'),
         url('journal-webfont.woff') format('woff'),
         url('journal-webfont.ttf') format('truetype'),
         url('journal-webfont.svg#journalregular') format('svg');
    font-weight: normal;
    font-style: normal;
}
body {
background:url(backg.jpg); /*háttérkép beállítása*/
}
h3,a {
	font-family: 'journalregular', sans-serif; /*betű szín, méret és igazítás beállítása*/
	color: white;
	text-align:center;
	font-size: 40px;
}
.letters { /*a div méretének megadása, igazítás*/
	height: 270px;
	width: 1100px;
	margin: 0px auto;
}
.letters h2 {
	text-align: center; /*A h2 tag betűtípusának beállítása*/
	font-family: Arial, sans-serif;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
}
.letters h2 { /*igazítás*/
	text-align: center;
	padding: 0px;
}
.letters h2 span{/*betűméret és IE kompatibilitás beállítása*/
	font-size: 105px;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=90)";/*IE8*/
	filter: alpha(opacity=70);/*IE5-7*/
   	opacity: 0.9; /*átlátszóság értékének megadása*/
   	text-shadow: 0px 0px 2px #373852, 1px 1px 4px rgba(0,0,0,0.7); /*árnyékolás beállítása*/
	-webkit-transition: all 0.4s linear; /*az átmenet idejének és módjának definiálása*/
	-moz-transition: all 0.4s linear;
	-o-transition: all 0.4s linear;
	-ms-transition: all 0.4s linear;
	transition: all 0.4s linear;
	-webkit-animation: elotunes 0.8s linear backwards; /*elotunes nevu keyframes meghívása és paramétereinek definiálása*/
	-moz-animation: elotunes 0.8s linear backwards;
	-o-animation: elotunes 0.8s linear backwards;
	animation: elotunes 0.8s linear backwards;
}
.letters h2 span:hover{ /*hover esetén fehér szín*/
	color: white;
}
.letters h2 span:nth-child(1) {  /*Az egyes betűk előtűnésének időzítése*/
	-webkit-animation-delay: 1.3s;/*safari es chrome*/
	-moz-animation-delay: 1.3s;/*firefox*/
	-o-animation-delay: 1.3s;/*opera*/
	animation-delay: 1.3s;/*default*/
}
.letters h2 span:nth-child(2) {
	-webkit-animation-delay: 0.2s;
	-moz-animation-delay: 0.2s;
	-o-animation-delay: 0.2s;
	animation-delay: 0.2s;
}
.letters h2 span:nth-child(3) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-o-animation-delay: 1s;
	animation-delay: 1s;
}
.letters h2 span:nth-child(4) {
	-webkit-animation-delay: 0.5s;
	-moz-animation-delay: 0.5s;
	-o-animation-delay: 0.5s;
	animation-delay: 0.5s;
}
.letters h2 span:nth-child(5) {
	-webkit-animation-delay: 1.2s;
	-moz-animation-delay: 1.2s;
	-o-animation-delay: 1.2s;
	animation-delay: 1.2s;
}
@keyframes elotunes  /*css3 animáció előtűnés effekt*/
{
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 90px #373852;
   	color: transparent;
 }
 30% {
   	opacity: 0.3;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
 70% {
   	opacity: 0.7;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
 100% {
    color: #373852;
   	opacity: 1;
   	text-shadow: 0px 0px 2px #373852, 1px 1px 4px rgba(0,0,0,0.7);
 }
}
@-moz-keyframes elotunes /*firefox*/
{
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 90px #373852;
   	color: transparent;
 }
  30% {
   	opacity: 0.3;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
  70% {
   	opacity: 0.7;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
 100% {
    color: #373852;
   	opacity: 1;
   	text-shadow: 0px 0px 1px #373852, 1px 1px 3px rgba(0,0,0,0.7);
 }
}
@-webkit-keyframes elotunes /*safari és chrome*/
{
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 90px #373852;
   	color: transparent;
 }
  30% {
   	opacity: 0.3;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
  70% {
   	opacity: 0.7;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
  100% {
    color: #373852;
   	opacity: 1;
   	text-shadow: 0px 0px 1px #373852, 1px 1px 3px rgba(0,0,0,0.7);
 }
}
@-o-keyframes elotunes /*opera*/
{
 0% {
   	opacity: 0;
   	text-shadow: 0px 0px 90px #373852;
   	color: transparent;
 }
  30% {
   	opacity: 0.3;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
  70% {
   	opacity: 0.7;
   	text-shadow: 0px 0px 10px #373852;
   	color: transparent;
 }
  100% {
    color: #373852;
   	opacity: 1;
   	text-shadow: 0px 0px 1px #373852, 1px 1px 3px rgba(0,0,0,0.7);
 }
}