.circle::after,
.feedback__date {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal
}

.arrow-back svg,
.feedback__info,
.star,
img {
    vertical-align: middle
}

.button,
.feedback__info,
.main__down-text,
.slide__button {
    text-transform: uppercase
}

.button,
.pulse,
.range__slider,
.slide__button {
    cursor: pointer
}

.feedback__info,
.star-quiz_span-title span {
    white-space: nowrap
}

 :root {
    --white-color: #ffffff;
    --h1-font-size: 1.5rem
}

body {
    background-color: #e8e6ed;
    font-size: 16px;
    width: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif
}

.container {
    height: 100vh;
    margin-inline: 1.5rem;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center
}

.range,
.range__content {
    display: -ms-grid;
    width: 100%;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center
}

.range {
    height: 55px;
    display: grid
}

.range__content {
    position: relative;
    display: grid;
    height: 35px;
    background-color: #f3f3f3;
    border-radius: 20px;
    padding: 0 15px;
    -webkit-box-shadow: inset 0 0 2px rgba(0, 0, 0, .1);
    box-shadow: inset 0 0 2px rgba(0, 0, 0, .1)
}

.range__slider {
    width: 100%;
    height: 10px;
    background-color: #a8b7bd;
    overflow: hidden;
    border-radius: 10px
}

.range__thumb,
.range__value {
    border-radius: 50%;
    position: absolute
}

.range__slider-line {
    height: 100%;
    background: #0cade3;
    width: 0
}

.range__thumb,
.range__value,
.range__value__show {
    background-color: #047094
}

.range__thumb {
    height: 30px;
    width: 30px;
    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, .5);
    box-shadow: 0 0 4px 0 rgba(0, 0, 0, .5)
}

.range__hint {
    font-size: 16px;
    position: absolute;
    right: 15px;
    bottom: -18px
}

.range__value {
    font: 700 17px Arial, Helvetica, sans-serif;
    width: 33px;
    height: 33px;
    top: -1px;
    left: -2px;
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
    transform: rotate(-45deg);
    -webkit-transition: .25s ease-in-out;
    -o-transition: .25s ease-in-out;
    transition: .25s ease-in-out;
    display: -ms-grid;
    display: grid;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    justify-items: center
}

.range__value__show {
    font: 700 25px Arial, Helvetica, sans-serif;
    top: -60px;
    left: -10px;
    width: 50px;
    height: 50px;
    border-radius: 2rem 2rem 2rem .25rem
}

.range__value-number {
    -webkit-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    color: var(--white-color)
}

.range__input {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    height: 16px;
    position: absolute;
    opacity: 0;
    top: 9px
}

.range__input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 32px;
    height: 32px
}

.range__input::-webkit-slider-thumb:hover {
    cursor: pointer
}

.slide__content {
    background: #fff;
    border-width: 1px;
    border-radius: .5rem;
    padding: 10px;
    text-align: center
}

.steps-counter__line {
    overflow: hidden;
    position: relative;
    background: #edf2f7;
    height: .75rem
}

.line {
    height: 100%;
    -webkit-transition-property: background-color, border-color, color, fill, stroke, opacity, -webkit-box-shadow, -webkit-transform;
    -o-transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
    transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform, -webkit-box-shadow, -webkit-transform;
    -webkit-transition-duration: .3s;
    -o-transition-duration: .3s;
    transition-duration: .3s;
    background-color: #019935
}

.feedback_top,
.steps-counter__info {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between
}

.arrow-back,
.steps-count {
    padding-top: .5rem;
    padding-bottom: .5rem
}

.arrow-back__btn {
    background-color: #fff;
    border: none;
    cursor: pointer
}

.arrow-back svg {
    width: 1.5rem;
    height: 1.5rem;
    display: inline-block;
    line-height: 1em;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: currentcolor
}

.steps-count {
    font-size: 15px;
    font-weight: 700
}

.slide__title {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', sans-serif;
    font-weight: 500;
    font-size: 26px;
    line-height: 1.3;
    margin-bottom: 10px
}

@media screen and (min-width:600px) {
    .slide__title {
        font-size: 28px;
        line-height: 1.3
    }
}

