html {
	--padding: 30px;
	--double-p: calc(var(--padding) * 2);
	--negative-p: calc(0px - var(--padding));

	--c-txt: #333;
	--c-minor-txt: #666;

	--c-btn-bg:  #716CBD;
	--c-btn-hvr: #9995D3;
	--c-btn-act: #5F5BA0;

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

	counter-reset: phase;
	min-width: 310px;
}
h2 {
	font-weight: 600;
	font-size: 24px;
	color: #16283F;
	text-align: center;
	margin: 2.3em 0 1em;
}
h3 {
	font-weight: 400;
	font-size: 18px;
	text-align: center;
	margin: 0;
}
h4 {
	font-weight: 400;
	font-size: 16px;
	margin: 0;
}
.chevron-b::before {
	float: right;
	margin-left: 1em;
	border-right-width: 1px;
	border-bottom-width: 1px;
	width: 8px;
	height: 8px;
}
.button {
	font-size: 14px;
	line-height: 1;
	border-radius: 3px;
	padding: 16px 35px;
	background: var(--c-btn-bg);

}
.button:hover {
	background: var(--c-btn-hvr);
}
.button:active {
	background: var(--c-btn-act);
}
.button.as_link {
	background: transparent;
	color: var(--c-txt);
	padding: 16px;
}
.button.as_link:hover {
	color: var(--c-btn-bg);
}
.button.as_link:active {
	color: var(--c-btn-act);
}
.button.secondary:hover {
	background: transparent;
	color: var(--c-btn-hvr);
	border-color: var(--c-btn-hvr);
}
.button.secondary:active {
	background: transparent;
	color: var(--c-btn-act);
	border-color: var(--c-btn-act);
}


section {
	overflow: hidden;
	padding-bottom: var(--double-p);
}
section.grad {
	background: linear-gradient(180deg, #E9F1F7 49%, transparent 100%);
	/* padding-top: 1rem; */
}
.guard {
	width: calc(100% - var(--double-p));
	max-width: 1024px;
}
.row {
	display: flex;
	margin: calc(var(--negative-p) / 2);
}

/* top block */
.top_block {
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 950 679'%3E %3Cdefs%3E%3ClinearGradient id='linearG' x1='680' x2='-438' y1='283' y2='388' gradientUnits='userSpaceOnUse'%3E%3Cstop stop-color='%23EAF0FD'/%3E%3Cstop offset='1' stop-color='%23EFFFFA'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23linearG)' d='M-1400 0H679v100s29 350-187 493c-219 146-861 64-933 55-100-20-600-50-960-640z'/%3E%3C/svg%3E") center -100px no-repeat;
	background-size: 4000px 679px;
	min-height: 579px;
	overflow: hidden;
}
.header {
	margin: 24px 0;
	justify-content: space-between;
}
.logo {
	display: inline-block;
	color: #000;
	font-size: 14px;
	line-height: 22px;
	height: 22px;
	padding-left: 33px;
	background: url(/favicon.svg) no-repeat;
	background-size: contain;
}
#top_menu {
	display: contents;
}
#top_burger {
	display: none;
}
#lang_selector_box {
	display: none;
}
#lang_selector_box.open {
	position: absolute;
	display: flex;
	background: #EAF2F8;
	border-radius: 3px;
	padding: 9px 0;
	box-shadow: var(--box-shadow);
}
#lang_selector #lang_selector_box .button {
	text-align: left;
	padding: 6px 24px 6px 30px;
	font-size: 14px;
}
#lang_selector_box .button.selected {
	position: relative;
	font-weight: 500;
}
#lang_selector_box .button.selected::before {
	content: "";
	display: block;
	border-radius: 50%;
	position: absolute;
	width: 6px;
	height: 6px;
	left: 16px;
	top: 10px;
	background: var(--c-btn-bg);
}
.control .login {
	padding: 8px 18px;
	line-height: 18px;
	margin-left: 7px;
}

