.header .container {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    padding-top: 16px;
    padding-bottom: 0;
}

.header .container > * + * {
    margin-top: 24px;
}

.header .logo-list {
    align-items: center;
}

.header .logo-list img {
    max-height: 64px;
    max-width: 240px;
}

.header .logo-list .logo-first {
    position: relative;
    top: -4px;
}


.footer .row-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.category-title {
    text-transform: uppercase;
    margin-bottom: 8px;
    font-weight: 500;
    color: #888;
    margin-top: -12px;
}

.footer .row-box .right-col {
    min-width: 28%;
    display: flex;
    justify-content: flex-end;
}

.footer .row-box + .row-box {
    align-items: flex-start;
}

.soc-list {
    margin: -8px;
}

.soc-list > * {
    margin: 8px;
    width: 24px;
}


.form-box {
    margin: 0 -8px;
}

.form-box .form-item {
    padding: 8px;
}

.form-box .input {
    position: relative;
}

.input.input-pl input {
    padding-top: 4px;
}

.form-box .input .placeholder {
    position: absolute;
    top: 12px;
    left: 24px;
    color: #b1adbf;
    font-size: 16px;
    transition: all .5s;
    opacity: 1;
    pointer-events: none;
    font-weight: 500;
}

.input input:focus + .placeholder,
.input input:hover + .placeholder,
.input input.notempty + .placeholder {
    font-size: 12px;
    top: 2px;
    opacity: .7;
}

.input input:focus + .placeholder, .input input:hover + .placeholder {
    color: #5F3DF0;
}

.input input.error {
    background-color: #FCE5E2;
}

.input input.error + .placeholder {
    color: red;
}


/*-------------------------------------------------------------------------------*/


.select input {
    position: absolute !important;
    left: -9999px !important;
}

.selectize-dropdown, .selectize-input, .selectize-input input {
    color: #303030;
    font-family: 'Museo Sans', sans-serif;
    font-size: 16px;
    line-height: 1.2;
    font-weight: 500;
}


.selectize-control.single .selectize-input:after {
    content: ' ';
    display: block;
    position: absolute;
    top: 50%;
    right: 18px;
    margin-top: -4px !important;
    width: 16px;
    height: 10px;
    border: none !important;
    background-image: url(../images/arrows-select.svg);
}


.selectize-dropdown [data-selectable].option {
    cursor: pointer;
}


.selectize-input {
    border: none !important;
    height: 48px;
    background-color: #F0EFF4 !important;
    box-shadow: none !important;
    border-radius: 24px !important;
    padding: 0 24px;
    display: flex !important;
    align-items: center;
}

.selectize-dropdown .option, .selectize-dropdown .optgroup-header {
    padding: 12px;
}


.selectize-dropdown-content {
    max-height: 329px;
}

.selectize-control.single .selectize-input, .selectize-control.single .selectize-input input {
    padding-right: 40px;
    min-width: 240px;
}

.selectize-dropdown {
    border: none !important;
    box-shadow: 0px 4px 8px rgba(177, 173, 191, 0.8);
    border-radius: 24px;
    display: block !important;
    overflow: hidden;
    top: 58px !important;
    transform: translateX(-9999px);
    opacity: 0;
    transition: opacity .5s;
}

.input-active + .selectize-dropdown {
    transform: translateX(0px);
    opacity: 1;
}

.selectize-dropdown .option, .selectize-dropdown .optgroup-header {
    padding: 14px 24px;
    animation: background-color .5s;
}

.selectize-dropdown .option.active {
    background-color: #E7E2FD;
}


/*------------------------------------------------------------------------------------*/


.radio-list {
    margin: 0 -10px;
}

.radio-list > * {
    margin: 10px;
}


/*-----------------------------*/

.footer {
}


.checkbox-list {
    margin: 0 -10px;
}

.checkbox-list > * {
    margin: 10px;
}

.accordion-box-01 {
    background-color: #fff;
    border-radius: 16px;

}

.accordion-box-01 .title-box {
    padding: 12px 32px;
    line-height: 1.2;
    font-size: 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    transition: all .3s;
}

.accordion-box-01 .title-box.active, .accordion-box-01 .title-box:hover {
    color: #ED5640;
}

.accordion-box-01 .title-box .arrow {
    transition: transform .5s;
    transform: rotate(0deg);
}

.accordion-box-01 .title-box.active .arrow {
    transform: rotate(180deg);
}

.accordion-box-01 .open-box {
    padding: 32px;
    padding-top: 12px;
}


.open-box {
    display: none;
}

.open-box.open {
    display: block;
}

.open-box .open-box {
    padding: 0;
}

.accordion-box-01 .info-box.type1 {
    display: flex;
    flex-flow: row;
}

.accordion-box-01 .info-box.type1 .ico {
    min-width: 120px;
    padding-right: 24px;
}

.accordion-box-01 .info-box.type2 .word {
    padding-left: 120px;
    padding-top: 16px;
}

.accordion-boxes-list .accordion-box-01 + .accordion-box-01 {
    margin-top: 16px;
}


