/*@font-face {
font-family: 'Inter';
src: url('Inter-VariableFont_slnt,wght.ttf') format('woff2 supports variations'),
	url('Inter-VariableFont_slnt,wght.ttf') format('woff2-variations');
font-weight: 100 1000;
font-stretch: 25% 151%;
}
*/
html * 		{
				margin: 0;
				padding: 0;
				}

html
{scroll-behavior: smooth;}

body 			{
				margin: 0;
				padding: 0;
				font-family: "Inter";
				font-size: 0;
				font-weight: 400;
				background: #f8fafc;
				}

*:focus 		{outline: none;}

.clear 		{clear:both;}

a 				{color: #000;}

input,
textarea,
select		{font-family: "Inter";}

.loader 			{
  					height: 30px;
  					width: 30px;
  					animation: rotate 0.8s infinite linear;
  					border: 3px solid transparent;
  					border-radius: 50%;
  					margin: 0 0 10px;
					}		

					.loader-cover
					{
					position: absolute;
					top: 0;
					right: 0;
					left: 0;
					bottom: 0;
					background: rgba(255,255,255,.7);
					z-index: 100;
					}

					.loader-in
					{
					position: relative;
					margin-right: 250px;
					}

					.loader-cover .loader
					{
					position: absolute;
					top: 100px;
					left: 50%;
					margin-left: -18px;
					}

@keyframes rotate 	{
					0%    {transform: rotate(360deg);}
					100%  {transform: rotate(0deg);}
					}


/*////////////////////////////////
---------------------------------
HEADER
---------------------------------
////////////////////////////////*/		

.header 			{
					position: fixed;
					top: 0;
					left: 0;
					right: 0;
					background: #fff;
					box-shadow: 0 3px 5px #e2e8f080;
					z-index: 10;
					}

					.header-in
					{
					position: relative;
					padding: 15px 0;
					max-width: 1500px;
					box-sizing: border-box;
					margin: auto;
					}

					.header-left,
					.header-right
					{
					display: inline-block;
					vertical-align: middle;
					box-sizing: border-box;
					white-space: nowrap;
					padding: 0 20px;
					width: 80%;
					}

						.header-right
						{
						width: 20%;
						text-align: right;
						}

					.mobile-menu,
					.mobile-search,
					.x-side,
					.search-modal
					{display: none;} /* styles on media queries below */

					.logo,
					.search-hold,
					.search-cover
					{
					display: inline-block;
					vertical-align: middle;
					box-sizing: border-box;
					}

						.logo
						{width: 300px;}

					.side-button
					{
					display: inline-block;
					vertical-align: middle;
					height: 40px;
					font-size: 15px;
					font-weight: 400;
					text-decoration: none;
					color: #000;
					color: #fff;
					border-radius: 5px;
					padding: 10px 15px;		
					box-sizing: border-box;						
					transition: all .15s;
					}

.css-logo 		{
					display: inline-block;
					vertical-align: middle;
					width: 40px;
					height: 40px;
					position: relative;
					background: #f9197f;
					border-radius: 100%;
					}					

					.css-logo span
					{
					width: 36%;
					height: 54%;
					background: #fff;
					border-radius: 45%;
					position: absolute;
					top: 23%;
					left: 8%;
					}

					.logo a
					{
					display: inline-block;
					vertical-align: middle;
					}

					.logo a img
					{
					display: inline-block;
					width: 40px;
					vertical-align: middle;
					margin-right: 10px;
					}

					.logo a p
					{
					font-size: 15px;
					font-weight: 900;
					color: #334155;
					text-transform: uppercase;
					letter-spacing: 1px;
					display: inline-block;
					vertical-align: middle;
					}

.search-hold 	{
					width: 63%;
					padding-left: 55px;
					}

.search 			{
					border: 1px solid #e2e8f0;
					border-radius: 10px;
					text-align: left;
					padding: 13px;
					}

						.search:hover
						{border-color: #cbd5e1;}

					.search svg
					{
					width: 15px;
					display: inline-block;
					vertical-align: middle;
					color: #94a3b8;
					margin: 0 10px 0 5px;
					}

					.search input
					{
					width: 90%;
					display: inline-block;
					vertical-align: middle;
					font-size: 15px;
					font-weight: 350;
					border: none;
					color: #334155;
					}

					.search input::placeholder
					{color: #94a3b8;}


/*////////////////////////////////
---------------------------------
BUILD
---------------------------------
////////////////////////////////*/	



.wrap 			{
					position: relative;
					max-width: 1500px;
					margin: 77px auto 0;
					background: #fff;
					}

.side 			{
					position: fixed;
					top: 73px;
					bottom: 0;
					width: 330px;
					background: #f1f5f9;
					overflow-y: auto;
					padding: 70px;
					box-sizing: border-box;
					}

					.chapter
					{margin-bottom: 50px;}

						.collapsed .chapter
						{margin-bottom: 20px;}

					.chapter h2
					{
					font-size: 15px;
					font-weight: 500;
					line-height: 1.2;
					margin-bottom: 15px;
					color: #1e293b;
					position: relative;
					}

						.collapsed h2
						{cursor: pointer;}

						.collapsed h2:hover
						{opacity: .8;}

						.chapter h2 span
						{
						display: inline-block;
						position: absolute;
						top: -1px;
						left: -10px;
						}

					.chapter a
					{
					display: block;
					font-size: 13px;
					font-weight: 400;
					line-height: 1.4;
					color: #64748b;
					text-decoration: none;
					border-left: 2px solid #cbd5e1;
					padding: 5px 10px;
					position: relative;
					}

						.collapsed a
						{display: none;}

						.collapsed a.collapsed-show
						{display: block;}

						.collapsed a:last-child
						{margin-bottom: 30px;}

						.chapter a:hover
						{color: #1e293b;}

						.chapter a span 
						{
						display: inline-block;
						width: 6px;
						height: 6px;
						margin-right: 10px;
						border-radius: 100%;
						position: absolute;
						top: 11px;
						left: -4px;
						}

							.chapter a:hover span
							{background: #cbd5e1;}

						.chapter a.current
						{font-weight: 500;}

.main-hold		{
					position: relative;
					margin-left: 330px;
					}

.main 			{
					min-height: 1500px;
					position: relative;
					margin: 0 250px 0 0;
					bottom: 0;
					padding: 70px;
					box-sizing: border-box;
					overflow-y: auto;
					}

					.main figure,
					.main img
					{
					display: block;
					width: 100%;
					margin: 40px 0;
					}

					.main figure.align-center
					{
					margin: 40px auto;
					text-align: center;
					}

					.main figure.align-center img
					{
					display: inline-block;
					margin-bottom: 5px;
					}

					figcaption
					{font-size: 14px;}

					.main p.tag
					{
					font-size: 13px;
					font-weight: 500;
					line-height: 1;
					text-transform: uppercase;
					}

					.main h1,
					.main h2,
					.main h3
					{
					font-size: 30px;
					font-weight: 420;
					margin: 20px 0 25px;
					color: #0f172a;
					}

					.main h2
					{
					font-size: 25px;
					margin: 50px 0px 15px;
					padding-top: 50px;
					border-top: 1px solid #cbd5e1;
					}

						.main h2 p.tag
						{margin-bottom: 7px;}

					.main h3
					{
					font-size: 20px;
					margin: 40px 0px 15px;
					}

					.copy-header
					{scroll-margin-top: 75px;}

					.copy-header-h3
					{scroll-margin-top: 120px;}

					.main p,
					.main ul li,
					.main ol li
					{
					font-size: 16px;
					font-weight: 330;
					line-height: 1.7;
					color: #334155;
					}

						.main p+p
						{margin-top: 30px;}

					.main ul,
					.main ol
					{margin: 10px 0 30px 40px;}

					.main ul ul,
					.main ul ul ul
					{margin: 0 0 10px 40px;}

					/* for iframe */
					.main p + div,
					.main ol + div,
					.main ul + div,

					.main p + iframe,
					.main ol + iframe,
					.main ul + iframe,

					.main div + p,
					.main div + h2,
					.main div + h3,
					.main div + ul,
					.main div + ol

					.main iframe + p,
					.main iframe + h2,
					.main iframe + h3,
					.main iframe + ul,
					.main iframe + ol
					{margin-top: 50px;}

			.main blockquote
			{
			font-style: normal;
			margin: 50px 74px;
			padding-left: 20px;
			border-left: 2px solid #ddd;
			}

			.rx-content blockquote p
			{font-size: 21px;}

			.main blockquote cite
			{
			font-size: 14px;
			line-height: 1.5;
			font-style: normal;
			color: rgba(38,47,63,.7);
			}

				.main blockquote p + p
				{margin: 0;}

			.main table
			{
			width: 100%;
			border-spacing: 0;
			margin: 33px 0;
			font-size: 16px;
			border-top: 1px solid #ddd;
			border-left: 1px solid #ddd;
			}

			.main table td,
			.main .rx-content td,
			.main .rx-content th
			{
			border: none;
			padding: .75em;
			font-size: 95%;
			border-right: 1px solid #ddd;
			border-bottom: 1px solid #ddd;
			}

			.main table td b
			{font-weight: 600;}






					.main hr 		{
										height: 1px;
										background: #ccc;
										border: 0;
										margin: 30px 0;
										}

					.main p code,
					.main li code 	{
										display: inline;
										background: #eee;
										padding: 3px 5px;
										margin: 0 3px;
										color: #e01e5a;
										line-height: 100%;
										border-radius: 3px;
										border: 1px solid rgba(0,0,0,.03);
										font-size: 16px;
										word-break: break-all;
										}

										.main pre code
										{color: #e01e5a;}

					.main pre 		{
										background: #eee;
										margin: 35px 0;
										padding: 15px;
										border-radius: 3px;
										overflow-x: auto;
										font-size: 14px;
										line-height: 120%;										
										border: 1px solid rgba(0,0,0,.03);
										}

					.main .article-end iframe
					{width: 100%;}

					.main .post-content .embed-responsive
					{
					position: relative;
					padding: 0;
					margin: 0;
					padding-bottom: 56.25%;
					padding-top: 25px;
					height: 0;
					}

					.main .embed-responsive iframe
					{
					display: inline-block;
					position: absolute;
					top: 0;
					left: 0;
					width: 100%;
					height: 100%;
					}

					.main .twitter-tweet
					{
					display: block;
					margin: auto;
					}

					.author img
					{
					display: inline-block;
					vertical-align: middle;
					width: 55px;
					margin-right: 7px;
					margin-left: -5px;
					border-radius: 100%;
					border: 2px solid #fff;
					}

						.author img + img
						{margin-left: -20px;}

					.author div
					{
					display: inline-block;
					vertical-align: middle;
					}

					.author p
					{
					font-weight: 500;
					margin-bottom: 0;
					color: #777;
					}

					.author a,
					.author em,
					.author b
					{
					color: #000;
					font-weight: 500;
					font-size: 15px;
					font-style: normal;
					text-decoration: none;
					}

					.author span
					{
					display: block;
					font-size: 13px;
					font-weight: 350;
					color: #757575;
					}










	.main-side	{
					position: absolute;
					right: 0;
					top: 0;
					width: 250px;
					box-sizing: border-box;
					float: right;
					}					

					.main-side-in
					{
					position: fixed;
					top: 73px;
					padding: 70px 70px 70px 0;
					width: 250px;
					bottom: 0;
					box-sizing: border-box;
					overflow-y: auto;
					}

					/* side menu inside main */
					.main-side p,
					.main-side a
					{
					font-size: 13px;
					font-weight: 500;
					color: #0f172a;						
					}

					.main-side a
					{
					display: block;
					font-weight: 350;
					line-height: 1.35;
					margin-top: 10px;
					color: #64748b;
					text-decoration: none;
					cursor: pointer;
					}

					.main-side a.sub
					{margin-left: 10px;}


.subsection
{
height: 20px;
margin-top: 100px;
}
		
					.subsection img
					{
					display: block;
					width: auto;
					height: 100%;
					}


.grecaptcha-badge
{visibility: hidden;}



.main p.tag,
.chapter a.current,
.main-side a:hover,
.main-side a.current
{color: #9876ff;}

.side-button,
.chapter a.current span
{background: #9876ff;}

	.side-button:hover
	{background: #251c3d;}

.loader
{
border-color: #9876ff;
border-top-color: transparent;
}



@media only screen 
	and (max-width: 1300px) {

	.logo
	{
	padding-left: 0;
	width: 240px;
	}

	.search-hold
	{padding-left: 15px;}

	.main-side
	{display: none;}

	.side
	{
	width: 270px;
	padding: 50px 45px;
	}

	.main-hold
	{margin: 0 0 0 270px;}

	.main
	{
	margin: 0;
	padding: 50px;
	}

}


@media only screen 
	and (max-width: 900px) {

	.header-left,
	.header-right
	{
	width: 50%;
	padding-left: 15px;
	}

	.mobile-menu
	{
	display: inline-block;
	vertical-align: middle;
	margin-right: 15px;
	width: 40px;
	height: 40px;
	text-align: center;
	line-height: 65px;
	cursor: pointer;
	}

		.mobile-menu svg
		{width: 24px;}

	.css-logo
	{
	width: 35px;
	height: 35px;
	}

	.logo
	{width: auto;}

	.logo p
	{display: none;}

	.search-hold
	{display: none;}

	.login
	{margin-left: 10px;}

	.mobile-search
	{
	display: inline-block;
	vertical-align: middle;
	width: 40px;
	height: 40px;
	margin-right: 10px;
	text-align: center;
	line-height: 65px;
	cursor: pointer;
	}

		.mobile-search svg
		{width: 24px;}

	.wrap
	{margin-top: 61px;}

	.side
	{
	width: 330px;
	top: 0;
	z-index: 50;
	background: #fff;
	box-shadow: 0 3px 10px rgba(0,0,0,.1);
	padding-top: 73px;
	display: none;
	}

		.x-side 
		{
		position: absolute;
		top: 15px;
		left: 15px;
		display: block;
		width: 40px;
		height: 40px;
		text-align: center;
		line-height: 65px;
		cursor: pointer;
		}

			.x-side svg
			{width: 24px;}

		.blur-mobile
		{
		position: fixed;
		left: 0;
		top: 0;
		right: 0;
		bottom: 0;
		background: #0f172a70;
		backdrop-filter: blur(2px);
		z-index: 30;
		display: none;
		}	

	.main-hold
	{margin: 0;}

	.search-modal
	{
	width: 500px;
	position: fixed;
	top: 100px;
	left: 50%;
	margin-left: -250px;
	background: #fff;
	padding: 20px;
	box-sizing: border-box;
	border-radius: 3px;
	box-shadow: 0 1px 3px rgb(0 0 0 / 20%);
	display: none;
	z-index: 100;
	}

}


@media only screen 
	and (max-width: 500px) {

	.logo a p
	{display: none;}

	.search-modal
	{
	width: 400px;
	margin-left: -200px;
	}

	.search input
	{width: 83%;}

}