/*
!* Images from Craig Henry's Dribbble profile: http://dribbble.com/craighenry *!

!**********!
!* Slider *!
!**********!

.slider {
  height: 28.75em;
  !* background-color: #fff;
  box-shadow: inset 0 0 2px hsla(0,0%,0%,.2),
              0 3px 1px hsla(0,0%,100%,.75),
              0 -1px 1px 2px hsla(0,0%,0%,.1);
  height: 18.75em;
  left: 50%;
  margin: -9.875em -13em;
  padding: .5em;
  position: absolute;
  top: 50%;
  width: 25em; *!
}

!* Frame *!

!* .slider:before {
  background-color: #22130c;
  bottom: -2.5em;
  box-shadow: inset 0 1px 1px 1px hsla(0,0%,100%,.2),
              inset 0 -2px 1px hsla(0,0%,0%,.4),
              0 5px 50px hsla(0,0%,0%,.25),
              0 20px 20px -15px hsla(0,0%,0%,.2),
              0 30px 20px -15px hsla(0,0%,0%,.15),
              0 40px 20px -15px hsla(0,0%,0%,.1);
  content: '';
  left: -2.5em;
  position: absolute;
  right: -2.5em;
  top: -2.5em;
  z-index: -1;
} *!

!* Mat *!

!* .slider:after {
  background-color: #fff5e5;
  bottom: -1.5em;
  box-shadow: 0 2px 1px hsla(0,0%,100%,.2),
              0 -1px 1px 1px hsla(0,0%,0%,.4),
              inset 0 2px 3px 1px hsla(0,0%,0%,.2),
              inset 0 4px 3px 1px hsla(0,0%,0%,.2),
              inset 0 6px 3px 1px hsla(0,0%,0%,.1);
  content: '';
  left: -1.5em;
  position: absolute;
  right: -1.5em;
  top: -1.5em;
  z-index: -1;
} *!

!* Slides *!

.slider li {
  box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
  list-style:none;
  position: absolute;
}
.slider input {
  display: none;
}

!* Navigation *!

.slider label {
  background-color: #111;
  background-image: linear-gradient(transparent, hsla(0,0%,0%,.25));
  border: .2em solid transparent;
  bottom: .5em;
  border-radius: 100%;
  cursor: pointer;
  display: block;
  height: .5em;
  left: 24em;
  opacity: 0;
  position: absolute;
  transition: .25s;
  width: .5em;
  visibility: hidden;
  z-index: 10;
}
.slider label:after {
  border-radius: 100%;
  bottom: -.2em;
  box-shadow: inset 0 0 0 .2em #111,
              inset 0 2px 2px #000,
              0 1px 1px hsla(0,0%,100%,.25);
  content: '';
  left: -.2em;
  position: absolute;
  right: -.2em;
  top: -.2em;
}
.slider:hover label {
  opacity: 1;
  visibility: visible;
}
.slider input:checked + label {
  background-color: #fff;
}
.slider:hover li:nth-child(1) label {
  left: .5em;
}
.slider:hover li:nth-child(2) label {
  left: 2em;
}
.slider:hover li:nth-child(3) label {
  left: 3.5em;
}
.slider:hover li:nth-child(4) label {
  left: 5em;
}

!* Images *!

.slider img {
  height: 28.75em;
  opacity: 0;
  transition: .25s;
  !*width: 25em;*!
  width: auto;
  vertical-align: top;
  visibility: hidden;
}
.slider li input:checked ~ img {
  opacity: 1;
  visibility: visible;
  z-index: 10;
}


@media (min-width: 768px){
  !* Menu items *!
  .slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style:none;
    position: absolute;
    right: 26%;
  }
}


@media (min-width: 900px){
  .slider li {
    box-shadow: 0 -1px 0 2px hsla(0,0%,0%,.03);
    list-style:none;
    position: absolute;
    right: 30%;
  }
}

*/
