@charset "utf-8";
/* CSS Document */


.sp-container, .sp-container-1, .sp-container-2, .sp-container-3, .sp-container-4 {
	position: relative;
	top: 10px;
	left: 0px;
	width: 100%;
	height: 100%;
	z-index: 0;
	
}
.sp-content {
	position: absolute;
	width: 100%;
	height: 100%;
	left: 0px;
	top: 0px;
}
.sp-container h2, .sp-container-1 h2, .sp-container-2 h2, .sp-container-3 h2, .sp-container-4 h2 {
	position: absolute;
	line-height: 60px;
	height: 44px;
	font-size: 44px;
	width:100%;
	text-align: center;
	color:#C69;
	opacity: 0;
	-webkit-animation: blurFadeInOut 3s ease-in backwards;
	-moz-animation: blurFadeInOut 3s ease-in backwards;
	-ms-animation: blurFadeInOut 3s ease-in backwards;
	animation: blurFadeInOut 3s ease-in backwards;
	border:0px;
}
.sp-container h2 :hover, .sp-container-1 h2 :hover, .sp-container-2 h2 :hover, .sp-container-3 h2 :hover, .sp-container-4 h2 :hover {
	text-decoration:none;
	color:#C69;
}
.sp-container h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
}
.sp-container h2.frame-2 {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}
.sp-container h2.frame-3 {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
}
.sp-container h2.frame-4 {
	-webkit-animation-delay: 9s;
	-moz-animation-delay: 9s;
	-ms-animation-delay: 9s;
	animation-delay: 9s;
}
.sp-container h2.frame-5 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container h2.frame-5 span {
	-webkit-animation: blurFadeIn 2s ease-in 12s backwards;
	-moz-animation: blurFadeIn 1s ease-in 12s backwards;
	-ms-animation: blurFadeIn 2s ease-in 12s backwards;
	animation: blurFadeIn 2s ease-in 12s backwards;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container h2.frame-5 span:nth-child(2) {
	-webkit-animation-delay: 13s;
	-moz-animation-delay: 13s;
	-ms-animation-delay: 13s;
	animation-delay: 13s;
}
.sp-container h2.frame-5 span:nth-child(3) {
	-webkit-animation-delay: 14s;
	-moz-animation-delay: 14s;
	-ms-animation-delay: 14s;
	animation-delay: 14s;
}


/*1 frame*/
.sp-container-1 h2.frame-1 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}

.sp-container-1 h2.frame-1 span {
	-webkit-animation: blurFadeIn 2s ease-in 0s backwards;
	-moz-animation: blurFadeIn 1s ease-in 0s backwards;
	-ms-animation: blurFadeIn 2s ease-in 0s backwards;
	animation: blurFadeIn 2s ease-in 0s backwards;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container-1 h2.frame-1 span:nth-child(2) {
	-webkit-animation-delay: 1s;
	-moz-animation-delay: 1s;
	-ms-animation-delay: 1s;
	animation-delay: 1s;
}
.sp-container-1 h2.frame-1 span:nth-child(3) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-ms-animation-delay: 2s;
	animation-delay: 2s;
}
/*1 frame end*/

/*2 frames*/
.sp-container-2 h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
}

.sp-container-2 h2.frame-2 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}

.sp-container-2 h2.frame-2 span {
	-webkit-animation: blurFadeIn 2s ease-in 3s backwards;
	-moz-animation: blurFadeIn 1s ease-in 3s backwards;
	-ms-animation: blurFadeIn 2s ease-in 3s backwards;
	animation: blurFadeIn 2s ease-in 3s backwards;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container-2 h2.frame-2 span:nth-child(2) {
	-webkit-animation-delay: 4s;
	-moz-animation-delay: 4s;
	-ms-animation-delay: 4s;
	animation-delay: 4s;
}
.sp-container-2 h2.frame-2 span:nth-child(3) {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-ms-animation-delay: 5s;
	animation-delay: 5s;
}
/*2 frames end*/

/*3 frames*/
.sp-container-3 h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
}
.sp-container-3 h2.frame-2 {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}

.sp-container-3 h2.frame-3 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}

