@import url('https://fonts.googleapis.com/css?family=Barlow');
*,
*:before,
*:after {
  padding: 0;
  margin: 0;
  border: 0;
  box-sizing: border-box; }
body {
	background: #310404 url(nahuy.webp) no-repeat center center fixed; 
	height: 100%;
	-webkit-background-size: cover;
	-moz-background-size: cover;
	-o-background-size: cover;
	background-size: cover;
	font-family: 'Barlow', sans-serif;
}
.container {
	width: 100%;
	position: relative;
	overflow: hidden;
}
a {
	text-decoration: none;
}
h1.main, p.demos {
	-webkit-animation-delay: 18s;
	-moz-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;
	background: -webkit-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	background: -moz-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	background: -ms-radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
	background: radial-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.3) 35%, rgba(0, 0, 0, 0.7));
}
.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: 90px;
	margin-top: -50px;
	font-size: 90px;
	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;
	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;
}

.sp-container h2.frame-2 {
	-webkit-animation: none;
	-moz-animation: none;
	-ms-animation: none;
	animation: none;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-2 span {
	-webkit-animation: blurFadeIn 3s ease-in 1s backwards;
	-moz-animation: blurFadeIn 1s ease-in 1s backwards;
	-ms-animation: blurFadeIn 3s ease-in 1s backwards;
	animation: blurFadeIn 3s ease-in 1s backwards;
	color: transparent;
	text-shadow: 0px 0px 1px #fff;
}
.sp-container h2.frame-2 span:nth-child(2) {
	-webkit-animation-delay: 2s;
	-moz-animation-delay: 2s;
	-ms-animation-delay: 2s;
	animation-delay: 2s;
}
.sp-container h2.frame-2 span:nth-child(3) {
	-webkit-animation-delay: 3s;
	-moz-animation-delay: 3s;
	-ms-animation-delay: 3s;
	animation-delay: 3s;
}
.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: 15%;
	margin-left: -50px;
	text-align: center;
	line-height: 50px;
	width: 200px;
	height: 55px;
	background: #ff0000;
	color: #fff;
	font-size: 25px;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border: 3px solid #262626;
	border-radius: 4px;
	box-shadow: 7px 7px 10px #353535;
	-webkit-animation: fadeInRotate 1s linear 3s backwards;
	-moz-animation: fadeInRotate 1s linear 3s backwards;
	-ms-animation: fadeInRotate 1s linear 3s backwards;
	animation: fadeInRotate 1s linear 3s 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: #ff0000;
	border: 3px solid #000;
	color: #000;
}
/**/

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

/*--------------------------------------------------------------
 *# Header
 *-------------------------------------------------------------- */
/* line 168, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
#header {
  background-color: #353535;
  transition: all 0.5s;
  z-index: 997;
  padding: 0;
  box-shadow: 0px 0px 8px #000;
}

/* line 174, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
#header.header-scrolled {
  padding: 0;
  box-shadow: 0px 8px 8px #000;
}

/* line 179, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
#header .logo img {
  max-height: 90px;
  padding: 0;
}

/* line 189, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
#header .round:hover {
  background-color: #000000;
}

/*--------------------------------------------------------------
 *# Navigation Menu
 *-------------------------------------------------------------- */
/**
 ** Desktop Navigation */
