@import url("https://fonts.googleapis.com/css?family=Montserrat:400,400i,500,600,600i&subset=latin,cyrillic");

/* ! reset */

html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, address,
big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, var, dl, dt, dd,
fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, ol, ul, li,
article, aside, details, dialog, figure, footer, header, main, mark, nav, section, summary, time,
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="submit"], textarea, select
	{
		margin: 0;
		padding: 0;
		border: none;
		outline: none;
		font-weight: inherit;
		font-style: inherit;
		font-size: 100%;
		font-family: inherit;
		line-height: inherit;
		vertical-align: baseline;
	}

:focus
	{
		outline: none;
	}

body, input, textarea, select
	{
		font-size: 18px;
		font-family: "Montserrat", sans-serif;
		font-weight: 400;
		line-height: 1.5em;
		color: #000;
		background-color: #f9fafa;
	}

@media only screen and (max-width: 1023px)
	{
		body
			{
				font-size: 16px;
				line-height: 1.5em;
			}
	}

table
	{
		border-collapse: collapse;
		border-spacing: 0;
	}

caption, th, td
	{
		text-align: left;
		font-weight: 400;
	}

blockquote:before, blockquote:after, q:before, q:after
	{
		content: "";
	}

blockquote, q
	{
		quotes: "" "";
	}

input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="submit"], textarea, select
	{
		font-size: 100%;
		position: relative;
		display: inline-block;
		background-color: #fff;
		-webkit-border-radius: 0;
		-moz-border-radius: 0;
		border-radius: 0;
		-moz-box-sizing: border-box;
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		-webkit-appearance: none;
		-moz-appearance: none;
		appearance: none;
		resize: none;
	}

input[type="checkbox"]
	{
		margin: 0 4px 0 0;
		padding: 0;
	}

html *
	{
		-webkit-font-smoothing: subpixel-antialiased;
		-webkit-tap-highlight-color: transparent;
		-moz-tap-highlight-color: transparent;
		-webkit-text-size-adjust: none;
		-moz-text-size-adjust: none;
		-ms-text-size-adjust: none;
		text-size-adjust: none;
		max-height: 1000000px;
	}

/* ! styles */

article p, article pre, article blockquote, article address, article ol, article ul, article dl,
article table, article form, article fieldset, article div, article hr, article .hr, article object,
article embed, article iframe, article audio, article video
	{
		margin-top: 1.5em;
	}

article :first-child, article ol ul, article ul ol, article ul ul, article ol ol, article div div,
article table table
	{
		margin-top: 0;
	}

article h2
	{
		font-size: 177.777777%;
		line-height: 1.5em;
		font-weight: 600;
	}

article h3
	{
		font-size: 125%;
		line-height: 1.5em;
		font-weight: 600;
	}

@media only screen and (max-width: 1023px)
	{
		article h2
			{
				font-size: 166.666666%;
				line-height: 1.5em;
			}
		article h3
			{
				font-size: 137.5%;
				line-height: 1.5em;
			}
	}

/* ! select */

header, footer, .e-btn, body>.alert, .form, .question, .box, .test
	{
		-webkit-user-select: none;
		-khtml-user-select: none;
		-moz-user-select: none;
		-ms-user-select: none;
		-o-user-select: none;
		user-select: none;
		cursor: default;
	}

/* ! header */

header
	{
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		height: 64px;
		z-index: 100;
		box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, .05), 0px 0px 10px 0px rgba(0, 0, 0, .15);
	}

/* @supports ((-webkit-backdrop-filter: initial) or (backdrop-filter: initial))
	{
		header
			{
				-webkit-backdrop-filter: saturate(180%) blur(20px);
				backdrop-filter: saturate(180%) blur(20px);
				background-color: rgba(255, 255, 255, .75);
			}
	} */

header .wrapper
	{
		max-width: none;
		height: 64px;
		padding: 0 20px;
		overflow: visible;
		position: relative;
		margin: 0 auto;
	}

header .logo span
	{
		position: absolute;
		width: 280px;
		height: 40px;
		left: 50%;
		margin-left: -140px;
		top: 9px;
		text-align: center;
	}

