//blog
.single-blog-article{
  .article-heading{
    span {
      font-size: 12px;
      color: $gray-500;
    }
  }
  .border-shape{
    width: 100px;
    height: 2px;
    position: relative;
    z-index: 1;
    display: block;
    &:before{
      content : "";
      position: absolute;
      left    : 0;
      bottom  : 0;
      height  : 2px;
      width   : 50%;
      border-bottom: 2px solid $primary;
    }
  }
  p{
    color: $body-color;
  }
  .article-footer{
    .article-comments, .article-user{
      font-size: 12px;
      color: $gray-500;
    }
    .article-user{
      span{
        width: 22px;
        height: 22px;
        line-height: 22px;
        text-align: center;
        background: $accent;
        color: $white;
        border-radius: 4px;
      }
    }
  }
}

//blog single page
.row-post-thumbnail .post {
  border: 0;
  padding-bottom: 25px;
  margin-bottom: 25px;
}
.post {
  border-bottom: 1px solid $border-color;
  padding: 0 0 35px;
  margin: 0 0 45px;
}

.post-preview {
  padding-bottom: 5px;
  border-radius: .1875rem;
  transition: all .3s ease-in-out;
}

.post-preview img {
  border-radius: .1875rem;
  width: 100%;
  display: block;
}

.post-header {
  margin: 15px 0 20px;
}
.post-header .post-title {
  font-size: 1.5625rem;
  margin-bottom: 0;
  color: $body-color;
}
.post-header .post-title a{
  color: #5d5d5d;
}
.post-header .post-title a:hover{
  color: $accent;
}
.post-meta {
  list-style: none;
  font-size: .8125rem;
  padding: 0;
  margin: 0;
}
.post-meta a, .post-meta li{
  color: #495057;
  opacity: 0.8;
}
.post-meta li i{
  color: $accent;
}
.post-meta a:hover{
  color: $accent;
  opacity: 1;
}
.post-meta > li {
  position: relative;
  display: inline-block;
  padding: 0 14px 0 0;
  margin: 0 14px 0 0;
}

.post-meta > li:not(:last-child):after {
  position: absolute;
  content: '/';
  right: -5px;
  top: 0;
}

.post-content p{
  margin-bottom: 5px;
}
.post-more a span{
  vertical-align: middle;
}

.post-footer{
  margin-top: 15px;
}

/*blog single css*/
.post-content blockquote {
  border-left: 2px solid $body-color;
  padding: 10px 0 10px 40px;
  margin: 40px 0;
  transition: all .3s ease-in-out;
}
.post-content blockquote:hover {
  border-color: $accent;
}
.blockquote {
  font-weight: 500;
  color: $gray-900;
}
.post-content ol {
  list-style-type: decimal;
}
.post-content ul, .post-content ol {
  margin: 15px 0 15px 40px;
  padding: 0;
}

/*comments css*/
.comment, .comment-shop {
  border-bottom: 1px solid #f0f0f0;
  padding: 30px 0 0;
}
.comment-author, .comment-author-shop {
  margin: 5px 0 0;
  height: 64px;
  width: 64px;
  float: left;
}

.comment-body, .comment-body-shop {
  position: relative;
  padding: 0 0 30px;
  margin: 0 0 0 85px;
}
.comment-meta, .comment-meta-shop {
  margin: 0 0 15px;
}
.comment-meta-date{
  font-size: 13px;
}
.children > .comment, .children > .comment-shop {
  border: 0;
  border-top: 1px solid #f0f0f0;
  margin-left: 85px;
}
.comment-meta-author a, .comment-meta-author-shop a {
  font-weight: 500;
  color: #222;
}
.comment-meta-date a, .comment-meta-date-shop a {
  color: #788487;
  opacity: .6;
}
.comment-meta-date a:hover, .comment-meta-date a:focus, .comment-meta-date-shop a:hover, .comment-meta-date-shop a:focus {
  color: $primary;
  opacity: 1;
}

.comment-reply, .comment-reply-shop {
  position: absolute;
  right: 0;
  top: 0;
  font-size: 13px;
}

