@import "../../../reusable.css";

/** Default: overlapping left **/

.image-text {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.image-text .image {
  flex-basis: 100%;
    height: 80vh;
}

.image-text .image_holder {
  background-size: cover !important;
  width: 100%;
  height: 100%;
}

.image-text-holder.image-fit-fit .image_holder {
  background-size: contain !important;
  width: 100%;
  height: 80vh;
}

.image-text .text {
  flex-basis: 60%;
  margin-left: -5%;
  padding: 1rem;
}


.image-text .text h3 {
  margin-bottom: .5em;
}

.dc4326-block-holder.accent-black .image-text .text, .dc4326-block-holder.accent-black .image-text .text h3, .dc4326-block-holder.accent-black .image-text .text p {
  background-color: var(--black);
  color: var(--white);
}

.dc4326-block-holder.accent-white .image-text .text, .dc4326-block-holder.accent-white .image-text .text h3, .dc4326-block-holder.accent-white .image-text .text p {
  background-color: var(--white);
  color: var(--black);
}

.dc4326-block-holder.accent-beige .image-text .text, .dc4326-block-holder.accent-beige .image-text .text h3, .dc4326-block-holder.accent-beige .image-text .text p {
  background-color: var(--beige);
  color: var(--black);
}

.dc4326-block-holder.accent-pink .image-text .text, .dc4326-block-holder.accent-pink .image-text .text h3, .dc4326-block-holder.accent-pink .image-text .text p {
  background-color: var(--pink);
  color: var(--white);
}




/* no bg color for offset */

.dc4326-block-holder.bg-black.style-offset_right .text, .dc4326-block-holder.bg-black.style-offset_right .text h3, .dc4326-block-holder.bg-black.style-offset_right .text p, .dc4326-block-holder.bg-black.style-offset_left .text, .dc4326-block-holder.bg-black.style-offset_left .text h3, .dc4326-block-holder.bg-black.style-offset_left .text p {
  background-color: transparent;
  color: var(--white);
}

.dc4326-block-holder.bg-white.style-offset_right .text, .dc4326-block-holder.bg-white.style-offset_right .text h3, .dc4326-block-holder.bg-white.style-offset_right .text p, .dc4326-block-holder.bg-white.style-offset_left .text, .dc4326-block-holder.bg-white.style-offset_left .text h3, .dc4326-block-holder.bg-white.style-offset_left .text p {
  background-color: transparent;
  color: var(--black);
}

.dc4326-block-holder.bg-beige.style-offset_right .text, .dc4326-block-holder.bg-beige.style-offset_right .text h3, .dc4326-block-holder.bg-beige.style-offset_right .text p, .dc4326-block-holder.bg-beige.style-offset_left .text, .dc4326-block-holder.bg-beige.style-offset_left .text h3, .dc4326-block-holder.bg-beige.style-offset_left .text p {
  background-color: transparent;
  color: var(--black);
}

.dc4326-block-holder.bg-pink.style-offset_right .text, .dc4326-block-holder.bg-pink.style-offset_right .text h3, .dc4326-block-holder.bg-pink.style-offset_right .text p, .dc4326-block-holder.bg-pink.style-offset_left .text, .dc4326-block-holder.bg-pink.style-offset_left .text h3, .dc4326-block-holder.bg-pink.style-offset_left .text p {
  background-color: transparent;
  color: var(--white);
}


/** overlapping right **/

.dc4326-block-holder.style-overlap_right .image-text {
  flex-direction: row-reverse;
}

.dc4326-block-holder.style-overlap_right .image-text .text {
  margin-right: -5%;
  margin-left: 0;
  z-index: 99;
}

/** full width **/
.dc4326-block-holder.style-full_width .image-text {
  width: 100%;
  display: block;
  position: relative;
  height: 90vh;
}

.dc4326-block-holder.style-full_width .image-text .image {
  position: absolute;
  top: 0;
  left: 100;
  height: 100%;
  width: 100%;
}

.dc4326-block-holder.style-full_width .image-text .text {
  position: absolute;
  z-index: 99;
  bottom: var(--vertical-padding);
  right: var(--vertical-padding);
  margin: 0;
  width: 30%;
}

/** offset right **/

.dc4326-block-holder.style-offset_right .image-text, .dc4326-block-holder.style-offset_left .image-text  {
  justify-content: space-between;
  align-items: flex-end;
}

.dc4326-block-holder.style-offset_right .image-text  {
  flex-direction: row-reverse;
  text-align: right;
}



.dc4326-block-holder.style-offset_right .image-text .image, .dc4326-block-holder.style-offset_left .image-text .image {
  flex-basis: 65%;
  height: 100%;
}

.dc4326-block-holder.style-offset_right .image-text .text, .dc4326-block-holder.style-offset_left .image-text .text {
  margin: 0 0 1rem 0;
  background-color: transparent;
  padding: 0;
  border: 0;
  flex-basis: calc(100% - 65% - var(--gutter));
}

.dc4326-block-holder.style-offset_right .image-text .text p, .dc4326-block-holder.style-offset_left .image-text .text p {
  font-size: .65rem;
}

@media (max-width: 1000px) {

  .dc4326-block-holder.style-full_width .image-text .text {
    width: 50%;
  }

  .dc4326-block-holder.style-offset_right .image-text .image, .dc4326-block-holder.style-offset_left .image-text .image {
    flex-basis: 50%;
  }

  .dc4326-block-holder.style-offset_right .image-text .text, .dc4326-block-holder.style-offset_left .image-text .text {
    flex-basis: calc(100% - 50% - var(--gutter));
  }

}

@media (max-width: 750px) {

  .dc4326-block-holder.style-offset_right .image-text, .dc4326-block-holder.style-offset_left .image-text {
    flex-wrap: wrap;
  }

  .dc4326-block-holder.style-offset_right .image-text .image, .dc4326-block-holder.style-offset_left .image-text .image {
    flex-basis: 100%;
    height: 50vh;
    margin-bottom: 1rem;
  }

  .dc4326-block-holder.style-offset_right .image-text .text, .dc4326-block-holder.style-offset_left .image-text .text {
    flex-basis: 100%;
    text-align: left;
  }

}

@media (max-width: 700px) {

  .dc4326-block-holder.style-full_width .image-text .text {
    width: 75%;
  }

  .image-text .image {
    flex-basis: 85%;
  }

  .dc4326-block-holder.style-overlap_left .image-text .text {
    margin-left: -25%;
  }

  .dc4326-block-holder.style-overlap_right .image-text .text {
    margin-right: -25%;
  }

}


@media (max-width: 600px) {

  .image-text {
    flex-wrap: wrap;
  }

  .image-text .image {
    flex-basis: 85%;
  }

  .dc4326-block-holder.style-overlap_left .image-text .text,
  .dc4326-block-holder.style-overlap_left .image-text .image,
  .dc4326-block-holder.style-overlap_right .image-text .text,
  .dc4326-block-holder.style-overlap_right .image-text .image {
    flex-basis: 100%;
  }

  .dc4326-block-holder.style-overlap_left .image-text .text,
  .dc4326-block-holder.style-overlap_right .image-text .text {
    margin-right: 0;
    margin-left: 0;
  }

}