.slider-frame {
  background-color: #fff;
  box-shadow: inset 0 0 2px hsla(0, 0%, 0%, 0.2),
    0 3px 1px hsla(0, 0%, 100%, 0.75), 0 -1px 1px 2px hsla(0, 0%, 0%, 0.1);
  height: 20.75em;
  left: 50%;
  margin: -9.875em -13em;
  padding: 0.5em;
  position: relative;
  top: 50%;
  width: 28em;
}

/* Frame */

.slider-frame:before {
  background-color: #000;
  bottom: -2.5em;
  box-shadow: inset 0 1px 1px 1px hsla(0, 0%, 100%, 0.2),inset 0 -2px 1px hsla(0, 0%, 0%, 0.4), 0 5px 50px hsla(0, 0%, 0%, 0.25),0 20px 20px -15px hsla(0, 0%, 0%, 0.2),
    0 30px 20px -15px hsla(0, 0%, 0%, 0.15),
    0 40px 20px -15px hsla(0, 0%, 0%, 0.1);
  content: "";
  left: -2.5em;
  position: absolute;
  right: -2.5em;
  top: -2.5em;
  z-index: -1;
}

/* Mat */

.slider-frame:after {
  background-color: #fff5e5;
  bottom: -1.5em;
  box-shadow: 0 2px 1px hsla(0, 0%, 100%, 0.2),
    0 -1px 1px 1px hsla(0, 0%, 0%, 0.4),
    inset 0 2px 3px 1px hsla(0, 0%, 0%, 0.2),
    inset 0 4px 3px 1px hsla(0, 0%, 0%, 0.2),
    inset 0 6px 3px 1px hsla(0, 0%, 0%, 0.1);
  content: "";
  left: -1.5em;
  position: absolute;
  right: -1.5em;
  top: -1.5em;
  z-index: -1;
}

/* Slides */

.slider-frame li {
  box-shadow: 0 -1px 0 2px hsla(0, 0%, 0%, 0.03);
  list-style: none;
  position: absolute;
}
.slider-frame input {
  display: none;
}

/* Navigation */

.slider-frame label {
  background-color: #111;
  background-image: linear-gradient(transparent, hsla(0, 0%, 0%, 0.25));
  border: 0.2em solid transparent;
  bottom: 0.5em;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  height: 0.5em;
  left: 24em;
  opacity: 0;
  position: absolute;
  transition: 0.25s;
  width: 0.5em;
  visibility: hidden;
  z-index: 10;
}
.slider-frame label:after {
  border-radius: 100%;
  bottom: -0.2em;
  box-shadow: inset 0 0 0 0.2em #111, inset 0 2px 2px #000,
    0 1px 1px hsla(0, 0%, 100%, 0.25);
  content: "";
  left: -0.2em;
  position: absolute;
  right: -0.2em;
  top: -0.2em;
}
.slider-frame:hover label {
  opacity: 1;
  visibility: visible;
}
.slider-frame input:checked + label {
  background-color: #fff;
}
.slider-frame:hover li:nth-child(1) label {
  left: 0.5em;
}
.slider-frame:hover li:nth-child(2) label {
  left: 2em;
}
.slider-frame:hover li:nth-child(3) label {
  left: 3.5em;
}
.slider-frame:hover li:nth-child(4) label {
  left: 5em;
}

/* Images */

.slider-frame img {
  height: 19.75em;
  opacity: 0;
  transition: 0.25s;
  width: 25em;
  vertical-align: top;
  visibility: hidden;
}
.slider-frame li input:checked ~ img {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}




/* timeline */