header .logo span b
	{
		white-space: nowrap;
		color: #2a58c6;
		font-size: 36px;
		line-height: 1em;
		font-weight: 600;
	}

header .logo span b small
	{
		display: block;
		color: #2a58c6;
		font-size: 9px;
		line-height: 0;
	}

/* ! branding */

.branding
	{
		position: absolute;
		right: 40px;
		width: 160px;
		top: 10px;
		height: 44px;
		display: flex;
		align-items: center;
	}

.branding a
	{
		display: block;
	}

.branding img
	{
		display: block;
		max-width: 100%;
		max-height: 100%;
	}

.branded .logo span
	{
		left: 40px;
		margin-left: 0;
		text-align: left;
	}

@media only screen and (max-width: 720px)
	{
		.branding
			{
				right: 20px;
			}
		.branded .logo span
			{
				left: 20px;
			}
	}

@media only screen and (max-width: 440px)
	{
		.branding
			{
				width: 120px;
			}
		.branded .logo span
			{
				top: 14px;
			}
		.branded .logo span b small
			{
				display: none;
			}
	}

@media print
	{
		.branded
			{
				padding: 0 !important;
				width: 1000px;
				max-width: 944px !important;
				border-bottom: 1px solid #ccc;
			}
		.branding
			{
				right: 0;
			}
		.branded .logo
			{
				text-align: left !important;
			}
	}

/* ! main */

main
	{
		display: block;
		position: relative;
		overflow: hidden;
		margin: 0 auto;
		max-width: 944px !important;
		padding: 144px 40px 80px 40px;
	}

@media only screen and (max-width: 1023px)
	{
		main
			{
				padding: 120px 40px 60px 40px;
			}
	}

@media only screen and (max-width: 720px)
	{
		main
			{
				padding: 100px 20px 40px 20px;
			}
	}

/* ! footer */

footer
	{
		padding: 20px;
		border-top: 1px solid #e4e6e6;
		text-align: center;
	}

footer.fixed
	{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
	}

footer .copyrights
	{
		color: rgba(0, 0, 0, .5);
		font-size: 13px;
		line-height: 1.4em;
		max-width: 600px;
		margin: 0 auto;
	}

footer .copyrights img
	{
		margin: 0 15px 10px 15px;
		height: 40px;
	}

/* ! form */

.form
	{
		font-size: 16px;
	}

.form.modal
	{
		display: none;
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0;
		background-color: rgba(0, 0, 0, .25);
		z-index: 10000;
	}

.form.modal.touch
	{
		position: absolute;
	}

.form.modal .wrapper
	{
		position: absolute;
		overflow: hidden;
		background: #fff;
		width: 360px;
		left: 50%;
		top: 50%;
		margin-left: -180px;
		padding-top: 40px;
		-moz-transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
		border-radius: 15px;
	}

.form.modal.touch .wrapper
	{
		-moz-transform: inherit;
		-webkit-transform: inherit;
		transform: inherit;
	}

.form input[type="text"], .form input[type="tel"], .form input[type="email"], .form input[type="password"], .form textarea, .form select
	{
		border: 1px solid #cad0d7;
		display: block;
		width: 100%;
		padding: 9px 12px;
		border-radius: 5px;
		font-size: 16px;
		line-height: 1.5em;
		font-weight: 500;
	}

.form select
	{
		overflow: hidden;
		height: 44px;
		background: transparent;
		z-index: 3;
		font-size: 16px;
		line-height: 26px;
	}

.form .select-wrapper
	{
		display: block;
		background: #fff;
		position: relative;
		text-align: left;
	}

.form .select-wrapper i
	{
		display: block;
		position: absolute;
		right: 1px;
		bottom: 1px;
		width: 34px;
		height: 42px;
		z-index: 1;
	}

.form .select-wrapper i svg
	{
		display: inline-block;
		width: 8px;
		height: 5px;
		margin: 19px 0 0 10px;
		fill: currentColor;
	}

.form input[type="text"]:focus, .form input[type="tel"]:focus, .form input[type="email"]:focus, .form input[type="password"]:focus, .form textarea:focus, .form select:focus
	{
		border-color: #747c7f;
	}

