html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content: '';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
/* reset styles end */
/* main styles start */
* {
    position: relative;
}
body {
    background-color: #e1e5e4;
    font-family: "Archivo", arial, sans-serif;
}
sub, sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline;
}
sup {
    top: -0.5em;
}
sub {
    bottom: -0.25em;
}
p, ul {
    font-size: clamp(16px, 2vw, 20px);
    line-height: 150%;
}
.highlighted {
    color: #db790f !important;
}
.wrapper {
    width: clamp(40%, 1440px, 80vw);
    margin: 0 auto;
    position: relative;
}
header {
    height: 690px;
    overflow: hidden;
    position: relative;
}
.hero {
    padding-top: clamp(20px, 3vw, 32px);
    padding-bottom: clamp(20px, 3vw, 40px);
    border-radius: 0 0 3vw 3vw;
    height: 690px;
    box-sizing: border-box;
}

.hero .wrapper {
    height: 100%;
    display: flex;
    flex-direction: column;
}
.hero .logo {
    width: 178px;
}
.hero .hero_text {
    margin-top: clamp(32px, 5vw, 80px);
    color: #fff;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    position: relative;
    height: 100%;
}
.hero .hero_text h1.hero_main-title {
    font-size: clamp(18px, 2.5vw, 32px);
    line-height: 130%;
    font-weight: bold;
    position: relative;
    margin-bottom: clamp(32px, 4vw, 50px);
}
.hero .hero_text .hero_main-title::after {
    content: "";
    width: 150px;
    height: 6px;
    background-color: #495bb7;
    display: block;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
}
.hero .hero_text .hero_page-title {
    font-size: clamp(30px, 4vw, 48px);
    line-height: 110%;
    font-weight: bold;
    max-width: max(500px, 60%);
}
.hero .hero_text .hero_abbr {
    margin-top: auto;
    font-size: clamp(14px, 1.5vw, 16px);
    opacity: 0.5;
}
.hero .links {
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 714px;
    border-radius: 77px;
    background: rgba(255, 255, 255, 0.70);
    padding: 6px 7px;
    gap: 10px;
    margin-top: 50px;
}
.hero .links a {
    color: #495bb7;
    font-size: 20px;
    font-style: normal;
    font-weight: 500;
    line-height: 150%;
    width: 50%;
    text-align: center;
    text-decoration: none;
    padding: 5px 10px;
    border-radius: 77px;
    background-color: #fff;
}
.hero .links a.active {
    background-color: #db790f;
    color: #fff;
}
.content {
    margin: 1vw 0;
}
.content p, .content ul {
    color: #3d3d40;
}
.content .tabs {
    background-color: #e1e5e4;
    position: sticky;
    top: 0;
    z-index: 3;
}
.content .tabs .content_border {
    height: 5vw;
    background-color: #fff;
    border-radius: 5vw 5vw 0 0;
    z-index: 1;
}
.content .tabs_wrapper {
    display: flex;
    flex-direction: row;
}
.content .tabs_wrapper .tab {
    padding: 24px;
    text-decoration: none;
    font-size: clamp(14px, 2vw, 20px);
    color: #3d3d40;
}
.content .tabs_wrapper .tab.active {
    background-color: #fff;
    border-radius: 1vw 1vw 0 0;
    font-weight: bold;
    padding-left: 48px;
    position: relative;
}
.content .tabs_wrapper .tab img {
    display: none;
}
.content .tabs_wrapper .tab.active img {
    position: absolute;
    left: 23px;
    top: 45%;
    display: block;
}
.content .tabs_wrapper .tab.active:after, .content .tabs_wrapper .tab.active:before {
    content: url("../assets/img/vkl.svg");
    position: absolute;
    display: block;
}
.content .tabs_wrapper .tab.active:after {
    transform: scaleX(-1);
    right: -15px;
    bottom: -3px;
}
.content .tabs_wrapper .tab.active:before {
    bottom: -3px;
    left: -15px;
}
.content .tabs_wrapper::before {
    content: url("img/home.svg");
    position: absolute;
    left: -5vw;
    top: 15px;
}
.content .content_wrapper {
    background: #fff;
    border-radius: 0 0 3vw 3vw;
    padding: 0 0 1vw;
    overflow: hidden;
}
.content .content_wrapper p, .content .content_wrapper h3 {
    max-width: 910px;
}
.content .content_wrapper .table-info {
     width: 100%;
     margin-bottom: clamp(24px, 8vw, 80px);
     margin-top: clamp(24px, 8vw, 80px);
     max-width: 1440px;
 }
