/* -------------------------------------------------- */
.wipeIn {
	transform: translate3d(0,0,0);
	-o-transform: translate3d(0,0,0);
	-ms-transform: translate3d(0,0,0);
	-moz-transform: translate3d(0,0,0);
	-webkit-transform: translate3d(0,0,0);
	
	transition: all 0.5s ease-out;
	-o-transition: all 0.5s ease-out;
	-ms-transition: all 0.5s ease-out;
	-moz-transition: all 0.5s ease-out;
	-webkit-transition: all 0.5s ease-out;
}

/* -------------------------------------------------- */

.titleDown {
	display: block;
    color: transparent;
    
	transform: translate(0, 120px);
    -o-transform: translate(0, 120px);         /* Opera */
    -ms-transform: translate(0, 120px);        /* IE 9 */
    -moz-transform: translate(0, 120px);       /* Firefox */
    -webkit-transform: translate(0, 120px);    /* Safari and Chrome */
}
.titleNormal {
	display: block;
    color: rgba(255,255,255,1);
    opacity: 0;
}

/* -------------------------------------------------- */

.showVAnim {
	display: block;
    color: transparent;
    text-shadow: 0px 0px 0px rgba(255,255,255,0);
    
	animation:         WordAnimV 10s linear;
	-moz-animation:    WordAnimV 10s linear; /* Firefox */
	-webkit-animation: WordAnimV 10s linear; /* Safari and Chrome */
	-o-animation:      WordAnimV 10s linear; /* Opera */
}

.showVAnim_IE10{
	display: block;    
	opacity:0; 
	color: rgba(255,255,255, 1);
	-ms-animation:	WordAnimV_IE10 10s linear;
}
.showVAnim_IE11{
	display: block;    
	opacity:0; 
	color: rgba(255,255,255, 1);
	-ms-animation:	WordAnimV_IE11 10s linear;
}

@keyframes WordAnimV {
    0%   { text-shadow: 0px 0px 20px rgba(255,255,255,0); 
    		transform: 	       translate3d(0,120px,0) scaleY(10);
    		animation-timing-function:        ease-in-out; /* W3C and Opera */
    		}
    27%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
    		transform: 	       translate3d(0,0,0) scaleY(1);
    		}
    30%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    72%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    75%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
    		transform: 	       translate3d(0,0,0) scaleY(1);
    		animation-timing-function:        ease-in; /* W3C and Opera */
    		}
 	100% { text-shadow: 0px 0px 20px rgba(255,255,255,0);
    		transform: 	       translate3d(0,-200px,0) scaleY(10);
 			}
}

/* not possible to hide text and only show shadow */
@keyframes WordAnimV_IE10{
    0%   { opacity:0; text-shadow: 8000px 0px 20px rgba(255,255,255,0); 
    		-ms-transform: 	       translate3d(-8000px,120px,0) scaleY(10);
    		-ms-animation-timing-function:        ease-in-out;
    		}
    27%  { opacity:1; text-shadow: 8000px 0px 5px rgba(255,255,255,1); 
    		-ms-transform: 	       translate3d(-8000px,0,0) scaleY(1);
    		}
    30%  { text-shadow: 8000px 0px 0px rgba(255,255,255,1);}
    72%  { text-shadow: 8000px 0px 0px rgba(255,255,255,1);}
    75%  { opacity:1; text-shadow: 8000px 0px 5px rgba(255,255,255,1); 
    		-ms-transform: 	       translate3d(-8000px,0,0) scaleY(1);
    		-ms-animation-timing-function:        ease-in;
    		}
 	100% { opacity:0; text-shadow: 8000px 0px 20px rgba(255,255,255,0);
    		-ms-transform: 	       translate3d(-8000px,-200px,0) scaleY(10);
 			}
}