.form .alert
	{
		border-color: orangered !important;
	}

.form h3
	{
		margin-bottom: .6em;
		font-size: 150%;
		line-height: 1.3em;
		margin-top: 0 !important;
	}

.form h4
	{
		margin: 1.5em 0;
		font-size: 100%;
		line-height: 1.5em;
		color: #73767b;
	}

.form p
	{
		position: relative;
		margin-top: 20px;
		font-size: 88.888888%;
		line-height: 1.3em;
	}

.form p:first-child
	{
		margin-top: 0 !important;
	}

.form label
	{
		display: inline-block;
		margin-bottom: .35em;
	}

.form label i
	{
		font-style: normal;
		color: #73767b;
	}

.form .submit
	{
		margin-top: 30px;
	}

.form .close
	{
		position: absolute;
		overflow: hidden;
		width: 24px;
		height: 24px;
		right: 14px;
		top: 14px;
		z-index: 10;
		cursor: pointer;
	}

.form .close svg
	{
		display: inline-block;
		width: 14px;
		height: 14px;
		margin: 6px 0 0 6px;
		fill: currentColor;
	}

article .form .close, .close.hidden
	{
		display: none;
	}

.form.modal h3
	{
		position: relative;
		padding: 0 48px 8px 40px;
		font-size: 150%;
		line-height: 1.3em;
		margin-bottom: 0;
		font-weight: 600;
		z-index: 5;
	}

.form.modal h4
	{
		margin-top: 12px;
	}

.form.modal h4, .form.modal p
	{
		margin-left: 40px;
		margin-right: 40px;
	}

.form.modal .submit
	{
		margin-left: 40px;
		margin-bottom: 40px;
	}

.desktop .form .close:hover, .form .close.tap
	{
		color: orangered;
	}

.form .group
	{
		margin-top: .5em !important;
	}

.form .group p
	{
		margin-top: .25em !important;
	}

.form .hide
	{
		display: none;
	}

/* ! alert */

body>.alert
	{
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		opacity: 0;
		background-color: rgba(0, 0, 0, .25);
		z-index: 10000;
	}

body>.alert p
	{
		position: absolute;
		top: 50%;
		left: 50%;
		width: 340px;
		margin-left: -200px;
		margin-top: 32px;
		padding: 30px;
		font-size: 16px;
		line-height: 1.5em;
		text-align: center;
		background-color: #fff;
		-moz-transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		transform: translate(0%, -50%);
		box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
		-moz-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
		-webkit-box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, .25);
		border-radius: 15px;
		font-weight: 500;
	}

body>.alert p b
	{
		display: block;
		font-weight: 400;
	}

body>.alert p b:before
	{
		content: "!";
		color: orangered;
		font-size: 64px;
		display: block;
		font-weight: 600;
		margin-bottom: 30px;
		line-height: .75em;
	}

body>.alert p .e-btn
	{
		margin-top: 30px;
	}

@media only screen and (max-width: 640px)
	{
		body>.alert p
			{
				width: auto;
				margin-left: 0;
				margin-top: 0;
				left: 20px;
				right: 20px;
				padding: 30px 26px;
			}
	}

@media only screen and (max-width: 360px)
	{
		body>.alert p
			{
				font-size: 14px;
				line-height: 1.5em;
			}
	}

/* ! radio */

.radio
	{
		position: relative;
		margin-top: .5em;
	}

.radio.first
	{
		margin-top: 1.3em;
	}

.radio input
	{
		position: absolute;
		left: -200vw;
	}

.radio *
	{
		cursor: pointer;
	}

.radio label
	{
		padding-left: 26px;
		display: inline-block;
	}

.radio label:before
	{
		content: "";
		display: block;
		position: absolute;
		top: 0;
		left: 0;
		width: 18px;
		height: 18px;
		background: #dcdfe4;
		background:#e5e7eb;
		border-radius: 10em;
		box-shadow: inset 0em .1em .15em rgba(0, 0, 0, .2);
	}

