﻿.clearfix:after { clear: both; content: " "; display: block; font-size: 0; height: 0; line-height: 0; visibility: hidden; width: 0; }
.blog-post-page { width: 100%; }
.pdb15 { padding-bottom: 15px; }
.mrg-lf-10 { margin-left: 10px; }
.img-center { margin-left: auto; margin-right: auto; }
.post-read-btn { margin-top: 20px; text-transform: uppercase; text-wrap: balance; }
.blog-right-sidebar { display: inline-block; width: 100%; }
.blog-right-sidebar-cell { position: relative; min-height: 100%; height: 100%; padding: 0 !important; }
.blog-widget { margin-bottom: 20px; display: block; padding: 15px; border: 1px solid var(--mag-element-border-muted-color); word-wrap: break-word; }
.blog-post-content { padding-top: 15px; padding-bottom: 20px; background-color: var(--mag-page-bg-100); border: 1px solid var(--mag-element-border-muted-color); text-align: left; margin-bottom: 20px; position: relative; }
.blog-post-content-detail { padding-top:0; box-shadow:none; border:0; background-color:transparent; }
.blog-layout-content { padding-right: 25px; }
.blog-contents { width: 100%; display: block; position: relative; }
.blog-layout-size { max-width: 1170px; margin-left: auto; margin-right: auto; }
.blog-widget-header-wrapper { border-bottom: 1px solid var(--mag-element-border-color); margin-bottom: 10px; }
.blog-widget-header-wrapper > .h4 { margin-top: 0; }
.content-with-author .fullName { text-transform: uppercase; }

