css.css

/* **********************************************
Basic mechanics
Hide all paragraphs by default
Show them when they receive the class 'on'
Hide them when they receive the class 'off'
Feel free to adjust the defaults to your needs.
********************************************** */
#closed-captions p {
	opacity: 0;
	transition: .05s;
	position: absolute;
}
#closed-captions .on {
	opacity: 1;
}
#closed-captions .off {
	transition: .2s;
	opacity: 0;
}
.voice1 {
	font-style: italic;
}

/* **********************************************
The first paragraph, with extended timing for 
	all siblings. Basically what it does is that
	it shows the text after a delay, which 
	corresponds with the time that the word is
	spoken.
You probably want to change the styling.
********************************************** */
.p0 span {
	opacity: 0;
}
.p0.on span:first-of-type {
	opacity: 1;
	transition: 0s;
}
.p0.on span:nth-of-type(2) {
	opacity: 1;
	transition: 0s .4s;
	margin-right: -.25em;
}
.p0.on span:nth-of-type(3) {
	opacity: 1;
	transition: 0s .5s;
	margin-right: -.25em;
}
.p0.on span:nth-of-type(4) {
	opacity: 1;
	transition: 0s .7s;
	margin-right: -.25em;
}
.p0.on span:nth-of-type(5) {
	opacity: 1;
	transition: 0s 1.1s;
	margin-right: -.25em;
}
.p0.on span:nth-of-type(6) {
	opacity: 1;
	transition: 0s 1.4s;
	margin-right: -.25em;
}
.p0.on span:nth-of-type(7) {
	opacity: 1;
	transition: 0s 1.7s;
	margin-right: -.25em;
}
.p0.on span:nth-of-type(8) {
	opacity: 1;
	transition: 0s 2s;
}
.p0.on span:nth-of-type(9) {
	opacity: 1;
	transition: 0s 3s;
}
.p0.on span:nth-of-type(10) {
	opacity: 1;
	transition: 0s 3.2s;
}
.p0.on span:nth-of-type(11) {
	opacity: 1;
	transition: 0s 3.7s;
}