// Version: 2.9.3

.tns-outer {
  padding: 0 !important; // remove padding: clientWidth = width + padding (0) = width

  [hidden] {
    display: none !important;
  }

  [aria-controls],
  [data-action] {
    cursor: pointer;
  }
}

.tns-slider {
  -webkit-transition: all 0s;
  -moz-transition   : all 0s;
  transition        : all 0s;

  >.tns-item {
    -webkit-box-sizing: border-box;
    -moz-box-sizing   : border-box;
    box-sizing        : border-box;
  }
}

.tns-horizontal {
  &.tns-subpixel {
    white-space: nowrap;

    >.tns-item {
      display       : inline-block;
      vertical-align: top;
      white-space   : normal;
    }
  }

  &.tns-no-subpixel {
    &:after {
      content: '';
      display: table;
      clear  : both;
    }

    >.tns-item {
      float: left;
    }
  }

  &.tns-carousel {
    &.tns-no-subpixel {
      >.tns-item {
        margin-right: -100%;
      }
    }
  }
}

.tns-no-calc {
  position: relative;
  left    : 0;
}

.tns-gallery {
  position  : relative;
  left      : 0;
  min-height: 1px; // make sure slider container is visible

  // overflow: hidden;
  >.tns-item {
    position          : absolute;
    left              : -100%;
    -webkit-transition: transform 0s, opacity 0s;
    -moz-transition   : transform 0s, opacity 0s;
    transition        : transform 0s, opacity 0s;
  }

  >.tns-slide-active {
    position: relative;
    left    : auto !important;
  }

  >.tns-moving {
    -webkit-transition: all 0.25s;
    -moz-transition   : all 0.25s;
    transition        : all 0.25s;
  }
}

.tns-autowidth {
  display: inline-block;
}

.tns-lazy-img {
  -webkit-transition: opacity 0.6s;
  -moz-transition   : opacity 0.6s;
  transition        : opacity 0.6s;
  opacity           : 0.6;

  &.tns-complete {
    opacity: 1;
  }
}

.tns-ah {
  -webkit-transition: height 0s;
  -moz-transition   : height 0s;
  transition        : height 0s;
}

.tns-ovh {
  overflow: hidden;
}

.tns-visually-hidden {
  position: absolute;
  left    : -10000em;
}

.tns-transparent {
  opacity   : 0;
  visibility: hidden;
}

.tns-fadeIn {
  opacity: 1;
  filter : alpha(opacity=100);
  z-index: 0;
}

.tns-normal,
.tns-fadeOut {
  opacity: 0;
  filter : alpha(opacity=0);
  z-index: -1;
}


// *** Fix a viewport issue in initialization
.tns-vpfix {
  white-space: nowrap;

  >div,
  >li {
    display: inline-block;
  }
}

// *** Detecting browser capability ***
$width  : 310px;
$height : 10px;
$count  : 70;
$perpage: 3;

.tns-t {
  &-subp2 {
    margin  : 0 auto;
    width   : $width;
    position: relative;
    height  : $height;
    overflow: hidden;
  }

  &-ct {
    width   : (100% * $count / $perpage);
    width   : -webkit-calc(100% * #{$count} / #{$perpage});
    width   : -moz-calc(100% * #{$count} / #{$perpage});
    width   : calc(100% * #{$count} / #{$perpage});
    position: absolute;
    right   : 0;

    &:after {
      content: '';
      display: table;
      clear  : both;
    }

    >div {
      width : (100% / $count);
      width : -webkit-calc(100% / #{$count});
      width : -moz-calc(100% / #{$count});
      width : calc(100% / #{$count});
      height: $height;
      float : left;
    }
  }
}

// MAX

.tns-nav {
  text-align: center;
}

.tns-nav button {
  border-radius: var(--nav-bor-radius, 5px);
  background   : var(--nav-bg, #B8BEC3);
  margin       : var(--nav-mar, 0 3px);
  height       : var(--nav-height, 10px);
  width        : var(--nav-width, 20px);
  border       : none;
  box-shadow   : none;
  outline      : none;
}

button.tns-nav-active {
  background: var(--nav-bg-active, #4D94CE);
}