#blog * {
    box-sizing: border-box;
    font-family: 'Exo 2';
}
#blog {
    width: 100%;
    position: relative;
    display: flex;
    flex-wrap: wrap;
}
#blog .item__blog img {
    border-radius: 10px;
}
#blog .contents__article p {
    line-height: 27px;
}
#blog .left__panel > div {
    width: 100%;
    max-width: 700px;
    background: #ffffff;
    padding: 30px;
    border-radius: 8px;
    margin-bottom: 18px;
}
.blog__bread__crumbs {
    margin: 0 0 18px;
    padding: 0;
    display: flex;
    line-height: unset!important;
    letter-spacing: unset!important;
    list-style: unset!important;
}
.blog__bread__crumbs li {
    margin: 0;
    display: flex;
    align-items: flex-end;
}
.blog__bread__crumbs a {
    text-decoration: none!important;
    margin: 0 6px;
}
.blog__bread__crumbs span {
    color: #908F8F;
    font-size: 14px;
    font-weight: 500;
}
.blog__bread__crumbs li:last-child a span {
    color: #000000;
}
#blog .right__panel {
    position: sticky;
    width: 100%;
    top: 18px;
    height: 100%;
    display: flex;
    flex-direction: column;
    max-width: 280px;
    margin-left: 18px;
}

#blog .contents__article {
    margin-bottom: 32px;
    width: 100%;
    height: fit-content;
    background: #ffffff;
    border-radius: 8px;
    padding: 20px 20px 24px 20px;
    flex-direction: column;
}

#blog .contents__article h3 {
    color: #2E3C54;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    margin: 0 0 24px 0;
}
#blog .contents__article a {
    text-decoration: none;
    display: block;
    font-size: 14px;
    font-weight: 400;
}
#blog .contents__article a:not(:last-child) {
    margin-bottom: 20px;
}
#blog .subscribe__block {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 20px;
    height: 156px;
    border-radius: 8px;
    background: #BED600;
}
#blog .subscribe__block h3 {
    color: #2E3C54;
    font-size: 18px;
    margin: 0 0 14px;
}
#blog .subscribe__block input {
    padding-left: 14px;
    border: none;
    border-radius: 4px;
    height: 42px;
    margin-bottom: 6px;
}

/* текст статьм */
#blog .article__content ul {
    list-style: unset!important;
}
#blog .article__content ul li {
    padding: 0!important;
}
#blog .article__content p,
#blog .article__content ul,
#blog .article__content ol {
    color: #222;
    font-size: 16px;
    font-style: normal;
    font-weight: 400;
    line-height: 25px;
    letter-spacing: 0.2px;
}
#blog .article__content a {
    color: #1AAFD0;
}
#blog .article__content h1,
#blog .article__content h2,
#blog .article__content h3 {
    color: #2E3C54;
    font-size: 22px;
    font-weight: 600;
    line-height: 28px
}
#blog .article__content input[type="button"] {
    display: flex;
    padding: 13px 32px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #BED600;
    color: #2E3C54;
    font-size: 14px;
    font-weight: 500;
    border: none;
}
#blog .subscribe__block button {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #ffffff;
    font-weight: 500;
    font-size: 14px;
    border-radius: 4px;
    background: #2E3C54;
    height: 42px;
    border: none;
    cursor: pointer;
}
#blog .subscribe__block button:hover {
    background: #333333;
}
#blog .buttons__article {
    display: flex;
    align-items: center;
    padding: 24px 0;
    color: #AFAFAF;
    font-size: 14px;
    font-weight: 500;
}
#blog .buttons__article > div {
    display: flex;
    align-items: center;
    margin-right: 20px;
    cursor: pointer;
}
#blog .buttons__article img {
    margin-right: 4px;
}
#blog .title__article {
    margin: 14px 0 0;
    color: #2E3C54;
    font-size: 26px;
    font-weight: 600;
    line-height: 28px;
}
#blog .author__article {
    color: #222222;
    display: flex;
    margin-top: 22px;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid #E5E6E8;
}
#blog .author__article span {
    color: #AFAFAF;
}
#blog .header__article,
#blog .header__article a {
    display: flex;
    align-items: center;
    color: #908F8F;
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
}

#blog .btn__social__share {
    position: absolute;
    background: #FFFFFF;
    flex-direction: column;
    border: 1px solid #DCDCDC;
    border-radius: 4px;
    padding: 5px 10px;
    top: 21px;
    display: none;
}

