/* reset */

h2 { font-family: var(--semibold); font-size: var(--size-lg); line-height: 24px; text-align: center; margin-bottom: 23px; padding: 0 5px; }
h3 { font-family: var(--semibold); font-size: var(--size-base); line-height: 20px; text-align: center; margin-bottom: 22px; }

.subtitle { font-size: var(--size-sm); line-height: 18px; text-align: center; margin: -17px 0 27px; }

.icon-stack { display: inline-block; flex-shrink: 0; background-size: cover; background-position: 50%; }
.arrow-back { width: 20px; height: 20px; background-image: url('sprite.stack.svg#arrow-back'); }
.arrow-down { width: 20px; height: 20px; background-image: url('sprite.stack.svg#arrow-down'); }
.bag { width: 32px; height: 31px; background-image: url('sprite.stack.svg#bag'); }
.blind { width: 24px; height: 24px; background-image: url('sprite.stack.svg#blind'); }
.bullhorn { width: 24px; height: 24px; background-image: url('sprite.stack.svg#bullhorn'); }
.cake { width: 28px; height: 34px; background-image: url('sprite.stack.svg#cake'); }
.camera { width: 37.6px; height: 33.9px; background-image: url('sprite.stack.svg#camera'); }
.check-around { width: 28px; height: 28px; background-image: url('sprite.stack.svg#check-around'); }
.check-square { width: 20px; height: 20px; background-image: url('sprite.stack.svg#check-square'); }
.child { width: 38px; height: 32px; background-image: url('sprite.stack.svg#child'); }
.cigarette { width: 32px; height: 26px; background-image: url('sprite.stack.svg#cigarette'); }
.close-gray { width: 14px; height: 14px; background-image: url('sprite.stack.svg#close-gray'); }
.geo { width: 24px; height: 35px; background-image: url('sprite.stack.svg#geo'); }
.hand { width: 24px; height: 24px; background-image: url('sprite.stack.svg#hand'); }
.heart { width: 24px; height: 22px; background-image: url('sprite.stack.svg#heart'); }
.heart-2 { width: 32px; height: 28px; background-image: url('sprite.stack.svg#heart-2'); }
.hieroglyph { width: 30px; height: 30px; background-image: url('sprite.stack.svg#hieroglyph'); }
.icon-eye-close { width: 24px; height: 24px; background-image: url('sprite.stack.svg#icon-eye-close'); }
.icon-eye-open { width: 24px; height: 24px; background-image: url('sprite.stack.svg#icon-eye-open'); }
.loader { width: 42px; height: 42px; background-image: url('sprite.stack.svg#loader'); }
.logo-google { width: 22px; height: 22px; background-image: url('sprite.stack.svg#logo-google'); }
.logo-lp { width: 32px; height: 32px; background-image: url('sprite.stack.svg#logo-lp'); }
.mess { width: 30px; height: 30px; background-image: url('sprite.stack.svg#mess'); }
.notes { width: 26px; height: 30px; background-image: url('sprite.stack.svg#notes'); }
.question-mark { width: 30px; height: 30px; background-image: url('sprite.stack.svg#question-mark'); }
.roulette { width: 30px; height: 29px; background-image: url('sprite.stack.svg#roulette'); }
.wineglass { width: 26px; height: 33px; background-image: url('sprite.stack.svg#wineglass'); }

.icon-eye-open, .icon-eye-close { position: absolute; right: 12px; top: 10px; z-index: 3; cursor: pointer; }

.progress-row { height: 20px; position: relative; margin: -9px 0 26px; }
	.progress-row .arrow-back { position: absolute; left: 0; top: 0; cursor: pointer; }
