/*
Theme Name: Guideline Central Theme -- Blog
Theme URI: https://www.guidelinecentral.com/
Author: WReithmeyer
Description: Isolated Styling for Blog
Version: 1

Table of Contents:
    1.0 || VARIABLES (SCSS only)
        1.1 - GENERAL MIXINS
        1.2 - RESPONSIVE MIXINS
    2.0 || Main Styles
*/
/*******************************
 * 1.0 - VARIABLES (SCSS only) *
 ******************************/
/****************************
 * 1.2 - GENERAL MIXINS  *
 ****************************/
/****************************
 * 1.2 - RESPONSIVE MIXINS  *
 ****************************/
/**********************
 * 2.0 - Main Styles  *
 *********************/
a {
  color: #1D8FBB;
}

#blog-container {
  padding: 0;
  max-width: 100%;
  flex: 1;
  background-color: #FAFAFA;
}

#main-content > .row {
  display: block;
}

header.page-header {
  width: 100%;
  text-align: center;
  background-color: #1B6A89;
  margin-bottom: 0;
}
header.page-header h1.page-title {
  padding: 1em;
  font-size: 2em;
  color: #FFFFFF;
  line-height: 1;
  margin: 0 auto;
  max-width: 1440px;
}

#blog-list-container article {
  padding: 0;
  border: #e6e7e8 solid 1px;
  background-color: #fcfcfc;
  margin: 0 0 1em;
  border-radius: 4px;
  overflow: hidden;
  float: left;
  display: flex;
  flex-direction: column;
}
#blog-list-container article + article {
  margin-top: 1em;
}
#blog-list-container article .article-content {
  display: flex;
  flex-direction: row-reverse;
  padding: 1em;
}
@media (max-width: 800px) {
  #blog-list-container article .article-content {
    flex-direction: column;
  }
}
#blog-list-container article .article-content .post-thumbnail {
  display: block;
  margin: auto 0.5em auto 2em;
  flex: 1;
}
#blog-list-container article .article-content .post-thumbnail a {
  border: 1px solid #777;
  display: block;
  overflow: hidden;
  border-radius: 0.25em;
}
#blog-list-container article .article-content .post-thumbnail a:hover {
  border-color: #1D8FBB;
}
#blog-list-container article .article-content .post-thumbnail a img {
  padding: 0.5em;
  max-width: 250px;
}
@media (max-width: 800px) {
  #blog-list-container article .article-content .post-thumbnail {
    margin: 0 0 1em;
  }
  #blog-list-container article .article-content .post-thumbnail a {
    border: none;
  }
  #blog-list-container article .article-content .post-thumbnail a img {
    width: 100%;
    max-width: 450px;
  }
}
#blog-list-container article .article-content .post-content {
  display: flex;
  flex-direction: column;
  flex: 6;
}
#blog-list-container article .article-content .post-content .entry-header .entry-title {
  margin: 0;
  font-size: 22px;
  font-family: "Roboto", sans-serif !important;
}
#blog-list-container article .article-content .post-content .entry-header .entry-title a {
  color: #333 !important;
  font-weight: 900;
}
#blog-list-container article .article-content .post-content .entry-header .entry-meta {
  margin: 0.5em 0 0;
  text-transform: unset;
  color: #777 !important;
}
#blog-list-container article .article-content .post-content .entry-header .entry-meta > span {
  margin-right: 0.5em;
}
#blog-list-container article .article-content .post-content .entry-content {
  margin: 1em 0 0;
}
#blog-list-container article .article-content .post-content .entry-content .blog-post-read-more {
  position: relative;
  background-color: #1D8FBB;
  color: #FFFFFF;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  padding: 1em;
  border-radius: 3px;
  border: 0 #1D8FBB;
  color: #1D8FBB;
  background-color: transparent;
  border: 1px solid #1D8FBB;
  padding: 0.5em;
  margin: 0.5em 0 0;
}
#blog-list-container article .article-content .post-content .entry-content .blog-post-read-more > i {
  margin-right: 1em;
  display: inline-block;
}
#blog-list-container article .article-content .post-content .entry-content .blog-post-read-more:hover {
  background-color: rgba(29, 143, 187, 0.8);
}
#blog-list-container article .article-content .post-content .entry-content .blog-post-read-more:hover {
  background-color: #1D8FBB;
  color: #FFFFFF;
}
#blog-list-container article .entry-footer {
  padding: 0.5em;
  margin-top: auto;
  font-family: "Roboto", sans-serif !important;
  color: #888 !important;
  background-color: rgba(0, 0, 0, 0.03);
  border-top: 1px solid rgba(0, 0, 0, 0.07);
}
#blog-list-container article .entry-footer > span {
  margin-right: 0.5em;
  color: #666;
}
#blog-list-container article .entry-footer > span + span {
  margin-left: 0.5em;
}