#blog .btn__social__share > a {
    text-decoration: none;
    padding: 5px 0;
}

#blog .btn__social__share > a:hover {
    color: #908F8F;
}

#blog .header__article div:not(:last-child) {
    margin-right: 12px;
}
#blog .header__article img {
    margin-right: 6px;
}
#blog .left__panel .contents__article {
    padding: 0;
    margin-top: 24px;
}
#blog .left__panel .contents__article a:not(:last-child) {
    margin-bottom: 14px;
}
#blog .left__panel .contents__article a {
    color: #1AAFD0;
}
#blog .left__panel .contents__article h3 {
    margin-bottom: 16px;
    font-size: 22px;
    font-weight: 600;
}
#blog .footer__article {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 41px;
}
#blog .footer__article .buttons__article {
    padding: 0;
}
#blog .tags__block {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    font-size: 14px;
    font-weight: 500;
}

#blog .tags__block a:first-child {
    margin-left: 10px;
}
#blog .tags__block > a {
    text-decoration: none;
    color: #908F8F;
    margin: 2px;
    padding: 6px;
    border-radius: 3px;
    background: #F8F8F8;
}
#blog .tags__block > a:hover {
    color: #2E3C54;
}
#blog .main__photo__article {
    width: 100%;
    height: 428px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 10px;
}

#blog .avatar__author {
    margin-right: 11px;
    width: 44px;
    height: 44px;
    min-width: 44px;
    border-radius: 10px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}
#blog .popular__articles {
    margin-top: 34px;
    display: flex;
    flex-direction: column;
}
#blog .popular__articles h3 {
    margin: 0 0 22px;
    color: #2E3C54;
    font-size: 22px;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}
#blog .popular__articles h3 + div {
    border-top: 1px solid #E5E6E8;
}
#blog .popular__articles > div {
    display: flex;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #E5E6E8;
    color: #222222;
    font-size: 14px;
    font-weight: 500;
    line-height: 18px;
}
#blog .img__popular__article {
    height: 50px;
    width: 50px;
    min-width: 50px;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 8px;
}
#blog .article__list {
    display: flex;
    flex-direction: column;
}
#blog .article__list :not(:first-child) {
    margin-top: 20px;
}
#blog .comment__block {
    margin-top: 18px;
}

#blog .comment__block h3 {
    color: #2E3C54;
    font-size: 26px;
    font-weight: 600;
    margin: 0 0 24px;
}
#blog .block__send__comment {
    display: flex;
    align-items: flex-end;
    width: 100%;
    padding: 14px;
    border-radius: 4px;
    border: 1px solid #E5E6E8;
}
#blog .block__send__comment button {
    display: flex;
    height: 42px;
    padding: 0 25px;
    justify-content: center;
    align-items: center;
    border-radius: 4px;
    background: #BED600;
    border: none;
    color: #2E3C54;
    font-size: 16px;
    font-weight: 500;
}
#blog textarea {
    height: 100%;
    width: 100%;
    border: none;
    outline: none;
}
#blog .comments__block {
    margin-top: 15px;
}
#blog .comment {
    display: flex;
    flex-direction: column;
    margin-bottom: 24px;
}

#blog .comment.reply {
    padding-left: 10px;
    margin-left: 10px;
    border-left: 1px solid #BED600;
}

#blog .hide {
    display: none;
}

#blog .header__comment {
    color: #908F8F;
    font-size: 14px;
    font-weight: 500;
}
#blog .header__comment span {
    color: #2E3C54;
    margin-right: 8px;
    font-size: 16px;
    font-weight: 600;
}
#blog .action__buttons__comment {
    display: flex;
    color: #908F8F;
    font-size: 14px;
    font-weight: 500;
}
#blog .action__buttons__comment :not(:last-child) {
    margin-right: 20px;
}
#blog .action__buttons__comment > div {
    cursor: pointer;
}
#blog .text__comment {
    margin: 14px 0;
    color: #222;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.126px;
}
#blog .block__send__comment.reply {
    margin-left: 15px;
    margin-top: 10px;
    padding: 3px;
    width: calc(100% - 15px);
}
#blog .block__send__comment.reply button {
    height: 33px;
    padding: 0 15px;
}
#blog .block__send__comment.reply textarea {
    height: 33px;
}
#blog .show__more__comment {
    width: 100%;
    padding: 10px 0;
    text-align: center;
    color: #1AAFD0;
    font-size: 14px;
    font-weight: 400;
    line-height: 20px;
    letter-spacing: -0.126px;
    cursor: pointer;
}
#blog input[name="user_name"] {
    border: 1px solid #E5E6E8;
}

