body {
  padding: 0;
  margin: 0; }

.slippery {
  margin: 0 auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0; }
  .slippery__wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    z-index: 1;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    -webkit-transform: translateX(0);
    -ms-transform: translateX(0);
    transform: translateX(0); }
  .slippery__item {
    width: 100%;
    -webkit-align-self: flex-start;
    -ms-flex-item-align: start;
    align-self: flex-start;
    font-size: 40px;
    -webkit-flex-shrink: 0;
    -ms-flex-negative: 0;
    flex-shrink: 0;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none; }
    .slippery__item img {
      display: block;
      max-width: 100%;
      width: 100%; }
  .slippery__nav {
    position: absolute;
    top: 20%;
    left: 0;
    z-index: 2;
    width: 100%;
    -webkit-transform: translate(0, -20%);
    -ms-transform: translate(0, -20%);
    transform: translate(0, -20%); }
  .slippery__nav-button {
    position: absolute;
    background-color: transparent;
    border: 0;
    color: #25b5a9;
    font-size: 100px;
    line-height: 1;
    top: 0;
    outline: 0;
    -webkit-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear; }
    .slippery__nav-button:hover:not(.slider__nav-button--disabled) {
      cursor: pointer;
      color: #21a095; }
    .slippery__nav-button--prev {
      left: 0; }
    .slippery__nav-button--next {
      right: 0; }
    .slippery__nav-button--disabled {
      color: gray; }
      .slippery__nav-button--disabled:hover {
        cursor: not-allowed; }
  .slippery__dots {
    list-style-type: none;
    padding: 0;
    margin: 0 -5px;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    position: absolute;
    z-index: 2;
    bottom: 20px;
    left: 50%;
    -webkit-transform: translate(-50%, 0);
    -ms-transform: translate(-50%, 0);
    transform: translate(-50%, 0); }
  .slippery__dots-item {
    width: 10px;
    height: 10px;
    background-color: #25b5a9;
    -webkit-border-radius: 50%;
    border-radius: 50%;
    margin: 0 5px;
    cursor: pointer;
    opacity: .5;
    -webkit-transition: color .15s linear;
    -o-transition: color .15s linear;
    transition: color .15s linear; }
    .slippery__dots-item:hover:not(.slider__dots-item--active) {
      opacity: 1; }
    .slippery__dots-item--active {
      opacity: 1;
      cursor: default; }