.docyoutube .item {
    display: flex;
    align-items: center;
    background-color: #ffffff;
    box-shadow: 0px 0px 20px -10px rgb(0 0 0 / 30%);
    flex-wrap: nowrap;
    margin: clamp(1.875rem, -44.6875rem + 50.0000vw, 2.5rem) 0px;
    border-radius: 1.6vw;
    overflow: hidden;
    height: 11em;
    font-size: clamp(1rem, 0.1648rem + 1.1127vw, 1.5rem);
    flex-direction: row;
}

.docyoutube .item a {
    display: flex;
    text-decoration: none;
    width: 100%;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: center;
}

.docyoutube .item-img {
    overflow: hidden;
    display: contents;
}

.docyoutube .item-img img {
    margin: 0px;
    width: 20vw;
}

.docyoutube .item-caption {
    display: flex;
    justify-content: center;
    flex-wrap: nowrap;
    width: inherit;
    padding-block: 20px; padding-inline: clamp(1.875rem, -44.6875rem + 50.0000vw, 2.5rem) 0; flex-direction: column;
    align-items: flex-start;
}

.docyoutube .item-caption .date, .docyoutube .item-caption .avtor {
    font-family: 'Nunito Sans';
    margin: 0;
    font-size: clamp(0.84rem, 0.5727rem + 0.3561vw, 1rem);
    font-stretch: 95%;
    font-weight: 630;
    letter-spacing: .005em;
    font-optical-sizing: auto;
    color: var(--ok-col-base-blue);
    opacity: 60%;
    line-height: 1.2em;
}

.docyoutube .item-caption .title {
    font-family: 'Literata';
    color: var(--ok-col-base-blue);
    margin: 0;
    font-size: clamp(1rem, 0.1648rem + 1.1127vw, 1.5rem);
    font-optical-sizing: none;
    font-weight: 670;
    letter-spacing: -.02em;
    word-spacing: 0.03em;
    line-height: 1.24em;
    margin-block: 0.4em 0.8em; }

.docyoutube .aforward {
    padding: 20px;
    min-width: clamp(3.75rem, 3.0192rem + 0.9736vw, 4.1875rem);
    margin-inline: clamp(1.5rem, -10.2813rem + 13.0000vw, 3.125rem); display: flex;
}

.docyoutube .aforward img {
    animation-name: red-next;
    animation-play-state: running;
    animation-direction: normal;
    animation-duration: 3.3s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.59, 0.33, 0.41, 0.74);
    margin: 0;
}

@keyframes red-next {
    13% {
        transform: translateX(0px)
    }

    33% {
        transform: translateX(16px)
    }
}

.article-content {
    padding: 0px 20%
}


.docyoutube {margin-block: calc(clamp(1.875rem, -44.6875rem + 50.0000vw, 2.5rem) + 5px) 0; }



@media screen and (max-width: 700px) {

    .article-content {
        padding-inline: 42px; }

    svg.svg_icon_vpravo.rotate {
        transform: rotate(-180deg);
    }

    .docyoutube .item a {
        flex-direction: column;
    }

    article {
        background-size: 100%;
    }

    .docyoutube .item {
        height: auto;
        display: flex;
        flex-direction: column;
        border-radius: 21px;
    }

    .docyoutube .item-img img {
        width: 85vw;
    }

    .docyoutube .item-img {
        display: flex;
        height: 200px;
        flex-direction: row;
        align-items: flex-start;
    }

    .docyoutube .aforward {
        position: absolute;
        margin-block-start: 167px; flex-direction: column;
        flex-wrap: nowrap;
        align-items: center;
        justify-content: center;
    }

    .docyoutube .item-caption {
        padding-block: 25px; padding-inline: clamp(1.875rem, -44.6875rem + 50.0000vw, 2.5rem); align-items: center;
    }

    .docyoutube .aforward:before {
        content: "";
        position: absolute;
        background: #ffffff;
        width: 230%;
        height: 86%;
        border-radius: 35px 35px 0 0;
    }

    .docyoutube .item-caption .title, .docyoutube .item-caption .date, .docyoutube .item-caption .avtor {
        text-align: center;
    }
}


.title_config {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1vw;
    padding-block-end: clamp(2.5rem, -0.1786rem + 2.8571vw, 3.25rem);
}

.title_config span {
    display: flex;
    align-items: center;
    margin: 0px 20px;
    font-family: 'Nunito Sans';
    font-size: clamp(0.86rem, 0.4291rem + 0.4754vw, 0.964rem);
    line-height: 1.4em;
    letter-spacing: .03111em;
    word-spacing: 0.1333em;
    font-weight: 950;
    font-style: normal;
    font-stretch: 95%;
    font-variation-settings: "YTLC" 515;
    font-optical-sizing: auto;
    color: var(--ok-col-base-blue);
    gap: 0.5em;
    flex-direction: row;
}

.title_config span.yellowline {
    width: 3px;
    height: auto;
    margin: 0px 0px;
    background: var(--ok-col-third-yellow);
}

@keyframes take-g-button {
    50% {
        outline: 0px solid var(--cq-outline-color);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }

    68% {
        outline: 20px solid var(--cq-outline-opac);
        transform: matrix(1.04, 0, 0, 1.04, 0, 0);
    }

    100% {
        outline: 20px solid var(--cq-outline-opac);
        transform: matrix(1, 0, 0, 1, 0, 0);
    }
}

@keyframes red-forward {
    13% {
        transform: translateX(0px)
    }

    33% {
        transform: translateX(8px)
    }
}

.useful-info {
    padding-block: clamp(3.875rem, -2.5977rem + 8.6231vw, 7.75rem); font-size: clamp(2.8rem, -4.2429rem + 7.7714vw, 4.5rem);
}

.cliker.plus.bronze {
    animation-name: red-rotate;
    animation-play-state: running;
    animation-direction: normal;
    animation-duration: 3.6s;
    animation-iteration-count: infinite;
    animation-timing-function: cubic-bezier(0.59, 0.33, 0.41, 0.74);
    position: relative;
    top: 3px;
}

@keyframes red-rotate {
    0% {
        transform: rotate(0deg)
    }

    20% {
        transform: rotate(0deg)
    }

    30% {
        transform: rotate(-10deg)
    }

    45% {
        transform: rotate(20deg)
    }

    70% {
        transform: rotate(0deg)
    }
}