AlkantarClanX12
Current Path : /home/thanudqk/www/wp-content/themes/thegem/css/ |
Current File : /home/thanudqk/www/wp-content/themes/thegem/css/thegem-blog.css |
.item-post-container { position: relative; } .reverse-link-color a, a.reverse-link-color { color: inherit; } .blog.blog-style-2x, .blog.blog-style-3x, .blog.blog-style-4x { margin: 0 -15px; } .blog.blog-style-masonry article { margin-bottom: 45px; } body .blog article a.youtube, body .blog article a.vimeo, body .blog article a.self_video { display: block; position: relative; } .blog.blog-style-default article a.youtube, .blog.blog-style-default article a.vimeo, .blog.blog-style-default article a.self_video { display: inline-block; max-width: 100%; } body .blog article a.youtube:before, body .blog article a.vimeo:before, body .blog article a.self_video:before { content: ''; display: block; position: absolute; left: 50%; top: 50%; width: 84px; height: 84px; margin: -42px 0 0 -42px; z-index: 2; opacity: 1; transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; } body .blog article a.youtube:after, body .blog article a.vimeo:after, body .blog article a.self_video:after { content: '\e707'; display: block; position: absolute; left: 0; right: 0; top: 50%; margin-top: -18px; font: 37px 'thegem-user-icons'; text-align: center; padding-left: 3px; z-index: 3; opacity: 1; transition: opacity 0.2s linear; -moz-transition: opacity 0.2s linear; -webkit-transition: opacity 0.2s linear; } body .blog article a.default { position: relative; display: block; overflow: hidden; } body .blog article a.default:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; opacity: 0; z-index: 5; } body .blog article a.default:hover:before { opacity: 1; } body .blog article a.default:after { content: '\e61f'; font-family: 'thegem-icons'; font-style: normal; font-weight: normal; font-style: normal; font-size: 48px; height: 48px; line-height: 48px; width: 48px; text-align: center; position: absolute; top: -24px; left: 50%; transition: all 0.2s ease; -moz-transition: all 0.2s ease; -webkit-transition: all 0.2s ease; margin-left: -24px; margin-top: -24px; z-index: 5; } body .blog article a.default:hover:after { top: 50%; } body .blog article a.default img { transition: all 0.2s linear; -moz-transition: all 0.2s linear; -webkit-transition: all 0.2s linear; } .blog.blog-style-masonry article .description { border-top-width: 0 !important; padding: 11px 17px 0px 18px; } .blog.blog-style-masonry article.item-transparent-background .description{ padding-left: 0; padding-right: 0; } .blog.blog-style-masonry article.no-image .description { border-top-width: 1px !important; } .blog.blog-style-masonry article .description .title, .blog.blog-style-masonry article .description .title a { text-transform: uppercase; text-decoration: none; } .blog.blog-style-masonry article .description .title a:hover { text-decoration: underline; } .blog.blog-style-masonry article .description .tags { margin-top: 4px; } .blog.blog-style-masonry article .description .tags, .blog.blog-style-masonry article .description .tags a { font-size: 89.5%; text-decoration: none; } .blog.blog-style-masonry article .description .tags .sep { margin: 0 7px 0 6px; } .blog.blog-style-masonry article .description .tags a:hover { text-decoration: underline; } .blog.blog-style-masonry article .description .summary, .blog.blog-style-masonry article .description .summary p { margin: 0; padding: 0; } .blog.blog-style-masonry article .description .summary { margin-top: 3px; } .blog.blog-style-masonry article .description .info { margin-top: 12px; } .blog.blog-style-masonry article .description .info .date { font-size: 89.5%; } .blog.blog-style-masonry article .description .info .sep { font-size: 89.5%; margin: 0 7px 0 4px; } .blog.blog-style-masonry article .description .info .more-link { float: right; } .blog.blog-style-masonry article:not(.sticky) .description .info .more-link.more-link-left { display: block; float: none; } .blog.blog-style-masonry article .description .info .more-link a { font-size: 89.5%; text-decoration: none; } .blog.blog-style-masonry article .description .info .more-link a:hover { text-decoration: underline; } .blog.blog-style-masonry article .description .info .more-link:before { content: '\e601'; font-family: 'thegem-icons'; font-style: normal; font-size: 14px; line-height: 28px; font-weight: normal; margin-right: 5px; } .blog.blog-style-masonry article .description .info .comments { font-size: 89.5%; } .blog.blog-style-masonry article .description .info .comments:before { content: '\e61e'; font-family: 'thegem-icons'; font-style: normal; font-size: 21px; line-height: 28px; font-weight: normal; vertical-align: middle; margin-right: 6px; } .blog.blog-style-masonry .no-image.sticky .description { padding-top: 70px; } .blog.blog-style-masonry .entry-title a { display: inline-block; } .blog-scroll-pagination { visibility: hidden; position: relative; } .blog-scroll-pagination.active { visibility: visible; height: 61px; } @media only screen and (max-width: 600px) { .blog.blog-style-masonry article { width: 100%; } } @media only screen and (min-width: 2500px) { .blog.blog-style-masonry.fullwidth-block article { width: 16.665%; } .blog.blog-style-masonry.fullwidth-block article.sticky { width: 33.33%; } } @media only screen and (min-width: 1680px) and (max-width: 2500px) { .blog.blog-style-masonry.fullwidth-block article { width: 19.53%; } .blog.blog-style-masonry.fullwidth-block article.sticky { width: 39.06%; } } @media only screen and (min-width: 992px) and (max-width: 1680px) { .blog.blog-style-masonry.fullwidth-block article { width: 25%; } .blog.blog-style-masonry.fullwidth-block article.sticky { width: 50%; } } .blog.blog-lazy-scroll article.item-lazy-scroll-not-inited { -webkit-transition-duration: 0s !important; -moz-transition-duration: 0s !important; -o-transition-duration: 0s !important; transition-duration: 0s !important; } .blog.blog-lazy-scroll:not(.blog-style-masonry) article.item-lazy-scroll, .blog.blog-style-masonry.blog-lazy-scroll article.item-lazy-scroll .item-lazy-scroll-wrap { visibility: hidden; } .blog.blog-lazy-scroll:not(.blog-style-2x):not(.blog-style-3x):not(.blog-style-4x):not(.blog-style-100) article.item-lazy-scroll-showed, .blog.blog-style-2x.blog-lazy-scroll article.item-lazy-scroll-showed .item-lazy-scroll-wrap, .blog.blog-style-3x.blog-lazy-scroll article.item-lazy-scroll-showed .item-lazy-scroll-wrap, .blog.blog-style-4x.blog-lazy-scroll article.item-lazy-scroll-showed .item-lazy-scroll-wrap, .blog.blog-style-100.blog-lazy-scroll article.item-lazy-scroll-showed .item-lazy-scroll-wrap { visibility: visible; -webkit-animation: fadeInBlogItem 1s ease; -moz-animation: fadeInBlogItem 1s ease; -o-animation: fadeInBlogItem 1s ease; animation: fadeInBlogItem 1s ease; -webkit-animation-fill-mode: both; -moz-animation-fill-mode: both; -o-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes fadeInBlogItem { 0% { -moz-transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); zoom: 1; -webkit-opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); opacity: 1; } } @-moz-keyframes fadeInBlogItem { 0% { -moz-transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); zoom: 1; -webkit-opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); opacity: 1; } } @-o-keyframes fadeInBlogItem { 0% { -moz-transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); zoom: 1; -webkit-opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); opacity: 1; } } @keyframes fadeInBlogItem { 0% { -moz-transform: translateY(40px); -ms-transform: translateY(40px); -webkit-transform: translateY(40px); -o-transform: translateY(40px); transform: translateY(40px); zoom: 1; -webkit-opacity: 0; -moz-opacity: 0; filter: alpha(opacity=0); opacity: 0; } 100% { -moz-transform: translateY(0px); -ms-transform: translateY(0px); -webkit-transform: translateY(0px); -o-transform: translateY(0px); transform: translateY(0px); zoom: 1; -webkit-opacity: 1; -moz-opacity: 1; filter: alpha(opacity=100); opacity: 1; } } /* COMPACT */ .blog-style-compact article { padding-left: 212px; position: relative; } .blog-style-compact article + article { margin-top: 40px; } .gem-compact-item-left { float: left; margin-left: -212px; width: 183px; } .gem-compact-item-image .gem-dummy { width: 183px; height: 148px; border-radius: 0; vertical-align: top; } .gem-compact-item-right { position: absolute; left: 212px; right: 0; top: 0; height: 100%; } .blog-style-compact article .gem-compact-item-content { position: absolute; top: 0; bottom: 25px; overflow: hidden; } .blog-style-compact article .gem-compact-item-content:after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 0; } .blog-style-compact article .post-title h5 { margin-top: -7px; } .blog-style-compact article .post-meta { position: absolute; bottom: 0; margin: 0; width: 100%; } .blog-style-compact article .post-meta .entry-meta { margin: 0; font-size: 13px; line-height: 20px } body .blog-style-compact article a.default:after, body .blog-style-compact-tiny-1 article a.default:after { content: '\e628'; border-radius: 50%; font-size: 16px; top: 150%; margin-top: -24px; margin-left: -24px; opacity: 0; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: top 0.4s, opacity 0.4s, -webkit-transform 0s 0.4s; transition: top 0.4s, opacity 0.4s, transform 0s 0.4s; } body .blog-style-compact article a.default:hover:after, body .blog-style-compact-tiny-1 article a.default:hover:after { opacity: 1; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: top 0s, opacity 0.4s, -webkit-transform 0.4s; transition: top 0s, opacity 0.4s, transform 0.4s; } @media (max-width: 599px) { .blog-style-compact article { padding-left: 0; } .gem-compact-item-left { float: none; margin-left: 0; width: auto; text-align: center; } .gem-compact-item-right { position: relative; left: auto; right: auto; top: auto; height: auto; } .blog-style-compact article .gem-compact-item-content { position: relative; top: auto; bottom: auto; overflow: hidden; margin-top: 30px; } .blog-style-compact article .gem-compact-item-content:after { display: none; } .blog-style-compact article .post-meta { position: relative; bottom: auto; margin: 0; width: auto; } } /* COMPACT-2 */ .blog.blog-style-compact-2 { padding-bottom: 0; margin-bottom: 0; } .blog-style-compact-2 article { margin-bottom: 23px; } .blog.blog-style-compact-2 .post-meta-likes { margin-right: 5px; } /* SLIDER */ .gem-blog-slider article { float: left; position: relative; width: 100%; } .gem-blog-slider .gem-slider-item-image { width: 100%; } .gem-blog-slider .gem-dummy { width: 100%; padding-bottom: 44.87%; border-radius: 0; vertical-align: top; } .gem-blog-slider.gem-blog-slider-style-halfwidth .gem-dummy { padding-bottom: 93.09%; } .gem-blog-slider .gem-slider-item-overlay { position: absolute; top: 0; left:0; height: 100%; width: 50%; background-color: #24273c; background-color: rgba(36, 39, 60, 0.8); padding: 90px 40px 0; } .gem-blog-slider .post-title h5 { margin-top: 0; margin-bottom: 20px; } .gem-blog-slider article .post-meta { margin-bottom: 0; font-size: 13px; line-height: 20px } .gem-blog-slider .gem-blog-slider-prev, .gem-blog-slider .gem-blog-slider-next { margin-left: 0; padding: 0; width: 30px; } @media (max-width: 1211px) { .gem-blog-slider .gem-slider-item-overlay { padding: 30px 30px 0; } } @media (max-width: 991px) { .gem-blog-slider .gem-slider-item-overlay { position: relative; top: auto; left:auto; height: auto; width: auto; padding: 40px 40px; } } @media (max-width: 991px) { .gem-blog-slider .gem-slider-item-overlay { position: relative; top: auto; left:auto; height: auto; width: auto; padding: 40px 40px; } } /* BLOG STYLE JUSTIFIED */ .blog-style-justified-2x, .blog-style-justified-3x, .blog-style-justified-4x{ margin-right: -15px; margin-left: -15px; } .blog-style-justified-2x.justified-style-1 article, .blog-style-justified-3x.justified-style-1 article, .blog-style-justified-4x.justified-style-1 article { vertical-align: top; } .blog-style-justified-2x article.no-image .description, .blog-style-justified-3x article.no-image .description, .blog-style-justified-4x article.no-image .description { margin-top: 50px; } .justified-style-1 .post-content-wrapper{ height: 100%; padding: 20px; padding-bottom: 70px; } .justified-style-2 .post-content-wrapper{ height: 100%; padding-bottom: 70px; } .blog-style-justified-4x.justified-style-1 .entry-title.title-h4 a, .blog-style-justified-4x.justified-style-2 .entry-title.title-h4 a { display: block; font-size: 19px; line-height: 30px; } .blog-style-justified-3x.justified-style-1 .sticky .entry-title.title-h4 a, .blog-style-justified-3x.justified-style-2 .sticky .entry-title.title-h4 a { font-size: 36px; line-height: 54px; } .blog-style-justified-2x.justified-style-1 .sticky .entry-title.title-h4 a, .blog-style-justified-2x.justified-style-2 .sticky .entry-title.title-h4 a { font-size: 36px; line-height: 54px; } .blog-style-justified-2x .post-meta-author, .blog-style-justified-3x .post-meta-author, .blog-style-justified-4x .post-meta-author { font-size: 14px; } .blog-style-justified-2x .post-meta-right, .blog-style-justified-3x .post-meta-right, .blog-style-justified-4x .post-meta-right { font-size: 16px; font-weight: normal; } .blog-style-justified-2x .comments-link, .blog-style-justified-3x .comments-link, .blog-style-justified-4x .comments-link { padding-right: 9px; margin-right: 0px; border-right: 1px solid #d4dee1; } .blog-style-justified-2x .post-meta-right > *, .blog-style-justified-3x .post-meta-right > *, .blog-style-justified-4x .post-meta-right > * { margin-left: 5px; } .blog-style-justified-2x a.gem-button, .blog-style-justified-3x a.gem-button, .blog-style-justified-4x a.gem-button { margin-bottom: 0px; } .justified-style-1 .post-content-wrapper > a{ margin-bottom: 10px; } .blog-style-justified-2x .gem-button-size-tiny, .blog-style-justified-3x .gem-button-size-tiny, .blog-style-justified-4x .gem-button-size-tiny { margin-right: 0; } .justified-style-1 article.sticky .sticky-label{ left: 70px; } .justified-style-2 article.sticky .sticky-label{ left: 50px; } .justified-style-1 article.sticky .sticky-label, .justified-style-2 article.sticky .sticky-label { font-family: "thegem-icons"; font-style: normal; font-size: 20px; font-weight: normal; height: 50px; line-height: 50px; position: absolute; text-align: center; top: 0; width: 50px; z-index: 10; } .justified-style-1 article.sticky .sticky-label:before, .justified-style-1 article.sticky .sticky-label:after, .justified-style-2 article.sticky .sticky-label:before, .justified-style-2 article.sticky .sticky-label:after { bottom: -10px; content: ""; height: 10px; left: 0; position: absolute; width: 100%; z-index: -1; } .justified-style-1 article.sticky .sticky-label:before, .justified-style-2 article.sticky .sticky-label:before { transform-origin: 0 100%; transform: skew(0deg, -20deg); } .justified-style-1 article.sticky .sticky-label:after, .justified-style-2 article.sticky .sticky-label:after { transform-origin: 100% 100%; transform: skew(0deg, 20deg); } .justified-style-1 .post-image{ margin-bottom: 10px; } .justified-style-2 .description{ padding: 15px 20px 0; } .justified-style-2 article.item-transparent-background .description{ padding-left: 0; padding-right: 0; } .justified-style-1 .description .info, .justified-style-2 .description .info { position: absolute; bottom: 20px; } @media (max-width: 1125px){ .blog-style-justified-4x .col-md-3 { width: 33.33333%; } .blog-style-justified-4x .sticky.col-md-6 { width: 66.66666%; } } @media (max-width: 850px){ .blog-style-justified-4x .col-sm-4 { width: 50%; } .blog-style-justified-4x .sticky.col-md-6 { width: 100%; } } @media (max-width: 600px){ .blog-style-justified-2x article, .blog-style-justified-3x article, .blog-style-justified-4x article { width: 100% !important; } } /* BLOG STYLE MULTI AUTHOR LIST */ .blog-style-multi-author article{ margin-bottom: 60px; position: relative; } .blog-style-multi-author .post-item{ position: relative; margin-left: 200px; padding: 20px; min-height: 325px; } .blog-style-multi-author article.sticky .sticky-label { font-family: "thegem-icons"; font-style: normal; font-size: 20px; font-weight: normal; height: 50px; left: 40px; line-height: 50px; position: absolute; text-align: center; top: 0; width: 50px; z-index: 10; } .blog-style-multi-author article.sticky .sticky-label:before, .blog-style-multi-author article.sticky .sticky-label:after { bottom: -10px; content: ""; height: 10px; left: 0; position: absolute; width: 100%; z-index: -1; } .blog-style-multi-author article.sticky .sticky-label:before { transform: skew(0deg, -20deg); transform-origin: 0 100% 0; } .blog-style-multi-author article.sticky .sticky-label:after { transform: skew(0deg, 20deg); transform-origin: 100% 100% 0; } .blog-style-multi-author .post-info-wrap{ position: absolute; left: -200px; top: 84px; z-index: 10; } .blog-style-multi-author .wrap-style{ position: absolute; width: 50px; height: 100px; left: -50px; top: 100px; stroke: none; } .blog-style-multi-author .post-item .post-featured-content{ margin-bottom: 5px; } .blog-style-multi-author article.sticky.no-image .post-meta{ margin-top: 50px; } .blog-style-multi-author .post-item .entry-meta{ position: relative; } .blog-style-multi-author .post-item .entry-meta .post-meta-left{ padding-right: 100px; } .blog-style-multi-author .post-item .entry-meta .post-meta-right{ position: absolute; top: 0; right: 0; } .blog-style-multi-author .post-misc { margin-top: 20px; } .blog-style-multi-author .post-misc a { margin-bottom: 0; } .blog-style-multi-author .sticky .sharing-popup { top: -40px; } .blog-style-multi-author .sharing-popup { top: -50px; } .blog-style-multi-author .post-date-wrap { background: #3c3950; width: 80px; height: 80px; border-radius: 50%; text-align: center; margin-left: 30px; margin-top: 24px; position: static; z-index: 10; } .blog-style-multi-author .post-time { color: #fff; font-family: "Montserrat"; font-size: 19px; font-weight: bold; line-height: 15px; padding-top: 25px; } .blog-style-multi-author .post-avatar { border: 2px solid #3c3950; padding: 4px; border-radius: 50%; background: #fff; } .blog-style-multi-author .post-avatar img { border-radius: 50%; } .blog-style-multi-author article:before { background: #3c3950; content: ""; display: block; position: absolute; left: 70px; top: 84px; bottom: -144px; width: 2px; z-index: 1; } .blog-style-multi-author article:last-child::before{ bottom: auto; height: 244px; } .blog-style-timeline article.custom-vertical-line:before { display: none; } .blog-style-multi-author article.custom-vertical-line .vertical-line { background: #3c3950; content: ""; display: block; position: absolute; left: 70px; top: 84px; bottom: -144px; width: 2px; z-index: 1; } .blog-style-multi-author article.custom-vertical-line:last-child .vertical-line{ bottom: auto; height: 244px; } .blog-style-default article { margin-bottom: 55px; padding-bottom: 55px; } .blog-style-default article .post-image, .blog-post-image { text-align: center; margin-bottom: 10px; } .blog-style-default article .post-image img { display: inline-block; } .blog-style-default article.sticky { margin-left: -15px; margin-right: -15px; margin-bottom: 115px; padding: 15px 15px 35px; position: relative; z-index: 2; } .blog-style-default article.sticky:after { content: ''; position: absolute; width: 75px; height: 75px; z-index: -1; bottom: -75px; left: 0; background: inherit; -webkit-transform-origin: 0 100%; -moz-transform-origin: 0 100%; -ms-transform-origin: 0 100%; -o-transform-origin: 0 100%; transform-origin: 0 100%; -webkit-transform: skew(0, -45deg); -ms-transform: skew(0, -45deg); -o-transform: skew(0, -45deg); transform: skew(0, -45deg); } .blog-style-default article.sticky.no-image { padding-top: 70px; } .blog-style-default article.sticky .sticky-label { position: absolute; top: 0; left: 50px; font-family: 'thegem-icons'; font-style: normal; font-weight: normal; font-size: 20px; width: 50px; height: 50px; line-height: 50px; text-align: center; z-index: 10; } .blog-style-default article.sticky .sticky-label:before, .blog-style-default article.sticky .sticky-label:after { content: ''; position: absolute; width: 100%; height: 10px; z-index: -1; bottom: -10px; left: 0; background: inherit; } .blog-style-default article.sticky .sticky-label:before { transform-origin: 0 100%; transform: skew(0, -20deg); } .blog-style-default article.sticky .sticky-label:after { transform-origin: 100% 100%; transform: skew(0, 20deg); } .blog-style-default article .entry-title a { color: inherit; } .blog-style-default .post-meta-right { margin-left: 100px; } .blog-style-default .item-background-wrapper { padding-right: 45px; padding-left: 45px; margin-bottom: -10px; } /* RESPONSIVE */ @media ( max-width: 767px ){ .blog-style-multi-author article { width: 100%; min-width: 300px; padding-top: 112px; } .blog-style-multi-author .post-item{ margin-left: 0; } .blog-style-multi-author .post-text-wrap { padding-left: 0; padding-right: 0; } .blog-style-multi-author article:before{ display: none; } .blog-style-multi-author .post-info-wrap{ width: 100%; left: 0; top: -138px; position: absolute; margin-top: 0; } .blog-style-multi-author article.no-image .post-meta{ margin-top: 0; } .blog-style-multi-author article.no-image .post-item .entry-meta .post-meta-right{ position: static; width: 100%; margin-top: 5px; } .blog-style-multi-author .post-info{ width: 100%; left: 0; position: relative; text-align: left; } .blog-style-multi-author .post-avatar{ position: absolute; right: 20px; } .blog-style-multi-author .post-avatar img{ width: 80px; height: 80px; } .blog-style-multi-author .wrap-style{ width: 50px; height: 100px; position:absolute; left: 50px; top: -150px; fill: #f0f3f2; color: #fff; stroke: none; transform: rotate(90deg); transform-origin: 0 100%; -webkit-transform: rotate(90deg); -webkit-transform-origin: 0 100%; } .blog-style-multi-author .post-date-wrap{ margin-left: 60px; margin-top: 20px; background: transparent; } .blog-style-multi-author .post-time{ color: #3c3950; } .blog-style-multi-author .post-date{ margin-top: 5px; } .blog-style-multi-author article.sticky .sticky-label{ left: 100%; margin-left: -92px; } .blog-style-default .item-background-wrapper { padding-right: 30px; padding-left: 30px; } } .blog-style-masonry .post-read-more .gem-button, .comment-reply-link { padding: 0px 15px; } .blog-style-masonry .zilla-likes-count { display: inline-block; font-size: 16px; vertical-align: top; } .blog-style-masonry .entry-title.title-h4 { margin-bottom: 21px; margin-top: 27px; } .blog-style-masonry .sticky .entry-title.title-h4 a{ font-size: 36px; line-height: 54px; } .blog-style-masonry.blog-style-4x .entry-title.title-h4 a { font-size: 19px; line-height: 30px; display: block; } .blog-style-masonry .post-meta-author { font-size: 85%; } .blog-style-masonry .post-meta-right > * { margin-left: 5px; } .blog-style-masonry .post-meta-right{ font-size: 16px; font-weight: normal; } .blog-style-masonry .comments-link { padding-right: 9px; margin-right: 0px; border-right: 1px solid #d4dee1; } .blog-style-masonry .gem-pagination { border-top: none !important; } .blog-style-masonry article.sticky .sticky-label { position: absolute; top: 0; left: 50px; font-family: 'thegem-icons'; font-style: normal; font-weight: normal; font-size: 20px; width: 50px; height: 50px; line-height: 50px; text-align: center; z-index: 10; } .blog-style-masonry article.sticky .sticky-label:before, .blog-style-masonry article.sticky .sticky-label:after { bottom: -10px; content: ""; height: 10px; left: 0; position: absolute; width: 100%; z-index: -1; } .blog-style-masonry article.sticky .sticky-label:before { transform: skew(0deg, -20deg); transform-origin: 0 100% 0; } .blog-style-masonry article.sticky .sticky-label:after { transform: skew(0deg, 20deg); transform-origin: 100% 100% 0; } .blog-style-masonry + .gem-pagination { border-top: medium none; margin-top: 0px; padding-top: 0px; text-align: center; } body .blog-style-masonry article.sticky .sharing-popup { bottom: 100px; left: -10px; } body .blog-style-masonry .sharing-popup.active { bottom: 70px; } body .blog-style-masonry .sharing-popup { bottom: 70px; } body .blog.blog-style-masonry article.no-image .description{ overflow: visible; } @media only screen and (max-width: 2500px) and (min-width: 1680px) { body .blog-style-masonry.fullwidth-block { padding-left: 21px; padding-right: 21px; } } @media (max-width: 767px){ body .blog-style-masonry article.sticky .sticky-label { margin-left: 0px; } } @media (max-width: 755px) { .blog-style-default .post-meta-categories { display: block; clear: both; } .blog-style-default .post-meta-author + .sep { display: none; } .blog-style-default .post-meta-right { margin-left: 30px; } } @media (max-width: 499px) { .blog-style-default .item-background-wrapper { padding-right: 15px; padding-left: 15px; } } /* BLOG STYLE COMPACT TINY */ body .blog.blog-style-compact-tiny-1, body .blog.blog-style-compact-tiny-2, body .blog.blog-style-compact-tiny-3, body .blog.blog-style-classic-tiny { padding-bottom: 0; margin-bottom: 0; } .blog-style-compact-tiny-1 article, .blog-style-compact-tiny-2 article { display: flex; align-items: center; } .blog-style-compact-tiny-2 article { margin-bottom: 20px; } .blog-style-compact-tiny-1 article, .blog-style-compact-tiny-3 article, .blog-style-classic-tiny article { margin-bottom: 22px; } .blog-style-compact-tiny-2 article.with-separator { padding-bottom: 20px; border-bottom: 1px solid var(--thegem-to-divider-color, #dfe5e8); } .blog-style-compact-tiny-1 article.with-separator, .blog-style-classic-tiny article.with-separator { padding-bottom: 22px; border-bottom: 1px solid var(--thegem-to-divider-color, #dfe5e8); } .blog-style-compact-tiny-1 article:last-child, .blog-style-compact-tiny-2 article:last-child, .blog-style-compact-tiny-3 article:last-child, .blog-style-classic-tiny article:last-child { padding-bottom: 0 !important; margin-bottom: 0 !important; border-bottom: none !important; } .blog-style-compact-tiny-1 .gem-compact-tiny-left { flex: none; width: 183px; margin-right: 30px; } .blog-style-compact-tiny-1 .gem-compact-tiny-left .gem-dummy { padding-bottom: 81%; border-radius: initial; display: block; } .blog-style-compact-tiny-3 .gem-dummy { padding-bottom: 46.15%; border-radius: initial; display: block; } .blog-style-compact-tiny-2 .gem-compact-tiny-left { flex: none; margin-right: 12px; } .blog-style-compact-tiny-2 .gem-news-item-image { border-radius: 50%; } .blog-style-compact-tiny-2 .gem-news-item-image .gem-dummy { border-radius: 0; } .blog-style-compact-tiny-1 .gem-compact-tiny-item-image, .blog-style-compact-tiny-2 .gem-news-item-image, .blog-style-classic-tiny .gem-compact-tiny-item-image { position: relative; overflow: hidden; } .blog-style-classic-tiny .gem-compact-tiny-item-image .post-featured-content > a:before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0; z-index: 5; width: 100%; height: 100%; opacity: 0; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; } .blog-style-classic-tiny .gem-compact-tiny-item-image .post-featured-content > a:hover:before { opacity: 1; transition: all 0.3s linear; -webkit-transition: all 0.3s linear; } .blog-style-classic-tiny .gem-compact-tiny-item-image .post-featured-content > a:after { content: '\e628'; position: absolute; top: 150%; left: 50%; width: 48px; height: 48px; border-radius: 50%; font-family: 'thegem-icons'; font-style: normal; font-size: 16px; line-height: 48px; margin-top: -24px; margin-left: -24px; opacity: 0; text-align: center; -webkit-transform: scale(0); transform: scale(0); -webkit-transition: top 0.4s, opacity 0.4s, -webkit-transform 0s 0.4s; transition: top 0.4s, opacity 0.4s, transform 0s 0.4s; z-index: 10; } .blog-style-classic-tiny .gem-compact-tiny-item-image .post-featured-content > a:hover:after { opacity: 1; top: 50%; -webkit-transform: scale(1); transform: scale(1); -webkit-transition: top 0s, opacity 0.4s, -webkit-transform 0.4s; transition: top 0s, opacity 0.4s, transform 0.4s; } .blog-style-compact-tiny-1 article.without-hover-icon a.default:after, .blog-style-classic-tiny article.without-hover-icon .post-featured-content > a:after { content: none; } .blog-style-compact-tiny-1 article.without-hover-icon a.default:hover:before, .blog-style-classic-tiny article.without-hover-icon .post-featured-content > a:hover:before { opacity: 0.25; } .blog-style-compact-tiny-1 .gem-compact-tiny-item-image .categories, .blog-style-compact-tiny-3 .categories, .blog-style-classic-tiny .gem-compact-tiny-item-image .categories { position: absolute; left: 0; top: 0; color: #ffffff; background: #000000; font-size: 75%; line-height: 1.5; padding: 0 8px; max-width: 100%; z-index: 5; } .blog-style-compact-tiny-1 .gem-compact-tiny-item-image .categories a, .blog-style-compact-tiny-3 .categories a, .blog-style-classic-tiny .gem-compact-tiny-item-image .categories a { color: inherit; } .blog-style-compact-tiny-1 .gem-compact-tiny-item-image .categories a:hover, .blog-style-compact-tiny-3 .categories a:hover, .blog-style-classic-tiny .gem-compact-tiny-item-image .categories a:hover { text-decoration: underline; } .blog-style-compact-tiny-1 .gem-compact-tiny-right, .blog-style-compact-tiny-2 .gem-compact-tiny-right { flex: auto; } .blog-style-compact-tiny-1 .gem-news-item-title, .blog-style-classic-tiny .gem-news-item-title { margin-bottom: 10px; } .blog-style-classic-tiny .gem-compact-tiny-item-image { margin-bottom: 16px; } .blog-style-compact-tiny-1 .post-meta, .blog-style-classic-tiny .post-meta { margin-top: 10px; } .blog.blog-style-compact-tiny-1 .post-meta, .blog.blog-style-compact-tiny-2 .post-meta, .blog.blog-style-compact-tiny-3 .post-meta, .blog.blog-style-classic-tiny .post-meta { margin-bottom: 0; } .blog-style-compact-tiny-1 .entry-meta, .blog-style-compact-tiny-2 .entry-meta, .blog-style-classic-tiny .entry-meta { display: flex; align-items: baseline; margin-bottom: 0; } .blog-style-compact-tiny-2 .entry-meta { align-items: flex-end; } .blog-style-compact-tiny-1 .gem-news-item-date, .blog-style-compact-tiny-2 .gem-news-item-date, .blog-style-classic-tiny .gem-news-item-date { margin-top: 0; } .blog-style-compact-tiny-1 .entry-meta .post-meta-right, .blog-style-compact-tiny-2 .entry-meta .post-meta-right, .blog-style-classic-tiny .entry-meta .post-meta-right { margin-left: auto; } .blog-style-compact-tiny-1 .comments-link a:before, .blog-style-compact-tiny-2 .comments-link a:before, .blog-style-classic-tiny .comments-link a:before { content: '\e63e'; vertical-align: middle; } .blog-style-compact-tiny-3 .wrap { position: relative; } .blog-style-compact-tiny-3 .over-link { position: absolute; display: block; width: 100%; height: 100%; left: 0; top: 0; z-index: 1; } .blog-style-compact-tiny-3 .post-image { overflow: hidden; } .blog-style-compact-tiny-3 .post-image img { height: 100%; object-fit: cover; } .blog-style-compact-tiny-3 .post-image img, .blog-style-compact-tiny-2 .gem-news-item-image img { width: 100%; transition: all 0.3s; } .blog-style-compact-tiny-2 .gem-news-item-image a:hover img, .blog-style-compact-tiny-3 article:hover img { transform: scale(1.1); } .blog-style-compact-tiny-3 .gem-compact-caption { position: absolute; width: 100%; left: 0; bottom: 0; padding: 22px; background: linear-gradient(0deg, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0) 100%); } .blog-style-compact-tiny-3 .post-featured-content > a:before, .blog-style-compact-tiny-3 .post-featured-content > a:after { content: none; } .blog-style-compact-tiny-3 .gem-news-item-title { display: inline-block; margin: 0.3em 0; } .blog-style-compact-tiny-3 .gem-news-item-title a, .blog-style-compact-tiny-3 .post-meta, .blog-style-compact-tiny-3 .post-meta a { color: #ffffff; }