main.css

body{
	margin:0;
	background: #000;
}

*{
	box-sizing:border-box;
}

button.pause,
button.play{
	position: relative;
	z-index: 1000;
}

.mask-layer{
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
	opacity: 0.25;
	background: #000;

}

.video-layer,
.video-layer > .sequence,
.video-layer img{
	position: fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	width:100%;
	height:100%;
}

.text-layer{
	position : fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 100;
}

.title-layer{
	position : fixed;
	top:0;
	left:0;
	bottom:0;
	right:0;
	z-index: 100;
	background: grey;
	/*background: url(gif/giphy.gif) no-repeat center center fixed;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
	transition: opacity 3s ease-in-out;
}

.title-layer.hidden{
	opacity: 0;
}

.title-layer > h1{
	height: 100px;
	line-height: 100px;
	font-size: 72px;
	text-align: center;
	font-style: italic;
	position: absolute;
	top:50%;
	width: 100%;
	margin-top:-50px;
}

.title-layer > .imagesLoaded {
	height: 24px;
	line-height: 24px;
	font-size: 24px;
	text-align: center;
	font-style: italic;
	position: absolute;
	top:60%;
	width: 100%;
}

.title-layer > h4{
	padding:40px;
	font-size: 18px;
	text-align: center;
	font-style: italic;
	position: absolute;
	bottom:0;

}

.title-layer > h4.artist{
	left:0;
}

.title-layer > h4.date{
	right:0;
}

.line{
	position: fixed;
	height:100px;

	z-index: 200;
	width:100%;
	margin-top:-50px;

	transition: top 0.5s ease-in-out, opacity 0.5s ease-in-out;

}

.pop-out{
	top:55%;
	opacity: 0;
}

.pop-focus{
	top:65%;

}

.pop-next{
	top:75%;
}

.pop-waiting{
	top:90%;
	opacity: 0;
}

.text-container{
	position: relative;
	width:100%;
	height:100px;

}

.text{
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height: 100px;
	/*text-align: left;*/
	line-height: 100px;
	font-size: 52px;
	text-align: center;
	overflow-x : hidden;
}

.center-text{
	position: relative;
	margin:0 auto;
	display: inline-block;
}

.text-front{
	color:#fff;
	 white-space: nowrap;
}

.text-back{
	text-shadow: 0px 0px 30px rgba(0, 0, 0, 0.75);
	color:red;
	white-space: nowrap;
}

.text-mask{
	text-align: left;
	overflow: hidden;
	width:0;
	height: 100px;
}

.sequence.off{
	display: none;
}

.sequence.on{
	display: block;
}

.sequence img.off{
	display: none;
}

.sequence img.on{
	display: block;
}


.verse{
	background: pink;
}

.chorus{
	background: tan;
}

.breakdown{
	background: green;
}

.buildup{
	background: yellow;
}