/*
//
// NOVA PLANNER STYLES
//
*/


/*================================================*/
/*	FONTS	*/
/*================================================*/
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYULTRALIGHTITALIC.OTF") format("opentype");
	font-weight: 100;
	font-style: italic;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYTHINITALIC.OTF") format("opentype");
	font-weight: 200;
	font-style: italic;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYLIGHTITALIC.OTF") format("opentype");
	font-weight: 300;
	font-style: italic;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYREGULAR.OTF") format("opentype");
	font-weight: 400;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYMEDIUM.OTF") format("opentype");
	font-weight: 500;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYSEMIBOLDITALIC.OTF") format("opentype");
	font-weight: 600;
	font-style: italic;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYBOLD.OTF") format("opentype");
	font-weight: 700;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYHEAVYITALIC.OTF") format("opentype");
	font-weight: 800;
	font-style: italic;
}
@font-face {
	font-family: "SF Pro";
	src: url("/assets/fonts/sf-pro-display/SFPRODISPLAYBLACKITALIC.OTF") format("opentype");
	font-weight: 900;
	font-style: italic;
}

@font-face {
	font-family: "Exo";
	src: url("/assets/fonts/Exo/Exo-VariableFont_wght.ttf") format("truetype");
	font-style: normal;
}
@font-face {
	font-family: "Exo";
	src: url("/assets/fonts/Exo/Exo-Italic-VariableFont_wght.ttf") format("truetype");
	font-style: italic;
}

@font-face {
	font-family: "Exo 2";
	src: url("/assets/fonts/Exo_2/Exo2-VariableFont_wght.ttf") format("truetype");
	font-style: normal;
}
@font-face {
	font-family: "Exo 2";
	src: url("/assets/fonts/Exo_2/Exo2-Italic-VariableFont_wght.ttf") format("truetype");
	font-style: italic;
}


/*================================================*/
/*	GLOBAL	*/
/*================================================*/
*{
	box-sizing: border-box;
}

*::-webkit-scrollbar{
  width: 5px;
}
 
*::-webkit-scrollbar-track{
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
}
 
*::-webkit-scrollbar-thumb{
  background-color: #7e7e7e;
  border-radius: 3px;
}

html{
	scroll-behavior: smooth;
}

body{
	font-family: 'SF Pro', sans-serif;
	font-weight: 400;
	font-size: 24px;
	line-height: 1.5;
	color: #222222;
	background-color: #FFF;
}

.section{
	display: inline-block;
	width: 100%;
}

.container{
	max-width: 100%;
	width: 1260px;
	margin: 0 auto;
	padding: 0 30px;
}


h1{
	margin: 0;
	color: #000;
}
h2{
	margin: 0;
	font-size: 48px;
	line-height: 1;
	font-weight: 500;
	color: #000;
}
h3{
	margin: 0;
	font-size: 36px;
	line-height: 1.12 ;
	font-weight: 400;
	color: #000;
}

h2.section-header{
	margin: 0 0 5px;
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	color: #2178F1;
}
h3.section-sub-header{
	margin: 0 0 5px;
	font-size: 45px;
	font-weight: 700;
	color: #222222;
}
h4.section-intro-text{
	margin: 0 0 10px;
	font-size: 24px;
	font-weight: 400;
	color: #222222;
}
.section-headers{
	padding: 0 60px;
}

a{
	text-decoration: none;
	color: #003CF7;
}

button{
	outline: none;
	border: 0;
}
.btn,
a.btn{
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 5px;
	width: fit-content;
	padding: 20px 25px;	
	font-size: 28px;
	font-weight: 400;
	line-height: 1;
	color: #FFF;
	text-decoration: none;
	background-color: #003CF7;
	border-radius: 42px;
	transition: all .2s;
}
.btn.alt,
a.btn.alt{
	background-color: #B0B0B0;
}
.btn:hover,
a.btn:hover{
	opacity: .7;
	color: #FFF;
}

ul,
ol{}
ul{
	padding-left: 0;
}
ol{
	padding-left: 25px;
}
	ul li{
/*		display: flex;*/
/*		flex-direction: row;*/
/*		list-style-image: url('/assets/images/li.png');*/
/*		list-style: none;*/
	}
	/*ul li:before{
		content: '';
		display: inline-block;
		width: 16px;
		flex: 0 0 16px;
		height: 16px;
		margin: 8px 24px 0 0;
		background-image: url('/assets/images/li.png');
		background-size: contain;
		background-position: center;
		background-repeat: no-repeat;
	}*/

@media(max-width: 767px){
	body{
		font-size: 18px;
	}
	h3{
		font-size: 24px;
	}

	.section-headers{
		padding: 0 0px;
	}

	.btn,
	a.btn{
		padding: 15px 25px 15px 15px;
		font-size: 25px;
	}
	.btn:before,
	a.btn:before{
		margin: 0 20px 0 0;
	}
	.container{
		max-width: 100%;
		width: 1240px;
		margin: 0 auto;
		padding: 0 20px;
	}

	ul li:before{
		margin: 5px 24px 0 0;
	}
}


