@font-face {
	font-display:			swap;
	font-family:			'NTSomic';
	src:					url('./fonts/NT\ Somic-VF.ttf');
}

*{
	font-size:				20px;
	font-family:			NTSomic, Arial;
	color:					#474747;

	box-sizing:				border-box;
}
body{
	margin:					0px;
	padding:				0px;
}
a.none{
	text-decoration:		none;
}
.center{
	width:					1200px;
	margin:					0px auto;
}
.button{
	text-align:				center;
	border:					none;
	background-color:		#007DAA;

	color:					white;
	padding:				10px 20px;
	border-radius:			16px;
	cursor:					pointer;
	transition:				.3s;
}
.button:hover{
	background-color:		#008BBD;
}

/*menu***************************************/
.menu{
	z-index:				1000;
	position:				fixed;
	width:					100%;
}
.menuBlock{
	display:				grid;
	grid-template-columns:	auto 1fr auto;
	grid-template-rows:		auto;
	grid-gap:				16px;
	align-items:			center;
	justify-items:			center;

	padding:				4px;
	margin:					8px auto;
	border-radius:			32px;

	transition:				.5s;
}
.about{
	display:				grid;
	grid-template-columns:	auto auto;
	grid-template-rows:		auto;
	grid-gap:				8px;
	align-items:			center;
	justify-items:			center;

	cursor:					pointer;
	transition:				.3s;
}
.about:hover{
	transform:				scale(1.05);
}
.aboutIcon{
	height:					40px;
	width:					40px;
	border-radius:			40px;

	background:				#00AFBA;

	background-size:		auto;
	background-repeat:		no-repeat;
	background-image:		url('./icon/about.svg');
	background-position:	center;
}
.aboutText{
	color:					white;
	#font-weight:			bold;
}
.logo{
	display:				grid;
	grid-template-columns:	auto auto;
	grid-template-rows:		auto;
	grid-gap:				0px;

	position:				relative;
	cursor:					pointer;
}
.logoIcon{
	height:					26px;
	width:					60px;
	position:				relative;
	top:					10px;
	left:					14px;

	background-size:		contain;
	background-repeat:		no-repeat;
	background-image:		url('./icon/logo.svg');
	background-position:	center;
}
.logoText{
	color:					white;
	font-weight:			bold;
	font-size:				32px;
	font-style:				italic;
}
.menuB{
	display:				grid;
	grid-template-columns:	auto auto;
	grid-template-rows:		auto;
	grid-gap:				8px;
	align-items:			center;
	justify-items:			center;

	cursor:					pointer;
	transition:				.3s;
}
.menuB:hover{
	transform:				scale(1.05);
}
.menuBIcon{
	height:					40px;
	width:					40px;
	border-radius:			40px;

	background:				#00AFBA;
	background-size:		60%;
	background-repeat:		no-repeat;
	background-image:		url('./icon/menu.svg');
	background-position:	center;
}
.menuBText{
	color:					white;
	#font-weight:			bold;
}

.aboutP{
	position:				absolute;
	left:					0px;

	width:					fit-content;

	padding:				20px 40px;
	border-radius:			26px;
	color:					#262626;
	#font-weight:			bold;

	background-color:		rgba(255,255,255,.6);
	backdrop-filter:		blur(10px);
	transition:				.5s;
}

.startForms{
	display:				grid;
	grid-template-columns:	1fr 3fr 1fr;
	grid-template-rows:		auto;
	grid-gap:				16px;
	align-items:			center;

	max-width:				600px;
	padding:				16px;
	margin:					0px auto;
	border-radius:			26px;

	border:					3px solid rgba(255,255,255,.6);
	background-color:		rgba(255,255,255,.6);
	backdrop-filter:		blur(10px);

	box-shadow:				0px 0px 20px rgba(0,0,0,.1);

	transition:				.3s;
}

