/* wrapper element */
.sa-reviews {
  max-width: 950px;
  position: relative;
}
.sa-reviews::before,
.sa-reviews::after {
  opacity: 0;
  transition: opacity .3s linear;
  pointer-events: none;
}
.sa-reviews::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background: rgba(255,255,255,.8);
  display: block;
  z-index: 5;
}
.sa-reviews::after {
  content: '\f110';
  font-family: 'FontAwesome';
  color: #0D4F7F;
  font-size: 5rem;
  line-height: 1;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  animation: fa-spin 2s infinite linear;
  z-index: 6;
}
.sa-reviews--loading::before,
.sa-reviews--loading::after {
  opacity: 1;
}

/* the section title */
.sa-reviews__header {
  text-align: center;
  font-size: calc(24px + (45 - 24) * ((100vw - 320px) / 880));
  color: #0055B8;
  font-weight: 700;
}
.sa-reviews__header .underline {
  border-bottom: 5px solid #FF9E18;
  display: inline-block;
  line-height: 1.1;
}
.sa-reviews__header span:not(.underline) {
  white-space: nowrap;
}
@media screen and (min-width: 768px) {
  .sa-reviews__header .underline {
    border-bottom-width: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .sa-reviews__header {
    font-size: 45px;
  }
}


/* the container box for the overall rating and breakdown by star */
.sa-reviews__overview {
  background-color: #EDEFF2;
  border-radius: 4px;
  padding: 32px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
@media screen and (min-width: 768px) {
  .sa-reviews__overview {
    padding: 32px;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
  .sa-reviews__breakdown,
  .sa-reviews__overall {
    flex-basis: 48%;
  }
}

/* overall rating */
.sa-reviews__overall {
  text-align: center;
  color: #4A4A4A;
  font-family: "Montserrat", sans-serif;
}
.sa-reviews__star-rating-wrapper {
  position: relative;
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 2.8rem;
  line-height: 1;
  margin-bottom: 1rem;
}
.sa-reviews__star-rating-wrapper::before {
  content: "\f005  \f005  \f005  \f005  \f005";
  color: #ccc;
}
.sa-reviews__star-rating-inner {
  position: absolute;
  top: 0;
  left: 0;
  white-space: nowrap;
  overflow: hidden;
  width: 0;
}
.sa-reviews__star-rating-inner::before {
  content: "\f005  \f005  \f005  \f005  \f005";
  color: #FF9e18;
}

.sa-reviews__overall-rating {
  font-family: inherit;
  font-size: calc(18px + (22 - 18) * ((100vw - 320px) / 880));
  margin-bottom: 16px;
}
@media screen and (min-width: 768px) {
  .sa-reviews__overall-rating {
    margin-bottom: 0;
  }
}
@media screen and (min-width: 1200px) {
  .sa-reviews__overall-rating {
    font-size: 22px;
  }
}

/* reviews breakdown */
.star-breakdown {
  display: flex;
  font-family: "Montserrat", sans-serif;
  color: inherit;
  width: 100%;
  margin: 8px 0;
  position: relative;
}
.star-breakdown__star-count {
  font-weight: 700;
  font-size: calc(12px + (16 - 12) * ((100vw - 320px) / 880));
  flex-basis: 35px;
  display: flex;
  justify-content: space-between;
  margin-right: 10px;
}
.star-breakdown__star-count .fa {
  color: #4A4A4A;
  line-height: 1.3;
}
@media screen and (min-width: 1200px) {
  .star-breakdown__star-count {
    font-size: 16px;
  }
}
.star-breakdown__bar {
  flex-grow: 1;
  background-color: #DDE0E3;
  border-radius: 2px;
  overflow: hidden;
  position: relative;
}
.star-breakdown__progress {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  background-color: #FF9E18;
}
.star-breakdown__count {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 5px;
  text-align: right;
  font-size: calc(11px + (14 - 11) * ((100vw - 320px) / 880));
}
@media screen and (min-width: 768px) {
  .star-breakdown__count {
    position: relative;
    top: auto;
    bottom: auto;
    right: auto;
    text-align: left;
    flex-basis: 100px;
    margin-left: 8px;
  }
}
@media screen and (min-width: 1200px) {
  .star-breakdown__count {
    font-size: 14px;
  }
}


/* FORM */
.sa-reviews__form {
  padding: 25px 0;
  border-bottom: 1px solid #EDEFF2;
}
.sa-reviews__form select {
  border-radius: 4px;
  border: 1px solid #DDE0E3;
  padding: 15px 45px 15px 15px;
  min-width: 250px;
  font-size: 16px;
  line-height: 1;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='100' height='100' fill='%23444444'><polygon points='0,25 100,25 50,75'/></svg>") no-repeat;
  background-size: 15px;
  background-position: calc(100% - 15px) center;
  background-repeat: no-repeat;
}


/* Reviews */
.sa-review {
  padding: 2rem;
  border-bottom: 1px solid #EDEFF2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  flex-direction: column;
}
.sa-review__meta {
  flex: 1 0 25%;
}
.sa-review__review {
  flex: 1 0 75%;
}
@media screen and (min-width: 768px) {
  .sa-review {
    flex-direction: row;
  }
  .sa-review__review {
    padding-left: 50px;
  }
}
.sa-review[template] {
  display: none;
}

.sa-review__stars {
  position: relative;
  display: inline-block;
  font-family: 'FontAwesome';
  font-size: 2.2rem;
  line-height: 1;
  margin-bottom: 1.5rem;
}
.sa-review__stars::before {
  color: #FF9E18;
}
.sa-review__stars[data-review-stars="5"]::before {content: "\f005  \f005  \f005  \f005  \f005";}
.sa-review__stars[data-review-stars="4"]::before {content: "\f005  \f005  \f005  \f005";}
.sa-review__stars[data-review-stars="3"]::before {content: "\f005  \f005  \f005";}
.sa-review__stars[data-review-stars="2"]::before {content: "\f005  \f005";}
.sa-review__stars[data-review-stars="1"]::before {content: "\f005";}

.sa-review__name,
.sa-review__date {
  text-transform: capitalize;
  display: block;
  line-height: 1.7;
    color: #000;
font-size: 16px;
margin-top: -15px;
}

.sa-reviews__see-all {
  text-align: center;
  margin-top: 25px;
  margin-bottom: 2rem;
}
.sa-reviews__see-all .btn {
  background: #EDEFF2;
  border-radius: 0;
  padding: 16px 30px;
  text-align: center;
  font-weight: 700;
  font-family: "Open Sans", sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  color: #0055B8;
  font-size: 1.8rem;
  box-shadow: none;
}
.sa-reviews__see-all .btn:hover {
  color: #003D84;
}