.parallax-bg {
	background-image: url(../img/top.jpg);
	background-attachment: fixed;
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}

section.top-face {
	color: #fff;
	position: relative;
	width: auto;
	height: 300px;
}
section.top-face span {
	display: block;
	position: absolute;
	width: auto;
	bottom: 3%;
	font-size: 2em;
}
section.top-face span:nth-child(1),
section.top-face span:nth-child(2) {
	animation-name: fadeInL;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-delay: 0.5s;
	animation-direction: normal;
	animation-fill-mode: backwards;
}
section.top-face span:nth-child(4),
section.top-face span:nth-child(5),
section.top-face span:nth-child(6),
section.top-face span:nth-child(7),
section.top-face span:nth-child(8),
section.top-face span:nth-child(9),
section.top-face span:nth-child(10),
section.top-face span:nth-child(11),
section.top-face span:nth-child(12) {
	animation-name: fadeInR;
	animation-timing-function: ease;
	animation-iteration-count: 1;
	animation-delay: 0.5s;
	animation-direction: normal;
	animation-fill-mode: backwards;
}

section.top-face span:nth-child(1) {
	animation-duration: 1s;
	right: 50%;
}
section.top-face span:nth-child(2) {
	animation-duration: 3s;
	right: 46%;
}
section.top-face span:nth-child(3) {
	animation: 4s ease-in-out infinite alternate rotationY;
	right: 40%;
	font-size: 4em !important;
}
section.top-face span:nth-child(4) {
	animation-duration: 1s;
	right: 36%;
}
section.top-face span:nth-child(5) {
	animation-duration: 3s;
	right: 32%;
}
section.top-face span:nth-child(6) {
	animation-duration: 5s;
	right: 28%;
}
section.top-face span:nth-child(7) {
	animation-duration: 7s;
	right: 24%;
}
section.top-face span:nth-child(8) {
	animation-duration: 9s;
	right: 20%;
}
section.top-face span:nth-child(9) {
	animation-duration: 11s;
	right: 16%;
}
section.top-face span:nth-child(10) {
	animation-duration: 13s;
	right: 12%;
}
section.top-face span:nth-child(11) {
	animation-duration: 15s;
	right: 8%;
}
section.top-face span:nth-child(12) {
	animation-duration: 17s;
	right: 4%;
}
@keyframes fadeInL {
	from {
		opacity: 0;
		transform: translateX(-40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes fadeInR {
	from {
		opacity: 0;
		transform: translateX(40px);
	}
	to {
		opacity: 1;
		transform: translateX(0);
	}
}
@keyframes rotationY {
	0%		{	transform: rotateY(0);	}
	100%	{	transform: rotateY(360deg);	}
}


@media screen and (max-width: 960px) {
	section.top-face {
		height: 120px;
	}
	section.top-face span {
		font-size: 1em;
	}
	section.top-face span:nth-child(1) {
		right: 75%;
	}
	section.top-face span:nth-child(2) {
		right: 69%;
	}
	section.top-face span:nth-child(3) {
		right: 57%;
		font-size: 2em !important;
	}
	section.top-face span:nth-child(4) {
		right: 50%;
	}
	section.top-face span:nth-child(5) {
		animation-duration: 2s;
		right: 44%;
	}
	section.top-face span:nth-child(6) {
		animation-duration: 3s;
		right: 38%;
	}
	section.top-face span:nth-child(7) {
		animation-duration: 4s;
		right: 32%;
	}
	section.top-face span:nth-child(8) {
		animation-duration: 5s;
		right: 26%;
	}
	section.top-face span:nth-child(9) {
		animation-duration: 6s;
		right: 20%;
	}
	section.top-face span:nth-child(10) {
		animation-duration: 7s;
		right: 14%;
	}
	section.top-face span:nth-child(11) {
		animation-duration: 8s;
		right: 8%;
	}
	section.top-face span:nth-child(12) {
		animation-duration: 9s;
		right: 2%;
	}
}
