.thb-page-transition-on {
  opacity: 0;
  @include animation-fill-mode(both);
  .vc_editor.compose-mode &,
  .elementor-editor-active & {
  	opacity: 1;
  	@include animation(none);
  }

}
.thb-page-transition-overlay {
  position: fixed;
  top: 0;
  z-index: 500;
  width: 100%;
  height: 100%;
  background-color: #000;
  @include animation-fill-mode(both);

  .vc_editor.compose-mode & {
  	display: none;
  }
}
/* Fade In */
@include keyframes(thb-fade-in) {
	0% {
	  opacity: 0;
	}
	100% {
	  opacity: 1;
	}
}
.thb-fade-in {
	@include animation-name(thb-fade-in);
}
@include keyframes(thb-fade-out) {
	0% {
	  opacity: 1;
	}
	100% {
	  opacity: 0;
	}
}
.thb-fade-out {
	@include animation-name(thb-fade-out);
}

/* Fade Up */
@include keyframes(thb-fade-up-in) {
	0% {
		@include translateY(50px);
	  opacity: 0;
	}
	100% {
		@include translateY(0);
	  opacity: 1;
	}
}

.thb-fade-up-in {
	@include animation-name(thb-fade-up-in);
}

@include keyframes(thb-fade-up-out) {
	0% {
		@include translateY(0px);
	  opacity: 1;
	}
	100% {
		@include translateY(50px);
	  opacity: 0;
	}
}
.thb-fade-up-out {
	@include animation-name(thb-fade-up-out);
}

/* Fade Down */
@include keyframes(thb-fade-down-in) {
	0% {
		@include translateY(-50px);
	  opacity: 0;
	}
	100% {
		@include translateY(0);
	  opacity: 1;
	}
}

.thb-fade-down-in {
	@include animation-name(thb-fade-down-in);
}

@include keyframes(thb-fade-down-out) {
	0% {
		@include translateY(0px);
	  opacity: 1;
	}
	100% {
		@include translateY(-50px);
	  opacity: 0;
	}
}
.thb-fade-down-out {
	@include animation-name(thb-fade-down-out);
}

/* Swipe Left */
@include keyframes(thb-swipe-left-in) {
	0% {
		width: 100%;
	}
	100% {
		width: 0;
	}
}

.thb-swipe-left-in {
	position: fixed;
	left: 0;
	right: auto;
	width: 100%;
	@include animation-name(thb-swipe-left-in);
}

@include keyframes(thb-swipe-left-out) {
	0% {
		width: 0%;
	}
	100% {
		width: 100%;
	}
}
.thb-swipe-left-out {
	position: fixed;
	right: 0;
	width: 100%;
	@include animation-name(thb-swipe-left-out);
}