@import url(http://fonts.googleapis.com/css?family=Inconsolata);

* {
  box-sizing: border-box;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  -ms-box-sizing: border-box
}

body { font-family: "Inconsolata", mono; background-color:#222; }

.wrapper {
  max-width: 1140px;
  margin: 150px auto
}

.slideshow-items {
  position: relative;
  display: block;
  overflow: hidden
}

.slideshow-item {
  opacity: 0;
  position: absolute;
  top: 0;
  left: 0;
  list-style: none;
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
  -webkit-transition: opacity .3s ease-in-out, -webkit-transform .3s ease-in-out;
  -moz-transition: opacity .3s ease-in-out, -moz-transform .3s ease-in-out;
  -ms-transition: opacity .3s ease-in-out, -ms-transform .3s ease-in-out
}

.slideshow-item.apos-current { opacity: 1 }

.slideshow-item.apos-next { transform: translate3d(100%, 0, 0) }

.slideshow-item.apos-previous { transform: translate3d(-100%, 0, 0) }

.slideshow-item.apos-other { transform: translate3d(0, 0, 0) }

.slideshow-item .slideshow-item-html {
  position: absolute;
  background: white;
  top: 20px;
  left: 20px;
  padding: 30px
}

.slideshow-item img {
  max-width: 100%;
  cursor: pointer
}

.previous, .next {
  position: relative;
  width: 49%;
  display: inline-block;
  padding: 5px 1%;
  color: #fff;
  text-align: center;
  text-decoration: none;
  background: #34BC9D
}

.previous { margin-right: 2% }

.pagers { padding: 0 }

.pagers li {
  list-style: none;
  position: relative;
  width: 31%;
  margin-right: 2%;
  display: inline-block;
  padding: 5px 1%;
  cursor: pointer;
  color: #fff;
  text-align: center;
  background: #34BC9D
}

.pagers li:last-child { margin-right: 0 }

.pagers li.apos-current { background: #bbb }