.small-post, .medium-post, .large-post, .full-width-post { position: relative; margin-bottom: 4px; } .info-category span { color: #ffffff; background: rgba(0,0,0,.7); padding: 0 10px 3px 10px; } .slick-slide:hover .info-category span { background: #ff4c4c; } .magazine-posts-featured article:hover .info-category span { background: #f00000; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; opacity: 0.9; text-decoration: none; } .info-category a { color: #ffffff; font-size: 10px; } .info-category a:hover { text-decoration: none; } .module-meta-info a { font-size: 10px; color: #ffffff; text-transform: uppercase; display: inline-block; padding: 3px 7px; background-color: #ff4c4c; } .slick-slide .info-category span:hover, #magazine-homepage-widgets article:hover .module-meta-info a, #magazine-homepage-featured article:hover .module-meta-info a { background: rgba(0,0,0,.7); opacity: 0.9; text-decoration: none; -webkit-transition: background-color .3s ease; -moz-transition: background-color .3s ease; -o-transition: background-color .3s ease; transition: background-color .3s ease; } .medium-post h2 a { font-size: 24px; line-height: 18px; text-decoration: none; } .large-post h2 a { font-size: 24px; text-decoration: none; } .large-post h2 a { font-size: 24px; text-decoration: none; } .magazine-posts-featured .posts-info-container h2 a:hover { text-decoration: none; } .magazine-posts-featured article { position: relative; overflow: hidden; } .magazine-posts-featured article .post-thumbnail a:before { width: 100%; height: 60%; position: absolute; bottom: 0; content: ""; display: block; z-index: 1; background: -moz-linear-gradient(top, rgba(0,0,0,0) 0, #000 100%); background: -webkit-gradient(linear, left top, left bottom, color-stop(0, rgba(0,0,0,0)), color-stop(100%, #000)); background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0, #000 100%); background: -o-linear-gradient(top, rgba(0,0,0,0) 0, #000 100%); background: -ms-linear-gradient(top, rgba(0,0,0,0) 0, #000 100%); background: linear-gradient(to bottom, rgba(0,0,0,0) 0, #000 100%); } .magazine-posts-featured article:hover img { transform: scale3d(1.1,1.1,1); -webkit-transform: scale3d(1.1,1.1,1); -moz-transform: scale3d(1.1,1.1,1) rotate(.02deg); transition: transform 0.3s ease, opacity 0.3s; -webkit-transition: -webkit-transform 0.3s ease, opacity 0.3s; } .posts-info-container, .magazine-posts-featured .medium-post-content { width: 100%; position: absolute; bottom: 0; padding: 20px; padding-top: 0; z-index: 2; } .magazine-posts-featured .posts-info-container a, .magazine-posts-featured .posts-info-container p, .magazine-posts-featured .posts-info-container .entry-meta * { color: #ffffff; margin-bottom: 0; } .magazine-posts-featured .large-post { width: 50.6%; margin-right: 0.4%; margin-bottom: 0; float: left; } .magazine-posts-featured .full-width-post { width: 100%; float: left; } .magazine-posts-featured .full-height-post { width: 49.6%; float: left; margin-right: 0.8%; } .magazine-posts-featured .full-height-post:last-child { margin-right: 0; } .three-posts .full-height-post { width: 32%; float: left; margin-right: 2%; } .magazine-posts-featured-style-four .three-posts .full-height-post { margin-bottom: 20px; } .three-posts .full-height-post:last-child { margin-right: 0; } .four-posts .full-height-post { width: 23.5%; float: left; margin-right: 2%; } .four-posts .full-height-post:nth-child(4n) { margin-right: 0; } .magazine-posts-featured .medium-right-posts { width: 49.6%; float: left; } .magazine-posts-featured .medium-right-posts .medium-post:last-child { margin-bottom: 0; } .magazine-posts-featured .medium-right-posts .medium-post { width: 100%; margin-right: 0; } .magazine-posts-featured .medium-post-style-one { } .magazine-posts-featured .medium-posts { width: 49%; float: left; } .magazine-posts-featured .medium-post { width: 49.6%; float: left; margin-right: 0.8%; } .magazine-posts-featured .medium-post:nth-child(2n) { margin-right: 0; } /*Widget Customize Magazine*/ .widget-magazine-posts .type-post .wp-post-image { display: block; } .featured-box-section { width: 100%; margin-bottom: 30px; } .post-thumbnail { position: relative; } .magazine-banner-boxed-horizontal article { float: left; } .magazine-banner-boxed-horizontal .large-post { width: 50%; } .magazine-banner-boxed-horizontal .small-post { width: 25%; margin-bottom: 0; } .magazine-banner-boxed-horizontal .small-post .post-thumbnail { margin-right: 0; } .magazine-posts-columns { width: 48%; margin-right: 4%; float: left; position: relative; } .entry-header-pic { width: 100%; display: inline-block; position: relative; } .entry-header-pic .page-title { float: right; color: #ffffff; font-size: 14px; background-color: #000; padding: 8px 12px 7px 12px; display: inline-block; margin-bottom: 30px; margin-top: 0; } .entry-header-pic .page-title:before { content: ''; width: 0; height: 0; position: absolute; top: 0; border-style: solid; border-width: 0 0 30px 20px; border-color: transparent transparent #000000 transparent; margin-left: -32px; } .entry-header-pic .page-title:after { content: ''; width: 100%; position: absolute; top: 30px; background: #000; height: 2px; left: 0; margin-top: 0; font-size: 16px; } .magazine-posts-columns-post-list .large-post { margin-bottom: 15px; } .medium-post-content h2 a { display: block; margin-top: 10px; line-height: 1.1; } .magazine-posts-columns-post-list .large-post .post-thumbnail { position: relative; margin-bottom: 15px; } .magazine-posts-columns:nth-child(2n) { margin-right: 0; } .wrap-content-box { position: absolute; bottom: 0; padding-bottom: 15px; } .wrap-content-box.top { top: 20px; margin: 0; padding: 0; } .overlay-posts { padding: 5px 15px; background: rgba(0, 0, 0, 0.3); } .overlay-posts a { font-size: 14px; color: #ffffff; line-height: normal; display: block; } .overlay-posts .entry-title a, .overlay-posts .entry-meta * { color: #ffffff; margin-top: 0; } .small-post .entry-title a, .medium-post .entry-title a { font-size: 14px; display: block; } .left-post .entry-title a, .right-post .entry-title a, .full-post .entry-title a { font-size: 21px; } .left-post .entry-content, .full-post .entry-content { margin-bottom: 0; } .small-post .post-thumbnail { float: left; margin-right: 4%; } .small-post .thumbnail-right { float: right; margin-right: 0; margin-left: 4%; } .magazine-posts-columns-post-list .small-post { margin-bottom: 15px; } #magazine-homepage-widgets .widget .widget-title a, #magazine-homepage-featured .widget .widget-title a { color: #ffffff; } #magazine-homepage-widgets .widget .widget-title a:hover, #magazine-homepage-featured .widget .widget-title a:hover { text-decoration: none; opacity: 0.9; } .widget-magazine-posts-grid .large-post { width: 48%; float: left; margin-right: 4%; margin-bottom: 30px; } .widget-magazine-posts-grid .large-post:nth-of-type(even) { margin-right: 0; } .widget-magazine-posts-grid .large-post .post-thumbnail { position: relative; margin-bottom: 15px; } .magazine-posts-grid-row .medium-post { width: 30.66%; margin-right: 4%; float: left; margin-bottom: 4%; } .magazine-posts-grid-row .medium-post:nth-child(3n) { margin-right: 0; } .magazine-posts-grid-row .medium-post .post-thumbnail { position: relative; margin-bottom: 15px; } /*Box-Vertical-Post*/ .magazine-posts-boxed-vertical .large-post { width: 49.4%; margin-right: 4%; float: left; position: relative; box-sizing: border-box; } .magazine-posts-boxed-vertical ul.small-list { width: 46%; } .magazine-posts-boxed-vertical ul li { width: 100%; float: left; } .magazine-posts-boxed-vertical .large-post .post-thumbnail { position: relative; margin-bottom: 15px; } .magazine-posts-boxed-vertical .small-posts { width: 46.6%; float: left; box-sizing: border-box; } .magazine-posts-boxed-vertical .small-post { display: block; width: 100%; margin-bottom: 20px; box-sizing: border-box; float: left; } .have-thumbnail .small-post { margin-bottom: 10px; } .have-thumbnail .small-post h2 { margin-top: 0; margin-bottom: 5px; } /*Horizontal Post*/ .magazine-posts-boxed-horizontal .large-post { width: 100%; box-sizing: border-box; margin-bottom: 25px; } .magazine-posts-boxed-horizontal .large-post .post-thumbnail { float: left; margin-right: 4%; } .magazine-posts-boxed-horizontal .large-post .post-content { box-sizing: border-box; } .magazine-posts-boxed-horizontal .large-post .post-content .entry-title a { font-size: 22px; } .magazine-posts-boxed-horizontal .medium-posts { width: 100%; box-sizing: border-box; } .magazine-posts-boxed-horizontal .medium-posts .medium-post { width: 30.305%; float: left; margin-right: 4.5425%; margin-bottom: 20px; box-sizing: border-box; } .magazine-posts-boxed-horizontal .medium-posts .medium-post .post-thumbnail { margin-bottom: 10px; } .magazine-posts-boxed-horizontal .medium-posts .medium-post > a { float: left; margin-bottom: 10px; } .magazine-posts-boxed-horizontal .medium-posts .medium-post:nth-child(3n) { margin-right: 0; } /*Post List*/ .left-post .post-thumbnail { float: left; display: block; margin-right: 4%; position: relative; } .entry-title { display: block; line-height: normal; margin-top: 0; } .left-post .small-post-content .entry-title a { display: block; color: #333333; } .magazine-posts-lists .right-post, .magazine-posts-lists .left-post { margin-bottom: 20px; } .magazine-posts-lists .right-post h2, .magazine-posts-lists .left-post h2 { margin-top: 0; } .magazine-posts-lists .right-post .post-thumbnail { float: right; display: block; margin-left: 20px; position: relative; } /*Post Full Thumbanail*/ .widget-magazine-posts-lists .full-post { width: 100%; margin-bottom: 20px; } .widget-magazine-posts-lists .full-post .post-thumbnail { margin-bottom: 20px; position: relative; } @media screen and (max-width: 1024px) { .entry-title { font-size: 28px; padding-bottom: 10px; margin-bottom: 0; } } /*When layout Responsive*/ @media screen and (max-width: 768px) { .overlay-posts a { font-size: 12px; } .widget-magazine-posts .type-post .wp-post-image { width: 100%; } .tc_magazine_posts_featured .magazine-posts-featured .medium-posts { width: 100%; } .tc_magazine_posts_featured .magazine-posts-featured article, .tc_magazine_posts_featured .magazine-posts-featured .three-posts article:first-child { width: 100%; margin-left: 0; margin-right: 0; margin-bottom: 20px; } .tc_magazine_posts_featured .magazine-posts-featured .medium-posts article, .tc_magazine_posts_featured .magazine-posts-featured .four-posts article, .tc_magazine_posts_featured .magazine-posts-featured .three-posts article { width: 48%; margin-right: 2%; margin-bottom: 20px; } .tc_magazine_posts_featured .magazine-posts-featured .medium-posts article .posts-info-container { padding: 10px; } .tc_magazine_posts_featured .magazine-posts-featured .three-posts article:nth-child(3n) { margin-right: 0; margin-left: 2%; } .tc_magazine_posts_featured .magazine-posts-featured .medium-posts article:nth-child(2n), .tc_magazine_posts_featured .magazine-posts-featured .four-posts article:nth-child(2n) { margin-right: 0; margin-left: 2%; } .tc_magazine_posts_featured .magazine-posts-featured .three-posts article:nth-child(3n+1) { clear: left; } .tc_magazine_posts_featured .magazine-posts-featured .medium-posts article:nth-child(2n+1), .tc_magazine_posts_featured .magazine-posts-featured .four-posts article:nth-child(2n+1) { clear: left; } .tc_magazine_posts_featured .magazine-posts-featured .three-posts article .entry-meta *, .tc_magazine_posts_featured .magazine-posts-featured .medium-posts article .entry-meta *, .tc_magazine_posts_featured .magazine-posts-featured .four-posts article .entry-meta * { font-size: 10px; } .tc_magazine_posts_featured .magazine-posts-featured .medium-posts .full-width-post { width: 100%; } .tc_magazine_posts_featured .magazine-posts-featured .medium-right-posts { width: 50%; float: right; margin-left: 0; } .tc_magazine_posts_featured .magazine-posts-featured .medium-right-posts article { width: 100%; height: 130px; margin: 0 0 10px 0; } .tc_magazine_posts_featured .magazine-posts-featured .medium-right-posts article:nth-child(2n) { margin-left: 0; } .tc_magazine_posts_featured .magazine-posts-featured article .post-thumbnail a:before { height: 70%; } .tc_magazine_posts_featured .magazine-posts-featured .large-post .post-thumbnail a:before, .tc_magazine_posts_featured .magazine-posts-featured .three-posts article .post-thumbnail a:before { height: 40%; } .info-category span { background: #f00000; } } @media screen and (max-width: 600px) { .magazine-posts-boxed-vertical .large-post { width: 100%; margin-right: 0; } .magazine-posts-boxed-vertical ul.small-list { width: 100%; } .magazine-posts-lists .left-post .post-thumbnail { width: 48%; margin-right: 4%; } .magazine-posts-boxed-horizontal .large-post .post-thumbnail { width: 48%; margin-right: 4%; } } @media screen and (max-width: 570px) { .magazine-posts-grid-row .medium-post { width: 100%; margin-right: 0; float: none; } .widget-magazine-posts-content .post-content p { display: none; } .magazine-posts-lists .left-post .post-thumbnail, .magazine-posts-lists .right-post .post-thumbnail { float: none; width: 100%; margin-right: 0; margin-left: 0; margin-bottom: 15px; } .widget-magazine-posts .type-post img { width: 100%; } .magazine-posts-boxed-vertical .large-post { width: 100%; float: none; margin-bottom: 15px; } .magazine-posts-boxed-vertical .small-posts { width: 100%; float: none; } .magazine-posts-boxed-horizontal .large-post .post-thumbnail { width: 100%; margin-right: 0; margin-bottom: 15px; } .magazine-posts-boxed-horizontal .large-post .post-content { overflow: visible; } .magazine-posts-boxed-horizontal .medium-posts .medium-post { width: 100%; float: none; margin-right: 0; } .magazine-posts-boxed-horizontal .medium-posts .medium-post .post-thumbnail { max-width: 30%; float: left; margin-bottom: 0; margin-right: 15px; } .magazine-posts-columns { width: 100%; margin-right: 0; float: none; } } @media screen and (max-width: 414px) { } @media screen and (max-width: 480px) { .widget-magazine-posts-content .post-content p { display: block; } .widget-magazine-posts-grid .large-post { width: 100%; float: none; margin-right: 0; margin-bottom: 30px; } }