/* line 224, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
#header .logo img {
	max-height: 160px;
	padding: 0;}

.navbar {
  padding: 0;
  background-color: #353535;
}

/* line 228, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar ul {
  margin: 0;
  padding: 0;
  display: flex;
  list-style: none;
  align-items: center;
}

/* line 235, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar li {
  position: relative;
}

/* line 238, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 10px 30px;
  font-family: "Raleway", sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #ffffff;
  white-space: nowrap;
  transition: 0.4s;
}

/* line 250, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar a i {
  font-size: 12px;
  line-height: 0;
  margin-left: 5px;
}

/* line 255, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar a:hover {
  color: #bb0f0f;
}

/* line 258, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .active, .navbar li:hover > a {
  color: #bb0f0f;
}

/* line 263, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown ul {
  display: block;
  position: absolute;
  left: -100px;
  top: calc(100% + 30px);
  margin: 0;
  padding: 10px 0;
  z-index: 99;
  opacity: 0;
  visibility: hidden;
  border: 2px solid #2b2a2a;
  border-radius: 3px;
  background: #bb0f0f;
  box-shadow: 10px 10px 7px #000000;
  transition: 0.4s;
}

/* line 279, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown ul li {
  min-width: 200px;
}

/* line 282, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown ul a {
  padding: 10px 20px;
  font-size: 16px;
}

/* line 286, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown ul a i {
  font-size: 12px;
}

/* line 289, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown ul a:hover {
  color: #000;
}

/* line 292, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown ul .active:hover, .navbar .dropdown ul li:hover > a {
  color: #000;
}

/* line 295, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown:hover > ul {
  opacity: 1;
  top: 100%;
  visibility: visible;
}

/* line 301, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown .dropstart ul {
  top: -100px;
  left: calc(100% - 30px);
  visibility: hidden;
}

/* line 306, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar .dropdown .dropstart:hover > ul {
  opacity: 1;
  top: 0;
  left: 100%;
  visibility: visible;
}

@media (max-width: 1366px) {
  /* line 314, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .navbar .dropdown .dropdown ul {
    left: -90%;
  }
  /* line 317, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .navbar .dropdown .dropdown:hover > ul {
    left: -100%;
  }
}

/*--------------------------------------------------------------
 *# Mobile Navigation
 *-------------------------------------------------------------- */
/* line 324, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.mobile-nav-toggle {
  color: #bb0f0f;
  font-size: 120px;
  cursor: pointer;
  display: none;
  line-height: 0;
  transition: 0.5s;
}

/* line 333, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.mobile-nav-toggle.bi-x {
  color: #bb0f0f;
  margin-left: 82%;
}

@media (max-width: 991px) {
  /* line 338, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .mobile-nav-toggle {
    display: block;
  }
  /* line 341, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .navbar ul {
    display: none;
  }
}

/* line 344, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile {
  position: fixed;
  overflow: hidden;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  transition: 0.3s;
  z-index: 999;
}

/* line 355, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .mobile-nav-toggle {
  position: absolute;
  top: 15px;
  left: 15px;
}

/* line 360, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile ul {
  display: block;
  position: absolute;
  top: 55px;
  right: 15px;
  bottom: 15px;
  left: 15px;
  padding: 10px 0;
  background-color: #353535;
  overflow-y: auto;
  transition: 0.3s;
}

/* line 372, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile a {
  padding: 10px 20px;
  font-size: 16px;
  color: #ffffff;
}

@media (min-width: 768px) {
  /* line 372, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .navbar-mobile a {
    font-size: 20px;
  }
}

/* line 379, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .getstarted {
  margin: 15px;
}

/* line 383, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .dropdown ul {
  position: static;
  display: none;
  margin: 10px 20px;
  padding: 10px 0;
  z-index: 99;
  opacity: 1;
  visibility: visible;
  background: #bb0f0f;
  box-shadow: #000000 0 0 10px 5px;
}

/* line 394, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .dropdown ul li {
  min-width: 200px;
}

/* line 397, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .dropdown ul a {
  padding: 10px 20px;
  font-size: 10px;
}

@media (min-width: 370px) {
  /* line 397, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .navbar-mobile .dropdown ul a {
    font-size: 26px;
  }
}

@media (min-width: 768px) {
  /* line 397, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
  .navbar-mobile .dropdown ul a {
    font-size: 16px;
  }
	#header .logo img {
  	max-height: 60px;
  	padding: 0;}
}

/* line 405, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .dropdown ul a i {
  font-size: 12px;
}

/* line 408, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .dropdown ul a:hover {
  color: #bb0f0f;
}

/* line 414, ../../../../../Users/han/Desktop/www/assets/scss/main-page/style.sass */
.navbar-mobile .dropdown > .dropdown-active {
  display: block;
}