.comment-reply > a, .comment-reply-shop > a {
  background: #f4f4f4;
  border-radius: .1875rem;
  padding: 5px 15px;
  display: block;
  color: #222;
}
.comment-reply > a:hover, .comment-reply > a:focus, .comment-reply-shop > a:hover, .comment-reply-shop > a:focus {
  background: $accent;
  color: $white;
}

.comment-list + .comment-respond, .comment-list-shop + .comment-respond {
  margin-top: 30px;
}



/*blog sidebar*/

.widget-search {
  padding: 0;
  border: 0;
}
.widget {
  margin-bottom:50px;
}
.widget-search form {
  position: relative;
}

.widget-search .search-button {
  background-color: transparent;
  border: none;
  position: absolute;
  top: 50%;
  height: 100%;
  right: .875rem;
  transform: translateY(-50%);
  transition: all .3s ease-out;
  color: #ddd;
}
.widget-search .search-button span{
  font-size: 16px;
  line-height: 24px;
}
button, [type="button"], [type="reset"], [type="submit"] {
  -webkit-appearance: button;
}
.widget .widget-title {
  margin-bottom: 24px;
}

.widget .widget-title > h6 {
  text-transform: uppercase;
  font-family: $headings-font-family;
  letter-spacing: 1px;
  font-weight: $font-weight-semibold;
  font-size: 12px;
  margin: 0;
  color: $body-color;
}
.widget ul {
  margin-bottom: 0;
  padding: 0;
}
.widget-categories ul li:first-child, .widget-recent-entries ul li:first-child, .widget-recent-entries-custom ul li:first-child {
  padding-top: 0;
}
.widget-categories ul li, .widget-recent-entries ul li, .widget-recent-entries-custom ul li {
  border-bottom: 1px solid $border-color;
  padding: 10px 0;
  margin: 0;
}
.widget a {
  color: $body-color;
  display: block;
  font-family: $headings-font-family;
  font-size: 14px;
  text-align: left;
  line-height: 22px;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.widget a:hover{
  color: $accent;
}
.widget-recent-entries-custom .wi {
  float: left;
  width: 100px;
}
.widget-recent-entries-custom .wb {
  padding-left: 16px;
  width: 100%;
}
.widget-recent-entries-custom .wi, .widget-recent-entries-custom .wb {
  vertical-align: middle;
  display: table-cell;
}
.post-date {
  font-size: 12px;
  color: $gray-600;
  display: block;
  margin: 0;
}
.tag-cloud > a, .post-tags > a {
  background: $gray-100;
  border-radius: .1875rem;
  position: relative;
  display: inline-block;
  padding: 6px 15px;
  margin: 5px 8px 5px 0;
  text-transform: uppercase;
  font-size: 10px !important;
  color: #222;
  font-weight: $font-weight-medium;
  font-family: $headings-font-family;
}
.tag-cloud > a:hover, .post-tags > a:hover {
  background: $accent;
  color: $white;
  opacity: 1;
}


//blog quote

blockquote {
  quotes: "“" "”";

  p {
    text-indent: -0.42em;

    &:before {
      content: open-quote;
    }

    &:after {
      content: no-close-quote;
    }

    &:last-of-type {
      margin-bottom: 0;

      &:after {
        content: close-quote;
      }

    }

  }

}


//pagination
.custom-pagination-nav{
  ul{
    li{
      text-align: center;
      margin-right: 10px;
      &:focus, a:focus{
        outline: none;
        box-shadow: none;
      }
      a.page-link{
        width: 35px;
        height: 35px;
        line-height: 33px;
        border-radius: 100%;
        padding: inherit;
        font-family: $headings-font-family;
        font-weight: $font-weight-semibold;
        color: $primary;
        &:hover{
          background: $primary;
          color: $white;
        }
      }
      &.page-item:first-child .page-link,  &.page-item:last-child .page-link{
        border: none;
        background: transparent;
        &:hover{
          color: $primary;
        }
      }
      &.page-item.active .page-link{
        background: $primary;
        border-color: $primary;
      }
    }
  }
}