@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro:900);
body {
  margin: 0;
  overflow-x: hidden;
  background: #eee;
}

canvas {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 300px;
  left: 0;
  right: 0;
}

.container {
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  width: 200px;
  height: 300px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  background: #fff;
}

.text-container {
  position: absolute;
  left: 0px;
  width: calc(200px * 6);
  height: 100px;
  font-size: 0;
  transition: left 0.5s ease-in-out;
}

.text {
  display: inline-block;
  width: 200px;
  height: 100px;
  background: url('https://s3-us-west-2.amazonaws.com/harriscarney/images/Do+or+Die.jpg') 25% 25%;
  color: #fff;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  text-transform: uppercase;
  text-align: center;
  line-height: 100px;
  font-family: 'Source Sans Pro';
  font-size: 24px;
  overflow: hidden;
  text-shadow: 0px 0px 0px rgba(0, 0, 0, 0.5);
}

.text:after {
  content: '';
  display: block;
  position: absolute;
  bottom: 50;
  width: 200px;
  height: 90px;
  background: url('http://i.imgur.com/tCjf427.jpg?1') 25% 25%;
  background: -moz-linear-gradient(transparent, transparent);
}

.text:nth-of-type(2) {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Drop+the+Game.jpg) 25% 25%;
  -webkit-background-clip: text;
}

.text:nth-of-type(2):after {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Drop+the+Game.jpg) 25% 25%;
  background: -moz-linear-gradient(transparent, transparent);
}

.text:nth-of-type(3) {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Retrograde.jpg) 25% 25%;
  -webkit-background-clip: text;
}

.text:nth-of-type(3):after {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Retrograde.jpg) 25% 25%;
  background: -moz-linear-gradient(transparent, transparent);
}

.text:nth-of-type(4) {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Warriors.jpg) 25% 25%;
  -webkit-background-clip: text;
}

.text:nth-of-type(4):after {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Warriors.jpg) 25% 25%;
  background: -moz-linear-gradient(transparent, transparent);
}

.text:nth-of-type(5) {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Stay+with+Me.jpg) 25% 25%;
  -webkit-background-clip: text;
}

.text:nth-of-type(5):after {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Stay+with+Me.jpg) 25% 25%;
  background: -moz-linear-gradient(transparent, transparent);
}

.text:nth-of-type(6) {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Mad+World.jpg) 25% 25%;
  -webkit-background-clip: text;
}

.text:nth-of-type(6):after {
  background: url(https://s3-us-west-2.amazonaws.com/harriscarney/images/Mad+World.jpg) 25% 25%;
  background: -moz-linear-gradient(transparent, transparent);
}

.controls {
  position: absolute;
  bottom: 5px;
  width: 100%;
  height: 98px;
  display: flex;
}

.play,
.pause {
  position: absolute;
  bottom: 0px;
  left: 50px;
  width: 120px;
  height: 98px;
  cursor: pointer;
}

.previous {
  margin: auto;
  position: absolute;
  bottom: 15px;
  left: 5px;
  width: 64px;
  height: 64px;
  cursor: pointer;
}


.next {
  margin: auto;
  position: absolute;
  bottom: 15px;
  left: 135px;
  width: 64px;
  height: 64px;
  cursor: pointer;
}


.pause {
  display: none;
}

.progress-bar {
  width: 100%;
  height: 120px;
  position: absolute;
  bottom: 190;
}

.progress-bar-value {
  width: 0%;
  height: 25px;
  background: #cfcecd;
}