body {
	font-family: 'BebasNeueRegular';
}
h1 {font-family: 'BebasNeueRegular'; font-size:36px;}
h2.frame-5 {font-family: 'BebasNeueRegular'; font-size:18px;}
h3 {font-family: 'BebasNeueRegular'; font-size:24px;}
.text {font-family: Arial, Verdana; font-size:14px;font-weight:bold;}


#backgroundb {position:fixed;  margin-right: 0px; right:-120px; z-index:1; height:100%;}
h1.main,p.demos {
	-webkit-animation-delay: 18s;
	-moz-animation-delay: 18s;
	-o-animation-delay: 18s;
	-ms-animation-delay: 18s;
	animation-delay: 18s;
}
.sp-container {
	position: fixed;
	top: 0px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;

}
.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
	z-index: 1000;
}
.sp-container h2 {
	position: absolute;
	top: 50%;
	line-height: 100px;
	height: 100px;
	margin-top: -50px;
	font-size: 100px;
	width: 100%;
	text-align: center;
	color: transparent;
	-webkit-animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	-o-animation: blurFadeInOut 3s ease-in backwards;
	animation: blurFadeInOut 3s ease-in backwards;
}
.sp-container h3 {
	position: absolute;
	top: 50%;
	line-height: 100px;
	height: 100px;
	margin-top: -50px;
	font-size: 70px;
	width: 100%;
	text-align: center;
	color: transparent;
	-webkit-animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	-o-animation: blurFadeInOut 3s ease-in backwards;
	animation: blurFadeInOut 3s ease-in backwards;
}

.sp-container h3.frame-1 {
font-size:82px;
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	-o-animation-delay: 0s;
	animation-delay: 0s;
}
.sp-container h2.frame-2 {
	font-size:48px;
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	-o-animation-delay: 3s;
	animation-delay: 3s;
}
.sp-container h2.frame-3 {
font-size: 46px;
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-ms-animation-delay: 6s;
	-o-animation-delay: 6s;
	animation-delay: 6s;
}
.sp-container h2.frame-32 {
font-size: 58px;
	-webkit-animation-delay: 9s;
	-moz-animation-delay: 9s;
	-ms-animation-delay: 9s;
	-o-animation-delay: 9s;
	animation-delay: 9s;
}

.sp-container h3.frame-4 {
	font-size: 64px;
	-webkit-animation-delay: 12s;
	-moz-animation-delay: 12s;
	-ms-animation-delay: 12s;
	-o-animation-delay: 12s;
	animation-delay: 12s;
}
.sp-container h2.frame-5 {
	-webkit-animation: none;
	-moz-animation: none;
	-o-animation: none;
	-ms-animation: none;
	animation: none;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-5 span {
	-webkit-animation: blurFadeIn 3s ease-in 15s backwards;
	-moz-animation: blurFadeIn 3s ease-in 15s backwards;
	-o-animation: blurFadeIn 3s ease-in 15s backwards;
	-ms-animation: blurFadeIn 3s ease-in 15s backwards;
	animation: blurFadeIn 3s ease-in 15s backwards;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
	 font-size:64px;
}
.sp-container h2.frame-5 span:nth-child(2) {
	-webkit-animation-delay: 16s;
	-moz-animation-delay: 16s;
	-o-animation-delay: 16s;
	-ms-animation-delay: 16s;
	animation-delay: 16s;
}
.sp-container h2.frame-5 span:nth-child(3) {
	-webkit-animation-delay: 17s;
	-moz-animation-delay: 17s;
	-o-animation-delay: 17s;
	-ms-animation-delay: 17s;
	animation-delay: 17s;
}

.sp-circle-link {
	position: absolute;
	left: 50%;
	bottom: 150px;
	margin-left: -150px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: silver;
	color: #e8e8e8;
	-webkit-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4); 
	-moz-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	-ms-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	-o-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	font-size: 25px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: blurFadeIn 3s ease-in 19s backwards;
	-moz-animation: blurFadeIn 3s ease-in 19s backwards;
	-ms-animation: blurFadeIn 3s ease-in 19s backwards;
	-o-animation: blurFadeIn 3s ease-in 19s backwards;
	animation: blurFadeIn 3s ease-in 19s backwards;
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
}
.sp-circle-link:hover {
	background: #8B1818;
	color: #fff;
}
.sp-circle-link-reel{
	position: absolute;
	left: 50%;
	bottom: 150px;
	margin-left: 50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: silver;
	color: #e8e8e8;
	font-size: 25px;
		-webkit-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4); 
	-moz-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	-ms-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	-o-box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	box-shadow: 0 0 12px 3px rgba(0,0,0,0.4);
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: blurFadeIn 3s ease-in 20s backwards;
	-moz-animation: blurFadeIn 3s ease-in 20s backwards;
	-ms-animation: blurFadeIn 3s ease-in 20s backwards;
	-o-animation: blurFadeIn 3s ease-in 20s backwards;
	animation: blurFadeIn 3s ease-in 20s backwards;
	-webkit-transform: scale(1) rotate(0deg);
	-moz-transform: scale(1) rotate(0deg);
	-o-transform: scale(1) rotate(0deg);
	-ms-transform: scale(1) rotate(0deg);
	transform: scale(1) rotate(0deg);
}
.sp-circle-link-reel:hover {
	background: #8B1818;
	color: #fff;
}


