.block-quote {
  text-align: center;
  padding: 20vh 0 0;
  margin: 0 auto;
}
.block-quote.quote_join {
  padding: 15vh 0 10vh;
  position: relative;
  z-index: 0;
}
.block-quote.long_quote {
  padding: 15vh 0 10vh;
}
.block-quote.quote_line {
  text-align: left;
}
.block-quote blockquote {
  margin: 0 auto 4rem;
  max-width: 1000px;
  width: 90%;
}

.block-quote.quote_join .quote_photo_container {
  flex-direction: column;
}
.block-quote.quote_join .main_img {
  margin: 0 auto;
  height: 70vh;
  width: auto;
  z-index: -1;
}

.block-quote .quote_photo_container {
  display: flex;
  justify-content: center;
  align-items: center;
}
.block-quote .main_img {
  width: 40%;
  margin: auto 20% auto auto;
}
.block-quote .quote_container {
  background: #fcc19a;
  position: absolute;
  width: 33.33%;
  transform: translateX(-10vw);
}
.block-quote .quote_container h3 {
  color: #fff;
  padding: 10%;
  margin: 0;
}
.block-quote .quote_container img {
  display: block;
}

.block-quote .top_text {
  transform: translate3d(0, 20%, 0);
}
.block-quote .bottom_text {
  transform: translate3d(0, -50%, 0);
}

.block-quote.quote_line blockquote {
  position: relative;
  z-index: 1;
  color: #000;
  width: 35%;
  margin: 0 10% 20vh calc(20% + 10rem);
}
.block-quote.quote_line blockquote:before {
  content: "";
  width: 3px;
  height: 100%;
  background-color: #fcc19a;
  position: absolute;
  left: -10rem;
}
.single-project .block-quote.quote_line blockquote:before {
  background-color: var(--project-Color);
}

.block-quote blockquote.photo_bg .line {
  overflow: hidden;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100vw auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: transparent;
  background-image: var(--bg-img);
}

.block-quote blockquote.photo_bg .line_content {
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100vw auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: transparent;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  margin: 0 auto;
  transform: translate3d(0, 150%, 0);
  background-image: var(--bg-img);
}

.block-quote.quote_join blockquote.photo_bg {
  font-family: "Canela" !important;
  background: inherit;
  background-clip: text;
  -webkit-background-clip: text;
  background-size: 100vw auto;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  color: transparent;
  -webkit-transition: opacity 500ms;
  -moz-transition: opacity 500ms;
  -o-transition: opacity 500ms;
  transition: opacity 500ms;
  margin: 0 auto;
  font-size: 6rem;
  line-height: 1.5;
  font-size: clamp(3.5rem, 5.5vw, 6rem);
  background-image: var(--bg-img);
}

.block-quote blockquote.photo_bg .line_0 .line_content {
  background-position: 50% 45%;
}
.block-quote blockquote.photo_bg .line_1 .line_content {
  background-position: 50% 50%;
}
.block-quote blockquote.photo_bg .line_2 .line_content {
  background-position: 50% 55%;
}
.block-quote blockquote.photo_bg .line_3 .line_content {
  background-position: 50% 65%;
}

.is-inview.block-quote blockquote.photo_bg .line_content {
  transform: translate3d(0, 0%, 0);
  transition: transform 1s cubic-bezier(0.5, 0, 0.5, 1);
  transition-delay: calc(200ms * var(--line-index));
}

.acf-block-preview .block-quote blockquote.photo_bg {
  color: transparent;
  -webkit-background-clip: text;
  background-size: 100vw auto;
  background-image: var(--bg-img);
}

/* iPhone 6+ portrait */
@media screen and (max-width: 414px) {
  .block-quote {
    padding: 10vh 0 0;
  }
  .block-quote.quote_join,
  .block-quote.long_quote {
    padding: 10vh 0 5vh;
  }
  .block-quote.quote_line {
    padding: 15vh 0 0;
  }
  .block-quote blockquote {
    width: 80%;
    margin: 0 auto 2rem;
  }
  .block-quote blockquote.photo_bg {
    background-size: cover;
  }

  .block-quote.quote_join .quote_photo_container {
    flex-direction: column;
  }
  .block-quote.quote_join .main_img {
    width: 100%;
  }
  .block-quote.quote_join .quote_container {
    position: relative;
    width: 80%;
    margin: -8rem auto 0;
    transform: none;
  }
  .block-quote.quote_join .main_img {
    height: 50vh;
  }
  .block-quote.quote_line blockquote {
    margin: 0 10% 10vh calc(9% + 2rem);
    width: 70%;
  }
  .block-quote.quote_line blockquote:before {
    left: -2rem;
  }
}