.radio label:after
	{
		content: "";
		display: block;
		position: absolute;
		top: 6px;
		left: 6px;
		width: 6px;
		height: 6px;
		border-radius: 10em;
		background: #fff;
		opacity: 0;
	}

.radio input:checked + label:after
	{
		opacity: 1;
		transform: scale(1);
	}

.radio input:active + label:before
	{
		background-color: #d7dce1;
	}

.radio input:checked + label:before
	{
		background-color: #2a58c6;
	}

/* ! button */

.e-btn
	{
		display: inline-block;
		position: relative;
		overflow: hidden;
		color: #fff !important;
		background-color: #2a58c6 !important;
		padding: 12px 30px !important;
		line-height: 1.5em !important;
		text-decoration: none;
		cursor: pointer;
		border-radius: 5px;
		font-weight: 500;
		border-bottom: none !important;
		vertical-align: top;
		transition: background-color .1s;
	}

.e-btn.disabled
	{
		background-color: #acb6be !important;
		border-color: #acb6be !important;
		cursor: default;
	}

.button
	{
		text-align: center;
		margin-top: 40px;
	}

/* ! progress */

.progress
	{
    position: fixed;
    left: 0;
    bottom: 0;
    height: 4px;
    width: 0;
    background-color: #2a58c6;
    transition: width 1s;
    z-index: 10;
	}

/* ! registration */

#test-registration-form, #test-questionnaire-form, .box
	{
		position: relative;
		padding: 40px;
		border-radius: 15px;
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .15);
		margin-top: 1.5em;
		background: #fff;
		overflow: hidden;
	}

#test-registration-name-wrapper, #test-registration-email-wrapper
	{
		width: 70%;
		padding-right: 10px;
		box-sizing: border-box;
		float: left;
		margin: 0;
		padding-top: 20px;
	}

#test-registration-year-wrapper, #test-registration-gender-wrapper
	{
		width: 30%;
		padding-left: 10px;
		box-sizing: border-box;
		margin: 0;
		float: left;
		white-space: nowrap;
	}

#test-registration-year-wrapper
	{
		padding-top: 20px;
		float: right;
	}

#test-registration-name-wrapper
	{
		padding-top: 0;
	}

.box .small
	{
		color: rgba(0, 0, 0, .5);
		font-size: 14px;
		line-height: 1.4em;
		margin-bottom: -1.75em;
	}

@media only screen and (max-width: 640px)
	{
		#test-registration-form, #test-questionnaire-form, .box
			{
				padding: 30px;
			}
		#test-registration-form p
			{
				width: auto;
				float: none;
				padding: 0;
				margin-top: 15px;
			}
		#test-registration-form #test-registration-gender-wrapper, #test-registration-form #test-registration-year-wrapper
			{
				width: 50%;
				padding-right: 10px;
				box-sizing: border-box;
				float: left;
				margin: 0;
				padding-top: 15px;
			}
		#test-registration-form #test-registration-year-wrapper
			{
				padding-right: 0;
				padding-left: 10px;
			}
		#test-registration-form #test-registration-email-wrapper
			{
				clear: both;
				padding-top: 15px;
			}
	}

@media only screen and (max-width: 340px)
	{
		#test-registration-form, #test-questionnaire-form, .box
			{
				padding: 20px;
			}
		#test-registration-form #test-registration-gender-wrapper, #test-registration-form #test-registration-year-wrapper, #test-registration-form #test-registration-email-wrapper
			{
				width: auto;
				float: none;
				padding: 0;
				margin-top: 15px;
			}
	}

/* ! test */

.test
	{
		position: fixed;
		left: 0;
		right: 0;
		top: 50%;
		-moz-transform: translate(0%, -50%);
		-webkit-transform: translate(0%, -50%);
		transform: translate(0%, -50%);		
		margin-top: 32px;
		max-height: calc(100vh - 64px);
		overflow: auto;
		overflow-x: hidden;
	}

.question
	{
		position: relative;
		width: 100%;
		opacity: 0;
		transition: opacity .25s, transform .25s;
		transform: scale(.15);
		text-align: center;
		padding: 50px 0;
	}

.question.show
	{
		opacity: 1;
		transform: scale(1);
	}

