@import url('https://fonts.googleapis.com/css?family=Barlow');



h1.main, p.demos {

	-webkit-animation-delay: 18s;

	-moz-animation-delay: 18s;

	-ms-animation-delay: 18s;

	animation-delay: 18s;

}

.sp-content {

	position: absolute;

	z-index: 1000;

	width: 770px;

	right: 9%;

	bottom: 77%;



}

.sp-container h2 {

	font-family: '_DaxCECondensed-Black.ttf';	

   opacity: 1;

	position: absolute;

	top: 50%;

/*	line-height: 100px;*/

	margin: 0px;

	padding: 0px;

	height: 90px;

	margin-top: -50px;

	font-size: 3.4vw;

	width: 100%;

	text-align: center;

	color: #ef533c;

	-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;

}

.sp-container h2.frame-1 {

	-webkit-animation-delay: 0s;

	-moz-animation-delay: 0s;

	-ms-animation-delay: 0s;

	animation-delay: 0s;

	opacity: 0;

}

.sp-container h2.frame-2 {

	-webkit-animation-delay: 3s;

	-moz-animation-delay: 3s;

	-ms-animation-delay: 3s;

	animation-delay: 3s;

	opacity: 0;

}

.sp-container h2.frame-3 {

	-webkit-animation-delay: 6s;

	-moz-animation-delay: 6s;

	-ms-animation-delay: 6s;

	animation-delay: 6s;

	opacity: 0;

}

.sp-container h2.frame-4 {

	font-size: 3.8vw;

	-webkit-animation-delay: 9s;

	-moz-animation-delay: 9s;

	-ms-animation-delay: 9s;

	animation-delay: 9s;

	opacity: 0;

}

.sp-container h2.frame-5 {

	-webkit-animation: none;

	-moz-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 12s backwards;

	-moz-animation: blurFadeIn 1s ease-in 12s backwards;

	-ms-animation: blurFadeIn 3s ease-in 12s backwards;

	animation: blurFadeIn 3s ease-in 12s backwards;

	color: #ef533c;

	text-shadow: 0px 0px 1px #fff;

}

.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;

}

.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: 50%;

	bottom: 100px;

	margin-left: -50px;

	text-align: center;

	line-height: 100px;

	width: 100px;

	height: 100px;

	background: #fff;

	color: #3f1616;

	font-size: 3.4vw;

	-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: #85373b;

	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 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.5);

	}

	100% {

		opacity: 0;

		text-shadow: 0px 0px 50px #fff;

		transform: scale(2);

	}

}

@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);

	}

}





@media (max-width: 1570px) {



.sp-content {

	width: 670px;

	right: 2%;

	}



}



@media (max-width: 1200px) {



.sp-content {

	width: 470px;

	right: 1%;



}



}



@media (max-width: 991px) {



.sp-content {

	width: 400px;

	right: 0%;

	bottom: 67%;

}



}









@media (max-width: 800px) {



}



@media  (max-width: 768px) {

}





@media  (max-width: 480px) {

}