.card-page .section-nav {
    padding-top: 60px;
}

@media (max-width: 1700px) {
    .card-page .section-nav {
        padding-top: 35px;
    }
}

@media (max-width: 980px) {
    .card-page .section-nav {
        padding-top: 25px;
    }
}

@media (max-width: 600px) {
    .card-page .section-nav {
        padding-top: 15px;
    }
}

.card-page .section-nav .list {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    position: relative;
    padding-top: 30px;
    padding-bottom: 15px;
    border-top: 1px solid #dbdbdb;
    border-bottom: 1px solid #dbdbdb;
}

@media (max-width: 980px) {
    .card-page .section-nav .list {
        overflow: hidden;
    }
}

.card-page .section-nav .list .slider {
    position: relative;
    z-index: 0;
    flex-basis: 0;
    flex-grow: 1;
    margin: 0 50px;
    width: 100%;
}

@media (max-width: 1280px) {
    .card-page .section-nav .list .slider {
        margin: 0 20px;
        top: 7px;
    }
}

@media (max-width: 980px) {
    .card-page .section-nav .list .slider {
        margin: 0;
        top: 0;
    }
}

@media (max-width: 980px) {
    .card-page .section-nav .list .swiper-container,
    .card-page .section-nav .list .swiper-wrapper {
        overflow: visible;
    }
}

.card-page .section-nav .list .slider .swiper-slide {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
}

@media (max-width: 980px) {
    .card-page .section-nav .list .slider .swiper-slide {
        width: auto;
    }
}

.card-page .section-nav .list .slider .swiper-slide,
.card-page .section-nav .list .slider .swiper-slide * {
    cursor: pointer;
}

.card-page .section-nav .list .slider .swiper-slide .image {
    position: relative;
    height: 42px;
    width: 173px;
    max-width: 100%;
}

.card-page .section-nav .list .slider .swiper-slide:not(.plate) .image {
    margin-top: 14px;
}

.card-page .section-nav .list .slider .swiper-slide:not(.plate) .title {
    margin-top: 32px;
}


.card-page .section-nav .list .slider .swiper-slide.plate .image {
    width: 76px;
    height: 76px;
    margin-bottom: -5px;
}

@media (max-width: 980px) {
    .card-page .section-nav .list .slider .swiper-slide .image {
        width: 100px;
    }
}

.card-page .section-nav .list .slider .swiper-slide .image:before {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    box-sizing: border-box;
    border: 1px solid #1069BB;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
}

.card-page .section-nav .list .slider .swiper-slide.active .image:before {
    opacity: 1;
}

.card-page .section-nav .list .slider .swiper-slide:hover .image:before {
    opacity: .5;
}

.card-page .section-nav .list .slider .swiper-slide.active:hover .image:before {
    opacity: 1;
}