@media screen and (max-width:400px) {
    .slide__title {
        font-size: 24px;
        line-height: 1.3
    }
}

.slide__text {
    font-size: 18px;
    margin-bottom: 10px
}

.range-indicator {
    position: absolute;
    width: 30px;
    bottom: -35px;
    left: 47%;
    -webkit-transition: .4s ease-in-out;
    -o-transition: .4s ease-in-out;
    transition: .4s ease-in-out;
    -webkit-animation: 2s infinite leftToRight;
    animation: 2s infinite leftToRight
}

@-webkit-keyframes leftToRight {
    0%,
    to {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    50% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
}

@keyframes leftToRight {
    0%,
    to {
        -webkit-transform: translate3d(5px, 0, 0);
        transform: translate3d(5px, 0, 0)
    }
    50% {
        -webkit-transform: translate3d(-5px, 0, 0);
        transform: translate3d(-5px, 0, 0)
    }
}

.reviews_align,
.selector-image {
    margin: 0 auto
}

.selector-image img {
    width: 100%;
    max-width: 200px;
    margin: 0 auto
}

.slide__button {
    display: block;
    font: 700 20px/1.2 Arial, Helvetica, sans-serif;
    width: 100%;
    padding: 14px 0;
    border-radius: .375rem;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s;
    background: #4eb52b;
    color: #fff;
    margin-top: 30px
}

.button__content,
.circle::after,
.header-content,
.question-with-img {
    display: -webkit-box;
    display: -ms-flexbox
}

.button__content {
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    pointer-events: none
}

.text1,
.text2 {
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s
}

#finish-quiz,
.img-quizz,
.text2 {
    display: none
}

.loader__text {
    margin-top: 17px;
    font: 600 20px Arial, Helvetica, sans-serif
}

.button:hover,
.slide__button:hover {
    -webkit-animation: 2s infinite pulse;
    animation: 2s infinite pulse
}

.slide__button:active,
.slide__button:focus {
    -webkit-animation: none;
    animation: none
}

.text-gradient {
    background: -webkit-gradient(linear, left top, right top, from(#fff), to(rgba(78, 181, 43, .4)));
    background: -o-linear-gradient(left, #fff, rgba(78, 181, 43, .4));
    background: linear-gradient(90deg, #fff, rgba(78, 181, 43, .4));
    padding: 1px;
    border-radius: 5px
}

#circ {
    stroke-dasharray: 510;
    stroke-dashoffset: 0;
    -webkit-transform: rotate(269deg);
    -ms-transform: rotate(269deg);
    transform: rotate(269deg);
    -webkit-transform-origin: center;
    -ms-transform-origin: center;
    transform-origin: center
}

.circle {
    position: relative;
    width: 180px;
    height: 180px;
    margin: 30px auto auto
}

.circle::after {
    position: absolute;
    content: attr(data-progress);
    display: flex;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-direction: column;
    flex-direction: column;
    width: 150px;
    height: 150px;
    top: 0;
    margin: 15px;
    border-radius: 50%;
    font: 700 38px Arial, Helvetica, sans-serif;
    text-align: center;
    color: #047094
}

.svg-blue,
.svg-grey {
    position: absolute;
    left: 0
}

.svg-blue {
    z-index: 5
}

@-webkit-keyframes progress {
    0% {
        stroke-dashoffset: 0
    }
    5% {
        stroke-dashoffset: 25
    }
    10% {
        stroke-dashoffset: 50
    }
    15% {
        stroke-dashoffset: 75
    }
    20% {
        stroke-dashoffset: 100
    }
    25% {
        stroke-dashoffset: 125
    }
    30% {
        stroke-dashoffset: 150
    }
    35% {
        stroke-dashoffset: 175
    }
    40% {
        stroke-dashoffset: 200
    }
    45% {
        stroke-dashoffset: 225
    }
    50% {
        stroke-dashoffset: 250
    }
    55% {
        stroke-dashoffset: 275
    }
    60% {
        stroke-dashoffset: 300
    }
    65% {
        stroke-dashoffset: 325
    }
    70% {
        stroke-dashoffset: 350
    }
    75% {
        stroke-dashoffset: 375
    }
    80% {
        stroke-dashoffset: 400
    }
    85% {
        stroke-dashoffset: 425
    }
    90% {
        stroke-dashoffset: 450
    }
    95% {
        stroke-dashoffset: 475
    }
    100% {
        stroke-dashoffset: 510
    }
}

@keyframes progress {
    0% {
        stroke-dashoffset: 0
    }
    5% {
        stroke-dashoffset: 25
    }
    10% {
        stroke-dashoffset: 50
    }
    15% {
        stroke-dashoffset: 75
    }
    20% {
        stroke-dashoffset: 100
    }
    25% {
        stroke-dashoffset: 125
    }
    30% {
        stroke-dashoffset: 150
    }
    35% {
        stroke-dashoffset: 175
    }
    40% {
        stroke-dashoffset: 200
    }
    45% {
        stroke-dashoffset: 225
    }
    50% {
        stroke-dashoffset: 250
    }
    55% {
        stroke-dashoffset: 275
    }
    60% {
        stroke-dashoffset: 300
    }
    65% {
        stroke-dashoffset: 325
    }
    70% {
        stroke-dashoffset: 350
    }
    75% {
        stroke-dashoffset: 375
    }
    80% {
        stroke-dashoffset: 400
    }
    85% {
        stroke-dashoffset: 425
    }
    90% {
        stroke-dashoffset: 450
    }
    95% {
        stroke-dashoffset: 475
    }
    100% {
        stroke-dashoffset: 510
    }
}

.result {
    background-repeat: no-repeat;
    background-position: center;
    background-image: url('../images/result.svg');
    background-size: auto 40%;
    display: -ms-grid;
    display: grid;
    grid-gap: 0.25rem;
    -ms-grid-columns: 1fr 0.25rem 1fr;
    grid-template-columns: repeat(2, 1fr);
    text-align: center
}

.graph>div,
.result__after,
.result__before {
    width: 100%
}

.after__img,
.before__img {
    max-width: 250px;
    width: 100%
}

.result__head {
    background: #e5e4e0;
    padding: .5rem
}

.before__head {
    font-weight: 500;
    font-size: 18px
}

.after__head {
    font-weight: 700;
    font-size: 18px
}

.before__info {
    font-weight: 500;
    padding: .75rem
}

.after__info {
    font-weight: 700;
    padding: .75rem
}

.info__title {
    font-size: 17px
}

.info__legth {
    font-size: 20px
}

.start_info__legth {
    color: #d93a00
}

.final_info__legth {
    color: #4eb52b
}

.dates {
    margin-top: 20px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    padding: 0 10px
}

.dates .current,
.dates .goal {
    background: #222;
    padding: 4px 6px;
    display: inline-block;
    border-radius: 5px;
    max-width: 48%
}

.dates span {
    font-size: 15px;
    color: #fff
}

.verticalYJMM {
    stroke-width: 1.5px;
    stroke-dasharray: 0 3
}

.graph__svg {
    width: 100%;
    height: auto;
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1)
}

.graph__svg .svgText {
    text-anchor: middle;
    stroke-width: 1.419;
    font-weight: 700;
    -webkit-transform: scale(-1, 1);
    -ms-transform: scale(-1, 1);
    transform: scale(-1, 1);
    font-size: 16px;
    color: red
}

#slide5.slide__title,
.feedback__text,
.more-btn,
.reviews__feedback {
    margin-top: 1.25rem
}

.promo {
    background: #fff;
    padding: .75rem;
    border: 3px solid #4eb52b;
    border-radius: .5rem
}

.promo__content {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 1fr 2fr;
    grid-template-columns: 1fr 2fr
}

.promo__img {
    padding-right: 10px;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    max-width: 300px
}

@media screen and (max-width:550px) {
    .promo__content {
        display: -ms-grid;
        display: grid;
        -ms-grid-columns: 1fr;
        grid-template-columns: 1fr
    }
    .promo__info {
        -webkit-box-ordinal-group: 2;
        -ms-flex-order: 1;
        order: 1
    }
    .promo__img {
        -webkit-box-ordinal-group: 3;
        -ms-flex-order: 2;
        order: 2;
        margin: 10px auto 0;
        max-width: 250px
    }
}

@media screen and (min-width:48em) {
    .promo__img {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex
    }
}

.promo__info {
    padding-top: .75rem
}

@media screen and (min-width:30em) {
    .slide__content {
        padding: 20px
    }
    .promo__info-top {
        text-align: left
    }
}

.promo__info-top {
    text-align: center;
    margin-bottom: 10px
}

.promo__info-center {
    font-size: 19px;
    margin-bottom: 10px
}

.promo__info-bottom {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-top: .5rem;
    padding: .5rem;
    background: #e5e4e0
}

.pulse,
.star {
    display: inline-block
}

.top-title {
    font-weight: 500;
    font-size: 35px;
    line-height: 1.33
}

.top-subtitle {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    margin-bottom: 10px
}

.bottom-price {
    text-align: left;
    width: 40%
}

.bottom-price-number {
    font-size: 25px;
    font-weight: 500
}

.bottom-total {
    text-align: right;
    width: 60%
}

.more-btn,
.pulse {
    text-align: center
}

.bottom-total-per {
    font-style: 12px
}

.bottom-total-tot {
    font-style: 14px
}

.primary-btn {
    border-color: #e74b55;
    background-color: #e74b55;
    font-weight: 700
}

.pulse {
    margin-bottom: 1.25rem;
    color: #fff;
    font-size: 20px;
    font-weight: 500;
    padding: 20px;
    width: 100%;
    max-width: 350px;
    border-radius: 10px;
    background: #4eb52b;
    border: 2px solid #4eb52b;
    -webkit-animation: 2s infinite pulse;
    animation: 2s infinite pulse;
    -webkit-transition: .3s ease-in-out;
    -o-transition: .3s ease-in-out;
    transition: .3s ease-in-out
}

@-webkit-keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(78, 181, 43, .4);
        box-shadow: 0 0 0 0 rgba(78, 181, 43, .4)
    }
    100% {
        -webkit-box-shadow: 0 0 0 25px transparent;
        box-shadow: 0 0 0 25px transparent
    }
}

@keyframes pulse {
    0% {
        -webkit-box-shadow: 0 0 0 0 rgba(78, 181, 43, .4);
        box-shadow: 0 0 0 0 rgba(78, 181, 43, .4)
    }
    100% {
        -webkit-box-shadow: 0 0 0 25px transparent;
        box-shadow: 0 0 0 25px transparent
    }
}

.reviews {
    background: #fff;
    padding: 1.25rem;
    border-width: 1px;
    border-radius: .5rem
}

.reviews__title {
    font-size: 30px
}

.reviews__mark {
    font-size: 65px
}

.reviews__feedback {
    overflow: hidden
}

.feedback__text {
    padding-top: 1.25rem;
    border-top: 1px solid #e2e8f0;
    font-size: 16px;
    text-align: start
}

.feedback__name {
    font-weight: 500;
    font-size: 20px;
    line-height: 1.2;
    text-align: left;
    margin-bottom: 5px
}

.star {
    width: 1.25rem;
    height: 1.25rem;
    line-height: 1em;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    color: #d69e2e
}

.feedback__date {
    width: 124px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    font-size: 15px;
    -ms-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: start;
    -ms-flex-align: start;
    align-items: flex-start;
    gap: 8px
}

.feedback__info {
    display: inline-block;
    -webkit-padding-start: 0.25rem;
    padding-inline-start: 0.25rem;
    -webkit-padding-end: 0.25rem;
    padding-inline-end: 0.25rem;
    font-size: 12px;
    border-radius: .125rem;
    font-weight: 500;
    background: #c6f6d5;
    color: #22543d
}

img {
    max-width: 100%
}

.button:hover,
a {
    text-decoration: none
}

.content__slider,
.slider__button,
.wrapper,
input {
    position: relative
}

* {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0
}

*,
.left,
.reddit-header,
 :after,
 :before {
    -webkit-box-sizing: border-box;
    box-sizing: border-box
}

 ::-moz-selection {
    background: #d93a00;
    color: #fff
}

 ::selection {
    background: #d93a00;
    color: #fff
}

.main {
    background-color: #fff;
    max-width: 600px;
    margin: 0 auto;
    width: 100%;
    min-height: -webkit-max-content;
    min-height: -moz-max-content;
    min-height: max-content
}

ol,
ul {
    list-style: none
}

.clearfix {
    clear: both
}

.main__down-text {
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    margin: 20px auto 25px;
    text-align: center;
    display: inline-block;
    line-height: 1.3
}

.main__down-text-two {
    text-align: center;
    font-size: 17px;
    margin: 0 0 10px
}

.main__down-text-two i {
    font-size: 15px
}

.main__down-text-two p span {
    background-color: #d93a00;
    color: #fff;
    padding: 2px 5px 4px;
    border-radius: 3px
}

.top-block__question {
    font-weight: 700;
    font-size: 38px
}

.content {
    font-size: 0;
    text-align: center
}

.left {
    display: table-cell;
    padding-right: 15px;
    float: left;
    width: 26%
}

.slider__button {
    margin: 0 auto 30px;
    font-size: 22px;
    font-weight: 500;
    text-align: center;
    clear: both
}

.question {
    padding: 20px;
    font-size: 22px;
    background: #f3f3f3;
    margin: 0 0 30px;
    color: #000
}

.slide-question {
    margin: 20px 0 0;
    border-radius: 5px;
    border: 3px solid #eaeaea
}

@media (max-width:480px) {
    .slide-question {
        margin: 10px 0 0
    }
}

.question-with-img {
    display: flex;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-radius: 5px;
    border: 3px solid #eaeaea
}

.button,
input {
    display: block
}

.question-with-img .question-div-with-img {
    min-width: 70px;
    width: 85px;
    margin-right: 25px
}

.slide {
    direction: ltr;
    width: 100%;
    -webkit-transition: .5s;
    -o-transition: .5s;
    transition: .5s;
    position: absolute;
    padding: 10px;
    background-color: #e8e6ed;
    overflow: hidden
}

@media (max-width:670px) {
    .slide {
        padding: 5px
    }
}

.button,
.button:disabled {
    width: 100%;
    text-decoration: none;
    text-align: center
}

.question-div {
    -webkit-box-flex: 1;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto
}

.question,
.question-div,
.reviews__feedback__svgdiv,
input {
    text-align: left
}

.button {
    margin: 0 auto 25px;
    padding: 14px 0;
    border-radius: 8px;
    font: 700 24px Arial, Helvetica, sans-serif;
    color: #fff;
    background-color: #4eb52b;
    -webkit-transition: .3s;
    -o-transition: .3s;
    transition: .3s
}

.button:disabled {
    padding: 11px 32px;
    border: 1px solid #0072087a;
    border-radius: 4px;
    font: 700 18px Arial, Helvetica, sans-serif;
    color: #e5ffe7;
    cursor: default;
    background-color: #87b78b7a;
    background-image: -webkit-linear-gradient(top, #3bc7477a 0, #31483263 100%);
    -webkit-box-shadow: 0 0 2px #bababa, inset 0 0 1px #fff;
    box-shadow: 0 0 2px #bababa, inset 0 0 1px #fff
}

.img-quizz {
    margin: 0 0 30px
}

.img-quizz img,
.img-quizz video {
    display: block;
    border-radius: 10px;
    width: 60%;
    margin: 0 auto
}

.img-quizz .img-width {
    width: 80%
}

@media (max-width:991px) {
    .main {
        width: 100%
    }
}

@media (max-width:768px) {
    .main__down-text {
        text-align: center
    }
}

input {
    width: 100%;
    z-index: 1
}

@media (max-width:680px) {
    .top-block__question {
        font-size: 35px
    }
}

@media (max-width:500px) {
    .img-quizz .img-width {
        width: 100%
    }
    .top-block__question {
        font-size: 32px
    }
    .img-quizz img,
    .img-quizz video {
        width: 80%
    }
}

@media (max-width:480px) {
    .question-with-img {
        -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
    }
    .question-with-img .question-div-with-img {
        width: 75px;
        margin-bottom: 10px;
        margin-right: 0
    }
    .question-with-img .question-div {
        width: 100%;
        text-align: center
    }
}

@media (max-width:435px) {
    .main__down-text {
        width: 100%
    }
    .top-block__question {
        font-size: 30px
    }
    .button {
        font-size: 24px
    }
}

@media (max-width:380px) {
    .top-block__question {
        font-size: 27px
    }
    .main__down-text-two {
        font-size: 16px
    }
    .main__down-text-two i {
        font-size: 15px
    }
    .question-with-img {
        -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
    }
    .question-with-img .question-div-with-img {
        width: 75px;
        margin-bottom: 10px;
        margin-right: 0
    }
    .question-with-img .question-div {
        width: 100%;
        text-align: center
    }
}

@media (max-width:360px) {
    .top-block__question {
        font-size: 25px
    }
}

@media (min-width:300px) {
    .container {
        width: 320px;
        padding: 0
    }
}

@media (min-width:500px) {
    .container {
        width: 475px
    }
}

@media (min-width:768px) {
    .container {
        width: 748px
    }
}

@media (min-width:992px) {
    .container {
        width: 970px
    }
}

.lefto {
    width: 100%;
    border-radius: 100%
}

header {
    height: 71px;
    position: fixed;
    left: 0;
    right: 0;
    top: 0;
    z-index: 100
}

.header-content {
    background-color: #00518f;
    padding: 1em;
    height: 100%;
    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
}

.menu-toggle,
.site-search-toggle {
    height: 35px;
    width: 35px;
    border: none;
    margin: 0;
    position: absolute;
    top: 15px
}

.px-md {
    padding-left: 1rem;
    padding-right: 1rem
}

.header-left,
.header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center
}

.header-left .nih-logo,
.menu-toggle,
.site-search-toggle {
    overflow: hidden;
    display: block
}

.header-left a,
.menu {
    line-height: 1
}

.header-left .nih-logo {
    background: url('../images/icons.png') 0 -354px no-repeat;
    height: 39px;
    width: 189px
}

.site-search-toggle {
    background: url('../images/icons.png') -99px -319px no-repeat;
    right: 56px
}

.menu-toggle {
    background: url('../images/icons.png') -35px -279px no-repeat;
    right: 1em
}

#slide5 .slide__content {
    padding: 20px 5px 5px
}

