@import url("https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@200;300;400;600;700;900&display=swap");
* {
	padding: 0;
	margin: 0;
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}

html {
	scroll-behavior: smooth;
}

body {
	background-color: #1e2117 !important;
	overflow-x: hidden;
	font-family: "Friz Quadrata";
}

h1 {
	text-transform: uppercase;
	background: -webkit-gradient(
		linear,
		left top,
		left bottom,
		from(white),
		to(#c1e46f)
	);
	background: linear-gradient(white, #c1e46f);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-filter: drop-shadow(0px 2px 14px rgba(0, 0, 0, 0.2));
	filter: drop-shadow(0px 2px 14px rgba(0, 0, 0, 0.2));
}

i {
	color: #9ccb2d;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

i:hover {
	color: white;
}

.effect {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	-webkit-animation: fly 10s infinite linear;
	animation: fly 10s infinite linear;
}

.effect2 {
	position: absolute;
	z-index: 4;
	pointer-events: none;
	-webkit-animation: fly 10s 5s infinite linear;
	animation: fly 10s 5s infinite linear;
	opacity: 0;
}

@-webkit-keyframes fly {
	0% {
		top: 200px;
		right: 0;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		top: -1000px;
		opacity: 1;
		right: -1000px;
	}
}

@keyframes fly {
	0% {
		top: 200px;
		right: 0;
		opacity: 0;
	}
	50% {
		opacity: 1;
	}
	100% {
		top: -1000px;
		opacity: 1;
		right: -1000px;
	}
}

.body-bg {
	position: absolute;
	top: 930px;
	bottom: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 4;
	width: 100%;
	mask: linear-gradient(
		to bottom,
		rgb(0, 0, 0) 0%,
		rgb(0, 0, 0) calc(100% - 600px),
		rgba(0, 0, 0, 0) 100%
	);
}

header {
	position: relative;
	margin-bottom: 140px;
}

header .header-top-fixed {
	position: fixed !important;
	background-color: rgba(0, 0, 0, 0.8);
	border: 1px solid #9ccb2d25;
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	height: 40px !important;
	width: 97% !important;
	top: 18px;
	right: 0;
	left: 0;
	margin: 0 auto;
	margin-left: auto;
	margin-right: auto;
	border-radius: 6px;
	-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.562);
	box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.562);
}

header .header-top-fixed .header-top-home a {
	padding: 0px !important;
	border: 0px solid #9ccb2d00 !important;
	-webkit-box-shadow: 0px 0px 0px transparent !important;
	box-shadow: 0px 0px 0px transparent !important;
}

header .header-top-fixed .header-top-home a:hover {
	background-color: transparent !important;
}

header .header-top-fixed .header-top-home a i {
	margin: 0 !important;
	font-size: 24px !important;
}

header .header-top-fixed .header-top-home a p {
	display: none !important;
}

header .header-top {
	position: fixed;
	z-index: 100;
	width: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: justify;
	-ms-flex-pack: justify;
	justify-content: space-between;
	height: 100px;
	padding: 35px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

header .header-top .header-top-social {
	font-size: 25px;
}

header .header-top .header-top-social i {
	margin-right: 15px;
}

header .header-top .header-top-home {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
}

header .header-top .header-top-home a {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	border: 1px solid #9ccb2d3b;
	-webkit-box-shadow: 0px 0px 10px #9ccb2d23;
	box-shadow: 0px 0px 10px #9ccb2d23;
	border-radius: 40px;
	padding: 0px 50px 0px 50px;
	font-family: "Source Sans Pro";
	color: white;
	text-transform: uppercase;
	text-decoration: none;
	font-weight: bold;
	letter-spacing: 1px;
	font-size: 15px;
	height: 53px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

header .header-top .header-top-home a:hover {
	background-color: rgba(0, 0, 0, 0.521);
}

header .header-top .header-top-home a i {
	font-size: 16px;
	margin-right: 15px;
}

header .header-top .header-top-home a p {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
}

header .header-top .header-top-home a p i {
	font-size: 10px;
	margin-right: 0;
	margin-left: 15px;
}

header .header-center {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-orient: vertical;
	-webkit-box-direction: normal;
	-ms-flex-direction: column;
	flex-direction: column;
	position: relative;
	z-index: 5;
	padding-top: 270px;
	width: 100%;
}

header .header-center a {
	margin-top: 60px;
}

header .header-center a i {
	font-size: 35px;
	-webkit-animation: levitate 1s infinite ease-in-out;
	animation: levitate 1s infinite ease-in-out;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

header .header-center a i:hover {
	-webkit-filter: brightness(150%);
	filter: brightness(150%);
}

header .characters {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 4;
	width: 100%;
	top: 0;
	-webkit-mask: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(transparent),
		color-stop(40%, white)
	);
	-webkit-mask: linear-gradient(to top, transparent 0%, white 40%);
	mask: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(transparent),
		color-stop(40%, white)
	);
	mask: linear-gradient(to top, transparent 0%, white 40%);
}

header .monsters {
	position: absolute;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 3;
	width: 100%;
	top: 0;
	-webkit-mask: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(transparent),
		color-stop(10%, white)
	);
	-webkit-mask: linear-gradient(to top, transparent 0%, white 10%);
	mask: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(transparent),
		color-stop(10%, white)
	);
	mask: linear-gradient(to top, transparent 0%, white 10%);
}

