* {
	box-sizing: border-box;
}
.hidden {
	display: none;
}
body {
	font-family: 'Open Sans', sans-serif;
	font-style: normal;
	color: #262731;
	font-size: 16px;
	line-height: 24px;
	display: flex;
	flex-direction: column;
}
h1, .h1 {
	font-weight: 700;
	font-size: 52px;
	line-height: 64px;
	margin-bottom: 32px;
}
h2, .h2 {
	font-weight: 700;
	font-size: 42px;
	line-height: 52px;
	margin-bottom: 32px;
}
.bg h1, .bg h2 {
	margin-top: 0;
}
h3, .title-3 {
	font-weight: 600;
	font-size: 34px;
	line-height: 44px;
	margin-bottom: 12px;
}
h4 {
	font-weight: 600;
	font-size: 24px;
	line-height: 36px;
	margin: 50px 0 20px 0;
}
h5 {
	font-weight: 700;
	font-size: 16px;
	line-height: 24px;
	margin-bottom: 32px;
}
.sub-h1 {
	display: block;
	font-weight: 300;
	font-size: 24px;
	line-height: 28px;
}
.mb {
	margin-bottom: 80px;
}
.wrapper {
	flex-grow: 1;
}
.halves {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.small {
	font-size: 16px;
	line-height: 24px;
}
.bg {
	padding: 80px 0;
}
.bg--1 {background: #EAF2FF}
.bg--2 {background: #F5EAFF}
.bg--3 {background: #FFEAFD}
.bg--4 {background: #FFEAEF}
.bg--5 {background: #FFF7EA}
.bg--6 {background: #EDFFEA}
.bg--7 {background: #EAFFF7}

.center {
	max-width: 1320px;
	margin: 0 auto;
	padding-left: 20px;
	padding-right: 20px;
}
.center .center {
	padding-left: 0;
	padding-right: 0;
}
.content {
	background: #FFFFFF;
	border-radius: 8px 8px 32px 32px;
	padding: 32px;
}
.title-with-switcher {
	display: flex;
	margin-bottom: 52px;
}
.title-with-switcher h2 {
	margin: 0;
}
.title-with-switcher .switcher {
	margin-left: 36px;
}
.title-with-button {
	display: flex;
	margin-bottom: 52px;
	justify-content: space-between;
	align-items: center;
}
.title-with-button h2 {
	margin: 0;
}
.halves h1 {
	margin: 0;
}

/* ===================================================================================== */
/* Вот эти два стиля прочекать, заменить если где чо */
/* ===================================================================================== */

.big-paragraph {
	font-size: 20px;
	line-height: 32px;
}
.secondary {
	color: #6F6F6F;
}
.big-paragraph + .button {
	margin-top: 24px;
}
.header {
	padding: 20px 0;
	height: 88px;
	background: #fff;
}
.header .center {
	display: flex;
	align-items: center;
}
.logo {
	display: block;
	width: 140px;
	height: 70px;
	margin: -11px 20px -11px 0;
	background: url("images/logo.svg") center / contain no-repeat;
}
.button {
	display: inline-block;
	height: 56px;
	line-height: 56px;
	padding: 0 32px;
	background: #336ace;
	box-shadow: 0 15px 30px rgba(20, 102, 204, 0.16);
	border-radius: 100px;
	font-weight: 700;
	font-size: 16px;
	color: #FFFFFF;
	border: none;
	cursor: pointer;
	text-decoration: none;
	-webkit-transition: 0.3s all;-moz-transition: 0.3s all;-ms-transition: 0.3s all;-o-transition: 0.3s all;transition: 0.3s all;
}
/*Extra small devices (portrait phones, less than 576px)*/
@media (max-width: 340px) {
	.button {
		padding: 0 12px;
		font-size: 15px;
	}
}
.button:focus {
	outline: none;
}
.button:hover {
	background: #2752a3;
}
.button--white {
	color: #336ace;
	border: 1px solid #336ace;
	background: transparent;
	box-shadow: none;
}
.button:hover {
	color: #fff;
	background: #2752a3;
}
.button--header {
	height: 48px;
	line-height: 48px;
	margin-left: auto;
}
.button--personal {
	color: #262731;
	background: #eaf2ff;
	font-weight: 400;
	padding: 0;
	width: 48px;
	margin-left: 16px;
	position: relative;
	box-shadow: 0 25px 40px rgba(0, 0, 0, 0.03);
}
.button--personal:before {
	content: '';
	position: absolute;
	top: 8px;
	left: 8px;
	width: 32px;
	height: 32px;
	background: url("images/personal.svg") center / contain no-repeat;
}
.button--personal:hover {
	background: #eaf2ff;
	color: #262731;
}
.link {
	color: #3972BB;
	display: inline-block;
	text-decoration: none;
	border-bottom: 1px solid rgba(57, 114, 187, 0.5);
	transition: 0.3s all;
}
.link:hover {
	color: #333;
	border-color: #333;
}
.burger {
	display: none !important;
}

.nav {
	margin: 0 auto;
}
.nav a {
	text-decoration: none;
	display: inline-block;
	margin: 0 5px;
	color: #262731;
	font-size: 16px;
	line-height: 48px;
	-webkit-transition: 0.3s all;-moz-transition: 0.3s all;-ms-transition: 0.3s all;-o-transition: 0.3s all;transition: 0.3s all;
}
.nav a:hover {
	color: #336ace;
}
.select-city {
	color: #3972BB;
	text-decoration: none;
	border-bottom: 1px dotted rgba(57, 114, 187, 0.5);
}

/*=======================================================*/

.directions {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}
.direction {
	min-height: 288px;
	background: #fff;
	color: #262731;
	box-shadow: 0 25px 40px rgba(0, 0, 0, 0.03);
	border-radius: 24px;
	padding: 36px 32px;
	display: block;
	text-decoration: none;
	position: relative;
	overflow: hidden;
}
.direction__age {
	display: block;
	color: #6F6F6F;
	margin-bottom: 8px;
}
.direction__title {
	display: block;
	font-weight: 600;
	font-size: 34px;
	line-height: 44px;
	margin-bottom: 12px;
	max-width: 360px;
	-webkit-transition: 0.3s all;-moz-transition: 0.3s all;-ms-transition: 0.3s all;-o-transition: 0.3s all;transition: 0.3s all;
}
.direction:hover .direction__title {
	color: #336ace;
}
.direction__text {
	display: block;
	color: #6F6F6F;
	max-width: 350px;
}
.direction__round {
	display: none;
	position: absolute;
	bottom: -93px;
	right: -16px;
	width: 248px;
	height: 248px;
	background: #F3F2FF;
	-webkit-border-radius: 50%;
	-moz-border-radius: 50%;
	border-radius: 50%;
}
.direction__person {
	position: absolute;
	background-position: right bottom;
	background-repeat: no-repeat;
	background-size: contain;
	width: 250px;
	height: 270px;
	right: 20px;
	bottom: 0;
}

/*=======================================================*/
.icon {
	width: 76px;
	height: 76px;
	border-radius: 50%;
	position: relative;
}
.icon--personal {
	background: #F3F2FF url('images/icon-personal.svg') center / 40px no-repeat;
}
.icon--success {
	background: #F3F2FF url('images/icon-success.svg') center / 40px no-repeat;
}
.icon--video {
	background: #F3F2FF url('images/icon-video.svg') center / 40px no-repeat;
}
.icon--academic {
	background: #F3F2FF url('images/icon-academic.svg') center / 40px no-repeat;
}
.icon--group {
	background: #F3F2FF url('images/icon-group.svg') center / 40px no-repeat;
}
.icon--list {
	background: #F3F2FF url('images/icon-list.svg') center / 40px no-repeat;
}
.icon--puzzle {
	background: #F3F2FF url('images/icon-puzzle.svg') center / 40px no-repeat;
}
.icon--lightning {
	background: #F3F2FF url('images/icon-lightning.svg') center / 40px no-repeat;
}
.icon--success {
	background: #F3F2FF url('images/icon-success.svg') center / 40px no-repeat;
}
.icon--wallet {
	background: #F3F2FF url('images/icon-wallet.svg') center / 40px no-repeat;
}
/*=======================================================*/

/*=======================================================*/
.select-test-form {
	padding: 32px;
	background: #FFFFFF;
	border-radius: 24px;
}
.select-test-form h3 {
	margin: 0 0 24px 0;
}
.select-test-step {
	margin-bottom: 32px;
	padding-bottom: 16px;
	border-bottom: 1px solid #F0F0F0;
}
.select-test-button {
	display: inline-block;
	background: #FFFFFF;
	padding: 0 25px;
	border: 1px solid #F0F0F0;
	border-radius: 24px;
	color: #6F6F6F;
	opacity: 0.8;
	font-size: 16px;
	line-height: 46px;
	margin-right: 5px;
	margin-bottom: 16px;
	cursor: pointer;
}
.select-test-button--active {
	background: #336ace;
	border-radius: 24px;
	font-weight: bold;
	color: #FFFFFF;
}
/*=======================================================*/

/*=======================================================*/

/*=======================================================*/


/*=======================================================*/

.fancy-form {
	max-width: 600px;
}
.form {
	background: #fff;
	padding: 32px;
	border-radius: 24px;
}
.form h3 {
	margin: 0 0 24px 0;
}
.form__footer {
	display: flex;
	margin-top: 10px;
	align-items: center;
}
.field {
	width: 100%;
	padding: 0 15px;
	background: #fff;
	border: 1px solid #F0F0F0;
	border-radius: 8px;
	color: #6F6F6F;
	margin-bottom: 16px;
	font-size: 16px;
	font-family: 'Open Sans', sans-serif;
}
.field:focus {
	background: rgba(84, 88, 247, 0.02);
	background: #fcfcff;
	border: 1px solid #336ace;
}
.field--text {
	height: 56px;
}
.field--textarea {
	padding: 10px 15px;
	line-height: 24px;
	height: 124px;
}
.agreement {
	font-size: 15px;
	line-height: 22px;
	margin-left: 20px;
}
.agreement a {
	text-decoration: none;
	color: #336ace;
}
/*=======================================================*/
.facts {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 32px;
}
.facts--two {
	grid-template-columns: 1fr 1fr;
}
.facts--after-first-screen {
	position: relative;
	z-index: 1;
}
.fact {
	background: #FFFFFF;
	border-radius: 24px;
	padding: 32px;
	box-shadow: 0 -25px 40px rgba(0, 0, 0, 0.03);
}
.fact__number {
	margin-bottom: 4px;
	font-weight: 600;
	font-size: 64px;
	line-height: 76px;
	color: #336ace;
}
/*=======================================================*/

/*=======================================================*/

.footer {
	padding-top: 90px;
	padding-bottom: 60px;
}
.logo--footer {
	margin-right: 100px;
}
.footer-top {
	display: flex;
}
.footer-nav {
	display: flex;
	flex-direction: column;
	margin-right: 100px;
}
.footer-nav__title {
	display: inline-block;
	text-decoration: none;
	margin-bottom: 5px;
	color: #336ace;
}
.footer-nav__line {
	margin-bottom: 8px;
}
.footer-nav__line a {
	text-decoration: none;
	color: #262731;
}
.footer-bottom {
	display: flex;
	justify-content: space-between;
	padding: 22px 0;
	margin-top: 52px;
	font-size: 14px;
	line-height: 20px;
	border-top: 1px solid #F0F0F0;
	color: #6F6F6F;
	align-items: center;
}
.copyright {
	padding-left: 20px;
	position: relative;
}
.copyright:before {
	content: '©';
	position: absolute;
	left: 0;
	top: 0;
}
.footer-bottom a {
	color: #6F6F6F;
	display: inline-block;
	text-decoration: none;
	margin-bottom: 3px;
}
.social {
	width: 32px;
	height: 32px;
	margin: 0 5px;
	display: inline-block;
}
.social--vk {
	background: url("images/footer-vk.svg") center / contain no-repeat;
}
.social--inst {
	background: url("images/footer-inst.svg") center / contain no-repeat;
}
.social--fb {
	background: url("images/footer-fb.svg") center / contain no-repeat;
}

/*===========================================================================*/

.one-picture-slider__slide {
	border-radius: 8px;
}
.one-picture-slider img {
	width: 100%;
	display: block;
}
/*===========================================================================*/

.timeline {
	margin-bottom: 64px;
}
.timeline__image {
	height: 292px;
	background: #C4C4C4;
	border-radius: 8px;
	margin-bottom: 20px;
	display: none;
}
.timeline__title {
	font-weight: 600;
	font-size: 34px;
	line-height: 44px;
	color: #000000;
	margin-bottom: 12px;
}



/*===========================================================================*/


/*===========================================================================*/
.switcher {
	display: flex;
	font-weight: bold;
	color: #336ace;
	line-height: 56px;
	background: #FFFFFF;
	border-radius: 100px;
	width: fit-content;
	position: relative;
}
.switcher__bg {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	background: #336ace;
	border-radius: 100px;
	transition: 0.3s all;
}
.switcher__option {
	padding: 0 32px;
	transition: 0.3s all;
	position: relative;
	cursor: pointer;
}
.switcher__option--active {
	color: #fff;
	cursor: default;
}
/*===========================================================================*/


.steps {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
	gap: 32px;
	position: relative;
}
.steps__line {
	height: 4px;
	top: calc(50% - 2px);
	left: 50px;
	right: 50px;
	position: absolute;
	background: #336ace;
}
.step__container {
	position: relative;
	padding: 24px;
	background: #FFFFFF;
	border-radius: 24px;
	display: flex;
	flex-direction: column;
	height: 100%;
}
.step__number {
	position: absolute;
	right: 24px;
	top: 24px;
	font-weight: 700;
	font-size: 16px;
	line-height: 40px;
	padding: 0 20px;
	color: #336ace;
	background: #f3f2ff;
	box-shadow: 0 25px 40px rgba(0, 0, 0, 0.03);
	border-radius: 24px;
}

.step__title {
	font-weight: 600;
	font-size: 24px;
	line-height: 36px;
	color: #262731;
	margin-bottom: 8px;
}
.step__text {
	font-size: 16px;
	line-height: 24px;
	color: #6F6F6F;
	margin-bottom: auto;
}
.step .button {
	margin-top: 60px;
	display: block;
	text-align: center;
	padding: 0;
}
.step .icon {
	margin-bottom: 12px;
}
/*===========================================================================*/
.first-screen {
	overflow: hidden;
	padding: 0 !important;
	display: flex;
}
.first-screen__center {
	width: 100%;
	position: relative;
	padding-top: 40px;
	padding-bottom: 180px;
}
.first-screen__text {
	max-width: 720px;
}
.first-screen__round {
	width: 580px;
	height: 580px;
	background: #FFFFFF;
	border-radius: 50%;
	position: absolute;
	right: 0;
	bottom: -160px;
}
.first-screen__person {
 	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	height: 500px;
	width: 580px;
	position: absolute;
	right: 0;
	bottom: 0;
}
.first-screen__person--1 {
	background-image: url('images/direction-1.png');
}
/*===========================================================================*/
.dropdown-item {
	padding: 24px 90px 24px 32px;
	background: #FFFFFF;
	box-shadow: 0 25px 40px rgba(0, 0, 0, 0.03);
	border-radius: 24px;
	margin-bottom: 24px;
	position: relative;
	cursor: pointer;
}
.dropdown-item--active {
	cursor: initial;
}
.dropdown-item__title {
	font-weight: 600;
	font-size: 24px;
	line-height: 36px;
}
.dropdown-item--active .dropdown-item__title {
	color: #336ace;
}
.dropdown-item__text {
	display: none;
	padding-top: 16px;
	max-width: 920px;
}
.dropdown-item__icon {
	width: 56px;
	height: 56px;
	background: #336ace;
	box-shadow: 0 15px 30px rgba(20, 102, 204, 0.16);
	border-radius: 100px;
	position: absolute;
	right: 14px;
	top: 14px;
}
.dropdown-item__icon:before, .dropdown-item__icon:after {
	content: '';
	width: 18px;
	height: 2px;
	left: 19px;
	top: 28px;
	position: absolute;
	background: #FFFFFF;
}
.dropdown-item__icon:after {
	transform: rotate(90deg);
	-webkit-transition: 0.3s all;-moz-transition: 0.3s all;-ms-transition: 0.3s all;-o-transition: 0.3s all;transition: 0.3s all;
}
.dropdown-item--active .dropdown-item__icon:after {
	transform: rotate(180deg);
}

/*===========================================================================*/
.description-card {
	padding: 32px;
	margin-bottom: 32px;
	background: #FFFFFF;
	border-radius: 24px;
}
.description-card .icon {
	margin-bottom: 20px;
}
.description-card .big-paragraph {
	color: #9597A1;
}
/*===========================================================================*/

/*===========================================================================*/
ul {
	margin: 24px 0;
	padding: 0;
}
ul li {
	list-style-type: none;
	position: relative;
	padding-left: 24px;
	margin-bottom: 12px;
}
ul li:before {
	content: '';
	position: absolute;
	left: 0;
	top: 5px;
	width: 16px;
	height: 16px;
	background: #336ace;
	border-radius: 50%;
}
/*===========================================================================*/
.text-accent {
	padding: 5px 10px 8px 15px;
	border-left: 4px solid #2752a3;
	background: rgb(255 255 255 / 50%);
}
/*===========================================================================*/







.error {
	border: 1px solid #d2556b;
}
.second-payment-form {
	padding: 40px;
	max-width: 450px;
}
.second-payment-form h3 {
	margin-top: 0;
}


.payment-attention {
	margin-bottom: 20px;
}
.payment-attention span {
	color: #fff;
	background: #f44336;
	padding: 1px 8px;
	display: inline-block;
	margin-right: 10px;
}
.payment-attention a {
	text-decoration: none;
	font-size: 14px;
}







.popup_form .button {
	margin-top: 10px;
}

.popup_form {
	padding: 40px;
	max-width: 450px;
}

.popup_form.edit_lead {
	width: 500px;
}
.popup_form .title {
	margin-bottom: 30px;
	font-weight: bold;
	font-size: 30px;
	line-height: 35px;
}
.popup_form .text {
	line-height: 20px;
}

.girl {
	background: url("/local/templates/template-2020/images/girl.png") center / contain no-repeat;
	width: 580px;
	height: 500px;
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 2;
}

@media (max-width: 1199.98px) {}
@media (max-width: 991.98px) {}
@media (max-width: 767.98px) {}
@media (max-width: 575.98px) {
	.girl {
		width: 100%;
		height: 320px;
	}
}