/* not possible to hide text and only show shadow */
@keyframes WordAnimV_IE11{
    0%   { opacity:0; text-shadow: 8000px 0px 20px rgba(255,255,255,0); 
    		transform: 	       translate3d(-8000px,120px,0) scaleY(10);
    		animation-timing-function:        ease-in-out;
    		}
    27%  { opacity:1; text-shadow: 8000px 0px 5px rgba(255,255,255,1); 
    		transform: 	       translate3d(-8000px,0,0) scaleY(1);
    		}
    30%  { text-shadow: 8000px 0px 0px rgba(255,255,255,1);}
    72%  { text-shadow: 8000px 0px 0px rgba(255,255,255,1);}
    75%  { opacity:1; text-shadow: 8000px 0px 5px rgba(255,255,255,1); 
    		transform: 	       translate3d(-8000px,0,0) scaleY(1);
    		animation-timing-function:        ease-in;
    		}
 	100% { opacity:0; text-shadow: 8000px 0px 20px rgba(255,255,255,0);
    		transform: 	       translate3d(-8000px,-200px,0) scaleY(10);
 			}
}

@-moz-keyframes WordAnimV {  /* Firefox */
    0%   { text-shadow: 0px 0px 20px rgba(255,255,255,0); 
			-moz-transform:    translate3d(0,120px,0) scaleY(10); /* Firefox */
			-moz-animation-timing-function:   ease-in-out; /* Firefox */
    		}
    27%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
			-moz-transform:    translate3d(0,0,0) scaleY(1); /* Firefox */
    		}
    30%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    72%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    75%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
			-moz-transform:    translate3d(0,0,0) scaleY(1); /* Firefox */
			-moz-animation-timing-function:   ease-in; /* Firefox */
    		}
 	100% { text-shadow: 0px 0px 20px rgba(255,255,255,0);
			-moz-transform:    translate3d(0,-200px,0) scaleY(10); /* Firefox */
 			}
}

@-webkit-keyframes WordAnimV {  /* Safari and Chrome */
    0%   { text-shadow: 0px 0px 20px rgba(255,255,255,0); 
			-webkit-transform: translate3d(0,120px,0) scaleY(10); /* Safari and Chrome */
			-webkit-animation-timing-function:ease-in-out; /* Safari and Chrome */
    		}
    27%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
			-webkit-transform: translate3d(0,0,0) scaleY(1); /* Safari and Chrome */
    		}
    30%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    72%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    75%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
			-webkit-transform: translate3d(0,0,0) scaleY(1); /* Safari and Chrome */
			-webkit-animation-timing-function:ease-in; /* Safari and Chrome */
    		}
 	100% { text-shadow: 0px 0px 20px rgba(255,255,255,0);
			-webkit-transform: translate3d(0,-200px,0) scaleY(10); /* Safari and Chrome */
 			}
}

@-o-keyframes WordAnimV {   /* Opera */
    0%   { text-shadow: 0px 0px 20px rgba(255,255,255,0); 
			-o-transform:      translate3d(0,120px,0) scaleY(10); /* Opera */
    		animation-timing-function:        ease-in-out; /* W3C and Opera */
    		}
    27%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
			-o-transform:      translate3d(0,0,0) scaleY(1); /* Opera */
    		}
    30%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    72%  { text-shadow: 0px 0px  0px rgba(255,255,255,1);}
    75%  { text-shadow: 0px 0px  5px rgba(255,255,255,1); 
			-o-transform:      translate3d(0,0,0) scaleY(1); /* Opera */
    		animation-timing-function:        ease-in; /* W3C and Opera */
    		}
 	100% { text-shadow: 0px 0px 20px rgba(255,255,255,0);
			-o-transform:      translate3d(0,-200px,0) scaleY(10); /* Opera */
 			}
}

/* -------------------------------------------------- */