.enterForm{
	grid-column:			span 3;

	height:					fit-content;

	background-color:		rgba(255,255,255,.6);
	padding:				64px;
	border-radius:			16px;
}
form.form{
	display:				grid;
	grid-template-columns:	1fr;
	grid-template-rows:		auto auto;
	grid-gap:				16px;
}
input{
	width:					100%;
	padding:				8px 16px;
	border-radius:			10px;
	border:					none;
	background-color:		rgba(0,30,0,.3);
	color:					white;
	text-align:				center;
}
.enterBlock1{
	grid-column:			span 3;

	display:				grid;
	grid-template-columns:	1fr 2fr 1fr;
	grid-template-rows:		auto;
	grid-gap:				16px;
}
.enterBlock2{
	grid-column:			span 3;

	display:				grid;
	grid-template-columns:	1fr 1fr;
	grid-template-rows:		auto;
	grid-gap:				16px;
}
.enterTitle{
	#color:					#262626;
	font-weight:			600;
	text-align:				center;
}


.passRemember{
	font-size:				13px;
	margin-top:				10px;
	color:					#909090;
	text-align:				center;
	cursor:					pointer;
}
.passRemember:hover{
	text-decoration:		underline;
}
.butOk{
}
.butReg{
	background-color:		#BA00B1;
}
.butReg:hover{
	background-color:		#D900CF;
}
.butPass{
	background-color:		#4900CA;
}
.butPass:hover{
	background-color:		#5300E5;
}
.butClose{
	justify-self:			end;

	height:					40px;
	width:					40px;
	border-radius:			50%;

	background-color:		#9F7171;
	background-size:		60%;
	background-repeat:		no-repeat;
	background-image:		url('./icon/close.svg');
	background-position:	center;
}
.butClose:hover{
	background-color:		#C14E4E;
}

.menuP{
	position:				absolute;
	right:					0px;

	width:					fit-content;

	padding:				8px;
	padding-top:			24px;
	border-radius:			26px;
	color:					#262626;
	font-weight:			600;

	border:					3px solid rgba(255,255,255,.4);
	background-color:		rgba(255,255,255,.4);
	backdrop-filter:		blur(10px);

	box-shadow:				0px 0px 20px rgba(0,0,0,.1);

	transition:				.5s;
}

.menuSel{
	#color:					#333333;
	padding:				8px;
	border-radius:			12px;
	transition:				.5s;
	cursor:					pointer;
}
.menuSel:hover{
	background-color:		rgba(255,255,255,.6);
}
.menuBox{
	display:				grid;
	grid-template-columns:	1fr auto;
	grid-template-rows:		1fr auto;
	grid-gap:				16px;

	margin:					10px 0px 0px 0px;
	padding:				8px;

	height:					100px;
	width:					270px;
	border-radius:			22px;

	background-size:		cover;
	background-repeat:		no-repeat;
	#background-color:		rgba(200,150,255,.4);
	background-color:		rgba(255,255,255,.6);
	background-image:		url('./icon/enter.svg');

	cursor:					pointer;
	transition:				.3s;
}
.menuBox:hover{
	transform:				scale(1.02);
}
.menuBoxText{
	margin-left:			10px;
	#color:					#1A1A1A;
	font-weight:			600;
}
.menuBoxComment{
	align-self:				end;
	color:					#919191;
	font-size:				17px;
	margin-left:			10px;
	font-style:				italic;
}
.menuBoxIcon{
	align-self:				end;
	justify-self:			end;

	height:					40px;
	width:					40px;
	border-radius:			40px;

	background:				#00AFBA;
	background-size:		contain;
	background-repeat:		no-repeat;
	background-position:	center;
}
.mnbi1{
	background-image:		url('./icon/login.svg');
	background-size:		50%;
}
.mnbi2{
	background-image:		url('./icon/sign.svg');
	background-size:		50%;
}


/*main***************************************/
.mainBack{
	position:				fixed;
	height:					100%;
	width:					100%;
	z-index:				-1000;

	background-size:		cover;
	background-repeat:		no-repeat;
	background-image:		url('back5.svg');
	background-position:	center;
}
.mainPic{
	position:				absolute;
	height:					100%;
	width:					100%;
	z-index:				-999;

	background-size:		50%;
	background-repeat:		no-repeat;
	background-image:		url('back2.png');
	background-position:	95% 50%;
}

