/* reset */

html, body, div, span, h1, h2, h3, p, a, img, strong, ol, ul, li, form, button, input, label { margin: 0; padding: 0; border: 0; }

*, ::after, ::before { box-sizing: border-box; }

a, button, div, input, select, textarea, :focus, :active { outline: none; }
body, h1, h2, h3 { font-weight: normal; }
textarea { display: block; resize: none; border: none; overflow-y: hidden; }
ol, ul { list-style: none; }
img { display: block; border: none; }

:root {
	--regular: 'SFUIDisplay-Regular', sans-serif;
	--semibold: 'SFUIDisplay-Semibold', sans-serif;
	--bold: 'SFUIDisplay-Bold', sans-serif;

	--size-base: 16px;
	--size-lt: 12px;
	--size-sm: 14px;
	--size-md: 18px;
	--size-lg: 20px;

	--color-base: #424242;
	--color-secondary: #7c7c7c;
	--color-primary: #178CF9;
	--color-success: #2ea702;
	--color-danger: #ff5656;
	--color-pink: #ff6cbf;
	--color-blue: #31c7ff;
	--color-border: #cbcbcb;
	--color-placeholder: #b2b2b2;

	--transition: all .2s ease-out;
}

html, body { width: 100%; min-height: 100%; }
body { font-family: var(--regular); font-size: var(--size-base); line-height: 1.25; color: var(--color-base); background-image: url('../landing_16/bg_default-1440.jpg'); background-repeat: no-repeat; background-position: 0 0; background-size: cover; background-attachment: fixed; }
.sex { background-image: url('../landing_16/bg_sex-1440.jpg'); }
.wedding { background-image: url('../landing_16/bg_wedding-1440.jpg'); }
h2, .fixed-box .header-title { font-family: var(--semibold); font-size: var(--size-lg); line-height: 24px; text-align: center; margin-bottom: 30px; padding: 0 5px; }
h3 { font-family: var(--semibold); font-size: var(--size-md); line-height: 24px; margin-bottom: 30px; }
a { text-decoration: none; }

strong { font-family: var(--semibold); }

.icon-css { display: inline-block; flex-shrink: 0; background: url('../landing_16/sprite.css.svg?1789735295') no-repeat; }
.arrow-right { width: 12px; height: 17px; background-position: 93.18181818181819% 71.54471544715447%; }
.check { width: 23px; height: 18px; background-position: 82.64462809917356% 72.1311475409836%; }
.check-around { width: 28px; height: 28px; background-position: 0% 78.57142857142857%; }
.female { width: 24px; height: 35px; background-position: 73.33333333333333% 0%; }
.google { width: 22px; height: 22px; background-position: 39.34426229508197% 98.30508474576271%; }
.hand { width: 24px; height: 24px; background-position: 73.33333333333333% 50.86206896551724%; }
.hand-dark { width: 24px; height: 24px; background-position: 23.333333333333332% 75.86206896551724%; }
.heart { width: 24px; height: 22px; background-position: 43.333333333333336% 74.57627118644068%; }
.heart-dark { width: 24px; height: 22px; background-position: 63.333333333333336% 74.57627118644068%; }
.icon-eye-close { width: 24px; height: 24px; background-position: 20% 100%; }
.icon-eye-open { width: 24px; height: 24px; background-position: 93.33333333333333% 53.44827586206897%; }
.logo { width: 32px; height: 32px; background-position: 100% 0%; }
.logo-google { width: 44px; height: 44px; background-position: 0% 0%; }
.logo-mail { width: 44px; height: 44px; background-position: 44% 0%; }
.logo-ok { width: 44px; height: 44px; background-position: 0% 45.833333333333336%; }
.logo-sm { width: 16px; height: 16px; background-position: 54.6875% 93.54838709677419%; }
.logo-vk { width: 44px; height: 44px; background-position: 44% 45.833333333333336%; }
.male { width: 31px; height: 30px; background-position: 99.11504424778761% 29.09090909090909%; }
.megaphone { width: 24px; height: 24px; background-position: 73.33333333333333% 30.17241379310345%; }
.megaphone-dark { width: 24px; height: 24px; background-position: 0% 100%; }
.refresh { width: 15px; height: 16px; background-position: 66.66666666666667% 93.54838709677419%; }

