<div class="container">
    <input type="radio" name="slide-control" id="goto-slide-1" checked>
    <input type="radio" name="slide-control" id="goto-slide-2">
    <input type="radio" name="slide-control" id="goto-slide-3">
    <input type="radio" name="slide-control" id="goto-slide-4">
  <div class="reflect">
    <div class="horizon">
      <ul class="slideshow">
        <li class="slides slide-1"></li>
        <li class="slides slide-2"></li>
        <li class="slides slide-3"></li>
        <li class="slides slide-4"></li>
      </ul>
    </div>
  </div>
  <div class="controls">
    <label for="goto-slide-1">1</label>
    <label for="goto-slide-2">2</label>
    <label for="goto-slide-3">3</label>
    <label for="goto-slide-4">4</label>
  </div>
</div>

/*---- Feel free to alter these variables ----*/
@slideshow-diameter:700px;
@linked-transition-speed:0.5s;

/*---- Don't alter this ----*/
@slideshow-radius:@slideshow-diameter / 2;

/*---- Adopt "old IE" box-sizing model ----*/
* { box-sizing: border-box; }

/*---- Reset lists ---*/
.list-reset {
  margin:0;
  padding:0;
  list-style-type:none;
}

html, body { background:#212121; font-size:12px; }

/*---- Begin styles ----*/
.container {
  width:@slideshow-diameter + 2px;
  margin:2em auto;
  text-align:center;
}

.horizon {
  overflow:hidden;
  width:@slideshow-diameter;
  height:@slideshow-radius;
}

.reflect {
  box-reflect:below 4px -webkit-linear-gradient(top, rgba(0,0,0,0) 80%,rgba(0,0,0,0.1) 100%);
}

.controls {
  margin:10px 0 0 0;
  label {
  	display:inline-block;
    border:1px solid #666666;
    padding:4px 10px;
    box-shadow:0 -1px 3px rgba(0,0,0,0.95);
    background:#161616;
    z-index:10;
    color:#666666;
    font-weight:normal;
    cursor:pointer;
    &:hover {
    	border-color:#ddd;
      color:white;
    }
  }
}

.slideshow {
  .list-reset;
  width:@slideshow-diameter;
  height:@slideshow-diameter;
  position:relative;
  .slides {
  	.list-reset;
    display:block;
    position:absolute;
    height:@slideshow-radius;
    width:@slideshow-diameter;
    opacity:0;
    z-index:1;
    background-size:100% auto;
    transform:rotate(180deg);
    transform-origin:50% 100%;
    transition:	z-index 0 ease 0,
      					opacity 0 ease @linked-transition-speed,
      					transform @linked-transition-speed ease @linked-transition-speed;
    /*---- Decoration ----*/
    border:1px solid #121212;
    box-shadow:	inset 0 0 4px rgba(0,0,0,0.8),
      					inset 0 -2px 1px rgba(255,255,2555,0.4)
      					0 6px 8px rgba(0,0,0,0.8);
    &.slide-1 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(https://1.bp.blogspot.com/-hS8MULN0FTk/UEefAagxkqI/AAAAAAAAAfU/OC6JQ1mLYCk/s1600/ak.jpg) no-repeat left 20%;
    }
    &.slide-2 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://focusdynaresearch.files.wordpress.com/2012/09/winter-is-coming-game-of-thrones-1.jpeg) no-repeat left 2%;
    }
    &.slide-3 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://www.google.co.in/url?source=imgres&ct=img&q=http://3.bp.blogspot.com/-Lgxi6i9PqNU/T5izGCbCIEI/AAAAAAAAAUw/nStMbOGX4uU/s1600/game-of-thrones-tyrion-lannister-iquote-16x16-poster-par45701.jpg&sa=X&ei=SoBGUJPFLI-yrAfo-YA4&ved=0CAQQ8wc4AQ&usg=AFQjCNHTgYRzzVyP85fb6YhdYuYiRFvsJw) no-repeat left 55%;
    }
    &.slide-4 {
      top:0;
      left:0;
      border-radius:@slideshow-radius @slideshow-radius 0 0;
      background:url(http://www.google.co.in/url?source=imgres&ct=img&q=http://www.birchbox.com/images/sized/images/uploads/game_of_thrones_blue-480x318.jpg&sa=X&ei=ootGUPWpIITirAf4oIDwBQ&ved=0CAQQ8wc&usg=AFQjCNFXuJOup8Y2ClykpsycXa9wpwRPyw) 12%;
    }
  }
}

input[type="radio"] {
  margin:-20px 0 0 -50px;
  display:none;
  &#goto-slide-1 {
  	&:checked ~ .reflect .horizon {
      .slide-1 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
  &#goto-slide-2 {
  	&:checked ~ .reflect .horizon {
      .slide-2 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
  &#goto-slide-3 {
  	&:checked ~ .reflect .horizon {
      .slide-3 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
  &#goto-slide-4 {
  	&:checked ~ .reflect .horizon {
      .slide-4 {
        opacity:1;
        z-index:5;
        transform:rotate(0deg);
        transition:	z-index 0 ease 0s,
          					transform @linked-transition-speed ease 0s,
          					opacity @linked-transition-speed ease 0s;
      }
    }
  }
}

/*---- Images from The Devil Tarot: http://devilskitchen.net/pages/the-devil-tarot.php ----*/

/*---- I must finish that set someday ----*/