/*------------------------------------* Single Post Header General Styling *------------------------------------*/ .sh-container { margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 240px) { .sh-container { max-width: 240px; } } @media (min-width: 320px) { .sh-container { max-width: 320px; } } @media (min-width: 480px) { .sh-container { max-width: 480px; } } @media (min-width: 640px) { .sh-container { max-width: 640px; } } @media (min-width: 940px) { .sh-container { max-width: 940px; } } @media (min-width: 1120px) { .sh-container { max-width: 1120px; } } @media (min-width: 1200px) { .sh-container { max-width: 1200px; } } .head-row { display: flex; display: -ms-flexbox; display: -webkit-flex; display: -webkit-box; flex-wrap: wrap; -ms-flex-wrap: wrap; -webkit-flex-wrap: wrap; } .row-center { justify-content: center; display: flex; } .col-xs-1, .col-xs-2, .col-xs-3, .col-xs-4, .col-xs-5, .col-xs-6, .col-xs-7, .col-xs-8, .col-xs-9, .col-xs-10, .col-xs-11, .col-xs-12, .col-s-1, .col-s-2, .col-s-3, .col-s-4, .col-s-5, .col-s-6, .col-s-7, .col-s-8, .col-s-9, .col-s-10, .col-s-11, .col-s-12, .col-ms-1, .col-ms-2, .col-ms-3, .col-ms-4, .col-ms-5, .col-ms-6, .col-ms-7, .col-ms-8, .col-ms-9, .col-ms-10, .col-ms-11, .col-ms-12, .col-m-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12, .col-ml-1, .col-m-2, .col-m-3, .col-m-4, .col-m-5, .col-m-6, .col-m-7, .col-m-8, .col-m-9, .col-m-10, .col-m-11, .col-m-12, .col-l-1, .col-l-2, .col-l-3, .col-l-4, .col-l-5, .col-l-6, .col-l-7, .col-l-8, .col-l-9, .col-l-10, .col-l-11, .col-l-12, .col-xl-1, .col-xl-2, .col-xl-3, .col-xl-4, .col-xl-5, .col-xl-6, .col-xl-7, .col-xl-8, .col-xl-9, .col-xl-10, .col-xl-11, .col-xl-12 { position: relative; min-height: 1px; padding-left: 1rem; padding-right: 1rem; } .col-xs-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-xs-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-xs-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-xs-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-xs-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-xs-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-xs-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-xs-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-xs-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-xs-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-xs-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-xs-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } @media (min-width: 320px) { .col-s-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-s-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-s-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-s-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-s-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-s-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-s-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-s-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-s-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-s-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-s-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-s-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } } @media (min-width: 480px) { .col-ms-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-ms-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-ms-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-ms-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-ms-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-ms-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-ms-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-ms-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-ms-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-ms-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-ms-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-ms-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } } @media (min-width: 640px) { .col-m-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-m-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-m-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-m-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-m-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-m-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-m-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-m-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-m-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-m-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-m-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-m-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } } @media (min-width: 940px) { .col-ml-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-ml-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-ml-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-ml-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-ml-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-ml-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-ml-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-ml-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-ml-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-ml-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-ml-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-ml-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } } @media (min-width: 1120px) { .col-l-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-l-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-l-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-l-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-l-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-l-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-l-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-l-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-l-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-l-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-l-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-l-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } } @media (min-width: 1200px) { .col-xl-12 { flex: 0 0 100%; max-width: 100%; -ms-flex: 0 0 100%; -webkit-flex: 0 0 100%; -webkit-box-flex: 0; } .col-xl-11 { flex: 0 0 91.667%; max-width: 91.667%; -ms-flex: 0 0 91.667%; -webkit-flex: 0 0 91.667%; -webkit-box-flex: 0; } .col-xl-10 { flex: 0 0 83.333%; max-width: 83.333%; -ms-flex: 0 0 83.333%; -webkit-flex: 0 0 83.333%; -webkit-box-flex: 0; } .col-xl-9 { flex: 0 0 75%; max-width: 75%; -ms-flex: 0 0 75%; -webkit-flex: 0 0 75%; -webkit-box-flex: 0; } .col-xl-8 { flex: 0 0 66.667%; max-width: 66.667%; -ms-flex: 0 0 66.667%; -webkit-flex: 0 0 66.667%; -webkit-box-flex: 0; } .col-xl-7 { flex: 0 0 58.333%; max-width: 58.333%; -ms-flex: 0 0 58.333%; -webkit-flex: 0 0 58.333%; -webkit-box-flex: 0; } .col-xl-6 { flex: 0 0 50%; max-width: 50%; -ms-flex: 0 0 50%; -webkit-flex: 0 0 50%; -webkit-box-flex: 0; } .col-xl-5 { flex: 0 0 41.667%; max-width: 41.667%; -ms-flex: 0 0 41.667%; -webkit-flex: 0 0 41.667%; -webkit-box-flex: 0; } .col-xl-4 { flex: 0 0 33.333%; max-width: 33.333%; -ms-flex: 0 0 33.333%; -webkit-flex: 0 0 33.333%; -webkit-box-flex: 0; } .col-xl-3 { flex: 0 0 25%; max-width: 25%; -ms-flex: 0 0 25%; -webkit-flex: 0 0 25%; -webkit-box-flex: 0; } .col-xl-2 { flex: 0 0 16.667%; max-width: 16.667%; -ms-flex: 0 0 16.667%; -webkit-flex: 0 0 16.667%; -webkit-box-flex: 0; } .col-xl-1 { flex: 0 0 8.333%; max-width: 8.333%; -ms-flex: 0 0 8.333%; -webkit-flex: 0 0 8.333%; -webkit-box-flex: 0; } } /*------------------------------------* Meta Stylings *------------------------------------*/ ul.meta-style-3, ul.meta-style-2, ul.top-entry-meta-2, ul.top-entry-meta-3, ul.bottom-entry-meta-2, ul.bottom-entry-meta-3 { list-style: none; display: flex; flex-wrap: wrap; font-size: 15px; time.published { font-size: inherit; } li { padding: 0 7px 5px 7px; } } ul.meta-style-3, ul.top-entry-meta-3, ul.bottom-entry-meta-3 { li i { padding: 0 5px; } } ul.hms-style-classic, ul.hms-style-classic, ul.betm-style-classic, ul.bebm-style-classic { li:not(:last-child):after { content: '/'; padding: 0 8px; } li { padding: 0 0 5px 0; } } ul.hms-style-modern, ul.hms-style-modern, ul.betm-style-modern, ul.bebm-style-modern { li:not(:last-child):after { content: '|'; padding: 0 8px; } li { padding: 0 0 5px 0; } } ul.hms-style-stylish, ul.hms-style-stylish, ul.betm-style-stylish, ul.bebm-style-stylish { li:not(:last-child):after { content: '//'; padding: 0 8px; } li { padding: 0 0 5px 0; } } .ocean-post-layout-breadcrumbs .site-breadcrumbs { position: inherit; top: inherit; right: inherit; width: inherit; max-width: inherit; height: inherit; margin-top: unset; } .ocean-post-layout-breadcrumbs .site-breadcrumbs ol.trail-items { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; margin: 15px 0; li { color: #333; a { color: inherit; } span { color: inherit; } } } .edit-link { display: inline-block; font-weight: bold; text-transform: uppercase; letter-spacing: 1px; margin: 20px 0 10px 30px; } a.post-edit-link { color: #ffb100; background-color: #06214e; padding: 10px 20px; border-radius: 12px; } /*------------------------------------* Single Post Header Ocean 2 Styling *------------------------------------*/ .single-header-ocean-2 { margin-top: 40px; margin-bottom: 25px; } header.blog-post-title { text-align: center; } .single .single-header-ocean-2 .single-post-title h1 { border-bottom: none; } .single-header-ocean-2 .single-post-title { font-size: 60px; text-transform: capitalize; } .single-header-ocean-2 .blog-post-title ul.meta-style-2, .single-header-ocean-2 .blog-post-title ul.meta-style-3 { border-bottom: none; justify-content: center; margin-left: 0; margin-right: 0; } .blog-post-breadcrumbs .site-breadcrumbs { position: inherit; top: inherit; right: inherit; width: inherit; max-width: inherit; height: inherit; margin-top: unset; } .blog-post-breadcrumbs .site-breadcrumbs ol.trail-items { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; margin: 15px 0; li { color: #333; a { color: inherit; } span { color: inherit; } } } .ocean-sh-2 img { object-fit: cover; width: 100%; max-width: none; max-height: 500px; border-radius: 0; } /*------------------------------------* Single Post Header Ocean 3 Styling *------------------------------------*/ .header-overlay-thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-color: #000; background-position: center; } .single-header-ocean-3 { position: relative; padding: 50px 0; margin-bottom: 50px; } .header-color-overlay { position: absolute; width: 100%; height: 100%; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); } .single-header-ocean-3 .blog-post-author .post-author-avatar { img.avatar { border-radius: 50%; border: 3px solid #fff; } margin: 5px 0 15px; } .single-header-ocean-3 .blog-post-author { margin: 0 0 30px; } .single-header-ocean-3 .post-author-name { font-size: 22px; line-height: 2; a { color: #fff; :hover { color: inherit; } } } .single-header-ocean-3 .blog-post-author-content { color: #fff; font-size: 15px; } .single-header-ocean-3 .single-post-title { color: #fff; font-size: 50px; margin: 0 0 60px; text-transform: capitalize; } .single-header-ocean-3 ul.meta-style-3, .single-header-ocean-3 ul.meta-style-2 { border-bottom: none; padding-bottom: 0; color: #fff; margin: 0 0 0; justify-content: center; li { a, i { color: #fff; } } } /*------------------------------------* Single Post Header Ocean 4 & 5 Styling *------------------------------------*/ .single-header-ocean-4 { margin: 120px 0 60px; padding: 60px 0 0; } .single-header-ocean-5 { margin: 0 0 120px; padding: 60px 0; } .single-header-ocean-4, .single-header-ocean-5 { background-color: blue; } .single-header-ocean-4 .blog-post-title { margin-left: auto; margin-right: auto; max-width: 800px; } .single-header-ocean-4 .blog-post-author { margin: -130px 0 40px; } .single-header-ocean-5 .blog-post-author { margin: 40px 0 -130px; } .single-header-ocean-4 ul.meta-style-3, .single-header-ocean-4 ul.meta-style-2, .single-header-ocean-5 ul.meta-style-3, .single-header-ocean-5 ul.meta-style-2 { color: #fff; justify-content: center; margin: 40px 0; li { a, i { color: #fff; } } } .single-header-ocean-4 .single-post-title, .single-header-ocean-5 .single-post-title { color: #fff; font-size: 35px; text-transform: capitalize; } .single-header-ocean-4 .post-author-name a, .single-header-ocean-5 .post-author-name a { color: #fff; font-size: 20px; } .single-header-ocean-4 .blog-post-author .post-author-avatar, .single-header-ocean-5 .blog-post-author .post-author-avatar { img.avatar { border-radius: 50%; border: 10px solid #fff; } } .single-header-ocean-5 .blog-post-author .post-author-avatar { margin: 15px 0 0; } .single-header-ocean-4 .blog-post-author .post-author-avatar { margin: 0 0 15px; } /*------------------------------------* Single Post Header Ocean 6 & 7 Styling *------------------------------------*/ .single-header-ocean-6 .post-thumbnail img, .single-header-ocean-7 .post-thumbnail img { max-height: 700px; object-fit: cover; -o-object-fit: cover; width: 100%; max-width: none; } .single-header-ocean-6 .blog-post-title, .single-header-ocean-7 .blog-post-title { max-width: 1200px; background-color: black; border-radius: 10px; padding: 30px 40px; } .single-header-ocean-6 .blog-post-title { margin: 20px auto 20px auto; } .single-header-ocean-6.header-has-post-thumbnail .blog-post-title { margin: -150px auto 20px auto; } .single-header-ocean-7 .blog-post-title { margin: 20px auto 20px auto; } .single-header-ocean-7.header-has-post-thumbnail .blog-post-title { margin: 20px auto -150px auto; } .single-header-ocean-6 .single-post-title, .single-header-ocean-7 .single-post-title { text-align: left; font-size: 30px; } .single-header-ocean-6 ul.meta-style-3, .single-header-ocean-7 ul.meta-style-3 { li { i { color: #fff; } } } .single-header-ocean-6 ul.meta-style-2, .single-header-ocean-7 ul.meta-style-2, .single-header-ocean-6 ul.meta-style-3, .single-header-ocean-7 ul.meta-style-3 { color: #fff; margin: 30px 0 0; li { a { color: #fff; } } } .single-header-ocean-6 .blog-post-author .post-author-avatar, .single-header-ocean-7 .blog-post-author .post-author-avatar { img.avatar { border-radius: 50%; } } .single-header-ocean-6 .blog-post-author, .single-header-ocean-7 .blog-post-author { display: flex; align-items: center; margin: 20px 0; } .single-header-ocean-6 .blog-post-author .blog-post-author-content, .single-header-ocean-7 .blog-post-author .blog-post-author-content { padding: 0 30px; display: inline-block; text-align: left; .post-author-name { font-size: 20px; } .post-author-description { font-size: 15px; } } .single-header-ocean-6 .blog-post-author, .single-header-ocean-6 .single-post-title, .single-header-ocean-6 ul.meta-style-3, .single-header-ocean-6 ul.meta-style-2, .single-header-ocean-7 .blog-post-author, .single-header-ocean-7 .single-post-title, .single-header-ocean-7 ul.meta-style-3, .single-header-ocean-7 ul.meta-style-2 { max-width: 800px; } .single-header-ocean-6 .single-post-title, .single-header-ocean-6 .blog-post-author, .single-header-ocean-6 .blog-post-author a, .single-header-ocean-7 .single-post-title, .single-header-ocean-7 .blog-post-author, .single-header-ocean-7 .blog-post-author a { color: white; } @media only screen and (max-width: 479px) { ul.meta-style-2, ul.meta-style-3 { justify-content: space-around; } } @media only screen and (max-width: 480px) { .single-header-ocean-6 .blog-post-author, .single-header-ocean-7 .blog-post-author { flex-wrap: wrap; justify-content: center; .blog-post-author-content { padding: 0 0; } } } /*------------------------------------* Single Post Header Ocean 8 Styling *------------------------------------*/ /*------------------------------------* Post Entries *------------------------------------*/ /*------------------------------------* Minimal Stylish *------------------------------------*/ .entry-layout-4 .post-entry { display: flex; &:not(:first-child) { margin-top: 120px; } &:last-child { margin-bottom: 50px; } } .entry-layout-4 .blog-entry { &:not(:first-child) { margin-top: 80px; } } .layout-4 .post-thumbnail { position: absolute; z-index: -1; width: 90%; img { border-radius: 12px; } } .layout-4 .post-entry__inners { .published-on { display: inline-block; font-size: 15px; margin-bottom: 2rem; font-weight: bold; color: #7d7d77; time { font-size: inherit; } } .post-entry-title { font-size: 26px; } .post-entry-content { font-size: 16px; } .posted-in { font-size: 15px; font-weight: bold; color: #7d7d77; } } .layout-4 { &.has-post-thumbnail { &:nth-child(odd) { .post-thumbnail { right: 0; } .post-entry__inners { margin-right: auto; } } &:nth-child(even) { .post-thumbnail { left: 0; } .post-entry__inners { margin-left: auto; } } .post-entry__inners { margin-top: 100px; } } } .post-entry { .layout-4 & { position: relative; overflow: hidden; &__inners { border-radius: 12px; box-shadow: 4px 5px 8px 0px #29292952; display: flex; padding: 50px 60px; flex-direction: column; justify-content: space-evenly; flex-wrap: wrap; width: 90%; min-height: 400px; background-color: #fff; border: 1px solid rgb(207, 207, 207); margin-top: 100px; } } } .layout-4 .entry-meta-top ul.top-entry-meta-2, .layout-4 .entry-meta-top ul.top-entry-meta-3, .layout-4 .entry-meta-bottom ul.bottom-entry-meta-2, .layout-4 .entry-meta-bottom ul.bottom-entry-meta-3 { border-bottom: none; justify-content: flex-start; margin-left: 0; margin-right: 0; font-weight: bold; color: #7d7d7d; } @media only screen and (min-width: 940px) { .layout-4 { .post-entry__inners { width: 60%; } .post-thumbnail { width: 60% !important; } } } /*------------------------------------* Stylish Wide *------------------------------------*/ .entry-layout-5 .post-entry { display: flex; &:not(:first-child) { margin-top: 80px; } &:last-child { margin-bottom: 50px; } } .entry-layout-5 .blog-entry { &:not(:first-child) { margin-top: 50px; } } .layout-5 .post-entry__inners { .post-entry-title { font-size: 26px; } .post-entry-content { font-size: 16px; } } .layout-5 { &.has-post-thumbnail { position: relative; display: flex; flex-direction: column; justify-content: flex-end; align-items: flex-end; min-height: 500px; .post-entry__inners { margin-top: 100px; background-color: #fff; width: 66%; } &:nth-child(odd) { .post-entry__inners { align-self: flex-end; margin-left: auto; padding: 40px 10px 10px 70px; } .post-author-avatar { align-self: flex-start; margin-top: 40px; margin-right: auto; margin-left: 40px; img.avatar { border-radius: 50%; border: 2px solid #7d7d7d; } } } &:nth-child(even) { .post-entry__inners { align-self: flex-start; margin-right: auto; padding: 40px 70px 10px 10px; } .post-author-avatar { align-self: flex-end; margin-top: 40px; margin-right: 40px; margin-left: auto; img.avatar { border-radius: 50%; border: 2px solid #7d7d7d; } } } } } .layout-5__thumbnail { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-size: cover; background-position: center; z-index: -1; } .layout-5 .entry-meta-top ul.top-entry-meta-2, .layout-5 .entry-meta-top ul.top-entry-meta-3, .layout-5 .entry-meta-bottom ul.bottom-entry-meta-2, .layout-5 .entry-meta-bottom ul.bottom-entry-meta-3 { border-bottom: none; justify-content: flex-start; margin-left: 0; margin-right: 0; font-weight: bold; color: #7d7d7d; } /* @media only screen and (min-width: 940px) { .layout-5 { .post-entry__inners { width: 60%; } .post-thumbnail { width: 60% !important; } } } */