#blog .icon__blog {
    height: 20px;
    width: 20px;
    margin-right: 2px;
    background-repeat: no-repeat;
    background-size: inherit;
    background-position: center;
}
#blog .icon__blog.thumb_up {
    background-image: url("/img/blog/thumb_up.svg");
}
#blog .icon__blog.thumb_up:hover,
#blog .btn__like.active .icon__blog.thumb_up {
    background-image: url("/img/blog/thumb_up_active.svg");
}
#blog .icon__blog.save {
    background-image: url("/img/blog/save.svg");
}
#blog .btn__save:hover .icon__blog.save,
#blog .btn__save.active .icon__blog.save {
    background-image: url("/img/blog/save_active.svg");
}
#blog .icon__blog.share {
    background-image: url("/img/blog/share.svg");
}
#blog .btn__share {
    position: relative;
}
#blog .btn__share:hover .btn__social__share {
    display: flex;
}
#blog .btn__share:hover .icon__blog.share {
    background-image: url("/img/blog/share_active.svg");
}
#blog .icon__blog.view {
    background-image: url("/img/blog/eye_big.svg");
}
#blog .pagination a {
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 30px;
    width: 30px;
}

#blog .articles__static {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
#blog .item__static__article {
    width: 202px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

#blog .item__static__article a {
    text-decoration: none!important;
}
#blog .item__static__article .buttons__article {
    padding-top: 0;
}

#blog .image__static__article {
    width: 100%;
    height: 124px;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    border-radius: 4px;
    margin-bottom: 12px;
}
#blog .category__static__article {
    margin-bottom: 10px;
    color: #2E3C54;
    font-size: 16px;
    font-weight: 600;
    line-height: 28px
}
#blog .title__static__article {
    color: #222;
    font-size: 14px;
    margin-bottom: 16px;
}
#blog .item__static__article .buttons__article > div {
    margin-right: 13px;
}
@media screen and (max-width: 1024px) {
    #blog .title__article {
        text-align: left;
    }
    #blog .articles__static {
        justify-content: center;
    }
    #blog .left__panel > div {
        max-width: unset;
        padding: 10px;
    }
    #blog .right__panel {
        max-width: unset;
        margin: 0 10px;
        position: relative;
    }
    #blog .contents__article {
        line-height: 27px;
    }
    #blog .footer__article {
        display: flex;
        align-items: flex-start;
        margin-top: 41px;
        flex-direction: column;
    }
    #blog .subscribe__block button {
        padding: 0 10px;
    }
    #blog .subscribe__block h3 {
        margin: 0;
    }
    #blog .subscribe__block input {
        width: 100%;
        margin: 0 20px;
    }
    #blog .subscribe__block {
        padding: 10px;
        max-width: unset;
        flex-direction: unset;
        height: unset;
    }
    #blog .item__static__article {
        margin: 0 5px;
    }
    .blog__bread__crumbs {
        flex-direction: column;
        padding: 0 10px;
    }
    .blog__bread__crumbs span.slash {
        display: none;
    }
    .blog__bread__crumbs li {
        align-items: flex-start;
    }
    .blog__bread__crumbs li:before {
        content: ">";
    }
    .blog__bread__crumbs li:nth-child(2) {
        margin-left: 10px;
    }
    .blog__bread__crumbs li:nth-child(3) {
        margin-left: 20px;
    }
    .blog__bread__crumbs li:nth-child(4) {
        margin-left: 30px;
    }
    #blog .tags__block {
        margin-bottom: 20px;
    }
}
@media screen and (max-width: 768px) {
    #blog .footer__article {
        align-items: flex-start;
        flex-direction: column;
    }
    #blog .article__content img {
        max-width: 100%!important;
        height: unset!important;
    }
}
@media screen and (max-width: 500px) {
    #blog .subscribe__block {
        flex-direction: column;
    }
    #blog .item__static__article {
        width: 150px;
    }
    #blog .subscribe__block input {
        width: 100%;
        margin: 6px 0;
    }
}