/*================================================*/
/*	HEADER	*/
/*================================================*/
.header{
	position: relative;
	display: flex;
	flex-direction: row;
	align-items: center;
	max-width: 100%;
	width: 1600px;
	margin: 0 auto;
	padding: 25px 60px;
	gap: 60px;
}
	.logo{
		display: flex;
		flex-direction: column;
		flex-shrink: 0;
		width: 159px;
	}
		.logo img{
			display: block;
			width: 100%;
		}
	.header nav#main-menu{
		display: flex;
		flex-direction: column;
		flex-grow: 1;
	}
		.header nav#main-menu ul{
			display: flex;
			flex-direction: row;
			gap: 50px;
			margin: 0;
		}
			.header nav#main-menu ul li{
				display: flex;
				flex-direction: column;
			}
			.header nav#main-menu ul li:before{ display: none; }
				.header nav#main-menu ul li a{
					font-weight: 400;
					font-size: 18px;
					text-decoration: none;
					color: #000;
				}
				.header nav#main-menu ul li a[target="_blank"]:after{
					content: '';
					display: inline-block;
					width: 11px;
					height: 11px;
					margin-left: 3px;
					background-image: url("/assets/image/target-blank.png");
					background-size: contain;
					background-position: center;
					background-repeat: no-repeat;
				}
	.header .action-btns{
		display: flex;
		flex-direction: column;
	}
	.header .action-btns.mobile{
		display: none;
	}
		.header .action-btns a{
			text-decoration: none;
			transition: opacity .2s;
		}
		.header .action-btns a:hover{
			opacity: .7;
		}
		.header .action-btns .inner{
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 20px;
		}
			.header .action-btns .inner .store{
				display: inline-block;
				background: linear-gradient(white, white) padding-box,
					linear-gradient( to bottom right, #5572FE 0%,#6E62FF 51%,#8351FF 100%) border-box;
				border: 1px solid transparent;
				border-radius: 39px;
/*				box-shadow: 0 4px 4px rgba(0,0,0,.25);*/
			}
				.header .action-btns .inner .store a{
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 5px;
					padding: 7px 25px;
					font-size: 28px;
					line-height: 1;
					background: linear-gradient( to bottom right, #5572FE 0%,#6E62FF 51%,#8351FF 100%);
					color: transparent;
					background-clip: text;
					-webkit-background-clip: text;
				}
			.header .action-btns .inner .account{
				display: flex;
				flex-direction: row;
				align-items: center;
				gap: 20px;
			}
				.header .action-btns .logged-in{
					position: relative;
					display: flex;
					flex-direction: row;
					align-items: center;
					gap: 10px;
				}
					.header .action-btns .pfp{
						display: inline-block;
						width: 38px;
						height: 38px;
						min-width: 38px;
						border: 2px solid #FFF;
						border-radius: 50%;
						background-color: #e3e3e3;
/*						box-shadow: 0 4px 4px rgba(0,0,0,.25);*/
						box-shadow: 0 2px 12px rgba(0,0,0,.12);
						overflow: hidden;
					}
						.header .action-btns .pfp img{
							max-width: 100%;
							height: auto;
							object-fit: cover;
							object-position: center;
						}
					.header .action-btns .logged-in .account-info{
						display: flex;
						flex-direction: column;
						flex-grow: 1;
					}
						.header .action-btns .logged-in .account-info .top-up{
							margin-left: 5px;
							font-size: 16px;
						}
						.header .action-btns .logged-in .account-info span{
							font-size: 18px;
							line-height: 1.1;
/*							text-shadow: 0 4px 4px rgba(0,0,0,.25);*/
						}
						.header .action-btns .logged-in .account-info span.acc-name{
							font-weight: 500;
							color: #000;
						}
						.header .action-btns .logged-in .account-info span.acc-balance{
							color: #AAAAAA;
						}
					.header .action-btns .logged-in .account-popup{
						display: none;
						flex-direction: column;
						position: absolute;
						top: -3px;
						right: -10px;
						z-index: 999;
						width: 340px;
						padding: 20px 30px;
						background-color: #fff;
						border-radius: 22px;
						border: .5px solid rgba(0,0,0,.12);
					}
					.header .action-btns .logged-in:hover .account-popup{
						display: flex;
						box-shadow: 0px 0px 5px rgba(0, 0, 0, 0.2);
					}
						.header .action-btns .logged-in .account-popup .top{
							display: flex;
							flex-direction: row;
							gap: 10px;
							margin-bottom: 5px;
							color: #8351FF;
						}
							.header .action-btns .logged-in .account-popup .top a{
								font-size: 16px;
							}
						.header .action-btns .logged-in .account-popup .level{
							display: inline-block;
							padding: 20px 0;
							font-size: 16px;
							line-height: 1.2;
						}
							.header .action-btns .logged-in .account-popup .level .level-title{
								display: inline-block;
								width: 100%;
								font-family: 'Exo 2', sans-serif;
								font-size: 16px;
								font-weight: 700;
								font-style: italic;
								color: #18c9f3;
							}
						.header .action-btns .logged-in .account-popup .links{
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: space-between;
							font-size: 16px;
						}
				.header .action-btns .logged-out{
					display: flex;
				}
					.header .action-btns .logged-out a{
						display: inline-block;
						padding: 7px 25px;
						font-size: 28px;
						line-height: 1;
						color: #FFF;
						background-color: #003CF7;
						border: 2px solid #003CF7;
						border-radius: 39px;
					}
						.header .action-btns .logged-out a img{}
	.header .mobile-menu-toggle{
		position: relative;
		display: none;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		flex-shrink: 0;
		gap: 6px;
		width: 21px;
		height: 21px;
		cursor: pointer;
	}
		.header .mobile-menu-toggle .line{
			display: inline-block;
			width: 100%;
			height: 2px;
			background-color: #000;
		}

@media(max-width: 1350px){
	.header{
		gap: 45px;
	}
		.header nav#main-menu ul{
			gap: 30px;
		}
}
@media(max-width: 1199px){
	.header.nav-open{
		position: fixed;
		z-index: 9999;
		background-color: #FFF;
	}
	.header .mobile-menu-toggle{ display:flex; }
	.header.nav-open .mobile-menu-toggle{}
		.header.nav-open .mobile-menu-toggle .line{
			position: absolute;
			top: calc(50% - 1px);
		}
		.header.nav-open .mobile-menu-toggle .line:first-child{
			transform: rotate(45deg);
		}
		.header.nav-open .mobile-menu-toggle .line:nth-child(2){
			transform: rotate(-45deg);
		}
		.header.nav-open .mobile-menu-toggle .line:last-child{ display: none; }

	.header .logo{
		margin-right: auto;
	}
	.header nav#main-menu{
		display: flex;
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 9999;
    width: 100%;
    height: 0;
    padding: 0 60px 0;
		background-color: #FFF;
		transition: height .4s;
		overflow: hidden;
	}
	.header.nav-open nav#main-menu{
			top: 94px;
			height: calc(100vh - 94px);
			border-bottom: 1px solid #003CF7;
			overflow-y: auto;
			text-align: center;
	}
		.header nav#main-menu ul{
			flex-direction: column;
			gap: 12px;
			padding-top: 25px;
		}
			.header nav#main-menu ul li:last-child{
				padding-bottom: 60px;
			}
}
@media(max-width: 767px){
	.header{
		flex-wrap: wrap;
		justify-content: center;
		gap: 20px;
		padding: 20px 20px;
	}
		.header .logo{

		}
		.header.nav-open nav#main-menu{
			top: 65.5px;
			height: calc(100vh - 65.5px);
			padding: 0 20px;
		}
		.header .action-btns .inner{
			gap: 15px;
		}
			.header .action-btns .logged-out a img{
				width: 14px;
				height: auto;
			}
			.header .action-btns .inner .store a{
				font-size: 18px;
			}
				.header .action-btns .inner .store a img{
					width: 18px;
					height: auto;
				}
			.header .action-btns .logged-in .account-info span,
			.header .action-btns .logged-out a{
				font-size: 16px;
			}
			.header .action-btns .pfp{
				width: 35px;
				height: 35px;
				min-width: 35px;

			}
}
@media(max-width: 550px){
	.header{
		justify-content: space-between;
	}
		.header .logo{
			margin: 0;
		}
		.header .action-btns:not(.mobile){
			display: none;
		}
		.header .action-btns.mobile{
			display: inline-block;
			margin-bottom: 30px;
		}
		.header .action-btns .inner .account{
			width: 100%;
			justify-content: center;
		}
			.header .action-btns.mobile .logged-in{
				width: 100%;
			}
				.header .action-btns .logged-in .account-popup{
					position: initial;
					display: flex;
					width: 100%;
				}
					.header .action-btns .inner{
						flex-direction: column;
						align-items: center;
						text-align: left;
					}
}