.question.hide
	{
		opacity: 0;
		transform: scale(.85);
	}

.question h4
	{
		font-weight: 400;
		font-size: 16px;
		line-height: 1.5em;
		padding: 0 20%;
		color: rgba(0, 0, 0, .5);
		margin-bottom: 20px;
		margin-top: -20px;
	}

.question h2
	{
		font-weight: 500;
		font-size: 24px;
		line-height: 1.5em;
		padding: 0 10% 30px 10%;
		margin-left: auto;
		margin-right: auto;
		max-width: 900px;
	}

.question .wrap
	{
		text-align: left;
		width: 300px;
		margin-left: auto;
		margin-right: auto;
		border-radius: 15px;
		margin-bottom: 40px;
		background: #fff;
		box-shadow: 0px 5px 20px 0px rgba(0, 0, 0, .15);
		overflow: hidden;
	}

.question .item
	{
		position: relative;
	}

.question .item input
	{
		position: absolute;
		left: -200vw;
	}

.question .item *
	{
		cursor: pointer;
	}

.question .item label
	{
		display: block;
		border-top: 1px solid #eeeff0;
		padding: 12px 12px 12px 44px;
		font-size: 16px;
		line-height: 22px;
		font-weight: 500;
	}

.question .item label:active
	{
		background: #f9fafa;
	}

.question .item:first-child label
	{
		border: none;
	}

.question .item input[type="radio"] + label:before
	{
		content: "";
		display: block;
		position: absolute;
		top: 14px;
		left: 14px;
		border-radius: 10vw;
		border: 1px solid #cad0d7;
		width: 18px;
		height: 18px;
	}

.question .item input[type="radio"] + label:after
	{
		content: "";
		display: block;
		position: absolute;
		top: -6px;
		left: -3px;
		width: 52px;
		height: 52px;
		background: url("data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCA2NCA2NCIgaGVpZ2h0PSI2NCIgdmlld0JveD0iMCAwIDY0IDY0IiB3aWR0aD0iNjQiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PHBhdGggZD0ibTMyLjU5IDQxLjkyLTkuODctOS44N2MtLjMxLS4zMS0uMzEtLjgyIDAtMS4xM2wxLjctMS43Yy4zMS0uMzEuODItLjMxIDEuMTMgMGw3LjYxIDcuNjEgMTYuOTYtMTYuOTZjLjMxLS4zMS44Mi0uMzEgMS4xMyAwbDEuNyAxLjdjLjMxLjMxLjMxLjgyIDAgMS4xM2wtMTkuMjMgMTkuMjJjLS4zMS4zMS0uODIuMzEtMS4xMyAweiIgZmlsbD0iIzJhNThjNiIvPjwvc3ZnPg==") center center no-repeat;
		background-size: cover;
		opacity: 0;
		transform: scale(.5);
		transition: opacity .1s, transform .1s;
	}

.question .item input[type="radio"]:checked + label:after
	{
		opacity: 1;
		transform: scale(1);
	}

.question input[type="text"]
	{
		display: block;
		padding: 12px;
		font-size: 16px;
		line-height: 22px;
		font-weight: 500;
		text-align: center;
		background: transparent;
		width: 100%;
	}

.question .button
	{
		margin-top: 0 !important;
		padding-bottom: 1px;
	}

@media only screen and (max-width: 1023px)
	{
		.question .item label
			{
				font-size: 15px;
			}	
		.question h4
			{
				font-size: 13px;
				line-height: 1.5em;
			}
	}

@media only screen and (max-width: 640px)
	{
		.question
			{
				box-sizing: border-box;
				padding-left: 20px;
				padding-right: 20px;
			}
		.question .wrap
			{
				width: auto;
			}
		.question h2
			{
				padding: 10px 0 20px 0;
				font-size: 17px;
				line-height: 1.4em;
				font-weight: 600;
			}
		.question h4
			{
				padding-right: 0;
				padding-left: 0;
				font-size: 13px;
				line-height: 1.5em;
				margin-bottom: 20px;
				margin-top: -8px;
			}
		.question .wrap
			{
				margin-bottom: 30px;
			}
	}