.content .content_wrapper ul {
    margin-bottom: clamp(24px, 4vw, 40px);
    margin-top: clamp(24px, 4vw, 40px);
    padding-left: 20px;
}
.content .content_wrapper ul > li {
    list-style-image: url("img/dot.svg");
    list-style-position: outside;
    padding-left: 10px;
    margin: 10px 0;
}
.content .video_wrapper {
    position: relative;
    box-sizing: border-box;
    border-radius: 2vw;
    overflow: hidden;
    margin-bottom: clamp(24px, 8vw, 80px);
}
.content .video_wrapper video {
    max-width: 100%;
}
.content h2 {
    font-size: clamp(32px, 5vw, 50px);
    line-height: 110%;
    text-transform: uppercase;
    font-weight: bold;
    color: #3d3d40;
    margin-bottom: clamp(40px, 6vw, 80px);
}
.content h2::after {
    content: "";
    width: clamp(103px, 20vw, 250px);
    height: 6px;
    background-color: #495bb7;
    display: block;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
}
.content h3 {
    font-size: clamp(24px, 3vw, 32px);
    color: #495bb7;
    line-height: 130%;
    font-weight: bold;
    margin: 24px 0;
}
.content .cards {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 24px;
    margin-top: clamp(24px, 3vw, 36px);
    margin-bottom: clamp(36px, 8vw, 80px);
}
.content .cards .card {
    width: calc((100% - 48px) / 3);
    background: #f5f5f5;
    border-radius: 1vw;
    padding: 40px 40px 24px 40px;
    box-sizing: border-box;
}
.content .cards .card .highlighted {
    font-weight: bold;
}
.content .cards .card img {
    margin-bottom: 24px;
}
.content .cards .card .header {
    margin-bottom: 16px;
    color: #495bb7;
    font-weight: bold;
}
.content .cards .card.big {
    width: calc((100% - 24px) / 2);
}
.content .cards .card.full {
    width: 100%;
}
.content .cards .card.full .header {
    font-size: clamp(18px, 2.5vw, 26px);
}
.content .cards .card.full .percents {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
    margin-top: clamp(24px, 3vw, 36px);
}
.content .cards .card.full .percents .percent {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: calc((100% - 40px) / 2);
}
.content .cards .card.full .percents .percent .top {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: clamp(24px, 4vw, 48px);
    align-items: center;
}
.content .cards .card.full .percents .percent .top img {
    width: clamp(150px, 20vw, 200px);
}
.content .cards .card.full .percents .percent .top p {
    font-weight: bold;
    font-size: clamp(16px, 2vw, 20px);
}
.content .cards .card.full .percents .percent .mob {
    display: none;
}
.content .cards .card.full.orange {
    background-color: #db790f;
}
.content .cards .card.full.orange .data {
    display: flex;
    flex-direction: column;
    margin-top: clamp(24px, 3vw, 36px);
    margin-bottom: clamp(24px, 3vw, 36px);
    gap: 0;
}
.content .cards .card.full.orange .data .header {
    color: #fff;
    background-color: #495bb7;
    padding: clamp(16px, 2vw, 24px);
    border-radius: 1vw 1vw 0 0;
    margin-bottom: 0;
    box-sizing: border-box;
}
.content .cards .card.full.orange .data .cell {
    max-width: 910px;
    background-color: #edeff8;
    padding: clamp(16px, 2vw, 24px);
    border: 1px solid #3d3d40;
    box-sizing: border-box;
}
.content .cards .card.full.orange .data .cell ul {
    margin-top: 24px;
}
.content .cards .card.full.orange .data .cell:last-child {
    border-radius: 0 0 1vw 1vw;
}
.content .fraction_block {
    display: flex;
    flex-direction: row;
    gap: 20px;
}
.content .fraction_block .fraction {
    color: #495bb7;
    font-weight: bold;
    font-size: clamp(124px, 15vw, 150px);
    line-height: 100%;
}
.content .fraction_block .text p {
    font-size: clamp(18px, 2.4vw, 24px);
}
.content .fraction_block .text ul > li {
    font-size: clamp(16px, 2vw, 20px);
}
.content .fraction_block .text ul > li:first-child {
    list-style-image: url("img/cross.svg");
    list-style-position: outside;
    padding-left: 10px;
    margin: 10px 0;
}
.content .fraction_block .text ul > li:nth-child(2) {
    list-style-image: url("img/cross2.svg");
    list-style-position: outside;
    padding-left: 10px;
    margin: 10px 0;
}
.content .symptoms_wrapper {
    display: flex;
    margin-top: clamp(24px, 4vw, 48px);
    margin-bottom: clamp(36px, 8vw, 80px);
    justify-content: center;
    gap: clamp(36px, 6vw, 65px);
}
.content .symptoms_wrapper img {
    height: fit-content;
}
.content .symptoms_wrapper .highlighted {
    font-weight: bold;
}
.content .symptoms_wrapper .pic_header {
    font-size: clamp(18px, 2vw, 24px);
    font-weight: bold;
    line-height: 130%;
    margin-bottom: clamp(24px, 4vw, 40px);
}
.content .symptoms_wrapper .header, .content .symptoms_wrapper .big {
    font-size: clamp(24px, 3vw, 32px);
    color: #495bb7;
    line-height: 130%;
    font-weight: bold;
    margin: 24px 0;
}
.content .symptoms_wrapper .left_text {
    text-align: right;
}
.content .symptoms_wrapper .right-text {
    text-align: left;
}
.content .symptoms_wrapper .left_text, .content .symptoms_wrapper .right-text {
    max-width: 400px;
}
.content .symptoms_wrapper p {
    margin-bottom: clamp(24px, 4vw, 48px);
}
.content .symptoms_wrapper .disclaimer {
    font-size: 14px;
    line-height: 130%;
    color: #3d3d40;
    opacity: 0.5;
}
.content .symptoms_wrapper .disclaimer.mob {
    display: none;
}
.content .symptoms_wrapper .blue {
    color: #495bb7;
    font-weight: bold;
}
.content .symptoms_wrapper .card {
    background: #f5f5f5;
    border-radius: 1vw;
    padding: 16px 24px;
    box-sizing: border-box;
}
.content .symptoms_wrapper .card p {
    margin-bottom: 0;
}
.content .colored_box {
    background-color: #db790f;
    border-radius: 2vw;
    padding: clamp(16px, 4vw, 40px);
    margin-bottom: clamp(40px, 8vw, 80px);
}
.content .colored_box p {
    color: #fff;
    font-size: clamp(18px, 2vw, 24px);
    font-weight: bold;
    line-height: 130%;
}
.content .abbr {
    color: #3d3d40;
    opacity: 0.5;
    font-size: 14px;
}