.main{
	height:					100%;
	width:					100%;
}
.mainBlock{
	display:				grid;
	grid-template-columns:	auto auto 1fr;
	grid-template-rows:		1fr auto;
	grid-gap:				16px;
	align-items:			center;
	justify-items:			start;

	height:					100%;
}
.mainTitle{
	grid-column:			span 3;
	color:					#474747;
	font-weight:			400;
	font-size:				72px;
	line-height:			.94;
	letter-spacing:			-2px;
	padding-top:			50px;
}
span.mainTitleKol{
	font-size:				inherit;
	color:					#a4a0ff;
}

.mainBox{
	display:				grid;
	grid-template-columns:	1fr;
	grid-template-rows:		1fr auto;
	grid-gap:				16px;

	margin:					0px 0px 16px 0px;
	padding:				10px;

	height:					150px;
	width:					270px;
	border-radius:			26px;

	background-size:		140%;
	background-repeat:		no-repeat;
	background-position:	center;

	background-color:		rgba(255,255,255,.4);
	backdrop-filter:		blur(10px);

	transition:				.3s;
	cursor:					pointer;
}
.mainBox:hover{
	transform:				scale(1.05);
}
.mainBox1{
	background-image:		url('./icon/main1.svg');
}
.mainBox2{
	background-image:		url('./icon/main2.svg');
}
.mainBoxText{
	margin-left:			10px;
	color:					#4D4D4D;
	font-weight:			bold;
}
.mainBoxIcon{
	align-self:				end;
	justify-self:			end;

	height:					40px;
	width:					40px;
	border-radius:			40px;

	background:				#00AFBA;
	background-size:		contain;
	background-repeat:		no-repeat;
	background-position:	center;
}
.mbi1{
	background-image:		url('./icon/info.svg');
	background-size:		26%;
}
.mbi2{
	background-image:		url('./icon/for.svg');
	background-size:		50%;
}


.mainTag{
	padding:				10px 20px;
	color:					white;
	font-size:				12px;
	font-weight:			bold;
	border-radius:			50px;

	position:				absolute;
}
.mainTag1{
	background-color:		#BA00B1;
	top:					60%;
	right:					580px;
}
.mainTag2{
	background-color:		#007DAA;
	top:					20%;
	right:					500px;
}
.mainTag3{
	background-color:		#4900CA;
	top:					15%;
	right:					100px;
}
.mainTag4{
	background-color:		#D06300;
	top:					80%;
	right:					100px;
}


.gap{
	height:					1px;
}
.content{
	#height:					60vh;
	margin:					40px auto;
	padding:				20px;
	border-radius:			32px;

	background-color:		rgba(155,155,255,.2);
	backdrop-filter:		blur(10px);
}
.aboutBlock{
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-template-rows:		auto auto auto;
	grid-gap:				32px;
}
.forBlock{
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-template-rows:		auto 1fr 1fr;
	grid-gap:				32px;
}
.exampleBlock{
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr 1fr;
	grid-template-rows:		auto 1fr 1fr 1fr;
	grid-gap:				8px 32px;
}
.priceBlock{
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-template-rows:		auto auto auto auto;
	grid-gap:				32px;
}
.connectBlock{
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-template-rows:		auto auto;
	grid-gap:				32px;
}