.icon-stack { display: inline-block; flex-shrink: 0; background-size: cover; background-position: 50%; }
.icon-eye-open { width: 24px; height: 24px; background-image: url('../landing_23/sprite.stack.svg#eye-open'); }
.icon-eye-close { width: 24px; height: 24px; background-image: url('../landing_23/sprite.stack.svg#eye-slashed'); }
.icon-eye-open, .icon-eye-close { position: absolute; right: 12px; top: 10px; z-index: 3; cursor: pointer; }

.grid { display: grid; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.ai-center { align-items: center; }
.jc-center { justify-content: center; }
.jc-between { justify-content: space-between; }

.container { min-height: 100vh; padding: 70px 30px 0; }
.bbox,
.dlg-page-content { max-width: 480px; margin: 0 auto; margin-bottom: 12px; padding: 20px 45px 40px; outline: 6px solid rgba(0, 0, 0, 0.1); border-radius: 20px; background: rgba(255, 255, 255, 0.95); }
.gradient-box { width: 100%; height: 104px; position: absolute; left: 0; bottom: 0; z-index: 5; border-radius: 0 0 10px 10px; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0.6) 100%); }
	.gradient-box span { color: #fff; position: absolute; left: 15px; bottom: 15px; cursor: pointer; }

.progress-bar { margin-bottom: 30px; }
	.progress-bar li { height: 4px; flex-grow: 1; border-radius: 3px; background: rgba(0, 0, 0, 0.1); }
	.progress-bar li + li { margin-left: 5px; }
	.progress-bar .active { background: #6fcc39; }

.btn { width: 100%; max-width: 200px; font-family: var(--semibold); font-size: var(--size-base); color: #fff; text-shadow: 0px 1px 0px rgba(0, 0, 0, 0.25); margin: 36px auto 0; border-radius: 10px; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; cursor: pointer; }
.btn-success, .btn-primary { background: linear-gradient(180deg, #9cf346 0%, #53b331 100%); }
.btn-pink { background: var(--color-pink); }
.btn-light { font-family: var(--regular); font-size: var(--size-sm); color: var(--color-secondary); background: transparent; }
.btn-success + .btn-light { margin-top: 3px; }
.btn-lg { height: 52px; line-height: 1; padding: 0 5px; }

.btn-logon { width: 100%; max-width: 320px; height: 44px; display: block; font-weight: 400; font-size: 16px; line-height: 44px; color: #fff; text-decoration: none; position: relative; margin: 0 auto 16px; padding-left: 58px; border-radius: 10px; background-color: var(--color-primary); }
	.btn-logon.btn-google-dark { display: flex; }
	.btn-logon span img { margin: auto; }
.btn-google { margin-top: 7px; }
.btn-google span, .btn-mail span, .btn-ok span { width: 40px; height: 40px; position: absolute; left: 2px; top: 2px; border-radius: 8px; background-color: #fff; }
.btn-mail span { background: transparent; }
.btn-ok span { background: #fff; -webkit-clip-path: inset(0 round 5px); clip-path: inset(0 round 5px); }
	.btn-ok span img { width: 28px; height: 28px; }

.btn-google-dark { height: 52px; margin-top: 0; padding-left: 0; background: #131314; }
	.btn-google-dark img { margin-right: 12px; }

.btn-log { width: 100%; max-width: 320px; height: 52px; display: flex; align-items: center; justify-content: center; font-weight: 400; font-size: 16px; color: #fff; text-decoration: none; margin-inline: auto; border-radius: 10px; }
	.btn-log img { margin-right: 10px; }
.btn-yandex { margin-top: 7px; margin-bottom: 16px; background: var(--color-base); }
.btn-vk { background: var(--color-primary); }
.mb20 { margin-bottom: 20px; }

.warning-box { height: auto; min-height: 44px; font-size: var(--font-sm); line-height: 18px; color: #fff; text-align: center; position: fixed; left: 0; right: 0; top: 0; z-index: 500; padding: 8px 50px; background: var(--color-danger); }
.click-zone { width: 44px; height: 44px; display: flex; position: absolute; right: 0; top: 0; cursor: pointer; }
	.click-zone svg, .click-zone .icon-stack { margin: auto; }

/* form */
::-moz-placeholder { color: var(--color-placeholder); }
::-webkit-input-placeholder { color: var(--color-placeholder); }
:-ms-input-placeholder { color: var(--color-placeholder); }
::-ms-input-placeholder { color: var(--color-placeholder); }
::placeholder { color: var(--color-placeholder); }

.add-error { font-size: var(--size-sm); line-height: 1; color: var(--color-danger); text-align: center; position: absolute; left: 0; right: 0; top: calc(100% + 3px); }

.form-control { width: 100%; height: 44px; font-family: var(--regular); font-size: var(--size-base); color: var(--color-base); position: relative; padding: 0 12px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
.form-control:not(.form-control--bday):not(.form-control--byear):not(.form-control--bmonth) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0), inset 0 0 0 100px rgba(255, 255, 255,1); transition: var(--transition); }
.form-control:focus { border-color: #99a0ad; }
.form-control--bday, .form-control--byear { width: 90px; flex-shrink: 0; }
.form-control--bmonth { flex-grow: 1; margin: 0 10px; }

.form-control--city { display: flex; align-items: center; }

.form-row { position: relative; }
	.form-row .btn { width: 52px; position: absolute; top: 4px; right: 4px; }

input[type="radio"], input[type="checkbox"] { display: none; }
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; }
select:not([multiple]) { padding-right: 20px; background-repeat: no-repeat; background-position: calc(100% - 10px) 19px; background-image: url(../landing_33/arrow-down.svg); }
select::-ms-expand { display: none; }

.answer-list { width: 200px; margin: 0 auto; }
	.answer-list li + li { margin-top: 16px; }
.answer { width: 100%; cursor: pointer; }
.radio { position: relative; padding-left: 40px; transition: var(--transition); }
.radio::before { width: 24px; height: 24px; display: block; content: ''; position: absolute; left: 0; top: -3px; border: 2px solid var(--color-secondary); border-radius: 100%; }
:checked + .radio::before { border-color: var(--color-success); }
:checked + .radio::after { width: 14px; height: 14px; display: block; content: ''; position: absolute; left: 5px; top: 2px; border-radius: 100%; background: linear-gradient(180deg, #9cf346 0%, #53b331 100%); }

/* slide 1 */

.header-row { height: 82px; padding: 0 23px 0 20px; }
	.header-row span { font-size: var(--size-sm); }
	.header-row :is(.icon-css, .logo-rusmeet) { margin-right: 18px; }
.header-block { text-align: center; padding: 24px 30px 20px; }

.headline { font-family: var(--semibold); margin-bottom: 17px; }
.headline a { display: inline-flex; color: var(--color-primary); vertical-align: bottom; margin: 0 8px; }
.headline a .icon-css { margin-right: 4px; }

.soc-title { font-family: var(--semibold); font-size: var(--size-sm); color: var(--color-secondary); margin-bottom: 8px; }
.social-row a:not(:first-child) { margin-left: 12px; -webkit-clip-path: inset(0 round 9px); clip-path: inset(0 round 9px); }
.social-row .icon-css { display: block; }

.header-block_logo { width: 113px; height: 20px; margin: 0 auto 12px; }
.city-row { font-family: var(--semibold); font-size: var(--size-md); margin-bottom: 9px; }

.target-list { width: 390px; height: 604px; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 36px 16px; overflow: hidden; margin: 0 auto; }
	.target-list li { position: relative; }
	.target-list .btn { margin-top: 0; }

.video-container { height: 227px; position: relative; -webkit-clip-path: inset(0 round 10px); clip-path: inset(0 round 10px); margin-bottom: 5px; }

.video-box { width: auto; height: 227px; position: absolute; top: 0; }
.video-box--sex { left: -40px; }
.video-box--romance { left: -130px; }
.video-box--friends { left: -140px; }
.video-box--marriage { left: -120px; }

/* slide 2 */

.gender-list { width: 378px; grid-template-columns: 1fr 1fr; grid-template-rows: 243px 52px; gap: 5px 14px; margin: 0 auto; }
	.gender-list > div { position: relative; }
	.gender-list .btn { margin-top: 0; }
.male-box, .female-box { width: 182px; height: 243px; border-radius: 12px; }
.male-box { background: var(--color-blue); }
	.male-box img { position: absolute; left: 46px; top: 76px; }
.female-box { background: var(--color-pink); }
	.female-box img { position: absolute; left: 55px; top: 64px; }

/* slide 3 */

.their-gender { width: 404px; grid-template-columns: 1fr 1fr; grid-template-rows: 260px 52px; gap: 5px 14px; margin: 0 auto; }
	.their-gender .btn { margin-top: 0; }
.sex .their-gender-notsex, .their-gender-sex { display: none; }
.sex .their-gender-sex { display: grid; }

/* slide 8 */

.resultheader { text-align: center; margin-bottom: 12px; }
.progressbar { width: 100%; height: 12px; overflow: hidden; position: relative; margin: 0 auto 30px; border-radius: 10px; background: #bbb; }
.progress { height: 12px; display: block; border-radius: 10px; overflow: hidden; position: relative; background: linear-gradient(180deg, #9cf346 0%, #53b331 100%); }

.checked .icon-css { margin-right: 16px; }
.resulttest .checked { margin: 14px 0 30px; }
.resulttest strong { padding: 0 4px; }

.rules-list li { position: relative; padding-left: 41px; }
.rules-list li + li { margin-top: 15px; }
.rules-list .icon-css { position: absolute; left: 0; top: 50%; transform: translateY(-50%); }

/* slide 10 */

.list-box{margin-top: 2px; max-height: 30vh; overflow-y: scroll; border: 1px solid var(--color-border); border-radius: 10px; background: #fff;}
.list-box > div {padding: 6px 10px 6px 10px; cursor: pointer;}
.list-box > div:hover {background-color:var(--color-border);}

@-webkit-keyframes hidden {
	from {opacity:1; visibility:visible}
	to {opacity:0; visibility:hidden}
}

@keyframes hidden {
	from {opacity:1; visibility:visible}
	to {opacity:0; visibility:hidden}
}

.hidden_anim{
	animation-name:hidden;
	-webkit-animation-name:hidden;
	animation-duration:0.3s;
	-webkit-animation-duration:0.3s;
	animation-timing-function:ease-in-out;
	-webkit-animation-timing-function:ease-in-out;
	visibility:hidden;
}

/* screen 11 */

.bbox-city { position: relative; }
	.bbox-city .add-error { top: 123px; }

/* slide 12 */
.recovery-row { display: none; text-align: center; padding: 10px 0 3px;}
.recovery-row a { color: var(--color-primary); }
.delimiter-box { height: 22px; font-size: var(--size-sm); color: var(--color-secondary); text-align: center; position: relative; margin: 20px auto 19px; }
.delimiter-row { width: 100%; position: absolute; top: 10px; }
	.delimiter-row span { width: calc((100% - 43px) / 2); height: 1px; display: block; background-color: var(--color-border); }

/* slide 13 */

.form-row--captcha { width: 250px; margin: 0 auto; }
.captcha-row { margin-bottom: 15px; }
	.captcha-row + .form-control { width: 140px; }
.refresh-row { cursor: pointer; }
	.refresh-row .icon-css { position: relative; top: -1px; margin-right: 5px; }

/* slide 14 */
@-webkit-keyframes rotation {
	to { transform: rotate(360deg) }
}
@keyframes rotation {
	to { transform: rotate(360deg) }
}

.loading { -webkit-animation: rotation 2s linear infinite; animation: rotation 2s linear infinite; margin: 0 auto; }

/* slide 15 */
.screen-15 { padding-top: 36px; }
	.screen-15 .btn { max-width: 290px; margin-top: 26px; }
	.screen-15 h2 { margin-bottom: 19px; }
.approved { width: 78px; height: 78px; display: block; margin: 0 auto 18px; }
.text { font-size: 14px; line-height: 1.3; text-align: center; }

/* popup */

.overlay,
.dlg-page { position: fixed; left: 0; right: 0; top: 0; bottom: 0; z-index: 10; background: rgba(0, 0, 0, 0.45); transition: var(--transition); }
.dlg-page { background: rgba(0, 0, 0, 0.65); }

.bbox-popup { width: 350px; position: absolute; left: 50%; top: 50%; z-index: 12; transform: translate(-50%, -50%) ; padding: 30px; }
	.bbox-popup .btn-logon { margin: 0 auto 10px; }
	.bbox-popup .btn { max-width: 100%; height: 44px; margin-top: 0; }
.popup__logo { width: 156px; height: 24px; display: block; margin: 0 auto 27px; }

.dlg-page-content { flex-direction: column; position: relative; top: 80px; }
	.dlg-page-content .btn { display: flex; align-items: center; justify-content: center; margin: 0 auto; }
	.dlg-page-content a, a.reminder { color: var(--color-base); border-bottom: 1px solid var(--color-placeholder); }
.fixed-box .header-title { margin-bottom: 18px; }
.float-box { width: 100%; text-align: center; }
.float-box_logon .text-box { font-size: var(--size-sm); text-align: center; margin-bottom: 16px; }
.float-box_logon .reminder { font-size: var(--size-sm); }

.reg-list li + li {margin-top:15px}
.reg-list li:nth-child(4) { margin-top: 29px; }
.reg-list li:nth-child(2) label,
.payment-contaner .reg-list label { margin-bottom: 11px; }
.reg-list li:nth-child(4), .reg-list li:nth-child(5) { font-size: var(--size-sm); text-align: center;}
.reg-list label { display: block; -moz-text-align-last: left; text-align-last: left; }
.reg-list + .btn { margin: 16px auto 27px; }

.payment-contaner .fixed-box { width: 100%; padding-top: 13px; }
.fixed-box .return { width: 40px; height: 40px; display: flex; position: absolute; right: 2px; top: 2px; cursor: pointer; }
.fixed-box .return span { width: 14px; height: 14px; margin: auto; display: block; background: url('close-gray.svg') no-repeat 50% / cover; }
.alert-success { text-align: center; margin-bottom: 20px; }

/* cookie warning */
.text-center { text-align: center; }
.warning-cookie { height: 50px; font-size: 12px; line-height: 1.3333; color: var(--color-secondary); position: fixed; left: 0; right: 0; bottom: 0; z-index: 1001; padding: 0 3px 0 5px; border-top: 1px solid rgba(0, 0, 0, .1); background: rgba(255, 255, 255, .9); }
	.warning-cookie a { font-size: 12px; color: var(--color-secondary); text-decoration: underline; text-underline-offset: 3px; }
.warning-close { height: 30px; width: 30px; flex-shrink: 0; font-size: 16px; color: var(--color-secondary); position: static; }

/* adaptive */

@media screen and (max-width:600px) {
	.container { padding: 20px 12px 0 }
	.bbox:not(.header-row):not(.header-block),
	.dlg-page-content { padding: 20px 20px 30px; }
	.gradient-box { height: 80px; }

	.header-row { max-width: 351px; height: 70px }
	.target-list { width: 311px; height: auto; gap: 11px; }

	.video-container, .video-box { height: 186px; }
	.video-box--romance, .video-box--friends { left: -110px; }
	.video-box--marriage { left: -90px; }

	.self-gender, .their-gender { width: 100%; }
	.gender-list, .their-gender { width: 150px; grid-template-columns: 1fr; grid-template-rows: 200px 82px 200px 52px; gap: 5px 0; }
		.gender-list :nth-child(2), .their-gender :nth-child(2) { grid-row: 3; }
		.gender-list :nth-child(3), .their-gender :nth-child(3) { grid-row: 2; }
	.their-gender img { width: 150px; height: 200px; }

	.male-box, .female-box { width: 150px; height: 200px; border-radius: 10px; }
	.male-box img { position: absolute; left: 30px; top: 55px; }
	.female-box img { position: absolute; left: 39px; top: 43px; }

	.progressbar { max-width: 271px;  }
}

@media screen and (max-width:400px) {
	.target-list { width: 100%; }
}

@media screen and (max-width:375px) {
	select:not([multiple]) { padding-left: 10px; background-position: calc(100% - 8px) 19px; }
}

@media screen and (max-width:374px) {
	.bbox:not(.header-row):not(.header-block),
	.dlg-page-content { padding-bottom: 30px; }
}

@media screen and (max-height:667px) {
	.header-row { height: 60px; }
	.slide1 .btn-lg { height: 44px; }

	.slide1, .slide2, .slide3 { padding: 15px 15px 20px !important; }
	.slide1 h2, .slide2 h2, .slide3 h2 { margin-bottom: 15px; }
	.slide1 .video-container, .slide1 .video-box { height: 176px; }
	.gender-list, .their-gender { grid-template-rows: 200px 67px 200px 52px; }
}

@media screen and (max-width:360px) {
	.slide1 { padding-left: 15px !important; padding-right: 15px !important; }
	.form-control--bday, .form-control--byear { width: 80px; }
	.card-girl { width: 140px; }
}

@media screen and (max-width:359px) {
	.bbox:not(.header-row):not(.header-block),
	.dlg-page-content { padding: 20px 10px; }
	.header-block { text-align: center; padding: 24px 20px; }
	.target-list { width: 256px; gap: 10px; }
	.gradient-box span { left: 12px; bottom: 10px; }

	select:not([multiple]) { padding-left: 8px; background-position: calc(100% - 6px) 19px; }
	.form-control--bday, .form-control--byear { width: 75px; }
	.form-control--bmonth { margin: 0 5px; }
}

@media screen and (max-width:800px) and (orientation:portrait) {
	body { background-image: url('../landing_16/bg_default-720.jpg'); }
	.sex { background-image: url('../landing_16/bg_sex-720.jpg'); }
	.wedding { background-image: url('../landing_16/bg_wedding-720.jpg'); }
}

@media screen and (max-width:480px) and (orientation:portrait) {
	body { background-image: url('../landing_16/bg_default-480.jpg'); }
	.sex { background-image: url('../landing_16/bg_sex-480.jpg'); }
	.wedding { background-image: url('../landing_16/bg_wedding-480.jpg'); }
}

@media screen and (max-width:375px) and (orientation:portrait) and (max-height:780px) {
	body { background-image: url('../landing_16/bg_default-375.jpg'); }
	.sex { background-image: url('../landing_16/bg_sex-375.jpg'); }
	.wedding { background-image: url('../landing_16/bg_wedding-375.jpg'); }
}


[hidden] { display: none !important; }