#single-blog-post,
#blog-list-container {
  max-width: 1440px;
  margin: auto;
}
#single-blog-post .row,
#blog-list-container .row {
  margin: 0;
}
#single-blog-post .blog-post,
#single-blog-post .blog-posts,
#blog-list-container .blog-post,
#blog-list-container .blog-posts {
  padding: 3em;
  background-color: #fff;
}
#single-blog-post .blog-sidebar,
#blog-list-container .blog-sidebar {
  padding: 1.5em;
  background-color: #FAFAFA;
  box-shadow: 0 0 7px rgba(0, 0, 0, 0.14);
}
#single-blog-post .blog-sidebar > div:not(.tag-cloud),
#blog-list-container .blog-sidebar > div:not(.tag-cloud) {
  font-weight: 800;
  color: #777;
  font-size: 16px;
}
#single-blog-post .blog-sidebar ul,
#blog-list-container .blog-sidebar ul {
  list-style: none;
  margin: 0 0 1em;
  padding: 0.25em;
}
#single-blog-post .blog-sidebar ul li,
#blog-list-container .blog-sidebar ul li {
  display: block;
}
#single-blog-post .blog-sidebar ul li a,
#blog-list-container .blog-sidebar ul li a {
  border-radius: 0.25em;
  color: #1D8FBB;
  background: rgba(29, 143, 187, 0.08);
  padding: 0.25em 0.5em;
  font-weight: 600;
  display: inline-block;
  margin: 0.125em 0;
  text-decoration: none;
}
#single-blog-post .blog-sidebar ul li a:hover,
#blog-list-container .blog-sidebar ul li a:hover {
  background: rgba(29, 143, 187, 0.2);
}

#single-blog-post article {
  padding: 3em;
}
@media (max-width: 800px) {
  #single-blog-post article {
    padding: 1em;
  }
}
#single-blog-post article .post-thumbnail {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  padding-bottom: 2em;
  margin-bottom: 2em;
}
#single-blog-post article .post-thumbnail img {
  margin: auto;
  display: block;
  width: 100%;
  max-width: 600px;
}
#single-blog-post article h2, #single-blog-post article h3, #single-blog-post article h4, #single-blog-post article h5, #single-blog-post article h6 {
  font-family: "Open Sans", "Roboto", sans-serif !important;
  letter-spacing: unset;
}
#single-blog-post article h2 {
  color: #111;
  font-weight: 900;
  margin: 1.5em 0 1em;
}
#single-blog-post article h3 {
  text-decoration: underline rgba(68, 68, 68, 0.25);
  margin: 1em 0 0.5em;
}
#single-blog-post article h4, #single-blog-post article h5, #single-blog-post article h6 {
  margin: 1em 0 0.5em;
}
#single-blog-post article h5 {
  text-transform: uppercase;
  font-weight: 900;
  color: #666;
}
#single-blog-post article h6 {
  font-style: italic;
}
#single-blog-post article p {
  margin: 0;
  line-height: 1.75;
}
#single-blog-post article p + p {
  margin-top: 1em;
}
#single-blog-post article p + ul,
#single-blog-post article p + ol {
  margin-top: 1em;
}
#single-blog-post article hr {
  margin: 2em 0 calc(2em - 1px);
  display: block;
  clear: both;
  border-color: #b1e1f3;
}
#single-blog-post article ul > li, #single-blog-post article ol > li {
  margin-bottom: 0.5em;
}
#single-blog-post article ul > li > ul > li, #single-blog-post article ul > li ol > li, #single-blog-post article ol > li > ul > li, #single-blog-post article ol > li ol > li {
  margin: 0.25em;
}
#single-blog-post article .wp-block-image {
  margin: 2em 0;
}
#single-blog-post article .wp-block-image figcaption {
  font-style: italic;
  background-color: rgba(0, 0, 0, 0.05);
  padding: 1em;
}
#single-blog-post article table {
  border-spacing: 0;
  border-collapse: collapse;
  padding: 0;
  margin: 0;
  border: 2px solid rgba(0, 0, 0, 0.2);
}
#single-blog-post article table thead tr th, #single-blog-post article table thead tr td {
  padding: 1em;
  background-color: #1B6A89;
  color: #fff;
}
#single-blog-post article table thead tr th + th, #single-blog-post article table thead tr th + td, #single-blog-post article table thead tr td + th, #single-blog-post article table thead tr td + td {
  border-left: 2px solid rgba(0, 0, 0, 0.2);
}
#single-blog-post article table tbody tr td {
  padding: 1em;
}
#single-blog-post article table tbody tr td + td {
  border-left: 2px solid rgba(0, 0, 0, 0.2);
}
#single-blog-post article table tbody tr + tr td {
  border-top: 2px solid rgba(0, 0, 0, 0.2);
}
#single-blog-post article table tbody tr:nth-of-type(even) {
  background-color: rgba(0, 0, 0, 0.05);
}
#single-blog-post .entry-meta {
  padding: 0.7em;
  background-color: rgba(0, 0, 0, 0.05);
  font-size: 10pt !important;
  text-transform: unset;
  color: #777 !important;
  border-radius: 0.25em;
  margin: 0 0 1em;
}
#single-blog-post .entry-meta > span {
  display: block;
}
#single-blog-post .entry-meta > span + span {
  margin-top: 0.5em;
}