/*******************
  HOME CLIENTS
*******************/

.home-clients {
  padding: calc(var(--gutter) * 2) 0;
  color: #fff;
}
.home-clients::before {
  content: '';
  position: absolute;
  top: -18em;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--orange);
}


.home-clients > .aside {
  z-index: 1;
  position: absolute;
  top: -6em;
  left: -1.75em;
  transform: rotate(90deg);
  transform-origin: 0 100%;
}
.home-clients > .aside > * {
  font-size: 8em;
  font-weight: 500;
  letter-spacing: -10px;
  opacity: 0;
  transition: 1s 2s;
}
  .ready .home-clients > .aside > * {
    opacity: 0.16;
  }
.home-clients > .wrapper {
  z-index: 2;
}
.featured-quote .ill {
  flex: 0 0 30em;
  padding-right: 10em;
}
.featured-quote .quote {
  margin-bottom: calc(var(--gutter) * 2);
  opacity: 0.4;
}
.featured-quote .content {
  position: relative;
  flex: 1;
  text-align: left;
  overflow: hidden;
}
.featured-quote .content::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--orange);
  transition: 1s 1s;
}
  .reveal .featured-quote .content::after {
    top: 100%;
  }
.featured-quote .the-quote {
  font-size: 3em;
  line-height: 1.25em;
}
.featured-quote .name {
  margin-top: calc(var(--gutter) * 0.5);
  margin-bottom: calc(var(--gutter) * 0.25);
  font-size: 1.8em;
  font-weight: 600;
  letter-spacing: -1px;
}

.home-clients .quotes {
  margin-top: calc(var(--gutter) * 2);
}

.quotes {
  margin-left: -3em;
  margin-right: -3em;
  width: calc(100% + 6em);
}
.quotes > * {
  flex: 0 0 33.333%;
  padding: 1em 3em;
}

.quote-box {
  position: relative;
  background: #fff;
  box-shadow: var(--boxShadow);
  padding: var(--gutter) var(--gutter) calc(var(--gutter) * 4.5) var(--gutter);
  text-align: left;
  color: var(--textColor);
  height: 100%;
  transition: 0.5s;
}
.quote-box:hover {
  box-shadow: var(--lightBoxShadow);
}
.quote-box .meta {
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.25em;
  margin-bottom: 1em;
}
.quote-box .client {
  font-size: 2.25em;
  line-height: 1.125em;
  font-weight: 700;
  letter-spacing: -1px;
}
.quote-box .the-quote {
  margin-top: calc(var(--gutter) * 1.5);
  line-height: 1.5em;
}
.quote-box .name {
  margin-top: 0.56em;
  margin-bottom: 0.5em;
  font-weight: 600;
}
.quote-box .position {
  margin-bottom: 0.75em;
}
.quote-box .logo {
  position: absolute;
  bottom: calc(var(--gutter) * 2);
  left: var(--gutter);
  width: calc(100% - (var(--gutter) * 2));
}
.quote-box .logo img {
  width: calc(var(--gutter) * 6);
  height: calc(var(--gutter) * 2);
  object-fit: contain;
  object-position: center left;
}
.quote-box .action {
  position: absolute;
  bottom: 0;
  left: 0;
  padding: var(--gutter);
}



@media screen and (max-width: 1400px) {
  .quotes {
    margin-left: -1.5em;
    margin-right: -1.5em;
    width: calc(100% + 3em);
  }
  .quotes > * { padding: 1em 1.5em; }
}
@media screen and (max-width: 1200px) {
  .featured-quote .ill { padding-right: calc(var(--gutter) * 1.5); }
}
@media screen and (max-width: 1100px) {
  .quotes > * { flex: 0 0 100%; }
}
@media screen and (max-width: 1100px) and (min-width: 701px) {
  .quote-box { padding-bottom: var(--gutter); }
  .quote-box .logo {
    bottom: auto;
    left: auto;
    top: var(--gutter);
    right: var(--gutter);
    width: 20em;
  }
  .quote-box .logo img { object-position: center right; }
  .quote-box .action { position: relative; padding: 0; margin-top: var(--gutter); }
}
@media screen and (max-width: 1000px) {
  .featured-quote .ill {
    padding-left: calc(var(--gutter) * 1.5);
    flex: 0 0 20em;
  }
  .featured-quote .the-quote {
    font-size: 2.5em;
  }
}
@media screen and (max-width: 750px) {
  .featured-quote {
    padding: 0 calc(var(--gutter) * 2);
  }
  .featured-quote .ill {
    position: absolute;
    top: -3em;
    right: calc(var(--gutter) * 0.5);
    display: block;
    width: calc(var(--gutter) * 2.5);
    padding: 0;
  }
  .featured-quote .quote {
    margin-bottom: calc(var(--gutter) * 0.5);
  }
}
@media screen and (max-width: 600px) {
  .featured-quote .ill { top: -4em; }
  .featured-quote { padding: 6em 0 0 4em; }
  .featured-quote .the-quote { font-size: 2em; }
}


/* V2022 */
.home-clients::before {
  top: -3em;
  height: calc(100% - 15em);
}