/*================================================*/
/*	SECTION 1: HEADER BANNER	*/
/*================================================*/
.header-banner{
	max-height: 100%;
	height: 800px;
}
	.header-banner .container{
		position: relative;
		display: flex;
		flex-direction: row;
		height: 100%;
		gap: 35px;
	}
		.header-banner .content{
			position: relative;
			align-self: center;
			display: inline-block;
			width: 100%;
			flex: 0 0 100%;
		}
			.header-banner .content h1 span{
				font-size: 128px;
				line-height: 1;
				font-weight: 700;
			}
			.header-banner .content h1 span:first-child{
				color: #000;
			}
			.header-banner .content h1 span:last-child{
				background: linear-gradient(to bottom, #0D45D0, #1CF6FF);
				background-clip: text;
				-webkit-background-clip: text;
				color: transparent;
			}
			.header-banner .sub-header{
				margin-bottom: 20px;
				font-size: 50px;
				font-weight: 500;
			}
			.header-banner .content .buttons{}
				.header-banner .content .buttons a img{
					margin-right: 10px;
				}
	.header-banner .image{
		position: absolute;
		bottom: 0;
		right: 0;
		align-self: flex-end;
		display: inline-block;
		max-width: 100%;
		width: min(597px, 50%);
		flex: 0 0 min(597px, 50%);
	}
			.header-banner .image img{
				display: block;
				max-width: 100%;
				width: 100%;
			}


@media(max-width: 1023px){
	.header-banner{
		height: 100vh;
	}
		.header-banner .content h1 span{
				font-size: 90px;
			}
			.header-banner .sub-header{
				font-size: 45px;
			}
}
@media(max-width: 900px){
	.header-banner .content{
		margin-bottom: 200px;
	}
}
@media(max-width: 767px){
	.header-banner{
		height: 700px;
	}
	.header-banner .container{
		flex-wrap: wrap;
		align-items: center;
		flex-wrap: wrap;
		flex-direction: row-reverse;
	}
	.header-banner .image,
	.header-banner .content{
		position: initial;
		width: 100%;
		flex: 0 0 100%;
	}
	.header-banner .content{
		margin-bottom: 50px;
	}
		.header-banner .image img{
			width: 400px;
			margin: 0 auto;
		}
}
@media(max-width: 767px){
	.header-banner .content{
		text-align: center;
	}
		.header-banner .content h1 span{
			font-size: 48px;
		}
		.header-banner .content .sub-header{
			font-size: 35px;
		}
		.header-banner .content .buttons a{
			margin: 0 auto;
		}
}
@media(max-width: 425px){
	.header-banner .content .sub-header{
			font-size: 27px;
		}
}

/*================================================*/
/*	SECTION 2: Our Product	*/
/*================================================*/

#our-product{
	margin: 30px 0 80px;
}
	#our-product .section-headers{
		margin-bottom: 20px;
	}
	#our-product .products{
		display: flex;
		flex-direction: column;
		gap: 55px;
	}
		#our-product .products .product{
			display: flex;
			flex-direction: row;
			gap: 20px;
			padding: 35px 55px 35px 30px;
			background-color: #D9D9D9;
			border-radius: 74px;
		}
			#our-product .products .image{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 335px;
				flex: 0 0 335px;
			}
				#our-product .products .image img{
					max-width: 100%;
					height: auto;
				}
			#our-product .products .info{
				display: flex;
				flex-direction: column;
			}
				#our-product .products .info .type{
					display: flex;
					align-items: center;
					line-height: 1.2;
					color: #2178F1;
				}
					#our-product .products .info .type img{
						max-width: 100%;
						width: 30px;
						height: auto;
						margin-right: 8px;
					}
				#our-product .products .info .title{
					line-height: 1.2;
					font-size: 45px;
					font-weight: 700;
					color: #222222;
				}
				#our-product .products .product .info .btns{
					display: flex;
					flex-direction: row;
					gap: 20px;
					justify-content: flex-end;
					margin-top: auto;
				}


@media(max-width: 1023px){
	#our-product .products .product{
		padding: 35px 35px;
	}
		#our-product .products .image{
			width: 240px;
			flex: 0 0 240px;
		}
		#our-product .products .product .info .btns .btn{
			padding: 15px 19px;
			font-size: 24px;
		}
}
@media(max-width: 767px){
	#our-product .products .product{
		flex-direction: column;
		align-items: center;
		padding: 35px 45px;
	}
		#our-product .products .image{
			width: 240px;
			flex: 0 0 240px;
		}
		#our-product .products .info{
			align-items: center;
		}
			#our-product .products .info .content{
				text-align: center;
			}
				#our-product .products .product .info .btns{
					flex-wrap: wrap;
					justify-content: center;
				}
					#our-product .products .product .info .btns .btn{
						padding: 15px 19px;
						font-size: 24px;
					}
}
@media(max-width: 550px){
	#our-product .products .product{
		padding: 35px 30px;
	}
		#our-product .products .info .title{
			font-size: 37px;
		}
}


/*================================================*/
/*	SECTION 3: FEATURES	*/
/*================================================*/
#features{
	padding: 40px 0 195px;
	background-color: #F5F6F8;
}
	#features .features{
		--columns: 2;
		--gap: 10px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--gap);
		max-width: 100%;
		width: 715px;
		margin: 50px auto 0;
	}
		#features .features .feature{
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			max-width: 320px;
			width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			padding: 25px 30px;
			background-color: #FFF;
			border: 1px solid rgba(0,0,0,.12);
			border-radius: 24px;
		}
		#features .features .feature:hover{
			box-shadow: 0 4px 4px rgba(0,0,0,.25);
		}
			#features .features .feature .title{
				max-width: 100%;
				width: 260px;
			}
			#features .features .feature .info{
				max-width: 100%;
				width: 260px;
				font-size: 20px;
			}
			#features .features .feature .image{}
				#features .features .feature .image img{
					max-width: 100%;
					height: auto;
				}


@media(max-width: 1023px){
	#features{
		padding-bottom: 60px;
	}
}
@media(max-width: 767px){
	#features .features .feature{
		width: 100%;
	}
}



