[class*=articles-container] {
    max-width: 1400px;
    margin: 0px auto;
}

.articles-page{
    padding: 0 20px;
}

.articles-headline{
    width: 1400px;
    margin-top: 159px;
}

.articles-headline-text a{
    text-decoration: none;
    color: #333333;
}

.articles-headline-text .col-1 .color-page{
    display: flex;
    flex-direction: row;
}

.articles-headline-text .col-1 img{
    width: 20px;
}

.articles-headline-text{
    display: flex;
    flex-direction: column;
}

.articles-headline-text .col-1{
    display: flex;
    flex-direction: row;
}

.articles-headline-text h1{
    font-family: 'Gilroy-Bold';
    width: 815px;
    margin-top: 60px;
    margin-bottom: 38px;
}

.articles-headline-text .col-3-block{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 960px;
    height: 411px;
    background: #FFFFFF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    padding: 40px;
}

.articles-headline-text .col-3-block .hashtag{
    padding: 10px 25px;
    background: #F6F6F6;
    border-radius: 30px;
    width: max-content;
    font-size: 16px;
    line-height: 19px;
}

.articles-headline-text .col-3-block .under-text{
    display: flex;
    flex-direction: row;
}

.articles-headline-text .col-3-block .under-text .rows{
    display: flex;
    flex-direction: row;
}

.articles-headline-text .col-3-block .under-text .rows img{
    width: 16px;
    margin-right: 10px;
}

.articles-headline-text .col-3-block .under-text .rows .row-text{
    font-size: 16px;
    line-height: 21px;
    display: flex;
    gap: 4px;
}

.articles-headline-text .col-3-block .under-text .row-1{
    margin-right: 202px;
}

.articles-headline-text .col-3-block .under-text .row-2{
    margin-right: 40px;
}

.articles-headline-text .col-content-headline{
    margin-top: 42px;
    margin-bottom: 20px;
}

.articles-headline-text .cols-content{
    margin-top: 20px;
}

.articles-headline-text .col-content-text a{
    text-decoration: none;
    color: #916BEF;
}

.articles-headline-text .col-content-text{
    display: flex;
    flex-direction: column;
}

/* --------------------------------- */

.articles-text-1{
    display: flex;
    flex-direction: column;
    width: 1400px;
    margin-top: 40px;
}

.articles-text-1 .foreword{
    display: flex;
    flex-direction: column;
    width: 960px;
}

.articles-text-1 .foreword .cols-foreword{
    margin-bottom: 20px;
}

.articles-text-1 .questions{
    margin-top: 40px;
    width: 960px;
}

.articles-text-1 .question-cols{
    margin-top: 20px;
}

.articles-text-1 .share-article{
    display: flex;
    flex-direction: row;
    margin-top: 80px;
}

.articles-text-1 .share-article .share-text{
    font-size: 16px;
    line-height: 21px;
    margin-top: 10px;
    margin-right: 20px;
}

.articles-text-1 .share-article .share-soc-net{
    display: grid;
    grid-template-rows: 60px 60px;
    grid-template-columns: 60px 60px 60px 60px 60px 60px;
}

.articles-text-1 .share-article .share-soc-net img{
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: #333333;
    padding: 8px;
    cursor: pointer;
}

#share-share:hover{
    transition: 0.3s;
    background: #916BEF;
}

html.touch #share-share {
  display: none;
}

#share-Instagram:hover{
    transition: 0.3s;
    background: linear-gradient(43.94deg, #EEA054 16.16%, #D64763 50.11%, #B62A99 83.68%);
}

#share-Dribbble:hover{
    transition: 0.3s;
    background: #EA4C89;
}

#share-YouTube:hover{
    transition: 0.3s;
    background: #F40000;
}

#share-VK:hover{
    transition: 0.3s;
    background: #0077FF;
}

#share-Behance:hover{
    transition: 0.3s;
    background: #1C66FB;
}

