body {
    --scroll: 0;
}
/* .header {
    transform: translateY(-105px)
} */
.header.case-oil-visible {
    transform: translateY(0);
}
.header-info {
    transform: translateY(-105px)
}
.header-info.case-oil-visible {
    transform: translateY(0);
}
h1, h2, h3, h4 {
    margin: 0;
}
.case-wrapper {
    position: fixed;
    font-family: 'Gilroy';
    color: #252525;
    /* height: 5000px; */
    overflow-x: hidden;
}
@media (max-width: 678px) {
    .case-wrapper {
        position: relative;
    }
}
.case-menu {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    transform: translate(120vw, 0);
    transition: 0.6s ease;
    z-index: 40;
}
.case-menu__inner {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 41;
}
.case-menu.open {
    transform: translate(0%, 0);
    transition: 0.3s ease;
}
.case-menu__wrapper {
    position: absolute;
    right: 0;
    top: 50%;
    z-index: 15;
    width: 512px;
    border-radius: 20px 0 0 20px;
    background-color: #fff;
    padding: 187px 20px 187px 65px;
    overflow: hidden;
    transform: translate(0, -50%);
    transition: 0.s ease;
    box-shadow: -27px 0px 30px 0px #46578A0A;
    z-index: 42;
}
.case-menu__wrapper::before {
    content: '';
    position: absolute;
    top: 50%;
    transform: translate(70px, -50%);
    right: -270%;
    display: block;
    height: 1500px;
    width: 1500px;
    background-color: #F5DD07;
    border-radius: 50%;
    transition: 0.3s ease;
}
.case-menu.open::before {
    transform: translate(0, -50%);
    transition: 0.3s ease 0.2s;
}
.case-menu.black {
    box-shadow: none;
}
.case-menu__button {
    
    position: fixed;
    right: 43px;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    z-index: 43;
    display: none;
}
.case-menu__button svg path {
    transition: 0.3s ease;
}
.case-menu__button.black svg path {
    stroke: #FFF;
    transition: 0.3s ease;
}
.case-menu__button.black.open svg path {
    stroke: #252525;
    transition: 0.3s ease;
}
.case-menu ul {
    max-width: 347px;
    width: 100%;
    font-weight: 600;
    font-size: 24px;
    line-height: 28px;
    list-style: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 50px;
}
.case-menu__button object {
    pointer-events: none;
}
@media (max-width: 768px) {
    .case-menu__button {
        right: 17px;
        width: 40px;
        height: 40px;
    }
    .case-menu__wrapper {
        width: 320px;
        padding: 163px 10px 163px 20px;
    }
    .case-menu__wrapper::before {
        width: 737px;
        height: 1190px;
        right: -211%;
    }
    .case-menu ul {
        max-width: 245px;
        font-size: 16px;
        line-height: 24px;
        gap: 30px;
    }
}

/* первый экран */
.first-screen {
    background-color: #252525;
    overflow: hidden;
}
.first-screen.active {
    height: 2850px;
    /* height: 160vh; */
    background-color: #fff;
}
.first-screen__preview {
    position: relative;
    width: 100vw;
    height: 100vh;
}
.first-screen.active .first-screen__download {
    position: fixed;
    transform: translateX(calc((var(--scroll))*(-0.31%) ));
}
.first-screen.unvisible .first-screen__download {
    position: absolute;
}
.first-screen.unvisible .first-screen__preview {
    height: 2850px;
}
.first-screen__download {
    position: absolute;
    bottom: 0;
    background-color: #F5DD07;
    transition: 0.3s ease;
}
.first-screen__download.active {
    animation: download 1s ease-in-out 0.5s forwards;
}
.first-screen.active .first-screen__download.stop-scroll {
    transform: translateX(-62%);
}
@keyframes download {
    0% {
        width: 0;
        height: 0.5vh;
    }
    12% {
        width: 40vw;
    }
    30% {
        width: 60vw;
    }
    56% {
        width: 100vw;
        height: 0.5vh;
    }
    100% {
        width: 100vw;
        height: 100vh;
    }
}
.first-screen__logo img {
    width: 100%;
}
.first-screen__logo {
    position: absolute;
    width: 53vw;
    z-index: 1;
    bottom: 0;
    left: 52%;
    transform: translate(-50%, 100%);
    opacity: 0;
    transition: 0.3s ease;
}
.first-screen__logo.active {
    opacity: 1;
    transform: translate(-50%, 0);
    transition: 0.3s ease;
    animation: logoRight 0.5s ease-in-out 0.9s forwards;
}
.first-screen.active .first-screen__logo {
    will-change: transform;
    position: fixed;
    animation: none;
    transform: translate(-5%, calc((var(--scroll))*1%));
}
.first-screen.active .first-screen__logo.stop-scroll {
    display: none;
}
@keyframes logoRight {
    0% {
        transform: translate(-50%, 0);
    }
    100% {
        transform: translate(-5%, 0);
    }
}
.first-screen__prometei {
    position: absolute;
    bottom: 0;
    right: 52%;
    z-index: 1;
    width: 60vw;
    transform: translate(50%, 0);
    opacity: 0;
}
.first-screen__prometei img {
    width: 100%;
}
.first-screen__prometei.active {
    animation: prometei 1s ease-in-out forwards;
}
.first-screen.active .first-screen__prometei {
    position: fixed;
    scale: calc(-0.00221 * var(--scroll) + 1.00221);
    will-change: scale;
}
.first-screen.active .first-screen__prometei.stop-scroll {
    scale: 0.56;
}
.first-screen.first-screen.unvisible .first-screen__prometei {
    position: absolute;
}
@keyframes prometei {
    0% {
        opacity: 0;
        transform: translate(50%, 40%);
    } 
    50% {
        opacity: 1;
        transform: translate(50%, 40%);
    }
    100% {
        opacity: 1;
        transform: translate(20%, 40%);
    }
}
.first-screen__text {
    position: absolute;
    z-index: 1;
    /* top: 10vh; */
    top: 52px;
    right: 50%;
    transform: translate(50%, 80%);
    display: flex;
    flex-direction: column;
    gap: 45px;
    opacity: 0;
    transition: 0.8s ease;
}
.first-screen__text.show-banner {
    top: 102px;
}
.first-screenMob {
    display: none;
}
@media (max-width: 1024px) {
    .first-screen__prometei {
        width: 64vw;
        right: 48%;
    }
    .first-screen__text {
        top: 13%;
    }
    .first-screen__text.show-banner {
        top: 20%;
    }
}
.first-screen__text.active {
    opacity: 1;
    transform: translate(50%, 50%);
    transition: 0.8s ease;
}
.first-screen.active .first-screen__text {
    will-change: transform;
    transform: translate(50%, calc(50% - 1.5 * var(--scroll) * 1%));
}
.first-screen.active .first-screen__text.stop-scroll {
    display: none;
}
.first-screen__title {
    font-weight: 700;
    font-size: 88px;
    line-height: 98px;
    text-align: center;
}

.first-screen__descr {
    font-weight: 400;
    font-size: 28px;
    line-height: 44px;
    text-align: center;
}

.first-screen__info {
    margin-top: 80vh;
    opacity: 0;
    position: absolute;
    right: 15vw;
    /* top: 50%; */
    /* transform: translateY(-50%); */
    width: 587px;
    /* height: 500px; */
}
.first-screen.active .first-screen__info {
    opacity: 1;
}
.first-screen.first-screen.unvisible .first-screen__info {
    top: 0;
}
.first-screen__info-first {
    opacity: 1;
    transition: opacity 0.5s ease;
    margin-bottom: 500px;
}

.first-screen__info-second {
    opacity: 1;
    transition: opacity 0.5s ease;
}

.first-screen__info-title {
    font-weight: 700;
    font-size: 55px;
    line-height: 70px;
    margin: 0;
}
.first-screen__info-text {
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    margin: 45px 0;
}

.first-screen__info-text a {
    font-weight: 600;
    border-bottom: 1px solid #252525;
    transition: .3s linear;
}

.first-screen__info-text a:hover {
    border-bottom: 1px solid transparent;
}

.first-screen__info-list {
    list-style: none;
    padding: 0;
    font-weight: 400;
    font-size: 21px;
    line-height: 34px;
    display: flex;
    flex-direction: column;
    gap: 25px;
}
.first-screen__info-list li {
    position: relative;
    padding-left: 33px;
}
.first-screen__info-list li a {
    font-weight: 600;
    border-bottom: 1px solid #252525;
    transition: .3s linear;
}