.icotext {
    display: inline-flex;
    align-items: center;
    margin: 0 -3px;
}

.icotext > * {
    margin: 0 3px;
}

.icotext .text.fz14 {
    padding-top: 2px;
}


.icotext.grey svg path {
    fill: #888 !important;
    transition: fill .3s;
}

.icotext.grey:hover svg path {
    fill: #009de6 !important;
}


.start-box .btn {
    margin-top: 24px;
}

.info-box .photo-box + .answers-list {
    margin-top: 32px;
}

.info-box .answers-list {
    /*margin-bottom: 8px !important;*/
}

.photo-box {
    overflow: hidden;
    border-radius: 8px;
}

.icotext.link-retry span {
    padding-top: 2px;
}


.whitebox {
    background-color: #fff;
    border-radius: 12px;
    position: relative;
    font-weight: 400;
    padding: 40px;
    overflow: hidden;
    table-layout: fixed;
    display: block;
}

.soc-box,
.sn_buttons {
    justify-content: center;
}

.soc-box img, .soc-box svg {
    width: 32px;
}

.soc-box a {
    opacity: .7;
    transition: all .2s;
    cursor: pointer;
}

.soc-box a:hover {
    opacity: 1;
}

.soc-box .soc-vk {
    margin-right: 8px;
}


.start-box > .info-box > * {
    margin-top: 24px;
    margin-bottom: 24px;
}


.whitebox .word {
    text-align: left;
}


.hr-line {
    margin: 28px auto;
    height: 4px;
    width: 80px;
    background-color: #ff9b00;
    border-radius: 2px;
}

.menu {
    justify-content: center;
    margin-bottom: 8px;
}

.menu > * {
    padding: 4px 12px;
}


.test-num {
    margin-bottom: 16px;
    font-weight: 500;
    color: #888;
    margin-top: -12px;
}

.answers-list {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 10px;
}

#answers-list .answer-item {
    position: relative;
    width: 100%;
}

@media (max-width: 767px) {
    #answers-list .answer-item {
        margin-bottom: 8px;
    }

    #answers-list .answer-item:last-child {
        margin-bottom: 0;
    }
}

#answers-list .answer {
    position: relative;
}

@media (max-width: 767px) {
    #answers-list .answer {
        width: 100%;
    }
}

#answers-list .answer label:after {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 100ms linear;
    cursor: pointer;
    box-sizing: border-box;
}

@media (min-width: 768px) {
    #answers-list .answer label:hover:after {
        border-radius: 10px;
        background-color: rgba(0, 0, 0, 0.33);
    }
}

.answer-item.answer-ambiguity .answer label:after {
    height: 300px;
    border: 4px solid #ffd41e;
    border-radius: 10px;
}

#answers-list .answer .word {
    display: block;
    padding-right: 40px;
}

#answers-list.answer-completed .answer {
    pointer-events: none;
    color: #ccc;
}

#answers-list .answer-true {
    z-index: 4;
}

#answers-list .answer-true label {
    border: 1px solid #7ee698;
    color: #096a21;
    background-color: #aaf2bd;
}

#answers-list .answer.answer-true label:before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: #3fcc62 url(../images/ico-check.svg) no-repeat 50% 50%;
    background-size: 16px auto;
}

#answers-list .answer .description {
    font-size: 14px;
    margin-top: 6px;
    color: #353535;
    line-height: 1.4;
}

#answers-list .answer-false {
    z-index: 3;
}

#answers-list .answer-false label {
    border: 1px solid #f5bab4;
    color: #e74c3c;
    background-color: #ffddd9;
}

#answers-list .answer.answer-false label:before {
    content: '';
    display: block;
    position: absolute;
    top: 8px;
    right: 8px;
    width: 32px;
    height: 32px;
    border-radius: 16px;
    background: #e74c3c url(../images/ico-false.svg) no-repeat 50% 50%;
    background-size: 16px auto;
}

#answers-list .answer label:before {
    display: none !important;
}

#answers-list .answer-ambiguity {
    z-index: 3;
}

#answers-list .answer-ambiguity label {
    color: #c28300;
    background-color: #fff2bb;
}

.result-num {
    margin-top: 16px;
    line-height: 1.1;
}

.result-num .num {
    background-color: #3fcc62;
    color: #fff;
    padding: 0 8px;
    min-width: 48px;
    height: 48px;
    border-radius: 24px;
    font-size: 24px;
    margin-bottom: 4px;
}

.result-num .text {
    width: 100%;
    text-align: center;
}

.result-share {
    /*margin-top: 24px;*/
}

.result-share .soc-box path {
    fill: #01abfb;
    transition: all .2s;
}

.result-share .soc-box a:hover path {
    fill: #009de6;
}

.result-share .soc-box svg {
    width: 48px;
}

.result-share .soc-box a {
    opacity: 1;
}

.result-share .soc-box a:hover {
    opacity: 1;
}