/**/
@-webkit-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-webkit-transform: scale(0);
	}
}
@-webkit-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-webkit-transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		-webkit-transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes blurFadeInDev{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 0px #fff;
		-webkit-transform: scale(5);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 0px #fff;
		-webkit-transform: scale(3);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 0px #fff;
		-webkit-transform: scale(1);
	}
}
@-webkit-keyframes fadeInBack{
	0%{
		opacity: 0;
		-webkit-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-webkit-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-webkit-transform: scale(5);
	}
}
@-webkit-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-webkit-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-webkit-transform: scale(1) rotate(0deg);
	}
}
/**/
@-moz-keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		-moz-transform: scale(0);
	}
}
@-moz-keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		-moz-transform: scale(1.3);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		-moz-transform: scale(1);
	}
}
@-moz-keyframes fadeInBack{
	0%{
		opacity: 0;
		-moz-transform: scale(0);
	}
	50%{
		opacity: 0.4;
		-moz-transform: scale(2);
	}
	100%{
		opacity: 0.2;
		-moz-transform: scale(5);
	}
}
@-moz-keyframes fadeInRotate{
	0%{
		opacity: 0;
		-moz-transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		-moz-transform: scale(1) rotate(0deg);
	}
}
/**/
@keyframes blurFadeInOut{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	20%,75%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
	100%{
		opacity: 0;
		text-shadow: 0px 0px 50px #fff;
		transform: scale(0);
	}
}
@keyframes blurFadeIn{
	0%{
		opacity: 0;
		text-shadow: 0px 0px 40px #fff;
		transform: scale(1.3);
	}
	50%{
		opacity: 0.5;
		text-shadow: 0px 0px 10px #fff;
		transform: scale(1.1);
	}
	100%{
		opacity: 1;
		text-shadow: 0px 0px 1px #fff;
		transform: scale(1);
	}
}
@keyframes fadeInBack{
	0%{
		opacity: 0;
		transform: scale(0);
	}
	50%{
		opacity: 0.4;
		transform: scale(2);
	}
	100%{
		opacity: 0.2;
		transform: scale(5);
	}
}
@keyframes fadeInRotate{
	0%{
		opacity: 0;
		transform: scale(0) rotate(360deg);
	}
	100%{
		opacity: 1;
		transform: scale(1) rotate(0deg);
	}
}

/* Step 1: Build an Animation */
@-webkit-keyframes aniload {
from{-webkit-transform:translate(-2200px, 0px);}
to{-webkit-transform:translate(0px, 0px)}
}

@-moz-keyframes aniload {
from{-moz-transform:translate(-2200px, 0px)}
to{-moz-transform:translate(0px, 0px)}
}

@-ms-keyframes aniload {
from{-ms-transform:translate(-2200px, 0px)}
to{-ms-transform:translate(0px, 0px)}
}

@-o-keyframes aniload {
from{-ms-transform:translate(-2200px, 0px)}
to{-ms-transform:translate(0px, 0px)}
}

@keyframes aniload {
from{transform:translate(-2200px, 0px)}
to{transform:translate(0px, 0px)}
}