HOME

Mini Shell 1.0
DIR:/home/htlwork.com/www/dev/pricelow/app/code/Magefan/Blog/view/frontend/web/css/
Current File : /home/htlwork.com/www/dev/pricelow/app/code/Magefan/Blog/view/frontend/web/css/blog-new.css
/* All Widget Templates ************************************************************************************************
***********************************************************************************************************************/
body.blog-page {
    --color-white: #ffffff;
    --color-green: #28a745;
    --color-yellow: #ffc107;
    --color-blue: #4db2ec;
    --color-black: #222222;
    --color-gray: #6c757d;
    --color-red: #dc3545;
    --border-color: #d5d6da;
}

.fav-color-green {color: #28a745;}
.fav-color-yellow {color: #ffc107;}
.fav-color-blue {color: #4db2ec;}
.fav-color-black {color: #222222;}
.fav-color-gray {color: #6c757d;}
.fav-color-red {color: #dc3545;}


/* Buttons */
.btn-white {background-color: #fff !important;color: #7d7d7d !important;border: 1px solid #bbb !important;}
.btn-white:hover {background-color: #4db2ec !important;color: #fff !important; border: 1px solid #4db2ec !important;}
.btn-black {background-color: #222 !important;color: #fff !important;border: 1px solid #222 !important;}
.btn-black:hover {background-color: #4db2ec !important;color: #fff !important;border: 1px solid #4db2ec !important;}
.btn-blue {background-color: #4db2ec !important;color: #fff !important;border: 1px solid #4db2ec !important;}
.btn-blue:hover {background-color: #222 !important;color: #fff !important;border: 1px solid #222 !important;}


/* Slider *************************************************************************************************************/
.post-slider .post-block .image-wrap {padding-bottom: 450px;}
/* END Slider *********************************************************************************************************/


.clearfix:after {content:"";display:table;clear:both;}

.post-holder {margin-bottom: 40px;border-radius: 0;}



/* Blog Post List *****************************************************************************************************/
.post-list {margin-top: 0;margin-bottom: 20px;list-style: none;padding-left: 0}
.post-list .post-item.post-holder {margin: 0 0 30px 0;padding: 0;display: block;}
.post-list .post-container {display: -ms-flexbox;display: flex;}

/* Post Image ************************************/
.post-list .post-image {-ms-flex: 0 0 30%;flex: 0 0 30%;width: 30%;order: 0;}
.post-list .post-image .image-container {position: relative;}
.post-list .post-image .image-wrap {display: block;line-height: 0;overflow: hidden;position: relative;padding-bottom: 70%;}
.post-list .post-image .image-wrap .bg-img {position: absolute;display: block;width: 100%;height: 100%;background-size: cover;background-position: center;}
.post-list .post-image .image-wrap img {width: 100%;height: auto;vertical-align: middle;}
/* Post Category */
.post-list .post-image .post-category {position: absolute;left: 0;bottom: 0;display: block;font-size: 0;line-height: 1;}
.post-list .post-image .post-category a {display: inline-block;margin: 0 5px 0 0;padding: 5px 10px;background: #000;color: #fff;font-size: 11px;line-height: 12px;font-weight: 500;text-decoration: none;text-transform: uppercase;
    /*-webkit-transition: all 0.3s;-ms-transition: all 0.3s;transition: all .3s ease;*/}
.post-list .post-image .post-category a:hover {background: #4db2ec;}

/* Post Info **************************************/
.post-list.modern .post-info {padding: 0 0 0 25px;flex: 0 0 70%;max-width: 70%;width: 70%;order: 1;box-sizing: border-box;}
/* Post Title */
.post-list .post-info .post-title-wrap h3 {margin: 0;}
.post-list .post-info .post-title-wrap h3 a {font-size: 20px;line-height: 25px;font-weight: 500;}
/* Post Data */
.post-list .post-info .post-data-wrap {font-size: 11px;font-family: sans-serif;}
.post-list .post-info .post-data-wrap .post-date {font-size: 11px; margin: 0;padding: 0;box-shadow: none;float: none;width: auto;}
.post-list .post-info .post-data-wrap a {font-weight: 600;}
/* Post Description */
.post-list .post-description {line-height: 21px;font-size: 13px;}
/* Post View */
.post-list .post-view {display: block;background: #000;color: #fff;font-size: 10px;font-weight: 600;text-align: center;line-height: 11px;position: relative;top: -5px;padding: 4px 6px;}
.post-list .post-view:after {position: absolute;left: 0;bottom: -3px;content: '';width: 0;height: 0;border-style: solid;border-width: 3px 3px 0 0;border-color: #000 transparent transparent;}
/*.post-list .post-view {display: block;background: #000;color: #fff;font-size: 10px;font-weight: 600;text-align: center;line-height: 11px;position: relative;top: -5px;padding: 4px 6px;}*/
/*.post-list .post-view:before {display: inline-block;content: "\f06e";width: 10px;height: 10px;text-align: center;margin-right: 3px;*/
/*    font: normal normal normal 14px/1 FontAwesome;font-size: inherit;text-rendering: auto;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;}*/
/* Read More */
/*  .post-list .post-read-more {display: none;}  */
.post-read-more a.post-read {display: inline-block;color: #fff;background-color: #4db2ec;font-size: 13px;font-weight: 500;line-height: 1;padding: 10px 15px;}
.post-read-more a.post-read:hover {color: #fff;background: #222222;}
/*@media (max-width: 1200px) {
    .blog-index-index .post-list /*.post-read-more *//* {display: none;}
}
*/
@media (max-width: 768px) {
    .post-list .post-item.post-holder {margin-bottom: 1.5rem;}
}
@media (max-width: 767px) {
    .post-list .post-image .post-category {display: none;}
    .post-list .post-info {padding: 0 0 0 15px;}
    .post-list.modern .post-description {display: none;}
    .post-read-more a.post-read {display: none;}
}
@media (max-width: 640px) {
    .post-list .post-info .post-title-wrap h3 a {font-size: 14px;font-weight: 600;line-height: 1.4;display: inline-block;
        /*max-height: 39px;overflow: hidden;*/}
}


/* Images Format *******************************************/
.post-image .image-wrap._16x9 {padding-bottom: 35% !important;}
.post-image .image-wrap._4x3 {padding-bottom: 67% !important;}
.post-image .image-wrap._3x2 {padding-bottom: 55% !important;}
.post-image .image-wrap._1x1 {padding-bottom: 100% !important;}
@media (max-width: 768px) {

}
/* Blog Post List *****************************************************************************************************/


/* Post View **********************************************************************************************************/
/* Page Title */
/*.blog-post-view .page-title-wrapper .page-title {font-size: 35px;line-height: 1.2;margin-bottom: 20px;}*/
/* Category */
.blog-post-view .post-category a {display: inline-block;margin: 0 5px 0 0;padding: 5px 10px;background: #000;color: #fff;font-size: 11px;line-height: 12px;font-weight: 500;text-decoration: none;text-transform: uppercase;}

/* Post Data */
.blog-post-view .post-data-wrap {font-size: 13px;font-family: sans-serif;margin-bottom: 30px;}
.blog-post-view .post-data-wrap a {font-weight: 600;}
.blog-post-view .post-data {color: #bbbbbb;}
/* Post View */
/* Post Comments */
.blog-post-view .post-comments {margin-right: 20px;}
/* Social */
.blog-post-view .post-sharing {margin-bottom: 20px;}
/* Image */
.blog-post-view .post-featured-image {font-size: 0;margin-bottom: 20px;}
/* Tags */
.blog-post-view .post-tag {margin-bottom: 20px;}
.blog-post-view .post-tag .post-tag-title {display: inline-block;padding: 7px 12px;border: 1px solid #222;background: #222;color: #fff;line-height: 1;margin: 0 10px 10px 0;text-transform: uppercase;font-size: 11px;}
.blog-post-view .post-tag .post-tags a {display: inline-block;border: 1px solid var(--border-color);color: #222;background: #fff;padding: 7px 12px;margin-right: 10px;line-height: 1;font-weight: 600;letter-spacing: 1px;font-size: 11px;text-transform: capitalize;}
.blog-post-view .post-tag .post-tags a.current,
.blog-post-view .post-tag .post-tags a:hover {text-decoration: none;opacity: .9;background: #333;color: #fff;}

/* Post Text */
.blog-post-view .post-description {margin-bottom: 30px;}
.blog-post-view .post-description p {font-size: 1.4rem;line-height: 1.7;}

/* Post Bottom *****************************************/
.post-view .post-bottom {margin-top:30px;}

/* Post Sharing Bottom */
.post-sharing-bottom {padding: 30px 0;margin-bottom: 30px;border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);}
.post-sharing-bottom .addthis_inline_share_toolbox {text-align: center;}

/* Post Gallery */
/*.blog-post-view .post-gallery {display: flex;flex-wrap: wrap;}*/
.blog-post-view .post-gallery {display: grid;grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));grid-gap: 1rem;margin-bottom: 20px;}
.blog-post-view .post-gallery .gallery-image-hld {display: inline-block;}
.blog-post-view .post-gallery .gallery-image-hld img {}

/* Post Navigation */
.blog-post-view .post-nextprev  {display: flex;padding: 20px 0;margin-bottom: 30px;border-top: 1px solid var(--border-color);border-bottom: 1px solid var(--border-color);}
.blog-post-view .post-nextprev .nextprev-link {display: block;font-size: 20px;color: #222222;font-weight: 600;}
.blog-post-view .post-nextprev .nextprev-link:hover {text-decoration: none;}
.blog-post-view .post-nextprev .nextprev-link span {display: block;color: #bbbbbb;font-size: 14px;font-weight: normal;}

/* Block Related */
.blog-post-view .post-bottom .block.related {margin-bottom: 0;}
.blog-post-view .post-bottom .block.related .block-title {margin: 0 0 25px;padding: 5px 0;border-bottom: 1px solid #222222;line-height: 1.42857143;}
.blog-post-view .post-bottom .block.related .block-title strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;}

/* Related Posts */
.mfblog-replated-posts-block.block.related .post-list {display: -ms-flexbox;display: flex;-ms-flex-wrap: wrap;flex-wrap: wrap;
    position: relative;overflow: hidden;margin-left: -10px;margin-right: -10px;}
.mfblog-replated-posts-block.block.related .post-list .post-item {-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;margin-bottom: 2rem !important;-ms-flex: 0 0 25%;flex: 0 0 25%;max-width: 25%;padding-left: 10px;padding-right: 10px;width: 25%; box-sizing: border-box;}

.mfblog-replated-posts-block.block.related .post-list .post-item .image-container {
    -ms-flex: 0 0;flex: 0 0;width: 100%;display: block;order: 0;margin-bottom: 10px;}
.mfblog-replated-posts-block.block.related .post-list .image-container .image-wrap {display: block;line-height: 0;overflow: hidden;position: relative;padding-bottom: 70%;}
.mfblog-replated-posts-block.block.related .post-list .image-container .image-wrap .bg-img {position: absolute;display: block;width: 100%;height: 100%;background-size: cover;background-position: center;}
.mfblog-replated-posts-block.block.related .post-list .post-item .block-info {padding-left: 0 !important;padding-right: 0 !important;}
.mfblog-replated-posts-block.block.related .post-list .block-info h3.post-title a {font-size: 14px !important;line-height: 20px !important;font-weight: 600 !important;color: #222222;}
@media (max-width: 767px) {
    .mfblog-replated-posts-block.block.related .post-list .post-item {flex: 0 0 50%;max-width: 50%;}
}

/* Related Products */
.mfblog-replated-products-block.block.related .block-title {margin: 0 0 25px;padding: 5px 0;border-bottom: 1px solid #222222;line-height: 1.42857143;}
.mfblog-replated-products-block.block.related .block-title strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;}

/* Block Comments */
.block.comments .c-count {margin: 0 0 20px;padding: 0;border-bottom: 1px solid #222222;font-weight: 400;}
.block.comments .c-count strong {border-bottom: 3px solid #222222;padding-bottom: 2px;font-weight: 400;font-size: 18px;display: inline-block;}
/* END Post Bottom *************************************/

@media (max-width: 767px) {
    .blog-post-view .page-title-wrapper .page-title {font-size: 20px;}
    .blog-post-view .post-nextprev .nextprev-link {font-size: 14px;line-height: 1.4;}
}
/* END Post View ******************************************************************************************************/


/* Animation Zoom */
.image-wrap .animation-type-zoom {display: block;line-height: 0;overflow: hidden;position: relative;}
.image-container .animation-type-zoom {-webkit-transition: transform .3s ease,opacity .3s;transition: transform .3s ease,opacity .3s;}
.image-container:hover .animation-type-zoom {transform: scale3d(1.1,1.1,1);  -webkit-transform: scale3d(1.1,1.1,1);}


/* Sidebar ************************************************************************************************************/
/* Block Search */
.widget.blog-search {width:100%;margin-bottom: 40px;position: relative;float: right;}
.widget.blog-search .block-content {margin-bottom: 0;}
.widget.blog-search .block-content .form {position: relative;}
.widget.blog-search  label {border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;text-decoration: none;display: inline-block;float: right;}
.widget.blog-search .control {border-top: 0;margin: 0;padding: 0;clear: both;}
.widget.blog-search input {position: static;padding-right: 35px;margin: 0;left: -300%;border: 1px solid #bbbbbb;}
.widget.blog-search .action.search {position: absolute;top: 0;right: 0;bottom: 0;height: 100%;z-index: 1;display: inline-block;background: #222222;-moz-box-sizing: content-box;border: 0;box-shadow: none;line-height: inherit;margin: 0;padding: 0 10px;text-decoration: none;text-shadow: none;font-weight: 400;border-radius: 0;}
.widget.blog-search .action.search:before {-webkit-font-smoothing: antialiased;content: '';margin: 0;vertical-align: top;display: inline-block;overflow: hidden;speak: none;width: 16px;height: 32px;background: url(../images/search-icon-white.svg) no-repeat -10px -7px;background-size: 35px;opacity: 1;}
.widget.blog-search .action.search > span {border: 0;clip: rect(0, 0, 0, 0);height: 1px;margin: -1px;overflow: hidden;padding: 0;position: absolute;width: 1px;}
/*.blog-search .actions .action.search {background: #222222;right: 0;padding: 0 10px;border-radius: 0;}*/

/* Posts List */
.widget.block-list-posts .post-list .post-item .image-container {flex: 0 0 30%;width: 30%;display: block;order: 0;}
/* Images */
/* Span Background */
.widget.block-list-posts .post-list .image-container .image-wrap {display: block;line-height: 0;overflow: hidden;position: relative;padding-bottom: 70%;}
.widget.block-list-posts .post-list .image-container .image-wrap .bg-img {position: absolute;display: block;width: 100%;height: 100%;background-size: cover;background-position: center;}
/* Post Info */
.widget.block-list-posts .post-list .post-item .block-info .post-item-name {font-size: 14px;line-height: 20px;font-weight: 600;text-decoration: none;color: #333333;}
.widget.block-list-posts .post-list .post-item .block-info .block-date {color: #bbbbbb;}
.widget.block-list-posts .post-list .post-item .block-info .block-date .post-data {font-size: 11px;}

/* Post Grid */
.widget.block-list-posts .post-list .post-item {-webkit-flex-direction: column;-ms-flex-direction: column;flex-direction: column;margin-bottom: 2rem !important;}
.widget.block-list-posts .post-list .post-item .image-container {-ms-flex: 0 0;flex: 0 0;width: 100%;display: block;order: 0;margin-bottom: 10px;}
.widget.block-list-posts .post-list .post-item .block-info {padding-left: 0 !important;padding-right: 0 !important;}
/* END Posts List */

/* Archive */
.widget.block-archive .archive-item-link {font-weight: 600}

/* RSS Feed */
.widget.block-rss .rss-icon {width: 23px;filter: grayscale(100%);vertical-align: middle;}
/* End Sidebar ********************************************************************************************************/