html {
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
*,
*::after,
*::before {
-webkit-box-sizing: inherit;
box-sizing: inherit;
}
body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
ol,
li,
figure,
figcaption,
blockquote,
dl,
dd {
margin: 0;
padding: 0;
}
ul {
list-style: none;
}
img {
max-width: 100%;
display: block;
}
input,
button,
textarea,
select {
font: inherit;
border: none;
background-color: transparent;
}
a {
text-decoration: none;
color: inherit;
}
button {
cursor: pointer;
}
html,
body {
height: 100%;
}
a {
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
/* .quiz_container {
max-width: 1310px;
margin: 0 auto;
padding: 0 10px;
} */
.quiz-description ul {
padding: 0 10px;
}
.quiz-result-desc ul {
padding-left: 25px;
}
.quiz {
background-color: #f3f3f3;
padding-bottom: 72px;
}
.quiz__title-banner {
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;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
padding: 100px 0;
margin-bottom: 50px;
}
.quiz__title-img {
position: absolute;
height: 325px;
width: 100%;
}
.quiz__title-img img {
height: 100%;
width: 100%;
object-fit: cover;
}
.quiz__title-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: distribute;
justify-content: flex-start;
-webkit-box-align: center;
-ms-flex-align: center;
padding: 0 20px;
align-items: center;
position: inherit;
z-index: 1;
}
.quiz__title {
font-size: 30px;
font-weight: 600;
color: #000;
line-height: 1.2;
}
.quiz-result-desc ul {
list-style: inherit;
}
.title-result {
text-transform: uppercase;
}
.quiz__img {
width: 215px;
margin-left: 100px;
}
.quiz__wrap {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
.quiz__list-category {
width: 35%;
padding: 0;
}
.quiz__item {
background-color: #fff;
padding: 30px 34px;
text-transform: uppercase;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.quiz__item:not(:last-child) {
border-bottom: 1px solid #ddd;
}
.quiz__item-title {
padding-left: 100px;
font-size: 39px;
font-weight: bold;
line-height: 1.2;
color: #ddd;
position: relative;
}
.quiz__item-title::before {
content: "";
position: absolute;
top: 50%;
-webkit-transform: translateY(-50%);
-ms-transform: translateY(-50%);
transform: translateY(-50%);
left: 0;
background-image: url("../images/icons/Halochka_sira.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 34px;
height: 34px;
}
.quiz__item-title-text {
font-weight: 600;
font-size: 18px;
line-height: 1.2;
color: rgb(171, 171, 171);
margin-left: 60px;
}
.quiz_container .quiz__content-list {
background-color: #fff;
padding: 36px 0 46px;
width: 100%;
}
.quiz__content-item {
padding-left: 36px;
padding-right: 36px;
}
.quiz__content-title-step {
font-size: 18px;
line-height: 1.2;
color: #000;
font-weight: 600;
margin-bottom: 26px;
}
.quiz__content-text {
font-size: 14px;
color: #000;
line-height: 1.714;
margin-bottom: 24px;
position: relative;
height: 100px;
overflow: hidden;
}
.quiz__content-text::before {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
background: -webkit-gradient(linear, left bottom, left top, from(rgb(245, 245, 245)), color-stop(0%, rgb(255, 255, 255)), to(rgba(255, 255, 255, 0)));
background: -o-linear-gradient(bottom, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
background: linear-gradient(0deg, rgb(245, 245, 245) 0%, rgb(255, 255, 255) 0%, rgba(255, 255, 255, 0) 100%);
width: 100%;
height: 100px;
}
.quiz__content-btn-arrow {
font-size: 16px;
color: #f89e1c;
line-height: 1.2;
padding-right: 24px;
position: relative;
margin-bottom: 48px;
}
.quiz__content-btn-arrow::before {
content: "";
position: absolute;
top: 50%;
right: 0;
-webkit-transform: rotate(-90deg) translateX(35%);
-ms-transform: rotate(-90deg) translateX(35%);
transform: rotate(-90deg) translateX(35%);
background-image: url("../images/icons/arrow-orange.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 14px;
height: 10px;
}
.active::before {
-webkit-transform: rotate(90deg) translateX(-20%);
-ms-transform: rotate(90deg) translateX(-20%);
transform: rotate(90deg) translateX(-20%);
}
.quiz__content-title {
font-size: 18px;
color: #000;
line-height: 1.2;
font-weight: 500;
margin-bottom: 20px;
}
.quiz__content-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
margin-bottom: 26px;
}
.quiz__content-box {
width: 25%;
margin-bottom: 20px;
}
.quiz__content-label {
cursor: pointer;
position: relative;
}
.quiz__content-label-img {
border: 2px solid #eee;
margin-bottom: 10px;
}
.quiz__content-input-inner {
position: relative;
}
.quiz__content-input {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip: rect(0 0 0 0);
}
.quiz__content-input-change {
position: absolute;
top: 0;
left: 0;
background-image: url("../images/input.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 14px;
height: 14px;
}
.quiz__content-input:checked + .quiz__content-input-change {
background-image: url("../images/inpuy-active.svg");
}
.quiz__content-input-text {
position: relative;
padding-left: 20px;
color: #000;
display: block;
width: 75%;
font-size: 14px;
font-weight: 400;
line-height: 1.2;
}
.quiz__content-inner-btn {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
}
.quiz__content-btn {
padding: 16px 68px;
border: 2px solid #f89e1c;
background-color: #fff;
color: #f89e1c;
font-size: 16px;
line-height: 1.2;
font-weight: 500;
text-align: center;
}
.quiz__content-btn:last-child {
background-color: #f89e1c;
color: #fff;
}
.quiz__content-size-border {
padding: 28px 20px;
border: 1px solid #ddd;
margin-bottom: 26px;
width: 355px;
}
.quiz__content-size-list {
overflow-y: scroll;
-webkit-overflow-y: scroll;
height: 360px;
-webkit-overflow-scrolling: touch;
-ms-overflow-style: -ms-autohiding-scrollbar;
}
.quiz__content-size-list::-webkit-scrollbar {
width: 5px;
margin-left: 5px;
}
.quiz__content-size-list::-webkit-scrollbar-track {
background-color: #C2C2C2;
}
.quiz__content-size-list::-webkit-scrollbar-thumb {
border-radius: 20px;
border: 3px solid #626262;
}
.quiz__content-size-list::-webkit-scrollbar-thumb:vertical {
width: 5px;
}
.quiz__content-size-list::-webkit-scrollbar-thumb:horizontal {
width: 5px;
}
.quiz__content-size-item:not(:last-child) {
margin-bottom: 15px;
}
.quiz__content-size-label {
position: relative;
cursor: pointer;
}
.quiz__content-size-input {
margin: 0;
width: 0;
height: 0;
position: absolute;
}
.quiz__content-size-list:first-child .quiz__content-input-change {
position: absolute;
top: 0;
left: 0;
background-image: url("../images/chek-white.svg");
background-repeat: no-repeat;
background-position: center;
background-size: cover;
width: 14px;
height: 14px;
}
.quiz__content-size-list:first-child .quiz__content-size-input:checked + .quiz__content-input-change {
background-image: url("../images/chek-active.svg");
}
.quiz__content-size-text {
padding-left: 20px;
}
.quiz__content-item-first, .quiz__content-item-two, .quiz__content-item-three, .quiz__content-item-four {
display: none;
}
#answers .rangeSlider {
width: 300px;
width: 100%;
margin-bottom: 36px;
}
#answers .rangeSlider label {
margin-right: 12px;
}
#answers .rangeSlider input[type="text"] {
-webkit-transition: all 0.2s ease-in-out;
-o-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
background-color: #ffffff;
border: 1px solid #e7e8ea;
border-radius: 4px;
color: #888888;
height: 26px;
width: 58px;
}
.irs {
position: relative;
display: block;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
font-size: 12px;
}
.irs--flat .irs-from, .irs--flat .irs-to, .irs--flat .irs-single {
display: none;
}
.irs--flat {
height: 54px !important;
background: url(/bitrix/templates/dresscode/images/uiBg.png) 3px 0 repeat-x transparent;
margin-top: 24px;
position: relative;
max-width: 300px;
width: 100%;
}
.irs--flat .irs-line {
background: url(/bitrix/templates/dresscode/images/handler.png) 0 0 repeat-x transparent;
height: 14px !important;
background-color: transparent !important;
}
.irs--flat .irs-min, .irs--flat .irs-max {
display: none;
}
.irs--flat .irs-bar {
height: 14px !important;
background: url(/bitrix/templates/dresscode/images/handlerActive.png) 0 0 no-repeat transparent;
background-color: transparent !important;
}
.irs--flat .irs-handle {
background: url(/bitrix/templates/dresscode/images/motionButton.png) 0 0 no-repeat transparent;
cursor: pointer;
height: 29px !important;
width: 29px !important;
z-index: 10;
top: 17px !important;
}
.irs--flat .irs-handle i {
display: none !important;
}
.orange {
background-color: #f89e1c;
color: #fff;
position: relative;
}
.orange::after {
content: "";
position: absolute;
top: 45%;
right: -9px;
background-color: #f89e1c;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
width: 20px;
height: 20px;
}
.change {
color: #fff;
}
.change::before {
background-image: url("../images/icons/Halochka_napiv-pomaranch.svg");
}
.show {
height: 100%;
overflow: visible;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.show::before {
width: 0;
height: 0;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.filled {
background-color: #fff;
color: #f89e1c;
}
.filled__change {
color: #f89e1c;
}
.filled__change::before {
background-image: url("../images/icons/Halochka_pomaranch.svg");
}
.show__content {
display: block;
}
.selected {
border: 2px solid #f89e1c;
}
.change-color {
color: #000;
}
.quiz__btn_repeat {
font-weight: 400;
background-color: #f89e1c;
color: #fff;
padding: 10px 20px;
margin-bottom: 20px;
display: inline-block;
}
.btn-inner {
display: flex;
justify-content: space-between;
}
@media (max-width: 1200px) {
.quiz__title-inner {
background-size: inherit;
}
.quiz__list-category {
width: 33%;
}
.quiz__item-title {
padding-left: 80px;
font-size: 30px;
}
.quiz__item-title-text {
font-size: 16px;
margin-left: 45px;
}
.quiz__content-box {
width: 35%;
}
}
@media (max-width: 992px) {
.quiz__wrap {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.quiz__list-category {
width: 104%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
}
.quiz__item {
width: 40%;
border-bottom: 1px solid #ddd;
}
.quiz__item:nth-child(1) {
border-right: 1px solid #ddd;
}
.quiz__item:nth-child(3) {
border-right: 1px solid #ddd;
}
.orange::after {
width: 0;
height: 0;
}
.quiz__item-title-two {
margin-top: 15px;
}
}
@media (max-width: 768px) {
.quiz__title {
font-size: 18px;
}
.quiz__item {
width: 37%;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.quiz__item-title {
margin-bottom: 10px;
}
.quiz__item-title-two {
margin-top: 0;
}
.quiz__item-title-text {
text-align: center;
margin-left: 0;
}
}
@media (max-width: 576px) {
.quiz {
padding-top: 0;
}
.quiz__title-banner {
padding: 75px 0;
margin-bottom: 20px;
}
.quiz__title-img {
height: 210px;
}
.quiz__wrap {
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.quiz__list-category {
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 100.5%;
}
.quiz__title-inner {
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
}
.quiz__title {
margin-bottom: 18px;
width: 65%;
margin-left: -110px;
}
.title-result {
padding-left: 10px;
margin-left: 0;
}
.quiz__img {
width: 150px;
margin-left: 0;
}
.quiz__item {
width: 39%;
padding: 15px 15px;
}
.quiz__item-title-text {
font-size: 13px;
font-weight: 500;
}
.quiz__item-title {
padding-left: 45px;
font-size: 25px;
}
.quiz__item-title::before {
width: 30px;
height: 30px;
}
/*.btn-inner {*/
/* padding: 0 10px;*/
/*}*/
.quiz__content-list {
padding: 30px 10px 35px 10px;
width: 89%;
}
.quiz__content-box {
width: 48%;
margin-right: 5px;
}
.quiz__content-btn {
padding: 15px 0;
border-radius: 5px;
width: 48%;
font-size: 13px;
}
.quiz__content-item {
padding-right: 10px;
padding-left: 10px;
}
.quiz__content-size-border {
width: 250px;
padding: 20px 10px;
}
}
@media (max-width: 360px) {
.quiz__list-category {
width: 99%;
}
.quiz__content-list {
width: 89.4%;
}
}
.total-description-block img {
display: inline-block;
}
.sc-chat-window--bar {
bottom: 0px!important;
}
.toggle-button {
border-radius: 100px!important;
width: 36px!important;
height: 53px!important;
margin-bottom: 20px;
}
.toggle-button__icon {
margin-right: 10px;
position: absolute;
}