/**
 * Testing scroll-hooked animations ?
 */

.animateOnScreen{
	transition: opacity 0.4s;
}

.animateOnScreen.out{
	opacity: 0;
}

.animateOnScreen.in{
	opacity: 1;
}


/**
 * translate from side for even/odd things
 */

.animateOnScreen.odd{
	transition:transform 0.4s, opacity 0.4s;
}

	.animateOnScreen.out.odd{
		transform: translate3d(-100%, 0, 0);
	}

.animateOnScreen.even{
	transition:transform 0.4s 0.2s, opacity 0.4s 0.2s;
}

	.animateOnScreen.out.even{
		-moz-transform: translate3d(100%, 0, 0);
		-webkit-transform: translate3d(100%, 0, 0);
		transform: translate3d(100%, 0, 0);
	} 

.animateOnScreen.in.even,
.animateOnScreen.in.odd{
	-moz-transform:  translate3d(0, 0, 0);
	-webkit-transform:  translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}


/**
 *  class="animateOnScreen linething"
 */

.animateOnScreen.lineThing::after{
	transition:transform 1s;
}

.animateOnScreen.lineThing.in::after{
	-moz-transform:  translate3d(0, 0, 0);
	-webkit-transform:  translate3d(0, 0, 0);
	transform:translate3d(0,0,0)
}

.animateOnScreen.lineThing.out::after{
	-moz-transform:  translate3d(-200%,0,0);
	-webkit-transform:  translate3d(-200%,0,0);
	transform:translate3d(-200%,0,0)
}

/*.animateOnScreen.lineFollow::before{
	transition:transform 1s;
}

.animateOnScreen.lineFollow.in::before{
	transform:translate3d(0,0,0)
}

.animateOnScreen.lineFollow.out::before{
	transform:translate3d(-200%,0,0)
}*/




/**
 * specialLine
 */

.specialLine{
	position: relative;
}

.specialLine::before,
.specialLine::after{
	display: block;
	content: "";
	position: absolute;
	width: 50%;
	height:2px;
	bottom:-2px;
	left:0;
	background: #FFF;
	transition: width 0.4s;
}

.specialLine::after{
	left:auto;
	right: 0;
}

.specialLine.in::before,
.specialLine.in::after{
	width:0;
	transition: width 0.4s 0.4s;
}