.page-node-type-article main {flex-direction: row;display: flex;flex-wrap: wrap;width: 100%;justify-content: space-between;max-width: 1300px;}
.page-node-type-article main .region--article-page {flex: 0 0 70%;border-left: 1px solid var(--color-border);padding-left: 2%;}
.page-node-type-article main .region--article-sidebar {flex: 0 0 30%;transition: all 0.2s;padding-right: 2%; padding-top: 20px;}
.page-node-type-article main .region--article-sidebar.active { height: 100vh; position: sticky; top: 0; padding-top: 25px;}
.page-node-type-article .region--breadcrumb { width: 100%;}
.page-node-type-article .region--content { display: none;}

.page-node-type-article .region--breadcrumb  {display: none;}
.page-node-type-article .region--breadcrumb .breadcrumbs .views-field ul {display:flex;align-items: center;}
.page-node-type-article .region--breadcrumb .breadcrumbs .views-field ul li:after {content:'/';font-size: 9px;padding: 0 10px;}
.page-node-type-article .region--breadcrumb .breadcrumbs .views-field ul li:last-child:after {content:'';}
.page-node-type-article .region--breadcrumb .breadcrumbs .views-field ul li a {font-size: var(--font11px);}

.page-node-type-article main .region--article-sidebar .block__title {font-size: var(--font17px);margin-bottom: 30px;border-bottom: 1px solid var(--color-border);padding-bottom: 20px;}


.article {width:100%; display:block; margin-bottom: 15px;}
.article .views-row {display:flex; flex-direction:column;}
.article .views-row .article-suptitle {margin-bottom:8px; font-size:14px;}
.article .views-row .article-image {width:100%;margin-bottom:20px;border-radius: var(--radius);overflow: hidden;}
.article .views-row .article-image img {width:100%; display:block;height:auto;}
.article .views-row .article-description {color: var(--colorlead);font-size: var(--font14px);padding: 25px 15px;margin-bottom: 20px;border: 1px solid var(--color-border);border-radius: var(--radius);line-height: 30px;}
.article .views-row .article-title {font-size: 30px;margin-bottom: 15px;line-height: 42px;color: var(--colorAccent);}
    