.showHAnim {
	display: block;
    color: rgba(255,255,255, 0.0);
	animation:         WordAnimH 10s linear;
	-moz-animation:    WordAnimH 10s linear; /* Firefox */
	-webkit-animation: WordAnimH 10s linear; /* Safari and Chrome */
	-o-animation:      WordAnimH 10s linear; /* Opera */
    background: gradient(        linear, left top, right top, from(#222222), to(#222222), color-stop(0.5, #FFFFFF)) 0 0 no-repeat;
    background: -o-gradient(     linear, left top, right top, from(#222222), to(#222222), color-stop(0.5, #FFFFFF)) 0 0 no-repeat;
    background: -moz-gradient(   linear, left top, right top, from(#222222), to(#222222), color-stop(0.5, #FFFFFF)) 0 0 no-repeat;
    background: -webkit-gradient(linear, left top, right top, from(#222222), to(#222222), color-stop(0.5, #FFFFFF)) 0 0 no-repeat;
   /* background: -ms-gradient(    linear, left top, right top, from(#222222), to(#222222), color-stop(0.5, #FFFFFF)) 0 0 no-repeat; */
    -ms-background-size: 125px;
    -moz-background-size: 125px;
    -webkit-background-size: 125px;
    -o-background-size: 125px;
    -ms-background-clip: text;
    -moz-background-clip: text;
    -webkit-background-clip: text;
    -o-background-clip: text;
    background-position: -3000px 0px;
}

.showHAnim_IE10{
	display: block;    
	color: rgba(255,255,255, 1);
	opacity:0;
	-ms-animation:     WordAnimH_IE10 10s linear; /* IE 10 */
}

.showHAnim_IE11{
	display: block;    
	color: rgba(255,255,255, 1);
	opacity:0;
	animation:     WordAnimH_IE11 10s linear; /* IE 10 */
}

@keyframes WordAnimH {
    0%   { opacity: 0;  background-position: -3000px 0px; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
    		animation-timing-function:        ease-out; /* W3C and Opera */
    		transform: 	       translateX(-150px) scaleX(1.3);
    		}
    10%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
    		transform: 	       translateX(-20px);
    		}
	15%  { text-shadow: 0px 0px 0px rgba(255,255,255,1);}
	16%  { background-position: -125px 0px;}
	26%  { background-position: 300px 0px;}
	77%  { text-shadow: 0px 0px 0px rgba(255,255,255,1)}
	80%  { text-shadow: 0px 0px 5px rgba(255,255,255,1);  
    		transform: 	       scaleX(1.0) translateX(20px);
    		animation-timing-function:        ease-in; /* W3C and Opera */
			}
	89%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
    		transform: 	       scaleX(1.7) translateX(120px);
			}
	100% { opacity: 0; background-position: 3000px 0px; 
    		transform: 	       scaleX(2) translateX(400px);
			}
}

/* not possible to hide text and only show shadow */
@keyframes WordAnimH_IE10 {

    0%   { opacity:0; text-shadow: 0px 3000px 20px rgba(255,255,255,1); 
    		-ms-transform: 	       translate3d(-150px,-3000px,0) scaleX(1.3);
    		-ms-animation-timing-function:        ease-in-out;
    		}
    10%  { opacity:1; text-shadow: 0px 3000px 20px rgba(255,255,255,1); 
    		-ms-transform: 	       translate3d(-20px,-3000px,0) scaleX(1);
    		}
    15%  { text-shadow: 0px 3000px 0px rgba(255,255,255,1);}
    77%  { text-shadow: 0px 3000px 0px rgba(255,255,255,1);}
    80%  { opacity:1; text-shadow: 0px 3000px 5px rgba(255,255,255,1); 
    		-ms-transform: 	       translate3d(20px,-3000px,0) scaleX(1);
    		-ms-animation-timing-function:        ease-in;
    		}
    89%  { opacity:1; text-shadow: 0px 3000px 15px rgba(255,255,255,1); 
    		-ms-transform: 	       translate3d(100px,-3000px,0) scaleX(1.1);
    		-ms-animation-timing-function:       linear;
    		}
 	100% { opacity:0; text-shadow: 0px 3000px 20px rgba(255,255,255,1);
    		-ms-transform: 	       translate3d(400px,-3000px,0) scaleX(1.3);
 			}
}
/* not possible to hide text and only show shadow */
@keyframes WordAnimH_IE11 {

    0%   { opacity:0; text-shadow: 0px 3000px 20px rgba(255,255,255,1); 
    		transform: 	       translate3d(-150px,-3000px,0) scaleX(1.3);
    		animation-timing-function:        ease-in-out;
    		}
    10%  { opacity:1; text-shadow: 0px 3000px 20px rgba(255,255,255,1); 
    		transform: 	       translate3d(-20px,-3000px,0) scaleX(1);
    		}
    15%  { text-shadow: 0px 3000px 0px rgba(255,255,255,1);}
    77%  { text-shadow: 0px 3000px 0px rgba(255,255,255,1);}
    80%  { opacity:1; text-shadow: 0px 3000px 5px rgba(255,255,255,1); 
    		transform: 	       translate3d(20px,-3000px,0) scaleX(1);
    		animation-timing-function:        ease-in;
    		}
    89%  { opacity:1; text-shadow: 0px 3000px 15px rgba(255,255,255,1); 
    		transform: 	       translate3d(100px,-3000px,0) scaleX(1.1);
    		animation-timing-function:       linear;
    		}
 	100% { opacity:0; text-shadow: 0px 3000px 20px rgba(255,255,255,1);
    		transform: 	       translate3d(400px,-3000px,0) scaleX(1.3);
 			}
}

/* leave away moving cause it stutters */
@-moz-keyframes WordAnimH {  /* Firefox */
    0%   { opacity: 0;  background-position: -3000px 0px; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-moz-animation-timing-function:   ease-out; /* Firefox */
			-moz-transform:    translateX(-150px) scaleX(1.3); /* Firefox */
    		}
    10%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
/* 			-moz-transform:    translateX(-20px); */  /* Firefox */
/* instead */			-moz-transform:    translateX(-0px); /* Firefox */
    		}
	15%  { text-shadow: 0px 0px 0px rgba(255,255,255,1);}
	16%  { background-position: -125px 0px;}
	26%  { background-position: 300px 0px;}
	77%  { text-shadow: 0px 0px 0px rgba(255,255,255,1)}
	80%  { text-shadow: 0px 0px 5px rgba(255,255,255,1);  
/*			-moz-transform:    scaleX(1.0) translateX(20px); */ /* Firefox */
/* instead */			-moz-transform:    scaleX(1.0) translateX(0px);  /* Firefox */
			-moz-animation-timing-function:   ease-in; /* Firefox */
			}
	89%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-moz-transform:    scaleX(1.7) translateX(120px); /* Firefox */
			}
	100% { opacity: 0; background-position: 3000px 0px; 
			-moz-transform:    scaleX(2) translateX(400px); /* Firefox */
			}
}

@-webkit-keyframes WordAnimH {  /* Safari and Chrome */
    0%   { opacity: 0;  background-position: -3000px 0px; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-webkit-animation-timing-function:ease-out; /* Safari and Chrome */
			-webkit-transform: translateX(-150px) scaleX(1.3); /* Safari and Chrome */
    		}
    10%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-webkit-transform: translateX(-20px); /* Safari and Chrome */
    		}
	15%  { text-shadow: 0px 0px 0px rgba(255,255,255,1);}
	16%  { background-position: -125px 0px;}
	26%  { background-position: 300px 0px;}
	77%  { text-shadow: 0px 0px 0px rgba(255,255,255,1)}
	80%  { text-shadow: 0px 0px 5px rgba(255,255,255,1);
			-webkit-transform: scaleX(1.0) translateX(20px); /* Safari and Chrome */
			-webkit-animation-timing-function:ease-in; /* Safari and Chrome */
			}
	89%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-webkit-transform: scaleX(1.7) translateX(120px); /* Safari and Chrome */
			}
	100% { opacity: 0; background-position: 3000px 0px; 
			-webkit-transform: scaleX(2) translateX(400px); /* Safari and Chrome */
			}
}

@-o-keyframes WordAnimH {   /* Opera */
    0%   { opacity: 0;  background-position: -3000px 0px; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
    		animation-timing-function:        ease-out; /* W3C and Opera */
			-o-transform:      translateX(-150px) scaleX(1.3); /* Opera */
    		}
    10%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-o-transform:      translateX(-20px); /* Opera */
    		}
	15%  { text-shadow: 0px 0px 0px rgba(255,255,255,1);}
	16%  { background-position: -125px 0px;}
	26%  { background-position: 300px 0px;}
	77%  { text-shadow: 0px 0px 0px rgba(255,255,255,1)}
	80%  { text-shadow: 0px 0px 5px rgba(255,255,255,1);  
			-o-transform:      scaleX(1.0) translateX(20px); /* Opera */
    		animation-timing-function:        ease-in; /* W3C and Opera */
			}
	89%  { opacity: 1; text-shadow: 0px 0px 20px rgba(255,255,255,1); 
			-o-transform:      scaleX(1.7) translateX(120px); /* Opera */
			}
	100% { opacity: 0; background-position: 3000px 0px; 
			-o-transform:      scaleX(2) translateX(400px); /* Opera */
			}
}