/*================================================*/
/*	SECTION 4: NEWSLETTER	*/
/*================================================*/
#newsletter{
	position: relative;
	padding: 60px 0 50px;
	background: #FFF;
	color: #232630;
	background: url("/assets/image/newsletter-bg-left.png"), url("/assets/image/newsletter-bg-right.png"), #000;
	background-position: bottom left, top right;
	background-repeat: no-repeat, no-repeat;
	background-size: auto 100%, auto 100%;
}
	#newsletter .container{}
			#newsletter .container .newsletter-box{
				display: flex;
				flex-direction: column;
				width: 600px;
				padding: 50px 0;
			}
				#newsletter .container .newsletter-box h2{
					max-width: 100%;
					margin-bottom: 40px;
					font-size: 43px;
					line-height: 1.2;
					font-weight: 700;
					letter-spacing: -0.7px;
					color: #FFF;
				}
				#newsletter .container .newsletter-box .mailchimp-form{
					max-width: 100%;
				}
					.mailchimp-form .mc-field-group{
						position: relative;
						display: flex;
						flex-direction: row;
						gap: 12px;
					}
						.mailchimp-form .mc-field-group input{
							-webkit-appearance: none;
							-moz-appearance: none;
							appearance: none;
							display: inline-block;
							width: 100%;
							outline: none;
							border: 0;
						}
						.mailchimp-form .mc-field-group input[name="EMAIL"]{
							display: inline-block;
							padding: 10.5px 20px;
							background-color: #E2E1E2;
							font-size: 24px;
							line-height: 1;
							color: #232630;
						}
							.mailchimp-form .mc-field-group input[name="EMAIL"]::placeholder{
								color: rgba(0,0,0,.2);
							}
						.mailchimp-form .mc-field-group input[name="subscribe"]{
							display: inline-block;
							width: 159px;
							padding: 18px 20px;
							font-size: 25px;
							font-weight: 400;
							line-height: 1;
							color: #2178F1;
							border: 1px solid #2178F1;
							background-color: transparent;
							cursor: pointer;
							transition: all .2s;
						}
						.mailchimp-form .mc-field-group input[name="subscribe"]:hover{
							opacity: .7;
						}
						.mailchimp-form #mc_embed_signup div.mce_inline_error{
							background: none;
							color: #DC5D5D;
							font-size: 18px;
						}
						.mailchimp-form #mc_embed_signup .response{
							font-size: 18px;
						}
						.mailchimp-form #mc_embed_signup .response#mce-success-response{
							color: #76D074;
						}
						.mailchimp-form #mc_embed_signup .response#mce-error-response{
							color: #DC5D5D;
						}
				#newsletter .container .image{
					position: absolute;
					bottom: -1px;
					left: calc(50% + 200px);
				}
					#newsletter .container .image img{
						display: block;
						max-width: 100%;
						height: auto;
					}


@media(max-width: 1100px){
	#newsletter .container .image{
		left: calc(470px + ((100% - 600px) / 2));
		width: 280px;
	}
}
@media(max-width: 1023px){
	#newsletter{
		padding-bottom: 370px;
		background-size: auto 60%, auto 60%;
	}
		#newsletter .container .newsletter-box{
			width: 100%;
			justify-content: center;
			align-items: center;
			text-align: center;
		}
			#newsletter .container .image{
				width: 220px;
				left: calc(50% - 110px);
			}
}
@media(max-width: 767px){
	#newsletter .container .newsletter-box h2{
		font-size: 33px;
	}
}
@media(max-width: 500px){
	#newsletter{
		background-size: auto 50%, auto 50%;
	}
		#newsletter .container .newsletter-box h2{
			font-size: 28px;
		}
		.mailchimp-form .mc-field-group{
			flex-direction: column;
			gap: 0;
		}
			.mailchimp-form .mc-field-group input[name="subscribe"]{
				width: initial;
			}
}



/*================================================*/
/*	SECTION 5: MISSION	*/
/*================================================*/
#mission{
	padding: 200px 0 60px;
	background-image: url("/assets/image/mission-bg.png");
	background-size: cover;
	background-position: center 100px;
	background-repeat: no-repeat;
}
	#mission .container{}
		#mission .chats{
			display: flex;
			flex-direction: column;
			gap: 55px;
			margin: 70px 0 55px;
			padding: 0 60px;
		}
			#mission .chats .chat{
				width: calc(100% - 115px);
				padding: 50px 70px;
				background-color: #000;
				border-radius: 80px;
			}
			#mission .chats .chat:last-child{
				align-self: flex-end;
			}
				#mission .chats .chat .title{
					display: inline-block;
					width: 100%;
					margin-bottom: 20px;
					font-size: 36px;
					font-weight: 700;
					line-height: 1.2;
					color: #FFF;
				}
				#mission .chats .chat .text{
					display: inline-block;
					width: 100%;
					font-size: 24px;
					line-height: 1.4;
					color: #FFF;
				}
	#mission .btns{}
		#mission .btns .btn{
			margin-left: auto;
		}


@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 
	#mission{
		background-image: url("/assets/image/mission-bg-2x.png");
	}
}
@media(max-width: 1023px){
	#mission{
		background-size: auto calc(100% - 100px);
	}
			#mission .chats .chat{
				width: calc(100% - 50px);
				padding: 40px 50px;
			}
				#mission .chats .chat .title{
					font-size: 30px;
				}
}
@media(max-width: 767px){
	#mission h3.section-sub-header{
		font-size: 34px;
	}
	#mission .chats{
		padding: 0;
	}
		#mission .chats .chat .title{
			font-size: 28px;
		}
		#mission .chats .chat .text{
			font-size: 20px;
		}
}
@media(max-width: 500px){
		#mission .chats .chat{
			width: 100%;
			padding: 40px 40px;
		}
			#mission .chats .chat .title{
				font-size: 28px;
			}
			#mission .chats .chat .text{
				font-size: 18px;
			}
}


/*================================================*/
/*	SECTION 6: EXPERIENCE	*/
/*================================================*/
#experience{
	padding: 50px 0;
	background: linear-gradient(to bottom, #0D45D0 0%, #1CF6FF 100%);
}
	#experience .container{}
		#experience .container h2{
			display: inline-block;
			width: 100%;
			margin-bottom: 40px;
			text-align: center;
			font-size: 28px;
			font-weight: 700;
			color: #FFF;
		}
		#experience .container .row{
			--columns: 3;
			--gap: 20px;
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			gap: var(--gap);
			align-items: center;
			justify-content: center;
		}
			#experience .container .row .column{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				min-width: 250px;
				width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			}
				#experience .container .row .column .image{}
					#experience .container .row .column .image img{
						max-width: 100%;
						height: auto;
					}

@media(max-width: 767px){
	#experience .container .row .column{
		width: 100%;
	}
}


