root {
	--color-default: #fb9d7e;
	--rgb-default: 251, 157, 126;
	--btn-hover-default: 0 0 0 5px rgba(var(--rgb-default), 0.25);
}
/*root {
	--color-default: #f85000;
	--rgb-default: 248, 80, 0;
	--btn-hover-default: 0 0 0 5px rgba(var(--rgb-default), 0.75);
}*/
.testimonial-slider .owl-item .img-blob img{
  object-fit:cover;
  width:100%;
  height:100%;
}
.testimonial-slider{
  height:300px;
}
.testimonial-slider .items{
  position:relative;
  height:300px;
}
.testimonial-slider .larger{
  position:absolute;
  width:100%;
  top:50%;
  left:50%;
  transform:translate(-50%, -50%);
}
.testimonial-slider .img-blob{
  width:80px;
  height:80px;
}
.home-slider{
  overflow:hidden;
  position:relative;
}
.home-slider .item{
  position:relative;
  min-height: 1px;
}
.home-slider::before{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  content:'';
  background-color:#000000;
}
.home-slider img{
  width:100%;
  height:100%;
  object-fit:cover;
  opacity:0.8;
}
.home-slider .owl-stage,
.home-slider .owl-stage-outer,
.home-slider .item,
.home-slider{
  height:100vh;
}
.home-slider-content{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%, -50%);
}
.home-slider-title{
  font-size:2rem;
  color:white;
  text-shadow:0 0 4px #ffffffaa;
  line-height:1.1;
}
.home-slider-text{
  font-size:1.2rem;
  color:white;
  line-height:1.1;
}
.inner {
  padding: 3rem 20px;
}
.divider{
  /* removed this. Why is it there? The box in the svg was too big.
  transform:translateY(10px);
  /* fixed weird behavior on mid-size screens. */
}