#share-Telegram:hover{
    transition: 0.3s;
    background: linear-gradient(180deg, #2AABEE 0%, #229ED9 99.26%), #419FD9;
}

#share-WhatsApp:hover{
    transition: 0.3s;
    background: #0DC143;
}

#share-Skype:hover{
    transition: 0.3s;
    background: #00AFF0;
}

#share-Viber:hover{
    transition: 0.3s;
    background: #7C509A;
}

#share-Facebook:hover{
    transition: 0.3s;
    background: #4E6297;
}

#comments-odnoklassniki:hover{
    transition: 0.3s;
    background: #F7931E;
}

#comments-Facebook:hover{
    transition: 0.3s;
    background: #4E6297;
}

#comments-VK:hover{
    transition: 0.3s;
    background: #0077FF;
}

#comments-Twitter:hover{
    transition: 0.3s;
    background: #1DA1F2;
}
/* ----------------------------- */

.articles-page .comments-block{
    display: flex;
    flex-direction: column;
    width: max-content;
    margin-top: 219px;
}

.articles-page .comments-block .text-space-comments{
    background: #FFFFFF;
    box-shadow: 0px 4px 30px rgba(0, 0, 0, 0.08);
    border-radius: 30px;
    width: 1360px;
    padding: 40px;
    margin-top: 40px;
    margin-bottom: 75px;
}

.articles-page .comments-block .text-space-comments textarea{
	outline: none;
    resize: none;
    background: #F6F6F6;
    border-radius: 20px;
    border: 0px;
    padding: 30px;
    width: -webkit-fill-available;
    font-size: 18px;
    line-height: 22px;
    height: 192px;
}

.articles-page .comments-block .text-space-comments textarea::placeholder{
    font-size: 18px;
    line-height: 22px;
}

.articles-page .comments-block .col-2-comments{
    display: flex;
    flex-direction: row;
    align-items: center;
    margin-top: 13px;
}

.articles-page .comments-block .col-2-comments-soc-net{
    display: flex;
    flex-direction: row;
}

.articles-page .comments-block .col-2-comments-text{
    margin-right: 20px;
    height: max-content;
    font-size: 16px;
    line-height: 21px;
}

.articles-page .comments-block .col-2-comments-soc-net img{
    margin-right: 20px;
    width: 40px;
    height: 40px;
    padding: 8px;
    background: #333333;
    border-radius: 12px;
    cursor: pointer;
}

.articles-page .comments-block .col-3-comments{
    background: #916BEF;
    border-radius: 15px;
    color: #FFFFFF;
    padding: 19px 40px;
    width: max-content;
    margin-top: 20px;
    transition: 0.3s;
    cursor: pointer;
}

.articles-page .comments-block .col-3-comments:hover{
    background: #A88AF2;
    transition: 0.3s;
}

.articles-page .comments-block .all-comments{
    display: flex;
    flex-direction: column;
}

.comment{
    display: flex;
    flex-direction: row;
    margin-bottom: 40px;
}

.comment .user-avatar{
    width: 90px;
    display: flex;
    flex-direction: column-reverse;
    margin-right: 20px;
}

.comment .user-comment-text{
    display: flex;
    flex-direction: column;
    width: 1250px;
    background: #F6F6F6;
    border-radius: 30px 30px 30px 0px;
    padding: 40px 26px 20px 40px;
}

.comment .user-comment-text .up-col-comment{
    width: 1097px;
    margin-bottom: 15px;
}

.comment .user-comment-text .down-col-comment{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    font-size: 16px;
    line-height: 19px;
}

/* ------------------------ */

.articles-page .request-block{
    margin-top: 178px;
}

.articles-page .articles-block{
    margin-top: 200px;
    margin-bottom: 200px;
    max-width: 1366px;
}

/* ---------------------------------- */

