:root {
  --slide-animation-duration: .4s;
}

.layout-slide-item-animation {
  animation-fill-mode: forwards;
}

.layout-slide-item-animation.slide-in-left {
  opacity: 0;
  transform: translateX(-50px);
}

.layout-slide-item-animation.animated {
  animation-duration: var(--slide-animation-duration);
}

@keyframes slideInLeft {
  0% {
    opacity: 0;
    transform: translateX(-50px);
  }

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

.slide-in-left.animated {
  animation-name: slideInLeft;
}

.slide-in-left:not(.animated) {
  clip-path: polygon(0% 0%, 0% 0%, 0% 100%, 0% 100%);
}

.slide-in-left.animated {
  clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%);
}

.slide-in-right:not(.animated) {
  clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
}

.slide-in-right.animated {
  clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
}

.parallax-hover-item-animation {
  transform-style: preserve-3d;
  perspective: 1400px;
  height: 100%;
}

.zoom-animation-wrapper,
.zoom-animation-hover-wrapper {
  overflow: hidden;
  width: 100%;
  height: 100%;
}

.zoom-animation-inner-background {
  -webkit-backface-visibility: hidden;
  transform: translateZ(0);
  transition: transform 10s;
}

.zoom-animation-wrapper .zoom-animation-inner-background:not(.done) {
  transform: translateZ(0) scale(1.2);
}

.zoom-animation-hover-inner {
  -webkit-backface-visibility: hidden;
  transition: .5s;
}

.zoom-animation-hover-wrapper:hover .zoom-animation-hover-inner {
  transform: scale(1.2);
}