@media only screen and (max-width: 340px)
	{
		.question h2
			{
				font-size: 16px;
				line-height: 1.4em;
			}
		.question h4
			{
				font-size: 11px;
				line-height: 1.5em;
				padding-top: 11px;
			}
		.question .item label
			{
				font-size: 13px;
				padding: 8px 0px 8px 44px;
			}
		.question .item input[type="radio"] + label:before
			{
				top: 10px;
			}
		.question .item input[type="radio"] + label:after	
			{
				top: -10px;
			}
	}

.test-passed, .sending-error
	{
		text-align: center;
		font-size: 16px;
		line-height: 1.5em;
	}

.test-passed:before, .sending-error:before
	{
		content: "";
		display: block;
		margin: 0 auto;
		width: 160px;
		height: 144px;
		margin-bottom: 30px;
		background: url(/lib/crafft/cool.svg) center center no-repeat;
	}

.sending-error:before
	{
		height: 128px;
		background-image: url("data:image/svg+xml;base64,PHN2ZyBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxNjAgMTI4IiBoZWlnaHQ9IjEyOCIgdmlld0JveD0iMCAwIDE2MCAxMjgiIHdpZHRoPSIxNjAiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxsaW5lYXJHcmFkaWVudCBpZD0iYSIgZ3JhZGllbnRUcmFuc2Zvcm09Im1hdHJpeCgxIDAgMCAtMSAwIDEzMCkiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIiB4MT0iLS4wMDAwMDQiIHgyPSIxNjAiIHkxPSI3MC4zNSIgeTI9IjcwLjM1Ij48c3RvcCBvZmZzZXQ9Ii4zOTk1IiBzdG9wLWNvbG9yPSIjNzNiMmZmIi8+PHN0b3Agb2Zmc2V0PSIuNjAyNSIgc3RvcC1jb2xvcj0iIzljZiIvPjwvbGluZWFyR3JhZGllbnQ+PHBhdGggZD0ibTExOS43IDMwLjRjLTcuMS0xNC44LTIyLjMtMjUuMS0zOS45LTI1LjEtMjEuNSAwLTM5LjQgMTUuNC00My4zIDM1LjctMjAuMSAwLTM2LjUgMTYuNC0zNi41IDM2LjUgMCAyMC4yIDE2LjQgMzYuNSAzNi42IDM2LjVoODEuNWMyMy4xIDAgNDEuOS0xOC43IDQxLjktNDEuOCAwLTIyLjYtMTcuOS00MS00MC4zLTQxLjh6IiBmaWxsPSJ1cmwoI2EpIi8+PHBhdGggZD0ibTIzLjcgNi45IDcuMy02LjkgMTEzLjUgMTIxLjEtNy4zIDYuOHoiIGZpbGw9IiNmZjQ1MDAiLz48L3N2Zz4=");
	}

.test-passed h3, .sending-error h3
	{
		font-weight: 600;
		font-size: 22px;
		line-height: 1.5em;
		margin-bottom: 10px;
	}

.test-passed small
	{
		display: block;
		font-size: 14px;
		line-height: 1.5em;
		max-width: 350px;
		padding: 0 20px;
		margin: 10px auto 0 auto;
		color: rgba(0, 0, 0, .5);
	}

.sending-error .e-btn
	{
		margin-top: 20px;
	}

/* ! report */

.report .right
	{
		position: absolute;
		right: 0;
		top: 0;
		bottom: 0;
		border-top-right-radius: 15px;
		border-bottom-right-radius: 15px;
		width: 300px;
		border-left: 1px solid #eeeff0;
		text-align: center;
		background: #f9fafa;
		color: rgba(0, 0, 0, .5);
		font-size: 14px;
		line-height: 1.4em;
	}

.report .right .info
	{
		position: absolute;
		right: 10px;
		top: 10px;
	}

.report .right .info svg
	{
		display: block;
		width: 20px;
		height: 20px;
		fill: #2a58c6;
	}

.report .right .center
	{
		display: table;
		height: 100%;
		width: 100%;
	}

.report .right .stage
	{
		display: table-cell;
		vertical-align: middle;
		padding: 10px;
	}

