File: /var/www/html/wpdehaus/wp-content/themes/salient/css/src/blog/auto-masonry-meta-overlaid-spaced.css
/*
Theme Name: Salient
Description: Styles for the "Auto Masonry: Meta Overlaid Spaced" post style.
*/
.masonry.auto_meta_overlaid_spaced .post.quote .post-content .quote-inner,
.masonry.auto_meta_overlaid_spaced .post.link .post-content .link-inner {
background-color: transparent!important;
}
.masonry.auto_meta_overlaid_spaced .post .n-post-bg {
opacity: 1;
background-size: cover;
}
.masonry.auto_meta_overlaid_spaced .post .post-content .quote-inner .icon,
.masonry.auto_meta_overlaid_spaced .post .post-content .link-inner .icon {
display: none;
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img,
.masonry.auto_meta_overlaid_spaced .post.quote .n-post-bg,
.masonry.auto_meta_overlaid_spaced .post.link .n-post-bg {
margin-bottom:0;
backface-visibility:hidden;
-webkit-backface-visibility:hidden;
transition:all .7s cubic-bezier(.2,1,.22,1);
-webkit-transition:all .7s cubic-bezier(.2,1,.22,1)
}
.auto_meta_overlaid_spaced .masonry-blog-item:hover .post-featured-img,
.masonry.auto_meta_overlaid_spaced .post.quote:hover .n-post-bg,
.masonry.auto_meta_overlaid_spaced .post.link:hover .n-post-bg {
transform:scale(1.07);
-webkit-transform:scale(1.07)
}
@media only screen and (max-width : 690px) {
.auto_meta_overlaid_spaced .masonry-blog-item {
margin-bottom: 0;
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-content {
height: 55vh;
}
}
.auto_meta_overlaid_spaced .masonry-blog-item {
padding: 4px;
}
#ajax-content-wrap .blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12 {
padding: 4px;
}
body[data-col-gap] .vc_row-fluid .span_12.post-area.auto_meta_overlaid_spaced[data-ams="4px"],
.post-area.auto_meta_overlaid_spaced {
margin: 0 0 0 -4px;
}
body .post-area.auto_meta_overlaid_spaced.span_12 {
width: calc(100% + 8px);
}
.auto_meta_overlaid_spaced[data-ams="8px"] .masonry-blog-item {
padding: 8px;
}
#ajax-content-wrap .blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12[data-ams="8px"] {
padding: 8px;
}
body[data-col-gap] .vc_row-fluid .span_12.post-area.auto_meta_overlaid_spaced[data-ams="8px"],
.post-area.auto_meta_overlaid_spaced[data-ams="8px"] {
margin: 0 0 0 -8px;
}
body .post-area.auto_meta_overlaid_spaced.span_12[data-ams="8px"] {
width: calc(100% + 16px);
}
.auto_meta_overlaid_spaced[data-ams="12px"] .masonry-blog-item {
padding: 12px;
}
#ajax-content-wrap .blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12[data-ams="12px"] {
padding: 12px;
}
body[data-col-gap] .vc_row-fluid .span_12.post-area.auto_meta_overlaid_spaced[data-ams="12px"],
.post-area.auto_meta_overlaid_spaced[data-ams="12px"] {
margin: 0 0 0 -12px;
}
body .post-area.auto_meta_overlaid_spaced.span_12[data-ams="12px"] {
width: calc(100% + 24px);
}
.auto_meta_overlaid_spaced[data-ams="16px"] .masonry-blog-item {
padding: 16px;
}
#ajax-content-wrap .blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12[data-ams="16px"] {
padding: 16px;
}
body[data-col-gap] .vc_row-fluid .span_12.post-area.auto_meta_overlaid_spaced[data-ams="16px"],
.post-area.auto_meta_overlaid_spaced[data-ams="16px"] {
margin: 0 0 0 -16px;
}
body .post-area.auto_meta_overlaid_spaced.span_12[data-ams="16px"] {
width: calc(100% + 32px);
}
.auto_meta_overlaid_spaced[data-ams="20px"] .masonry-blog-item {
padding: 20px;
}
#ajax-content-wrap .blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12[data-ams="20px"] {
padding: 20px;
}
body[data-col-gap] .vc_row-fluid .span_12.post-area.auto_meta_overlaid_spaced[data-ams="20px"],
.post-area.auto_meta_overlaid_spaced[data-ams="20px"] {
margin: 0 0 0 -20px;
}
body .post-area.auto_meta_overlaid_spaced.span_12[data-ams="20px"] {
width: calc(100% + 40px);
}
.blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12,
.blog-fullwidth-wrap .post-area.auto_meta_overlaid_spaced.span_12[data-ams],
body[data-col-gap] .vc_row-fluid .blog-fullwidth-wrap .span_12.post-area.auto_meta_overlaid_spaced[data-ams] {
margin: 0;
width: 100%!important;
}
.auto_meta_overlaid_spaced .post-header .meta-author,
.auto_meta_overlaid_spaced .post-header .meta-category,
.auto_meta_overlaid_spaced .post-header .meta-comment-count {
display: none;
}
.auto_meta_overlaid_spaced .masonry-blog-item .inner-wrap {
background-color: transparent;
padding: 0;
border-radius: 5px;
overflow: hidden;
transform: translateZ(0);
}
.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap,
.ascend .auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap,
.auto_meta_overlaid_spaced .post.quote.masonry-blog-item .quote-inner,
.auto_meta_overlaid_spaced .post.link.masonry-blog-item .link-inner {
padding: 30px!important;
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img,
.auto_meta_overlaid_spaced .content-inner > a,
.auto_meta_overlaid_spaced .masonry-blog-item .content-inner,
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img:after {
display: block;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img:after {
top: auto;
bottom: 0;
height: 75%;
}
body .auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img {
transition: transform .7s cubic-bezier(.2,1,.22,1), opacity 0.5s ease;
backface-visibility: visible;
background-size: cover;
background-position: center;
width: 100.5%;
height: 100.5%;
}
.auto_meta_overlaid_spaced .masonry-blog-item .content-inner {
background-color: rgba(0,0,0,0.3);
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img[data-nectar-img-src],
.post-area.featured_img_left .post-featured-img[data-nectar-img-src] {
opacity: 0;
}
body .auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img.no-img {
background-color: rgba(0,0,0,0.2);
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img:after {
content: '';
background: linear-gradient(to bottom,rgba(35,35,35,0),rgba(35,35,35,.65) 100%);
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img img {
height: 100%;
width: 100%;
position: absolute;
left: 0;
top: 0;
object-fit: cover;
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-featured-img img:not([srcset]) {
width: 100%;
}
.auto_meta_overlaid_spaced .post-featured-img img.nectar-lazy {
opacity: 0;
transition: opacity 0.5s ease;
}
.auto_meta_overlaid_spaced .post-featured-img img.nectar-lazy.loaded {
opacity: 1;
}
.auto_meta_overlaid_spaced .masonry-blog-item .content-inner > a {
z-index: 30;
}
.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap {
left: 0;
}
.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap,
.auto_meta_overlaid_spaced .post.quote.masonry-blog-item .quote-inner,
.auto_meta_overlaid_spaced .post.link.masonry-blog-item .link-inner {
pointer-events: none;
z-index: 33;
position: absolute;
bottom: 0;
width: 100%;
}
.auto_meta_overlaid_spaced .post.quote.masonry-blog-item .quote-inner,
.auto_meta_overlaid_spaced .post.link.masonry-blog-item .link-inner {
height: 100%;
}
.auto_meta_overlaid_spaced .post.quote.masonry-blog-item .quote-inner .quote-wrap,
.auto_meta_overlaid_spaced .post.link.masonry-blog-item .link-inner .link-wrap {
bottom: 0;
left: 0;
width: 100%;
height: auto;
position: absolute;
padding: 30px;
}
.auto_meta_overlaid_spaced .post.link .full-post-link,
.auto_meta_overlaid_spaced .post.quote .full-post-link {
pointer-events: all;
}
.auto_meta_overlaid_spaced.post-area.masonry .post .quote-inner,
.auto_meta_overlaid_spaced.post-area.masonry .post .link-inner {
margin-bottom: 0;
}
.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap h3 a,
.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap h3 a:hover,
.auto_meta_overlaid_spaced .masonry-blog-item .meta-category a {
color: #fff!important;
transition: opacity 0.37s cubic-bezier(0.52, 0.01, 0.16, 1);
}
.auto_meta_overlaid_spaced .meta-category a,
.auto_meta_overlaid_spaced .post.quote .author {
font-weight: 600;
}
.auto_meta_overlaid_spaced .masonry-blog-item .meta-category a {
opacity: 0.72;
}
.auto_meta_overlaid_spaced .masonry-blog-item .meta-category a:hover {
opacity: 1;
}
.post-area.auto_meta_overlaid_spaced .posts-container {
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-content {
height: 50vh;
}
.post-area.auto_meta_overlaid_spaced .masonry-blog-item .article-content-wrap .meta-category {
pointer-events: all;
}
.post-area.auto_meta_overlaid_spaced .masonry-blog-item {
width: 25%;
display: block;
}
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+1),
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+6),
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+7),
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+8) {
width: 50%;
}
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+1) .post-header,
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+6) .post-header,
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+7) .post-header,
.post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+8) .post-header {
max-width: 55%;
}
.auto_meta_overlaid_spaced .masonry-blog-item .post-header,
.auto_meta_overlaid_spaced .masonry-blog-item .post-header h3 {
margin-bottom: 0;
}
.post-area.masonry.span_9.auto_meta_overlaid_spaced .masonry-blog-item {
width: 50%;
}
.post-area.masonry.span_9.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(3n+1) {
width: 100%;
}
@media only screen and (max-width: 690px) {
.post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-content {
height: 33vh;
}
}
@media only screen and (max-width: 999px) {
.post-area.masonry.auto_meta_overlaid_spaced .masonry-blog-item {
width: 50%;
}
.post-area.masonry.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(3n+1) {
width: 100%;
}
}
@media only screen and (max-width: 1600px) and (min-width: 1001px) {
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item {
width: 25%;
}
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-header {
max-width: 100%;
}
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+1),
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+6),
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+7),
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+8) {
width: 50%;
}
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+1) .post-header,
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+6) .post-header,
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+7) .post-header,
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(8n+8) .post-header {
max-width: 55%;
}
}
@media only screen and (min-width: 1601px) {
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item {
width: 20%;
}
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item .post-header {
max-width: 100%;
}
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+1),
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+7),
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+9),
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+10) {
width: 40%;
}
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+1) .post-header,
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+7) .post-header,
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+9) .post-header,
.full-width-content .post-area.auto_meta_overlaid_spaced .masonry-blog-item:nth-child(11n+10) .post-header {
max-width: 55%;
}
}
.auto_meta_overlaid_spaced article .content-inner > .play svg {
width: 14px;
height: 14px;
}
.auto_meta_overlaid_spaced article .content-inner > .play {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
height: 60px;
width: 60px;
z-index: 100;
pointer-events: none;
}
.auto_meta_overlaid_spaced article .content-inner > .play:before {
border-width: 3px;
}
.auto_meta_overlaid_spaced article:hover .content-inner > .play:before {
transform: scale(1.14);
-webkit-transform: scale(1.14);
opacity: 0.4;
}
.auto_meta_overlaid_spaced article .content-inner > .play svg path {
fill: #fff;
}