.calls {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 16;
right: 340px;
bottom: 20px;
padding: 25px;
backdrop-filter: blur(10px);
background: rgb(65 75 78 / 70%);
border-radius: 10px;
opacity: 1;
height: 100px;
}
.calls--2 {
bottom: 170px;
}
.calls--top-mess {
bottom: 120px!important;
}
.calls .icon {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 49px;
height: 49px;
border-radius: 10px;
cursor: pointer;
}
.calls .icon:hover {
opacity: .8;
}
.calls .icon:hover svg {
-webkit-transform: scale(1.1);
-ms-transform: scale(1.1);
transform: scale(1.1);
-webkit-transition: .3s;
-o-transition: .3s;
transition: .3s;
}
.calls .icon--mess {
position: relative;
}
.calls .icon--mess svg {
width: 36px;
height: 36px;
}
.calls .icon__label {
display: block;
position: absolute;
top: -6px;
right: -8px;
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #fd7878; font-weight: 400;
font-size: 10px;
line-height: 16px;
text-align: center;
color: #fff;
opacity: 0;
}
.calls .icon--bg-price {
overflow: hidden!important;
}
.calls .icon--bg-green {
position: relative;
z-index: 2;
background-color: #6dce94;
}
.calls .icon--bg-green-mess {
background-color: #6dce94;
}
.calls .icon--bg-pur {
position: relative;
background-color: #7cbfc2;
}
.calls .icon--bg-blue {
position: relative;
background-color: #5ebee1;
}
.calls .icon--bg-black {
position: relative;
background-color: #000;
}
.calls .icon--bg-pink {
position: relative;
background-color: #b19dc5;
}
.calls .icon--c-turq {
color: #7cbfc2;
}
.calls .icon--close {
width: 20px;
height: 20px;
}
.calls__inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
align-items: center;
gap: 25px;
}
.calls__item-inner--no-pulse::after {
display: none!important;
}
.calls__item {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-transition: opacity .3s;
-o-transition: opacity .3s;
transition: opacity .3s;
cursor: pointer;
text-decoration: none;
}
.calls__item-inner {
position: relative;
border-radius: 10px;
margin-bottom: 7px;
}
.calls__item-inner::after {
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
-webkit-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
-webkit-animation: 3s cubic-bezier(.215,.61,.355,1) infinite pulseBeforeAfter;
animation: 3s cubic-bezier(.215,.61,.355,1) infinite pulseBeforeAfter;
opacity: .3;
border-radius: inherit;
-webkit-animation-delay: .1s;
animation-delay: .1s;
pointer-events: none;
}
.calls__item-inner--bg-green::after {
background-color: #6dce94;
}
.calls__item-inner--bg-pur:after {
background-color: #7cbfc2;
}
.calls__item-inner--bg-blue:after {
background-color: #5ebee1;
}
.calls__item-inner--bg-black:after {
background-color: #000;
}
.calls__item-inner--bg-price:after {
background-color: #9e85b7;
}
.calls__item-inner--bg-pink:after {
background-color: #b19dc5;
}
.calls__item--chat.is-active .icon--bg-green-mess {
background-color: transparent;
background-image: -o-radial-gradient(49px 2px,circle,transparent 10px,#6dce94 10px);
background-image: radial-gradient(circle at 49px 2px,transparent 10px,#6dce94 10px);
}
.calls__item--chat.is-active .icon__label {
opacity: 1;
-webkit-animation: 3s linear infinite labelBg;
animation: 3s linear infinite labelBg;
}
.calls--fr .calls__item-inner.calls__item-inner--bg-blue::after,.calls--fr .calls__item-inner.calls__item-inner--bg-green::after,.calls--fr .calls__item-inner.calls__item-inner--bg-pur::after {
display: none;
}
.calls__item-icon {
position: relative;
z-index: 2;
}
.calls__item-text { font-weight: 400;
font-size: 14px;
line-height: 1.2;
text-align: center;
color: #fff;
}
.calls--show {
bottom: 0;
opacity: 1;
}
.calls--absolute {
position: absolute;
} .quiz-btn-fix {
position: fixed;
right: 100px;
bottom: 20px;
width: 210px;
height: 100px; border-radius: 10px;
background: 0 0;
background: radial-gradient(closest-side, #9db8bc 0, #617d88 100%);
z-index: 10;
cursor: pointer;
border: 1px solid rgb(255 255 255 / 70%); }
.quiz-btn-fix--bf {
background-image: -o-radial-gradient(0 50px, circle, transparent 24px, #000 25px);
background-image: radial-gradient(circle at 0 50px, transparent 24px, #000 25px);
}
.quiz-btn-fix--bf .quiz-btn-fix__label svg {
fill: #000;
}
.quiz-btn-fix--pur {
background: #906dbd;
}
.quiz-btn-fix__wrap {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
padding: 15px 15px 15px 30px;
overflow: hidden;
}
.quiz-btn-fix__wrap::after {
content: "";
display: block;
width: 70px;
height: 3px;
background: url(//bmmedia.ru/wp-content/themes/bmm/img/decor/bf-flash.svg) center no-repeat;
background-size: contain;
left: 0;
top: 0px;
z-index: 1;
position: absolute;
-webkit-animation: 3s ease-in-out 50ms infinite blFr;
animation: 3s ease-in-out 50ms infinite blFr;
}
.quiz-btn-fix__wrap::before {
content: "";
display: block;
width: 70px;
height: 3px;
background: url(//bmmedia.ru/wp-content/themes/bmm/img/decor/bf-flash.svg) center no-repeat;
background-size: contain;
right: 0;
bottom: 0px;
z-index: 1;
-webkit-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
position: absolute;
-webkit-animation: 3s ease-in-out 50ms infinite blFrReverse;
animation: 3s ease-in-out 50ms infinite blFrReverse;
}
.quiz-btn-fix__label {
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 38px;
height: 38px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
border-radius: 50%;
background-color: #fff;
-webkit-box-shadow: 0 4px 13px 0 rgba(48, 119, 122, .25);
box-shadow: 0 4px 13px 0 rgba(48, 119, 122, .25);
}
.quiz-btn-fix__label svg {
fill: #617d88;
-webkit-transform: rotate(-90deg);
-ms-transform: rotate(-90deg);
transform: rotate(-90deg);
}
.quiz-btn-fix__text {
display: block;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
text-align: center;
color: #fff;
}
.quiz-btn-fix__pirce {
display: block;
font-weight: 400;
font-size: 20px;
line-height: 1.1;
text-align: center;
color: #fff;
} @-webkit-keyframes blFr {
0% {
left: -140px;
}
100%, 50% {
left: 110%;
}
}
@keyframes blFr {
0% {
left: -140px;
}
100%, 50% {
left: 110%;
}
}
@-webkit-keyframes blFrReverse {
0% {
right: -140px;
}
100%, 50% {
right: 110%;
}
}
@keyframes blFrReverse {
0% {
right: -140px;
}
100%, 50% {
right: 110%;
}
} .quiz-popup.is-active {
display: block;
}
.quiz-popup {
display: none;
position: fixed;
z-index: 1005;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
.quiz-popup__container {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
height: 100vh;
padding: 30px;
background-color: rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
overflow-y: auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
.quiz-popup__container-blur {
background-color: rgba(255, 255, 255, .1);
-webkit-backdrop-filter: blur(5px);
backdrop-filter: blur(5px);
overflow-y: auto;
-ms-scroll-chaining: none;
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
} .quiz {
position: relative;
width: 100%;
max-width: 955px;
height: 545px;
line-height: 1.5;
background-color: #fff;
border-radius: 21px;
-webkit-box-shadow: 0 4px 18px rgba(165, 149, 138, .2);
box-shadow: 0 4px 18px rgba(165, 149, 138, .2);
}
.quiz_button_tg {
color: #000;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
margin-top: 15px;
}
.quiz .form-main__box .input-box:not(:last-child) {
margin-bottom: 15px;
}
.quiz .form-main__box .input-box input {
border-bottom: 1px solid #617d88;
color: #617d88;
padding: 15px 0;
} body .quiz .form-main__box .input-box input::placeholder {
color: #617d88 !important;
opacity: 1 !important;
} body .quiz .form-main__box .input-box input::-webkit-input-placeholder {
color: #617d88 !important;
}
body .quiz .form-main__box .input-box input::-moz-placeholder {
color: #617d88 !important;
opacity: 1 !important;
}
body .quiz .form-main__box .input-box input:-ms-input-placeholder {
color: #617d88 !important;
}
.quiz .creat-form__politics {
color: #617d88;
}
.quiz .form-main__box {
overflow-y: auto;
}
.quiz .wpcf7-submit {
background: #617d88;
color: #fff;
}
.quiz .wpcf7-submit:hover {
background: #495f68;
}
.quiz .form-main__title {
color: #617d88;
font-size: 30px;
margin-top: 20px;
mix-blend-mode: unset;
}
.quiz .wpcf7 {
background: #fff;
padding-left: 17px;
padding-right: 17px;
padding-bottom: 16px;
}
.quiz .wpcf7 form.invalid .wpcf7-response-output, 
.quiz .wpcf7 form.unaccepted .wpcf7-response-output, 
.quiz .wpcf7 form.payment-required .wpcf7-response-output {
color: #000;
} .quiz--v2 .quiz__step,
.quiz--v2 .quiz__step2 {
padding-top: 140px;
}
.quiz--v2 .quiz__form-mess {
margin-top: 10px;
}
.quiz--v2 .quiz__list {
gap: 20px;
}
.quiz--v2 .quiz__list .checkbox {
padding-left: 50px;
min-height: 34px;
}
.quiz--v2 .quiz__list .checkbox__box {
width: 34px;
height: 34px;
margin-left: -50px;
}
.quiz--v2 .quiz__list .checkbox__box svg {
width: 20px;
height: 20px;
}
.quiz--v2 .quiz__list .checkbox__text {
font-weight: 400;
font-size: clamp(16px, 7.33333px + .00667 * 100vw, 18px);
} .quiz__step-header {
position: absolute;
top: 0;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
min-height: 130px;
background-color: rgba(246, 245, 245, .7);
}
.quiz__step-header .quiz__title {
text-align: center;
} .quiz__step-overflow .quiz__overfow {
position: relative;
}
.quiz__step-overflow .quiz__overfow::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: calc(100% - 4px);
height: 25px;
background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(.01%, rgba(255, 255, 255, 0)), color-stop(30.28%, rgba(255, 255, 255, .81)), to(#fff));
background: -o-linear-gradient(top, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) .01%, rgba(255, 255, 255, .81) 30.28%, #fff 100%);
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) .01%, rgba(255, 255, 255, .81) 30.28%, #fff 100%);
z-index: 2;
}
.quiz__step-overflow .quiz__overfow .simplebar-content {
padding-bottom: 25px !important;
}
.quiz__overfow {
margin: 0 auto;
max-width: 570px;
max-height: 200px;
} .quiz__wrap {
position: relative;
width: 100%;
height: 100%;
border-radius: 21px;
overflow: hidden;
} .quiz__close {
position: absolute;
top: 0;
right: -44px;
cursor: pointer;
}
.quiz__close svg * {
stroke: #eef2f3;
stroke-width: 3px;
} .quiz__step-text {
position: relative;
width: 100%;
height: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
} .quiz__circle {
position: absolute;
width: 220px;
height: 220px;
background-color: rgb(97 125 136 / 10%);
border-radius: 50%;
}
.quiz__circle--1 {
top: 70px;
left: 440px;
-webkit-transform: none;
-ms-transform: none;
transform: none;
}
.quiz__circle--2 {
bottom: 0;
right: 0;
-webkit-transform: translate(50%, 50%);
-ms-transform: translate(50%, 50%);
transform: translate(50%, 50%);
-webkit-transition: -webkit-transform 1.5s;
transition: transform 1.5s;
-o-transition: transform 1.5s;
transition: transform 1.5s, -webkit-transform 1.5s;
}
.quiz__circle--2.is-out {
-webkit-transform: translate(110%, 110%);
-ms-transform: translate(110%, 110%);
transform: translate(110%, 110%);
}
.quiz__circle--3 {
position: absolute;
top: -45px;
left: -65px;
width: 260px;
height: 260px;
background-color: #fbf5f6;
border-radius: 50%;
} .quiz__full-photo {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 495px;
flex: 1 1 495px;
height: 100%;
background-repeat: no-repeat;
background-size: cover;
z-index: 1;
}
.quiz__full-photo--ba {
width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding-left: 47px;
}
.quiz__full-photo-container {
width: 100%;
position: relative;
border-radius: 21px;
overflow: hidden;
}
.quiz__full-photo-container::before {
content: "";
display: block;
width: 100%;
padding-top: 100%;
}
.quiz__full-photo-container .info-slider,
.quiz__full-photo-container .result-slider,
.quiz__full-photo-container .step-slider {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.quiz__full-photo-container .info-slider__item {
max-height: none !important;
} .quiz__full-content {
position: relative;
-webkit-box-flex: 1;
-ms-flex: 1 1 460px;
flex: 1 1 460px;
padding: 40px;
z-index: 1;
overflow: hidden;
}
.quiz__full-content hr {
border: none;
color: rgba(91, 90, 96, .3);
background-color: rgba(91, 90, 96, .3);
height: 1px;
} .quiz__title { font-weight: 400;
font-size: 30px;
line-height: 1.1;
color: #5b5a60;
text-transform: uppercase;
}
.quiz__title span {
color: #7cbfc2;
} .quiz__text {
margin-top: 30px;
font-weight: 400;
font-size: 14px;
line-height: 1.95;
color: #000;
}
.quiz__text--border-bot {
padding-bottom: 40px;
margin-bottom: 40px;
border-bottom: 1px solid #e0e0e0;
}
.quiz__text--md { margin-top: 20px;
margin-bottom: 20px;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
text-transform: uppercase;
}
.quiz__text-sub2 {
font-weight: 400;
font-size: 16px;
line-height: 1.95;
color: #000;
}
.quiz__btn {
margin-top: 30px;
background: #617d88;
font-weight: bold;
}
.quiz__btn:hover {
background: #495f68;
} .quiz__full-row {
position: absolute;
top: 0;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
width: 585px;
padding: 75px 65px 75px 40px;
}
.quiz__full-content-row:not(:last-child) {
margin-bottom: 15px;
} .quiz__bar {
position: absolute;
top: 15px;
left: 60px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
width: calc(100% - 120px);
height: 46px;
z-index: 1;
opacity: 0;
-webkit-transition: opacity .25s;
-o-transition: opacity .25s;
transition: opacity .25s;
}
.quiz__bar.is-visible {
opacity: 1;
z-index: 2;
}
.quiz__bar::after {
content: "";
position: absolute;
top: 50%;
left: 0;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: calc(100% - 30px);
height: 4px;
background-color: #617d88;
}
.quiz__bar-item {
position: relative;
width: 46px;
height: 46px;
border-radius: 50%;
background-color: transparent;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
z-index: 1;
-webkit-transition: background-color .35s;
-o-transition: background-color .35s;
transition: background-color .35s;
}
.quiz__bar-item::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
width: 16px;
height: 16px;
border-radius: 50%;
background-color: #617d88;
-webkit-transition: background-color .35s;
-o-transition: background-color .35s;
transition: background-color .35s;
}
.quiz__bar-item svg {
position: relative;
stroke: #fff;
stroke-width: 5;
opacity: 0;
z-index: 2;
-webkit-transition: opacity .35s;
-o-transition: opacity .35s;
transition: opacity .35s;
}
.quiz__bar-item.is-active {
background-color: #617d88;
}
.quiz__bar-item.is-active svg {
opacity: 1;
}
.quiz__bar-item.is-active::after {
background-color: transparent;
} .quiz__bar--v {
top: 30px !important;
right: 0 !important;
left: auto !important;
width: 60px !important;
height: calc(100% - 235px) !important;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.quiz__bar--v::after {
content: "";
position: absolute;
top: 15px;
right: 50%;
left: auto;
-webkit-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
transform: translate(50%, 0);
width: 2px;
height: calc(100% - 30px);
background-color: #7cbfc2;
}
.quiz__bar--v .quiz__bar-item {
width: 33px !important;
height: 33px !important;
}
.quiz__bar--v .quiz__bar-item svg {
width: 18px !important;
height: 14px !important;
}
.quiz__bar--v .quiz__bar-item::after {
width: 10px;
height: 10px;
} .quiz__step {
padding-top: 80px;
}
.quizFormStep {
padding-top: 0;
}
.quiz__step .quiz__circle--1 {
top: 95px;
left: 175px;
}
.quiz__step2 {
padding-top: 90px;
}
.quiz .form__fieldset {
gap: 15px;
} .quiz__img {
position: absolute;
left: -190px;
bottom: -45px;
width: 460px;
height: 460px;
border-radius: 50%;
background-repeat: no-repeat;
background-size: cover;
background-position: center;
overflow: hidden;
} .quiz__content {
position: relative;
width: 100%;
max-width: 525px;
margin-left: 335px;
z-index: 2;
overflow-y: auto;
max-height: 100%;
}
.quiz__content-4 {
position: relative;
width: 100%;
padding: 0 60px;
z-index: 1;
} .quiz__subtitle {
display: block;
margin-bottom: 20px; font-size: 20px;
line-height: 1.3;
color: #5b5a60;
text-transform: uppercase;
}
.quiz__subtitle--num {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 20px;
font-size: 16px;
}
.quiz__subtitle-num {
-ms-flex-negative: 0;
flex-shrink: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 33px;
height: 33px;
font-size: 30px;
border-radius: 50%;
line-height: 1;
color: #fff;
background-color: #7cbfc2;
}
.quiz__subtitle--gap-md {
margin-bottom: 10px;
}
.quiz__subtitle--gap-sm {
margin-bottom: 15px;
}
.quiz__subtitle--gap-xs {
margin-bottom: 10px;
} .quiz__radio {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
min-height: 45px;
padding: 10px 20px;
font-weight: 400;
font-size: 16px;
line-height: 1.2;
color: #5b5a60;
cursor: pointer;
border: 1px solid #cdc8c9;
background-color: #f9f9f9;
border-radius: 13px;
-webkit-transition: background-color .25s, color .25s;
-o-transition: background-color .25s, color .25s;
transition: background-color .25s, color .25s;
}
.quiz__radio:not(:first-child) {
margin-top: 6px;
}
.quiz__radio.is-active,
.quiz__radio:hover {
background-color: #617d88;
color: #fff;
} .quiz__footer {
position: absolute;
bottom: -100%;
right: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 5px;
height: 135px;
opacity: 0;
}
.quiz__footer.is-visible {
opacity: 1;
bottom: 0;
z-index: 2;
}
.quiz__footer--full {
width: calc(100% - 60px);
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
} .quiz__price { font-weight: 400;
}
.quiz__price--1 {
position: absolute;
top: 0;
right: 0;
width: 270px;
height: 100%;
padding-top: 40px;
-webkit-transform: translateY(100%);
-ms-transform: translateY(100%);
transform: translateY(100%);
opacity: 0;
}
.quiz__price--1.is-active {
-webkit-transform: translateY(0);
-ms-transform: translateY(0);
transform: translateY(0);
opacity: 1;
}
.quiz__price--1::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 270px;
height: 270px;
border-radius: 50%;
background-color: #7cbfc2;
}
.quiz__price--2 {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
-webkit-box-align: end;
-ms-flex-align: end;
align-items: flex-end;
gap: 15px;
height: 100%;
padding-left: 70px;
padding-bottom: 30px;
padding-right: 30px;
-webkit-transform: translateX(100%);
-ms-transform: translateX(100%);
transform: translateX(100%);
opacity: 0;
}
.quiz__price--2.is-active {
-webkit-transform: translateX(0);
-ms-transform: translateX(0);
transform: translateX(0);
opacity: 1;
}
.quiz__price--2::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(//bmmedia.ru/wp-content/themes/bmm/img/decor/bg-1.svg) left top no-repeat;
background-size: cover;
}
.quiz__price--2 .quiz__price-wrap {
min-width: 215px;
}
.quiz__price-wrap {
position: relative;
color: #fff;
z-index: 1;
}
.quiz .btn--back {
margin-bottom: 31px;
}
.quiz__price-text {
display: block;
margin-bottom: 10px;
text-align: center;
font-weight: 400;
font-size: 16px;
line-height: 1.5;
text-transform: uppercase;
}
.quiz__price-block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: baseline;
-ms-flex-align: baseline;
align-items: baseline;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100%;
}
.quiz__price-block1 {
font-size: 16px;
line-height: 1.5;
text-transform: uppercase;
}
.quiz__price-block2 {
font-size: 44px;
line-height: 24px;
margin: 0 7px;
}
.quiz__price-block3 {
font-size: 38px;
line-height: 1;
} .quiz__list {
display: -ms-grid;
display: grid;
-ms-grid-columns: (1fr)[2];
grid-template-columns: repeat(2, 1fr);
gap: 10px;
}
.quiz__list-mark {
margin: 0 auto;
max-width: 530px;
}
.quiz__list-mark li {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
padding-left: 50px;
font-size: 18px;
line-height: 1.4;
}
.quiz__list-mark li::after {
content: "";
position: absolute;
top: 50%;
left: 10px;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
width: 28px;
height: 22px;
background-size: contain;
}
.quiz__list-mark li + li {
margin-top: 10px;
} .quiz__footer-btn-next {
position: relative;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
min-width: 245px;
margin-bottom: 5px;
border-radius: 13px;
text-transform: uppercase;
background: #fff;
color: #000;
z-index: 1;
-webkit-transition: background-color .25s;
-o-transition: background-color .25s;
transition: background-color .25s; display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
min-height: 58px;
padding: 0 20px;
font-style: normal;
font-weight: 400;
font-size: 16px;
line-height: 150%;
cursor: pointer;
border: none;
}
.quiz__footer-btn-next:hover {
background-color: #f0efee;
}
.quiz__footer-btn-next::after {
content: "";
-webkit-box-sizing: border-box;
box-sizing: border-box;
display: block;
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
background-color: #fff;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
-webkit-animation: 3s cubic-bezier(.215, .61, .355, 1) infinite pulseBeforeAfterBtnFull;
animation: 3s cubic-bezier(.215, .61, .355, 1) infinite pulseBeforeAfterBtnFull;
opacity: .3;
border-radius: inherit;
-webkit-animation-delay: .1s;
animation-delay: .1s;
pointer-events: none;
}
.quiz__footer-btn-next.is-disabled {
background-color: rgba(255, 255, 255, .5);
color: rgba(91, 90, 96, .5);
opacity: 1;
pointer-events: auto;
cursor: default;
}
.quiz__footer-btn-next.is-disabled svg {
opacity: .5;
}
.quiz__footer-btn-next.is-disabled::after {
display: none;
} .quiz__form-mess {
max-width: 450px;
}
.quiz__form-data {
max-width: 350px;
}
.quiz__form-data button {
margin-top: 20px;
}
.quiz .checkbox + .checkbox,
.quiz .radio + .radio {
margin-top: 10px;
}
.quiz__text-sub {
display: block;
margin-bottom: 15px;
font-weight: 400;
font-size: 16px;
line-height: 1.95;
color: rgba(91, 90, 96, .7);
} .quiz__polityc {
max-width: 340px; font-size: 12px;
line-height: 1.2;
color: rgba(91, 90, 96, .7);
}
.quiz__polityc a {
color: rgba(91, 90, 96, .7);
text-decoration: underline;
}
.quiz__polityc .checkbox {
width: 100%;
min-height: none;
}
.quiz__polityc .checkbox__text {
font-size: 12px !important;
} .quiz__footer-btn-1 {
display: none;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 15px;
}
.quiz__footer-btn-1.is-active {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.quiz__footer-btn-2 {
display: none;
font-size: 15px;
color: #5b5a60;
}
.quiz__footer-btn-2.is-active {
display: block;
} .quiz__btn-send {
display: none; position: absolute;
padding: 7px 10px;
bottom: 70%;
left: -35px;
width: 165px;
border: 1px solid #eb5757;
border-radius: 13px;
font-size: 14px;
line-height: 1.95;
text-transform: none;
color: #5b5a60;
background-color: rgba(255, 255, 255, .9);
-webkit-box-shadow: 0 4px 10px 0 rgba(29, 54, 55, .25);
box-shadow: 0 4px 10px 0 rgba(29, 54, 55, .25);
}
.quiz__btn-send.is-active {
display: block;
} .price-str {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.price-str__new {
font-size: 30px;
line-height: 1; white-space: nowrap;
}
.price-str__sep {
font-size: 31px;
line-height: 1; }
.price-str__old {
font-size: 14px;
color: rgba(91, 90, 96, .7);
text-decoration: line-through;
white-space: nowrap;
} .links-group {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-weight: 400;
font-size: 14px;
line-height: 1.2;
} .js-quiz {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
opacity: 0;
-webkit-transition: opacity .25s;
-o-transition: opacity .25s;
transition: opacity .25s;
}
.js-quiz.is-active {
opacity: 1;
z-index: 1;
} .btn-clock-label {
position: absolute;
top: -30px;
left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 135px;
padding: 5px 10px; font-weight: 400;
font-size: 12px;
line-height: 1.1;
text-transform: uppercase;
text-align: center;
color: #4b1a7d;
border-radius: 7px;
-webkit-box-shadow: 0 4px 8px 0 #46276f;
box-shadow: 0 4px 8px 0 #46276f;
background: #fff;
-webkit-transform: rotate(-9deg);
-ms-transform: rotate(-9deg);
transform: rotate(-9deg);
z-index: 2;
}
.btn-clock-label::before {
content: "";
position: absolute;
left: 0;
top: 50%;
-webkit-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
display: block;
width: 60px;
height: 60px;
background-repeat: no-repeat;
background-size: cover;
background-position: center center;
-webkit-animation: 5s linear 1s infinite dz;
animation: 5s linear 1s infinite dz;
} @-webkit-keyframes dz {
0%, 100%, 19% {
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
12%, 17%, 2%, 7% {
-webkit-transform: translate(-50%, -50%) rotate(-15deg);
transform: translate(-50%, -50%) rotate(-15deg);
}
10%, 15%, 5% {
-webkit-transform: translate(-50%, -50%) rotate(25deg);
transform: translate(-50%, -50%) rotate(25deg);
}
}
@keyframes dz {
0%, 100%, 19% {
-webkit-transform: translate(-50%, -50%) rotate(0);
transform: translate(-50%, -50%) rotate(0);
}
12%, 17%, 2%, 7% {
-webkit-transform: translate(-50%, -50%) rotate(-15deg);
transform: translate(-50%, -50%) rotate(-15deg);
}
10%, 15%, 5% {
-webkit-transform: translate(-50%, -50%) rotate(25deg);
transform: translate(-50%, -50%) rotate(25deg);
}
} .btn--back {
height: auto;
min-height: auto !important;
padding: 0 !important;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
gap: 10px;
font-weight: 400;
font-size: 14px;
line-height: 1.5;
text-transform: uppercase;
color: #5b5a60;
font-family: inherit;
margin: 0;
border: none;
background: 0 0;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
.quiz__price-wrap-mobile {
display: none;
} @media (min-width: 1600px) {
.quiz .btn--back {
margin-bottom: 33px;
}
}
@media (min-width: 1400px) {
.quiz .btn {
min-height: 58px;
padding: 0 34px;
}
} @media (max-width: 1000px) {
.quiz .form-main__title {
text-align: center;
font-size: 26px;
} .quiz-popup__container { padding-left: 0;
padding-right: 0;
}
.quiz-popup__container--p0 {
padding: 0;
}
.quiz-popup__container--100 {
height: 100%;
} .quiz,
.quiz-2,
.quiz-3 {
position: absolute;
top: 47%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100% - 54px);
max-width: 375px;
height: 516px; box-shadow: 0 4px 21px 0 rgba(63, 61, 61, 0.33);
}
.quiz-2 {
display: none;
height: 405px;
}
.quiz-2--lg {
height: 515px;
} .quiz-3 {
width: calc(100% - 40px);
}
.quiz-3 .quiz__price {
height: 50px;
padding-top: 5px;
padding-bottom: 5px;
align-items: center;
justify-content: center;
gap: 7px;
}
.quiz-3 .quiz__price-block,
.quiz-3 .quiz__price-text {
flex-basis: auto;
}
.quiz-3 .quiz__price-text {
align-self: center;
}
.quiz-3 .quiz__header {
background-color: #f9f8f8;
}
.quiz-3 .quiz__step--items {
padding-top: 81px;
}
.quiz-3 .quiz__subtitle {
margin-left: -15px;
margin-right: -15px;
text-align: center;
background-color: #f9f8f8;
padding: 10px 15px;
}
.quiz-3 .quiz__radio {
min-height: 50px;
padding: 8px 20px;
border: none;
background-color: #f9f8f8;
}
.quiz-3 .quiz__list li:not(:last-child) {
margin-bottom: 10px;
}
.quiz-3 .quiz__list .checkbox {
min-height: 50px;
border-radius: 13px;
background-color: #f9f8f8;
padding: 8px 20px 8px 46px;
}
.quiz-3 .quiz__list .checkbox__box {
background-color: #fff;
}
.quiz-3 .quiz__footer-btn-next {
gap: 10px;
padding-left: 15px;
padding-right: 15px;
font-size: 12px;
min-height: 45px;
}
.quiz-3 .quiz__footer-btn-next svg {
fill: #fff;
}
.quiz-3 .quiz__footer-btn-next.is-disabled svg {
fill: rgba(255, 255, 255, 0.6);
}
.quiz-3 .quiz__polityc .checkbox__text {
font-size: 12px;
color: rgba(91, 90, 96, 0.7);
} .quiz--static,
.quiz-2--static,
.quiz-3--static {
position: relative;
top: 0;
left: 0;
transform: none;
width: 100%;
margin-left: auto;
margin-right: auto;
} .quiz__close {
top: -32px;
right: 0;
}
.quiz__close svg * {
stroke-width: 2px;
} .quiz__header {
position: absolute;
left: 0;
width: 100%;
z-index: 1;
opacity: 0;
top: -100%;
border-top-left-radius: 21px;
border-top-right-radius: 21px;
overflow: hidden;
}
.quiz__header.is-visible {
top: 0;
opacity: 1;
} .quiz__price {
display: flex;
width: 100%;
height: 72px;
padding: 0;
margin: 0;
align-items: center; font-weight: 400;
border-top-left-radius: 21px;
border-top-right-radius: 21px;
position: static;
}
.quiz__price-text {
flex: unset;
align-self: unset;
display: block;
font-size: 14px;
line-height: 150%;
text-transform: uppercase;
color: #fff;
margin-bottom: 0;
text-align: right;
}
.quiz__price-block {
flex: unset;
align-self: unset;
display: flex;
align-items: center;
padding-left: 5px;
justify-content: flex-start;
width: auto;
}
.quiz__price-block2 {
font-size: 40px;
line-height: 38px;
color: #fff;
}
.quiz__price-block3 {
font-size: 30px;
line-height: 1;
color: #fff;
} .quiz__bar {
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
width: calc(100% - 30px);
margin-left: 15px;
margin-top: 15px;
height: 16px;
top: 0px;
left: 0px;
}
.quiz__bar::after {
top: 50%;
left: 8px;
transform: translateY(-50%);
width: calc(100% - 16px);
height: 1px;
}
.quiz__bar-item {
width: 16px;
height: 16px;
}
.quiz__bar-item::after {
width: 6px;
height: 6px;
}
.quiz__bar-item svg {
stroke-width: 3;
}
.quiz__bar-item.is-active {
} .quiz__footer {
left: 0;
justify-content: space-between;
gap: 10px;
width: 100%;
height: 78px;
padding: 0 15px;
bottom: -100%;
z-index: 3;
align-items: center;
}
.quiz__footer.is-visible {
bottom: 0;
z-index: 2;
}
.quiz .quiz__footer-btn {
gap: 5px;
padding: 0;
margin-bottom: 0;
font-size: 12px;
text-transform: uppercase;
}
.quiz__footer-btn.is-hidden {
display: inline-flex !important;
opacity: 0;
pointer-events: none;
}
.quiz__footer-btn-1,
.quiz__footer-btn-2 {
display: none;
align-items: center;
gap: 10px;
}
.quiz__footer-btn-1.is-active,
.quiz__footer-btn-2.is-active {
display: flex;
}
.quiz__img { 
display: none;
}
.quiz__footer-btn-next {
min-height: 58px;
padding: 10px;
font-size: 16px; line-height: 150%;
color: #fff;
border-radius: 13px; background-color: rgb(97 125 136);
margin-bottom: 0;
}
.quiz__footer-btn-next.is-disabled {
background-color: rgba(255, 255, 255, .5);
color: rgba(91, 90, 96, .5);
} .quiz__btn-send {
padding: 7px 12px;
bottom: 80%;
border-radius: 13px 13px 21px 21px;
text-align: left;
z-index: 1;
overflow: hidden;
} .quiz__step {
padding-top: 130px;
}
.quizFormStep {
padding-top: 0;
}
.quizFormStep .quiz__content {
padding-left: 0;
padding-right: 0;
}
.quiz__step--items {
padding: 120px 15px 80px;
}
.quiz__step--items::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 130px;
background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0, rgba(255, 255, 255, 0) 0.01%, rgba(255, 255, 255, 0.81) 30.28%, #fff 100%);
border-bottom-left-radius: 21px;
border-bottom-right-radius: 21px;
z-index: 2;
}
.quiz__step--no-before::before {
display: none;
}
.quiz__step--before .simplebar-content {
padding-bottom: 40px !important;
}
.quiz__step--layout-circle-bot::after {
content: "";
position: absolute;
bottom: -70px;
right: -38%;
width: 231px;
height: 231px;
border-radius: 50%;
background-color: #fbf5f6;
}
.quiz__step--layout-circle-top::after {
content: "";
position: absolute;
top: -50px;
left: -116px;
width: 231px;
height: 231px;
border-radius: 50%;
background-color: #fbf5f6;
} .quiz__full-photo {
width: 100%;
height: 173px;
border-top-left-radius: 21px;
border-top-right-radius: 21px;
overflow: hidden;
flex: none;
padding-left: 0;
background-image: url(//bmmedia.ru/wp-content/uploads/2025/09/akcii1.jpeg)!important;
}
.quiz__full-content {
height: calc(100% - 173px);
padding: 20px 20px 15px;
border-bottom-left-radius: 21px;
border-bottom-right-radius: 21px;
flex: none;
}
.quiz__step--ba .quiz__full-content {
height: auto;
}
.quiz__step--ba .quiz__full-content-text {
flex-grow: 0;
}
.quiz__full-photo--ba {
width: 100%;
height: auto;
display: block;
}
.quiz__full-photo-container::before {
padding-top: 69%;
}
.quiz__full-photo-container .info-slider,
.quiz__full-photo-container .result-slider,
.quiz__full-photo-container .step-slider {
border-radius: 0;
}
.quiz__full-photo-container .info-slider__slider {
border-radius: 0;
}
.quiz__full-photo-container .info-slider__item {
border-radius: 0;
}
.quiz__full-content--text {
height: 100%;
padding-top: 40px;
}
.quiz__full-content--text-p100 {
padding-top: 100px;
height: 100%;
}
.quiz__full-content-inner {
display: flex;
flex-direction: column;
height: 100%;
}
.quiz__full-content-text {
flex-grow: 1;
}
.quiz__full-content-text--center {
display: flex;
flex-direction: column;
justify-content: center;
} .quiz__content {
height: 100%;
max-width: none;
margin-left: 0;
padding-left: 15px;
padding-right: 15px;
}
.quiz__content-box {
height: 100%;
padding-right: 8px;
} .quiz__title { font-size: 20px;
line-height: 1.5;
} .quiz__subtitle {
margin-bottom: 15px; font-size: 16px;
line-height: 1.5;
} .quiz__text {
margin-top: 10px;
font-size: 14px;
}
.quiz__text--num {
display: flex;
align-items: flex-start;
gap: 10px;
line-height: 1.2;
padding-bottom: 20px;
}
.quiz__text-num {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
width: 25px;
height: 25px;
font-weight: 400;
font-size: 16px;
line-height: 1;
color: #fff;
border-radius: 50%;
background-color: #7cbfc2;
}
.quiz__text--md { margin-bottom: 20px;
font-size: 12px;
line-height: 1.5;
}
.quiz__text-sub {
margin-bottom: 15px;
font-size: 14px;
}
.quiz__text-sub2 {
font-size: 14px;
}
.quiz__text-footer .quiz__btn {
margin-top: 0;
}
.quiz__btn {
margin-top: 10px;
} .quiz__radio {
min-height: 41px;
padding: 7px 10px;
font-size: 14px;
}
.quiz__radio:not(:first-child) {
margin-top: 10px;
}
.quiz__radio.is-active {
}
.quiz__radio:hover {
} .quiz__list {
display: block;
}
.quiz__list li:not(:last-child) {
margin-bottom: 15px;
}
.quiz__list-mark li {
padding-left: 28px;
font-size: 14px;
}
.quiz__list-mark li span {
display: block;
}
.quiz__list-mark li::after {
top: 50%;
left: 5px;
transform: translateY(-50%);
width: 18px;
height: 12px;
background-size: contain;
}
.quiz__list-mark li + li {
margin-top: 14px;
} .quiz__polityc {
font-size: 12px;
}
.quiz__polityc .checkbox {
padding-left: 35px;
}
.quiz__polityc .checkbox__box {
margin-left: -35px;
} .quiz .input-group input,
.quiz-2 .input-group input,
.quiz-3 .input-group input {
height: 40px;
padding-top: 5px;
padding-bottom: 5px;
} .js-quiz {
border-radius: 21px;
overflow: hidden;
display: block;
} .quiz__before-price {
color: #fff;
font-size: 14px;
line-height: 150%;
text-transform: uppercase;
color: #fff;
padding-right: 5px;
}
.quiz__footer-btn-next svg {
display: none;
}
.quiz__price--2::after {
display: none;
}
.quiz__price--2::after {
display: none;
}
.quiz__price-wrap-desktop {
display: none;
}
.quiz__price-wrap-mobile {
display: flex; background: #617d88;
justify-content: flex-start;
height: 78px;
justify-content: center;
align-items: center;
}
.quiz__footer-btn-next::after {
display: none;
}
.quiz__footer-btn-next:hover {
background-color: #495f68;
color: #fff;
}
.quiz__content {
overflow-y: auto;
}
}
@media (max-width: 540px) {
.calls {
left: 10px;
bottom: 10px;
right: unset;
width: calc(53% - 15px);
height: 70px;
padding: 5px 5px;
}
.calls__inner {
gap: 15px;
width: 100%;
justify-content: space-between;
max-width: 180px;
}
.calls .icon {
width: 33px;
height: 33px;
}
.calls__item-text {
font-size: 13px;
}
.calls__item-icon svg {
width: 15px;
height: 15px;
}
.quiz-btn-fix {
right: 10px;
left: unset;
width: calc(47% - 15px); border-radius: 10px;
border: 0;
height: 70px;
bottom: 10px;
}
.quiz-btn-fix__label {
display: none;
}
.quiz-btn-fix__wrap {
padding: 0;
}
.quiz-btn-fix__pirce {
font-size: 18px;
}   
.quiz__footer-btn-next {
font-size: 13px;
min-width: 171px;
min-height: 44px;
}
}