.top_screen {
	justify-content: space-between;
}
.main_title {
	flex: 0 1 400px;
}
.main_title h1 {
	text-align: left;
	max-width: 11em;
	font-weight: 500;
	font-size: 28px;
	margin: 0 2em 0 0;
}
.top_screen_columns {
	display: flex;
	margin: 25px 0;
}
.top_screen_columns .column{
	flex: 0 0 auto;
	padding-right: 50px;
}
.top_screen_columns .edge{
	font-size: 12px;
	color: var(--c-minor-txt);
}
.main_illustration {
	background: url(/pic/main_illustration.png) right 25%/contain no-repeat;
	flex: 1 1 30%;
	max-width: 530px;
	margin-bottom: -15%;
}
.main_buttons {
	flex: 1 0 40%;
	margin: 0 calc(0px - var(--padding) / 2);
}
.main_buttons .button {
	margin: var(--padding) calc(var(--padding) / 2);
}
.main_buttons .playvideo {
	border: 0;
	padding: 0;
	line-height: 46px;
}


/* section 1 */
.phases {
	margin-top: 1.8rem;
	margin-bottom: 2rem;
}
.phase {
	font-size: min(1.5vw, 16px);
	background: #E9F1F7 url(/pic/phase1.png) right bottom/contain no-repeat;
	border-radius: 3px;
	margin: calc(var(--padding) / 2);
	padding: 1.5em 6em 1.75em 1.75em;
	box-sizing: border-box;
	width: 33.33333%;
}
.phase::after {
	counter-increment: phase;
	content: counter(phase);
	display: block;
	margin-top: var(--padding);
	font-size: 16px;
	font-weight: 600;
	width: 2em;
	height: 2em;
	line-height: 2em;
	text-align: center;
	border-radius: 50%;
	background: #FFF;
	color: var(--c-btn-bg);
}
.phase:nth-child(2) {background-image: url(/pic/phase2.png)}
.phase:nth-child(3) {background-image: url(/pic/phase3.png)}


/* section 2 */
.accordion {
	position: relative;
	margin: 3rem max(0px, calc((100% - 820px) / 2)) 40px;
	min-height: 514px;
}
.tool {
	box-sizing: border-box;
	width: calc(100% - 410px);
}
.tool_box {
	padding: 18px 24px;
}
.tool.open .tool_box {
	background: #FFF;
	border-radius: 8px;
}
.tool:not(.open) {
	cursor: pointer;
}
.tool_text {
	display: block;
	height: 0;
	overflow: hidden;
	margin-top: 1em;
	font-size: 14px;
	color: var(--c-minor-txt);
	transform: translateY(-16px);
	opacity: 1;
}
.tool.open .tool_text {
	height: auto;
	transform: none;
	opacity: 1;
	transition: transform .5s cubic-bezier(.31,.65,.53,1), opacity .5s cubic-bezier(.31,.65,.53,1);
}
.tool:not(.open) .tool_img {
	display: none;
}
.tool_img {
	width: 386px;
	position: absolute;
	right: 0;
	top: 0;
}
.tool_img img {
	max-width: 100%;
}


/* section 3 */
.usability {
	margin: 80px 0;
}
.usability_img {
	flex: 0 0 50%;
	position: relative;
	text-align: center;
}
.usability_img::before {
	content: "";
	display: block;
	position: absolute;
	background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 410 410'%3E%3Cdefs%3E%3ClinearGradient id='linear' x1='30' y1='100' x2='391' y2='371' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='.34' stop-color='%23E9F1F7'/%3E%3Cstop offset='1' stop-color='%23EFFFFA' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='205' cy='205' r='205' fill='url(%23linear)'/%3E%3C/svg%3E") left center/contain no-repeat;
	width: 410px;
	height: 410px;
	top: -20px;
	left: -40px;
}
.usability:nth-child(odd) .usability_img {
	order: 2;
}
.usability:nth-child(odd) .usability_img::before {
	left: auto;
	right: -40px;
}
.usability_img img {
	position: relative;
	z-index: 1;
}
.usability:nth-child(5) .usability_img img {
	margin-top: -18%;
}
.usability_txt {
	flex: 1 1 auto;
}
.usability_txt>* {
	max-width: 340px;
	margin: 1rem auto;
}
.usability_p {
	font-size: 14px;
	color: var(--c-minor-txt);
}

/* section 4 */
#rates_box {
	flex-wrap: nowrap;
	margin-top: 2.9rem;
	font-size: 16px;
}