.report .right p
	{
		margin-top: 0 !important;
	}

.report .score
	{
		font-size: 48px;
		line-height: 1.4em;
		font-weight: 600;
		color: #2a58c6;
	}

.report ol
	{
		list-style: none;
	}

.report li
	{
		border-top: 1px solid #eeeff0;
		padding: 12px 110px 12px 56px;
		position: relative;
		font-size: 16px;
		line-height: 1.4em;
	}

.report li:first-child
	{
		border: none;
	}

.report li b
	{
		position: absolute;
		right: 20px;
		top: 50%;
		margin-top: -15px;
		line-height: 30px;
		color: #2a58c6;
		font-size: 18px;
		cursor: help;
	}

.report li b.flat
	{
		position: relative;
		right: unset;
		top: unset;
		display: block;
		margin: 0;
		line-height: 1.4em;
		cursor: revert;
	}

.report li i
	{
		position: absolute;
		left: 0;
		top: 50%;
		margin-top: -15px;
		line-height: 30px;
		font-style: normal;
		color: rgba(0, 0, 0, .5);
		text-align: center;
		width: 58px;
	}

.report .line
	{
		position: relative;
		font-size: 16px;
		line-height: 1.4em;
		margin-top: 30px;
	}

.report .answers
	{
		padding: 0 !important;
	}

.report .help
	{
		margin-top: 3em;
		color: rgba(0, 0, 0, .75);
		font-size: 16px;
		line-height: 1.4em;
		padding: 0 40px;
	}

.report .help ul
	{
		padding-left: 2em;
	}

.report .graph
	{
		position: relative;
		padding: 0 30px;
	}

.report .graph>div
	{
		position: relative;
		overflow: hidden;
		border-radius: 5px;
		background: #f4f6f6;
	}

.report .graph>div>div
	{
		position: relative;
		border-bottom: 30px solid #2a58c6;
		min-width: 32px;
		z-index: 2;
	}

.report .graph>div>div>b
	{
		position: absolute;
		color: #fff;
		right: 10px;
		top: 0;
		font-size: 16px;
		line-height: 30px;
	}

.report .graph span
	{
		position: absolute;
		top: 0;
		height: 30px;
		line-height: 30px;
		left: 0;
		font-size: 14px;
		color: rgba(0, 0, 0, .5);
	}

.report .graph span:last-child
	{
		right: 0;
		text-align: right;
		left: auto;
	}

@media only screen and (max-width: 1023px)
	{
		.report li
			{
				font-size: 14px;
				line-height: 1.4em;
			}
		.report li b
			{
				font-size: 16px;
			}
		.report .help
			{
				font-size: 15px;
				line-height: 1.4em;
			}
	}

@media only screen and (max-width: 640px)
	{
		.result
			{
				padding-bottom: 190px;
			}
		.result p
			{
				margin-top: .5em;
				font-size: 15px;
				line-height: 1.5em;
			}
		.result p:first-child
			{
				margin-top: 0;
			}
		.result p b
			{
				white-space: nowrap;
			}
		.report .right
			{
				left: 0;
				top: auto;
				width: 100%;
				height: 160px;
				border-left: none;
				border-top: 1px solid #eeeff0;
				border-top-right-radius: 0;
				border-bottom-left-radius: 15px;
				border-bottom-right-radius: 15px;
			}
		.report .right .stage
			{
				padding-left: 20px;
				padding-right: 20px;
			}
		.report .right p
			{
				font-size: 14px;
				line-height: 1.4em;
			}
		.report .score
			{
				line-height: 1.2em;
			}
		.report li
			{
				padding-right: 54px;
			}
		.report li i
			{
				width: 56px;
			}
		.report .help
			{
				padding: 0;
				font-size: 15px;
				line-height: 1.4em;
			}
		.report .line
			{
				font-size: 15px;
				line-height: 1.4em;
			}
		footer .copyrights img
			{
				height: 40px;
			}
	}

@media only screen and (max-width: 340px)
	{
		.report li
			{
				font-size: 13px;
				line-height: 1.4em;
				padding-right: 52px;
			}
		.report li i
			{
				width: 54px;
			}
		.report li b
			{
				font-size: 14px;
			}
		.report .line
			{
				font-size: 14px;
				line-height: 1.35em;
				margin-top: 20px;
			}
	}

