/* Version: 2.9.2*/

.tns-outer {
  padding: 0 !important; /* remove padding: clientWidth = width + padding (0) = width */
  [hidden] { display: none !important; }
  [aria-controls], [data-action] { cursor: pointer; }
}
.tns-inner {
  overflow: hidden;
}
.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 ****/
:root{
  --width: 310px;
  --height: 10px;
  --count: 70;
  --perpage: 3;
}


.tns-t {
  &-subp2 {
    margin: 0 auto;
    width: var(--width);
    position: relative;
    height: var(--height);
    overflow: hidden;
  }
  &-ct {
    width: calc(100% * var(--count) / var(--perpage));
    position: absolute;
    right: 0;
    &::after {
      content: '';
      display: table;
      clear: both;
    }
    > div {
      width: calc(100% / var(--count));
      height: var(--height);
      float: left;
    }
  }
}


/* CUSTOM */

.tns-nav {
  height: 0;
  position: relative;
  text-align: center;
  width: 100%;

  button {
    background-color: transparent;
    border: 0;
    height: var(--tap-target);
    outline: none; /* this is a client request and will have a negative effect on accessibility.*/
    padding: 0;
    width: var(--tap-target);

    &::after {
      border: 2px solid var(--border-color-carousel);
      border-radius: 50%;
      content: '';
      display: block;
      height: 12px;
      margin: 0 auto;
      width: 12px;

      @media all and (min-width: 47em) {
        height: 16px;
        width: 16px;
      }
    }
  }

  .tns-nav-active::after {
    background-color: var(--bg-color-carousel-nav-active);
  }

  
}

.tns-controls {
  button {
    border: 0;
    background: transparent;
    color: transparent;

    &[data-controls="prev"] {
      margin-top: 50%;
      left: 20px;
      position: absolute;
      z-index: 1;
      width: 61px;
      height: 61px;
      transform: rotate(180deg);

      &::before {
        content: '';
        color: var(--color-neutral-white);
        border-radius: 30px;
        background: rgba(255,255,255, 0);
        font-size: 25px;
        padding: 10px 26px 15px 29px;

        color: var(--primary-color);
      }

      &:hover {
        &::before {
          color: var(--primary-color);
        }
      }

      @media all and (max-width: 47em) {
        margin-top: calc(96px + 36%);
        left: 7px;
      }

      @media all and (min-width: 47em) {
        margin-top: 14%;
        left: -28px;
      }      
    }

    &[data-controls="next"] {
      margin-top: 50%;
      right: 20px;
      position: absolute;
      z-index: 1;
      width: 61px;
      height: 61px;

      &::before {
        content: '';
        color: var(--color-neutral-white);
        background: rgba(255,255,255, 0);
        border-radius: 30px;
        font-size: 25px;
        padding: 10px 26px 15px 29px;

        color: #FE8F3F;
      }

      &:hover {
        &::before {
          color: #FE8F3F;
        }
      }

      @media all and (max-width: 47em) {
        margin-top: calc(96px + 36%);
        right: 7px;
      }

      @media all and (min-width: 47em) {
        margin-top: 14%;
        right: -28px;
        /*//padding: 1rem;  Arrow size */
      }
    }

    /* &:focus-visible {
    //   outline: -webkit-focus-ring-color auto 1px;
    // }*/
  }
}

.c-hero--inner {
  .c-hero__body {
    bottom: 0;
    justify-content: center;
    top: 0;
  }
}