header .main-character {
	top: 0;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	z-index: 1;
	width: 100%;
	position: fixed;
	-webkit-animation: levitate 3s infinite ease-in-out;
	animation: levitate 3s infinite ease-in-out;
	-webkit-mask: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(transparent),
		color-stop(80%, white)
	);
	-webkit-mask: linear-gradient(to top, transparent 0%, white 80%);
	mask: -webkit-gradient(
		linear,
		left bottom,
		left top,
		from(transparent),
		color-stop(80%, white)
	);
	mask: linear-gradient(to top, transparent 0%, white 80%);
}

section {
	position: relative;
	z-index: 8;
}

.a1 {
	background: url(../images/1.png) top no-repeat;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.a1:hover {
	-webkit-transform: translateY(-7px);
	transform: translateY(-7px);
}

.a2 {
	background: url(../images/2.png) top no-repeat;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.a2:hover {
	-webkit-transform: translateY(-7px);
	transform: translateY(-7px);
}

.info {
	padding-top: 250px;
	text-align: center;
	padding-bottom: 130px;
}

.info .info-text {
	margin-bottom: 40px;
}

.info .info-text h1 {
	font-size: 65px;
	margin-bottom: 20px;
}

.info .info-text p {
	font-size: 36px;
	letter-spacing: 3px;
	color: #bae449;
	text-shadow: 0px 0px 20px #bbe44956;
	text-transform: uppercase;
}

.info .info-buttons {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	margin-bottom: 40px;
}

.info .info-buttons a {
	width: 428px;
	height: 124px;
	font-size: 20px;
	letter-spacing: 1px;
	color: black;
	text-transform: uppercase;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-decoration: none;
}

.info .info-iframe {
	width: 65%;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid #bbe44918;
	-webkit-box-shadow: 0px 0px 20px #bbe44909;
	box-shadow: 0px 0px 20px #bbe44909;
	margin: 0 auto;
	height: 485px;
	padding: 30px;
}

.info .info-iframe iframe {
	width: 100%;
	height: 100%;
	position: relative;
	z-index: 10;
	border-radius: 15px;
	opacity: 0.4;
	-webkit-transition: 0.5s;
	transition: 0.5s;
	-webkit-box-shadow: 0px 0px 20px #bbe44915;
	box-shadow: 0px 0px 20px #bbe44915;
}

.info .info-iframe iframe:hover {
	opacity: 1;
}

.about {
	text-align: center;
}

.about .about-title h1 {
	font-size: 62px;
	margin-bottom: 20px;
	margin-top: 100px;
}

.about .about-text {
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	margin-bottom: 100px;
}

.about .about-text p {
	width: 50%;
	padding: 30px 60px 0px 60px;
	text-align: center;
	font-family: "Source Sans Pro";
	color: #87a07f;
	font-size: 17px;
	line-height: 35px;
}

.about .about-text p strong {
	color: white;
	font-weight: normal;
}

.about .line {
	height: 16px;
	background: url(../images/line.png) top repeat;
	opacity: 0.08;
}

.features {
	text-align: center;
	padding-top: 100px;
	z-index: 11;
}

.features .features-title {
	margin-bottom: 65px;
}

.features .features-title h1 {
	font-size: 62px;
}

.features .features-content .swiper-button-prev {
	display: none;
}

.features .features-content .swiper-button-next {
	display: none;
}

.features .features-content .features-slide {
	margin-bottom: 60px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.features .features-content .features-slide:hover {
	-webkit-transform: translateY(-20px);
	transform: translateY(-20px);
}

.features .features-content .features-slide .features-img {
	width: 230px;
	height: 230px;
	border-radius: 100%;
	background-color: rgba(0, 0, 0, 0.05);
	border: 1px solid #9ccb2d25;
	-webkit-box-shadow: 0px 0px 15px #9ccb2d1a;
	box-shadow: 0px 0px 15px #9ccb2d1a;
	padding: 15px;
	margin: 0 auto;
	margin-bottom: 40px;
}

.features .features-content .features-slide .features-img div {
	width: 100%;
	height: 100%;
	overflow: hidden;
	border-radius: 100%;
	display: -webkit-box;
	display: -ms-flexbox;
	display: flex;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	-webkit-box-shadow: 0px 0px 20px #9ccb2d31;
	box-shadow: 0px 0px 20px #9ccb2d31;
}

.features .features-content .features-slide .features-text {
	margin-bottom: 30px;
}

.features .features-content .features-slide .features-text h1 {
	font-size: 28px;
	margin-bottom: 10px;
}

.features .features-content .features-slide .features-text p {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	line-clamp: 2;
	-webkit-box-orient: vertical;
	font-family: "Source Sans Pro";
	color: #97a37c;
	font-size: 16px;
	width: 80%;
	margin: 0 auto;
	font-weight: 300;
	letter-spacing: 1px;
	line-height: 24px;
}

.features .features-content .features-slide .features-learn {
	text-transform: uppercase;
}

.features .features-content .features-slide .features-learn a {
	text-decoration: none;
	color: #bae449;
	font-size: 17px;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.features .features-content .features-slide .features-learn a:hover {
	color: white;
}

.features .features-content .features-slide .features-learn a i {
	margin-right: 15px;
}

.footer .footer-copyright {
	font-family: "Source Sans Pro";
	letter-spacing: 0.5px;
	text-align: center;
	margin-top: 95px;
	padding-top: 95px;
	border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.footer .footer-copyright p {
	color: rgba(255, 255, 255, 0.623);
	font-weight: 200;
	margin-top: 20px;
	margin-bottom: 25px;
}

.footer .footer-copyright div {
	margin-bottom: 15px;
}

.footer .footer-copyright div a:not(:last-child) {
	margin-right: 30px;
}

.footer .footer-copyright div a {
	text-decoration: none;
	color: #bae449;
	-webkit-transition: 0.5s;
	transition: 0.5s;
}

.footer .footer-copyright div a:hover {
	color: white;
}

.footer .footer-join {
	position: relative;
	z-index: 8;
	text-align: center;
	padding-top: 300px;
}

.footer .footer-join h1 {
	font-size: 72px;
	margin-bottom: 30px;
}

.footer .footer-join a {
	width: 428px;
	height: 124px;
	font-size: 20px;
	letter-spacing: 1px;
	color: black;
	text-transform: uppercase;
	display: -webkit-inline-box;
	display: -ms-inline-flexbox;
	display: inline-flex;
	-webkit-box-align: center;
	-ms-flex-align: center;
	align-items: center;
	-webkit-box-pack: center;
	-ms-flex-pack: center;
	justify-content: center;
	text-decoration: none;
}

.footer .footer-bg {
	position: absolute;
	top: -555px;
	z-index: -1;
	pointer-events: none;
	background: url(../images/footer.jpg) top no-repeat;
	width: 100%;
	height: auto;
}

.container {
	width: 1250px;
	margin: 0 auto;
}

@-webkit-keyframes levitate {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

@keyframes levitate {
	0% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
	50% {
		-webkit-transform: translateY(-15px);
		transform: translateY(-15px);
	}
	100% {
		-webkit-transform: translateY(0);
		transform: translateY(0);
	}
}

.swiper-button-next {
	color: white !important;
}

@media (max-width: 768px) {
	body {
		background: url(../images/body-mobile.jpg) top;
	}
	/* .body-bg {
		display: none;
	} */
	.container {
		width: 90%;
		margin: 0 auto;
	}
	.footer .footer-join {
		padding-top: 100px;
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-align: center;
		-ms-flex-align: center;
		align-items: center;
		-webkit-box-pack: center;
		-ms-flex-pack: center;
		justify-content: center;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.footer .footer-join h1 {
		font-size: 45px;
	}
	.footer .footer-join a {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
	}
	.footer .footer-copyright {
		padding-bottom: 50px;
	}
	.footer .footer-copyright .unsimple {
		-webkit-transform: scale(0.8);
		transform: scale(0.8);
	}
	.footer .footer-copyright div a {
		font-size: 14px;
	}
	.footer .footer-bg {
		display: none;
	}
	.features {
		width: 100% !important;
	}
	.features .features-title h1 {
		font-size: 45px;
	}
	.features .features-content {
		width: 100%;
		overflow: hidden;
		position: relative;
	}
	.features .features-content .swiper-button-prev {
		display: block;
		top: 18%;
		left: 40px;
	}
	.features .features-content .swiper-button-next {
		display: block;
		color: transparent;
		top: 18%;
		right: 40px;
	}
	.features .features-content .features-slide .features-img {
		width: 150px;
		height: 150px;
	}
	.features .features-content .features-slide .features-text h1 {
		font-size: 20px;
	}
	.about .about-title h1 {
		font-size: 45px;
	}
	.about .about-text {
		display: -webkit-box;
		display: -ms-flexbox;
		display: flex;
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
	}
	.about .about-text p {
		padding: 10px;
		width: 100%;
		font-size: 14px;
		line-height: 20px;
	}
	.info .info-text h1 {
		font-size: 45px;
	}
	.info .info-text p {
		font-size: 18px;
	}
	.info .info-buttons {
		-webkit-box-orient: vertical;
		-webkit-box-direction: normal;
		-ms-flex-direction: column;
		flex-direction: column;
		-webkit-transform: scale(0.7);
		transform: scale(0.7);
		margin-top: -30px;
		margin-bottom: -5px;
	}
	.info .info-iframe {
		width: 80%;
		height: 180px;
	}
	header {
		margin-bottom: 0px;
	}
	header .header-top-fixed {
		width: 90% !important;
	}
	header .header-top-fixed .header-top-home a i {
		font-size: 20px !important;
	}
	header .header-top i {
		font-size: 20px;
	}
	header .header-top .header-top-home a {
		padding: 0;
		background: none;
		border: none;
		-webkit-box-shadow: none;
		box-shadow: none;
	}
	header .header-top .header-top-home a:hover {
		background-color: transparent;
	}
	header .header-top .header-top-home a p {
		display: none;
	}
	header .header-top .header-top-home a i {
		margin: 0;
	}
	header .header-top .header-top-home a .fa-angles-right {
		display: none;
	}
	header .header-center img {
		width: 320px;
	}
	header .header-center a i {
		font-size: 20px;
	}
	/* header .characters {
		display: none;
	} */
	header .monsters {
		display: none;
	}
	header .main-character {
		display: none;
	}
}

@media (max-width: 1250px) {
	.effect {
		display: none;
	}
	.effect2 {
		display: none;
	}
}

@media (min-width: 1920px) {
	.body-bg {
		overflow: hidden;
	}
	.body-bg img {
		width: 100%;
	}
	.footer .footer-bg {
		background: url(../images/footer.jpg) top/cover no-repeat;
	}
	header .characters img {
		width: 100%;
	}
	header .monsters img {
		width: 100%;
	}
	header .main-character img {
		width: 100%;
	}
}

@media (min-width: 2400px) {
	.body-bg {
		top: 1300px;
	}
}

@media (min-width: 3400px) {
	.body-bg {
		top: 2400px;
	}
}

/* custom */

.page {
	overflow: hidden;
}

/* streams */

.streams {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	gap: 20px;
}

.stream {
	position: relative;
	width: 300px;
	height: 200px;
	background: #333;
	overflow: hidden;
	border-radius: 15px;
	background-color: rgba(0, 0, 0, 0.2);
	border: 1px solid #bbe44918;
	-webkit-box-shadow: 0px 0px 20px #bbe44909;
	box-shadow: 0px 0px 20px #bbe44909;
}

.stream iframe {
	width: 100%;
	height: 100%;
	position: absolute;
	left: 0;
	top: 0;
	display: block;
}