.testimonials {
  margin: 2rem 0 0 0;
  background: transparent;
}

.testimonials .container-fluid {
  display: flex;
  justify-content: center;
}

.testimonials .testimonial-intro {
  max-width: 800px;
  text-align: center;
}

.testimonials .container-fluid h2 {
  font-size: 2.5rem;
  color: var(--dark-gold);
}

.testimonials-wrapper{
  margin:2rem 0;
}

/*div.testimonial:after {
  content: '';
    background: url('assets/quote-marks.svg') no-repeat;
    top: -15px;
    position: absolute;
    left: 40px;
    width: 100%;
    height: 37px;
    z-index: 1;
} */


/* When Flickity is NOT used */
.testimonials-wrapper.no-flickity {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}

/* Tweak cards a bit for static layout */
.testimonials-wrapper.no-flickity .testimonial {
  opacity: 1;             
  margin: 1rem;
  max-width: 500px;       
}

.testimonials-wrapper .testimonial {
  width: 90%;
  max-width: 900px;
  min-width:320px;
  margin: 0 2rem;
  text-align: center;
  padding: 1.5rem;
  background: var(--white-color);
  border-radius: 0.5rem;
  opacity:0.25;
  transition:opacity 0.3s;
}

.testimonials-wrapper .read-more {
  display: block;
  color: var(--main-color);
}

.testimonials-wrapper .read-more:hover {
  color: var(--second-color);
}

.testimonials-wrapper .testimonial.is-selected{
  opacity:1;
}

div.star-rating{
  display: flex;
  gap: .25rem;
  justify-content: center;
  color:#DCCA9F;
}


.testimonials-wrapper .testimonial h3 {
  font-weight: 700;
  font-size: 1.75rem;
  color: var(--main-color);
}

.testimonials-wrapper .testimonial p.bodytext {
  font-family: var(--title-font);
  font-size: 1.25rem;
  text-wrap: balance;
}


.testimonials-wrapper .testimonial p.smaller {
  font-weight: 600;
  color: var(--second-color);
  font-style: italic;
}

div.testimonial-modal-content.modal-content {
  height: auto;
  padding: 2rem;
}
div.testimonial-modal-content.modal-content .modal-body {
  text-align: left;
}

@media screen and (max-width: 1070px) {
  .testimonials-wrapper.no-flickity .testimonial {
    max-width: none;
    width: 90%;
  }
  
  .testimonials-wrapper .testimonial {
    width: 90%;
    max-width: 640px;
  } 
}

@media screen and (max-width: 800px) {
  
  .testimonials .container-fluid {
    justify-content: flex-start;
  }
  .testimonials .testimonial-intro {
    text-align: left;
  }
}