.card-page .section-nav .list .slider .swiper-slide .image > * {
    position: absolute;
    width: calc(100% - 14px);
    height: calc(100% - 14px);
    top: 7px;
    left: 7px;
    z-index: 1;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.card-page .section-nav .list .slider .swiper-slide:hover .image > * {
    opacity: .6;
}

.card-page .section-nav .list .slider .swiper-slide.active:hover .image > * {
    opacity: 1;
}

@media (max-width: 980px) {
    .card-page .section-nav .list .slider .swiper-slide .image > * {
        width: calc(100% - 10px);
        height: calc(100% - 10px);
        top: 5px;
        left: 5px;
    }
}

.card-page .section-nav .list .slider .swiper-slide .title {
    margin-top: 20px;
    color: #969696;
    font-size: 14px;
    line-height: 1.25em;
    box-sizing: border-box;
    padding-left: 7px;
}

@media (max-width: 1280px) {
    .card-page .section-nav .list .slider .swiper-slide .title {
        margin-top: 10px;
    }

    .card-page .section-nav .list .slider .swiper-slide:not(.plate) .title {
        margin-top: 24px;
    }
}

.card-page .section-nav .list .slide-to {
    position: relative;
    width: 56px;
    height: 56px;
    top: -6px;
    opacity: .3;
    cursor: pointer;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
}

.card-page .section-nav .list .slide-to:hover {
    opacity: 1;
}

@media (max-width: 980px) {
    .card-page .section-nav .list .slide-to {
        display: none;
    }
}

.card-page .section-nav .list .slide-to.hidden {
    opacity: .5;
    pointer-events: none;
}

.card-page .section-nav .list .slide-to:before,
.card-page .section-nav .list .slide-to:after {
    content: '';
    display: block;
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: url("../img/rounded-next-2ee5188507c47ba66418fadf5796b589.svg") no-repeat center center/contain;
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
}

.card-page .section-nav .list .slide-to:after {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 0;
}

.card-page .section-nav .list .slide-to.hidden:before {
    opacity: 0;
}

.card-page .section-nav .list .slide-to.hidden:after {
    opacity: 1;
}

.card-page .section-nav .list .slide-to.prev:before,
.card-page .section-nav .list .slide-to.prev:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.card-page .section-about {
    border-bottom: 1px solid #dbdbdb;
}

@media (max-width: 600px) {
    .card-page .section-about {
        border-bottom: none;
    }
}

.card-page .section-about > .section-inner {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    min-height: 30vw;
}

@media (max-width: 1700px) {
    .card-page .section-about > .section-inner {
        min-height: 40vw;
    }
}

@media (max-width: 980px) {
    .card-page .section-about > .section-inner {
        flex-direction: column;
    }
}

.card-page .section-about .left {
    display: flex;
    position: relative;
    flex-direction: column;
    flex-basis: 0;
    flex-grow: 1;
    padding-top: 80px;
    padding-bottom: 50px;
}

@media (min-width: 1701px) {
    .card-page .section-about .left {
        padding-right: 140px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-about .left {
        padding-top: 65px;
    }
}

@media (max-width: 980px) {
    .card-page .section-about .left {
        flex-basis: initial;
        order: 2;
        padding-top: 45px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left {
        padding-top: 50px;
    }
}

.card-page .section-about .left .factor {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    justify-content: flex-start;
    position: absolute;
    font-size: 14px;
    line-height: 1em;
    color: #969696;
    right: 20px;
    top: 105px;
}

@media (max-width: 1280px) {
    .card-page .section-about .left .factor {
        top: 75px;
    }
}

@media (max-width: 980px) {
    .card-page .section-about .left .factor {
        top: 45px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left .factor {
        position: relative;
        top: 0;
        right: 0;
        margin: 20px 0 10px;
    }
}

.card-page .section-about .left .factor .view {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    border: 1px solid #e2e2e2;
    box-sizing: border-box;
    border-radius: 4px;
    align-self: center;
    margin-right: 15px;
}

.card-page .section-about .left .factor .view > * {
    width: 22px;
    height: 6px;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
}

.card-page .section-about .left .factor .view.tile > * {
    width: 18px;
    height: 18px;
    -webkit-transform: none;
    -moz-transform: none;
    -ms-transform: none;
    transform: none;
}

.card-page .section-about .left .factor .info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    position: relative;
    top: 2px;
}

.card-page .section-about .left .header {
    font-size: 64px;
    line-height: 72px;
}

@media (max-width: 1280px) {
    .card-page .section-about .left .header {
        font-size: 48px;
        line-height: 56px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left .header {
        font-size: 32px;
        line-height: 40px;
    }
}

.card-page .section-about .left .category {
    font-size: 24px;
    line-height: 32px;
    color: #969696;
}

@media (max-width: 600px) {
    .card-page .section-about .left .category {
        font-size: 18px;
        line-height: 24px;
    }
}

.card-page .section-about .left .list {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    flex-wrap: wrap;
    flex-grow: 1;
    margin-top: 25px;
}

@media (max-width: 980px) {
    .card-page .section-about .left .list {
        margin-top: 35px;
        max-width: 520px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left .list {
        margin-top: 25px;
        justify-content: flex-start;
        width: calc(100% + 20px);
    }
}

.card-page .section-about .left .list > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    width: 50%;
    padding-right: 20px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

@media (max-width: 980px) {
    .card-page .section-about .left .list > * {
        padding-right: 35px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left .list > * {
        flex-direction: column;
        align-items: flex-start;
        padding-right: 0;
    }

    .card-page .section-about .left .list > *:nth-child(even) {
        padding-left: 20px;
    }
}

.card-page .section-about .left .list .icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0;
}

.card-page .section-about .left .list .text {
    font-size: 14px;
    line-height: 1.25em;
    box-sizing: border-box;
    padding-left: 25px;
}

@media (max-width: 600px) {
    .card-page .section-about .left .list .text {
        padding-left: 0;
        margin-top: 15px;
    }
}

.card-page .section-about .left .download {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: stretch;
    padding-top: 35px;
    color: #003057;
    order: 1;
}

@media (max-width: 600px) {
    .card-page .section-about .left .download {
        display: flex;
        flex-direction: column;
        align-self: flex-start;
        order: initial;
        padding-top: 10px;
    }
}

.card-page .section-about .left .download > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.card-page .section-about .left .download > * + * {
    margin-left: 20px;
}

@media (max-width: 600px) {
    .card-page .section-about .left .download > * + * {
        margin-left: 0;
        margin-top: 20px;
    }
}

.card-page .section-about .left .download > * > * {
    display: block;
    font-size: 10px;
    line-height: 18px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid #1069BB;
    border-radius: 2px;
}

.card-page .section-about .left .download > *:after {
    content: 'Скачать 3D модель';
    display: block;
    font-size: 14px;
    line-height: 1em;
    height: 1em;
    padding-left: 8px;
}

.card-page .section-about .left .download > * + *:after {
    content: 'Скачать текстуру';
}

.card-page .section-about .left .tools {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 20px;
}

@media (max-width: 600px) {
    .card-page .section-about .left .tools {
        flex-direction: column;
        align-items: stretch;
        margin-top: 35px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left .tools .search {
        height: 40px;
        line-height: 38px;
        font-size: 14px;
    }
}

.card-page .section-about .left .tools .look {
    margin-left: 30px;
}

@media (max-width: 1280px) {
    .card-page .section-about .left .tools .look {
        margin-left: 20px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .left .tools .look {
        height: 40px;
        line-height: 38px;
        font-size: 14px;
        margin: 15px 0 0;
    }
}

.card-page .section-about .left .icons {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 40px;
}

.card-page .section-about .left .icons > * {
    position: relative;
    width: 30px;
    height: 30px;
    box-sizing: border-box;
    border: 1px solid #e2e2e2;
    border-radius: 4px;
}

.card-page .section-about .left .icons > * + * {
    margin-left: 15px;
}

.card-page .section-about .left .icons > * > * {
    position: relative;
    z-index: 0;
}

.card-page .section-about .left .icons .title {
    position: absolute;
    left: 50%;
    top: 100%;
    -webkit-transform: translate(-50%, 0);
    -moz-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0);
    box-shadow: 0 3px 7px rgba(0, 0, 0, .1);
    pointer-events: none;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
}

.card-page .section-about .left .icons > *:hover .title {
    opacity: 1;
}

.card-page .section-about .left .icons .title:before {
    content: '';
    display: block;
    position: absolute;
    left: 50%;
    top: 0;
    background: #fff;
    height: 8px;
    width: 8px;
    box-shadow: 0 3px 7px rgba(0, 0, 0, .1);
    -webkit-transform: translate(-50%, -50%) rotate(45deg);
    -moz-transform: translate(-50%, -50%) rotate(45deg);
    -ms-transform: translate(-50%, -50%) rotate(45deg);
    transform: translate(-50%, -50%) rotate(45deg);
}

.card-page .section-about .left .icons .title:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #fff;
}

.card-page .section-about .left .icons .title > * {
    position: relative;
    z-index: 2;
    padding: 5px 7px;
    font-size: 12px;
    line-height: 1em;
    color: #939393;
}

.card-page .section-about .left .icons .icon {
    position: absolute;
    left: 5px;
    top: calc(50% - 10px);
    width: calc(100% - 10px);
    height: 20px;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
}

.card-page .section-about .right {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    width: 56%;
    flex-basis: initial;
    background: #f1f1f1;
    padding-top: 80px;
    padding-bottom: 50px;
}

@media (min-width: 1701px) {
    .card-page .section-about .right {
        padding-left: 60px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-about .right {
        width: 50%;
    }
}

@media (max-width: 980px) {
    .card-page .section-about .right {
        order: 1;
        width: auto;
        height: 65vw;
        padding-top: 45px;
        padding-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .card-page .section-about .right {
        height: 98vw;
        padding: 20px;
    }
}

.card-page .section-about .right > * {
    position: relative;
    z-index: 1;
}

.card-page .section-about .right .slider {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.card-page .section-about .right .slider .designer-btn {
    background-color: #004A8F;
    border-radius: 40px;
    color: #FFFFFF;
    display: flex;
    padding: 10px 20px;
    position: absolute;
    font-size: 16px;
    font-weight: 400;
    line-height: 20px;
    gap: 12px;
    top: 20px;
    left: 20px;
    z-index: 2;
}

.card-page .section-about .right .slider .swiper-wrapper {
    align-items: stretch;
}

.card-page .section-about .right .slider .swiper-slide {
    position: relative;
}

.card-page .section-about .right .slider .swiper-slide > * {
    box-sizing: border-box;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-color: #000;
    object-fit: cover;
}

.card-page .section-about .right .slider .swiper-slide.contain > * {
    object-fit: contain;
    left: 60px;
    top: 40px;
    width: calc(100% - 120px);
    height: calc(100% - 80px);
    background-color: transparent;
}

@media (min-width: 1701px) {
    .card-page .section-about .right .slider .swiper-slide.contain > * {
        width: calc(100% - 270px);
    }
}

@media (max-width: 1280px) {
    .card-page .section-about .right .slider .swiper-slide.contain > * {
        left: 20px;
        top: 30px;
        width: calc(100% - 40px);
        height: calc(100% - 60px);
    }
}

@media (max-width: 980px) {
    .card-page .section-about .right .slider .swiper-slide.contain > * {
        left: 70px;
        width: calc(100% - 140px);
    }
}

@media (max-width: 600px) {
    .card-page .section-about .right .slider .swiper-slide.contain > * {
        left: 20px;
        width: calc(100% - 40px);
        top: 20px;
        height: calc(100% - 40px);
    }
}

.card-page .section-about .right .download {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    align-self: flex-end;
    color: #003057;
}

@media (max-width: 600px) {
    .card-page .section-about .right .download {
        display: none;
    }
}

.card-page .section-about .right .download > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
}

.card-page .section-about .right .download > * + * {
    margin-left: 25px;
}

.card-page .section-about .right .download > *:before {
    content: '.obj';
    display: block;
    font-size: 10px;
    line-height: 18px;
    box-sizing: border-box;
    padding: 0 6px;
    border: 1px solid #1069BB;
    border-radius: 2px;
}

.card-page .section-about .right .download > *:after {
    content: 'Скачать 3D модель';
    display: block;
    font-size: 14px;
    line-height: 1em;
    height: 1em;
    padding-left: 8px;
}

.card-page .section-about .right .download > * + *:before {
    content: '.jpg';
}

.card-page .section-about .right .download > * + *:after {
    content: 'Скачать текстуру';
}

.card-page .section-about .right .space {
    flex-basis: 0;
    flex-grow: 1;
}

.card-page .section-about .right .nav {
    position: relative;
    left: -5px;
    align-self: stretch;
}

@media (max-width: 600px) {
    .card-page .section-about .right .nav {
        left: 0;
        top: 40px;
    }

    .card-page .section-about .right .nav .swiper-wrapper {
        justify-content: center;
    }
}

.card-page .section-about .right .nav .swiper-slide {
    position: relative;
    width: 74px;
    height: 74px;
    border: 1px solid rgba(16, 105, 187, 0);
}

.card-page .section-about .right .nav .swiper-slide,
.card-page .section-about .right .nav .swiper-slide * {
    cursor: pointer;
}

@media (max-width: 600px) {
    .card-page .section-about .right .nav .swiper-slide {
        width: 6px;
        height: 6px;
        border-radius: 4px;
        border: 1px solid #979797;
        -webkit-transition: border-color 200ms ease;
        -moz-transition: border-color 200ms ease;
        -ms-transition: border-color 200ms ease;
        transition: border-color 200ms ease;
        will-change: border-color;
    }

    .card-page .section-about .right .nav .swiper-slide:hover {
        border-color: #1069BB;
    }
}

.card-page .section-about .right .nav .swiper-slide.active {
    border-color: #1069BB;
}

@media (max-width: 600px) {
    .card-page .section-about .right .nav .swiper-slide.active {
        border-color: #979797;
    }
}

.card-page .section-about .right .nav .swiper-slide:before {
    content: '';
    display: block;
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 5px;
    top: 5px;
    background: #fff;
    z-index: 0;
}

@media (max-width: 600px) {
    .card-page .section-about .right .nav .swiper-slide:before {
        width: 8px;
        height: 8px;
        left: -1px;
        top: -1px;
        background: #1069BB;
        border-radius: 6px;
        opacity: 0;
    }

    .card-page .section-about .right .nav .swiper-slide.active:before {
        opacity: 1;
    }
}

.card-page .section-about .right .nav .swiper-slide > * {
    position: absolute;
    width: calc(100% - 10px);
    height: calc(100% - 10px);
    left: 5px;
    top: 5px;
    z-index: 1;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    box-shadow: 0 0 0 2px #dbdbdb;
}

.card-page .section-about .right .nav .swiper-slide.active > * {
    box-shadow: none;
}

@media (max-width: 600px) {
    .card-page .section-about .right .nav .swiper-slide > * {
        display: none;
    }
}

.card-page .section-about .right .nav .swiper-slide.contain > * {
    object-fit: contain;
}

.card-page .section-chars {
    padding-top: 80px;
    padding-bottom: 80px;
}

@media (max-width: 1280px) {
    .card-page .section-chars {
        padding-top: 65px;
        padding-bottom: 65px;
    }
}

@media (max-width: 980px) {
    .card-page .section-chars {
        padding-top: 50px;
        padding-bottom: 90px;
    }
}

@media (max-width: 600px) {
    .card-page .section-chars {
        padding-top: 30px;
        padding-bottom: 55px;
    }
}

.card-page .section-chars > .section-inner {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
}

@media (max-width: 1280px) {
    .card-page .section-chars > .section-inner {
        flex-wrap: wrap;
    }
}

@media (max-width: 980px) {
    .card-page .section-chars > .section-inner {
        flex-direction: column;
        align-items: stretch;
    }
}

.card-page .section-chars .left {
    flex-basis: 0;
    flex-grow: 1;
    padding-right: 140px;
}

@media (max-width: 1700px) {
    .card-page .section-chars .left {
        padding-right: 100px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-chars .left {
        padding-right: 80px;
    }
}

@media (max-width: 980px) {
    .card-page .section-chars .left {
        padding: 0 20px;
        max-width: 500px;
    }
}

.card-page .section-chars .left:before {
    content: 'Технические характеристики';
    display: block;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 30px;
}

.card-page .section-chars .left > * {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 14px;
    line-height: 21px;
    padding: 11px 0;
    box-sizing: border-box;
}

@media (max-width: 600px) {
    .card-page .section-chars .left > * {
        flex-direction: column;
        align-items: flex-start;
        padding: 0;
    }
}

.card-page .section-chars .left > * + * {
    border-top: 1px solid #d8d8d8;
}

@media (max-width: 600px) {
    .card-page .section-chars .left > * + * {
        border-top: none;
        margin-top: 20px;
    }
}

.card-page .section-chars .left .title {
    color: #969696;
}

.card-page .section-chars .left .value.link {
    color: #1069BB;

    &:hover {
        text-decoration: underline;
    }
}

.card-page .section-chars .left .value {
    flex-grow: 1;
    text-align: right;
}

.card-page .section-chars .right {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 28%;
    padding-left: 0;
}

@media (max-width: 1700px) {
    .card-page .section-chars .right {
        padding-left: 30px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-chars .right {
        width: 50%;
        padding-left: 0;
    }
}

@media (max-width: 980px) {
    .card-page .section-chars .right {
        padding: 0 20px;
        max-width: 500px;
        margin-top: 30px;
        width: auto;
    }
}

@media (max-width: 600px) {
    .card-page .section-chars .right {
        margin-top: 50px;
    }
}

.card-page .section-chars .right:before {
    content: 'Документы';
    display: block;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 30px;
}


.card-page .section-chars .right .youtube {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 16px;
    color: #000;
    min-height: 56px;
    padding-left: 70px;
    box-sizing: border-box;
    width: 33.33%;
    margin-bottom: 30px;
}

@media (max-width: 1280px) {
    .card-page .section-chars .right .youtube {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .card-page .section-chars .right .youtube {
        width: 100%;
        max-width: 310px;
    }
}

.card-page .section-chars .right .youtube:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 29px;
    box-sizing: border-box;
    border: 2px solid #DEDEDE;
    background: url("../img/youtube-927842de32bd12b43092fc609c56c85e.svg") no-repeat center center/25px auto;
}

.card-page .section-chars .right .youtube .title {
}

.card-page .section-chars .right .youtube .context {
    color: #969696;
}

.card-page .section-chars .right .doc {
    position: relative;
    padding-left: 50px;
    box-sizing: border-box;
    min-height: 34px;
    font-size: 16px;
    line-height: 1.25em;
    max-width: 370px;
}

.card-page .section-chars .right .doc,
.card-page .section-chars .right .doc * {
    cursor: pointer;
}

@media (max-width: 600px) {
    .card-page .section-chars .right .doc {
        font-size: 14px;
    }
}

.card-page .section-chars .right .doc + * {
    margin-top: 25px;
}

.card-page .section-chars .right .doc:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #1069BB;
    border-radius: 4px;
    background: url("../img/blue-down-81d0522c267c29223e6a12b805c1aad6.svg") no-repeat center center/auto 12px;
    z-index: 0;
}

.card-page .section-chars .right .doc:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: url("../img/white-down-e639d693ca75e2cb8b99440a80a5c23e.svg") no-repeat center center/auto 12px, #1069BB;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    z-index: 1;
}

.card-page .section-chars .right .doc:hover:after {
    opacity: 1;
}

.card-page .section-chars .right .size {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    color: #969696;
    min-width: 200px;
}


.card-page .section-chars .aside {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    width: 28%;
    padding-left: 0;
}

@media (max-width: 1700px) {
    .card-page .section-chars .aside {
        padding-left: 30px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-chars .aside {
        width: 100%;
        padding: 0 20px;
        margin-top: 50px;
    }
}

@media (max-width: 980px) {
    .card-page .section-chars .aside {
        padding: 0 20px;
        max-width: 500px;
        margin-top: 50px;
        width: auto;
    }
}

@media (max-width: 600px) {
    .card-page .section-chars .aside {
        margin-top: 50px;
    }
}


.card-page .section-chars .aside:before {
    content: 'Дополнительно';
    display: block;
    font-size: 24px;
    line-height: 32px;
    padding-bottom: 30px;
}


.card-page .section-chars .aside .youtube {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 16px;
    color: #000;
    min-height: 56px;
    padding-left: 70px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

.card-page .section-chars .aside .video {
    display: flex;
    position: relative;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    font-size: 16px;
    color: #000;
    min-height: 56px;
    padding-left: 70px;
    box-sizing: border-box;
    margin-bottom: 30px;
}

@media (max-width: 1280px) {
    .card-page .section-chars .aside .youtube {
        width: 50%;
    }
}

@media (max-width: 600px) {
    .card-page .section-chars .aside .youtube {
        width: 100%;
        max-width: 310px;
    }
}

.card-page .section-chars .aside .youtube:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 56px;
    height: 56px;
    border-radius: 29px;
    box-sizing: border-box;
    border: 2px solid #DEDEDE;
    background: url("../img/youtube-927842de32bd12b43092fc609c56c85e.svg") no-repeat center center/25px auto;
}

.card-page .section-chars .aside .video:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 57px;
    height: 56px;
    border-radius: 29px;
    box-sizing: border-box;
    border: 2px solid #DEDEDE;
    background: url("../img/collections/icon_play-b8f7632ea20a885c2b32e99e7ba8b545.svg") no-repeat 16px 14px/25px auto;
    transition: background 200ms ease;
    -webkit-transition: background 200ms ease;
    -moz-transition: background 200ms ease;
    -ms-transition: background 200ms ease;
}

.card-page .section-chars .aside .youtube .title {
}

.card-page .section-chars .aside .youtube .context {
    color: #969696;
}

.card-page .section-chars .aside .doc {
    position: relative;
    padding-left: 50px;
    box-sizing: border-box;
    min-height: 34px;
    font-size: 16px;
    line-height: 1.25em;
    max-width: 370px;
}

.card-page .section-chars .aside .doc,
.card-page .section-chars .aside .doc * {
    cursor: pointer;
}

@media (max-width: 600px) {
    .card-page .section-chars .aside .doc {
        font-size: 14px;
    }
}

.card-page .section-chars .aside .doc + * {
    margin-top: 25px;
}

.card-page .section-chars .aside .doc:before {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 34px;
    height: 34px;
    border: 1px solid #1069BB;
    border-radius: 4px;
    background: url("../img/blue-down-81d0522c267c29223e6a12b805c1aad6.svg") no-repeat center center/auto 12px;
    z-index: 0;
}

.card-page .section-chars .aside .doc:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 36px;
    height: 36px;
    border-radius: 4px;
    background: url("../img/white-down-e639d693ca75e2cb8b99440a80a5c23e.svg") no-repeat center center/auto 12px, #1069BB;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    z-index: 1;
}

.card-page .section-chars .aside .doc:hover:after {
    opacity: 1;
}

.card-page .section-chars .aside .size {
    display: inline-block;
    vertical-align: top;
    white-space: nowrap;
    color: #969696;
    min-width: 200px;
}

.card-page .section-faq {
    background: #f1f1f1;
    padding: 90px 0;
}

@media (max-width: 1280px) {
    .card-page .section-faq {
        padding: 60px 0;
    }
}

@media (max-width: 600px) {
    .card-page .section-faq {
        padding: 45px 0;
    }
}

.card-page .section-faq .header {
    font-size: 48px;
    line-height: 56px;
}

@media (max-width: 1280px) {
    .card-page .section-faq .header {
        font-size: 32px;
        line-height: 40px;
    }
}

.card-page .section-faq .list {
    margin-top: 45px;
}

@media (max-width: 1700px) {
    .card-page .section-faq .list {
        margin-top: 40px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-faq .list {
        margin-top: 20px;
    }
}

.card-page .section-faq .list > * {
}

.card-page .section-faq .list .caption {
    position: relative;
    font-size: 24px;
    line-height: 32px;
    background: #fff;
    padding: 20px;
    cursor: pointer;
    -webkit-transition: background 200ms ease,
    color 200ms ease;
    -moz-transition: background 200ms ease,
    color 200ms ease;
    -ms-transition: background 200ms ease,
    color 200ms ease;
    transition: background 200ms ease,
    color 200ms ease;
    will-change: background, color;
}

@media (max-width: 1280px) {
    .card-page .section-faq .list .caption {
        padding: 20px 15px;
    }
}

@media (max-width: 980px) {
    .card-page .section-faq .list .caption {
        font-size: 18px;
        line-height: 24px;
        padding: 24px 75px 24px 15px;
    }
}

@media (max-width: 600px) {
    .card-page .section-faq .list .caption {
        padding: 12px 75px 12px 15px;
    }
}

.card-page .section-faq .list > *.active .caption {
    background: #1069BB;
    color: #fff;
}

.card-page .section-faq .list .caption:before,
.card-page .section-faq .list .caption:after {
    content: '';
    display: block;
    position: absolute;
    top: 50%;
    right: 24px;
    width: 32px;
    height: 0;
    border-bottom: 1px solid #919191;
    -webkit-transition: -webkit-transform 200ms ease,
    border-color 200ms ease;
    -moz-transition: -moz-transform 200ms ease,
    border-color 200ms ease;
    -ms-transition: -ms-transform 200ms ease,
    border-color 200ms ease;
    transition: transform 200ms ease,
    border-color 200ms ease;
    will-change: border-color, transform;
}

.card-page .section-faq .list > *.active .caption:before,
.card-page .section-faq .list > *.active .caption:after {
    border-bottom-color: #fff;
}

.card-page .section-faq .list .caption:before {
}

.card-page .section-faq .list .caption:after {
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    transform: rotate(90deg);
}

.card-page .section-faq .list > *.active .caption:before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.card-page .section-faq .list > *.active .caption:after {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg);
}

.card-page .section-faq .list .text {
    overflow: hidden;
    height: 0;
    -webkit-transition: height 200ms ease;
    -moz-transition: height 200ms ease;
    -ms-transition: height 200ms ease;
    transition: height 200ms ease;
    will-change: height;
}

.card-page .section-faq .list .text > * {
    padding-bottom: 45px;
}

@media (max-width: 1700px) {
    .card-page .section-faq .list .text > * {
        padding-bottom: 40px;
    }
}

@media (max-width: 980px) {
    .card-page .section-faq .list .text > * {
        padding-bottom: 30px;
    }
}

@media (max-width: 600px) {
    .card-page .section-faq .list .text > * {
        padding-bottom: 25px;
    }
}


.card-page .section-faq .list .text > * > * {
    background: #fff;
    padding: 15px 20px 20px;
    font-size: 18px;
    line-height: 24px;
}

@media (max-width: 1700px) {
    .card-page .section-faq .list .text > * > * {
        padding: 20px;
    }
}

@media (max-width: 1280px) {
    .card-page .section-faq .list .text > * > * {
        padding: 20px 15px;
    }
}

@media (max-width: 980px) {
    .card-page .section-faq .list .text > * > * {
        font-size: 16px;
        line-height: 1.25em;
    }
}


.card-page .section-projects {
    padding: 80px 0;
    border-top: 1px solid #d6d6d6;
    overflow: hidden;
    max-width: 100vw;
}

@media (max-width: 1280px) {
    .card-page .section-projects {
        padding: 60px 0;
    }
}

@media (max-width: 600px) {
    .card-page .section-projects {
        padding: 60px 0 30px;
    }
}

.card-page .section-projects .section-inner {
    overflow: visible;
}

.card-page .section-projects .header {
    font-size: 48px;
    line-height: 56px;
}

@media (max-width: 1280px) {
    .card-page .section-projects .header {
        font-size: 32px;
        line-height: 40px
    }
}

.card-page .section-projects .list {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 32px;
}

@media (max-width: 600px) {
    .card-page .section-projects .list {
        margin-top: 80px;
    }
}

.card-page .section-projects .list .slide-to {
    display: flex;
    position: absolute;
    right: 0;
    top: -72px;
}

@media (max-width: 600px) {
    .card-page .section-projects .list .slide-to {
        right: initial;
        left: 0;
    }
}

.card-page .section-projects .list .slide-to > * {
    position: relative;
    width: 56px;
    height: 56px;
    opacity: .3;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    z-index: 1;
    cursor: pointer
}

.card-page .section-projects .list .slide-to > * + * {
    margin-left: 16px;
}

.card-page .section-projects .list .slide-to > *:hover {
    opacity: 1
}

.card-page .section-projects .list .slide-to > *.hidden {
    pointer-events: none;
    opacity: .3
}

.card-page .section-projects .list .slide-to .prev {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.card-page .section-projects .list .slide-to > *:before,
.card-page .section-projects .list .slide-to > *:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../img/rounded-next-2ee5188507c47ba66418fadf5796b589.svg") no-repeat center center/contain;
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity
}

.card-page .section-projects .list .slide-to > *:after {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 0
}

.card-page .section-projects .list .slide-to > *.hidden:before {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 0
}

.card-page .section-projects .list .slide-to > *.hidden:after {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 1
}

.card-page .section-projects .list .slides {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

.card-page .section-projects .list .slides > * {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
}

.card-page .section-projects .list .slides > * > * {
}

.card-page .section-projects .list .slides .image {
    position: relative;
    background: url("../img/project-samples/default-e0872706603b88662098d1ada205fe5c.svg") no-repeat center center/92px auto, #E6E6E6;
}

.card-page .section-projects .list .slides .image:before {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 67%;
    pointer-events: none;
}

.card-page .section-projects .list .slides .image > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.card-page .section-projects .list .slides .title {
    font-size: 24px;
    line-height: 32px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .card-page .section-projects .list .slides .title {
        font-size: 18px;
        line-height: 26px;
    }
}

.card-page .section-slider {
    padding-top: 80px;
    padding-bottom: 75px;
    overflow: hidden
}

@media (max-width: 1700px) {
    .card-page .section-slider {
        padding-top: 90px;
        padding-bottom: 90px
    }
}

@media (max-width: 1280px) {
    .card-page .section-slider {
        padding-top: 60px;
        padding-bottom: 60px
    }
}

.card-page .section-slider > .section-inner {
    position: relative;
    padding: 0 110px
}

@media (max-width: 1280px) {
    .card-page .section-slider > .section-inner {
        padding: 0 60px 0 0
    }
}

@media (max-width: 600px) {
    .card-page .section-slider > .section-inner {
        padding: 0
    }
}

.card-page .section-slider > .section-inner > * {
    position: relative;
    z-index: 0
}

.card-page .section-slider .header {
    font-size: 48px;
    line-height: 56px
}

@media (max-width: 1280px) {
    .card-page .section-slider .header {
        font-size: 32px;
        line-height: 40px
    }
}

.card-page .section-slider .slider {
    margin-top: 60px
}

@media (max-width: 1280px) {
    .card-page .section-slider .slider {
        position: relative;
        left: -20px;
        margin-top: 25px
    }
}

@media (max-width: 600px) {
    .card-page .section-slider .slider {
        left: 0
    }
}

.card-page .section-slider .slider .swiper-slide {
    opacity: .5;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity
}

.card-page .section-slider .slider .swiper-slide.swiper-slide-active {
    opacity: 1
}

.card-page .section-slider .slider .swiper-slide .image {
    height: 620px;
    object-fit: cover;
    width: 100%;
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center
}

@media (max-width: 1700px) {
    .card-page .section-slider .slider .swiper-slide .image {
        height: 620px
    }
}

@media (max-width: 1280px) {
    .card-page .section-slider .slider .swiper-slide .image {
        height: 53vw
    }
}

@media (max-width: 980px) {
    .card-page .section-slider .slider .swiper-slide .image {
        height: 53vw
    }
}

.card-page .section-slider .slider .swiper-slide .title {
    font-size: 24px;
    line-height: 32px;
    margin-top: 32px;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity
}

@media (max-width: 1280px) {
    .card-page .section-slider .slider .swiper-slide .title {
        opacity: .5;
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 50px
    }
}

@media (max-width: 980px) {
    .card-page .section-slider .slider .swiper-slide .title {
        opacity: 0
    }
}

@media (max-width: 600px) {
    .card-page .section-slider .slider .swiper-slide .title {
        padding: 0
    }
}

.card-page .section-slider .slider .swiper-slide.swiper-slide-active .title {
    opacity: 1
}

.card-page .section-slider .slider .swiper-slide .text {
    font-size: 18px;
    line-height: 24px;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity
}

@media (max-width: 1280px) {
    .card-page .section-slider .slider .swiper-slide .text {
        box-sizing: border-box;
        padding: 0 20px;
        margin-top: 5px;
        opacity: .5
    }
}

@media (max-width: 980px) {
    .card-page .section-slider .slider .swiper-slide .text {
        opacity: 0
    }
}

@media (max-width: 600px) {
    .card-page .section-slider .slider .swiper-slide .text {
        padding: 0
    }
}

.card-page .section-slider .slider .swiper-slide.swiper-slide-active .text {
    opacity: 1
}

.card-page .section-slider .prev, .card-page .section-slider .next {
    position: absolute;
    width: 56px;
    height: 56px;
    top: calc(50% - 28px);
    opacity: .3;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    z-index: 1;
    cursor: pointer
}

.card-page .section-slider .prev:hover, .card-page .section-slider .next:hover {
    opacity: 1
}

@media (max-width: 1280px) {
    .card-page .section-slider .prev, .card-page .section-slider .next {
        display: none
    }
}

.card-page .section-slider .prev.hidden, .card-page .section-slider .next.hidden {
    pointer-events: none;
    opacity: .5
}

.card-page .section-slider .prev:before, .card-page .section-slider .prev:after, .card-page .section-slider .next:before, .card-page .section-slider .next:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    background: url("../img/rounded-next-2ee5188507c47ba66418fadf5796b589.svg") no-repeat center center/contain;
    opacity: 1
}

.card-page .section-slider .prev:after, .card-page .section-slider .next:after {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 0
}

.card-page .section-slider .prev.hidden:before, .card-page .section-slider .next.hidden:before {
    opacity: 0
}

.card-page .section-slider .prev.hidden:after, .card-page .section-slider .next.hidden:after {
    opacity: 1
}

.card-page .section-slider .prev {
    left: 20px;
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.card-page .section-slider .next {
    right: 20px
}

.card-page .section-slider .nav {
    display: none;
    position: absolute;
    flex-direction: row;
    align-items: flex-start;
    justify-content: center;
    top: calc(53vw + 80px);
    left: 0;
    width: 100%;
    z-index: 1
}

@media (max-width: 1280px) {
    .card-page .section-slider .nav {
        display: flex
    }
}

@media (max-width: 600px) {
    .card-page .section-slider .nav {
        top: calc(53vw + 90px)
    }
}

@media (max-width: 400px) {
    .card-page .section-slider .nav {
        top: calc(53vw + 120px)
    }
}

.card-page .section-slider .nav > * {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 5px;
    border: 1px solid #c4c4c4;
    cursor: pointer;
    -webkit-transition: border-color 200ms ease;
    -moz-transition: border-color 200ms ease;
    -ms-transition: border-color 200ms ease;
    transition: border-color 200ms ease;
    will-change: border-color
}

@media (max-width: 980px) {
    .card-page .section-slider .nav > * {
        width: 6px;
        height: 6px
    }
}

.card-page .section-slider .nav > *:hover {
    border-color: #1069BB
}

.card-page .section-slider .nav > * + * {
    margin-left: 20px
}

@media (max-width: 980px) {
    .card-page .section-slider .nav > * + * {
        margin-left: 8px
    }
}

.card-page .section-slider .nav > *:before {
    content: '';
    display: block;
    position: absolute;
    left: -1px;
    top: -1px;
    width: 10px;
    height: 10px;
    border-radius: 6px;
    background: #1069BB;
    opacity: 0;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity
}

@media (max-width: 980px) {
    .card-page .section-slider .nav > *:before {
        width: 8px;
        height: 8px
    }
}

.card-page .section-slider .nav > *.active:before {
    opacity: 1
}

/*Статьи*/

.section-blog .header {
    font-size: 48px;
    line-height: 56px;
    padding-top: 30px;
}

@media (max-width: 1280px) {

    .section-blog .header {
        font-size: 32px;
        line-height: 40px
    }

}

.section-blog .list {
    display: flex;
    position: relative;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    margin-top: 32px;
}

@media (max-width: 600px) {
    .section-blog .list {
        margin-top: 80px;
    }
}

.section-blog .list .slide-to {
    display: flex;
    position: absolute;
    right: 0;
    top: -72px;
}

@media (max-width: 600px) {
    .section-blog .list .slide-to {
        right: initial;
        left: 0;
    }
}

.section-blog .list .slide-to > * {
    position: relative;
    width: 56px;
    height: 56px;
    opacity: .3;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity;
    z-index: 1;
    cursor: pointer
}

.section-blog .list .slide-to > * + * {
    margin-left: 16px;
}

.section-blog .list .slide-to > *:hover {
    opacity: 1
}

.section-blog .list .slide-to > *.hidden {
    pointer-events: none;
    opacity: .3
}

.section-blog .list .slide-to .prev {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    transform: rotate(180deg)
}

.section-blog .list .slide-to > *:before,
.section-blog .list .slide-to > *:after {
    content: '';
    display: block;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: url("../img/rounded-next-2ee5188507c47ba66418fadf5796b589.svg") no-repeat center center/contain;
    opacity: 1;
    -webkit-transition: opacity 200ms ease;
    -moz-transition: opacity 200ms ease;
    -ms-transition: opacity 200ms ease;
    transition: opacity 200ms ease;
    will-change: opacity
}

.section-blog .list .slide-to > *:after {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 0
}

.section-blog .list .slide-to > *.hidden:before {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 0
}

.section-blog .list .slide-to > *.hidden:after {
    background: url("../img/rounded-next-gray-9af8afa1a058312b02c9aaf6f312afc3.svg") no-repeat center center/contain;
    opacity: 1
}

.section-blog .list .slides {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
    flex-grow: 1;
    flex-basis: 0;
    min-width: 0;
}

.section-blog .list .slides > * {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    justify-content: flex-start;
    overflow: visible;
}

.section-blog .list .slides > * > * {
}

.section-blog .list .slides .image {
    position: relative;
    background: url("../img/project-samples/default-e0872706603b88662098d1ada205fe5c.svg") no-repeat center center/92px auto, #E6E6E6;
}

.section-blog .list .slides .image:before {
    content: '';
    display: block;
    position: relative;
    width: 100%;
    padding-bottom: 67%;
    pointer-events: none;
}

.section-blog .list .slides .image > * {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
}

.section-blog .list .slides .title {
    font-size: 24px;
    line-height: 32px;
    margin-top: 16px;
}

@media (max-width: 600px) {
    .section-blog .list .slides .title {
        font-size: 18px;
        line-height: 26px;
    }
}

.section-blog .list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: flex-start;
    width: calc(100% + 48px);
    margin-top: 80px;
}

@media (max-width: 1700px) {
    .section-blog .list {
        margin-top: 64px;
        width: calc(100% + 40px);
    }
}

@media (max-width: 1280px) {
    .section-blog .list {
        margin-top: 40px;
        width: calc(100% + 24px);
    }
}

@media (max-width: 900px) {
    .section-blog .list {
        margin-top: 32px;
        width: calc(100% + 16px);
    }
}

@media (max-width: 600px) {
    .section-blog .list {
        width: 100%;
    }
}

.section-blog .list > * {
    width: 33.33%;
    box-sizing: border-box;
    padding-right: 48px;
    margin-bottom: 64px;
}

@media (max-width: 1700px) {
    .section-blog .list > * {
        padding-right: 40px;
        margin-bottom: 40px;
    }
}

@media (max-width: 1280px) {
    .section-blog .list > * {
        width: 50%;
        padding-right: 24px;
    }
}

@media (max-width: 900px) {
    .section-blog .list > * {
        padding-right: 16px;
        margin-bottom: 32px;
    }
}

@media (max-width: 600px) {
    .section-blog .list > * {
        width: 100%;
        padding-right: 0;
    }
}

.section-blog .list > * > * {
    display: block;
}

.section-blog .list .image {
    position: relative;
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center center;
    opacity: 1;
    transition: opacity 200ms ease;
    will-change: opacity;
    max-width: 100%;
}

.section-blog .list > * > *:hover .image {
    opacity: .8;
}

.section-blog .list .image:before {
    content: '';
    display: block;
    width: 100%;
    padding-bottom: 68%;
}

.section-blog .list .info {
    margin-top: 16px;
}

@media (max-width: 900px) {
    .section-blog .list .info {
        margin-top: 8px;
    }
}

.section-blog .list .info .title {
    font-size: 32px;
    line-height: 40px;
    transition: color 200ms ease;
    will-change: color;
}

@media (max-width: 1700px) {
    .section-blog .list .info .title {
        font-size: 24px;
        line-height: 32px;
    }
}

.section-blog .list > * > *:hover .info .title {
    color: #1069BB;
}

.section-blog .list .info .review {
    font-size: 18px;
    line-height: 26px;
    margin-top: 8px;
}

@media (max-width: 1700px) {
    .section-blog .list .info .review {
        font-size: 16px;
        line-height: 24px;
    }
}

.section-blog .list .info .info_row {
    display: flex;
    gap: 20px;
}

.section-blog .list .info .time,
.section-blog .list .info .views,
.section-blog .list .info .like {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    font-size: 16px;
    line-height: 24px;
    color: #646464;
    margin-top: 16px;
}

@media (max-width: 1700px) {
    .section-blog .list .info .time,
    .section-blog .list .info .views,
    .section-blog .list .info .like {
        margin-top: 12px;
    }
}

.section-blog .list .info .time:before {
    content: '';
    display: block;
    position: relative;
    top: -2px;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    background: url("../img/time-1b875eb0fee7c85cca2e3b515ad23fc7.svg") no-repeat center center;
}

.section-blog .list .info .time:after {
    content: ' мин';
    white-space: pre;
}

.section-blog .list .info .views:before {
    content: '';
    display: block;
    position: relative;
    top: -2px;
    width: 24px;
    height: 16px;
    margin-right: 8px;
    background: url("../img/eye-e2b7019c96c23063b4c6c065fdc2f271.svg") no-repeat center center;
}

.section-blog .list .info .like:before {
    content: '';
    display: block;
    position: relative;
    width: 25px;
    height: 25px;
    margin-right: 8px;
    background: url("../img/heart-502cb2b775e08cea7d5c4ffc18bf1f06.svg") no-repeat center center;
    background-size: contain;
}

.video-popup {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    margin: auto;
    width: 100%;
    max-width: 700px;
    height: 400px;
    padding: 40px 0;
    background-color: white;
    border-radius: 20px;
    z-index: 1000;
    justify-content: center;
    align-items: center;
    box-shadow: 
        0 20px 40px rgba(0, 0, 0, 0.3),
        0 15px 25px rgba(0, 0, 0, 0.2),
        0 5px 10px rgba(0, 0, 0, 0.1);
}

.video-popup.active {
    display: flex;
}

.card-page .section-chars .aside .video.video-link:hover::before {
    background: url("../img/collections/icon_play_hover-e97b1cb8ed7b087a562de69020efe465.svg") no-repeat 16px 14px/25px auto;
    border-color: transparent;
    background-color: #1069BB;
}

.popup-content {
    position: relative;
    max-width: 90%;
    max-height: 100%;
    background: #000;
    border-radius: 8px;
    overflow: hidden;
}

.popup-video {
    display: block;
    height: 330px;
    width: 100%;
}

.close-btn {
    position: absolute;
    top: 10px;
    right: 10px;
    color: black;
    border: none;
    font-size: 24px;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s;
}

.video-list {
    display: flex;
    flex-direction: column;
}

.video-link {
    cursor: pointer;
}


.btn-more {
    display: flex;
    padding: 40px 0;

    a {
        margin-left: auto;
        background: #E2E2E2;
        border: none;
        color: #000;
        border-radius: 26px;
        height: 50px;
        line-height: 48px;
        font-size: 16px;
        padding: 0 25px;
        transition: background 0.2s linear;
        width: 215px;
        text-align: center;

        &:hover {
            background: #c4c4c4;
        }
    }
}

@media (max-width: 600px) {
    .btn-more {
        a {
            margin: 0 auto;
        }
    }
}