.xn-viewport {

  width: 100%;
  
  overflow: hidden;
  -webkit-overflow-scrolling: touch;
  position: relative;

  .xn-overview {
    padding: 0; margin: 0; position: relative;
    height: 100%;

    .xn-carousel-item {
      width: 100%;

      .thumbnail-wrapper {
        .thumbnail {
          width: 100%;
        }
      }
    }
  }


  div[class*='-indicator'] {
    opacity: 0;
    position: absolute;
    cursor: pointer;
    transition: opacity 1s;
    background-color: black;
    color: white;
    z-index: 100;
  }

  .xn-left-indicator {
    left: 0;

    .xn-triangle-left {
      width: 0;
      height: 0;
      border-right: 20px solid white;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      float: right;
      margin-top: 35%;
      margin-right: 35%;
    }
  }

  .xn-right-indicator {
    right: 0;

    .xn-triangle-right {
      width: 0;
      height: 0;
      border-left: 20px solid white;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      float: left;
      margin-top: 35%;
      margin-left: 35%;
    }
  }

  &:hover {
    div[class*='-indicator'] {
      opacity: 0.7;
    }
  }

  &:after { clear: both; }


}

.xn-pagination {
  height: 22%;
  width: 100%;
  position: relative;
  bottom: 0px;
  z-index: 1000;
  margin: 0 auto;

  .item-container {
    height: 100%;
    display: block;
    text-align: center;
    line-height: 38%;
    margin: 0 auto;
    padding: 0;

    .item {
      width: 18px;
      height: 15px;
      background: #ccc;
      -webkit-border-radius: 50%;
      -moz-border-radius: 50%;
      border-radius: 50%;
      -webkit-box-shadow: inset 1px 1px 5px 0px #646464;
      -moz-box-shadow: inset 1px 1px 5px 0px #646464;
      box-shadow: inset 1px 1px 5px 0px #646464;
      text-indent: 100%;
      white-space: nowrap;
      overflow: hidden;
      display: inline-block;
      margin: 0 1%;
      cursor: pointer;

      &:hover {
        background: #999;
      }

      &.selected {
        background: #66a0d7;
      }
    }
  }
}

.noSelect {
  user-select: none;
  -o-user-select: none;
  -moz-user-select: none;
  -khtml-user-select: none;
  -webkit-user-select: none;
}