@import "bootstrap-4.0.0/scss/_functions.scss";
@import "bootstrap-4.0.0/scss/_variables.scss";
@import "bootstrap-4.0.0/scss/mixins/_breakpoints.scss";

#reviews {
  .reviews-background {
    height: 300px;
    background-size: cover !important;
    background-position: center !important;
  }
  .spr-icon.spr-icon-star, .spr-icon.spr-icon-star-half-alt {
    font-style: normal;
    color: #F5CA59;
    margin-left: -3px;
    font-size: 14px;
    @include media-breakpoint-up(md) {
      font-size: 1vw;
    }
  }
  .reviews-summary-wrapper {
    border-bottom: 1px solid;
    margin-top: 15px;
    margin-bottom: 30px;
    .reviews-summary {
      display: flex;
      align-items: center;
      .google-logo {
        img {
          width: 100%;
        }
      }
      .title-wrapper {
        align-items: end;
        .title {
          line-height: 1;
          font-size: 22px;
        }
        .info {
          color: #555555;
          font-size: 14px;
          line-height: 1;
          font-weight: 100;
          margin-left: 5px;
          margin-bottom: 2px;
        }
      }
      .summary-data {
        .rating-wrapper {
          align-items: end;
          .average-rating {
            font-size: 18px;
            margin-right: 10px;
            @include media-breakpoint-up(md) {
              font-size: 2vw;
            }
          }
          .spr-badge {
            margin-bottom: 1px;
            @include media-breakpoint-up(md) {
              margin-bottom: 10px;
            }
          }
        }
      }
    }
    .button-block {
      .btn-primary {
        padding: 10px;
        width: 200px;
        display: block;
        text-align: center;
        text-transform: uppercase;
      }
    }
  }
  .review-items {
    margin-bottom: 40px;
  }
  .review-item {
    padding: 2%;
    margin-bottom: 20px;
    .header {
      padding-right: 9.5px;
      padding-left: 9.5px;
      margin-bottom: 10px;
      .icon-wrapper {
        margin-bottom: 10px;
        @include media-breakpoint-up(md) {
          margin-right: 10px;
        }
        .icon {
          display: block;
          height: 60px;
          width: 60px;
          margin: 0 auto;
          background-size: cover;
          background-position: center;
          border-radius: 100%;
        }
      }
      .badge {
        display: flex;
        flex-direction: column;
        width: 100%;
        @include media-breakpoint-up(md) {
          margin-top: -10px;
        }
        .name {
          font-size: 16px;
          @include media-breakpoint-up(md) {
            font-size: 18px;
          }
        }
        .spr-starrating {
          margin-top: 10px;
        }
      }
    }
    .body {
      p {
        font-size: 14px;
        font-weight: 200;
        line-height: 1.2;
        @include media-breakpoint-up(md) {
          font-size: 16px;
        }
      }
    }
    .footer {
      color: #999;
      font-weight: 100;
      .top-footer {
        display: flex;
        justify-content: space-between;
      }
    }
  }
  @include media-breakpoint-up(md) {
    #content > .container {
      padding-top: 40px;
    }
    .reviews-summary-wrapper {
      margin-top: 0 !important;
      border: 1px solid #999999;
      display: flex;
      align-items: center;
      .reviews-summary {
        .title {
          font-size: 3vw !important;
        }
        .info {
          margin-bottom: 10px;
          margin-left: 15px !important;
          font-size: 1.5vw !important;
        }
      }
    }
    .review-item {
      .header {
        display: flex;
        align-items: center;
        .badge {
          text-align: left;
        }
      }
    }
  }
}