#content-slider {
  margin: 0 auto;
  width: 640px;
}
#content {
  height: 480px;
  width: 640px;
  box-shadow: 0 0 50px 10px #c9c9c9;
  overflow: hidden;
}
#content-inner {
  height: 480px;
  width:10000px;
  transition: all 400ms ease;
}
.slide {
  height: 480px;
  width: 640px;
  float: left;
  position: relative;
}

.slide-info {
  background: rgba(0, 0, 0, .35);
  color: #fff;
  padding: 1rem 2rem;
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
}
.slide-info h2 {
  color: #fff;
  font-size: 1.25rem;
  margin: 0;
}
.slide-info p {
  font-size: 1rem;
  margin: 0;
}

#example {
  visibility: hidden;
}
#example:target {
  visibility: visible;
}

#content-inner-1:target #content-inner {
  margin-left: 0;
}
#content-inner-2:target #content-inner {
  margin-left: -640px;
}
#content-inner-3:target #content-inner {
  margin-left: -1280px;
}
#content-inner-4:target #content-inner {
  margin-left: -1920px;
}
#content-inner-5:target #content-inner {
  margin-left: -2560px;
}
#content-inner-6:target #content-inner {
  margin-left: -3200px;
}

ul#nav {
  margin: 1rem auto;
  display: table;
}

ul#nav > li {
  margin: 0 5px;
  background: #bababa;
  border-radius: 50%;
  float: left;
}
ul#nav > li:hover {
  box-shadow: inset 0 0 2px 2px #d4d4d4;
}
ul#nav > li:active {
  box-shadow: inset 0 0 2px 2px #7a7a7a;
}
ul#nav > li > a {
  height: 1rem;
  width: 1rem;
  display: block;
}