footer {
    background: url(img/footer.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: #fff;
    border-radius: 3vw 3vw 0 0;
    padding-top: clamp(40px, 8vw, 80px);
}
footer .acor-container {
    margin: 20px 0;
}
footer .acor-container .acor-body {
    width: calc(100% - 40px);
    height: 0;
    color: #fff;
    line-height: 18px;
    box-sizing: border-box;
    transition: color 0.5s, padding 0.5s;
    overflow: hidden;
    font-size: 16px;
}
footer .acor-container .acor-body p {
    margin: 0 0 10px;
}
footer .acor-container label {
    font-family: "Archivo", arial, sans-serif;
    cursor: pointer;
    display: block;
    padding: 15px 0;
    width: 100%;
    color: #fff;
    font-weight: bold;
    box-sizing: border-box;
    z-index: 100;
    font-size: clamp(32px, 5vw, 50px);
    margin: 0 0 5px;
    transition: color 0.35s;
    text-transform: uppercase;
    position: relative;
}
footer .acor-container label::after {
    content: "";
    width: clamp(103px, 20vw, 250px);
    height: 6px;
    background-color: #db790f;
    display: block;
    position: relative;
    margin-top: 10px;
    border-radius: 5px;
}
footer .acor-container input {
    display: none;
}
footer .acor-container label:before {
    content: url("img/arrow.svg");
    float: right;
    font-size: 0;
    position: absolute;
    right: 0;
    top: 6px;
}
footer .acor-container input:checked + label:before {
    transition: transform 0.35s;
    transform: rotate(180deg);
}
footer .acor-container input:checked + label + .acor-body {
    height: auto;
    margin-top: -5px;
    color: #fff;
}
footer ol {
    list-style: decimal inside;
}
footer ol li {
    margin: 20px 0;
    font-size: 14px;
}
footer .bottom {
    border-top: 1px solid #fff;
    margin-top: clamp(40px, 7vw, 80px);
    padding: 40px 0;
}
footer .logo-menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}
footer .logo-menu .menu {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: max(6vw,64px);
}
footer .logo-menu .menu a {
    text-decoration: none;
    color: #fff;
    margin: 32px 0;
    display: block;
    font-size: 16px;
    font-weight: bold;
}
footer .credits {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: max(5vw, 50px);
}
footer .credits p {
    font-size: 12px !important;
}
footer .credits .p3 {
    display: flex;
    justify-content: space-between;
    gap: max(6vw, 64px);
}
footer .credits .p3 p {
    opacity: 0.5;
}
@media (max-width: 768px) {
    header {
        height: 500px;
    }
    header iframe {
        height: 500px !important;
        width: 1920px;
        left: -900px;
    }
    .wrapper {
        width: 90vw;
    }
    .hero {
        background-position: 75%;
        aspect-ratio: unset;
        border-radius: 0 0 5vw 5vw;
        height: 500px;
    }

    .hero .burger {
        display: block;
        margin-bottom: 0px;
        cursor: pointer;
        padding: 30px;
        right: 0;
        position: absolute;
    }
    .hero .burger_wrapper {
        backdrop-filter: blur(12px);
        height: 100%;
        position: fixed;
        z-index: 5;
        width: 100%;
        top: 0px;
        background: rgba(73, 91, 183, 0.9);
    }
    .hero .burger_wrapper .top {
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    }
    .hero .burger_wrapper .top .logo {
        padding-right: 36px;
        position: relative;
        padding-bottom: 24px;
        padding-top: 12px;
    }
    .hero .burger_wrapper .top .close {
        cursor: pointer;
        padding: 30px;
        border-left: 1px solid rgba(255, 255, 255, 0.2);
    }
    .hero .burger_wrapper .menu {
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        margin-top: 60px;
        gap: 16px;
        box-sizing: border-box;
        border-radius: 22px;
    }
    .hero .burger_wrapper .menu li {
        width: 100%;
        box-sizing: border-box;
    }
    .hero .burger_wrapper .menu li a {
        width: 100%;
        display: block;
        box-sizing: border-box;
    }
    .hero .logo {
        width: 137px;
    }
    .hero .links {
        margin-top: 30px;
    }
    .hero .links a {
        font-size: 14px;
        height: 100%;
        box-sizing: border-box;
        align-content: center;
    }
    .content {
        margin: 18px 0;
    }
    .content .content_wrapper {
        border-radius: 0 0 5vw 5vw;
        padding: 0 0 10vw;
    }
    .content .tabs_wrapper {
        margin-left: 5vw;
        gap: 5px;
    }
    .content .tabs_wrapper .tab {
        padding: 18px;
        background-color: #fff;
        border-radius: 2vw 2vw 0 0;
    }
    .content .tabs_wrapper .tab.active {
        border-radius: 2vw 2vw 0 0;
        padding-left: 24px;
    }
    .content .tabs_wrapper .tab.active img {
        left: 10px;
        top: 40%;
    }
    .content .tabs_wrapper::before {
        display: none;
    }
    .content .cards {
        flex-direction: column;
    }
    .content .cards .card.big, .content .cards .card {
        width: 100%;
        border-radius: 5vw;
        padding: 24px 16px;
    }
    .content .cards .card.full .percents {
        flex-direction: column;
    }
    .content .cards .card.full .percents .percent {
        width: 100%;
    }
    .content .cards .card.full .percents .percent .top {
        flex-direction: column;
    }
    .content .cards .card.full .percents .percent .mob {
        display: block;
    }
    .content .cards .card.full .percents .percent .desk {
        display: none;
    }
    .content .cards .card.full.orange .data .header {
        border-radius: 3vw 3vw 0 0;
    }
    .content .cards .card.full.orange .data .cell:last-child {
        border-radius: 0 0 3vw 3vw;
    }
    .content .symptoms_wrapper {
        flex-direction: column;
        position: relative;
    }
    .content .symptoms_wrapper .left_text, .content .symptoms_wrapper .right-text {
        max-width: unset;
    }
    .content .symptoms_wrapper .left_text {
        text-align: left;
        z-index: 2;
        padding-right: 30%;
    }
    .content .symptoms_wrapper .right-text {
        padding-right: 30%;
    }
    .content .symptoms_wrapper img {
        position: absolute;
        right: -100px;
        z-index: 1;
        top: 30px;
    }
    .content .symptoms_wrapper .card {
        width: 90vw;
        border-radius: 5vw;
    }
    .content .symptoms_wrapper .disclaimer.mob {
        display: block;
        margin-top: 30px;
    }
    .content .symptoms_wrapper .disclaimer.desk {
        display: none;
    }
    .content .fraction_block {
        flex-direction: column-reverse;
    }
    .content .fraction_block .fraction {
        text-align: center;
    }
    .content .fraction_block .text p {
        text-align: center;
    }
    .content .colored_box {
        border-radius: 5vw;
    }
    footer .acor-container label {
        padding-right: 20%;
    }
    footer ol li {
        margin: 10px 0;
    }
    footer .logo-menu {
        flex-direction: column;
        align-items: center;
        gap: 24px;
    }
    footer .logo-menu .menu {
        flex-direction: column;
        align-items: center;
        gap: 0;
    }
    footer .logo-menu .menu ul {
        text-align: center;
    }
    footer .logo-menu .menu a {
        margin: 24px 0;
    }
    footer .logo-menu .menu a:last-child {
        margin-bottom: 0;
    }
    footer .logo {
        width: 178px;
    }
    footer .credits {
        flex-direction: column-reverse;
        text-align: center;
    }
    footer .credits .p3 {
        flex-direction: column;
        gap: 20px;
    }
}
@media (max-width: 450px) {
    header iframe {
        height: 696px !important;
        left: -1070px;
        top: -88px;
    }
}