.progress-bar { width: 140px; margin: 0 auto; height: 3px; background: #eee; }
	.progress-bar li { height: 3px; flex-grow: 1; background: #c2c2c2; }
	.progress-bar .active { background: var(--color-primary); }
.icon-row { text-align: center; margin-bottom: 10px; }

.btn { max-width: 320px; line-height: 1; margin: 0 auto; padding: 0 5px; }

.btn-light { color: var(--color-base); border: 2px solid transparent; box-shadow: 0px 2px 10px rgba(0, 0, 0, 0.15); background: #fff; }

.btn-md { height: 44px; margin-top: 0; }
.btn-short { max-width: 200px; }

.bbox-creating .click-zone { right: 5px; top: 5px; }

/* form */
.form-control--city { display: flex; align-items: center; margin-bottom: 30px; }

.form-row { margin-bottom: 30px; }
	.form-row .subtitle { margin: 9px 0 0; }
.form-row--email { margin-bottom: 35px; }

select:not([multiple]) { background-image: url(arrow-down.svg); }
select::-ms-expand { display: none; }

.skip-answer-row { font-size: var(--size-sm); color: var(--color-secondary); text-align: center; }
	.skip-answer-row span { cursor: pointer; }
.btn + .skip-answer-row, .btn + .subtitle { margin-top: 21px; }

/* Range style */
.range { width: 280px; --scroller-size: 36px; margin: 0 auto 50px; }
.range-height { width: 280px; }

.range-header { display: flex; align-items: baseline; font-size: 17px; margin-bottom: 17px; }
.range-title { font-family: 'SFUIDisplay-Semibold', sans-serif; margin-right: auto; }

.range-control { width: 100%; margin: 0 auto; border-radius: 3px; background: #c2c2c2; }
.range-scrollbar { width: calc(280px - var(--scroller-size)); height: 4px; position: relative; margin: 0 auto; }

.range-scroller { width: var(--scroller-size); height: var(--scroller-size); border: 1px solid #d9dadc; position: absolute; left: 0; top: 50%; --webkit-transform: translateY(-50%); transform: translateY(-50%); border-radius: 100%; background: #fff; box-shadow: 0px 2px 1px rgba(0, 0, 0, 0.0510643), 0px 2px 2px rgba(0, 0, 0, 0.1), 0px 4px 4px rgba(0, 0, 0, 0.05); cursor: pointer; }
.range-scale { height: 4px; position: absolute; top: 0; z-index: 0; border-radius: 3px; background: #68ca2c; }

.rules-list { margin-bottom: 25px; }

.answer-list-2 { max-width: 320px; margin: 0 auto 30px; }
	.answer-list-2 li + li { margin-top: 16px; }

.hobbies-list { flex-wrap: wrap; margin-bottom: 20px; }
	.hobbies-list div { height: 36px; font-family: var(--semibold); font-size: var(--size-sm); margin: 0 4px 10px; padding: 0 14px; border: 2px solid #fff; border-radius: 18px; box-shadow: 0px 2px 15px rgba(0, 0, 0, 0.1); background: #fff; transition: var(--transition); cursor: pointer; }
	.hobbies-list .active { border-color: var(--color-success); box-shadow: none; }

.lang-list .btn, .question-list .btn { font-family: var(--semibold); padding: 0 16px; }
.lang-list .active, .question-list .active, .question-list .btn:hover, .question-list .btn:active { border-color: var(--color-success); box-shadow: none; }
.lang-list .btn + .btn, .question-list .btn + .btn { margin-top: 16px; }

.lang-list .btn .checkbox { width: 20px; height: 20px; border: 2px solid var(--color-secondary); border-radius: 5px; }
.lang-list .active .checkbox { border: none; background-image: url('sprite.stack.svg#check-square'); }

.lang-list { margin-bottom: 30px; }
.question-list { margin-bottom: 21px; }
	.question-list .btn { line-height: 1.25; text-align: center; padding: 11px 16px 9px; }

.bday-row { max-width: 320px; margin: 0 auto;}

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

.list-box { max-height: 293px; overflow-y: auto; margin-top: 2px; padding: 12px; border: 1px solid var(--color-border); border-radius: 10px; background: #fff; }
	.list-box > div { cursor: pointer; }
	.list-box > div + div { margin-top: 3px; }

.photo-box { width: 120px; height: 120px; position: relative; margin: 0 auto 15px; border: 4px solid #fff; border-radius: 100%; background: #bbb; -webkit-box-box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.1); background: #bbb url('sprite.stack.svg#camera') no-repeat 50%; background-size: 37px 40px; }
	.photo-box img { width: 112px; height: 112px; border-radius: 50%; }
	.photo-box + .subtitle { margin: 0 0 23px; }
	.photo-box .photo-loader { width: 100px; height: 100px; margin: auto; }

.btn-upload { position: relative; margin-top: 0; }
	.btn-upload [type="file"] { height: 1px; opacity: 0; }
	.btn-upload span { position: absolute; left: 0; right: 0; top: 0; bottom: 0; }

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

.canvas-container { width: 130px; height: 130px; position: relative; margin: 0 auto 25px; }
.canvas { display: block; margin: auto; border: 1px solid #d9dadc; border-radius: 100%; box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.1); }
.canvas-img { width: 110px; height: 110px; position: absolute; left: 50%; top: 50%; z-index: 3; transform: translate(-50%, -50%); border-radius: 100%; }

.bbox-creating { position: relative; padding-top: 52px !important; }

.creating-profile { font-family: var(--semibold); }
	.creating-profile li + li { margin-top: 12px; }
	.creating-profile span { width: 28px; height: 28px; display: block; margin-right: 16px; border: 2px solid var(--color-secondary); border-radius: 14px; background: #fff; }
	.creating-profile .checked { border: none; background-image: url('sprite.stack.svg#check-around'); }

.photos { width: 253px; height: 278px; flex-flow: column wrap; align-content: space-between; position: relative; overflow: hidden; margin: 0 auto 20px; }
	.photos div { width: 124px; position: relative; margin-bottom: 5px; border-radius: 8px; background: #bbb; }
	.photos div:nth-child(2n + 1) { order: 1; }
	.photos div:nth-child(2n + 2) { order: 2; }
	.photos img { width: 100%; height: auto; opacity: 0; transition: opacity .3s ease-out; }
	.photos .loader { position: absolute; left: 50%; top: 50%; margin: -21px 0 0 -21px;  }

.captcha-box { display: flex; align-items: center; margin-bottom: 15px; }
	.captcha-box img { width: 120px; height: 50px; margin-right: 25px; }
	.captcha-box .refresh { padding-left: 22px; position: relative; border-bottom: none; }
	.captcha-box .refresh::before { width: 19px; height: 16px; display: block; content: ''; position: absolute; left: 0; top: 0; background: url('sprite.stack.svg#refresh') no-repeat 50% / cover; }

/* slide 16 */
.cards-grid + .btn { margin: 36px auto 12px; }

@-webkit-keyframes rotation1 {
	to { transform: rotate(360deg) }
}

@keyframes rotation1 {
	to { transform: rotate(360deg) }
}

@-webkit-keyframes rotation2 {
	to { transform: rotate(-360deg) }
}

@keyframes rotation2 {
	to { transform: rotate(-360deg) }
}
.photos .loader { -webkit-animation: rotation1 1.2s linear infinite; animation: rotation1 1.2s linear infinite;  }
.photo-box .photo-loader { -webkit-animation: rotation2 1.2s linear infinite; animation: rotation2 1.2s linear infinite;  }
.creating-step3, .click-zone:not(.warning-close) { opacity: 0; transition: opacity .4s ease-out }

@media screen and (max-width:374px) {
	:root { --range-width: 290px; }
}

@media screen and (max-width:359px) {
	:root { --range-width: 269px; }
}

[hidden] { display: none !important; }