/* data-aos */
[data-aos="example-anim2"] {
  background: black;
  transition-property: background;
}

[data-aos="example-anim2"].aos-animate {
  background: red;
}

[data-aos="example-anim3"] {
  transform: rotate(360deg);
  opacity: 0;
  transition-property: transform, opacity;
}
[data-aos="example-anim3"].aos-animate {
  transform: rotate(0);
  opacity: 1;
}

/*Reveal right*/
[data-aos="reveal-right"] {
  transform: scaleX(0);
  transform-origin: 100% 0%;
  transition-property: transform;
  transition-delay: 1s;
  opacity: 0;
}
[data-aos="reveal-right"].aos-animate {
  transform-origin: 0% 100%;
  transform: scaleX(1);
  opacity: 1;
}

/*Reveal top*/

[data-aos="reveal-top"] {
  transform: scaleY(0);
  opacity: 0;
  transform-origin: 0% 100%;
  transition-property: transform;
  transition-delay: 1s;
}
[data-aos="reveal-top"].aos-animate {
  transform-origin: 100% 0%;
  transform: scaleY(1);
  opacity: 1;
}

/*Reveal left*/
[data-aos="reveal-left"] {
  transform: scaleX(0);
  transform-origin: 0% 100%;
  transition-property: transform;
  opacity: 1;
  transition-delay: 1s;
}
[data-aos="reveal-left"].aos-animate {
  transform-origin: 100% 0%;
  opacity: 0;
  transform: scaleX(1);
}

.relat-1 {
  position: relative;
  width: calc(100% - 50px);
}
.relat-1__img--left,
.relat-1__img--right {
  position: absolute;
  width: 50%;
  height: 80%;
  /* background-color: #DAC29D; */
  background-color: #000;
  z-index: 1000;
  -webkit-transition: width 0.9s ease;
  transition: width 0.9s ease;
  -webkit-transition-delay: 0.2s;
  transition-delay: 0.2s;
}
.relat-1__img--left {
  left: 0;
  top: 0;
}
.relat-1__img--right {
  right: 0;
  bottom: 0;
}
.aos-animate + .relat-1__img--right,
.aos-animate ~ .relat-1__img--left {
  width: 0;
}

.relat-4 {
  position: relative;
  width: 100%;
}
.relat-4__img--left,
.relat-4__img--right {
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: #000;
  z-index: 1000;
  -webkit-transition: height 0.9s ease;
  transition: height 0.9s ease;
  -webkit-transition-delay: 0.5s;
  transition-delay: 0.5s;
}
.relat-4__img--left {
  left: 0;
  top: 0;
}
.relat-4__img--right {
  right: 0;
  bottom: 0;
}
/* .aos-animate + .relat-4__img--left {
  height: 0;
} */
/* .aos-animate + .relat-4__img--right,
.aos-animate ~ .relat-4__img--left {
  height: 0;
} */

.aos-animate ~ .relat-4__img--right {
    height: 0;

}
.aos-animate ~ .relat-4__img--left {
  height: 0;
}