@import url(https://fonts.googleapis.com/css?family=News+Cycle:400,700);
@import url(https://fonts.googleapis.com/css?family=Lato:400,700,400italic,700italic);

html, body, .karaoke div, .karaoke span, .karaoke applet, .karaoke object, .karaoke iframe,
.karaoke h1, .karaoke h2, .karaoke h3, .karaoke h4, .karaoke h5, .karaoke h6, .karaoke p, .karaoke blockquote, .karaoke pre,
.karaoke a, .karaoke abbr, .karaoke acronym, .karaoke address, .karaoke big, .karaoke cite, .karaoke code,
.karaoke del, .karaoke dfn, .karaoke em, .karaoke img, .karaoke ins, .karaoke kbd, .karaoke q, .karaoke s, .karaoke samp,
.karaoke small, .karaoke strike, .karaoke strong, .karaoke sub, .karaoke sup, .karaoke tt, .karaoke var,
.karaoke b, .karaoke u, .karaoke center,
.karaoke dl, .karaoke dt, .karaoke dd, .karaoke ol, .karaoke ul, .karaoke li,
.karaoke fieldset, .karaoke form, .karaoke label, .karaoke legend,
.karaoke table, .karaoke caption, .karaoke tbody, .karaoke tfoot, .karaoke thead, .karaoke tr, .karaoke th, .karaoke td,
.karaoke article, .karaoke aside, .karaoke canvas, .karaoke details, .karaoke embed,
.karaoke figure, .karaoke figcaption, .karaoke footer, .karaoke header, .karaoke hgroup,
.karaoke menu, .karaoke nav, .karaoke output, .karaoke ruby, .karaoke section, .karaoke summary,
.karaoke time, .karaoke mark, .karaoke audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

html,
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  position: relative;
  line-height: 1;
  background-color: #fff;
  color: #000;
}

.karaoke {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  -ms-touch-action: none;
      touch-action: none;
  font-family: "Lato", sans-serif;
  font-size: 36px;
  font-weight: normal;
  color: #000; 
}

.karaoke .verses {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  overflow: visible;
  z-index: 1;
  text-align: center;
  -webkit-perspective: 600px;
          perspective: 600px;
  -webkit-perspective-origin: 50% 40%;
          perspective-origin: 50% 40%;
}

.karaoke .verses > section {
  /*display: none;*/
  position: absolute;
  width: 100%;
  padding: 20px 0px;
  z-index: 10;
  -webkit-transform-style: preserve-3d;
          transform-style: preserve-3d;
  -webkit-transition: -webkit-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), -webkit-transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
          transition: -ms-transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
          transition: transform-origin 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), transform 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), visibility 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985), opacity 800ms cubic-bezier(0.26, 0.86, 0.44, 0.985);
  min-height: 0 !important;
  -ms-perspective: 600px;
}

.karaoke .verses > section.title {
	display: block;
}

/*********************************************
 * HEADERS
 *********************************************/
.karaoke h1,
.karaoke h2,
.karaoke h3,
.karaoke h4,
.karaoke h5,
.karaoke h6 {
  margin: 0 0 20px 0;
  color: #000;
  font-family: "News Cycle", Impact, sans-serif;
  font-weight: normal;
  line-height: 1.2;
  letter-spacing: normal;
  text-transform: none;
  text-shadow: none;
  word-wrap: break-word;
}

.karaoke h1 {
  font-size: 3.77em;
}

.karaoke h2 {
  font-size: 2.11em;
}

.karaoke h3 {
  font-size: 1.55em;
}

.karaoke h4 {
  font-size: 1em;
}

.karaoke h1 {
  text-shadow: none;
}

.karaoke section>section span {
	transition: all 0.2s linear;
	color: rgb(124,124,124);
	font-size: 120%;
}

.karaoke section>section .activeWord {
	color: rgb(255,0,0);
	font-size: 135%;
}

.karaoke section>section .passedWord {
	color: rgb(0,0,0);
	font-size: 135%;
}

.karaoke section>section {
	opacity: 0;
	transition: opacity 2s linear;
}

.karaoke section>section:first-child {
	opacity: 1;
}

.karaoke section>section.nextRow {
	opacity: 1;
}