/*filters*/
#blogs4-filter { padding: 2rem 0; }

.content-sidebar #blogs4-filter { padding: 2rem 0 0 0; }

#blogs4-search { border: 0; outline: none; width: 100%; margin: 0; padding: 0; line-height: 1; overflow: hidden; }

#blogs4-search fieldset { position: relative; display: block; padding: 0 110px 0 0; margin: 0; line-height: 1; border: none; border-radius: 0; overflow: hidden; background: none; }

#blogs4-search.icon-submit fieldset { padding-right: 40px; }

#blogs4-search-term { float: left; display: block; width: 100%; padding: 0 2.5%; border: 0; font-size: 1rem; font-weight: 800; line-height: 46px; height: 46px; outline: none !important; }

#blogs4-search-submit { display: block; position: absolute; right: 0; top: 0; width: 110px; height: 46px; line-height: 46px; font-size: 16px; vertical-align: middle; text-align: center; font-weight: 800; outline: none; border: 0; padding: 0; cursor: pointer; transition: .2s; }

#blogs4-search.icon-submit fieldset { padding-right: 50px; }

#blogs4-search.icon-submit fieldset #blogs4-search-term { background-color: transparent !important; padding-left: 5%; }

#blogs4-search.icon-submit fieldset #blogs4-search-submit { width: 50px; background-color: transparent !important; }

#blogs4-filter .top { display: flex; flex-wrap: wrap; justify-content: space-between; }

#blogs4-filter .top .blogs4-search { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; margin-bottom: 1rem; }

