@import url(https://fonts.googleapis.com/css2?family=Inter:wght@400;800&display=swap);

.header, .inner:before {
    position: absolute;
    left: 0
}

.container {
    display: flex;
    align-items: center;
    justify-content: space-between
}

.inner .container, .inner .row {
    min-height: inherit
}

.inner .row h1, .inner .row p {
    margin: 0 0 calc(35vw / var(--resizer) * 100) 0;
    align-self: flex-start
}

.content h2, .content h3 {
    font-weight: 800;
    line-height: 87.02%
}

.footer .row, .header .row {
    width: 100%;
    padding: calc(23vw / var(--resizer) * 100) 0 calc(13vw / var(--resizer) * 100) 0
}

.footer .logo, .header .logo, .inner .row .button {
    transition: .4s ease-in-out
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box
}

:root {
    --resizer: 1440
}

body {
    width: 100%;
    min-height: 100%;
    font-family: Inter, sans-serif;
    background-color: #0e133b
}

a {
    text-decoration: none
}

.container {
    margin: 0 auto;
    width: 100%;
    max-width: calc(1290vw / var(--resizer) * 100)
}

.header {
    top: 0;
    width: 100%;
    z-index: 99
}

.inner, .language {
    position: relative
}

.header .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: calc(2vw / var(--resizer) * 100) solid rgba(27, 89, 146, .17)
}

.author {
    border-radius: 10%;
    width: calc(300vw / var(--resizer) * 100);
    height: calc(300vw / var(--resizer) * 100);
    background: url(author.webp) 50%/cover no-repeat
}

.header .logo {
    margin: 0 calc(30vw / var(--resizer) * 100) calc(10vw / var(--resizer) * 100) 0;
    height: calc(34vw / var(--resizer) * 100);
    width: auto
}

.footer .logo p, .header .logo p {
    width: inherit;
    height: inherit
}

.footer .logo:hover, .header .logo:hover, .inner .row .button:hover {
    transform: scale(1.05)
}

.footer .logo img, .header .logo img {
    height: 100%;
    width: auto
}

.content .head .img-text, .content .head h2, .content .head h3, .footer, .inner, .inner:before {
    width: 100%
}

.footer nav, .footer ul, .header nav, .header ul {
    display: flex;
    align-items: center
}

.footer ul, .header ul {
    flex-wrap: wrap;
    list-style: none
}

.footer ul li, .header ul li {
    margin: 0 0 calc(10vw / var(--resizer) * 100) calc(20vw / var(--resizer) * 100);
    font-style: normal;
    font-weight: 400;
    font-size: calc(14vw / var(--resizer) * 100);
    line-height: calc(17vw / var(--resizer) * 100);
    color: #fff;
    transition: .4s linear
}

.footer ul li:hover, .header ul li:hover {
    color: #389df0
}

.footer ul a, .header ul a {
    color: inherit
}

.burger, .header.burger {
    display: none
}

.wrapper {
    display: flex;
    flex-direction: column
}

.inner {
    min-height: 100vh
}

.head h3 a {
    color: #fff;
    font-size: calc(30vw / var(--resizer) * 100)
}

.inner:before {
    content: "";
    top: -5%;
    height: 150%;
    background: url(intro.webp) bottom/cover no-repeat;
    z-index: -1
}

.content .head, .content .text, .content h2, .content h3 {
    width: 48%
}

.inner .row {
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    max-width: calc(931vw / var(--resizer) * 100)
}

.inner .row h1 {
    font-style: normal;
    font-weight: 800;
    font-size: calc(96vw / var(--resizer) * 100);
    line-height: calc(85vw / var(--resizer) * 100);
    color: #fff;
    zoom: 70%;
    -ms-zoom: .7;
    -webkit-zoom: .7;
    -moz-transform: scale(.7);
    -moz-transform-origin: left center
}

.inner .row .button span, .inner .row p {
    font-weight: 400;
    font-size: calc(18vw / var(--resizer) * 100);
    line-height: 160%;
    color: #fff;
    font-style: normal
}