.post-metadata { padding: 10px 0; font-size: 0.9em; color: var(--mag-base-400); }
.post-metadata .glyphicon { color: #aaa; }
.post-title {margin-top:0;}
.post-title, .post-excerpt, .post-subject { overflow-wrap: break-word; }
.blog-post-content .post-box { padding: 5px 15px; position: relative; }
.blog-contents .title > h2 { margin: 0; padding: 0; margin-bottom: 10px; }
.blog-contents .title > h2 .label-status { font-size: 0.7em; vertical-align: middle; margin-left: 10px; }

.magentrix-toolbar { margin-bottom: 20px; }

.blog-contents .post-body table { table-layout: fixed;}
.blog-contents .post-body table td { vertical-align: top;}
.blog-contents h1.title { font-size: 34px; }
.blog-contents .post-body h1 { font-size: 29px; }
.blog-contents .post-body h2 { font-size: 24px; }
.blog-contents .post-body h3 { font-size: 20px; }
.blog-contents .post-body h4 { font-size: 16px; }

.post-social-sharing { display: block; clear: both; margin-top: 15px; }
.post-social-sharing .social-link { margin-right: 5px; display: inline-block; height: 100%; }
.post-body { margin-top: 20px; overflow-wrap: break-word; }
.post-body p { line-height: 140%; letter-spacing: 0.5px; }
.blog-post-author img { float: left; }
.blog-post-author b.fullName { padding-top: 10px; }
.blog-nav-item { padding: 8px; background-color: #eee; }
.post-nav { margin-top: 20px; position: relative; }
.nav-item-pre { float: left; }
.nav-item-next { float: right; }
.blog-pager { border: 0; }
.new-comment-item { padding: 3px 0; }
.new-comment-item textarea { resize: vertical; }
.new-comment-name-desc { padding-top: 10px; color: #666; }

.reviewed { border: 1px solid red !important; }
.new-comment-reviewed { color: red; font-size:1em; font-style:italic; margin-bottom:20px; }
.new-comment-container { margin-top: 25px; }
.blog-breadcrumbs { font-size: 1.1em; margin-bottom: 15px; font-weight: 400; line-height: 1.1; text-transform: uppercase; }
.blog-breadcrumb { line-height: 34px; }
.blog-breadcrumbs .mag-icon-breadcrumb { font-size:1.1em; margin-left:5px; margin-right:5px; }
.blog-feed { margin-left: 5px; }

.authorName { text-align: left; padding-left: 60px; padding-top: 4px; }
.post-metadata-item:not(first) { margin-right: 5px; }

.blog-simple-content .post-metadata, .blog-simple-content .post-box { padding-bottom: 0; }

.blog-list li { position: relative; }
.blog-list li.map-mode { padding-left: 14px; }
.blog-list .blog-feed { position: absolute; top: 0; right: 10px; }
.blog-list .blog-list-item { display:flex;align-items:center;padding: 6px 20px 6px 6px; text-decoration: none; border-bottom: 1px solid var(--mag-element-border-color); }
.blog-list .blog-list-item .blog-cat-name { text-overflow: ellipsis; overflow: hidden; max-width: 85%; white-space: nowrap; display: inline-block; margin-right:5px;}
.blog-list li:last-child .blog-list-item { border: 0; }
.blog-list li .glyphicon-chevron-right { position: absolute; right: 0px; top: 28%; }

.two-column { position: relative; padding-left: 200px; min-height: 140px; }
.two-column .post-metadata { display: none; }
.two-column .post-metadata2 { text-align: left; padding-top: 4px; text-align: right; }
.two-column .blog-post-col1 { position: absolute; left: 5px; top: 18px; text-align: right; width: 150px; }
.blog-map-link { display: block; background-color: #a4bedd; background-image: url(/_assets/images/staticmap.png); background-repeat: no-repeat; 
                 border: 6px solid var(--mag-element-border-color); border-radius: var(--mag-border-radius); padding: 15px; margin-top: 10px; text-decoration: none; }
.blog-map-link-title { background-color: var(--mag-page-bg-color); padding: 3px; font-weight: bold; margin: 0 auto; text-decoration: none; }
.blog-tag { border: 1px solid var(--mag-primary-color); padding: 0.3em 0.9em; background-color: var(--mag-primary-color); color: var(--mag-primary-text-color); margin-right: 4px; margin-bottom: 4px; display: inline-block; border-radius: var(--mag-border-radius); background-color: var(--mag-primary-color); }
.blog-tag > a { color:var(--mag-primary-text-color);}
.blogcomment { border-top: 2px solid var(--mag-element-border-color); margin-top: 20px; margin-bottom: 20px; padding: 20px; background-color: var(--mag-page-bg-300); }

.masonry-layout .grid-item { margin-bottom: 20px; }
.masonry-layout .grid-item .post-metadata {padding:0;padding-top:10px;}
.masonry-layout .thumbnail { width: 267px; padding: 0; margin: 0; box-shadow: 0 0 5px 0 var(--mag-page-bg-300); }
.masonry-layout .thumbnail h2 { margin-bottom: 10px; }
.masonry-layout .thumbnail .tile-text { position: relative; }
.masonry-layout .thumbnail .tile-text .label-status { position: absolute; right: 5px; bottom: 10px; }
.masonry-layout .tile-text { padding: 15px; }
.masonry-layout .btm-pagination { position: absolute; bottom: 0px; left: 0; top: auto !important; }
.masonry-layout .mrg-lf-10 { margin-left: 0; }
.masonry-layout .post-timestamp {font-size:0.9em;}
.masonry-layout .img-link {display:block; height:205px; width:100%; background-size:cover; background-repeat:no-repeat; background-position:center center;}

.mag-follow-btn .following-text, .mag-follow-btn .unfollow-text { display: none; }
.mag-follow-btn.btn-primary * { color: white; }
.mag-follow-btn.btn-state-following .following-text { display: block; }
.mag-follow-btn.btn-state-following .follow-text { display: none; }
.mag-follow-btn.btn-state-following:hover .following-text { display: none; }
.mag-follow-btn.btn-state-following:not(.disabled):hover .unfollow-text { display: block; }

.label-tag { display: inline-block; margin-right: 6px; border: 1px solid var(--mag-element-border-color); border-radius: var(--mag-border-radius); 
              color: var(--mag-page-text-color); margin-bottom: 6px; padding: .5em .8em .5em; }
.label-tag .badge { font-size: inherit; }
.label-tag:hover { background-color: var(--mag-page-bg-300); }
.blog-post-comment-title { margin-bottom: 25px; }
.blog-post-comments-content .media { margin-top: 0; padding-right: 10px; }
.blog-post-comments-content .comment-date { display: block; margin-top: 5px; }
.new-comment-items { margin-bottom:10px;}

.ui-mobile .blog-post-content .fit-content { font-size: smaller; }
.ui-mobile .blog-layout { margin-top: 12px; }
.ui-mobile .siteBody { padding: 0; margin: 0; }
.ui-mobile p, ui-mobile img { margin: 5px 0; }
.ui-mobile .blog-breadcrumbs { margin-top: 15px; }

.blog-layout-noSidebar { width: 100%; max-width: 780px; }
.blog-layout-noSidebar.tile-layout { max-width: 100%; }
.blog-detail-layout-noSidebar { width: 100%; }

.attach-outsider img, .related-attach-left img { top: 4px !important; }
.blog-ribbon { width: 75px; height: 75px; overflow: hidden; position: absolute; top: -5px; right: -5px; z-index: 1; }
.blog-ribbon > span { position: absolute; display: block; font-size: 10px; width: 100px; line-height: 20px; background-color: rgba(52,152,219,0.8); box-shadow: 0 5px 10px rgba(0,0,0,.1); color: #fff; text-shadow: 0 1px 1px rgba(0,0,0,.2); text-align: center; right: -21px; top: 19px; transform: rotate(45deg); }
.blog-ribbon.state-draft > span { background-color:rgba(220,128,14,0.8); }
.blog-ribbon span::before { content:""; position:absolute; left: 0px; top: 100%; z-index: -1; border-left: 3px solid #3498db; border-right: 3px solid transparent; border-bottom: 3px solid transparent; border-top: 3px solid #3498db; }
.blog-ribbon span::after { content:""; position:absolute; right: 0px; top: 100%; z-index: -1; border-left: 3px solid transparent; border-right: 3px solid #3498db; border-bottom: 3px solid transparent; border-top: 3px solid #3498db; }
.blog-ribbon.state-draft span::before { border-top-color:rgba(220,128,14,0.8); border-left-color:rgba(220,128,14,0.8);}
.blog-ribbon.state-draft span::after {border-top-color:rgba(220,128,14,0.8); border-right-color:rgba(220,128,14,0.8); }

@media screen and (max-width: 1024px) {
    .two-column .blog-post-col1 { display: none; }
    .two-column .post-metadata { display: block; }
    .two-column { padding-left: 0; }
}

@media(min-width:991px) {
    .blog-simple-content .post-read-btn { margin: 0; }
    .blog-simple-content .post-metadata-btn-col { text-align: right; }
    .blog-simple-content .post-metadata-item { padding-top: 4px; display: inline-block; }
}

@media(max-width:767px) {
    .blog-layout-content { padding-right: 15px; }
}

@media only screen and (max-width: 560px) {
    .masonry-layout .btm-pagination { left: 18% !important; }
    .blog-right-sidebar { margin-top: 50px; }
    .masonry-layout .thumbnail { width:320px;}
}

@media (max-width:400px) {
    .post-metadata span, .post-nav a { font-size: smaller; }
    .blogcomment { padding: 10px; }
}