.ct{
	display:				grid;
	grid-template-columns:	1fr;
	grid-template-rows:		1fr auto;
	grid-gap:				16px;
}
.contentTitle{
	font-size:				64px;
	color:					#2F2F2F;
}
.contentFond{
	align-self:				end;
	justify-self:			start;
	font-size:				20px;

	background-color:		#C8C6F4;
	padding:				16px;
	border-radius:			16px;

	display:				grid;
	grid-template-columns:	auto;
	grid-template-rows:		auto auto;
	grid-gap:				12px;

	transition:				.3s;
	cursor:					pointer;
}
.contentFond:hover{
	background-color:		#BAB8EF;
}
.contentBox{
	border-radius:			16px;
	padding:				20px;

	display:				grid;
	grid-template-columns:	auto 1fr;
	grid-template-rows:		1fr auto;
	grid-gap:				40px;

	background-repeat:		no-repeat;
	background-color:		#A19EEF;
}
.contentNum{
	height:					fit-content;
	#padding:				8px 14px;
	#border-radius:			32px;

	color:					white;
	font-weight:			bold;
	font-size:				32px;
	#background-color:		white;
}
.contentText{
	color:					#FFFFFF;
	font-size:				24px;
	font-weight:			500;
}
.cb1{
	grid-column:			span 2;

	#background-color:		rgba(50,200,255,.4);
	background-size:		40%;
	background-position:	90% -30px;
	background-image:		url('./icon/info1.svg');
}
.cb2{
	grid-column:			span 2;

	#background-color:		rgba(250,150,255,.4);
	background-size:		50%;
	background-position:	110% -40px;
	background-image:		url('./icon/info2.svg');
}
.cb3{
	grid-row:				span 2;

	#background-color:		rgba(250,200,255,.4);
	background-size:		70%;
	background-position:	110% 40%;
	background-image:		url('./icon/info3.svg');
}
.cb4{
	grid-column:			span 2;
	align-self:				center;

	color:					#4D4D4D;
	font-size:				24px;
}
.contentSubBox{
	grid-column:			span 2;
	display:				grid;
	grid-gap:				16px;
	align-items:			center;

	color:					#1A1A1A;
	background-color:		rgba(255,255,255,.6);
	backdrop-filter:		blur(10px);

	border-radius:			16px;
	padding:				20px;
}
.contentSub2Box{
	color:					white;
	background-color:		#7F7DBC;
	border-radius:			16px;
	padding:				20px;
}
.csb1{
	grid-template-columns:	1fr auto auto;
}
.csb2{
	grid-template-columns:	1fr auto;
}
.csb3{
	grid-template-columns:	1fr;
}

.fb0{
	grid-column:			span 2;

	background-color:		#7673C4;
	background-size:		40%;
	background-position:	90% -30px;
	background-image:		url('./icon/for1.svg');
}

.forBox{
	position:				relative;
	border-radius:			16px;
	padding:				20px;

	display:				grid;
	grid-template-columns:	1fr auto;
	grid-template-rows:		1fr auto;
	grid-gap:				20px;

	background-color:		#A19EEF;
}
.forTitle{
	color:					#FFFFFF;
	font-size:				24px;
	font-weight:			600;
}
.forNum{
	background-color:		#A200A2;
	border-radius:			8px;
	padding:				10px 20px;
	height:					fit-content;
	color:					#FFFFFF;
	font-size:				24px;
	font-weight:			600;
}

.forText{
	grid-column:			span 2;
}
.forBoxLast{
	background-size:		70%;
	background-repeat:		no-repeat;
	background-image:		url('./icon/logo.svg');
	background-position:	center;
	opacity:				.3;
}

.forBoxBack{
	position:			absolute;
	top:				55px;
	right:				55px;
	width:				55px;
	height:				55px;
	background-color:	white;
	border-radius:		8px;
	opacity:			.2;
}
.fb1{	filter: 			brightness(1.2);}
.fb3{	filter: 			brightness(1.2);}
.fb5{	filter: 			brightness(1.2);}


.eb0{
	grid-column:			span 3;
	margin-bottom:			24px;

	background-color:		#7673C4;
	background-size:		70%;
	background-position:	120% -30px;
	background-image:		url('./icon/enter.svg');
}

.exDelo{
	text-align:				center;
	background-color:		#7393C4;
	border-bottom:			4px solid #4B74B3;
	border-radius:			8px 8px 0px 0px;
	padding:				10px;
	color:					white;
}
.exDeloPar{
	text-align:				right;
	background-color:		#7393C4;
	border-right:			4px solid #4B74B3;
	border-radius:			8px 0px 0px 8px;
	padding:				10px;
	color:					white;
}
.exDeloCell{
	text-align:				center;
	background-color:		#B2B1DB;
	border-left:			4px solid #7B78C9;
	border-right:			4px solid #7B78C9;
	padding:				10px;
}
.exKvl{
	grid-column:			span 4;
	text-align:				center;
}
.exButton{
	grid-column:			span 2;
	text-align:				center;
	border-radius:			64px;
	color:					white;
	padding:				10px;
	margin:					24px 0px;
	background-color:		#00AFBA;
	cursor:					pointer;
	transition:				.3s;
}
.exButton:hover{
	background-color:		#00949D;
}
.exGraph{
	grid-column:			span 4;
	text-align:				center;
	border-radius:			16px;
	padding:				10px;
	background-color:		#8A6FBF;
	height:					100px;
}
input.ex{
	padding:				1px;
	background-color:		rgba(0,0,0,.03);
	color:					#262626;
}
input.ex:focus{
	outline:				none;
}