/*================================================*/
/*	SECTION 7: TEAM	*/
/*================================================*/
#team{
	padding: 140px 0 70px;
	background-color: #000;
}
	#team h3{
		color: #FFF;
	}

	#team .team{
		--columns: 3;
		--gap: 15px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--gap);
		margin-top: 45px;
		padding: 0 60px;
	}
		#team .team .team-member{
			display: flex;
			flex-direction: column;
			width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			flex: 0 0 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			align-items: center;
			padding: 50px 20px 15px;
			background-color: rgba(255,255,255,.06);
			border: 1px solid rgba(255,255,255,.12);
			border-radius: 17px;
		}
			#team .team .team-member .image{
				display: block;
				width: 150px;
				height: 150px;
				margin: 0 auto 20px;
				border-radius: 50%;
				overflow: hidden;
			}
				#team .team .team-member .image img{
					display: block;
					width: 100%;
					height: 100%;
					object-fit: cover;
					object-position: center;
				}
			#team .team .team-member span{
				display: inline-block;
				width: 100%;
				font-size: 21px;
				font-weight: 400;
				text-align: center;
				color: #FFF;
			}
			#team .team .team-member .name{
				font-size: 33px;
				font-weight: 700;
			}
			#team .team .team-member .education{
			}
			#team .team .team-member .title{
			}

@media(max-width: 1023px){
	#team h3{
		font-size: 35px;
	}
	#team .team{
		padding: 0;
	}
		#team .team .team-member{
/*				max-width: 180px;*/
			}
				#team .team .team-member .name{ font-size: 28px; }
				#team .team .team-member .education{ font-size: 24px; }
				#team .team .team-member .title{ font-size: 18px; }
}
@media(max-width: 767px){
	#team h3{
		font-size: 24px;
	}
	#team .team{
		--columns: 2;
	}
		#team .team .team-member span{ font-size: 18px }
		#team .team .team-member .name{ font-size: 24px; }
}
@media(max-width: 500px){
	#team .team{
		--columns: 1;
	}
}


/*================================================*/
/*	SECTION 8: INSTALL	*/
/*================================================*/
#install{
	display: inline-block;
	width: 100%;
	background-color: #000;
}
	#install h3{
		color: #FFF;
	}
	#install .cta{
		position: relative;
		margin-top: 40px;
	}
		#install .cta .image{}
			#install .cta .image img{
				max-width: 100%;
				width: 100%;
				height: auto;
			}
		#install .cta .btns{
			position: absolute;
			top: calc(75% - 90px);
			left: 90px;
		}
			#install .cta .btns .btn{
				background: linear-gradient( to bottom, #0D45D0 0%,#1CF6FF 100%) border-box;
			}
	#install .text{
		color: #FFF;
	}
		#install .text p{}
			#install .text p a{
				text-decoration: underline;
				background: linear-gradient( to right, #5572FE 0%,#6E62FF 43%, #8351FF 100%);
				color: transparent;
				background-clip: text;
				-webkit-background-clip: text;
			}
			#install .text p span.hashtag{
				color: #777777;
			}

@media(max-width: 1050px){
	#install .cta .btns{
    top: calc(75% - 62px);
    left: 40px;
	}
}
@media(max-width: 767px){
	h3.section-sub-header{
		font-size: 26px;
	}
	#install .cta .btns{
		position: initial;
	}
}


