.website_blog {
  padding-top: 20px;

  .blog_page_div {
    .breadcrumb {
      background-color: $white !important;
      margin-bottom: 30px;

      .breadcrumb-item,
      .text-truncate,
      .active {
        padding-left: 15px;
        position: relative;
        margin-right: 8px;

        a,
        span {
          color: $black-color;
          font-family: $main-font;
          font-weight: 400;
          font-size: 14px;
          line-height: 106.2%;
          padding: 0;
          text-decoration: none;
        }
      }

      .breadcrumb-item,
      .text-truncate.active {
        position: relative;

        &:before {
          content: '\1433';
          color: $black-color;
          position: absolute;
          left: 0;
        }

        &:first-child {
          &:before {
            display: none;
          }
        }
      }
    }

    .blogs_btn_div {
      width: 100%;
      display: flex;
      justify-content: space-between;
      margin-bottom: 35px;

      .blogs_btn {
        display: flex;
        align-items: center;
        text-decoration: none;

        .blogs_btn_name {
          color: $black-color;
          font-family: $main-font;
          font-weight: 700;
          font-size: 16px;
          line-height: 106.2%;
          position: relative;
          @media(max-width: 1199px) {
            display: none;
          }

          &:after {
            background: none repeat scroll 0 0 transparent;
            bottom: -4px;
            content: "";
            display: block;
            height: 1px;
            left: 50%;
            position: absolute;
            transition: width 0.3s ease 0s, left 0.3s ease 0s;
            width: 0;
          }

          &:hover {
            &:after {
              background: #000000;
              width: 100%;
              left: 0;
              bottom: -4px;
              content: "";
              display: block;
              height: 1px;
              position: absolute;
              transition: width 0.3s ease 0s, left 0.3s ease 0s;
            }
          }
        }
      }

      .blogs_btn_prev {
        svg {
          margin-right: 10px;
        }
      }

      .blogs_btn_next {
        svg {
          margin-left: 10px;
        }
      }
    }

    .blog_page_container {
      height: max-content;
      position: relative;
      padding-left: 30px;
      margin-bottom: 20px;

      &:before {
        position: absolute;
        content: '';
        background-color: $yellow-color;
        width: 10px;
        height: 100%;
        left: 0;
        top: 0;
      }

      .o_wblog_post_title {
        font-size: 36px;
        line-height: 130%;
        color: $black-color;
        font-family: $main-font;
        font-weight: 700;
        margin-bottom: 20px;
        @media(max-width: 1199px) {
          font-size: 18px;
          line-height: 130%;
        }
      }

      .o_not_editable.align-items-center.position-relative {
        margin-bottom: 12px;

        div {
          .img {
            display: none;
          }
        }

        .font-weight-bold {
          display: flex;
          flex-direction: column-reverse;

          span {
            address {
              div {
                span {
                  color: $black-color;
                  font-family: $main-font;
                  font-size: 24px;
                  line-height: 130%;
                  font-weight: 400;
                  @media(max-width: 1199px) {
                    font-size: 18px;
                  }
                }
              }
            }
          }

          small {
            font-size: 18px;
            line-height: 130%;
            color: $light-grey-color;
            font-family: $main-font;
            font-weight: 400;
            margin-bottom: 10px;
            @media(max-width: 1199px) {
              font-size: 16px;
            }
          }
        }
      }

      .blog_page_share {
        display: flex;
        align-items: center;
        font-family: $main-font;
        color: $light-grey-color;
        font-size: 14px;
        line-height: 106.2%;

        svg {
          margin-right: 7px;
        }
      }

      .blog_page_share_container {
        display: flex;
        margin-top: 22px;
        @media(max-width: 1199px) {
          justify-content: center;
        }

        .blog_page_share_btn {
          border: none;
          background-color: transparent;
          cursor: pointer;
          display: flex;
          align-items: center;
          color: #7C7C7C;
          font-family: $main-font;
          font-size: 14px;
          line-height: 106.2%;

          .blog_page_share_btn_span {
            margin-left: 7px;
          }

          &:focus,
          &:active {
            border: none;
          }

          &:hover {
            svg {
              transform: scale(1.2);
            }
          }
        }

        #blog_page_share_header_links_list {
          margin-left: 10px;
          height: 24px;
          display: none;
        }

        .blog_page_share_links_item {
          display: inline-block;
          margin-right: 5px;
        }
      }
    }
  }

  #o_wblog_post_top {

    .blog_header {
      width: 100%;
      //max-height: 300px;
      //height: 100%;
      @media(max-width: 1199px) {
        max-height: 140px;
      }

      .o_half_screen_height, .cover_mid {
        width: 100% !important;
        min-height: 32vh !important;
        height: 100%;
        @media(max-width: 1199px) {
          min-height: 17vh !important;
          height: 140px;
        }
      }
    }
  }

  #o_wblog_post_main {
    margin-top: 40px;
    @media(min-width: 1200px) {
      padding-left: 200px;
      padding-right: 200px;
    }

    .o_container_small {
      .d-flex {
        #o_wblog_post_content {
          .breadcrumb {
            display: none;
          }

          .o_wblog_post_content_field {
            p {
              font-size: 16px;
              font-family: $main-font;
              color: $black-color !important;
              font-weight: 400;
              text-align: left;
              margin-bottom: 10px;
            }
          }

          .css_editable_mode_hidden {
            display: none !important;
          }

          .o_not_editable.align-items-center.position-relative {
            margin-bottom: 8px;
            margin-top: 40px;

            div {
              .img {
                display: none;
              }
            }

            .font-weight-bold {
              display: flex;
              flex-direction: column-reverse;

              span {
                address {
                  div {
                    span {
                      color: $black-color;
                      font-family: $main-font;
                      font-size: 24px;
                      line-height: 130%;
                      font-weight: 400;
                    }
                  }
                }
              }

              small {
                display: none;
              }
            }
          }

          .blog_page_share {
            display: flex;
            align-items: center;
            font-family: $main-font;
            color: $light-grey-color;
            font-size: 14px;
            line-height: 106.2%;

            svg {
              margin-right: 7px;
            }
          }
        }
      }
    }

    .blog_page_share_container {
      display: flex;
      margin-top: 22px;
      @media(max-width: 1199px) {
        justify-content: center;
      }

      .blog_page_share_btn {
        border: none;
        background-color: transparent;
        cursor: pointer;
        display: flex;
        align-items: center;
        color: #7C7C7C;
        font-family: $main-font;
        font-size: 14px;
        line-height: 106.2%;

        .blog_page_share_btn_span {
          margin-left: 7px;
        }

        &:focus,
        &:active {
          border: none;
        }

        &:hover {
          svg {
            transform: scale(1.2);
          }
        }
      }

      #blog_page_share_body_links_list {
        margin-left: 10px;
        height: 24px;
        display: none;
      }

      .blog_page_share_links_item {
        display: inline-block;
        margin-right: 5px;
      }
    }
  }

  #o_wblog_post_footer {
    .mt-5 {
      display: none !important;
    }
  }
}