.tile {
	flex: 1 0 9em;
	background: #E9F1F7;
	border-radius: 8px;
	padding: 2.5em;
	margin: 0 1em 1em 0;
}
.tile.decorate {
	margin-right: 0;
	background: #E4ECF1 url(/pic/many_books.png) center bottom/contain no-repeat;
}
.tile:nth-child(1) {
	flex: 1 0 5.5em;
	background: #DEE3F7;
}
.tile:nth-child(3) {
	flex: 1 0 12em;
	background: #DEE3F7;
}
.tile:nth-child(4) {
	background: linear-gradient(90deg, #E9F1F7 0%, #EFFFFA 100%);
	text-align: right;
}
.tile .rate {
	font-size: 3em;
	font-weight: 500;
	color: #16283F;
}
.tile .relation {
	color: #4E4E4E;
}

/* section 5 */
.tabs {
	margin: 2rem 0;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 1rem;
}
.tabs .tab {
	font-size: 1rem;
	color: #4E4E4E;
	padding: .4em 1.1em;
	border-radius: 3px;
	transition: color .1s, background-color .1s;
}
.tabs .tab._act {
	color: #FFF;
	background-color: #716CBD;
}
.course_types {
	max-width: 630px;
	margin: 3rem auto 0;
}
.course_type {
	--base-padding: 28px;
	position: relative;
	overflow: hidden;
	background: #E9F1F7;
	border-radius: 8px;
}
.course_type img {
	position: absolute;
	top: 0;
	left: 0;
	max-width: 40%;
	height: 100%;
	object-fit: cover;
	object-position: top center;
}
.course_type .descr {
	padding-top: calc(var(--base-padding) * 1.5);
	padding-right: var(--base-padding);
	padding-bottom: var(--base-padding);
	padding-left: calc(40% + var(--base-padding) * 1.5);
	color: #333;
}
.course_type .descr .title {
	font-weight: bold;
}
.course_type .descr .subtitle {
	font-size: 14px;
	margin: 20px 0;
}
.course_type .descr ul.features {
	padding-left: 1.3em;
	font-size: 14px;
}
.course_type .descr ul.features li::marker {
	color: #716CBD;
	font-size: 24px;
	line-height: 20px;
}
.course_type .descr ul.features li {
	line-height: 20px;
	margin-bottom: 1em;
}
.course_type .descr ul.features li>span {
	vertical-align: top;
}

/* section 6 */
.tariffs {
	justify-content: center;
	margin-top: 2em;
}
.tariff {
	flex: 0 0 304px;
	box-sizing: border-box;
	padding: 38px;
	color: #333;
	background: #FFF;
	border-radius: 8px;
	margin: calc(var(--padding) / 2);
}
.tariff h4 {
	text-align: center;
	font-weight: 500;
	font-size: 18px;
	margin-bottom: 1em;
}
.tariff h5 {
	line-height: 3;
	font-weight: normal;
	font-size: 16px;
}
.getting {
	position: relative;
	font-size: 14px;
	color: #4E4E4E;
	margin: 1em 0;
	padding-left: 40px;
}
.getting>svg {
	font-size: 20px;
	position: absolute;
	left: 0;
	stroke-width: 1.5;
}
.getting.gift {
	color: #54B398;
	font-weight: 500;
}
.getting.disabled {
	color: #B8BEC2;
}
.getting.enabled>svg {
	stroke: #716CBD;
}
.tariff_options label {
	border-radius: 8px;
	padding: 8px;
	transition: background .3s;
	color: #4E4E4E;
	font-size: 14px;
	justify-content: space-between;
}
.tariff_options label:hover {
	background: #E9F1F7;
}
.tariff_options input[type="radio"] {
	width: 20px;
	height: 20px;
	border: 2px solid #DEE3F7;
	margin-right: 14px;
}
.tariff_options input[type="radio"]:checked {
	border: 2px solid #716CBD;
	background: radial-gradient(ellipse at center, #716CBD 30%, transparent 35%);
}
.tariff_options input[type="radio"]:checked:focus {
	box-shadow: none;
}
.label_text {
	flex: 0 0 90px;
}
.label_price {
	font-weight: 600;
	flex: 0 0 30px;
	text-align: right;
	padding-right: 10px;
}
.label_discount {
	flex: 0 0 30px;
	box-sizing: border-box;
}
.label_discount:not(:empty) {
	color: #FFF;
	background: #54B398;
	border-radius: 8px;
	font-weight: 500;
	font-size: 9px;
	padding: 3px 5px;
	line-height: 1;
	text-align: right;
}
.tariff .button {
	width: 100%;
	margin: 2em 0;
}
.tariff .note {
	font-size: 11px;
	color: #686868;
}

.reviews {
	margin-top: 40px;
}
.review {
	padding-top: 40px;
	margin: 0 calc(var(--padding) / 2);
}
.review-body {
	background: #E9F1F7;
	border-radius: 8px;
	padding: 2em;
}
.review .review-body img.review-ava {
	width: 80px;
	height: 80px;
	border: 4px solid #FFF;
	box-sizing: border-box;
	margin-top: calc(0px - 2em - 40px);
	margin-bottom: 1em;
	border-radius: 50%;
}
.review-text {
	color: #4E4E4E;
	height: 10.5em;
	position: relative;
}
.review-text p {
	margin-bottom: 1.5em;
	text-indent: 1em;
}
.review-text ul {
	margin: -1.5em 0 1.5em 0;
	list-style: inside;
	opacity: .8;
}
.review-footer {
	position: relative;
	padding-top: 3em;
	margin-top: -1.5em;
	background: linear-gradient(180deg, transparent 0, #E9F1F7 2em);
}
.review-name {
	color: #949494;
}
.review-link {
	color: #716CBD;
	transition: color .2s;
}
.review-link:hover {
	color: var(--c-btn-hvr);
}
.review-link:active {
	color: var(--c-btn-act);
}
.review-link svg {
	font-size: 1.5em;
	stroke-width: 1.5;
}


.owl-nav {
	text-align: center;
}
.owl-nav button {
	padding: 1em;
	margin: 1.5em .5em;
	color: #333;
}
.owl-nav button:not(.disabled):hover {
	color: #716CBD;
}
.owl-nav button:not(.disabled):active {
	color: #5F5BA0;
}
.owl-nav button.disabled {
	opacity: .5;
	cursor: not-allowed;
}
.owl-prev.chevron-l::before,
.owl-next.chevron-r::before {
	border-width: 1px;
	width: 11px;
	height: 11px;
}

footer {
	padding: 50px 0;
	background: #E9F1F7;
}
footer .guard:first-child {
	margin-bottom: 30px;
}
footer .flex.axis {
	justify-content: space-between;
}
footer #soclinks {
	order: 1;
}
footer #soclinks a {
	filter: invert(90%);
	width: 20px;
	height: 20px;
}
footer .guard.centro a {
	font-size: 14px;
	text-decoration: underline;
	color: #4E4E4E;
	margin: 0 1em;
	white-space: nowrap;
	line-height: 2;
}

#cookie_consent {
	border-radius: 8px;
	position: fixed;
	max-width: calc(100vw - 2rem);
	left: 1rem;
	bottom: 1rem;
	background: #FFF;
	padding: 1rem ;
	z-index: 999999;
	box-shadow: 0 0 10px 2px rgba(34,60,80,.2), 0 10px 10px 0 rgba(34,60,80,.2);
	box-sizing: border-box;
	font-size: 12px;
}
#cookie_consent .flex {
	gap: 1rem;
}
#cookie_consent .consent a {
	white-space: nowrap;
}
#cookie_consent .consent a:hover {
	text-decoration: underline;
}
#cookie_consent .button {
	padding: .75em 2em;
}