.image-bg-text {
    position: relative;
    padding: 32px;
    border-radius: 8px;
    overflow: hidden;
    min-height: 320px;
    background-position: center;
    background-size: cover;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.image-bg-text:not(.result-text-box):before {
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: #000;
    opacity: .4;
}

.result-text-box .info-box {
    margin-top: 20px;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
}

.image-bg-text .info-box {
    position: relative;
}

.image-bg-text + .info-box {
    margin-top: 24px;
}

.whitebox .image-bg-text .word {
    text-align: center;
}

.image-bg-text .head-box {
    position: relative;
}

.image-bg-text .head-box p {
    margin: 0;
    font-size: 16px;
}

.image-bg-text.result-text-box {
    min-height: 0;
    padding: 0;
}

.result-title .num-box {
    padding-left: 32px;
}

.result-title .num-box span {
    font-size: 24px;
    padding: 4px 12px;
    border: 2px solid #333;
    border-radius: 4px;
    font-weight: 500;
}

.result-num-box {
    font-size: 56px;
    font-weight: 700;
}

.start-box .bottom-box {
    margin-top: 32px;
    margin-bottom: 32px;
}

.start-box .bottom-box > * {
    margin-top: 16px;
    margin-bottom: 8px;
}

.promo-plate {
    padding: 28px 0;
    background-color: #f1f1f1;
    margin: -40px;
    margin-top: 24px;
}

.promo-plate .head-box {
    margin-bottom: 16px;
}

.promo-slider-products {
    margin: 0 -12px;
}

.promo-slider-products .slide {
    padding: 12px;
}

.promo-slider-products .slide-box {
    display: block;
    overflow: hidden;
    border-radius: 4px;
    background-color: #fff;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.promo-slider-products {
    margin: 0;
}

.promo-slider-products .slick-track {
    position: relative;
    left: 28px;
}

.promo-slider-products .slick-slide {
    width: 320px;
}

.promo-slider-products .promo-bottom-box {
    padding: 12px;
    justify-content: space-between;
    align-items: flex-start;
}

.btn.small {
    min-height: 28px;
    padding: 0 16px;
    border-radius: 4px;
    color: #fff !important;
    font-size: 10px;
}

.promo-slider-products .btn {
    margin-top: 0;
}

.promo-slider-products .slide .title-box {
    font-size: 12px;
    font-weight: 500;
    padding-right: 12px;
    line-height: 1.2;
    height: 42px;
    overflow: hidden;
}

.promo-slider-products a:not(.btn) {
    color: #212121;
}

.promo-slider-products .photo-box {
    border-radius: 0;
}

.slick-arrow {
    position: absolute;
    top: calc(50% - 32px);
    cursor: pointer;
    background: url("../images/ico-arrow.svg") no-repeat center;
    width: 24px;
    height: 36px;
    background-size: auto 20px;
    margin-top: -18px;
    opacity: 1;
    transition: opacity .5s;
    z-index: 3;
}

.slick-arrow.slick-disabled {
    display: none !important;
}

.slick-prev {
    left: -20px;
    transform: rotate(180deg);
    border-radius: 4px 0 0 4px;
}

.slick-next {
    right: -20px;
}

.slick-arrow:hover {
    opacity: 1;
}


.result-box .result-title {
    margin-bottom: 16px;
    margin-top: 4px;
}

.banner-box {
    margin: 32px 0;
}

.banner-box .banner--adaptive {
    display: none;
}

/*
    Hide desktop banner for mobile resolution,
    which is 639px
*/
@media screen and (max-width: 639px) {
    .banner-box .banner--desktop {
        display: none;
    }

    .banner-box .banner--adaptive {
        display: block;
    }
}


.promo-slider-products .slide-box .photo-box img {
    transform: scale(1);
    transition: all .6s;
}

.promo-slider-products .slide-box:hover .photo-box img {
    transform: scale(1.2);
}

a.grey {
    color: #888;
}

a.grey:hover {
    color: #009de6;
}

.word > * {
    margin: 12px 0;
}


.start-box > .info-box .test-photo-box > * {
    margin-top: 16px;
    margin-bottom: 16px;
}

.share-link-input-container {
    position: relative;
    width: 300px;
    display: inline-block;
    margin: 8px 0 16px 0;
    cursor: pointer;
}

@media (max-width: 768px) {
    .share-link-input-container {
        width: 100%;
    }
}

.share-link-input {
    display: inline-block;
    border-radius: 4px;
    border: solid 1px #e8e8e8;
    background-color: #ffffff;
    font-size: 12px;
    font-weight: normal;
    height: auto;
    padding: 12px;
    cursor: pointer;
}

.share-link-icon-container {
    position: absolute;
    right: 10px;
    top: 8px;
}

.share-link-input-container .gradient {
    position: absolute;
    right: 12px;
    top: 12px;
    bottom: 12px;
    width: 36px;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,1) 33%, rgba(255,255,255,1) 100%);
}

.image-container {
    position: relative;
    height: 300px;
}

.image {
    width: 100%;
    height: 300px;
    object-fit: cover;
    border-radius: 10px;
}

.swiper-pagination-bullet-active {
    background-color: #7a7a7a !important;
}