/*********************************************
 * ROLLING LINKS
 *********************************************/

.roll {
	display: inline-block;
	line-height: 1.2;
	overflow: hidden;

	vertical-align: top;

	-webkit-perspective: 400px;
	   -moz-perspective: 400px;
	    -ms-perspective: 400px;
	        perspective: 400px;

	-webkit-perspective-origin: 50% 50%;
	   -moz-perspective-origin: 50% 50%;
	    -ms-perspective-origin: 50% 50%;
	        perspective-origin: 50% 50%;
}
	.reveal .roll:hover {
		background: none;
		text-shadow: none;
	}
.roll span {
	display: block;
	position: relative;
	padding: 0 2px;

	pointer-events: none;

	-webkit-transition: all 400ms ease;
	   -moz-transition: all 400ms ease;
	    -ms-transition: all 400ms ease;
	        transition: all 400ms ease;

	-webkit-transform-origin: 50% 0%;
	   -moz-transform-origin: 50% 0%;
	    -ms-transform-origin: 50% 0%;
	        transform-origin: 50% 0%;

	-webkit-transform-style: preserve-3d;
	   -moz-transform-style: preserve-3d;
	    -ms-transform-style: preserve-3d;
	        transform-style: preserve-3d;

	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;
}
	.roll:hover span {
	    background: rgba(0,0,0,0.5);

	    -webkit-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
	       -moz-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
	        -ms-transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
	            transform: translate3d( 0px, 0px, -45px ) rotateX( 90deg );
	}
.roll span:after {
	content: attr(data-title);

	display: block;
	position: absolute;
	left: 0;
	top: 0;
	padding: 0 2px;

	-webkit-backface-visibility: hidden;
	   -moz-backface-visibility: hidden;
	        backface-visibility: hidden;

	-webkit-transform-origin: 50% 0%;
	   -moz-transform-origin: 50% 0%;
	    -ms-transform-origin: 50% 0%;
	        transform-origin: 50% 0%;

	-webkit-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
	   -moz-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
	    -ms-transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
	        transform: translate3d( 0px, 110%, 0px ) rotateX( -90deg );
}