.view-blog-category {
  .content-left {
    .blog-image-1 {
      margin-bottom: 6%;
      .image-1 {
        width: 100%;
        height: 450px;
        overflow: hidden;
        margin-bottom: 3%;
        div {
          width: 100%;
          height: 100%;
          padding-bottom: calc(100% * 450 / 892);
          position: relative;
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
          }
        }
      }
      .evaluate {
        display: flex;
        font-size: 18px;
        margin-bottom: 3%;

        @media (max-width: 575.98px) {
          font-size: 14px;
          justify-content: flex-start;
          align-items: center;
          flex-flow: row wrap;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          font-size: 14px;
          justify-content: flex-start;
          align-items: center;
          flex-flow: row wrap;
        }
        .icon-1 {
          margin-right: 3%;
          @media (max-width: 575.98px) {
            width: 50%;
            margin-bottom: 10px;
            margin-right: 0;
          }
          i {
            color: #277aeb;
          }
          span {
            color: #959697;
          }
        }
      }
      .content-blog-image {
        margin-bottom: 3%;
        .title {
          margin-bottom: 2%;
          h3 {
            color: #161617;
            font-weight: bold;
          }
        }
        .content {
          color: #7a7b7d;
          @media (max-width: 575.98px) {
            font-size: 18px;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            font-size: 18px;
          }
        }

      }
      .btn-read-more {
        button {
          width: 15%;
          height: 45px;
          background: #1d73ea;
          font-weight: bold;
          border: none;
          color: #fff;
          font-weight: bold;
          @media (max-width: 575.98px) {
            width: unset;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: unset;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            width: unset;
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            width: unset;
          }
          }
        button:hover {
          background: #005cbf;
        }
      }
    }
    .blog-slider {
      width: 100%;
      margin-bottom: 6%;
      .wrapper-slider {
        width: 100%;
        height: 450px;;
        position: relative;
        margin-bottom: 3%;
        @media (max-width: 575.98px) {
          height: 60%;
          margin-bottom: 2%;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          height: 70%;
          margin-bottom: 2%;
        }
        @media (min-width: 768px) and (max-width: 991.98px) {
          height: 80%;
          margin-bottom: 2%;
        }
        @media (min-width: 992px) and (max-width: 1199.98px) {
          height: 80%;
          margin-bottom: 2%;
        }
        .block-slider {
          width: 100%;
          height: 100%;
          .image {
            width: 100%;
            height: 100%;
            overflow: hidden;
            div {
              width: 100%;
              height: 100%;
              padding-bottom: calc(100% * 450 / 892);
              position: relative;
              @media (max-width: 575.98px) {
                padding-bottom: calc(100% * 6 / 10);
              }
              @media (min-width: 576px) and (max-width: 767.98px) {
                padding-bottom: calc(100% * 7 / 10);
              }
              @media (min-width: 768px) and (max-width: 991.98px) {
                padding-bottom: calc(100% * 8 / 10);
              }
              @media (min-width: 992px) and (max-width: 1199.98px) {
                padding-bottom: calc(100% * 8 / 10);
              }
              img {
                width: 100%;
                height: 100%;
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                object-fit: cover;
                object-position: center;
              }
            }
          }
        }
        .next, .prev {
          position: absolute;
          top: 50%;
          transform: translateY(-50%);
          z-index: 99;
          cursor: pointer;
          i {
            background: rgba(119, 113, 109, 0.47);
            padding: 70% 70%;
            color: #fff;
          }
        }
        .next {
          right: 70px;
          @media (max-width: 575.98px) {
            right: 40px;
          }
        }
        .prev {
          left: 50px;
          @media (max-width: 575.98px) {
            left: 25px;
          }
        }
      }
      .evaluate {
        display: flex;
        font-size: 18px;
        margin-bottom: 3%;
        @media (max-width: 575.98px) {
          font-size: 14px;
          justify-content: flex-start;
          align-items: center;
          flex-flow: row wrap;
        }
        @media (min-width: 576px) and (max-width: 767.98px) {
          font-size: 14px;
          justify-content: flex-start;
          align-items: center;
          flex-flow: row wrap;
        }
        .icon-1 {
          margin-right: 3%;
          @media (max-width: 575.98px) {
            width: 50%;
            margin-bottom: 10px;
            margin-right: 0;
          }
          i {
            color: #277aeb;
          }
          span {
            color: #959697;
          }
        }
      }
      .content-blog-image {
        margin-bottom: 3%;
        .title {
          margin-bottom: 2%;
          h3 {
            color: #161617;
            font-weight: bold;
          }
        }
        .content {
          color: #7a7b7d;
          @media (max-width: 575.98px) {
            font-size: 18px;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            font-size: 18px;
          }
        }

      }
      .btn-read-more {
        margin-bottom: 3%;
        button {
          width: 15%;
          height: 45px;
          background: #1d73ea;
          font-weight: bold;
          border: none;
          color: #fff;
          font-weight: bold;
          @media (max-width: 575.98px) {
            width: unset ;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            width: unset;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            width: unset;
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            width: unset;
          }
          }
        button:hover {
          background: #005cbf;
        }
      }
    }
  }
  .content-right {
    padding-left: 5%;
    h3 {
      font-size: 22px;
      font-weight: bold;
    }
    .btn-search {
      h3 {
        margin-bottom: 8%;
      }
      .search-text {
        position: relative;
        margin-bottom: 20%;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-bottom: 30%;
        }
          input {
          width: 100%;
          height: 48px;
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
          text-align: left;
          border-radius: 5px;
          border: none;
          background: #fff;
          font-size: 17px;
        }
        i {
          position: absolute;
          right: 8%;
          top: 50%;
          transform: translateY(-50%);
          font-size: 17px;
        }
      }

    }
    .categories {
      margin-bottom: 15%;
      @media (min-width: 992px) and (max-width: 1199.98px) {
        margin-bottom: 30%;
      }
      h3 {
        margin-bottom: 5%;
      }
      .cat-hotel {
        border-bottom: 1px solid #dae5f3;
        padding: 4% 0;
        i {
          font-size: 12px;
          color: #b0b0b0;
        }
        span {
          font-size: 20px;
        }
      }
      .hotel-tour {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .real-eststes {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .properties {
        display: flex;
        flex-direction: column;
        span {
          padding: 5% 0;
        }
      }
      .restaurant {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .tool-tips {
        display: flex;
        position: relative;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
      }
      .others {
        display: flex;
        position: relative;
        border-bottom: none;
        i {
          position: absolute;
          top: 50%;
          right: 0;
          transform: translateY(-50%);
        }
        span {

        }
      }
    }
    .latest-post {
      margin-bottom: 15%;
      h3 {
        margin-bottom: 5%;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-bottom: 15%;
        }
      }
      .btn-latest-post {

        border: none;
        margin-bottom: 7%;
        @media (min-width: 992px) and (max-width: 1199.98px) {
          margin-bottom: 30%;
        }
        ul {
          margin-bottom: 9%;
          text-align: center;
          box-shadow: 0 0 1px rgba(0, 0, 0, 0.125), 0 1px 3px rgba(0, 0, 0, 0.2);
          border-radius: 5px;
          @media (min-width: 992px) and (max-width: 1199.98px) {
            margin-bottom: 20%;
          }
          //@media (min-width: 1200px) {
          //  margin-bottom: 14%;
          //}
          li {
            width: 50%;
            margin: 0;
            a {
              border: none;
              border-radius: 0;
              color: black;
              span {
                font-size: 14px;
                font-weight: bold;
              }
            }
            #latest-tab {
              border-top-left-radius: 5px;
              border-bottom-left-radius: 5px;
            }
            #popular-tab {
              border-top-right-radius: 5px;
              border-bottom-right-radius: 5px;
            }
            a:focus, a:hover {
              color: black;
            }
          }
        }
        .nav-tabs > li > a {
          margin-right: 0;
        }
        .nav-tabs > li.active > a, .nav-tabs > li.active > a:focus, .nav-tabs > li.active > a:hover {
          color: #fff;
          background-color: #1d73ea;
        }

      }
      .image-blog-post {
        display: flex;
        margin-bottom: 4%;
        justify-content: flex-start;
        align-items: center;
        .image-hotel {
          width: 30%;
          height: 77px;
          overflow: hidden;
          margin-bottom: 3%;
          @media (max-width: 575.98px) {
            height: 100%;
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            height: 100%;
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            height: 100%;
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            height: 100%;
          }
          div {
            width: 100%;
            height: 100%;
            padding-bottom: calc(100% * 77 / 85);
            position: relative;
            @media (max-width: 575.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            @media (min-width: 576px) and (max-width: 767.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            @media (min-width: 768px) and (max-width: 991.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
            @media (min-width: 992px) and (max-width: 1199.98px) {
              padding-bottom: calc(100% * 1 / 1);
            }
              img {
              width: 100%;
              height: 100%;
              position: absolute;
              top: 50%;
              left: 50%;
              transform: translate(-50%, -50%);
              object-fit: cover;
              object-position: center;
              border-radius: 7px;
            }
          }
        }
        .content-hotel {
          margin: 5% 8%;
          width: 50%;
          @media (min-width: 992px) and (max-width: 1199.98px) {
            width: 55%;
          }
          h4 {
            font-weight: bold;
            margin-bottom: 2%;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              font-size: 15px;
            }
            }
          .date-blog {
            font-size: 18px;
            @media (min-width: 992px) and (max-width: 1199.98px) {
              font-size: 14px;
            }
            i {
              color: #277aeb;
            }
            span {
              color: #959697;
            }
          }
        }
      }
    }
    .archives {
      margin-bottom: 15%;
      h3 {
        margin-bottom: 5%;
      }
      .month {
        border-bottom: 1px solid #e4edf8;
        padding: 5%;
        i {
          font-size: 18px;
          color: #b0b0b0;
          margin-right: 5%;
        }
        span {
          font-size: 20px;
        }

      }
      .april {
        border: none;
      }
    }
    .instagram {

      h3 {
        margin-bottom: 5%;
      }
      .img-insta {
        width: 100%;
        height: 100%;
        margin-bottom: 15%;
        position: relative;

        div {
          width: 100%;
          height: 100%;
          position: relative;
          padding-bottom: calc(100% * 1 / 1);
          img {
            width: 100%;
            height: 100%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover;
            object-position: center;
            border-radius: 5px;
          }
        }
        .icon-insta {

          transition: .5s ease;
          opacity: 0;
          position: absolute;
          left: 50%;
          transform: translate(-50%, -50%);
          -ms-transform: translate(-50%, -50%);
          text-align: center;
          top: 85%;
          @media (max-width: 575.98px) {
            i {
              font-size: 40px;
            }
          }
          @media (min-width: 576px) and (max-width: 767.98px) {
            i {
              font-size: 55px;
            }
          }
          @media (min-width: 768px) and (max-width: 991.98px) {
            i {
              font-size: 70px;
            }
          }
          @media (min-width: 992px) and (max-width: 1199.98px) {
            top: 70%;
            i{
              font-size: 15px;
            }
          }
          }
      }
      .insta-1 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-2 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-3 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-4 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-5 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
      .insta-6 {
        position: relative;
        &:hover div {
          opacity: 0.3;
          cursor: pointer;
        }
        &:hover .icon-insta {
          opacity: 1;
          cursor: pointer;
        }
        div {
          opacity: 1;
          display: block;
          transition: .5s ease;
          backface-visibility: hidden;
        }

      }
    }
  }
}