.slider {
  width: 100%;
  height: 600px;
  margin: 20px auto;
  overflow: hidden;
  position: relative; }
  .slider .slides {
    width: inherit; }
    .slider .slides .slide {
      width: inherit;
      display: none;
      opacity: 0;
      position: absolute;
      top: 0%;
      left: 0%; }
      .slider .slides .slide.active {
        display: block;
        opacity: 1; }
  .slider .sliderNavBtn {
    width: 60px;
    height: 60px;
    top: 50%;
    position: absolute;
    background-size: 120px 120px;
    background-repeat: no-repeat;
    text-indent: -9999px;
    text-decoration: none;
    display: block;
    cursor: pointer; }
    .slider .sliderNavBtn.prev {
      left: 10px;
      background-image: url("../images/slider/sliderArrows.png");
      background-position: 0% 0%; }
      @media only screen and (min-resolution: 180dpi) {
        .slider .sliderNavBtn.prev {
          background-image: url("../images/slider/sliderArrows-2x.png"); } }
      @media only screen and (max-width: 1023px) {
        .slider .sliderNavBtn.prev {
          background-image: url("../images/slider/sliderArrows-2x.png"); } }
      .slider .sliderNavBtn.prev:hover {
        background-position: 0% 100%; }
    .slider .sliderNavBtn.next {
      right: 10px;
      background-image: url("../images/slider/sliderArrows.png");
      background-position: 100% 0%; }
      @media only screen and (min-resolution: 180dpi) {
        .slider .sliderNavBtn.next {
          background-image: url("../images/slider/sliderArrows-2x.png"); } }
      @media only screen and (max-width: 1023px) {
        .slider .sliderNavBtn.next {
          background-image: url("../images/slider/sliderArrows-2x.png"); } }
      .slider .sliderNavBtn.next:hover {
        background-position: 100% 100%; }
  .slider .sliderIndicators {
    top: 550px;
    width: 120px;
    height: 10px;
    display: block;
    position: relative;
    margin: 0 auto; }
    .slider .sliderIndicators a {
      width: 10px;
      height: 10px;
      float: left;
      position: relative;
      margin: 0 5px;
      display: block;
      text-decoration: none;
      background: #ccc;
      -webkit-border-radius: 5px;
      -moz-border-radius: 5px;
      -ms-border-radius: 5px;
      -o-border-radius: 5px;
      border-radius: 5px;
      cursor: pointer; }
      .slider .sliderIndicators a:hover {
        background: #999; }
      .slider .sliderIndicators a.active {
        background: #666; }