/*TEXT ANIMATIONS*/
@keyframes text-clip-up {
  from {
    clip-path: polygon(0% 100%, 100% 100%, 100% 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes text-clip-down {
  from {
    clip-path: polygon(100% 0%, 0% 0%, 0% 0%, 100% 0%);
  }
  to {
    clip-path: polygon(100% 100%, 0 100%, 0 0, 100% 0);
  }
}
@keyframes text-clip-right {
  from {
    clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes text-clip-left {
  from {
    clip-path: polygon(100% 100%, 100% 100%, 100% 0%, 100% 0%);
  }
  to {
    clip-path: polygon(100% 100%, 0% 100%, 0% 0%, 100% 0%);
  }
}
@keyframes image-in {
  from {
    clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
  }
  to {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}
@keyframes opacity {
	from {
		opacity: 0;
	}
	to {
		opacity: 1;
	}
}
@keyframes translatey {
	from {
		transform: translateY(50px);
		opacity: 0;
	}
	to {
		transform: translateY(0%);
		opacity: 1;
	}
}

.animated.opacity, .animated.clip-up, .animated.clip-right, .animated.clip-down, .animated.clip-left {
  opacity: 0;
  transition: all .8s ease-out;
}

.animated.start.opacity {
 animation: opacity .75s ease-out both!important;
}
.animated.translatex {
  transform: translateX(20px);
}
.animated.start.translatex {
  transform: translateX(0px);
}
.animated.translatex-right {
  transform: translateX(-20px);
}
.animated.start.translatex-right {
  transform: translateX(0px);
}
.animated.translatey.start {
	 animation: translatey .75s ease-out both;
}
.animated.clip-up.start {
  animation: text-clip-up 1.5s ease-out both;
  opacity: 1;
}
.animated.clip-down.start {
  animation: text-clip-down 1.5s ease-out both;
  opacity: 1;
}
.animated.clip-right.start {
  animation: text-clip-right 1.5s ease-out both;
  opacity: 1;
}
.animated.clip-left.start {
  animation: text-clip-left 1.5s ease-out both;
  opacity: 1;
}
.start.delay-100 {
	animation-delay: .1s!important;
}
.start.delay-200 {
	animation-delay: .2s!important;
}
.start.delay-300 {
	animation-delay: .3s!important;
}
.start.delay-400 {
	animation-delay: .4s!important;
}