@media (max-width: 1000px) {
	.usability_img::before {
		width: 304px;
		height: 304px;
		top: -10px;
		left: -30px;
	}
	.usability:nth-child(odd) .usability_img::before {
		left: auto;
		right: -30px;
	}
	.usability:nth-child(2) .usability_img img {max-height: 224px;transform: translateX(-1rem);}
	.usability:nth-child(3) .usability_img img {max-height: 240px}
	.usability:nth-child(4) .usability_img img {max-height: 248px}
	.usability:nth-child(5) .usability_img img {max-height: 308px}

	#rates_box {
		font-size: 14px;
	}
	.tariffs {
		flex-wrap: wrap;
	}
	.tariff.free {
		order: 1;
	}
}
@media (max-width: 900px) {
	#rates_box {
		font-size: 12px;
	}
}
@media (max-width: 800px) {
	html {
		--padding: 25px;
	}
	.mobile_menu_is_open #top_menu {
		visibility: visible;
		opacity: 1;
		transform: scale(1);
		transition: visibility .3s step-start, opacity .3s, transform .3s cubic-bezier(.175,.88,.3,1.27);
	}
	#top_menu {
		display: flex;
		flex-direction: column;
		background: #FFF;
		box-shadow: var(--box-shadow);
		border-bottom-left-radius: 8px;
		position: absolute;
		right: 0;
		top: 0;
		padding: 66px 0 22px;

		visibility: hidden;
		opacity: 0;
		transform: scale(.7);
		transform-origin: top right;
		transition: visibility .3s step-end, opacity .3s, transform .3s;
	}
	#top_menu nav {
		display: contents;
	}
	#top_menu .control {
		margin-top: 12px;
	}
	#top_menu .button {
		text-align: left;
		padding: 15px 24px;
		margin: 0;
		font-size: 16px;
	}
	#top_menu nav .button {
		width: 100%;
	}
	#top_menu .button.login {
		border: 0;
		order: -1;
	}
	#top_burger {
		display: block;
		position: relative;
		width: 40px;
		height: 40px;
		z-index: 1;
	}
	#top_burger div {
		width: 18px;
		height: 2px;
		border-radius: 1px;
		background: var(--c-txt);
		position: absolute;
		left: 10px;
		transition: transform .25s;
	}
	#top_b1 {top:13px}
	#top_b2 {top:19px}
	#top_b3 {top:25px}
	.mobile_menu_is_open #top_b1 {transform: translate(1px, 6px) rotate(45deg)}
	.mobile_menu_is_open #top_b2 {transform: scaleX(0)}
	.mobile_menu_is_open #top_b3 {transform: translate(1px, -6px) rotate(-45deg)}

	.main_illustration {
		background-position: center 10%;
	}

	.phase::after {
		font-size: 14px;
	}

	#rates_box {
		font-size: 11px;
	}
	.tile .relation {
		font-size: 12px;
	}
	.tile img {
		width: 90px;
	}
}
@media (max-width: 760px) {
	.tool {
		width: 100%;
	}
	.tool_img {
		position: static;
		max-width: 100%;
		margin: var(--padding) auto;
	}

	.tile.decorate {display: none;}
}
@media (max-width: 682px) {
	.tariff.free {order: -1;}
	#cookie_consent .flex {
		flex-direction: column;
		align-items: flex-end;
	}
}
@media (max-width: 650px) {
	.phases {
		flex-direction: column;
		align-items: center;
	}
	.phases .phase {
		font-size: 16px;
		width: 400px;
		max-width: calc(100vw - var(--double-p));
	}

	.usability {
		flex-direction: column;
		margin: 70px 0;
	}
	.guard .usability .usability_img {
		order: 0;
	}
	.guard .usability .usability_img img {
		max-width: 100%;
		transform: none;
	}
	.usability:nth-child(5) {
		margin: 120px 0 50px;
	}
	.usability_txt {
		position: relative;
		z-index: 2;
	}

	.course_type {
		--base-padding: 20px;
	}

	#rates_box {
		font-size: 10px;
	}
	.tile img {
		width: 70px;
	}
}
@media (max-width: 512px) {
	html {
		--padding: 16px;
	}
	.top_block {
		background-position: center top;
	}
	.main_title h1 {
		margin-top: 1em;
	}
	.top_screen_columns {
		justify-content: space-between;
	}
	.top_screen_columns .column {
		padding: 0;
	}
	.main_illustration {
		margin: var(--padding) 0;
		flex: 0 0 100%;
		height: calc((100vw - var(--double-p)) * 0.8452830188679245);
	}
	.main_buttons {
		display: flex;
		flex-direction: column-reverse;
		align-items: center;
	}
	.tabs {
		gap: 0;
	}
	.tabs .tab {
		font-size: .8rem;
	}
	.course_type {
		--base-padding: 28px;
		--img-height: 50vw;
	}
	.course_type img {
		position: absolute;
		top: 0;
		left: 0;
		max-width: 100%;
		height: var(--img-height);
	}
	.course_type .descr {
		padding-top: calc(var(--img-height) + var(--base-padding));
		padding-left: var(--base-padding);
	}
}
@media (max-width: 380px) {
	.main_title h1 {
		font-size: 24px;
		margin-right: 0;
	}
	.usability_img::before {
		width: 256px;
		height: 256px;
	}
	.usability_p br {
		display: none;
	}
	#rates_box {
		font-size: 8px;
	}
	.tabs .tab {
		font-size: .7rem;
	}
	.tariff {
		flex: 1 1 100%;
	}
}