.single { .site-content { > .page-header { background-repeat: no-repeat; background-size: cover; min-height: 550px; padding-top: 60px; padding-bottom: 60px; position: relative; z-index: 1; text-align: center; display: flex; flex: 1; flex-direction: column; justify-content: center; &:before { content: ""; background: rgba($black_color, 0.4); width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1; } span.category { display: inline-block; font-size: 0.7em; line-height: 1.17em; font-weight: 700; color: $white_color; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 5px; a { display: inline-block; margin-right: 20px; margin-bottom: 5px; color: $white_color; &:last-child { margin-right: 0; } &:hover { opacity: 0.7; filter: alpha(opacity=70); } } }//span.category .entry-meta { display: flex; flex-wrap: wrap; flex: 1; align-items: center; justify-content: center; margin-top: 30px; > span { display: inline-block; margin-right: 15px; position: relative; font-size: 0.7em; color: rgba($white_color, 0.8); font-weight: 400; padding-right: 15px; &:after { content: ""; background: rgba($white_color, 0.8); width: 4px; height: 4px; border-radius: 100%; position: absolute; top: 50%; right: 0; @include transform(translateY(-50%)); } &:last-child { margin-right: 0; padding-right: 0; &:after { display: none; } } a { color: rgba($white_color, 0.8); &:hover { color: $white_color; } } }//> span }//.entry-meta .entry-title { font-size: 3em; color: $white_color; margin-top: 0; margin-bottom: 0; font-family: $secondary_font; max-width: 812px; line-height: 1.25em; } }//> .page-header }//.site-content .site-main { article { display: flex; flex: 1; flex-wrap: wrap; align-items: flex-start; &.sticky-meta { .article-meta { position: sticky; top: 40px; }//.article-meta }//&.sticky-meta .article-meta { width: 50px; display: inline-block; text-align: center; .share-title { display: block; text-transform: uppercase; font-size: 0.6em; font-weight: 700; letter-spacing: 1px; color: #868e96; }//.share-title .social-list { margin: 0; padding: 0; list-style: none; li { margin-top: 8px; font-size: 0.9em; a { display: inline-block; width: 50px; height: 50px; text-align: center; line-height: 48px; border: 2px solid $primary_color; border-radius: 100%; color: #202020; &:hover { background: $primary_color; } }//a }//li }//.social-list + .entry-content { display: inline-block; width: calc(100% - 50px); padding-left: 50px; }//+ .entry-content ~ .entry-footer { padding-left: 100px; }//~ .entry-footer }//.article-meta .entry-content { margin-top: 0; p { margin-top: 0; margin-bottom: 30px; &:last-child { margin-bottom: 0; } }//p b, strong, u { color: #202020; } }//.entry-content .entry-footer { .cat-tags { display: inline-block; position: relative; padding-left: 40px; .tag-title { display: inline-block; font-size: 0.6em; text-transform: uppercase; color: #868e96; vertical-align: middle; font-weight: 600; letter-spacing: 1px; position: absolute; top: 0; left: 0; }//.tag-title a { display: inline-block; margin-left: 5px; font-size: 0.7em; text-transform: uppercase; line-height: 1; vertical-align: middle; color: #868e96; border: 1px solid $primary_color; padding: 6px 10px; &:hover { background: $primary_color; color: $black_color; } }//a }//.cat-tags }//.entry-footer }//article }//.site-main #primary { .post-shop-wrap { margin-top: 50px; }//.post-shop-wrap .author-section, .additional-post { margin-top: 60px; padding-top: 60px; border-top: 1px solid rgba($black_color, 0.1); }//.author-section }//#primary }//.single @include media(xs) { .single { .site-content { > .page-header { min-height: auto; background-position: center; .entry-title { font-size: 2em; }//.entry-title }//> .page-header }//.site-content .site-main { article{ &.sticky-meta { .article-meta { position: static; top: 0; }//.article-meta }//&.sticky-meta .article-meta { width: 100%; margin-bottom: 40px; .social-list { display: flex; flex: 1; flex-wrap: wrap; justify-content: center; li { margin-right: 8px; }//li }//.social-list + .entry-content { width: 100%; padding-left: 0; }//+ .entry-content ~ .entry-footer { padding-left: 0; }//~ .entry-footer }//.article-meta }//article }//.site-main }//.single }//media(xs)