@import url(http://fonts.googleapis.com/css?family=Josefin+Slab:100);

.slider-wrap {
  width: 300px;
  height: 500px;
  margin: 0 auto;
}
.slider {
  overflow-x: hidden;
}
.holder {
  width: 300%;
}
.slide {
  float: left;
  width: 33.3%;
  height: 500px;
  position: relative;
  background-position: -100px 0;
  z-index:-1;
}
.temp {
  position: absolute;
  color: white;
  font-size: 80px;
  bottom: 20px;
  left: 15px;
  font-family: 'Josefin Slab', serif;
  font-weight: 100;
}
#slide-0 {
  background-image: url(http://farm8.staticflickr.com/7347/8731666710_34d07e709e_z.jpg);
}
#slide-1 {
  background-image: url(http://farm8.staticflickr.com/7384/8730654121_05bca33388_z.jpg);
}
#slide-2 {
  background-image: url(http://farm8.staticflickr.com/7382/8732044638_9337082fc6_z.jpg);
}
.slide:before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 40%;
  background: linear-gradient(transparent, black);
  z-index:-1;
}
.slider-nav {
  text-align: center;
  margin: -25px 0 0 0;
}
.slider-nav a {
  width: 12px;
  height: 12px;
  display: inline-block;
  background: #ddd;
  overflow: hidden;
  text-indent: -9999px;
  border-radius: 50%;
}
.slider-nav a.active {
  background: #999;
}