.slider
  position: relative
  overflow: hidden
  width: 100%
  text-align: center

.slider__list
  height: 100%
  padding: 0
  margin: 0
  overflow: hidden
  list-style: none
  *zoom: 1
  +backface-visibility(hidden)
  +transform-style(preserve-3d)

.slider__item
  display: block
  width: 100%

  img
    display: block
    width: 100%
    height: auto

.slider__controls
  display: none

.slider__nav
  position: relative
  margin: rem(10) 0
  text-align: center

.slider__nav-item
  width: rem(24)
  height: rem(24)
  clear: none
  display: inline-block
  margin: 0 rem(6)
  background-color: $secondary-color
  border: rem(6) solid $white
  border-radius: 100%

// ----------------------------------------------------------
// STATES
// ----------------------------------------------------------
.slider__nav-item:hover,
.slider__nav-item--active
  background-color: $primary-color