#article-menu {
    padding: 20px 0 20px 0 !important;
}

.action-article-container {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    margin-bottom: 20px !important;
}

.article-card {
    display: inline-block !important;
    background: #f1f2f3 !important;
    border-radius: 5px !important;
    margin: 5px !important;
    width: 47% !important;
    baseline-source: first !important;
}

.action-article {
    position: relative !important;
    text-decoration: none !important;
    margin-bottom: 55px !important;
    background: #f2f2f2 !important;
    width: 100% !important;
    border-radius: 5px !important;
    display: inline-block !important;
    vertical-align: top !important;
    margin: 0 !important;
}

.action-article-l {
    aspect-ratio: 75 / 76 !important;
    display: flex !important;
    padding: 5px !important;
}

.article-card h2 {
    font-size: 14px;
    padding: 4px;
    color: #333;
    -webkit-line-clamp: 2;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
    margin-top: 0;
    margin-bottom: 0;
}

@media (min-width: 650px) {
    .article-card {
        width:32% !important;
    }

    .article-gallery-card {
        width: 33.3333% !important;
    }
}

@media (min-width: 1024px) {
    .article-card {
        width:24% !important;
    }

    .article-card h2 {
        font-size: 18px !important;
    }

    .article-gallery-card {
        width: 25% !important;
    }
}

@media (max-width: 320px) {
    .article-pagination span {
        padding:6px 12px !important;
    }

    .article-card {
        width: 46% !important;
    }
}

/* all articles in main page */

.article-pagination {
    display: flex;
    justify-content: center;
    margin-top: 10px
}

.article-pagination span {
    color: #000;
    float: left;
    padding: 8px 16px;
    text-decoration: none;
    border-radius: 3px
}

.article-pagination span.article_active_page {
    background-color: #FF6F30;
    color: #E1E2E2;
    border: 1px solid #FF6F30;
}

.article-pagination span:first-child {
    border-top-left-radius: 5px;
    border-bottom-left-radius: 5px
}

.article-pagination span:last-child {
    border-top-right-radius: 5px;
    border-bottom-right-radius: 5px
}

.article-page {
    display: none;
    flex-wrap: wrap;
    justify-content: center
}

#page_next {
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" height="16px" width="16px"><g xmlns="http://www.w3.org/2000/svg" transform="matrix(-1 0 0 -1 16 16)"><polyline fill="none" stroke="%232E4057" stroke-miterlimit="10" points="11,1 4,8 11,15 " /></g></svg>');
    background-repeat: no-repeat;
    background-position: center
}

#page_prev {
    overflow: hidden;
    background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="16px" height="16px" viewBox="0 0 16 16" enable-background="new 0 0 16 16" xml:space="preserve"><polyline fill="none" stroke="%232E4057" stroke-miterlimit="10" points="11,1 4,8 11,15 "/></svg>');
    background-repeat: no-repeat;
    background-position: center
}

#page_dot_last {
    background: #E1E2E2 !important;
    cursor: default
}

#page_dot_first {
    background: #E1E2E2 !important;
    cursor: default
}

.all-articles-header h1 {
    font-size: 18px;
    font-weight: 300;
    padding: 5px 3px
}

.all-articles-header {
    margin: 0;
    padding: 10px;
    border-bottom: none
}

.article_block.main_page {
    margin: 0 10px 15px !important;
}

.article-neigbour {
    display: flex;
    justify-content: center
}

.article-neigbour .action-article {
    display: flex !important;
    align-items: center;
    padding: 6px;
    border-radius: 6px !important;
    margin: 20px 0 !important;
    height: 110px;
    max-width: 600px
}

.article-neigbour .action-article .action-article-l {
    width: 30%;
    display: contents !important;
}

.article-neigbour .action-article .action-article-l img {
    border-radius: 6px
}

.article-neigbour .action-article h4 {
    color: #333;
    padding: 5px;
    margin-left: 7px;
    -webkit-line-clamp: 3;
    font-weight: 300;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.4
}

.article-info {
    display: flex;
    margin-bottom: 15px;
    align-items: center;
    margin-left: 20px
}

.article-author-info {
    display: flex;
    align-items: center;
    border-radius: 6px;
    padding: 5px;
    width: fit-content;
    margin-left: 10px;
    padding: 10px
}

.article-author-circle-image {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    width: 50px;
    height: 50px;
    margin-left: 10px
}

.article-author-circle-image img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.content-author {
    display: flex;
    border-radius: 6px;
    padding: 20px 10px;
    align-items: center;
    justify-content: center;
    flex-direction: column
}

.article-author-circle-image-large {
    display: inline-block;
    border-radius: 50%;
    overflow: hidden;
    height: 86px;
    width: 86px
}

.article-author-circle-image-large img {
    width: 100%;
    height: 100%;
    object-fit: cover
}

.article-author-info-page {
    display: flex;
    border-radius: 6px;
    padding: 5px;
    flex-direction: column;
    align-items: center
}

.author-name {
    display: flex;
    align-items: center;
    padding: 10px
}

.article-author-description {
    word-wrap: break-word;
    padding: 10px;
    font-size: 14px;
    text-align: justify;
    color: #333
}

.author-name h2 {
    color: #000;
    font-weight: 500;
    margin: 0;
    padding: 0;
    font-size: 20px
}

.art-to-top {
    display: block !important;
    width: 22% !important;
    background-position: unset !important;
    vertical-align: unset !important;
    margin: 20px 0 10px 10px !important;
}

.well center div, .well center {
    width: 100% !important;
}

.top-art-gallery
{
    padding: 0 19px;
}
#vp-carousel div.carousel-inner .item
{
  height: 100%;
  width: 100%;
  max-height: 90vh;
  aspect-ratio: 3 / 4;
}

#vp-carousel ol.carousel-indicators > li
{
    height: 12px;
    border-radius: 100%;
    flex: inherit;
}

#vp-carousel ol.carousel-indicators
{
    justify-content: center;
    gap: 5%;
}