/*==========
Effect
==========*/
.trigger .fx_fadeIn, .trigger.fx_fadeIn {
  -webkit-animation-name: fx_fadeIn;
          animation-name: fx_fadeIn;
}
.trigger .fx_fadeUp, .trigger.fx_fadeUp {
  -webkit-animation-name: fx_fadeUp;
          animation-name: fx_fadeUp;
}
.trigger .fx_slideLeft, .trigger.fx_slideLeft {
  -webkit-animation-name: fx_slideLeft;
          animation-name: fx_slideLeft;
}
.trigger .fx_slideRight, .trigger.fx_slideRight {
  -webkit-animation-name: fx_slideRight;
          animation-name: fx_slideRight;
}

.fx_fadeIn {
  opacity: 0;
  will-change: opacity;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes fx_fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}

@keyframes fx_fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}
.fx_fadeUp {
  opacity: 0;
  transform: translateY(40px);
  will-change: transform, opacity;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes fx_fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}

@keyframes fx_fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }
  100% {
    opacity: 1;
    transform: translateY(0px);
  }
}
.fx_slideLeft {
  will-change: transform, opacity;
  transform: translateX(-40px);
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes fx_slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fx_slideLeft {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.fx_slideRight {
  will-change: transform, opacity;
  transform: translateX(40px);
  opacity: 0;
  -webkit-animation-duration: 1s;
          animation-duration: 1s;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-timing-function: ease-in-out;
          animation-timing-function: ease-in-out;
}

@-webkit-keyframes fx_slideRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fx_slideRight {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}