@media (min-width: 992px) { #blogs4-filter .top .blogs4-search { flex: 0 0 82%; max-width: 82%; margin-bottom: 0px; } }

#blogs4-filter .top .blogs4-toggle { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; text-align: center; max-width: 180px; margin: 0 auto; }

@media (min-width: 992px) { #blogs4-filter .top .blogs4-toggle { flex: 0 0 15%; max-width: 15%; text-align: right; max-width: none; margin: 0px; } }

#blogs4-filter .top .blogs4-toggle #blogs4-filter-toggle { position: relative; padding-top: 0px; padding-bottom: 0px; line-height: 46px; height: 46px; margin: 0px; }

#blogs4-filter .top .blogs4-toggle #blogs4-filter-toggle i { display: inline-block; vertical-align: -.1rem; font-weight: 400 !important; font-size: 1.125rem; min-width: 1.5rem; text-align: center; }

#blogs4-filter-form { display: none; }

.blogs4-detail-filter #blogs4-filter-form { display: block; }

#blogs4-filter .blogs4-filter-menu { margin: 0; padding: 0; list-style: none; }

#blogs4-filter .blogs4-filter-menu ul { margin: 0; padding: .65rem 0; list-style: none; }

#blogs4-filter .blogs4-filter-menu li { position: relative; width: 100%; margin: 0; padding: 0; line-height: 1; list-style: none; background: none; }

#blogs4-filter .blogs4-filter-menu li input { display: none; }

#blogs4-filter .blogs4-filter-menu li label { display: block; position: relative; padding: 12px 42px 12px 4px; cursor: pointer; overflow: hidden; font-size: 1.125rem; border: none; border-bottom-style: solid; border-bottom-width: 1px; }

#blogs4-filter .blogs4-filter-menu li label:before { font-family: "Font Awesome 5 Pro" !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; font-weight: 900; content: "\f00c"; position: absolute; width: 34px; text-align: center; right: 0px; top: 50%; transform: translateY(-50%); }

#blogs4-filter .filter-select { padding: 2rem 0 1rem 0; }

@media (min-width: 992px) { #blogs4-filter .filter-select { display: flex; justify-content: center; } }

.blogs4-detail-filter #blogs4-filter .filter-select { display: block; padding: 0px; }

#blogs4-filter .filter-select .blogs4-filter-menu { display: none; }

#blogs4-filter .filter-select .blogs4-filter-item { display: block; width: 100%; max-width: 100%; margin: .5rem auto; }

@media (min-width: 992px) { #blogs4-filter .filter-select .blogs4-filter-item { margin: 0 .5%; flex-basis: 23.5%; flex-grow: 1; max-width: 100%; } }

@media (min-width: 992px) { #blogs4-filter .filter-select .blogs4-filter-item:first-child { margin-left: 0px; } }

@media (min-width: 992px) { #blogs4-filter .filter-select .blogs4-filter-item:last-child { margin-right: 0px; } }

.blogs4-detail-filter #blogs4-filter .filter-select .blogs4-filter-item { margin: 0; width: 100%; margin-bottom: 1rem; }

#blogs4-filter .filter-select .blogs4-filter-item a { display: block; position: relative; height: auto; line-height: 1; margin: 0; padding: 0; outline: none !important; text-decoration: none; cursor: pointer; border-radius: 0; box-sizing: border-box; }

#blogs4-filter .filter-select .blogs4-filter-item a span { position: relative; display: block; line-height: 40px; padding: 0 38px 0 6px; font-size: 1.125rem; overflow: hidden; text-align: left; white-space: nowrap; text-overflow: ellipsis; vertical-align: bottom; }

#blogs4-filter .filter-select .blogs4-filter-item a i { display: block; position: absolute; right: .5rem; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); text-align: right; }

#blogs4-filter .filter-select .blogs4-filter-item a i:before { font-family: "Font Awesome 5 Pro" !important; -moz-osx-font-smoothing: grayscale; -webkit-font-smoothing: antialiased; display: inline-block; font-style: normal; font-variant: normal; text-rendering: auto; line-height: 1; content: "\f107"; display: inline-block; font-weight: 900; font-size: 22px; }

#blogs4-filter .filter-select .blogs4-filter-item a.on i:before { content: "\f106"; }

#blogs4-filter .filter-menu .blogs4-filter-menu { display: none; }

#blogs4-filter .filter-menu .blogs4-filter-menu ul { display: flex; flex-wrap: wrap; list-style: none; }

.blogs4-detail-filter #blogs4-filter .filter-menu .blogs4-filter-menu ul { display: block; }

#blogs4-filter .filter-menu .blogs4-filter-menu li { position: relative; width: 100%; margin: 0 0 0 1.5%; padding: 0; line-height: 1; flex: 0 0 23.875%; max-width: 23.875%; list-style: none; }

#blogs4-filter .filter-menu .blogs4-filter-menu li:nth-child(4n+1) { margin-left: 0px; }

.blogs4-detail-filter #blogs4-filter .filter-menu .blogs4-filter-menu li { width: 100%; margin: 0; max-width: none; }

#blogs4-filter .blogs4-filter-categories { padding: 1rem 0; }

#blogs4-filter .blogs4-filter-categories ul { list-style: none; margin: 0px; padding: 0px; }

@media (min-width: 992px) { #blogs4-filter .blogs4-filter-categories ul { text-align: center; } }

#blogs4-filter .blogs4-filter-categories ul li { margin-bottom: .5rem; list-style: none; }

@media (min-width: 992px) { #blogs4-filter .blogs4-filter-categories ul li { display: inline-block; margin: 0 1rem; } }

#blogs4-filter .blogs4-filter-categories ul li input { margin-right: .35rem; }

#blogs4-filter .input-buttons { padding: 1rem 0; text-align: center; }

.blogs4-detail-filter #blogs4-filter .input-buttons { padding: .5rem 0px 0px 0px; }

@media (max-width: 991.98px) { #blogs4-filter .input-buttons .btn { display: block; width: 100%; max-width: 260px; margin: 1rem auto; } }

.blogs4-detail-filter #blogs4-filter .input-buttons .btn { display: block !important; width: 100%; max-width: none; margin: 1rem auto; }

/*list view*/
#blogs4-results-list .results-title-wrap { padding: 3rem 0; }

#blogs4-results-list .results-title-wrap a.remove-filter { display: inline-block; margin-right: .5rem; }

#blogs4-results-list .results-title-wrap h6 { margin: 0; line-height: 1.05; font-size: 1rem; }

.blogs4-results-list article { display: flex; flex-wrap: wrap; align-items: flex-start; margin-bottom: 3rem; }

.blogs4-results-list article .post-left { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1rem; }

@media (min-width: 992px) { .blogs4-results-list article .post-left { flex: 0 0 100px; max-width: 100px; height: auto !important; align-items: flex-start; margin-right: 2rem; } }

.blogs4-results-list article .post-left .date { position: relative; width: 100px; flex: 0 0 100px; max-width: 100px; line-height: 1; padding: 1rem 0; text-align: center; margin-right: 1rem; display: block; }

@media (min-width: 992px) { .blogs4-results-list article .post-left .date { flex: 0 0 100%; max-width: 100%; margin: 0px 0px 1rem 0px; } }

.blogs4-results-list article .post-left .date span { display: block; }

.blogs4-results-list article .post-left .date span.day { font-size: 3.5rem; margin-bottom: .25rem; }

.blogs4-results-list article .post-left .date span.month { font-size: 1rem; }

.blogs4-results-list article .post-left .share-post { position: relative; width: 100%; flex-basis: 0; flex-grow: 1; max-width: 100%; }

@media (min-width: 992px) { .blogs4-results-list article .post-left .share-post { flex: 0 0 100%; max-width: 100%; text-align: center; } }

.blogs4-results-list article .post-left .share-post h6 { display: inline-block; margin: 0px; }

@media (min-width: 992px) { .blogs4-results-list article .post-left .share-post h6 { display: block; margin-bottom: 1rem; } }

.blogs4-results-list article .post-left .share-post ul { display: inline-block; margin: 0px; padding: 0px; list-style: none; }

@media (min-width: 992px) { .blogs4-results-list article .post-left .share-post ul { display: block; } }

.blogs4-results-list article .post-left .share-post ul li { display: inline-block; list-style: none; margin: 0px 0px 0px .5rem; }

@media (min-width: 992px) { .blogs4-results-list article .post-left .share-post ul li { display: block; margin: 0px 0px .5rem 0px; } }

.blogs4-results-list article .post-left .share-post ul li a { display: block; width: 36px; height: 36px; line-height: 36px; text-decoration: none; border-radius: 50%; text-align: center; }

@media (min-width: 992px) { .blogs4-results-list article .post-left .share-post ul li a { margin: 0 auto; } }

.blogs4-results-list article .post-right { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; }

@media (min-width: 992px) { .blogs4-results-list article .post-right { flex-basis: 0; flex-grow: 1; max-width: 100%; } }

.blogs4-results-list article .post-right .post-right-inner { padding: 1.5rem; }

.blogs4-results-list article .post-right .tags a { display: inline-block; text-decoration: none !important; margin-right: .75rem; padding: .35rem 1.5rem; font-size: 1rem; font-style: italic; font-weight: 400; border-radius: 0; transition: all 0.2s ease-in-out; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.12); }

.blogs4-results-list article .post-right .info .categories a { display: inline-block; margin-left: .5rem; }

.blogs4-results-list article .post-right .info .categories a:after { content: ","; }

.blogs4-results-list article .post-right .info .categories a:last-child:after { display: none; }

/*featured view*/
.blogs4-featured { margin: 0; padding: 4rem 2rem; }

.blogs4-featured article { position: relative; }

.blogs4-featured article .info .more, .blogs4-featured article .info .preview { display: none; }

.blogs4-featured article .info .categories a { display: inline-block; margin-left: .5rem; }

.blogs4-featured article .info .categories a:after { content: ","; }

.blogs4-featured article .info .categories a:last-child:after { display: none; }

.blogs4-featured.count-1 article { display: flex; flex-wrap: wrap; justify-content: space-between; }

.blogs4-featured.count-1 article .image { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; }

@media (min-width: 992px) { .blogs4-featured.count-1 article .image { flex-basis: 0; flex-grow: 1; max-width: 100%; margin: 0px 15px 0px 0px !important; } }

.blogs4-featured.count-1 article .info { position: relative; width: 100%; flex: 0 0 100%; max-width: 100%; }

@media (min-width: 992px) { .blogs4-featured.count-1 article .info { flex-basis: 0; flex-grow: 1; max-width: 100%; margin: 0px 0px 0px 15px !important; } }

.blogs4-featured.count-1 article .info h5 { /*inherit h2*/ font-size: 2rem; line-height: 1.05; }

@media (min-width: 992px) { .blogs4-featured.count-1 article .info h5 { font-size: 2.75rem; } }

.blogs4-featured.count-1 article .info .more, .blogs4-featured.count-1 article .info .preview { display: block; }

/*detail view*/
.blogs4-detail-info article { position: relative; padding: 1.5rem; }

.blogs4-detail-info article .image .date { float: left; width: 100px; line-height: 1; padding: 1rem 0; text-align: center; margin-right: 1rem; display: block; }

.blogs4-detail-info article .image .date span { display: block; }

.blogs4-detail-info article .image .date span.day { font-size: 4rem; margin-bottom: .25rem; }

.blogs4-detail-info article .image .date span.month { font-size: 1rem; }

.blogs4-detail-info article .image.hasImage .date { float: none; position: absolute; top: 0; left: 0; }

.blogs4-detail-info article .info .categories a { display: inline-block; margin-left: .5rem; }

.blogs4-detail-info article .share-post { overflow: hidden; }

.blogs4-detail-info article .share-post h6 { display: inline-block; margin: 0px; }

.blogs4-detail-info article .share-post ul { display: inline-block; margin: 0px; padding: 0px; list-style: none; }

.blogs4-detail-info article .share-post ul li { display: inline-block; list-style: none; margin: 0px 0px 0px .65rem; }

.blogs4-detail-info article .share-post ul li a { display: block; width: 36px; height: 36px; line-height: 36px; text-decoration: none; border-radius: 50%; text-align: center; }

@media (min-width: 992px) { .blogs4-detail-info article .share-post ul li a { margin: 0 auto; } }

.blogs4-detail-info .tags a { display: inline-block; text-decoration: none !important; margin-right: .75rem; padding: .35rem 1.5rem; font-size: 1rem; font-style: italic; font-weight: 400; border-radius: 0; transition: all 0.2s ease-in-out; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.12); margin: 0 .5rem; }

.blogs4-detail-author article { position: relative; padding: 3rem; }

.blogs4-detail-author article .image img { display: block; border-radius: 50%; margin: 0 auto; }

.blogs4-detail-comments .comment { margin: 2rem 0px; padding: 0; border-top: 0px !important; border-bottom-width: 1px; border-bottom-style: solid; }

.blogs4-detail-comments .comment .comment-name { margin-bottom: 1rem; }

.blogs4-detail-comments .comment .comment-name span { font-weight: 400; font-size: 1.125rem; margin-left: .5rem; }

.blogs4-detail-comments .comment .comment-name b, .blogs4-detail-comments .comment .comment-name strong { background: none !important; padding: 0px; }

.blogs4-detail-comments form { margin: 2rem auto; padding: 2rem; border: none; width: 100%; }

.blogs4-detail-comments form .commentName { border: 0; font-weight: 400; font-size: 1rem; text-transform: uppercase; margin-top: 2rem; }

.blogs4-detail-comments form .commentName input { display: inline-block; padding: .3rem 1rem; margin-bottom: .5rem; outline: none; box-shadow: none; width: 100%; vertical-align: baseline; font-size: .875rem; border: none; }

.blogs4-detail-comments form .commentText { border: 0; font-weight: 400; font-size: 1rem; text-transform: uppercase; margin-bottom: .5rem; }

.blogs4-detail-comments form textarea { display: inline-block; padding: .3rem 1rem; margin-bottom: .5rem; outline: none; box-shadow: none; width: 100%; vertical-align: baseline; font-size: .875rem; border: none; }

.blogs4-detail-latest .heading { text-align: center; margin: 0px; padding: .75rem .5rem; }

.blogs4-detail-latest .blogs4-detail-latest-inner { padding: 1rem; }

.blogs4-detail-latest article { padding-bottom: 1rem; border-bottom-style: solid; border-bottom-width: 3px; }

.blogs4-detail-latest article:last-of-type { border-bottom: 0px !important; }

.blogs4-detail-latest article h5 a { text-decoration: none; }

.blogs4-detail-tags .heading { text-align: center; margin: 0px; padding: .75rem .5rem; }

.blogs4-detail-tags .blogs4-detail-tags-inner { padding: 1rem; }

.blogs4-detail-tags #cloud a { display: inline-block; text-decoration: none !important; padding: .35rem 1.5rem; font-size: 1rem; font-style: italic; font-weight: 400; border-radius: 0; transition: all 0.2s ease-in-out; box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.12); margin: 0px .5rem .5rem 0px; }