.ct0{
	grid-column:			span 2;
}

.cnb0{
	background-size:		40%;
	background-position:	110% 30px;
	background-image:		url('./icon/step.svg');
	background-repeat:		no-repeat;
}
.cnb1{
	grid-column:			span 3;
}

.pb0{
	grid-column:			span 2;

	background-color:		#7673C4;
	background-size:		40%;
	background-position:	90% -30px;
	background-image:		url('./icon/price1.svg');
}
.priceCell{
	position:				relative;
	border-radius:			16px;
	padding:				20px;

	color:					#FFFFFF;
	font-size:				24px;
	font-weight:			600;

	background-repeat:		no-repeat;
	background-color:		#A19EEF;
}
.umn{
	position:				absolute;
	top:					26px;
	right:					-35px;
	height:					40px;
	width:					40px;
	background-color:		#886ABB;
	border-radius:			40px;
	z-index:				1;

	background-repeat:		no-repeat;
	background-position:	center;
	background-size:		70%;
	background-image:		url('./icon/umn.svg');
}
.primCell{
	border-radius:			16px;
	padding:				20px;
	text-align:				center;

	background-repeat:		no-repeat;
	background-color:		#BF89F7;
	background-image:		url('./icon/circle.svg');
}
.priceCellText{
	font-size:				16px;
	font-weight:			200;
}
.primTitle{
	grid-column:			span 3;
	text-align:				center;
}
.pc1{
	background-size:		40%;
	background-position:	10% -70px;
}
.pc2{
	background-size:		200%;
	background-position:	-50px 10px;
}
.pc3{
	background-size:		200%;
	background-position:	-440px 10px;
}


.connectButton{
	text-align:				center;
	border-radius:			8px;
	color:					white;
	padding:				10px 20px;
	margin:					24px 0px;
	background-color:		#00AFBA;
	cursor:					pointer;
	transition:				.3s;
}
.connectButton:hover{
	background-color:		#00949D;
}
.cnb1{
	display:				grid;
	grid-template-columns:	1fr auto;
	grid-template-rows:		1fr;
	grid-gap:				20px;
}

.bottomBack{
	width:					100%;
	#height:					400px;
	padding:				20px 0px;
	background-color:		#28211C;
}
.bottom{
	display:				grid;
	grid-template-columns:	1fr 1fr 1fr;
	grid-template-rows:		1fr auto;
	grid-gap:				20px;

	height:					100%;
}
.bottomPic{
	grid-row:				span 2;

	background-repeat:		no-repeat;
	background-position:	center left;
	background-size:		contain;
	background-image:		url('./icon/bottom.png');
}
.buttomFasie{
	grid-column:			span 2;
	display:				grid;
	grid-template-columns:	120px 1fr;
	grid-template-rows:		auto;
	grid-gap:				20px;
}
.buttomFasieText{
	color:					#BFBFBF;
	font-size:				16px;
	font-weight:			200;
}



.bottomTitle{
	color:					#FFFFFF;
	font-size:				32px;
	font-weight:			600;
	margin-bottom:			40px;
}
.bottomText{
	color:					#BFBFBF;
	font-size:				16px;
	font-weight:			200;
	margin-bottom:			20px;
}

.buttomCont{
	display:				grid;
	grid-template-columns:	1fr;
	grid-template-rows:		auto auto auto;
	grid-gap:				20px;
}
.buttomLink{
	background-color:		#BBADA3;
	border-radius:			16px;
	padding:				20px;
	color:					#262626;
	font-size:				16px;
	font-weight:			200;
	transition:				.3s;
}
.buttomLink:hover{
	background-color:		#D7C6B9;
}