#slide5 .slide__content h2 {
    padding: 0 15px
}

#after-img,
#before-img {
    padding: 0 45px
}

@media (max-width:500px) {
    #after-img,
    #before-img {
        padding: 0 10px
    }
}

.result__head {
    margin-top: 10px
}

#svg {
    border-radius: 0 0 5px 5px
}

.slide__title_second {
    margin-top: 20px;
    margin-bottom: 20px;
    font-size: 25px;
    font-weight: 500;
    line-height: 1.3
}

.slide__title_final {
    font-size: 18px;
    font-weight: 500;
    line-height: 28px
}

.star-quiz_span-title {
    display: block;
    margin: 0 0 10px;
    font-weight: 700;
    font-size: 19px
}

.star-quiz_span {
    display: block;
    margin: 0 0 5px;
    font-size: 17px
}

.main__down-text-span {
    display: inline-block;
    line-height: 25px;
    font-size: 20px;
    text-transform: none;
    max-width: 80%;
    font-weight: 400;
    margin-top: 10px
}

@media (max-width:550px) {
    .main__down-text-span {
        line-height: 22px;
        font-size: 19px;
        max-width: 90%
    }
}

@media (max-width:400px) {
    #after-img,
    #before-img {
        padding: 0 5px
    }
    .main__down-text-span {
        max-width: 100%;
        font-size: 18px
    }
}

.bold-text {
    font-weight: 700
}

.star-bad {
    color: #e2e8f0
}

.no-wrap {
    white-space: nowrap
}

.quiz-wrapper .hide,
button span {
    height: inherit;
    left: inherit;
    overflow: inherit;
    position: inherit;
    width: inherit;
}


}