/* ! log */

.log
	{
		font-size: 13px;
		position: fixed;
		left: -1px;
		top: -1px;
		width: 400px;
		height: 64px;
		padding: 10px;
		border-radius: 0 !important;
		border: 1px solid #000;
		resize: both;
		z-index: 100;
		-webkit-user-select: text;
		-khtml-user-select: text;
		-moz-user-select: text;
		-ms-user-select: text;
		-o-user-select: text;
		user-select: text;
		cursor: text;
	}

/* ! print */

.print-report
	{
		position: absolute;
		right: 40px;
		top: 21px;
		width: 25px;
		height: 24px;		
		cursor: pointer;
		z-index: 10;
	}

.print-report svg
	{
		width: 25px;
		height: 24px;
		fill: #2a58c6;
	}

@media only screen and (max-width: 640px)
	{
		.print-report
			{
				display: none;
			}
	}

.e-print
	{
		display: none;
	}

@media print
	{

		.test-page, .report .right .info, .print-report
			{
				display: none !important;
			}

		.e-print
			{
				display: block !important;
			}

		main
			{
				width: 1000px;
				padding: 0 0 20px 0 !important;
			}

		article
			{
				width: 100% !important;
			}

		*
			{
				background: none !important;
				color: #000 !important;
				box-shadow: none !important;
				color-adjust: exact;
				print-color-adjust: exact;
				-webkit-print-color-adjust: exact;
			}

		a, a *
			{
				color: #2a58c6 !important;
			}

		header
			{
				position: static !important;
			}

		footer
			{
				border: none !important;
				position: static !important;
			}

		header .logo
			{
				text-align: center;
			}

		header .logo span
			{
				position: static !important;
				margin: 0 !important;
			}

		header .logo img
			{
				width: 160px;
			}

		footer .copyrights small
			{
				color: rgba(0, 0, 0, .5) !important;
				font-size: 11px;
			}

		footer .copyrights img
			{
				height: 40px;
				margin: 0 10px 4px 10px;
			}

		article p
			{
				margin-top: 1em;
			}

		article h2, article h3
			{
				margin-top: 1.5em !important;
				font-size: 100%;
				line-height: 1.5em;
			}

		header .logo span *
			{
				color: #2a58c6 !important;
			}

		.box
			{
				padding: 20px;
				border: 1px solid #ccc;
				font-size: 14px;
				line-height: 1.4em;
				margin-top: 1.75em;
			}

		.box .small
			{
				margin-bottom: -.75em;
				font-size: 12px;
				line-height: 1.4em;
				color: rgba(0, 0, 0, .5) !important;
			}

		.report .right, .report li
			{
				border-color: #ccc;
			}

		.report li
			{
				font-size: 14px;
				line-height: 1.35em;
				padding: 8px 120px 8px 48px;
			}

		.report li b
			{
				font-size: 16px;
				color: #2a58c6 !important;
			}

		.report li i
			{
				color: rgba(0, 0, 0, .5) !important;
				width: 48px;
				font-size: 14px;
			}

		.report .right p
			{
				font-size: 11px;
				line-height: 1.4em;
				padding: 0 20px;
				color: rgba(0, 0, 0, .5) !important;
			}
			
		.report .score
			{
				font-size: 40px;
				line-height: 1.2em;
				color: #2a58c6 !important;
			}

		.report .help
			{
				font-size: 15px;
				line-height: 1.4em;
				margin-top: 1.75em;
				padding: 0 20px;
			}

		.report .graph>div
			{
				background: rgba(0, 0, 0, .075) !important;
			}

		.report .graph span
			{
				color: rgba(0, 0, 0, .5) !important;
			}

		.report .graph>div>div>b
			{
				color: #fff !important;
				color-adjust: exact;
				-webkit-print-color-adjust: exact;
				-webkit-text-fill-color: #fff;
			}

		.report .line
			{
				font-size: 14px;
				line-height: 1.35em;
				margin-top: 20px;
			}

	}