/**
 * Module: Skew
 * Filename: ca__Skew.css
 */

.skewLeft {
  animation-name: skewLeft;
}

@keyframes skewLeft {
  70% {
    transform: skewX(40deg);
  }
}

.skewRight {
  animation-name: skewRight;
}

@keyframes skewRight {
  70% {
    transform: skewX(-40deg);
  }
}

.skewInLeft {
  animation-name: skewInLeft;
}

@keyframes skewInLeft {
  0% {
    opacity: 0;
    transform: translateX(-100%) skewX(-40deg);
  }

  70% {
    transform: skewX(-30deg);
  }
}

.skewInRight {
  animation-name: skewInRight;
}

@keyframes skewInRight {
  0% {
    opacity: 0;
    transform: translateX(100%) skewX(40deg);
  }

  70% {
    transform: skewX(30deg);
  }
}

.skewOutLeft {
  animation-name: skewOutLeft;
}

@keyframes skewOutLeft {
  20% {
    transform: skewX(40deg);
  }

  100% {
    transform: translateX(-100%) skewX(40deg);
    opacity: 0;
  }
}

.skewOutRight {
  animation-name: skewOutRight;
}

@keyframes skewOutRight {
  20% {
    transform: skewX(-40deg);
  }

  100% {
    transform: translateX(100%) skewX(-40deg);
    opacity: 0;
  }
}