.inner .row .button {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: calc(23vw / var(--resizer) * 100) calc(73vw / var(--resizer) * 100);
    background: linear-gradient(93.85deg, #70d6f9 .45%, #389df0);
    box-shadow: inset 0 calc(4vw / var(--resizer) * 100) calc(6vw / var(--resizer) * 100) hsla(0, 0%, 100%, .31);
    border-radius: calc(19vw / var(--resizer) * 100);
    align-self: flex-start
}

.language a, .language.active .language__list {
    display: block
}

.content {
    padding: 0 0 calc(80vw / var(--resizer) * 100) 0
}

.content .img-text img {
    width: 100%;
    height: 100%
}

.content .block, .content .row {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap
}

.content h2 {
    margin: 0 0 calc(60vw / var(--resizer) * 100) 0;
    font-size: calc(64vw / var(--resizer) * 100)
}

.content h2, .content h3 {
    font-style: normal;
    color: #fff
}

.content h3 {
    margin: 0 0 calc(40vw / var(--resizer) * 100) 0;
    font-size: calc(44vw / var(--resizer) * 100)
}

.content .text, .content ol, .content p, .content ul {
    margin: 0 0 calc(30vw / var(--resizer) * 100) 0
}

.content ol li, .content p, .content ul li, td, th {
    font-style: normal;
    font-weight: 400;
    font-size: calc(16vw / var(--resizer) * 100);
    line-height: calc(26vw / var(--resizer) * 100);
    color: #fff
}

.content p {
    width: 100%
}

.content ol, .content ul {
    padding: 0 0 0 calc(20vw / var(--resizer) * 100)
}

table {
    width: 100%;
    border-collapse: collapse;
    border-spacing: 0
}

table, td, th {
    border: 1px solid #389df0
}

td, th {
    padding: 5px
}

th {
    background-color: #7accee !important
}

.content .img-text {
    width: 48%;
    font-size: 0;
    line-height: 0;
    margin: 0 0 calc(60vw / var(--resizer) * 100) 0;
    border-radius: calc(40vw / var(--resizer) * 100);
    overflow: hidden
}

.footer .row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: calc(2vw / var(--resizer) * 100) solid rgba(27, 89, 146, .17)
}

.footer .logo {
    margin: 0 calc(30vw / var(--resizer) * 100) calc(10vw / var(--resizer) * 100) 0;
    height: calc(37vw / var(--resizer) * 100);
    width: auto
}

.header nav {
    padding-right: 5%
}

.language {
    position: absolute;
    right: 5%;
    top: 42%;
    cursor: pointer
}

.language a, .language p {
    width: calc(16vw / var(--resizer) * 100);
    height: calc(16vw / var(--resizer) * 100);
    padding: calc(5vw / var(--resizer) * 100) 0
}

.block__expert p {
    margin: 0 0 1%
}

.language img {
    width: calc(16vw / var(--resizer) * 100);
    height: calc(10vw / var(--resizer) * 100)
}

.language p {
    padding: 0
}

.language__list {
    position: absolute;
    top: calc(15vw / var(--resizer) * 100);
    left: 0;
    display: none
}

.language a img {
    max-width: 100%
}

.block__expert {
    display: flex;
    background-color: #389df0;
    justify-content: space-around;
    align-items: center;
    border-radius: 10px;
    border-left: 11px solid #3167b8;
    margin: 100px auto;
    padding: 20px 15px
}

.block__expert-img img {
    max-width: 180px;
    width: 90%;
    border-radius: 50%
}

.block__expert__data-mobile {
    display: none
}

.block__expert__text {
    width: 80%
}

.ypauthor {
    background: #1b204d;
    border-radius: calc(20vw / var(--resizer) * 100);
    padding: calc(20vw / var(--resizer) * 100)
}

.ypauthorRow {
    margin: 0 0 calc(2vw / var(--resizer) * 100) 0;
    display: flex;
    align-items: center
}

.ypauthorRow img {
    margin: 0 calc(20vw / var(--resizer) * 100) 0 0;
    height: calc(226vw / var(--resizer) * 100);
    width: calc(226vw / var(--resizer) * 100);
    border-radius: calc(20vw / var(--resizer) * 100)
}

.ypauthorTitle {
    color: #fff;
    margin: 0 0 calc(10vw / var(--resizer) * 100) 0;
    font-size: calc(32vw / var(--resizer) * 100);
    font-style: normal;
    font-weight: 800;
    line-height: 87.023%
}

.ypauthorType {
    color: #fff;
    font-size: calc(16vw / var(--resizer) * 100);
    font-style: italic;
    font-weight: 600;
    line-height: 160.023%
}