.article-unpublished {  background-color: #ffffe2; padding: 14px; border-radius: var(--radius);}

.article-body {width:100%;}
.article-body .field-content { display: flex; flex-direction: row; flex-wrap:nowrap;}
.article-body .field-content .contentWrapper { padding-right: 20px;}
.article-body *  {line-height: 28px;}
.article-body p {margin-bottom: 8px;display: block;font-size: var(--font15px);}
.article-body img {height:auto;margin: 5px 0 10px 0;    box-shadow: #ccc 0 5px 16px; border-radius: var(--radius); overflow: hidden;}
.article-body img:not(.align-left) , .article-body img:not(.align-right) {width:100%;display:block;}
.article-body img.align-left , .article-body figure.align-left { width: 60%; margin-right: 14px;}
.article-body img.align-right , .article-body figure.align-right { width: 60%; margin-left: 14px;}
.article-body figure.align-right img , .article-body figure.align-left img {margin-left: 14px;}
.article-body blockquote {margin:15px 0;padding-right: 30px;position: relative;}
.article-body blockquote:before {content:'"';position:absolute;right: 5px;font-size: 40px;font-style: italic;top: 5px;display: block;}
.article-body blockquote p:first-child {font-size:19px;text-align:right;font-weight:bold;line-height: 32px;}
.article-body blockquote p:last-child {padding-right: 30px;font-size: var(--font14px);position: relative;/* font-weight:bold; */}
.article-body blockquote p:last-child:before { content: ''; width: 20px; height: 1px; background-color: var(--colorlead); position: absolute; right: 0; top: 50%;  }
.article-body figure {position: relative;}
.article-body a { background-color: var(--colorAccentBG); color: var(--colorAccent); padding: 3px 10px; display: inline-block; border-radius: var(--radius);}
.article-body figure img {padding-right: 34px;border-right: 1px solid #eee;}
.article-body figure figcaption {position: absolute; right: 0.5%; top: 0; bottom: 0; z-index: 99; writing-mode: vertical-rl; font-size: var(--font15px); text-align: center;}
.article-body h2, .article-body h2 a, .article-body h2 span, .article-body h2 strong { line-height: 30px; font-size: 22px; margin: 5px 0 15px 0; text-align: right; width: 100%; display: inline-block;}
.article-body ul , .article-body ol{margin: 16px 0;padding: 0 15px}
.article-body ul li {font-size: var(--font14px); position: relative; padding-right: 25px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
.article-body ul li strong {white-space: nowrap;}
.article-body ol {counter-reset: section; }
.article-body ol li {font-size: var(--font14px); position: relative; padding-right: 25px; margin-bottom: 15px; padding-bottom: 15px; border-bottom: 1px solid #ddd;}
.article-body ul li:before { font-weight: bold; vertical-align: middle; margin-left: 10px; content: ''; width: 8px; height: 8px; display: block; background-size: cover; background-repeat: no-repeat; position: absolute; right: 0; top: 7px; background-color: #005d98; border-radius: var(--radius);}
.article-body ol li:before { counter-increment: section; content: counter(section); margin-left: 10px;  text-align: center; text-indent: 0; width: 15px; height: 15px; background-color: var(--colorAccentBG); padding: 3px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius); position: absolute; right: 0; top: 7px;}
.article-body .shareIcons {display:flex;flex-direction: column;flex-wrap: nowrap;align-items: center; justify-content: center; height: 100vh; position: sticky; top: 0;}
.article-body .shareIcons div {width: 28px;height: 28px;margin-bottom: 10px;}
.article-body .shareIcons div a {width:100%;display: block;padding: 4px; border: 1px solid var(--color-border); border-radius: var(--radius);}
.article-body .shareIcons div a:hover { border-color: #1d1d1d99;}
.article-body .shareIcons div a svg {display:block;width: 100%;height: 18px;}

.article-info {width:100%;margin-bottom: 15px;}
.article-info .info-wrapper {display:flex;flex-direction:row;align-items: center; flex-wrap: wrap;}
.article-info .info-wrapper .author-image {margin-left:10px;border-radius: 100%;overflow: hidden;}
.article-info .info-wrapper .author-image img {width:100%; height:auto; display:block;}
.article-info .info-wrapper .author-name {}
.article-info .info-wrapper .author-name a ,
.article-info .info-wrapper .author-name span ,
.article-info .info-wrapper .article-date span ,
.article-info .info-wrapper .article-comment-count span ,
.article-info .info-wrapper .article-duration span {font-size: var(--font12px);color: #000;}
.article-info .info-wrapper > span {margin: 0 8px; position: relative; top: -3px; color: #848484; font-size: 24px;}

.article-tags { width:100%; margin-top: 10px; }
.article-tags .views-label {font-size:var(--font17px);font-weight:bold;margin: 10px 0 20px 0;width:100%;display: block;}
.article-tags ul {display: inline-block;flex-direction:row;flex-wrap: wrap;display: flex;}
.article-tags ul li {margin:0 0 10px 10px;}
.article-tags ul li a {background-color: #fff;color: var(--colorAccent);font-size: var(--font13px);padding: 8px 25px;display: inline-block;border-radius: var(--radius);border: 1px solid var(--color-border);}.article-tags ul li a:hover { border-color: #1d1d1d99;}


/* Latest Articles */
.latest-articles {width:100%; display:block;position: relative;}

.latest-articles .view-content {display:flex; flex-direction:column; }
.latest-articles .view-content .views-row { width:100%; position:relative; border-bottom: 1px solid var(--color-border);  margin-bottom: 20px;}
.latest-articles .view-content .views-row:last-child { border: 0;}
.latest-articles .view-content .views-row .image {margin-bottom: 15px;width: 100px;float: right;margin-left: 15px;box-shadow: rgb(0 0 0 / 12%) 0px 4px 12px;border-radius: var(--radius);overflow: hidden;}
.latest-articles .view-content .views-row .image img { width:100%; height:auto; display:block; }
.latest-articles .view-content .views-row .title {display: block;}
.latest-articles .view-content .views-row .title a {display:block;font-size: 13px;line-height: var(--lineHeight);}
.latest-articles .view-content .views-row .service {margin-bottom:9px; display: none;}
.latest-articles .view-content .views-row .service a {background-color: var(--colorAccentBG); color: var(--colorAccent);font-size: var(--font12px);padding: 5px 18px;display: inline-block;border-radius: var(--radius);}