.sp-container-3 h2.frame-3 span {
	-webkit-animation: blurFadeIn 2s ease-in 6s backwards;
	-moz-animation: blurFadeIn 1s ease-in 6s backwards;
	-ms-animation: blurFadeIn 2s ease-in 6s backwards;
	animation: blurFadeIn 2s ease-in 6s backwards;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container-3 h2.frame-3 span:nth-child(2) {
	-webkit-animation-delay: 5s;
	-moz-animation-delay: 5s;
	-ms-animation-delay: 5s;
	animation-delay: 5s;
}
.sp-container-3 h2.frame-3 span:nth-child(3) {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
}
/*3 frames end*/


/*4 frames*/
.sp-container-4 h2.frame-1 {
	-webkit-animation-delay: 0s;
	-moz-animation-delay: 0s;
	-ms-animation-delay: 0s;
	animation-delay: 0s;
}
.sp-container-4 h2.frame-2 {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}
.sp-container-4 h2.frame-3 {
	-webkit-animation-delay: 6s;
	-moz-animation-delay: 6s;
	-ms-animation-delay: 6s;
	animation-delay: 6s;
}
.sp-container-4 h2.frame-4 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container-4 h2.frame-4 span {
	-webkit-animation: blurFadeIn 2s ease-in 9s backwards;
	-moz-animation: blurFadeIn 1s ease-in 9s backwards;
	-ms-animation: blurFadeIn 2s ease-in 9s backwards;
	animation: blurFadeIn 2s ease-in 9s backwards;
	opacity: 1;
	text-shadow: 0px 0px 1px #5d3d34;
}
.sp-container-4 h2.frame-4 span:nth-child(2) {
	-webkit-animation-delay: 10s;
	-moz-animation-delay: 10s;
	-ms-animation-delay: 10s;
	animation-delay: 10s;
}
.sp-container-4 h2.frame-4 span:nth-child(3) {
	-webkit-animation-delay: 11s;
	-moz-animation-delay: 11s;
	-ms-animation-delay: 11s;
	animation-delay: 11s;
}
/*4 frames end*/

.sp-globe {
	position: absolute;
	width: 282px;
	height: 273px;
	left: 50%;
	top: 50%;
	margin: -137px 0 0 -141px;
	background: transparent url(http://web-sonick.zz.mu/images/sl/globe.png) no-repeat top left;
	-webkit-animation: fadeInBack 3.6s linear 14s backwards;
	-moz-animation: fadeInBack 3.6s linear 14s backwards;
	-ms-animation: fadeInBack 3.6s linear 14s backwards;
	animation: fadeInBack 3.6s linear 14s backwards;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	filter: alpha(opacity=30);
	opacity: 0.3;
	-webkit-transform: scale(5);
	-moz-transform: scale(5);
	-o-transform: scale(5);
	-ms-transform: scale(5);
	transform: scale(5);
}
.sp-circle-link {
	position: absolute;
	left: 80%;
	top: 100px;
	margin-left: -50px;
	text-align: center;
	line-height: 100px;
	width: 100px;
	height: 100px;
	background: #fff;
	color: rgba(20, 152, 48, 1);
	font-size: 25px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
	-webkit-animation: fadeInRotate 1s linear 16s backwards;
	-moz-animation: fadeInRotate 1s linear 16s backwards;
	-ms-animation: fadeInRotate 1s linear 16s backwards;
	animation: fadeInRotate 1s linear 16s 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: rgba(20, 152, 48, 1);
	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 #5d3d34;
		-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 #5d3d34;
		-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 #5d3d34;
		-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 #5d3d34;
		-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 #5d3d34;
		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 #5d3d34;
		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);
	}
}

@media screen and (max-width: 640px){
    .sp-container h2 {
        font-size:45px;
		line-height:50px;
    }
	.sp-circle-link {
        font-size:14px;
		line-height:18px;
    }
}

@media screen and (max-width: 320px){
    .sp-container h2, .sp-container-2 h2 {
        font-size:25px;
		line-height:25px;
    }
	.sp-circle-link {
        font-size:10px;
		line-height:10px;
    }
}