.TextAnime .text-word{
    display: inline-block;
    width: fit-content;
}

/*Fade In Text*/

.TextAnime[data-loading='fadein']:not(.start, .done){
	opacity: 0;
}

.TextAnime[data-loading='fadein'].done:not(.start){
	opacity: 1;
}

.TextAnime[data-loading='fadein'].start:not(.done){
	-webkit-animation: fadeintext 3s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: fadeintext 3s linear forwards; /* Firefox < 16 */
    -ms-animation: fadeintext 3s linear forwards; /* Internet Explorer */
    -o-animation: fadeintext 3s linear forwards; /* Opera < 12.1 */
    animation: fadeintext 3s linear forwards;
}

@keyframes fadeintext {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Firefox < 16 */
@-moz-keyframes fadeintext {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Safari, Chrome and Opera > 12.1 */
@-webkit-keyframes fadeintext {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Internet Explorer */
@-ms-keyframes fadeintext {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Opera < 12.1 */
@-o-keyframes fadeintext {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Reveal Text*/

.TextAnime[data-loading='reveal']:not(.start, .done){
	opacity: 0;
}

.TextAnime[data-loading='reveal'].done:not(.start){
	opacity: 1;
}

.TextAnime[data-loading='reveal'].start:not(.done) {
	opacity: 1;
	-webkit-animation: revealtext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: revealtext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation: revealtext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: revealtext 1.5s linear forwards; /* Opera < 12.1 */
    animation: revealtext 1.5s linear forwards;
}

@-webkit-keyframes revealtext {
	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 revealtext {
	from 	{ clip-path: polygon(0% 0%, 0% 0%, 0%  100%, 0% 100%);		}
	to 		{ clip-path: polygon(0% 0%, 100% 0%, 100%  100%, 0% 100%);	}
}

/* Firefox < 16 */
@-moz-keyframes revealtext {
	from 	{ clip-path: polygon(0% 0%, 0% 0%, 0%  100%, 0% 100%);		}
	to 		{ clip-path: polygon(0% 0%, 100% 0%, 100%  100%, 0% 100%);	}
}

/* Internet Explorer */
@-ms-keyframes revealtext {
	from 	{ clip-path: polygon(0% 0%, 0% 0%, 0%  100%, 0% 100%);		}
	to 		{ clip-path: polygon(0% 0%, 100% 0%, 100%  100%, 0% 100%);	}
}

/* Opera < 12.1 */
@-o-keyframes revealtext {
	from 	{ clip-path: polygon(0% 0%, 0% 0%, 0%  100%, 0% 100%);		}
	to 		{ clip-path: polygon(0% 0%, 100% 0%, 100%  100%, 0% 100%);	}
}


/* Expand-in Text*/

.TextAnime[data-loading='expand']:not(.start, .done){
	transform: scale(0,0);
}

.TextAnime[data-loading='expand'].done:not(.start){
	transform: scale(1,1);
}

.TextAnime[data-loading='expand'].start:not(.done) {
	-webkit-animation: expandtext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: expandtext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation: expandtext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: expandtext 1.5s linear forwards; /* Opera < 12.1 */
    animation: expandtext 1.5s linear forwards;
}

@-webkit-keyframes expandtext {
	from { transform: scale(0,0) }
	to 	 { transform: scale(1,1) }
}

@keyframes expandtext {
	from { transform: scale(0,0) }
	to 	 { transform: scale(1,1) }
}

/* Firefox < 16 */
@-moz-keyframes expandtext {
	from { transform: scale(0,0) }
	to 	 { transform: scale(1,1) }
}

/* Internet Explorer */
@-ms-keyframes expandtext {
	from { transform: scale(0,0) }
	to 	 { transform: scale(1,1) }
}

/* Opera < 12.1 */
@-o-keyframes expandtext {
	from { transform: scale(0,0) }
	to 	 { transform: scale(1,1) }
}


/*float-in*/

.TextAnime[data-loading='floatin_right']:not(.start, .done){
	opacity:0;
	transform: translate3d(50%, 0px, 0px);
}

.TextAnime[data-loading='floatin_right'].done:not(.start){
	opacity:1;
	transform: translate3d(0px, 0px, 0px);
}


.TextAnime[data-loading='floatin_right'].start:not(.done) {
	-webkit-animation: floatin_righttext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: floatin_righttext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation: floatin_righttext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: floatin_righttext 1.5s linear forwards; /* Opera < 12.1 */
    animation: floatin_righttext 1.5s linear forwards;
}

@-webkit-keyframes floatin_righttext {
	from 	{ opacity:0; 
			transform: translate3d(50%, 0px, 0px); }
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

@keyframes floatin_righttext {
	from 	{ opacity:0; 
			transform: translate3d(50%, 0px, 0px); }
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Firefox < 16 */
@-moz-keyframes floatin_righttext {
	from 	{ opacity:0; 
			transform: translate3d(50%, 0px, 0px); }
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Internet Explorer */
@-ms-keyframes floatin_righttext {
	from 	{ opacity:0; 
			transform: translate3d(50%, 0px, 0px); }
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Opera < 12.1 */
@-o-keyframes floatin_righttext {
	from 	{ opacity:0; 
			transform: translate3d(50%, 0px, 0px); }
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

.TextAnime[data-loading='floatin_left']:not(.start, .done){
	opacity:0;
	transform: translate3d(-50%, 0px, 0px);
}

.TextAnime[data-loading='floatin_left'].done:not(.start){
	opacity:1;
	transform: translate3d(0px, 0px, 0px);
}

.TextAnime[data-loading='floatin_left'].start:not(.done) {
	-webkit-animation: floatin_lefttext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: floatin_lefttext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation: floatin_lefttext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: floatin_lefttext 1.5s linear forwards; /* Opera < 12.1 */
    animation: floatin_lefttext 1.5s linear forwards;
}

@-webkit-keyframes floatin_lefttext {
	from 	{ opacity:0; 
			transform: translate3d(-50%, 0px, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

@keyframes floatin_lefttext {
	from 	{ opacity:0; 
			transform: translate3d(-50%, 0px, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Firefox < 16 */
@-moz-keyframes floatin_lefttext {
	from 	{ opacity:0; 
			transform: translate3d(-50%, 0px, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Internet Explorer */
@-ms-keyframes floatin_lefttext {
	from 	{ opacity:0; 
			transform: translate3d(-50%, 0px, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Opera < 12.1 */
@-o-keyframes floatin_lefttext {
	from 	{ opacity:0; 
			transform: translate3d(-50%, 0px, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}


/* Rise*/

.TextAnime[data-loading='rise']:not(.start, .done){
	opacity:0;
	transform: translate3d(0%, 45%, 0px);
}

.TextAnime[data-loading='rise'].done:not(.start){
	opacity:1;
	transform: translate3d(0px, 0px, 0px);
}

.TextAnime[data-loading='rise'].start:not(.done) {
	-webkit-animation: risetext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: risetext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation:risetext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: risetext 1.5s linear forwards; /* Opera < 12.1 */
    animation: risetext 1.5s linear forwards;
}

@-webkit-keyframes risetext {
	from 	{  opacity:0; 
			transform: translate3d(0%, 45%, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

@keyframes risetext {
	from 	{  opacity:0; 
			transform: translate3d(0%, 45%, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Firefox < 16 */
@-moz-keyframes risetext {
	from 	{  opacity:0; 
			transform: translate3d(0%, 45%, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Internet Explorer */
@-ms-keyframes risetext {
	from 	{  opacity:0; 
			transform: translate3d(0%, 45%, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}

/* Opera < 12.1 */
@-o-keyframes risetext {
	from 	{  opacity:0; 
			transform: translate3d(0%, 45%, 0px);}
	to 		{ opacity:1;	
			transform: translate3d(0px, 0px, 0px);}
}


/*slide-in*/

.TextAnime[data-loading='slidein_left']:not(.start, .done){
	opacity:0;
	transform: translate3d(-100%, 0px, 0px);
}

.TextAnime[data-loading='slidein_left'].done:not(.start){
	opacity:1; 
	transform: translate3d(0px, 0px, 0px);
}

.TextAnime[data-loading='slidein_left'].start:not(.done) {
	-webkit-animation: slidein_lefttext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: slidein_lefttext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation: slidein_lefttext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: slidein_lefttext 1.5s linear forwards; /* Opera < 12.1 */
    animation: slidein_lefttext 1.5s linear forwards;
}

@-webkit-keyframes slidein_lefttext {
	from 	{ opacity:0;
			transform: translate3d(-100%, 0px, 0px);}
	to 		{ opacity:1;		
			transform: translate3d(0px, 0px, 0px);}
}

@keyframes slidein_lefttext {
	from 	{ opacity:0;
			transform: translate3d(-100%, 0px, 0px);}
	to 		{ opacity:1;		
			transform: translate3d(0px, 0px, 0px);}
}

/* Firefox < 16 */
@-moz-keyframes slidein_lefttext {
	from 	{ opacity:0;
			transform: translate3d(-100%, 0px, 0px);}
	to 		{ opacity:1;		
			transform: translate3d(0px, 0px, 0px);}
}

/* Internet Explorer */
@-ms-keyframes slidein_lefttext {
	from 	{ opacity:0;
			transform: translate3d(-100%, 0px, 0px);}
	to 		{ opacity:1;		
			transform: translate3d(0px, 0px, 0px);}
}

/* Opera < 12.1 */
@-o-keyframes slidein_lefttext {
	from 	{ opacity:0;
			transform: translate3d(-100%, 0px, 0px);}
	to 		{ opacity:1;		
			transform: translate3d(0px, 0px, 0px);}
}


.TextAnime[data-loading='slidein_right']:not(.start, .done){
	opacity:0;
	transform: translate3d(100%, 0px, 0px);
}

.TextAnime[data-loading='slidein_right'].done:not(.start){
	opacity:1;
	transform: translate3d(0px, 0px, 0px);
}

.TextAnime[data-loading='slidein_right'].start:not(.done) {
	-webkit-animation: slidein_righttext 1.5s linear forwards; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: slidein_righttext 1.5s linear forwards; /* Firefox < 16 */
    -ms-animation: slidein_righttext 1.5s linear forwards; /* Internet Explorer */
    -o-animation: slidein_righttext 1.5s linear forwards; /* Opera < 12.1 */
    animation: slidein_righttext 1.5s linear forwards;
}

@-webkit-keyframes slidein_righttext {
	from 	{ opacity:0;
			transform: translate3d(100%, 0px, 0px);}
	to 		{ opacity:1;
			transform: translate3d(0px, 0px, 0px);}
}

@keyframes slidein_righttext {
	from 	{ opacity:0;
			transform: translate3d(100%, 0px, 0px);}
	to 		{ opacity:1;
			transform: translate3d(0px, 0px, 0px);}
}

/* Firefox < 16 */
@-moz-keyframes slidein_righttext {
	from 	{ opacity:0;
			transform: translate3d(100%, 0px, 0px);}
	to 		{ opacity:1;
			transform: translate3d(0px, 0px, 0px);}
}

/* Internet Explorer */
@-ms-keyframes slidein_righttext {
	from 	{ opacity:0;
			transform: translate3d(100%, 0px, 0px);}
	to 		{ opacity:1;
			transform: translate3d(0px, 0px, 0px);}
}

/* Opera < 12.1 */
@-o-keyframes slidein_righttext {
	from 	{ opacity:0;
			transform: translate3d(100%, 0px, 0px);}
	to 		{ opacity:1;
			transform: translate3d(0px, 0px, 0px);}
}


/* Pop */

.TextAnime[data-loading='pop']:not(.start, .done){
	opacity:0;
	transform: scale(1.22,1.22);
}

.TextAnime[data-loading='pop'].done:not(.start){
	opacity:1;
	transform: scale(1,1);
}

.TextAnime[data-loading='pop'].start:not(.done) {
	-webkit-animation: poptext 1s ease-in both; /* Safari, Chrome and Opera > 12.1 */
	-moz-animation: poptext 1s ease-in both; /* Firefox < 16 */
    -ms-animation: poptext 1s ease-in both; /* Internet Explorer */
    -o-animation: poptext 1s ease-in both; /* Opera < 12.1 */
    animation: poptext 1s ease-in both;
}

@-webkit-keyframes poptext {
	0%{ opacity:0;
		transform: scale(1.22,1.22);} 
	20%, 50%, 80%{ opacity:1;
		transform: scale(1.1,1.1);}
	40%{ opacity:1;
		 transform: scale(0.7,0.7);}
	60%{ opacity:1;
		 transform: scale(0.9,0.9);}
	100%{ opacity:1;
		  transform: scale(1,1);}
}

@keyframes poptext {
  0%{ opacity:0;
		transform: scale(1.22,1.22);} 
	20%, 50%, 80%{ opacity:1;
		transform: scale(1.1,1.1);}
	40%{ opacity:1;
		 transform: scale(0.7,0.7);}
	60%{ opacity:1;
		 transform: scale(0.9,0.9);}
	100%{ opacity:1;
		  transform: scale(1,1);}
}

/* Firefox < 16 */
@-moz-keyframes poptext {
  0%{ opacity:0;
		transform: scale(1.22,1.22);} 
	20%, 50%, 80%{ opacity:1;
		transform: scale(1.1,1.1);}
	40%{ opacity:1;
		 transform: scale(0.7,0.7);}
	60%{ opacity:1;
		 transform: scale(0.9,0.9);}
	100%{ opacity:1;
		  transform: scale(1,1);}
}

/* Internet Explorer */
@-ms-keyframes poptext {
  0%{ opacity:0;
		transform: scale(1.22,1.22);} 
	20%, 50%, 80%{ opacity:1;
		transform: scale(1.1,1.1);}
	40%{ opacity:1;
		 transform: scale(0.7,0.7);}
	60%{ opacity:1;
		 transform: scale(0.9,0.9);}
	100%{ opacity:1;
		  transform: scale(1,1);}
}

/* Opera < 12.1 */
@-o-keyframes poptext {
	0%{ opacity:0;
		transform: scale(1.22,1.22);} 
	20%, 50%, 80%{ opacity:1;
		transform: scale(1.1,1.1);}
	40%{ opacity:1;
		 transform: scale(0.7,0.7);}
	60%{ opacity:1;
		 transform: scale(0.9,0.9);}
	100%{ opacity:1;
		  transform: scale(1,1);}
}


/* Skate In & Skate Random*/

.TextAnime[data-loading='skaterandom'] span.animeT,
.TextAnime[data-loading='skatein'] span.animeT{
    animation-duration: 1s;
    animation-fill-mode: both;
	animation-name: skateanime;
	
}

.TextAnime[data-loading='skaterandom'] span.animeT,
.TextAnime[data-loading='skatein'] span.animeT { 
	display: inline-block;
	color: inherit !important;
}

@keyframes skateanime {
    from {
        transform: scaleX(0.2) translateX(-100px);
        opacity: 0;
    }
}

/* Shine */
.TextAnime[data-loading='shine'].start{
	position: relative;
	overflow: hidden;
	background: linear-gradient(90deg, #000, #fff, #000);
	background-repeat: no-repeat;
	background-size: 80%;
	animation: shinetext 3s linear;
	-webkit-background-clip: text;
	-webkit-text-fill-color: inherit;
}

@keyframes shinetext {
  0% {
    background-position: -500%;
  }
  100% {
    background-position: 500%;
  }
}

/* block reveal */

.TextAnime[data-loading='blockreveal']{
    position: relative;
    overflow: hidden;
    display: block;
}

.TextAnime[data-loading='blockreveal']::after{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: red;
    animation: a-ltr-after 4s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(-101%);
}

.TextAnime[data-loading='blockreveal']::before{
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    background: red;
    animation: a-ltr-before 4s cubic-bezier(.77,0,.18,1) forwards;
    transform: translateX(0);
}


.TextAnime[data-loading='blockreveal'].start::before,
.TextAnime[data-loading='blockreveal'].start::after{
    animation-delay: 2s;
}

@keyframes a-ltr-after{
    0% {transform: translateX(-100%)}
    100% {transform: translateX(101%)}
}

@keyframes a-ltr-before{
    0% {transform: translateX(0)}
    100% {transform: translateX(200%)}
}


/* letter reveal*/

.TextAnime[data-loading='letterreveal']:not(.start, .done){
	opacity: 0;
	/*display: none;*/
}

.TextAnime[data-loading='letterreveal'].start span.animeT{ 
    animation: letterreveal 1s ease-out forwards;
    display: inline-block;
	color: inherit !important;
}

@keyframes letterreveal{
	from{
		opacity: 0;
		transform: perspective(500px) translate3d(-35px, -40px, -150px) rotate3d(1, -1, 0, 35deg);
	}
    to{
		opacity: 1;
		transform: perspective(500px) translate3d(0, 0, 0);
    }
}

/* rainbow */

.TextAnime[data-loading='rainbow'].start span.animeT{ 
    animation-name: rainbow;
    animation-duration: 50s;
    animation-iteration-count: infinite;
    animation-direction: alternate;
    animation-fill-mode: forwards;
	color: inherit;
	/*animation-timing-function: steps(20, end);*/
}

@keyframes rainbow {
	0%	{ color: hsla(  0.00	,60%, 60%, 1); }
	5%	{ color: hsla( 18.25 	,60%, 60%, 1); }
	10%	{ color: hsla( 36.50 	,60%, 60%, 1); }
	15%	{ color: hsla( 54.75 	,60%, 60%, 1); }
	20%	{ color: hsla( 73.00	,60%, 60%, 1); }
	25%	{ color: hsla( 91.25 	,60%, 60%, 1); }
	30%	{ color: hsla(109.50 	,60%, 60%, 1); }
	35%	{ color: hsla(127.75 	,60%, 60%, 1); }
	40%	{ color: hsla(146.00	,60%, 60%, 1); }
	45%	{ color: hsla(164.25 	,60%, 60%, 1); }
	50%	{ color: hsla(182.50 	,60%, 60%, 1); }
	55%	{ color: hsla(200.75 	,60%, 60%, 1); }
	60%	{ color: hsla(219.00 	,60%, 60%, 1); }
	65%	{ color: hsla(237.25 	,60%, 60%, 1); }
	70%	{ color: hsla(255.50 	,60%, 60%, 1); }
	75%	{ color: hsla(273.75 	,60%, 60%, 1); }
	80%	{ color: hsla(292.00	,60%, 60%, 1); }
	85%	{ color: hsla(310.25 	,60%, 60%, 1); }
	90%	{ color: hsla(328.50 	,60%, 60%, 1); }
	95%	{ color: hsla(346.75	,60%, 60%, 1); }
	100%{ color: hsla(365.00	,60%, 60%, 1); }
}

/* Glowing In */

.TextAnime[data-loading='glow'].start span.animeT{ 
	animation: letter-glow 2s 0s ease both;
	color: inherit !important;
}

@keyframes letter-glow{
  0%   { opacity: 0; text-shadow: 0px 0px 1px rgba(0,0,0,0.1)}
  66%  { opacity: 1; text-shadow: 0px 0px 20px rgba(0,0,0,0.9) }
  77%   { opacity: 1;  }
  100% { opacity:0.7; text-shadow: 0px 0px 20px rgba(0,0,0,0.0)}
}