/* ------------------------------ */
/* --------- Hover-Text --------- */
/* ------------------------------ */

.section > .section__text--hover {
  position: relative;
  z-index: 2;
  max-width: 100%;
}

.section__text--hover .text-hover {
  display: inline;
  cursor: pointer;
}

.section__text--hover h1, .section__text--hover h2 {
  margin: 0 !important;
}

.section__text--hover .text-hover span {
  position: relative;
  display: inline-block;
}

.section__text--hover .text-hover span::after {
  content: "";
  position: absolute;
}

.section__text--hover .text-hover img {
  position: absolute;
  z-index: -1;
  height: auto;
  width: auto;
  -webkit-transition: opacity .25s;
  -o-transition: opacity .25s;
  transition: opacity .25s;
  -webkit-transform: scale(0);
      -ms-transform: scale(0);
          transform: scale(0);
  opacity: 0;
  visibility: hidden;
}

.section__text--hover .text-hover img.show {
  -webkit-transform: scale(1);
  -ms-transform: scale(1);
  transform: scale(1);
}

.section__text--hover .text-hover img.is-visible {
  opacity: 1;
  visibility: visible;
}

.section > .section__text--hover.section__text--black {
  margin-top: var(--spacing-7);
  padding-top: var(--spacing-8);
  padding-bottom: calc(var(--spacing-8) + var(--spacing-1));
  color: var(--brand-white);
  background-color: var(--brand-black);
}

.section > .section__text--hover.section__text--black:first-child {
  margin-top: 0;
}

body.color-dark .section__text--hover .text-hover span::after, .section__text--hover.section__text--black .text-hover span::after {
 border-color: var(--brand-white); 
}



/* ------------------------------ */
/* -------- Media Queries ------- */
/* ------------------------------ */

@media all and (min-width: 1900px) {

  .section__text--hover .text-hover span::after {
    top: 1px;
    left: calc(-1 * var(--spacing-3));
    width: calc(100% + 2 * var(--spacing-3));
    height: 120px;
    border: 2px solid var(--brand-black);
    border-radius: 70px;
  }

  .section__text--hover .text-hover img {
    max-height: 700px;
  }

}


@media all and (max-width: 1899.98px) and (min-width: 1240px) {

  .section__text--hover .text-hover span::after {
    left: calc(-1 * var(--spacing-2));
    width: calc(100% + 2 * var(--spacing-2));
  }

  .section__text--hover .text-hover img {
    max-height: 650px;
  }

}


@media all and (max-width: 1899.98px) and (min-width: 1600px) {

  .section__text--hover .text-hover span::after {
    top: 2px;
    height: 109px;
    
  }

}


@media all and (max-width: 1599.98px) and (min-width: 1400px) {

  .section__text--hover .text-hover span::after {
    top: 1px;
    height: 101px;
  }

}


@media all and (max-width: 1399.98px) and (min-width: 1240px) {

  .section__text--hover .text-hover span::after {
    top: 0px;
    height: 96px;
  }

}


@media all and (max-width: 1239.98px) and (min-width: 992px) {

  .section__text--hover .text-hover span::after {
    top: 2px;
    left: calc(-1 * 12px);
    width: calc(100% + 2 * 12px);
    height: 82px;
  }

  .section__text--hover .text-hover img {
    max-height: 600px;
    max-width: 70%;
  }

}


@media all and (max-width: 991.98px) and (min-width: 768px) {

  .section__text--hover .text-hover span::after {
    top: 0;
    left: calc(-1 * 12px);
    width: calc(100% + 2 * 12px);
    height: 74px;
  }

  .section__text--hover .text-hover img {
    max-height: 500px;
    max-width: 70%;
  }

}


@media all and (min-width: 768px) {

  .section__text--hover .text-hover span::after {
    border: 2px solid var(--brand-black);
    border-radius: 70px;
  }

}


@media all and (max-width: 767.98px) {

  .section > .section__text--hover.section__text--black {
    padding-top: var(--spacing-7);
    padding-bottom: calc(var(--spacing-7) + var(--spacing-1));
  }

  .section__text--hover h1 {
    margin-left: -2px !important;
  }

  .section__text--hover .text-hover span::after {
    top: 1px;
    left: -8px;
    width: calc(100% + 11px);
    height: 41px;
    border: 1px solid var(--brand-black);
    border-radius: 50px;
  }


  .section__text--hover .text-hover img {
    max-height: 450px;
    max-width: 80%;
  }

}