/*================================================*/
/*	FOOTER	*/
/*================================================*/
.footer{
	padding: 100px 0 45px;
	background-color: #000;
}
.footer.white{
	padding: 55px 0 40px;
	background-color: #FFF;
}
	.footer .container{
		text-align: center;
		align-items: center;
		justify-content: center;
	}
	.copy{
		margin-top: 150px;
	}
	.footer.white .copy{ margin: 0;	}
		.copy .footer-logo{
			max-width: 100%;
			width: 75px;
			margin: 0 auto;
		}
		.footer.white .copy .footer-logo{ width: 28px; }
			.copy .footer-logo img{
				display: block;
				width: 100%;
				opacity: .3;
			}
			.footer.white .copy .footer-logo img{ opacity: 1; }
		.copy p{
			margin-bottom: 0;
			font-size: 16px;
			color: #FFF;
		}
		.footer.white .copy p{ color: #000; }

@media(max-width:767px){
	.copy .footer-logo{
		width: 50px;
	}
	.copy p{
		font-size: 14px;
	}
}


/*================================================*/
/*	LOG IN POPUP	*/
/*================================================*/
.login-popup{
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  z-index: 999;
  opacity: 0;
  transition: opacity .3s;
}
.login-popup.show{
  display: flex;	
	opacity: 1;
	z-index: 9999;
}
	.login-popup .bg{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(255,255,255,.9);
	}
		.login-popup .inner{
      position: relative;
      z-index: 999;
      max-width: 100%;
      width: 600px;
      padding: 20px 25px;
      background: #FFF;
      border: 1px solid #e3e3e3;
      border-radius: 7px;
		}
			.login-popup .inner .close{
        position: relative;
        width: 20px;
        height: 20px;
        margin-left: auto;
        cursor: pointer;
			}
			.login-popup .inner .close:hover{
				opacity: .7;
			}
				.login-popup .inner .close .line{
					position: absolute;
					top: calc(50% - .5px);
					display: block;
					width: 100%;
					height: 1px;
					background-color: #000;
					transform: rotate(45deg);
				}
				.login-popup .inner .close .line:first-child{}
        .login-popup .inner .close .line:last-child{ transform: rotate(-45deg); }
      .login-popup .inner .headers{
      	text-align: center;
      	margin-bottom: 15px;
      }
      .login-popup .inner .logged-out a{
      	margin: 0 auto;
      	text-align: center;
      }

@media(max-width: 599px){
	.popup .popup-inner .close{
		top: 15px;
		right: 15px;
	}
}



/*================================================*/
/*	PRE-ORDER POPUP	*/
/*================================================*/
.popup{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 20px;
	transition: opacity .3s;
	opacity: 0;
	z-index: -99999;
}
.popup.show{
	opacity: 1;
	z-index: 9999;
}
	.popup .bg{
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0,0,0,.45);
	}
		.popup .popup-inner{
			position: relative;
			max-width: 90vw;
			width: 900px;
			max-height: 95vh;
			overflow-y: auto;
			background-color: #232630;
			border-radius: 12px;
		}
			.popup .popup-inner .padding-div{
				padding: 12px 30px 80px;
			}
			.popup .popup-inner .close{
				position: sticky;
				top: 23px;
				left: calc(100% - 56px);
				z-index: 999;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				width: 38px;
				height: 38px;
				cursor: pointer;
				transition: all .2s;
			}
			.popup .popup-inner .close:hover{
				opacity: .7;
			}
				.popup .popup-inner .close .line{
					position: absolute;
					top: calc(50% - 0.5px);
					left: 0;
					display: inline-block;
					width: 100%;
					height: 2px;
					background-color: #CACACA;
				}
				.popup .popup-inner .close .line:first-child{
					transform: rotate(45deg);
				}
				.popup .popup-inner .close .line:last-child{
					transform: rotate(-45deg);
				}
			.popup .popup-inner .content{
				text-align: center;
			}
				.popup .popup-inner .content .buttons{
					display: flex;
					flex-direction: column;
					gap: 25px;
					max-width: 100%;
					width: 320px;
					margin: 0 auto;
				}
					.popup .popup-inner .content .buttons .btn{
						display: flex;
/*						width: 100%;*/
						margin: 0 auto;
					}
					.popup .popup-inner .content .buttons .btn.connect.wrong-network{
						padding: 15px 18px 15px 18px;
					}
					.popup .popup-inner .content .buttons .btn.connect.wrong-network:before{
						margin: 0 20px 0 0;
					}

				.popup .popup-inner .content .step-1{

				}
				.popup.connected .popup-inner .content .step-1{
					display: none;
				}
				.popup .popup-inner .content .step-2{
					display: none;
				}
				.popup.connected .popup-inner .content .step-2{
					display: block;
				}
					.popup .popup-inner .content .step-2 .eth{
						display: none;
					}
					.popup.connected .popup-inner .content .step-2 .eth{
						display: block;
					}
						.popup .popup-inner .content .step-2 .buttons{
							width: 480px;
							margin-top: 25px;
						}
							.popup .popup-inner .content .step-2 .eth-btn{
								display: flex;
								flex-direction: row;
								max-width: 100%;
								flex: 0 0 100%;
								width: 100%;
								margin: 0 auto;
							}
								.popup .popup-inner .content .step-2 .eth-btn .price,
								.popup .popup-inner .content .step-2 .eth-btn .send-eth{
									display: flex;
									flex-direction: row;
									align-items: center;
									font-size: 36px;
									font-weight: 400;
									line-height: 1;
								}
								.popup .popup-inner .content .step-2 .eth-btn .price{
									
									justify-content: space-between;
									width: 284px;
									padding: 20px 30px;
									background-color: #E2E1E2;
									border-radius: 12px 0 0 12px;
									color: #000;
								}
									.popup .popup-inner .content .step-2 .eth-btn .price .cost{}
									.popup .popup-inner .content .step-2 .eth-btn .price .cur{}
								.popup .popup-inner .content .step-2 .eth-btn .send-eth{
									width: 195px;
									padding: 20px 30px 20px 20px;
									background: linear-gradient(45deg, #2C489E 0%, #0BEFF8 100%);
									border-radius: 0 12px 12px 0;
									color: #FFF;
									cursor: pointer;
									transition: all .2s;
								}
								.popup .popup-inner .content .step-2 .eth-btn .send-eth:hover{
									opacity: .7;
								}
									.popup .popup-inner .content .step-2 .eth-btn .send-eth:before{
										content: '';
										display: inline-block;
										width: 20px;
										height: 31px;
										margin: 0 40px 0 0;
										background-size: contain;
										background-repeat: no-repeat;
										background-image: url("/assets/images/eth-icon.png");
										background-image: url("data:image/svg+xml,%3Csvg width='40' height='62' viewBox='0 0 40 62' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg clip-path='url(%23clip0_12_37)'%3E%3Cpath d='M9.99718 0L9.77881 0.706671V21.2044L9.99718 21.4116L19.9943 15.7876L9.99718 0Z' fill='white'/%3E%3Cpath d='M9.99711 0L0 15.7876L9.99711 21.4123V11.4626V0Z' fill='white'/%3E%3Cpath d='M9.9971 23.2137L9.87378 23.3562V30.6582L9.9971 31L20 17.5922L9.9971 23.2137Z' fill='white'/%3E%3Cpath d='M9.99711 31V23.2131L0 17.5922L9.99711 31Z' fill='white'/%3E%3Cpath d='M9.99707 21.4117L19.9942 15.7876L9.99707 11.4626V21.4117Z' fill='white'/%3E%3Cpath d='M0 15.7876L9.99711 21.4117V11.4626L0 15.7876Z' fill='white'/%3E%3C/g%3E%3Cdefs%3E%3CclipPath id='clip0_12_37'%3E%3Crect width='20' height='31' fill='white'/%3E%3C/clipPath%3E%3C/defs%3E%3C/svg%3E%0A")
											linear-gradient(transparent, transparent);
									}
					.popup .popup-inner .content .step-2 .paypal{
						display: none;
					}
					.popup .popup-inner .content .step-2 .status{
						display: none;
					}
						.popup .popup-inner .content .step-2 .status span{
							display: none;
							flex-direction: row;
							justify-content: center;
							width: 100%;
							text-align: center;
							font-size: 42px;
						}
							.popup .popup-inner .content .step-2 .status span > img{
								max-width: 50px;
								height: auto;
								margin: auto 24px auto 0px;
							}
						.popup .popup-inner .content .step-2 .status .success{
							color: #76D074;
						}
						.popup .popup-inner .content .step-2 .status .error{
							color: #DC5D5D;
						}
						.popup .popup-inner .content .step-2 .status .message{
							font-size: 32px;
							display: inline-block;
							width: 100%;
							margin-top: 15px;
							text-align: center;
						}
					.popup .popup-inner .content .step-2 .status.success,
					.popup .popup-inner .content .step-2 .status.error{ display: block; }
					.popup .popup-inner .content .step-2 .status.success span.success{ display: flex; }
					.popup .popup-inner .content .step-2 .status.error span.error{ display: flex; }
					.popup .popup-inner .content .step-2 h3{
						font-size: 42px;
						line-height: 1.3;
						font-weight: 400;
						color: #1C9ACA;
					}
					.popup .popup-inner .content .step-2 .pre-order-list{
						max-width: 100%;
						width: 480px;
						margin: 15px auto 20px;
						font-size: 28px;
						line-height: 1.3;
						font-weight: 400;
						text-align: left;
					}
						.popup .popup-inner .content .step-2 .pre-order-list li{
							margin-bottom: 10px;
						}
				.popup .popup-inner .content .step-3{
					display: none;
				}


@media(max-width: 767px){
	.popup .popup-inner .content .step-2 .status span{
		font-size: 32px;
	}
		.popup .popup-inner .content .step-2 .status span > img{
			max-width: 35px;
		}
	.popup .popup-inner .content .step-2 .status .message{
		font-size: 28px;
	}
}
@media(max-width: 599px){
	.popup .popup-inner .padding-div{
		padding: 25px 20px 50px;
	}
		.popup .popup-inner .close{
			top: 15px;
			right: 15px;
		}
		.popup .popup-inner .content .step-2 p{
			margin: 10px 0;
		}
		.popup .popup-inner .content .step-2 .buttons{
			width: 180px;
		}
			.popup .popup-inner .content .step-2 .eth-btn{
				flex-wrap: wrap;
			}
				.popup .popup-inner .content .step-2 .eth-btn .price,
				.popup .popup-inner .content .step-2 .eth-btn .send-eth{
					width: 100%;
					flex: 0 0 100%;
					font-size: 30px;
				}
				.popup .popup-inner .content .step-2 .eth-btn .price{
					padding: 15px 25px;
					border-radius: 12px 12px 0 0;
				}
				.popup .popup-inner .content .step-2 .eth-btn .send-eth{
					padding: 15px 25px 15px 15px;
					justify-content: center;
					border-radius: 0 0 12px 12px;
				}

	.popup .popup-inner .content .step-2 h3{
		font-size: 36px;
	}
	.popup .popup-inner .content .step-2 .pre-order-list{
		width: 320px;
		padding-left: 20px;
		font-size: 22px;
	}
}
@media(max-width: 499px){
	.popup .popup-inner .content .step-2 .status span{
		font-size: 22px;
	}
		.popup .popup-inner .content .step-2 .status span > img{
			max-width: 20px;
			margin: auto 15px auto 0;
		}
	.popup .popup-inner .content .step-2 .status .message{
		font-size: 18px;
	}

}


/*================================================*/
/*	STORE	*/
/*================================================*/
#store-banner{
	background: url("/assets/image/store/store-banner-bg.png"), #000;
	background-size: auto 100%;
	background-position: right center;
	background-repeat: no-repeat;
}
	#store-banner .subscribe{
		max-width: 100%;
		width: 490px;
		margin: 30px 0 75px;
		border-radius: 20px;
		background-color: #FFF;
	}
		#store-banner .subscribe .image{
			display: inline-block;
			width: 100%;
			max-height: 292px;
			text-align: center;
			border-bottom: 1px solid #D9D9D9;
			overflow: hidden;
		}
			#store-banner .subscribe .image img{
				max-width: 100%;
				width: 286px;
				height: auto;
				margin-left: -22px;
				margin-top: 20px;
			}
	#store-banner .subscribe .info{
		padding: 30px 38px;
	}
		#store-banner .subscribe .info .top{
			display: flex;
			flex-direction: row;
			align-items: flex-start;
			justify-content: space-between;
			font-family: 'Exo', sans-serif;
		}
			#store-banner .subscribe .info .top .title{
				line-height: 1.2;
			}
				#store-banner .subscribe .info .top .title span{
					display: inline-block;
					width: 100%;
				}
				#store-banner .subscribe .info .top .title .type{
					font-family: 'Exo 2', sans-serif;
					font-size: 19px;
					font-weight: 700;
					font-style: italic;
					color: #003CF7;
				}
				#store-banner .subscribe .info .top .title .name{
					font-size: 32px;
					font-weight: 700;
					color: #000;
				}
			#store-banner .subscribe .info .top .toggle{
				display: flex;
				flex-direction: row;
				font-family: 'Exo', sans-serif;
			}
			#store-banner .subscribe .info .top .psuedo-checkbox{

			}
				#store-banner .subscribe .info .top .psuedo-checkbox label{
					display: flex;
					flex-direction: column;
					cursor: pointer;
				}
					#store-banner .subscribe .info .top .psuedo-checkbox label input{
						height: 0;
						width: 0;
						visibility: hidden;
					}
					#store-banner .subscribe .info .top .psuedo-checkbox label .toggle{
						display: flex;
						flex-direction: row;
						align-items: center;
					}
						#store-banner .subscribe .info .top .psuedo-checkbox .toggle > span{
							margin-right: 5px;
							font-size: 18px;
							font-weight: 700;
						}
						#store-banner .subscribe .info .top .toggle .yearly{ display: none; }
						#store-banner .subscribe .info .top .toggle .monthly{ display:inline-block; }
						#store-banner .subscribe .info .top label input[type=checkbox]:checked ~ .toggle .yearly{ display: inline-block; }
						#store-banner .subscribe .info .top label input[type=checkbox]:checked ~ .toggle .monthly{ display: none; }
						#store-banner .subscribe .info .top .psuedo-checkbox label .toggle .slider{
							position: relative;
							display: flex;
							flex-direction: row;
							justify-content: space-between;
							align-items: center;
							width: 50px;
							height: 26px;
							background-color: #e3e3e3;
							border-radius: 33px;
							border: 1px solid #D9D9D9;
						}
						#store-banner .subscribe .info .top .psuedo-checkbox label .toggle .slider:before{
							content: '';
							position: absolute;
							top: calc(50% - 10px);
							left: calc(100% - 23px);
							width: 20px;
							height: 20px;
							border-radius: 50%;
							background-color: #FFF;
							transition: left .5s;
						}
							#store-banner .subscribe .info .top .psuedo-checkbox label .toggle .slider > span{
								position: absolute;
								display: inline-block;
								margin-top: 2px;
								color: #FFF;
								font-size: 10px;
								line-height: 1;
							}
							#store-banner .subscribe .info .top .psuedo-checkbox label .slider .off{
								position: absolute;
								left: 4.5px;
							}
							#store-banner .subscribe .info .top .psuedo-checkbox label .slider .on{
								right: 6.5px;
							}
							#store-banner .subscribe .info .top .psuedo-checkbox label input[type=checkbox]:checked ~ .toggle .slider{
								background-color: #003CF7;
							}
							#store-banner .subscribe .info .top .psuedo-checkbox label input[type=checkbox]:checked ~ .toggle .slider:before{
								left: 3px;
							}
							#store-banner .subscribe .info .top .psuedo-checkbox label input[type=checkbox]:checked ~ .toggle .slider > .off{ display: none; }
							#store-banner .subscribe .info .top .psuedo-checkbox label input[type=checkbox]:checked ~ .toggle .slider > .on{ display: inline-block; }
					#store-banner .subscribe .info .top .psuedo-checkbox label .savings{
						display: none;
						float: left;
						width: 100%;
						text-align: right;
						font-size: 11px;
						font-weight: 700;
						color: #005BFF;
					}
					#store-banner .subscribe .info .top label input[type=checkbox]:checked ~ .savings{
						display: inline-block;
					}
		#store-banner .subscribe .info .bottom{}
			#store-banner .subscribe .info .bottom ul{}
				#store-banner .subscribe .info .bottom ul li{
					display: flex;
					flex-direction: row;
					align-items: center;
					padding: 5px 0;
					font-family: 'Exo', sans-serif;
					font-size: 19px;
					line-height: 1.5;
					color: #000;
				}
				#store-banner .subscribe .info .bottom ul li:before{
					content: '';
					display: inline-block;
					width: 3px;
					height: 3px;
					margin: 0px 14px 2px 0;
					background-color: #000;
					border-radius: 2px;
				}
			#store-banner .subscribe .info .bottom .btns{}
				#store-banner .subscribe .info .bottom .btns .btn{
					justify-content: center;
					width: 100%;
					padding: 16px 25px;
					font-family: 'Exo 2', sans-serif;
					font-size: 27px;
					font-weight: 700;
					font-style: italic;
				}