.first-screen__info-list li a:hover {
    border-bottom: 1px solid transparent;
}
.first-screen__info-list li::after {
    content: '';
    position: absolute;
    top: 12px;
    left: 0;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #F5DD07;
}
@media (max-width: 1920px) {
    .first-screen__text {
        gap: calc(30px + (45 - 30) * ((100vw - 1536px) / (1920 - 1536)));
        top: calc(20px + (52 - 20) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen__text.show-banner {
        top: calc(70px + (102 - 70) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen.active {
        height: calc(2600px + (2850 - 2600) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen.unvisible .first-screen__preview {
        height: calc(2600px + (2850 - 2600) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen__info {
        width: calc(472px + (587 - 472) * ((100vw - 1400px) / (1920 - 1400)));
        /* right: calc(7vw - ((15 - 7) * ((100vw - 922px) / (1920 - 922)))); */
    }
    .first-screen__info-title {
        font-size: calc(45px + (55 - 45) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(55px + (70 - 55) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen__title {
        font-size: calc(65px + (88 - 65) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(80px + (98 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen__descr {
        font-size: calc(22px + (28 - 22) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(34px + (44 - 34) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen__info-text {
        font-size: calc(20px + (24 - 20) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(30px + (38 - 30) * ((100vw - 1536px) / (1920 - 1536)));
        margin: calc(40px + (45 - 40) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .first-screen__info-list {
        font-size: calc(16px + (21 - 16) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(25px + (34 - 25) * ((100vw - 1536px) / (1920 - 1536)));
        gap: calc(20px + (25 - 20) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .first-screen__info-list li {
        padding-left: calc(21px + (33 - 21) * ((100vw - 922px) / (1920 - 922)));
    }
    .first-screen__info-list li::after {
        top: calc(9px + (12 - 9) * ((100vw - 1280px) / (1920 - 1280)));
        width: calc(6px + (8 - 6) * ((100vw - 1280px) / (1920 - 1280)));
        height: calc(6px + (8 - 6) * ((100vw - 1280px) / (1920 - 1280)));
    }
    .first-screen__info {
        margin-top: calc(90vh + (80 - 90) * ((100vw - 1280px) / (1920 - 1280)));
    }
}
@media (max-width: 1536px) {
    .first-screen__title {
        font-size: 65px;
        line-height: 80px;
    }
    .first-screen__descr {
        font-size: 22px;
        line-height: 34px;
    }
    .first-screen__text {
        top: 20px;
        gap: 30px;
    }
    .first-screen__text.show-banner {
        top: 70px;
    }
    .first-screen__info-title {
        font-size: calc(35px + (45 - 35) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(45px + (55 - 45) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .first-screen__info-text {
        margin: calc(35px + (40 - 35) * ((100vw - 1280px) / (1536 - 1280))) 0;
        font-size: calc(16px + (20 - 16) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(24px + (30 - 24) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .first-screen__info-list {
        font-size: 16px;
        line-height: calc(24px + (25 - 24) * ((100vw - 1280px) / (1536 - 1280)));
        gap: calc(15px + (20 - 15) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .first-screen__info-first {
        margin-bottom: calc(300px + (500 - 300) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .first-screen.active {
        height: calc(2000px + (2600 - 2000) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .first-screen.unvisible .first-screen__preview {
        height: calc(2000px + (2600 - 2000) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1400px) {
    .first-screen__title {
        font-size: calc(50px + (65 - 50) * ((100vw - 1280px) / (1400 - 1280)));
        line-height: calc(60px + (80 - 60) * ((100vw - 1280px) / (1400 - 1280)));
    }
    .first-screen__descr {
        font-size: calc(16px + (22 - 16) * ((100vw - 1280px) / (1400 - 1280)));
        line-height: calc(24px + (34 - 24) * ((100vw - 1280px) / (1400 - 1280)));
    }
}
@media (max-width: 1280px) {
    .first-screen__title {
        font-size: 50px;
        line-height: 60px;
    }
    .first-screen__descr {
        font-size: 16px;
        line-height: 24px;
    }
    .first-screen.active {
        height: calc(2200px + (2000 - 2200) * ((100vw - 922px) / (1280 - 922)));
    }
    .first-screen.unvisible .first-screen__preview {
        height: calc(2200px + (2000 - 2200) * ((100vw - 922px) / (1280 - 922)));
    }
    .first-screen__info-first {
        margin-bottom: 300px;
    }
    .first-screen__info-title {
        font-size: 35px;
        line-height: 45px;
    }
    .first-screen__info-text {
        margin: 35px 0;
        font-size: 16px;
        line-height: 24px;
    }
    .first-screen__info-list {
        line-height: 24px;
    }
    .first-screen__info-list li {
        padding-left: 21px;
    }
    .first-screen__info-list li::after {
        top: 9;
        width: 6px;
        height: 6px;
    }
}
@media (max-width: 1024px) {
    .first-screen__text {
        top: 160px;
    }
    .first-screen__text.show-banner {
        top: 200px;
    }
    .first-screen__prometei {
        width: 70vw;
    }
    .first-screen__info {
        width: 411px;
        right: 6vw;
    }
    .first-screen__info-list {
        gap: 20px;
    }
}
@media (max-width: 922px) {
    .first-screen__info {
        width: calc(320px + (411 - 320) * ((100vw - 670px) / (922 - 670)));
    }
}
@media (max-width: 670px) {
    .first-screen--desctop {
        display: none;
    }
    .first-screenMob {
        display: block;
    }
    .first-screenMob__preview {
        position: relative;
        height: 100vh;
        background-image: linear-gradient(101deg, rgba(245,221,7,1) 0%, rgba(245,221,7,1) 100%);
        background-repeat: no-repeat;
        background-position-x: -100vw;
        animation: mobDownload 1.2s ease-in-out 0.3s forwards;
        overflow: hidden;
    }
    .first-screenMob__preview::before {
        content: '';
        position: absolute;
        height: 99%;
        width: 100%;
        top: 0;
        background-color: #252525;
        animation: mobBg 0.5s ease 1.5s forwards;
    }
    @keyframes mobBg {
        from {
            transform: translateY(0);
        } to {
            transform: translateY(-100vh);
        }
    }
    @keyframes mobDownload {
        0% {
            background-position-x: -100vw;
        }
        30% {
            background-position-x: -90vw;
        }
        70% {
            background-position-x: -50vw;
        }
        100% {
            background-position-x: 0;
        }
    }
    .first-screenMob__prometei {
        position: absolute;
        bottom: 0;
        width: 100%;
        opacity: 0;
        animation: mobPrometeiOpacity 0.5s 2s forwards;
    }
    @keyframes mobPrometeiOpacity {
        from {
            opacity: 0;
        }
        to {
            opacity: 1;
        }
    }
    .first-screenMob__prometei img {
        width: 100%;
    }
    .first-screenMob__logo {
        position: absolute;
        bottom: 0;
        width: 100%;
        opacity: 0;
        animation: mobPrometeiOpacity 0.2s 1.5s forwards;
        transform: translateY(0);
        transition: 0.3s ease;
    }
    .first-screenMob__logo img {
        width: 100%;
    }
    .first-screenMob__preview.visible .first-screenMob__logo {
        transform: translateY(100vh);
        transition: 0.3s ease;
    }
    .first-screenMob__text {
        padding-top: 20%;
        max-width: 80%;
        width: 100%;
        margin: auto;
        display: flex;
        flex-direction: column;
        gap: 25px;
        opacity: 0;
        animation: mobPrometeiOpacity 0.5s ease 2.2s forwards;
        transform: translateY(0);
        transition: 0.3s ease;
    }
    .first-screenMob__text.show-banner {
        padding-top: 20%;
    }
    .first-screenMob__preview.visible .first-screenMob__text {
        transform: translateY(-100vh);
        transition: 0.3s ease;
    }
    .first-screenMob__text h2 {
        font-size: 35px;
        line-height: 45px;
        text-align: center;
    }
    .first-screenMob__text p {
        text-align: center;
        font-size: 16px;
        line-height: 24px;
    }
    .first-screenMob__info {
        padding: 60px 25px 0;
        display: flex;
        flex-direction: column;
        gap: 120px;
    }
    .first-screenMob__info-block {
        display: flex;
        flex-direction: column;
        gap: 30px;
    }
    .first-screenMob__info h2 {
        font-weight: 700;
        font-size: 30px;
        line-height: 40px;
    }
    .first-screenMob__info p {
        font-weight: 400;
        font-size: 22px;
        line-height: 35px;
    }
    .first-screenMob__info ul {
        list-style: none;
        padding: 0;
        margin: 0;
        font-size: 18px;
        line-height: 28px;
        display: flex;
        flex-direction: column;
        gap: 20px;
    }
    .first-screenMob__info li {
        padding-left: 33px;
        position: relative;
    }
    .first-screenMob__info li::after {
        content: '';
        position: absolute;
        top: 9px;
        left: 0;
        display: block;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background-color: #F5DD07;
    }
}
@media (max-width: 500px) {
    .first-screenMob__text.show-banner {
        padding-top: 35%;
    }
}
@media (max-width: 430px) {
    .first-screenMob__text.show-banner {
        padding-top: 55%;
    }
}


/* 
второй экран */

.second-screen {
    display: flex;
    width: 100vw;
    opacity: 0;
    transition: 0.3s ease;
    height: 100vh;
}
.second-screen.active {
    opacity: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.3s ease;
}
.second-screen__content {
    position: relative;
    width: 100%;
}
.second-screen__content span {
    will-change: opacity;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    font-weight: 700;
    font-size: 84px;
    line-height: 104px;
}
.second-screen__content span.active {
    opacity: 1;
}
@media (max-width: 1920px) {
    .second-screen__content span {
        font-size: calc(65px + (84 - 65) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(80px + (104 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .second-screen__content span {
        font-size: calc(50px + (65 - 50) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(60px + (80 - 60) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .second-screen__content span {
        font-size: 50px;
        line-height: 60px;
    }
}
@media (max-width: 922px) {
    .second-screen__content span {
        font-size: calc(35px + (60 - 35) * ((100vw - 414px) / (922 - 414)));
        line-height: calc(45px + (74 - 45) * ((100vw - 414px) / (922 - 414)));
    }
}
/* конец второго экрана */


/* третий экран */
.third-screen {
    position: relative;
    height: 300vh;
    /* height: 2632px; */
}
.third-screen__wrapper {
    display: flex;
    gap: 184px;
}
.third-screen__bg {
    width: 41vw;
    display: flex;
    justify-content: center;
    background-image: url(/wp-content/themes/toimi/assets/img/thirdBg.png);
}
.third-screen__content {
    margin: 250px 0;
    max-width: 587px;
    width: 100%;
}
.flashing-list {
    list-style: none;
    margin: 100px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 100px;
}
.flashing-list li {
    position: relative;
    padding-left: 52px;
}
.flashing-list li::after {
    content: '';
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #F5DD07;
    left: 0;
    top: 15px;
}
.flashing-list li::before {
    content: '';
    position: absolute;
    display: block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background-color: #F5DD07;
    opacity: 0.15;
    left: 0;
    top: 14px;
}
@keyframes pulse-li {
    0% {
        transform: scale(1);
        opacity: 0.15;
    } 
    20% {
        opacity: 0.15;
    }
    60% {
        opacity: 0.15;
    }
    100% {
        transform: scale(6);
        opacity: 0;
    }

}
.flashing-list.active li:nth-child(1):before {
    animation: pulse-li 0.8s ease-in-out 0s 1;
}
.flashing-list.active li:nth-child(2):before {
    animation: pulse-li 0.8s ease-in-out 0.3s 1;
}
.flashing-list.active li:nth-child(3):before {
    animation: pulse-li 0.8s ease-in-out 0.6s 1;
}
.flashing-list.active li:nth-child(4):before {
    animation: pulse-li 0.8s ease-in-out 0.9s 1;
}

.flashing-list h3 {
    font-weight: 700;
    font-size: 32px;
    line-height: 42px;
    margin: 0 0 10px;
}
.flashing-list p {
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
}
/* .third-screen__svg {
    width: 150px;
} */
.swiper-svg {
    width: 100%;
    padding: 9vh 5vw;
    will-change: transform, ; 
}
.swiper-svg .swiper-wrapper {
    height: auto;
}
.swiper-svg .swiper-slide svg {
    width: 370px;
    padding: 10px 0 70px;
    margin: auto;
}
.swiper-svg .swiper-slide {
    opacity: 0 !important;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 70px;
}
.swiper-svg .swiper-slide-active {
    opacity: 1 !important;
}
.swiper-svg .swiper-slide .slide-description {
    font-weight: 400;
    font-style: italic;
    font-size: 18px;
    line-height: 28px;
    max-width: 455px;
    width: 100%;
    margin-right: auto;
}

.swiper-svg .swiper-slide .slide-description a {
    font-weight: 600;
    border-bottom: 1px solid #252525;
    transition: .3s linear;
}
.swiper-svg .swiper-slide .slide-description a:hover {
    border-bottom: 1px solid transparent;
}
.swiper-svg .swiper-slide .slide-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}
.swiper-svg .swiper-slide .slide-content div {
    font-weight: 400;
    font-size: 18px;
    line-height: 28px;
}
.swiper-svg .swiper-slide .slide-content .top-text {
    position: relative;
    margin-right: auto;
}
.swiper-svg .swiper-slide .slide-content .top-text::before {
    content: "";
    display: block;
    background-image: url(/wp-content/themes/toimi/assets/img/arrow1.svg);
    width: 60px;
    height: 90px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    bottom: -100px;
    right: -44px;
}
.swiper-svg .swiper-slide .slide-content .bottom-text {
    position: relative;
    margin-left: auto;
}
.swiper-svg .swiper-slide .slide-content .bottom-text::before {
    content: "";
    display: block;
    background-image: url(/wp-content/themes/toimi/assets/img/arrow2.svg);
    width: 140px;
    height: 90px;
    position: absolute;
    background-size: contain;
    background-repeat: no-repeat;
    top: -102%;
    left: -50%;
}
.swiper-svg .swiper-slide .slide-content object, .swiper-svg .swiper-slide .slide-content svg {
    width: 415px;
    margin: 0 auto;
}
.swiper-svg .swiper-nav {
    margin-top: 50px;
    display: flex;
    gap: 30px;
}
.swiper-svg .swiper-nav__buttton {
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fff;
    border: 1px solid #EDF5FF;
    cursor: pointer;
}
.swiper-svg .swiper-nav__buttton.swiper-button-disabled svg path {
    stroke: #E4E4E4;
    transition: 0.3s ease;
}
.swiper-svg .swiper-nav__buttton svg path {
    stroke: #252525;
    transition: 0.3s ease;
}
.swiper-svg .swiper-nav__buttton:hover svg path  {
    stroke: #F5DD07;
    transition: 0.3s ease;
}

.third-screen__triggers {
    position: absolute;
    z-index: 1;
    top: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
}
.third-screen__trigger {
    width: 100%;
    height: 100vh;
}
@media (max-width: 1920px) {
    .third-screen__wrapper {
        gap: calc(127px + (184 - 127) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .flashing-list {
        margin: calc(80px + (100 - 80) * ((100vw - 1536px) / (1920 - 1536))) 0 0;
        gap: calc(80px + (100 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .flashing-list li {
        padding-left: calc(38px + (52 - 38) * ((100vw - 922px) / (1920 - 922)));
    }
    .flashing-list li::before {
        width: calc(8px + (12 - 8) * ((100vw - 922px) / (1920 - 922)));
        height: calc(8px + (12 - 8) * ((100vw - 922px) / (1920 - 922)));
    }
    .flashing-list li::after {
        width: calc(8px + (12 - 8) * ((100vw - 922px) / (1920 - 922)));
        height: calc(8px + (12 - 8) * ((100vw - 922px) / (1920 - 922)));
    }
    .flashing-list h3 {
        font-size: calc(22px + (32 - 22) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(36px + (42 - 36) * ((100vw - 1536px) / (1920 - 1536)));
        margin: 0 0 calc(5px + (10 - 5) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .flashing-list p {
        font-size: calc(17px + (24 - 17) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(26px + (38 - 26) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .third-screen__content {
        max-width: calc(553px + (587 - 553) * ((100vw - 1536px) / (1920 - 1536)));
        margin: calc(100px + (250 - 100) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .third-screen {
        gap: calc(85px + (184 - 85) * ((100vw - 922px) / (1920 - 922)));
    }
    .swiper-svg .swiper-slide .slide-content div {
        font-size: calc(16px + (18 - 16) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(24px + (28 - 24) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .swiper-svg .swiper-slide .slide-description {
        font-size: calc(16px + (18 - 16) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(24px + (28 - 24) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .swiper-svg .swiper-nav {
        margin-top: calc(45px + (50 - 45) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .swiper-svg .swiper-slide svg {
        width: calc(300px + (370 - 300) * ((100vw - 922px) / (1920 - 922)));
    }
    .swiper-svg .swiper-slide .slide-content .bottom-text::before {
        width: calc(100px + (140 - 100) * ((100vw - 922px) / (1920 - 922)));
        /* left: calc(-45px + (-90 + 45) * ((100vw - 922px) / (1920 - 922))); */
    }
    .swiper-svg .swiper-slide .slide-content .top-text::before {
        right: calc(60px + (-44 - 60) * ((100vw - 922px) / (1920 - 922)));
    }
    .swiper-svg .swiper-slide .slide-content object, .swiper-svg .swiper-slide .slide-content svg {
        width: calc(296px + (415 - 296) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .swiper-svg .swiper-nav__buttton {
        width: calc(55px + (60 - 55) * ((100vw - 1536px) / (1920 - 1536)));
        height: calc(55px + (60 - 55) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .third-screen__wrapper {
        gap: calc(120px + (127 - 120) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .swiper-svg .swiper-slide {
        gap: calc(50px + (70 - 50) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .swiper-svg .swiper-slide .slide-content div {
        font-size: calc(14px + (16 - 14) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(22px + (24 - 22) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .swiper-svg .swiper-slide .slide-content object, .swiper-svg .swiper-slide .slide-content svg {
        width: calc(220px + (296 - 220) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .swiper-svg .swiper-slide .slide-content .bottom-text::before {
        /* top: calc(-61px + (-100 + 61) * ((100vw - 1280px) / (1536 - 1280))); */
    }
    .flashing-list {
        gap: calc(40px + (80 - 40) * ((100vw - 1280px) / (1536 - 1280)));
        margin: 80px 0 0;
    }
    .third-screen__content {
        margin: calc(160px + (100 - 160) * ((100vw - 1280px) / (1536 - 1280))) 0;
    }
    .flashing-list h3 {
        font-size: 22px;
        line-height: 36px;
        margin-bottom: 5px;
    }
    .flashing-list li {
        padding-left: 38px;
    }
    .flashing-list p {
        font-size: 17px;
        line-height: 26px;
    }

}
@media (max-width: 1280px) {
    .third-screen__wrapper {
        gap: calc(85px + (120 - 85) * ((100vw - 922px) / (1280 - 922)));
    }
    .swiper-svg .swiper-slide {
        gap: calc(93px + (50 - 93) * ((100vw - 922px) / (1280 - 922)));
    }
    .swiper-svg .swiper-slide .slide-content div {
        font-size: 14px;
        line-height: 22px;
    }
    .swiper-svg .swiper-slide .slide-content object, .swiper-svg .swiper-slide .slide-content svg {
        width: 220px;
    }
    .swiper-svg .swiper-slide .slide-description {
        font-size: 16px;
        line-height: 24px;
    }
    .swiper-svg .swiper-nav {
        margin-top: 30px;
    }
    .swiper-svg .swiper-nav__buttton {
        width: 55px;
        height: 55px;
    }
    .third-screen__content {
        margin: calc(190px + (160 - 190) * ((100vw - 922px) / (1280 - 922))) 0;
    }
    .flashing-list {
        margin: calc(50px + (80 - 50) * ((100vw - 922px) / (1280 - 922))) 0;
        gap: calc(50px + (40 - 50) * ((100vw - 922px) / (1280 - 922)));
    }
}
@media (max-width: 1024px) {
    .swiper-svg .swiper-slide .slide-content {
        gap: 20px;
    }
    .third-screen__content {
        max-width: 411px;
    }
}
@media (max-width: 768px) {
    .third-screen__wrapper {
        flex-direction: column;
        gap: 0;
    }
    .third-screen__bg {
        width: 100%;
        padding: 60px 20px 0;
    }
    .swiper-svg {
        max-width: 100%;
    }
    .swiper-svg .swiper-slide {
        gap: 70px ;
    }
    .swiper-svg .swiper-slide .slide-content div {
        font-size: 14px;
        line-height: 22px;
    }
    .swiper-svg .swiper-slide .slide-description {
        text-align: center;
        margin-right: 0;
        font-size: 14px;
        line-height: 22px;
    }
    .swiper-svg .swiper-slide .slide-content .bottom-text::before {
        top: -50px;
        width: 89px;
        left: -50px;
    }
    .swiper-svg .swiper-slide .slide-content .top-text::before {
        right: 7%;
    }
    .swiper-svg .swiper-nav__buttton {
        width: 50px;
        height: 50px;
    }
    .swiper-svg .swiper-nav {
        justify-content: center;
    }
    .swiper-svg .swiper-nav__buttton {
        width: 52px;
        height: 52px;
    }
    .swiper-svg .swiper-slide svg {
        width: 240px;
    }
    .third-screen__content {
        max-width: 100%;
        margin: 0;
        padding: 60px 20px;
    }
    
    .first-screen__info-title {
        font-size: 30px;
        line-height: 40px;
    }
    .flashing-list {
        margin: 50px 0 0;
        gap: 50px;
    }
    .flashing-list li {
        padding-left: 26px;
    }
    .flashing-list li::before {
        width: 6px;
        height: 6px;
    }
    .flashing-list li::after {
        width: 6px;
        height: 6px;
    }
    .flashing-list h3 {
        font-size: 22px;
        line-height: 36px;
        margin: 0 0 5px;
    }
    .flashing-list p {
        font-size: 16px;
        line-height: 24px;
    }
}
/*конец третьего экран */

/* четвертый экран */
.fourth-screen {
    position: absolute;
    top: 0;
    width: 100%;
    height: 150vh;
    transition: 0.3s ease;
    z-index: 10;
}
.fourth-screen__content {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    will-change: transform, opacity;
}
.four-screen__svg-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    width: 100vw;
    height: 100vh;
    transform: translateY(100vh);
    transition: transform 0.3s ease;
}
.fourth-screen.visible .four-screen__svg-wrapper {
    transform: translateY(0);
    transition: transform 0.3s ease;
}
/* .fourth-screen.visible .fourth-screen__content {
    top: 0 !important;
    transition: 0.6s ease, opacity 0.01s ease;
    opacity: 1;
} */
/* .fourth-screen.trigger .fourth-screen__content {
    position: absolute !important;
    top: 100% !important;
    opacity: 0;
    transition: 0.6s ease, opacity 0.01s ease;
} */
.fourth-screen__content svg {
    width: 60vw;
}.fourth-screen__content object {
    width: 537px;
    height: 300px;
}
.fourth-screen__content svg .willAnimated1 {
    transform: translate(0, 50%);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated2 {
    transform: translate(0, 50%);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated9 {
    transform: translate(0, 50%);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated10 {
    transform: translate(0, 50%);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated3 {
    transform: translate(50%, 0);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated7 {
    transform: translate(50%, 0);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated8 {
    transform: translate(50%, 0);
    opacity: 0;
}
.fourth-screen__content svg .willAnimated4 {
    opacity: 0;
}
.fourth-screen__content svg .willAnimated5 {
    opacity: 0;
}
.fourth-screen__content svg .willAnimated6 {
    opacity: 0;
}
.fourth-screen__content.scroll svg .willAnimated1, .fourth-screen__content.scroll svg .willAnimated2,
.fourth-screen__content.scroll svg .willAnimated3, .fourth-screen__content.scroll svg .willAnimated4,
.fourth-screen__content.scroll svg .willAnimated5,.fourth-screen__content.scroll svg .willAnimated6,
.fourth-screen__content.scroll svg .willAnimated7,.fourth-screen__content.scroll svg .willAnimated8,
.fourth-screen__content.scroll svg .willAnimated9, .fourth-screen__content.scroll svg .willAnimated10 {
    transform: translate(0, 0);
    opacity: 1;
    transition: 0.9s ease;
}
.fourth-screen__content.scroll.scroll2 svg .willAnimated1, .fourth-screen__content.scroll.scroll2 svg .willAnimated2,
.fourth-screen__content.scroll.scroll2 svg .willAnimated3, .fourth-screen__content.scroll.scroll2 svg .willAnimated4,
.fourth-screen__content.scroll.scroll2 svg .willAnimated5,.fourth-screen__content.scroll.scroll2 svg .willAnimated6,
.fourth-screen__content.scroll.scroll2 svg .willAnimated7,.fourth-screen__content.scroll.scroll2 svg .willAnimated8,
.fourth-screen__content.scroll.scroll2 svg .willAnimated9, .fourth-screen__content.scroll.scroll2 svg .willAnimated10 {
    opacity: 0;
    transition: 0.3s ease;
}
.fourth-screen__content svg .alsoAnimated {
    opacity: 0;
}
.fourth-screen__content.scroll2 svg .alsoAnimated {
    opacity: 1;
    transition: 0.5s ease;
}
/* .fourth-screen.visible .fourth-screen__content {
    transform: translateY(-100vh);
    transition: 0.5s ease;
} */

@media (max-width: 768px) {
    .fourth-screen__content svg {
        width: 374px;
    }
    .fourth-screen__content object {
        width: 70%;
        height: auto;
    }
}

.color-animation {
    position: absolute;
    top: 0;
    left: 100vw;
    width: 100%;
    bottom: 0;
    overflow: hidden;
    transition: 0.5s ease;
}
.color-animation.active {
   left: 0;
   transition: 0.5s ease; 
}
.color-slide {
    width: 100%;
    height: 100%;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
.swiper-slide-active .color-slide__card {
    animation: colorCard 4s ease 0.3s forwards;
}
@keyframes colorCard {
    0% {
        transform: translateX(100vw);
        scale: 0.74;
    }
    20% {
        transform: translateX(0);
        scale: 0.74;
    }
    35% {
        scale: 1;
        transform: translateX(0);
    }
    70% {
        scale: 1;
        transform: translateX(0);
    }
    80% {
        transform: translateX(0);
        scale: 0.74;
    }
    100% {
        transform: translateX(-100vw);
        scale: 0.74;
    }
    
}
.color-slide__card {
    transform: translateX(100vw);
    display: flex;
    flex-direction: column;
    scale: 0.74;
}
.color-slide__border {
    height: 26vw;
    width: 26vw;
    border: 22px solid white;
    display: flex;
    position: relative;
    overflow: hidden;
}
.color-slide__border::before {
    content: '';
    position: absolute;
    width: 440px;
    height: 440px;
    border-radius: 50%;
    bottom: -50%;
    left: -50%;
    scale: 0.01;
    transition: 0.3s ease;
}
.swiper-slide-active .color-slide__border::before {
    scale: 5;
    transition: 0.5s ease 1.6s;
}
.color-slide--yellow {
    background-image: url(/wp-content/themes/toimi/assets/img/colorFirstPic.webp)
}
.color-slide--yellow .color-slide__border::before {
    background-color: #F5DD07;
}
.color-slide--black {
    background-image: url(/wp-content/themes/toimi/assets/img/color4Pic1.webp);
}
.color-slide--black .color-slide__border::before {
    background-color: #252525;
}
.color-slide--grey {
    background-image: url(/wp-content/themes/toimi/assets/img/color5Pic1.webp);
}
.color-slide--grey .color-slide__border::before {
    background-color: #6A6A6A;
}
.color-slide--white {
    background-image: url(/wp-content/themes/toimi/assets/img/color6Pic1.webp);
}
.color-slide--white .color-slide__border::before {
    background-color: #F2F2F2;
}
.color-slide__descr {
    margin-top: -2px;
    padding: 0 22px 22px;
    width: 100%;
    background-color: white;
    font-weight: 400;
    font-size: 22px;
    line-height: 34px;
    color: #72757C;
}
.color-slide__descr h4 {
    font-weight: 700;
    font-size: 45px;
    line-height: 55px;
    color: #141414;
    opacity: 0;
    transition: opacity 0.3s ease 1.8s;
}
.swiper-slide-active .color-slide__descr h4 {
    opacity: 1;
    transition: opacity 0.3s ease 1.8s;
}
.color-slide__descr p {
    opacity: 0;
    transition: opacity 0.3s ease 2s;
}
.swiper-slide-active .color-slide__descr p {
    opacity: 1;
    transition: opacity 0.3s ease 2s;
}
@media (max-width: 1920px) {
    .fifth-screen {
        padding: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .fifth-screen__title {
        font-size: calc(65px + (85 - 65) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(80px + (105 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .color-slide__border::before {
        width: calc(389px + (440 - 389) * ((100vw - 1536px) / (1920 - 1536)));
        height: calc(389px + (440 - 389) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .color-slide__descr {
        padding: 0 calc(20px + (22 - 20) * ((100vw - 1536px) / (1920 - 1536))) calc(20px + (22 - 20) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .color-slide__border {
        border: calc(20px + (22 - 20) * ((100vw - 1536px) / (1920 - 1536))) solid white;
    }
    .color-slide__descr h4 {
        font-size: calc(35px + (45 - 35) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(45px + (55 - 45) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .fifth-screen {
        padding: 200px 0;
    }
    .fifth-screen__title {
        font-size: 65px;
        line-height: 80px;
    }
    .color-slide__border {
        border: calc(14px + (20 - 14) * ((100vw - 1280px) / (1536 - 1280))) solid white;
    }
    .color-slide__descr {
        padding: 0 calc(14px + (20 - 14) * ((100vw - 1280px) / (1536 - 1280))) calc(14px + (20 - 14) * ((100vw - 1280px) / (1536 - 1280)));
        font-size: calc(14px + (22 - 14) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(22px + (34 - 22) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .color-slide__descr h4 {
        font-size: calc(24px + (35 - 24) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(36px + (45 - 36) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .color-slide__border {
        border: 14px solid white;
    }
    .color-slide__descr {
        padding: 0 14px 14px;
        font-size: 14px;
        line-height: 22px;
    }
    .color-slide__descr h4 {
        font-size: 24px;
        line-height: 36px;
    }
}
@media (max-width: 1024px) {
    .fifth-screen {
        padding: 180px 0;
    }
    .fifth-screen__title {
        font-size: 50px;
        line-height: 60px;
    }
}
@media (max-width: 768px) {
    .fifth-screen {
        padding: 180px 20px;
    }
    .fifth-screen__title {
        text-align: center;
        font-size: calc(35px + (50 - 35) * ((100vw - 414px) / (922 - 414)));
        line-height: calc(45px + (60 - 45) * ((100vw - 414px) / (922 - 414)));
    }
    .color-slide__border {
        height: 60vw;
        width: 60vw;
    }
}
/* конец четвертого экрана */


/* пятый экран */
.fifth-screen {
    position: relative;
    width: 100%;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fifth-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
    overflow: hidden;
}
.fifth-screen__title {
    font-weight: 700;
    font-size: 85px;
    line-height: 105px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-color: #C1CADF;
    background-image: linear-gradient(99deg, rgba(52,52,52,1) 0%, rgba(52,52,52,1) 100%);
    background-repeat: no-repeat;
    background-position: -870px center;
    transition: 0.8s ease 0.3s;
}
.fifth-screen.visible .fifth-screen__title {
    background-position: 0 center;
    transition: 0.8s ease 0.3s;
}
@media (max-width: 1920px) {
    .fifth-screen {
        padding: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .fifth-screen__title {
        font-size: calc(65px + (85 - 65) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(80px + (105 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .fifth-screen {
        padding: 200px 0;
    }
    .fifth-screen__title {
        font-size: 65px;
        line-height: 80px;
    }
}
@media (max-width: 1024px) {
    .fifth-screen {
        padding: 180px 0;
    }
    .fifth-screen__title {
        font-size: 50px;
        line-height: 60px;
    }
}
@media (max-width: 768px) {
    .fifth-screen {
        padding: 180px 20px;
    }
    .fifth-screen__title {
        text-align: center;
        font-size: calc(35px + (50 - 35) * ((100vw - 414px) / (922 - 414)));
        line-height: calc(45px + (60 - 45) * ((100vw - 414px) / (922 - 414)));
    }
}
/* конец пятого экрана */



/* шестой экран */
.sixth-screen {
    padding: 80px 50px;
}
.sixth-screen__wrap {
    display: flex;
    flex-wrap: wrap;
}
.sixth-screen__card {
    width: 50%;
    height: 474px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-repeat: no-repeat;
    background-position-x: -100vw;
    transition: 0.5s ease;
}
.sixth-screen.visible .sixth-screen__card {
    background-position-x: 0;
    transition: 0.5s ease;
}
.sixth-screen__card--yellow {
    background-image: linear-gradient(90deg, rgba(245,221,7,1) 0%, rgba(245,221,7,1) 35%, rgba(245,221,7,1) 100%);
}
.sixth-screen__card--yellow .svg::before {
    background: linear-gradient(90deg, rgba(245,221,7,1) 0%, rgba(245,221,7,1) 35%, rgba(245,221,7,1) 100%);
}
.sixth-screen__card--black {
    background-image: linear-gradient(90deg, rgba(37,37,37,1) 0%, rgba(37,37,37,1) 35%, rgba(37,37,37,1) 100%);
}
.sixth-screen__card--black .svg::before {
    background: linear-gradient(90deg, rgba(37,37,37,1) 0%, rgba(37,37,37,1) 35%, rgba(37,37,37,1) 100%);
}
.sixth-screen__card--grey {
    background-image: linear-gradient(90deg, rgba(106,106,106,1) 0%, rgba(106,106,106,1) 100%);
}
.sixth-screen__card--grey .svg::before {
    background: linear-gradient(90deg, rgba(106,106,106,1) 0%, rgba(106,106,106,1) 100%);
}
.sixth-screen__card--white {
    background-image: linear-gradient(90deg, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 100%);
}
.sixth-screen__card--white .svg::before {
    background: linear-gradient(90deg, rgba(246,246,246,1) 0%, rgba(246,246,246,1) 100%);;
}
.sixth-screen__card .svg {
    position: relative;
    opacity: 0;
    width: 86px;
}
.sixth-screen__card .svg svg {
    width: 100%;
}
.sixth-screen.visible .sixth-screen__card .svg {
    opacity: 1;
    transition: 0.1s ease 0.55s;
}
.sixth-screen__card .svg::before {
    content: '';
    position: absolute;
    display: block;
    width: 150px;
    height: 150px;
    top: 50%;
    right: 50%;
    transform: translate(50%, -50%);
    border-radius: 50%;
    opacity: 0;
}
.sixth-screen.visible .sixth-screen__card .svg::before {
    opacity: 1;
    transform: translate(120%, -120%);
    transition: opacity 0.1s ease 0.45s, transform 0.3s ease 0.6s;
}
@media (max-width: 1920px) {
    .sixth-screen {
        padding: calc(70px + (80 - 70) * ((100vw - 1536px) / (1920 - 1536))) 50px;
    }
    .sixth-screen__card {
        height: calc(410px + (474 - 410) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .sixth-screen__card .svg {
        width: calc(50px + (86 - 50) * ((100vw - 922px) / (1920 - 922)));
    }
    .sixth-screen__card .svg::before {
        width: calc(120px + (150 - 120) * ((100vw - 922px) / (1920 - 922)));
        height: calc(120px + (150 - 120) * ((100vw - 922px) / (1920 - 922)));
    }
}

@media (max-width: 1534px) {
    .sixth-screen {
        padding: calc(50px + (70 - 50) * ((100vw - 1280px) / (1536 - 1280))) 50px;
    }
    .sixth-screen__card {
        height: calc(329px + (410 - 329) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .sixth-screen {
        padding: 50px 50px;
    }
    .sixth-screen__card {
        height: 329px;
    }
}
@media (max-width: 922px) {
    .sixth-screen {
        padding: 70px 40px;
    }
    .sixth-screen__wrap {
        flex-direction: column;
    }
    .sixth-screen__card {
        width: 100%;
        height: 455px;
    }
    .sixth-screen__card .svg {
        width: 50px;
    }
    .sixth-screen__card .svg::before {
        width: 120px;
        height: 120px;
    }
}
/* конец шестого экрана */



/* седьмой экран */

.seventh-screen {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 250px 0;
}
.seventh-screen__content {
    max-width: 1204px;
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 120px;
}
.seventh-screen__text {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    justify-content: space-between;
}
.seventh-screen__title {
    font-weight: 700;
    font-size: 55px;
    line-height: 70px;
}
.seventh-screen__descr {
    max-width: 588px;
    width: 100%;
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
}
@media (max-width: 1920px) {
    .seventh-screen {
        padding: calc(180px + (250 - 180) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .seventh-screen__content {
        max-width: calc(1136px + (1024 - 1136) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .seventh-screen__title {
        font-size: calc(45px + (55 - 45) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(55px + (70 - 55) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .seventh-screen__descr {
        font-size: calc(20px + (24 - 20) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(30px + (38 - 30) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .seventh-screen {
        padding: calc(70px + (180 - 70) * ((100vw - 1280px) / (1536 - 1280))) 0;
    }
    .seventh-screen__content {
        max-width: calc(964px + (1136 - 964) * ((100vw - 1280px) / (1536 - 1280)));
        gap: calc(90px + (120 - 90) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .seventh-screen__title {
        font-size: calc(35px + (45 - 35) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(45px + (55 - 45) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .seventh-screen__descr {
        font-size: calc(16px + (20 - 16) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(24px + (30 - 24) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .seventh-screen__title {
        font-size: 35px;
        line-height: 45px;
    }
    .seventh-screen__descr {
        font-size: 16px;
        line-height: 24px;
    }
}
@media (max-width: 1024px) {
    .seventh-screen {
        padding: 70px 40px;
    }
    .seventh-screen__content {
        max-width: 100%;
        gap: 90px;
    }
    .seventh-screen__text {
        display: flex;
        flex-direction: column;
        gap: 40px;
    }
}
@media (max-width: 768px) {
    .seventh-screen {
        padding: 60px 20px;
    }
    .seventh-screen__content {
        gap: 70px;
    }
    .seventh-screen__animation {
        max-width: 100%;
    }
    .seventh-screen__text {
        gap: 30px;
    }
    .seventh-screen__title {
        font-size: 30px;
        line-height: 40px;
    }
    .seventh-screen__title br {
        display: none;
    }
}
/* конец седьмого экрана */


/* восьмой экран */
.eighth-screen {
    width: 100%;
    padding: 250px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eighth-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 90px;
    overflow: hidden;
}
.seventh-screen__animation {
    max-width: 1024px;
    width: 100%;
}
.eighth-screen__title {
    font-weight: 700;
    font-size: 85px;
    line-height: 105px;
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    background-color: #C1CADF;
    background-image: linear-gradient(99deg, rgba(52,52,52,1) 0%, rgba(52,52,52,1) 100%);
    background-repeat: no-repeat;
    background-position: -870px center;
    transition: 0.8s ease 0.3s;
}
.visible .eighth-screen__title {
    background-position: 0 center;
    transition: 0.8s ease 0.3s;
}
@media (max-width: 1920px) {
    .eighth-screen {
        padding: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .eighth-screen__title {
        font-size: calc(65px + (85 - 65) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(80px + (105 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .eighth-screen {
        padding: calc(180px + (200 - 180) * ((100vw - 1280px) / (1536 - 1280))) 0;
    }
    .eighth-screen__title {
        font-size: calc(50px + (65 - 50) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(60px + (80 - 60) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .eighth-screen {
        padding: 180px 0;
    }
    .eighth-screen__title {
        font-size: 50px;
        line-height: 60px;
    }
}
@media (max-width: 768px) {
    .eighth-screen__title {
        text-align: center;
        font-size: 35px;
        line-height: 45px;
    }
}
/* конец восьмого экрана */



/* девятый экран */
.ninth-screen {
    position: relative;
    height: auto;
    background-color: #F5F5F5;
}
.ninth-screen__wrapper {
    will-change: transform;
    position: absolute;
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    z-index: 2;
}
.ninth-screen__trigger {
    position: relative;
    height: 100vh;
}
.ninth-screen__trigger::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 105%;
    background-image: linear-gradient(101deg, rgba(37,37,37,1) 0%, rgba(37,37,37,1) 100%);
    background-position: -100vw;
    background-repeat: no-repeat;
    transition: 0.5s ease;
    
}
.ninth-screen.trigger4 .ninth-screen__trigger::before {
    background-position: 0;
    transition: 0.5s ease;
    z-index: 6;
}
.ninth-screen__latter {
    position: relative;
    margin-top: 155px;
    max-width: 544px;
    height: 771px;
    width: 100%;
    opacity: 1;
    transform: translateY(0);
    transition: 0.3s ease;
    overflow-y: hidden;
    overflow-x: clip;
}
.ninth-screen__latter img {
    width: 100%;
}
.ninth-screen.trigger3 .ninth-screen__latter {
    opacity: 0;
    transform: translateY(115%);
    transition: 0.5s ease, opacity 0.1s linear 0.05s;
    height: 300px;
}
.ninth-screen__words {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
}
.ninth-screen__words svg {
    position: absolute;
    bottom: 10%;
    width: 100%;
}
.ninth-screen__words object {
    position: absolute;
    bottom: 10%;
    width: 100%;
}
.ninth-screen__words .word {
    position: absolute;
    width: 35%;
    bottom: 19.6%;
    left: 8.8%;
}
.ninth-screen__words .word::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
}
.ninth-screen__words .pen {
    position: absolute;
    width: 67.8%;
    bottom: 21.8%;
    left: -2%;
    rotate: 0deg;
    opacity: 1;
    transition: 0.3s ease;
}
.ninth-screen.visible .ninth-screen__words .pen {
    animation: pen 3s ease forwards;
}
@keyframes pen {
    0% {
        bottom: 21.8%;
        left: -2%;
    }
    5% {
        bottom: 25.8%;
        left: -3%;
    }
    8% {
        bottom: 19.8%;
        left: -4%;
    }
    12% {
        bottom: 20.8%;
        left: 0%;
    }
    16% {
        bottom: 21.8%;
        left: 3%;
    }
    18% {
        bottom: 19.8%;
        left: 3%;
    }
    22% {
        bottom: 21.8%;
        left: 8%;
    }
    25% {
        bottom: 20.8%;
        left: 10%;
    }
    29% {
        bottom: 20.8%;
        left: 13%;
    }
    33% {
        bottom: 21.8%;
        left: 16%;
    }
    34% {
        bottom: 20.8%;
        left: 15%;
    }
    38% {
        bottom: 21.8%;
        left: 20%;
    }
    42% {
        bottom: 25.8%;
        left: 26%;
    }
    43% {
        bottom: 22.8%;
        left: 23%;
    }
    47% {
        bottom: 22.8%;
        left: 23%;
    }
    50% {
        bottom: 21.8%;
        left: 25%;
    }
    53% {
        bottom: 22.8%;
        left: 29%;
    }
    54% {
        bottom: 21.8%;
        left: 27%;
    }
    56% {
        bottom: 22.8%;
        left: 30%;
        rotate: 0deg;
    }
    75% {
        bottom: 30%;
        left: 87%;
        rotate: -27deg;
        opacity: 1;
    }
    100% {
        bottom: 130%;
        left: 87%;
        rotate: -27deg;
        opacity: 0;
    }
}

.ninth-screen__trigger img {
    position: absolute;
    top: 110px;
    transform: translateX(-58%);
    left: 50%;
    /* width: 100%;
    height: 100%; */
    width: 800px;
    height: 580px;
    transition: 0.3s ease;
}
.ninth-screen__internal-trigger {
    height: 100%;
}
.ninth-screen.trigger3 .ninth-screen__trigger img {
    transform: translateX(-50%);
    transition: 0.3s ease;
}
.ninth-screen__trigger .envelop-open {
    z-index: 2;
}
.ninth-screen__trigger--three {
    display: flex;
    align-items: end;
    justify-content: center;
    padding-bottom: 3vh;
    height: 1017px;
}
.ninth-screen__trigger--three .buttons {
    position: absolute;
    display: flex;
    gap: 35px;
    opacity: 0;
    transform: translateY(150px);
    transition: 0.3s ease;
    pointer-events: none;
    bottom: 80px;
}
.ninth-screen.trigger3 .ninth-screen__trigger--three .buttons {
    transform: translateY(0);
    opacity: 1;
    transition: 0.3s ease;
    pointer-events: all;
    z-index: 5;

}
.ninth-screen__trigger--three .buttons button {
    width: 80px;
    height: 80px;
    background: none;
    border: 0px #F6DE07 solid;
    border-radius: 14px;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
}
.ninth-screen__trigger--three .buttons button svg {
    width: 100%;
}
.ninth-screen__trigger--three .buttons button:hover {
    border: 2px #F6DE07 solid;
}
.ninth-screen__trigger--three .buttons button.active {
    border: 2px #F6DE07 solid;
}
.ninth-screen.yellow .yellow-envelope {
    opacity: 1;
    z-index: 3;
    transition: 0.1s ease;
}
.ninth-screen .yellow-envelope {
    opacity: 0;
    transition: 0.3s ease;
}
.ninth-screen.grey .grey-envelope {
    opacity: 1;
    z-index: 3;
    transition: 0.1s ease;
}
.ninth-screen .grey-envelope {
    opacity: 0;
    transition: 0.3s ease;
}
.ninth-screen.black .black-envelope {
    opacity: 1;
    transition: 0.1s ease;
}
.ninth-screen .black-envelope {
    opacity: 1;
    transition: 0.3s ease;
}
.ninth-screen__trigger--four {
    height: 10vh;
}
@media (max-width: 1920px) {
    .ninth-screen__latter {
        max-width: calc(438px + (544 - 438) * ((100vw - 1536px) / (1920 - 1536)));
        height: calc(620px + (771 - 620) * ((100vw - 1536px) / (1920 - 1536)));
        margin-top: calc(170px + (155 - 170) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .ninth-screen__trigger img {
        width: calc(640px + (800 - 640) * ((100vw - 1536px) / (1920 - 1536)));
        height: calc(410px + (580 - 410) * ((100vw - 1536px) / (1920 - 1536)));
        top: calc(245px + (110 - 245) * ((100vw - 1536px) / (1920 - 1536)));
    } 
    .ninth-screen__trigger--three .buttons {
        gap: calc(20px + (35 - 20) * ((100vw - 922px) / (1920 - 922)));
    }
    .ninth-screen__trigger--three .buttons button {
        width: calc(68px + (80 - 68) * ((100vw - 922px) / (1920 - 922)));
        height: calc(68px + (80 - 68) * ((100vw - 922px) / (1920 - 922)));
    }
    .ninth-screen__trigger--three {
        height: calc(960px + (1017 - 960) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1280px) {
    .ninth-screen__latter {
        max-width: 417px;
        height: 590px;
        margin-top: 216px;
    }
    .ninth-screen__trigger img {
        width: 640px;
        height: 410px;
        top: 245px;
    }
}
@media (max-width: 768px) {
    .ninth-screen__latter {
        max-width: 211px;
        height: 300px;
        margin-top: 250px;
    }
    .ninth-screen__trigger img {
        width: 300px;
        height: 215px;
        top: calc(120px + (90 - 120) * ((100vw - 414px) / (768 - 414)))
    }
    .ninth-screen.trigger3 .ninth-screen__latter {
        transform: translateY(140%);
        height: 150px;
    }
    .ninth-screen__trigger--three {
        height: 65vh;
    }
    .ninth-screen__trigger--three .buttons {
        gap: 20px;
        bottom: calc(0px + (80 - 0) * ((100vw - 414px) / (922 - 414)));;
    }
    .ninth-screen__trigger--three .buttons button {
        width: 58px;
        height: 58px;
    }
}
/* конец девятого экрана */



/* десятый экран */
.tenth-screen {
    position: relative;
    height: auto;
    background-image: linear-gradient(101deg, rgba(37,37,37,1) 0%, rgba(37,37,37,1) 100%);
    background-position: -100vw 0;
    background-repeat: no-repeat;
    z-index: 5;
    transition: 0.5s ease;
}
.tenth-screen.visible {
    background-position: 0 0;
    transition: 0.5s ease;
}
.tenth-screen__wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 6;
    opacity: 0;
    transition: opacity 0.5s ease;
}
.tenth-screen.trigger2 .tenth-screen__wrapper {
    opacity: 1;
    transition: opacity 0.1s ease 0.1s;
}
.tenth-screen.trigger4 .tenth-screen__wrapper {
    opacity: 0;
    transition: opacity 0.3s ease;
}
.tenth-screen__wrapper img {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    max-width: 770px;
    width: 100%;
}
.tenth-screen__another-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    z-index: 5;
}
.tenth-screen__another-wrapper img {
    position: absolute;
    left: 50%;
    top: 15%;
    transform: translateX(-50%);
    max-width: 770px;
    width: 100%;
}
.tenth-screen__trigger {
    position: relative;
    height: 100vh;
    /* border: 1px solid red; */
}
.tenth-screen__trigger--five {
    height: 10vh;
}
.tenth-screen .tenth-screen__another-wrapper .yellow {
    opacity: 0;
    transition: 0.2s ease;
}
.tenth-screen.trigger1 .tenth-screen__another-wrapper .yellow {
    opacity: 1;
}
.bag-wrapper {
    position: absolute;
    bottom: 0;
    z-index: 7;
    left: 50%;
    transform: translateX(-50%);
    width: 1920px;
    transition: 0.2s ease;
}
.bag-wrapper img {
    width: 100%;
}
.bag-wrapper .cup {
    position: absolute;
    bottom: 10%;
    width: 50%;
    right: 10%;
    opacity: 0;
    transition: 0.2s ease;
}
.tenth-screen.trigger4 .bag-wrapper {
    width: 1217px;
    transition: width 0.5s ease, left 0.5s ease 0.6s;
    left: 25%;
}
.tenth-screen.trigger4 .bag-wrapper .cup {
    opacity: 1;
    transition: 0.4s ease 1.3s;
}
.tenth-screen__trigger .text-wrapper {
    position: absolute;
    width: 587px;
    color: white;
    top: 50%;
    left: 75%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 0.3s ease;
}
.tenth-screen.trigger4 .tenth-screen__trigger .text-wrapper {
    opacity: 1;
    transition: 0.5s ease 1.3s;
}
@media (max-width: 1920px) {
    .tenth-screen__another-wrapper img {
        max-width: calc(550px + (770 - 550) * ((100vw - 922px) / (1920 - 922)));
    }
    .tenth-screen__wrapper img {
        max-width: calc(550px + (770 - 550) * ((100vw - 922px) / (1920 - 922)));
    }
    .bag-wrapper {
        width: calc(1590px + (1920 - 1590) * ((100vw - 922px) / (1920 - 922)));
        bottom: calc(170px + (0 - 170) * ((100vw - 922px) / (1920 - 922)));
    }
    .tenth-screen__trigger .text-wrapper {
        width: calc(553px + (587 - 553) * ((100vw - 1536px) / (1920 - 1536)));
        left: calc(70% + (75 - 70) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .tenth-screen.trigger4 .bag-wrapper {
        width: calc(820px + (1217 - 820) * ((100vw - 922px) / (1920 - 922)));
    }
    .bag-wrapper .cup {
        right: calc(20% - ((10 - 20) * ((100vw - 922px) / (1920 - 922))));
    }
}
@media (max-width: 1400px) {
    .tenth-screen__trigger--five {
        height: 1vh;
    }
    .tenth-screen__trigger .text-wrapper {
        width: 411px;
        left: 75%;
    }
}
@media (max-width: 768px) {
    .tenth-screen__wrapper img {
        max-width: 374px;
    }
    .tenth-screen__another-wrapper img {
        max-width: 374px;
    }
    .bag-wrapper {
        width: 920px;
        bottom: 40%;
    }
    .tenth-screen.trigger4 .bag-wrapper {
        width: 90%;
        left: 50%;
    }
    .tenth-screen__trigger .text-wrapper {
        width: 90%;
        left: 5%;
        top: 60%;
        transform: translate(0, 0);
    }
}
/* @media screen and (min-width: 768px) and (min-height: 700px) {

} */
/* конец десятого экрана */
/* начало одиннадцатого экрана */
.eleventh-screen {
    width: 100%;
    padding: 250px 0;
    display: flex;
    align-items: center;
    justify-content: center;
}
@media (max-width: 1920px) {
    .eleventh-screen {
        padding: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .eighth-screen__title {
        font-size: 50px;
        line-height: 60px;
    }
}
@media (max-width: 1536px) {
    .eleventh-screen {
        padding: calc(130px + (200 - 130) * ((100vw - 1280px) / (1536 - 1280))) 0;
    }
}
@media (max-width: 1024px) {
    .eleventh-screen {
        padding: 180px 0;
    }
}
@media (max-width: 768px) {
    .eleventh-screen {
        padding: 155px 20px;
    }
    .eighth-screen__title {
        font-size: 35px;
        line-height: 45px;
    }
}
/* конец одиннадцатого экрана */


/* начало двеннадцатого экрана */
.twelfth-screen {
    position: relative;
    /* height: 100vh; */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.dressing-room {
    margin: 250px 0;
    display: flex;
    opacity: 1;
    transition: 0.6s ease;
}
.opacity .dressing-room {
    opacity: 0;
    transition: 0.6s ease;
}
.dressing-room img {
    width: 100%;
}
.dressing-room__text {
    display: flex;
    flex-direction: column;
    max-width: 433px;
    width: 100%;
}
.dressing-room__text-icon {
    width: 141px;
    margin-bottom: 60px;
}
.dressing-room__text-title {
    font-weight: 700;
    font-size: 30px;
    line-height: 40px;
    margin-bottom: 30px;
}
.dressing-room__text-descr {
    font-weight: 400;
    font-size: 21px;
    line-height: 34px;
}

.dressing-room__text-descr a {
    cursor: pointer;
    transition: .3s linear;
    font-weight: 600;
    border-bottom: 1px solid #252525;
}

.dressing-room__text-descr a:hover {
    border-bottom: 1px solid transparent;
}

.dressing-room__model {
    position: relative;
    /* max-width: 586px; */
    width: 586px;
    height: 928px;
}
.dressing-room__model img {
    position: absolute;
    width: 100%;
    opacity: 0;
    transform: translateY(-5px);
}
.dressing-room__model-helmet {
    position: absolute;
    max-width: 128px;
    width: 100%;
    top: -2%;
    left: 50%;
    z-index: 12;
    transform: translateX(-50%);
}
.dressing-room__model-helmet.helmet1 .helmet1 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-helmet.helmet2 .helmet2 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-helmet.helmet3 .helmet3 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-jacket {
    position: absolute;
    max-width: 537px;
    width: 100%;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 3;
}
.dressing-room__model-jacket.jacket1 .jacket1 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-jacket.jacket2 .jacket2 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-jacket.jacket3 .jacket3 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-jacket.jacket4 .jacket4 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-pants {
    position: absolute;
    max-width: 235px;
    width: 100%;
    top: 44%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
.dressing-room__model-pants.pants1 .pants1 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-pants.pants2 .pants2 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-pants.pants3 .pants3 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-pants.pants4 .pants4 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-boots {
    position: absolute;
    max-width: 346px;
    width: 100%;
    top: 92%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.dressing-room__model-boots.boots1 .boots1 {
    opacity: 1;
    
    transform: translateY(0);
}
.dressing-room__model-gloves {
    position: absolute;
    max-width: 524px;
    width: 100%;
    top: 42%;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1;
}
.dressing-room__model-gloves.gloves1 .gloves1 {
    opacity: 1;
    transform: translateY(0);
}
.dressing-room__model-gloves.gloves2 .gloves2 {
    opacity: 1;
    transform: translateY(0);
}
.dressing-room__model-gloves.gloves3 .gloves3 {
    opacity: 1;
    transform: translateY(0);
}
.dressing-room__buttons {
    display: flex;
    flex-direction: column;
    gap: 55px;
    max-width: 432px;
    width: 100%;
}
.dressing-room__buttons-row p {
    font-weight: 600;
    font-size: 24px;
    line-height: 38px;
    margin-bottom: 15px;
}
.dressing-room__buttons-row div {
    display: flex;
    gap: 30px;
}
.dressing-room__buttons-row button {
    width: 80px;
    height: 80px;
    border: none;
    border-radius: 10px;
    position: relative;
}
.dressing-room__buttons-row button img {
    height: 80%;
    width: 100%;
}
.dressing-room__buttons-row button::before {
    content: '';
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    border: 2px solid #F5DD07;
    border-radius: 10px;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: 0.3s ease;
}
.dressing-room__buttons-row button:hover::before {
    opacity: 1;
    transition: 0.3s ease;
}
.dressing-room__buttons-row button.active::before {
    opacity: 1;
    transition: 0.3s ease;
}
.dressing-room__swiper {
    display: none;
    font-weight: 600;
    font-size: 24px;
    line-height: 34px;
}
.dressing-room__swiper .swiper-slide {
    color: #E4E4E4;
}
.dressing-room__swiper .swiper-slide-active, .dressing-room__swiper .swiper-slide.active  {
    color: #252525;
}
@media (max-width: 1920px) {
    .dressing-room {
        margin: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
    .dressing-room__text-title {
        font-size: calc(24px + (30 - 24) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(36px + (40 - 36) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__text-descr {
        font-size: calc(18px + (21 - 18) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(28px + (34 - 28) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__text {
        max-width: calc(320px + (433 - 320) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__model {
        width: calc(380px + (586 - 380) * ((100vw - 1400px) / (1920 - 1400)));
        height: calc(603px + (928 - 603) * ((100vw - 1400px) / (1920 - 1400)));
    }
    .dressing-room__buttons {
        max-width: calc(320px + (432 - 320) * ((100vw - 1536px) / (1920 - 1536)));
        gap: calc(35px + (55 - 35) * ((100vw - 1536px) / (1920 - 1536)));
    }
    /* .dressing-room__model-helmet {
        max-width: calc(109px + (160 - 109) * ((100vw - 1400px) / (1920 - 1400)));
    } */
    .dressing-room__model-boots {
        max-width: calc(243px + (346 - 243) * ((100vw - 1400px) / (1920 - 1400)));
    }
    .dressing-room__model-gloves {
        max-width: calc(336px + (524 - 336) * ((100vw - 1400px) / (1920 - 1400)));
    }
    .dressing-room__model-pants {
        max-width: calc(175px + (235 - 175) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__model-helmet {
        max-width: calc(100px + (128 - 100) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__text-icon {
        margin-bottom: calc(50px + (60 - 50) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__buttons-row p {
        font-size: calc(20px + (24 - 20) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(30px + (38 - 30) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__buttons-row div {
        gap: calc(15px + (30 - 15) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__buttons-row button {
        width: calc(70px + (80 - 70) * ((100vw - 1536px) / (1920 - 1536)));
        height: calc(70px + (80 - 70) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .dressing-room__buttons-row button::before {
        width: calc(70px + (80 - 70) * ((100vw - 1536px) / (1920 - 1536)));
        height: calc(70px + (80 - 70) * ((100vw - 1536px) / (1920 - 1536)));
    }
} 
@media (max-width: 1400px) {
    .dressing-room__model {
        width: 301px;
        height: 520px;
    }
    .dressing-room {
        display: grid;
        grid-template-columns: repeat(2, auto);
        grid-template-rows: max-content;
        gap: 50px;
        margin: 180px 0;
    }
    .dressing-room__text {
        max-width: 360px;
    }
    .dressing-room__text-icon {
        margin-bottom: 30px;
        width: 80px;
    }
    .dressing-room__text-title {
        font-size: 22px;
        line-height: 30px;
    }
    .dressing-room__text-descr {
        font-size: 16px;
        line-height: 24px;
    }
    .dressing-room__buttons {
        position: relative;
        /* max-width: 100%; */
        grid-column-start: 1;
        grid-column-end: 3;
    }
    .dressing-room__buttons-row {
        position: absolute;
        top: 50px;
        opacity: 0;
        pointer-events: none;
    }
    .dressing-room__buttons-row.visible {
        opacity: 1;
        pointer-events: all;
    }
    .dressing-room__buttons-row p {
        display: none;
    }
    .dressing-room__model-helmet {
        max-width: 70px;
    }
    .dressing-room__model-jacket {
        max-width: 370px;
    }
    .dressing-room__model-gloves {
        max-width: 285px;
    }
    .dressing-room__model-pants {
        max-width: 130px;
    }
    .dressing-room__model-boots {
        max-width: 210px;
    }
    .dressing-room__swiper {
        display: block;
    }
    .dressing-room__swiper {
        font-size: 18px;
        line-height: 140%;
    }
    .dressing-room__buttons-row button {
        width: 110px;
        height: 110px;
    }
    .dressing-room__buttons-row button::before {
        width: 110px;
        height: 110px;
    }
    .dressing-room__buttons-row div {
        gap: 20px;
    }
    .twelfth-screen {
        margin-bottom: 200px;
    }

}
@media (max-width: 768px) {
    .twelfth-screen
    .dressing-room__text-title {
        font-size: 22px;
        line-height: 36px;
    }
    .dressing-room__text-descr {
        font-size: 16px;
        line-height: 24px;
    }
    .dressing-room {
        width: 100%;
        margin: 70px 0;
        padding: 0 20px;
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 70px;
    }
    .dressing-room__text {
        max-width: 100%;
    }
    .dressing-room__model {
        width: 374px;
        height: 592px;
    }
    .dressing-room__buttons {
        padding-bottom: 150px;
        max-width: 95%;
    }
    .dressing-room__text-icon {
        margin-bottom: 30px;
        width: 141px;
    }
    .dressing-room__model-helmet {
        max-width: 80px;
    }
    .dressing-room__model-jacket {
        max-width: 342px;
    }
    .dressing-room__model-gloves {
        max-width: 327px;
    }
    .dressing-room__model-pants {
        max-width: 140px;
        top: 42%;
    }
    .dressing-room__model-boots {
        max-width: 216px;
        top: 86%;
    }
    .dressing-room__buttons-row div {
        gap: 15px;
    }
    .dressing-room__buttons-row button {
        width: calc(70px + (80 - 70) * ((100vw - 375px) / (768 - 375)));
        height: calc(70px + (80 - 70) * ((100vw - 375px) / (768 - 375)));
    }
    .dressing-room__buttons-row button::before {
        width: calc(70px + (80 - 70) * ((100vw - 375px) / (768 - 375)));
        height: calc(70px + (80 - 70) * ((100vw - 375px) / (768 - 375)));
    }
}
@media (max-width: 670px) {
    .dressing-room__swiper {
        width: 250px;
    }
    .dressing-room__swiper .swiper-slide {
        width: auto !important;
    }
}
/* конец двеннадцатого экрана */


/* тринадцатый экран */
.thirteenth-screen {
    position: relative;
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10;
    background-color: #252525;
    transition: 0.8s ease;
}
.opacity.thirteenth-screen {
    opacity: 1;
    transform: translateY(0);
    transition: 0.8s ease;
}
.thirteenth-screen__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.thirteenth-screen__title {
    font-weight: 700;
    font-size: 85px;
    line-height: 105px;
    color: white;
}
.thirteenth-screen .cars {
    position: absolute;
    display: flex;
    max-width: 1800px;
    width: 100%;
    justify-content: space-around;
    bottom: -50%;
    transform: translateY(90%);
    opacity: 1;
    transition: opacity 0.3s ease 0.5s;
}
.thirteenth-screen .cars img {
    width: 20%;
}
.thirteenth-screen.opacity .cars {
    opacity: 0;
    transition: opacity 0.1s ease 1.6s, transform 2.5s ease;
    transform: translateY(-350%);
}
.thirteenth-screen .cars img:nth-child(2) {
    transform: translateY(-25%);
}
.thirteenth-screen .cars img:nth-child(3) {
    transform: translateY(-50%);
}
@media (max-width: 1920px) {
    .thirteenth-screen__title {
        font-size: calc(65px + (85 - 65) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(80px + (105 - 80) * ((100vw - 1536px) / (1920 - 1536)));
    }
}
@media (max-width: 1536px) {
    .thirteenth-screen__title {
        font-size: calc(50px + (65 - 50) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(60px + (80 - 60) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .thirteenth-screen__title {
        font-size: 50px;
        line-height: 60px;
    }
}
@media (max-width: 768px) {
    .thirteenth-screen__title {
        font-size: 40px;
        line-height: 50px;
        text-align: center;
    }
}
/* конец тринадцатого экрана */


/* начало четырнадцатого экрана */
.fourteenth-screen {
    display: flex;
    padding: 250px 0;
    flex-direction: column;
    align-items: center;
    gap: 35px;
    justify-content: center;
    overflow: hidden;
}
.fourteenth-screen__content {
    position: relative;
    max-width: 1820px;
    height: 846px;
    width: 100%;
}
.fourteenth-screen__cars {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    opacity: 0;
}
.fourteenth-screen__cars.active {
    opacity: 1;
}
/* .fourteenth-screen__content img {
    width: 100%;
} */
.fourteenth-screen__cars div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
    position: relative;
}
.fourteenth-screen__cars div .comment {
    position: absolute;
    bottom: 30px;
    left: 40px;
    font-size: 18px;
    line-height: 140%;
    font-weight: 400;
} 
@media (max-width: 1920px) {
    .fourteenth-screen__cars div .comment {
        font-size: calc(12px + (18 - 12) * ((100vw - 414px) / (1920 - 414)));
        bottom: calc(4px + (30 - 4) * ((100vw - 414px) / (1920 - 414)));
        left: calc(12px + (40 - 12) * ((100vw - 414px) / (1920 - 414)));
    }
}
.fourteenth-screen__cars div:nth-child(1) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}
.fourteenth-screen__cars div:nth-child(1) img {
    width: 721px;
}
.fourteenth-screen__cars div:nth-child(2) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}
.fourteenth-screen__cars div:nth-child(2) img {
    width: 789px;
}
.fourteenth-screen__cars div:nth-child(3) {
    grid-row-start: 1;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}
.fourteenth-screen__cars div:nth-child(3) img {
    width: 244px;
}
.fourteenth-screen__tanks {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    opacity: 0;
}
.fourteenth-screen__tanks.active {
    opacity: 1;

}
.fourteenth-screen__tanks div:nth-child(1) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}
.fourteenth-screen__tanks div:nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}
.fourteenth-screen__tanks div:nth-child(3) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}
.fourteenth-screen__tanks div:nth-child(4) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}
.fourteenth-screen__tanks div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}
.fourteenth-screen__tanks img {
    width: 663px;
}
.fourteenth-screen__fuel {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    opacity: 0;
}
.fourteenth-screen__fuel.active {
    opacity: 1;

}
.fourteenth-screen__fuel img {
    width: 643px;
}
.fourteenth-screen__fuel div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}
.fourteenth-screen__fuel div:nth-child(1) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 1;
    grid-column-end: 2;
}
.fourteenth-screen__fuel div:nth-child(2) {
    grid-row-start: 1;
    grid-row-end: 2;
    grid-column-start: 2;
    grid-column-end: 3;
}
.fourteenth-screen__fuel div:nth-child(3) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 1;
    grid-column-end: 2;
}
.fourteenth-screen__fuel div:nth-child(4) {
    grid-row-start: 2;
    grid-row-end: 3;
    grid-column-start: 2;
    grid-column-end: 3;
}

.fourteenth-screen__drilling {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    opacity: 0;
}
.fourteenth-screen__drilling div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}
.fourteenth-screen__drilling div img {
    width: 536px;
}
.fourteenth-screen__drilling.active {
    opacity: 1;

}
.fourteenth-screen__tanker {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
    opacity: 0;
}
.fourteenth-screen__tanker div {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #F5F5F5;
}
.fourteenth-screen__tanker div img {
    width: 1470px;
}
.fourteenth-screen__tanker.active {
    opacity: 1;

}
.fourteenth-screen__buttons {
    max-width: 1820px;
    width: 100%;
}
.fourteenth-screen__buttons .swiper-wrapper {
    width: calc(842px + (1820 - 842) * ((100vw - 922px) / (1920 - 922)));
    display: flex;
    justify-content: center;
    gap: 20px;
}

.fourteenth-screen__buttons .swiper-slide {
    width: auto;
    padding: 20px 50px;
    font-weight: 600;
    font-size: 18px;
    line-height: 30px;
    color: #252525;
    border: 1px solid #E4E4E4;
    background: none;
    border-radius: 10px;
    transition: 0.3s ease;
}
.fourteenth-screen__buttons button:hover {
    background-color: #F5DD07;
    transition: 0.3s ease;
}
.fourteenth-screen__buttons button.active {
    background-color: #F5DD07;
    transition: 0.3s ease;
}
@media (max-width: 1920px) {
    .fourteenth-screen__content {
        max-width: calc(842px + (1820 - 842) * ((100vw - 922px) / (1920 - 922)));
        height: calc(568px + (846 - 568) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__cars div:nth-child(1) img {
        width: calc(331px + (721 - 331) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__cars div:nth-child(2) img {
        width: calc(362px + (789 - 362) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__cars div:nth-child(3) img {
        width: calc(112px + (244 - 112) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__tanks img {
        width: calc(361px + (663 - 361) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__fuel img {
        width: calc(361px + (643 - 361) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__buttons {
         max-width: calc(842px + (1820 - 842) * ((100vw - 922px) / (1920 - 922))); 
        /* max-width: 400px; */
        gap: calc(15px + (20 - 15) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen__buttons .swiper-slide {
        font-size: calc(17px + (18 - 17) * ((100vw - 922px) / (1920 - 922)));
        padding: calc(16px + (20 - 16) * ((100vw - 922px) / (1920 - 922)))  calc(45px + (50 - 45) * ((100vw - 922px) / (1920 - 922)));
    }
    .fourteenth-screen {
        padding: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536))) 0;
    }
}
@media (max-width: 1500px) {
    .fourteenth-screen__tanker div img {
        width: 100%;
    }
    .fourteenth-screen__buttons .swiper-slide {
        font-size: 16px;
        line-height: 24px;
        padding: 12px 30px;
    }
}
@media (max-width: 1024px) {
    .fourteenth-screen__drilling {
        grid-template-columns: 1fr;
    }
    .fourteenth-screen__drilling div {
        padding: 20px;
    }
    .fourteenth-screen__drilling div img {
        width: 356px;
    }
    .fourteenth-screen {
        padding: 70px 40px;
    }
    .fourteenth-screen__content {
        max-width: 100%;
    }
    .fourteenth-screen__buttons {
        max-width: 100%;
    }
    .fourteenth-screen__buttons .swiper-wrapper {
        width: 100%;
        justify-content: start;
        gap: 0;
    }
    .fourteenth-screen__buttons .swiper-slide {
        font-size: 17px;
        line-height: 26px;
        padding: 16px 45px;
    }
}
@media (max-width: 768px) {
    .fourteenth-screen {
        padding: 60px 20px;
    }
    .fourteenth-screen__buttons .swiper-slide {
        font-size: 16px;
        line-height: 24px;
        padding: 12px 30px;
    }
    .fourteenth-screen__content {
        max-width: 100%;
        height: 710px;
    }
    .fourteenth-screen__cars {
        grid-template-columns: 1fr;
    }
    .fourteenth-screen__cars div:nth-child(3) {
        grid-column-start: 1;
        grid-column-end: 2;
        grid-row-start: 3;
        grid-row-end: 5;
    }
    .fourteenth-screen__cars div:nth-child(1) img {
        width: 320px;
    }
    .fourteenth-screen__cars div:nth-child(2) img {
        width: 330px;
    }
    .fourteenth-screen__cars div:nth-child(3) img {
        width: 102px;
    }
    .fourteenth-screen__tanks {
        grid-template-columns: 1fr;
    }
    .fourteenth-screen__tanks div:nth-child(2) {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__tanks div:nth-child(3) {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__tanks div:nth-child(4) {
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__tanks img {
        width: 330px;
    }
    .fourteenth-screen__fuel {
        grid-template-columns: 1fr;
    }
    .fourteenth-screen__fuel div:nth-child(1) {
        grid-row-start: 1;
        grid-row-end: 2;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__fuel div:nth-child(2) {
        grid-row-start: 2;
        grid-row-end: 3;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__fuel div:nth-child(3) {
        grid-row-start: 3;
        grid-row-end: 4;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__fuel div:nth-child(4) {
        grid-row-start: 4;
        grid-row-end: 5;
        grid-column-start: 1;
        grid-column-end: 2;
    }
    .fourteenth-screen__fuel img {
        width: 330px;
    }
}
/* конец четырнадцатого экрана */



/* начало пятнпдцатого экрана */
.fifteenth-screen {
    position: relative;
    padding-top: 250px;
    width: 100%;
    background-color: #252525;
    display: flex;
    align-items: center;
    flex-direction: column;
}
.fifteenth-screen__result {
    max-width: 894px;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 155px;
}
.fifteenth-screen__result h2 {
    font-weight: 700;
    font-size: 55px;
    line-height: 70px;
    color: white;
    text-align: center;
    margin-bottom: 45px;
}
.fifteenth-screen__result p {
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    color: white;
    text-align: center;
    margin-bottom: 55px;
}
.fifteenth-screen__result a {
    color: #FFFFFF;
    font-weight: 600;
    font-size: 18px;
    line-height: 28px;
    background-color: #3A3A3A;
    padding: 16px 30px;
    border-radius: 60px;
    display: inline-flex;
    gap: 15px;
    align-items: center;
    max-width: 305px;
    transition: 0.3s ease;
}
.fifteenth-screen__result a svg path {
    stroke: #F5DD07;
    transition: 0.3s ease;
}
.fifteenth-screen__result a:hover {
    background-color: #F5DD07;
    color: #3A3A3A;
    transition: 0.3s ease;
}
.fifteenth-screen__result a:hover svg path {
    stroke: #3A3A3A;
    transition: 0.3s ease;
}
.fifteenth-screen__credits {
    display: flex;
    flex-direction: column;
    margin-bottom: 155px;
}
.fifteenth-screen__credits h3 {
    font-weight: 600;
    font-size: 25px;
    line-height: 30px;
    color: white;
    margin-bottom: 40px;
    text-align: center;
}
.fifteenth-screen__credits h4 {
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    color: #AEB8CB;
    text-align: end;
}
.fifteenth-screen__credits p {
    font-weight: 400;
    font-size: 24px;
    line-height: 38px;
    color: white;
}
.fifteenth-screen__credits .row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    margin-bottom: 30px;
}
.fifteenth-screen__prometei-wrapper {
    position: relative;
    height: 100vh;
    position: relative;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: end;
    overflow: hidden;
}
.fifteenth-screen__prometei-wrapper::after {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-size: cover;
    background-repeat: no-repeat;
    /* background-position: bottom; */
    transition: 0.5s ease;
    background-image: url(/wp-content/themes/toimi/assets/img/endLogo.svg);
    opacity: 0;
    transform: translateY(20%);
}
.fifteenth-screen__prometei-wrapper.visible::after {
    opacity: 1;
    transform: translateY(0);
    transition: 0.5s ease 0.5s;
}
.fifteenth-screen__prometei {
    position: relative;
    z-index: 2;
    max-width: 1182px;
    width: 100%;
}
.fifteenth-screen__prometei::before {
    content: '';
    position: absolute;
    width: 123px;
    height: 123px;
    border-radius: 50%;
    background-color: #F5DD07;
    scale: 0;
    transition: 0.3s ease;
}
.fifteenth-screen__prometei-wrapper.visible .fifteenth-screen__prometei::before {
    scale: 1;
    transition: 0.3s ease;
}
.fifteenth-screen.trigger .fifteenth-screen__prometei::before {
    scale: 40;
    transition: scale 0.9s ease;
}
.fifteenth-screen__prometei img {
    width: 100%;
}
.fifteenth-screen__yellow-screen {
    position: absolute;
    background-color: #F5DD07;
    width: 100%;
    height: 100vh;
    bottom: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    /* transition: opacity 0.3s ease; */
}
.fifteenth-screen__yellow-screen a {
    font-weight: 700;
    font-size: 55px;
    line-height: 70px;
    color: #252525;
    display: flex;
    align-items: center;
    gap: 20px;
    border-bottom: 5px solid #252525;
}
.trigger .fifteenth-screen__yellow-screen {
    opacity: 1;
    transition: opacity 0.01s ease 0.9s;
}
.fifteenth-screen__trigger {
    height: 50vh;
}
@media (max-width: 1920px) {
    .fifteenth-screen {
        padding-top: calc(200px + (250 - 200) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__result h2 {
        font-size: calc(45px + (55 - 45) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(55px + (70 - 55) * ((100vw - 1536px) / (1920 - 1536)));
        margin-bottom: calc(35px + (45 - 35) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__result p {
        font-size: calc(20px + (24 - 20) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(30px + (38 - 30) * ((100vw - 1536px) / (1920 - 1536)));
        margin-bottom: calc(50px + (55 - 50) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__result a {
        font-size: calc(17px + (18 - 17) * ((100vw - 1536px) / (1920 - 1536)));
        padding: calc(14.5px + (16 - 14.5) * ((100vw - 1536px) / (1920 - 1536))) calc(25px + (30 - 25) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__result {
        max-width: calc(620px + (894 - 620) * ((100vw - 1536px) / (1920 - 1536)));
        margin-bottom: calc(120px + (155 - 120) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__credits h3 {
        font-size: calc(22px + (25 - 22) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(36px + (30 - 36) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__credits .row {
        margin-bottom: calc(20px + (30 - 20) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__credits h4 {
        font-size: calc(20px + (24 - 20) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(30px + (38 - 30) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__credits p {
        font-size: calc(20px + (24 - 20) * ((100vw - 1536px) / (1920 - 1536)));
        line-height: calc(20px + (38 - 20) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__credits {
        margin-bottom: calc(120px + (155 - 120) * ((100vw - 1536px) / (1920 - 1536)));
    }
    .fifteenth-screen__prometei {
        max-width: calc(660px + (1182 - 660) * ((100vw - 1280px) / (1920 - 1280)));
    }
    .fifteenth-screen__yellow-screen a {
        font-size: calc(25px + (55 - 25) * ((100vw - 1280px) / (1920 - 1280)));
        line-height: calc(35px + (70 - 35) * ((100vw - 1280px) / (1920 - 1280)));
        gap: calc(10px + (20 - 10) * ((100vw - 1280px) / (1920 - 1280)));
        border-bottom: calc(3px + (5 - 3) * ((100vw - 1280px) / (1920 - 1280))) solid #252525;
    }
    .fifteenth-screen__yellow-screen a svg {
        width: calc(40px + (61 - 40) * ((100vw - 1280px) / (1920 - 1280)));
    }
}
@media (max-width: 1536px) {
    .fifteenth-screen {
        padding-top: calc(120px + (200 - 120) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__result {
        max-width: calc(670px + (620 - 670) * ((100vw - 1280px) / (1536 - 1280)));
        margin-bottom: calc(70px + (120 - 70) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__result h2 {
        font-size: calc(35px + (45 - 35) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(45px + (55 - 45) * ((100vw - 1280px) / (1536 - 1280)));
        margin-bottom: calc(30px + (35 - 30) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__result p {
        font-size: calc(16px + (20 - 16) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(24px + (30 - 24) * ((100vw - 1280px) / (1536 - 1280)));
        margin-bottom: calc(40px + (50 - 40) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__result a {
        font-size: calc(16px + (17 - 16) * ((100vw - 1280px) / (1536 - 1280)));
        padding: 14px 25px;
    }
    .fifteenth-screen__credits h3 {
        font-size: 20px;
        line-height: 30px;
        margin-bottom: calc(35px + (40 - 35) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__credits .row {
        margin-bottom: calc(15px + (20 - 15) * ((100vw - 1280px) / (1536 - 1280)));
        gap: calc(20px + (35 - 20) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__credits h4 {
        font-size: calc(16px + (20 - 16) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(24px + (30 - 24) * ((100vw - 1280px) / (1536 - 1280)));
    }
    .fifteenth-screen__credits p {
        font-size: calc(16px + (20 - 16) * ((100vw - 1280px) / (1536 - 1280)));
        line-height: calc(24px + (30 - 24) * ((100vw - 1280px) / (1536 - 1280)));
    }
}
@media (max-width: 1280px) {
    .fifteenth-screen {
        padding-top: 130px;
    }
    .fifteenth-screen__result {
        max-width: 670px;
        margin-bottom: 100px;
    }
    .fifteenth-screen__result h2 {
        font-size: 35px;
        line-height: 45px;
        margin-bottom: 30px;
    }
    .fifteenth-screen__result p {
        font-size: 16px;
        line-height: 24px;
        margin-bottom: 40px;
    }
    .fifteenth-screen__result a {
        font-size: 17px;
        line-height: 26px;
    }
    .fifteenth-screen__credits h3 {
        margin-bottom: 35px;
    }
    .fifteenth-screen__credits .row {
        margin-bottom: 15px;
        gap: 20px;
    }
    .fifteenth-screen__credits h4 {
        font-size: 16px;
        line-height: 24px;
    }
    .fifteenth-screen__credits p {
        font-size: 16px;
        line-height: 24px;
    }
    .fifteenth-screen__prometei {
        max-width: 788px;
    }
}
@media (max-width: 1024px) {
    .fifteenth-screen__prometei-wrapper::after {
        background-image: url(/wp-content/themes/toimi/assets/img/endLogoMob.svg);
    }
    .fifteenth-screen__yellow-screen a {
        font-size: 35px;
        line-height: 45px;
        gap: 15px;
        border-bottom: 4px solid #252525;
    }
}
@media (max-width: 768px) {
    .fifteenth-screen {
        padding: 120px 0 0;
    }
    .fifteenth-screen__result {
        max-width: 100%;
        margin-bottom: 70px;
    }
    .fifteenth-screen__result h2 {
        font-size: 30px;
        line-height: 40px;
        margin-bottom: 30px;
    }
    .fifteenth-screen__result a {
        padding: 13px 20px;
        font-size: 16px;
        gap: 10px;
    }
    .fifteenth-screen__credits {
        margin-bottom: 70px;
    }
    .fifteenth-screen__credits h3 {
        margin-bottom: 30px;
    }
    .fifteenth-screen__credits .row {
        margin-bottom: 20px;
        gap: 20px;
    }
    .fifteenth-screen__yellow-screen a {
        font-size: calc(26px + (28 - 26) * ((100vw - 375px) / (768 - 375)));
        line-height: 38px;
    }
    .fifteenth-screen__prometei::before {
        width: calc(40px + (120 - 40) * ((100vw - 414px) / (768 - 414)));
        height: calc(40px + (120 - 40) * ((100vw - 414px) / (768 - 414)));
    }
    .fifteenth-screen.trigger .fifteenth-screen__prometei::before {
        scale: 40;
    }
}
@media (max-width: 480px) {
    .fifteenth-screen__prometei-wrapper::after {
        background-size: contain;
    }
} 
/* конец пятнадцатого экрана */

.cases-sample {
    opacity: 0;
}

.cases-sample.activity {
    opacity: 1;
}