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

h2 {
	text-align: left!important;
	color: #fff;
	font-size: 30px;
	margin-top: 40px;
	margin-bottom: 40px;
}

h3 {
	text-align: left!important;
	color: #fff;
	font-size: 22px;
	margin-top: 40px;
	margin-bottom: 40px;
}

ul li {
	margin: 20px;
	color: #fff;

}

.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(/app/img/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: 100%;
    background: url(/app/img/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(/app/img/mob.webp) bottom/cover no-repeat
    }

    .language img {
        width: 30px;
        height: 20px
    }

    .header nav {
        padding-right: 0
    }

    nav {
        order: 3
    }

    .language {
        order: 2;
        right: 15%;
        top: 37%
    }

    .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(/app/img/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(/app/img/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(/app/img/burger.png) 50%/contain no-repeat;
        outline: 0;
        border: none;
        cursor: pointer;
        transition: .4s ease-in-out
    }

    .header.active .burger {
        background: url(/app/img/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
    }
}