@media(max-width: 1300px){
	#store-banner{
		background-position: 20% center;
	}
}
@media(max-width: 1023px){
	#store-banner{
		background-position: 40% center;
	}
}
@media(max-width: 767px){
	#store-banner{
		background-position: center;
	}
		#store-banner .subscribe{
			margin: 100px auto;
		}
}
@media(max-width: 550px){
	#store-banner .subscribe .info{
		padding: 30px 25px;
	}
}
@media(max-width: 420px){
	#store-banner .subscribe .info .top{
		flex-direction: column;
		gap: 20px;
		align-items: flex-start;
	}
	#store-banner .subscribe .info .bottom .btns .btn{
		font-size: 21px;
	}
}


/* PACKS */
#packs{
	padding: 100px 0 160px;
	background: url("assets/image/store/packs-bg.png");
	background-size: 100% auto;
	background-position: bottom -30px center;
	background-repeat: no-repeat;
}
	#packs .headers{
		max-width: 100%;
		width: 900px;
		margin: 0 auto 70px;
		text-align: center;
	}
	#packs .plans{
		--columns: 3;
		--gap: 40px;
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		gap: var(--gap);
	}
		#packs .plans .plan{
			display: flex;
			flex-direction: column;
			width: calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
			flex: 0 0 calc((100% / var(--columns)) - var(--gap) + (var(--gap) / var(--columns)));
		}
			#packs .plans .plan .name{
				display: flex;
				flex-direction: column;
				justify-content: flex-end;
				width: 100%;
				height: 62px;
				margin-bottom: 28px;
				text-align: center;
				line-height: 1.3;
			}
				#packs .plans .plan .name .savings{
					font-family: 'Exo 2', sans-serif;
					font-size: 17px;
					font-weight: 700;
					font-style: italic;
					color: #0B44F5;
				}
				#packs .plans .plan .name h3{
					font-family: 'Exo 2', sans-serif;
					font-size: 28px;
					font-weight: 700;
					font-style: italic;
				}
			#packs .plans .plan .box{
				display: flex;
				flex-direction: column;
				flex-grow: 1;
				justify-content: flex-end;
				position: relative;
				padding: 30px 10px 10px;
				background-color: #FFF;
				border-radius: 50px;
				border: .5px solid rgba(0,0,0,.12);
				box-shadow: 0 12px 16px -4px rgba(0,0,0,.06);
			}
			#packs .plans .plan:nth-child(2) .box{
				background: url("assets/image/store/standard-bg.png"), linear-gradient(to bottom right, #DFF4FF 0%, #C1DDFF 100%);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				background-blend-mode: multiply;
			}
			#packs .plans .plan:nth-child(3) .box{
				background-image: url("assets/image/store/premium-bg.png"), linear-gradient(to top left, #161E2B 0%, #4A6591 100%);
				background-size: cover;
				background-position: center;
				background-repeat: no-repeat;
				background-blend-mode: multiply;
			}
			#packs .plans .plan .box:before{
				content: '';
				position: absolute;
				top: 10px;
				left: calc(50% - 40px);
				display: inline-block;
				width: 80px;
				height: 11px;
				background-image: url("assets/image/store/plan-accent.png");
				background-size: contain;
				background-position: center;
				background-repeat: no-repeat;
			}
				#packs .plans .plan .box .image{
					margin-top: auto;
					margin-bottom: 7px;
					text-align: center;
					line-height: 0;
				}
					#packs .plans .plan .box .image img{
						max-width: 100%;
						height: auto;
					}
				#packs .plans .plan .box .link{}
					#packs .plans .plan .box .link a{
						display: flex;
						flex-direction: column;
						align-items: center;
						justify-content: center;
						padding: 12px 20px;
						border-radius: 55px;
						background: url("/assets/image/store/btn-style.png"), #000;
						transition: opacity .2s;
					}
					#packs .plans .plan .box .link a:hover{ opacity: .7; }
					#packs .plans .plan:nth-child(2) .box .link a{ background: url("/assets/image/store/btn-style.png"), #003CF7; }
					#packs .plans .plan:nth-child(3) .box .link a{ background: linear-gradient(to top, #FFCD89 0%, #FCEBA6 100%); }
						#packs .plans .plan .box .link a span{
							font-family: 'Exo 2', sans-serif;
							font-size: 35px;
							line-height: 1;
							font-weight: 700;
							font-style: italic;
							color: #FFF;
						}
						#packs .plans .plan:last-child .box .link a span{ color: #000; }
						#packs .plans .plan .box .link a .stella{ margin-bottom: 10px }
						#packs .plans .plan .box .link a .price{ font-size: 22px; }

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {
	#store-banner{
		background: url("/assets/image/store/store-banner-bg-2x.png"), #000;
		background-size: auto 100%;
		background-position: right center;
		background-repeat: no-repeat;
	}
	#packs .plans .plan .box:before{
		background-image: url("assets/image/store/plan-accent-2x.png");
	}
	#packs .plans .plan:nth-child(2) .box{
		background: url("assets/image/store/standard-bg-2x.png"), linear-gradient(to bottom right, #DFF4FF 0%, #C1DDFF 100%);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-blend-mode: multiply;
	}
	#packs .plans .plan:nth-child(3) .box{
		background: url("assets/image/store/premium-bg-2x.png"), linear-gradient(to top left, #161E2B 0%, #4A6591 100%);
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
		background-blend-mode: multiply;
	}
	#packs .plans .plan .box .link a{ background: url("/assets/image/store/btn-style-2x.png"), #000; }
	#packs .plans .plan:nth-child(2) .box .link a{ background: url("/assets/image/store/btn-style-2x.png"), #003CF7; }
	#packs .plans .plan:nth-child(3) .box .link a{ background: linear-gradient(to top, #FFCD89 0%, #FCEBA6 100%); }
}

@media(max-width: 1023px){
	#packs .plans{
		--columns: 2;
		gap: 30px;
		justify-content: center;
	}
		#packs .plans .plan{
			max-width: 400px;
		}
}
@media(max-width: 767px){
	#packs .plans{
		--columns: 1;
	}
}
@media(max-width: 500px){
	#packs .headers h2{
		font-size: 40px;
	}
}