wrapper {

  .latest-featured-post {
      picture {
          height: 100% !important;
          display: block;
          overflow: hidden;
          .post_index_header_image {
              max-width: 100%;
              height: auto;
              height: 100%;
              object-fit: cover;
          }
      }
  }
  #image_header {
      height: 200px;
      overflow: hidden;
      object-fit: cover;
      .header_background_image.lazyloaded {
          object-fit: cover;
          object-position: 50% 50% !important;
          height: 200px;
          width: 100vw;
          display: block;
          position: relative;
      }
  }
.blog-content {
  .blog_content_image {
    margin: 20px 0px;
    &.small-inline {
      @include media-breakpoint-up(md) {
        width: 200px;
        display: block;
        float: left;
        margin: 0px 20px;
      }
    }
    &.medium-inline {
      @include media-breakpoint-up(md) {
        width: 300px;
        display: block;
        float: left;
        margin: 0px 20px;
      }
    }
    &.large-inline {
      @include media-breakpoint-up(md) {
        width: 400px;
        display: block;
        float: left;
        margin: 0px 20px;
      }
    }
    &.right {
      @include media-breakpoint-up(md) {
        float: right !important;
      }
    }

  }
}
#post_search {
  #results-container {
    position: absolute;
    z-index: 9999;
    background-color: white;
    width: 100%;
    border: 1px solid #eee;
    height: 300px;
    overflow: scroll;
  }
  .close_search {
    display: none;
    position: absolute;
    top: 0px;
    right: 0px;
    font-size: 26px;
    color: #000;
    line-height: 80px;
    padding-right: 10px;
    &:hover {
      text-decoration: none;
      color: $primary;
    }
  }
  .search_result_img {
    width: 100px;
  }
}
.highlighter-rouge {
  div.highlight {
    position: relative;
    pre.highlight {
      padding: 15px;
      position: relative;
    }
    .copyBtn {
      position: absolute;
      bottom: 0px;
      z-index: 9999;
      height: 40px;
      right: 0px;
      border-left: 1px solid white;
      border-top: 1px solid white;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-bottom-left-radius: 0px;
      width: 40px;
      &:hover,
      &:focus {
        background-color: $primary;
      }
    }
  }
}
.suggested_post_thumb {
  width: 100px;
  border: 1px solid lightgray;
  padding: 0;
  @include media-breakpoint-down(xs) {
    width: 100%;
  }
}
.media-body {
  h5 {
    font-size: 1.7rem;
  }
  & > a {
    color: #313131;
    &:hover {
      text-decoration: none;
    }
  }
}
.suggested_post_date {
  display: block;
}
a {
  transition: all 500ms ease-in-out;
  &:hover {
    color: $primary;
  }
}
.rounded-circle {
  width: 100px;
  height: 100px;
  transition: all 100ms ease-out;
  object-fit: cover;
  &:hover {
      transform: rotate(-5deg);
      -webkit-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
      -moz-box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
      box-shadow: 0px 0px 17px 0px rgba(0,0,0,0.75);
  }
  &.small {
    height: 50px;
    width: 50px;
    margin-right: 10px;
  }
}
.featured_post {
  .row {
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 20px 5px #f0f0f0;
    -moz-box-shadow: 0px 0px 20px 5px #e5e5e5;
    box-shadow: 0px 0px 20px 5px #ebebeb;
    margin-left: 0;
    margin-right: 0;
    padding: 0px;
    .latest-featured-post-content {
      .card {
        border-radius: 20px;
        border-top-right-radius: 0px;
        border-bottom-right-radius: 0px;
        @include media-breakpoint-down(sm) {
          border-bottom-right-radius: 20px;
          border-top-right-radius: 0px;
          border-top-left-radius: 0px;
        }
      }
    }
  }
}
.blog_image_header {
  overflow: hidden;
  position: relative;
  img {
    height: 150px;
    width: 100%;
    object-fit: cover;
  }
  &:after {
    content: "";
    display: none;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0px;
    opacity: 0.4;
    background-color: $primary;
    z-index: 0;
  }
  &:before {
    content: "Read";
    display: none;
    width: 100%;
    color: white;
    position: absolute;
    z-index: 1;
    text-align: center;
    top: 50%;
    transform: translateY(-50%);
    opacity: 1;
  }
}
.blog-post-item-col {
  .card {
    border-radius: 20px;
    overflow: hidden;
    -webkit-box-shadow: 0px 0px 20px 5px #f0f0f0;
    -moz-box-shadow: 0px 0px 20px 5px #e5e5e5;
    box-shadow: 0px 0px 20px 5px #ebebeb;
    transition: all 200ms ease;
    &:hover {
      transform: translateY(-5px);
      -webkit-box-shadow: 0px 0px 20px 5px #b3b3b3;
      -moz-box-shadow: 0px 0px 20px 5px #b3b3b3;
      box-shadow: 0px 0px 20px 5px#b3b3b3;
      .blog_image_header {
        &:before,
        &:after {
          display: block;
        }
      }
    }
  }
}

}