@media screen and (max-width: 768px) {
    .ypauthor {
        padding: 15px;
        border-radius: 22px
    }

    .ypauthorRow {
        flex-direction: column
    }

    .ypauthorRow a {
        display: flex;
        width: 100%
    }

    .ypauthorBody {
        width: 100%
    }

    .ypauthorTitle {
        font-size: 20px;
        margin: 0 0 10px
    }

    .ypauthorType {
        font-size: 14px
    }

    .ypauthorRow img {
        margin: 0;
        width: 100%;
        height: 600px
    }

    .block__expert {
        flex-direction: column
    }

    .inner:before {
        background: url(mob.webp) bottom/cover no-repeat
    }

    .language img {
        width: 30px;
        height: 20px
    }
    .menu {
        display: flex;
    }
    .burger {
        display: none;
    }

    .header nav {
        padding-right: 0
    }

    nav {
        order: 3
    }


    .header, .header ul {
        transition: .4s linear
    }

    .container, .inner .row {
        max-width: 100%
    }

    .footer .logo, .header .logo {
        margin: 0;
        height: 25px
    }

    .footer ul li, .header ul li {
        text-align: left;
        align-self: flex-start;
        margin: 0 0 25px;
        line-height: 27px
    }

    .content .head, .content .img-text, .content .text, .content img, .header ul {
        width: 100%
    }

    .header, header {
        border-bottom: 1px solid rgba(27, 89, 146, .17)
    }

    .inner {
        display: flex;
        justify-content: center;
        align-items: center
    }

    .author {
        align-self: flex-start;
        width: 300px;
        height: 300px;
        margin: 0 0 20px
    }

    .inner .container, .inner .row {
        min-height: auto
    }

    .container {
        flex-direction: column-reverse;
        padding: 0 25px
    }

    .header.active {
        background: url(mob-1.webp) 100% 100%/cover no-repeat
    }

    .header .row {
        padding: 15px 0;
        border-bottom: 2px solid hsla(0, 0%, 100%, .05)
    }

    .header ul {
        position: absolute;
        top: -2000%;
        left: 0;
        padding: 25px;
        flex-direction: column;
        background: url(mob-2.webp) 100% 0/cover no-repeat
    }

    .header.active ul {
        top: 100%
    }

    .footer ul li, .header ul li, .inner .row .button span, .inner .row p {
        font-size: 18px
    }

    .burger {
        display: block;
        width: 40px;
        height: 40px;
        background: url(burger.png) 50%/contain no-repeat;
        outline: 0;
        border: none;
        cursor: pointer;
        transition: .4s ease-in-out
    }

    .header.active .burger {
        background: url(close.png) 50%/cover no-repeat;
        transition: .4s ease-in-out
    }

    .inner .row h1 {
        font-size: 66px;
        line-height: 75px
    }

    .inner .row h1, .inner .row p {
        margin: 0 0 25px
    }

    .inner .row .button {
        padding: 23px 73px;
        box-shadow: inset 0 4px 6px hsla(0, 0%, 100%, .31);
        border-radius: 19px
    }

    .footer .row {
        flex-direction: column;
        padding: 30px 0;
        border-top: 2px solid hsla(0, 0%, 100%, .05)
    }

    .footer .logo {
        align-self: flex-start
    }

    .footer ul {
        margin: 43px 0 0
    }

    .footer ul li {
        width: 50%
    }

    .content .block, .content .row {
        flex-direction: column;
        flex-wrap: nowrap
    }

    .content h2 {
        margin: 0 0 40px;
        font-size: 44px
    }

    .content ol li, .content p, .content ul li, td, th {
        font-size: 16px;
        line-height: 26px
    }

    .content img {
        margin: 0 0 40px;
        border-radius: 20px
    }

    .content .text, .content p {
        margin: 0 0 30px
    }

    .content h3 {
        margin: 0 0 40px;
        font-size: 33px
    }

    .head h3 a {
        font-size: 25px
    }

    .content ol, .content ul {
        margin: 0 0 30px;
        padding: 0 0 0 20px
    }

    header ul {
        border-top: 1px solid rgba(27, 89, 146, .17)
    }

    .language__list {
        top: 43px;
        top: 36px
    }

    .language a, .language p {
        width: 30px;
        height: 31px
    }

    .block__expert-img img {
        border-radius: 50%
    }

    .block__expert p {
        margin-bottom: 2%
    }
}

@media screen and (max-width: 600px) {
    .ypauthorRow img {
        height: 400px
    }

    .language a, .language p {
        height: 25px
    }

    .language img {
        width: 26px;
        height: 17px
    }

    .language {
        right: 17%;
        top: 38%
    }

    .content h2, .content h3, .content img {
        margin: 0 0 30px
    }

    .container {
        padding: 0 15px
    }

    .header .logo {
        height: 20px
    }

    .header .burger {
        height: 30px;
        width: 30px
    }

    .header ul {
        padding: 29px 15px
    }

    .header ul li {
        margin: 0 0 20px;
        font-size: 12px;
        line-height: 160.02%
    }

    .inner .row h1 {
        margin: 0 0 25px;
        font-size: 48px;
        line-height: 87.02%
    }

    .inner .row .button span, .inner .row p {
        font-size: 14px
    }

    .inner .row p {
        line-height: 160%
    }

    .inner .row .button {
        width: 100%;
        padding: 18px;
        border-radius: 13px
    }

    .content h2 {
        font-size: 32px;
        line-height: 87.02%
    }

    .content h3 {
        font-size: 22px;
        line-height: 87.02%
    }

    .content ol li, .content p, .content ul li, td {
        line-height: 19.2px;
        font-size: 12px
    }

    .content .text, .content p, .footer ul li {
        margin: 0 0 20px
    }

    .content ol, .content ul {
        margin: 0 0 20px;
        padding: 0 0 0 20px
    }

    .footer ul {
        margin: 43px 0 0
    }

    .footer ul li {
        font-size: 12px;
        line-height: 160%
    }

    .header ul {
        border: 0
    }

    .block__expert p {
        margin-bottom: 2%
    }

    .block__expert {
        margin: 30px auto
    }
}

@media screen and (max-width: 435px) {
    .ypauthorRow img {
        height: 300px
    }
}

@media screen and (max-width: 321px) {
    .ypauthorRow img {
        height: 250px
    }
}

.content {
    padding: 0 35px
}



.img-fig {
    display: block;
    margin: 0 auto;
    max-width: 100%;
}

.fig-img img {
    border-radius: 14px;
    margin: 30px auto;
}


table {
    margin-bottom: 20px;
}