@media(max-width: 1919px){
    .articles-headline{
        width: calc(1008px + (1400 - 1008) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(113px + (159 - 113) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-1 img{
        width: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .articles-headline-text h1{
        width: calc(580px + (815 - 580) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(41px + (60 - 41) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(30px + (38 - 30) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-3-block{
        width: calc(683px + (960 - 683) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(292px + (411 - 292) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-3-block .hashtag{
        padding: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(17px + (25 - 17) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (19 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .articles-headline-text .col-3-block .under-text .rows img{
        width: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-right: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-3-block .under-text .rows .row-text{
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(15px + (19 - 15) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-3-block .under-text .row-1{
        margin-right: calc(143px + (202 - 143) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-3-block .under-text .row-2{
        margin-right: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .col-content-headline{
        margin-top: calc(28px + (42 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-headline-text .cols-content{
        margin-top: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* --------------------------------- */
    
    .articles-text-1{
        width: calc(1008px + (1400 - 1008) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(54px + (79 - 54) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .foreword{
        width: calc(683px + (960 - 683) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .foreword .cols-foreword{
        margin-bottom: calc(12px + (20 - 12) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .questions{
        margin-top: calc(20px + (40 - 20) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(683px + (960 - 683) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .question-cols{
        margin-top: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .share-article{
        margin-top: calc(54px + (80 - 54) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .share-article .share-text{
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(15px + (21 - 15) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(7px + (10 - 7) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-right: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-text-1 .share-article .share-soc-net{
        grid-template-rows: calc(41px + (60 - 41) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(41px + (60 - 41) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        grid-template-columns: calc(43px + (60 - 43) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(43px + (60 - 43) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(43px + (60 - 43) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(43px + (60 - 43) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(43px + (60 - 43) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(43px + (60 - 43) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .articles-text-1 .share-article .share-soc-net img{
        width: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(9px + (12 - 9) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(6px + (8 - 6) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ----------------------------- */
    
    .articles-page .comments-block{
        margin-top: calc(158px + (219 - 158) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .comments-block .text-space-comments{
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(968px + (1360 - 968) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(55px + (75 - 5) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .comments-block .text-space-comments textarea{
        border-radius: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        font-size: calc(13px + (18 - 13) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(15px + (22 - 15) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(137px + (192 - 137) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .comments-block .text-space-comments textarea::placeholder{
        font-size: calc(13px + (18 - 13) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(15px + (22 - 15) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .comments-block .col-2-comments{
        margin-top: calc(8px + (13 - 8) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .articles-page .comments-block .col-2-comments-text{
        margin-right: 20px;
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(15px + (21 - 15) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .comments-block .col-2-comments-soc-net img{
        margin-right: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        width: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        height: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(6px + (8 - 6) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(9px + (12 - 9) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .comments-block .col-3-comments{
        border-radius: calc(11px + (15 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        padding: calc(13px + (19 - 13) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-top: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .comment{
        margin-bottom: calc(32px + (40 - 32) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .comment .user-avatar{
        width: calc(64px + (90 - 64) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-right: calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .comment .user-comment-text{
        width: calc(890px + (1250 - 890) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        border-radius: calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(21px + (30 - 21) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        0px;
        padding: calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(19px + (26 - 19) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(14px + (20 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) )) 
        calc(28px + (40 - 28) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .comment .user-comment-text .up-col-comment{
        width: calc(778px + (1097 - 778) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(8px + (15 - 8) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }

    .comment .user-comment-text .down-col-comment{
        font-size: calc(11px + (16 - 11) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        line-height: calc(14px + (19 - 14) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    /* ------------------------ */
    
    .articles-page .request-block{
        margin-top: calc(122px + (178 - 122) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
    
    .articles-page .articles-block{
        margin-top: calc(154px + (200 - 154) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        margin-bottom: calc(125px + (200 - 125) * ( (100vw - 1366px) / ( 1920 - 1366) ));
        max-width: calc(967px + (1366 - 967) * ( (100vw - 1366px) / ( 1920 - 1366) ));
    }
}