.reveal {
  position: relative;
  opacity: 0;
  transition: 2s all ease;
}

.reveal.active {
  opacity: 1;
}

/* STORY ANIMATION */
.story__header-title {
  display: inline-block;
  opacity: 0;
  filter: blur(4px);
}

.story__header-title:nth-child(1) {
  animation: fade-in 0.8s 0.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(2) {
  animation: fade-in 0.8s 0.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(3) {
  animation: fade-in 0.8s 0.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(4) {
  animation: fade-in 0.8s 0.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(5) {
  animation: fade-in 0.8s 0.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(6) {
  animation: fade-in 0.8s 0.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(7) {
  animation: fade-in 0.8s 0.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(8) {
  animation: fade-in 0.8s 0.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(9) {
  animation: fade-in 0.8s 0.9s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(10) {
  animation: fade-in 0.8s 1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(11) {
  animation: fade-in 0.8s 1.1s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(12) {
  animation: fade-in 0.8s 1.2s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(13) {
  animation: fade-in 0.8s 1.3s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(14) {
  animation: fade-in 0.8s 1.4s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(15) {
  animation: fade-in 0.8s 1.5s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(16) {
  animation: fade-in 0.8s 1.6s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(17) {
  animation: fade-in 0.8s 1.7s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

.story__header-title:nth-child(18) {
  animation: fade-in 0.8s 1.8s forwards cubic-bezier(0.11, 0, 0.5, 0);
}

@keyframes fade-in {
  100% {
    opacity: 1;
    filter: blur(0);
  }
}

/* END STORY ANIMATION */

.divider.reveal {
  height: 1px;
  width: 0%;
  background-color: #fff;
  transition: 1s all ease;
}

.divider.reveal.active {
  width: 100%;
}

.reveal-active {
  animation: reveal-active 1.5s ease-in;
}

.slide-top-reveal, .slide-top.reveal.active {
  animation: slide-top 1.5s cubic-bezier(.25, .46, .45, .94) both;
}

.works-item:hover .overlay__content-brand {
  animation: slide-top .5s cubic-bezier(.25, .46, .45, .94) both;
}

.works-item:hover .overlay__content-description {
  animation: slide-top .8s cubic-bezier(.25, .46, .45, .94) both;
}

@media only screen and (max-width: 768px) {
  .slide-tr.reveal.active {
    animation: slide-right 1s cubic-bezier(.25, .46, .45, .94) both;
  }
}

@media only screen and (min-width: 768px) {
  .slide-tr.reveal.active {
    animation: slide-tr 1s cubic-bezier(.25, .46, .45, .94) both;
  }
}

.works-item__image.slide-right.reveal.active {
  animation: slide-right 1s cubic-bezier(.25, .46, .45, .94) both;
}

.works-item:hover .works-item__overlay-content {
  animation: scale-up-right .7s cubic-bezier(.2, .575, .565, 1.000) both;
}

@keyframes reveal-title {
  0% {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }

  100% {
    opacity: 1;
  }
}

@keyframes reveal-active {
  0% {
    opacity: 0;
  }

  100% {
    opacity: 1;
  }
}

@keyframes slide-top {
  0% {
    opacity: 0;
    transform: translateY(100px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

@keyframes slide-right {
  0% {
    transform: translateX(-200px)
  }

  100% {
    transform: translateX(0)
  }
}


@keyframes slide-tr {
  0% {
    transform: translateY(100px) translateX(-100px)
  }

  100% {
    transform: translateY(0px) translateX(0px)
  }
}

@keyframes scale-up-right {
  0% {
    transform: scale(.5);
    transform-origin: 100% 50%
  }

  100% {
    transform: scale(1);
    transform-origin: 100% 50%
  }
}