.tao-carousel {display: none; width: 100%; position: relative; z-index: 1; -webkit-tap-highlight-color: transparent;
  .tao-stage, .tao-wrapper, .tao-item {
    position: relative; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; -ms-backface-visibility: hidden; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
    .tao-stage {
      &:after {content: ""; display: block; clear: both; visibility: hidden; height: 0; }
    }
    .tao-stage-outer {overflow: hidden; }
    .tao-item {min-height: 1px; float: left; -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
      img {width: 100%; }
    }
    .tao-nav.disabled, .tao-dots.disabled {display: none; }
    .tao-nav .tao-prev, .tao-nav .tao-next, .tao-dot {cursor: pointer; user-select: none; background: none; border: none; }
    &.tao-loaded, &.tao-loading, &.tao-hidden {display: block; }
    &.tao-loading, &.tao-hidden {opacity: 0; }
    &.tao-refresh .tao-item {visibility: hidden; }
    &.tao-drag .tao-item {touch-action: pan-y; user-select: none; }
    &.tao-grab {cursor: grab; }
    .animated {animation-duration: 500ms; animation-fill-mode: both; }

    @keyframes fadeOut {0% { opacity: 1; } 100% { opacity: 0; } }

    .tao-lazy {opacity: 0; transition: opacity 400ms ease; 
      &[src^=""], &:not([src]) {max-height: 0; } 
    }
    .tao-videoWrapper {height: 100%; background: #000; }
    .tao-video-play-icon {position: absolute; height: 80px; width: 80px; left: 50%; top: 50%; margin-left: -40px; margin-top: -40px; background: url("tao.video.play.png") no-repeat; cursor: pointer; z-index: 1; transition: transform 100ms ease;
      &:hover {transform: scale(1.3); }
    }
    .tao-video-tn {opacity: 0; height: 100%; background-position: center; background-repeat: no-repeat; background-size: contain; transition: opacity 400ms ease; }
    .tao-video-frame {height: 100%; width: 100%; }
    .tao-nav {
      .tao-prev {left: -10%; }
      .tao-next {right: -10%; }
      button {position: absolute; top: 50%; transform: translateY(-50%); transition:all .5s ease; 
        span {
            &:hover{ color:var(--primary);}
            &:after {color: var(--white); content: "\f136"; cursor: pointer; font-size: 2rem; line-height: 1; height: 30px; width: 30px; display: block; transition: all .3s ease; font-family: bootstrap-icons !important; 
              &:hover {background: var(--primary); color: var(--primary); } 
            }   
        } 
        &.tao-prev span:after {content: "\f12d"; } 
      }
    }
    &.tao-theme {
      .tao-nav [class*='tao-'] {background: none; margin: 0; padding: 0 !important; 
        span {background: var(--primary);
             &:hover{ color:var(--primary);}
        } 
      } 
    }
  &:hover {
    .tao-nav {transition:all .5s ease;
      .tao-prev {left: 1%;  }
      .tao-next {right:1%; }
    }
  }
}

.no-js .tao-carousel {display: block; }
.tao-height {transition: height 500ms ease-in-out; }

.tao-theme {
  .tao-nav {display: flex; justify-content: space-between; text-align: center; 
    [class*='tao-'] {color: #FFF; font-size: 0; line-height: 0; margin: 5px; padding: 4px 7px; background: #D6D6D6; border-radius: 3px;
      &:hover {background: #869791; }
    } 
  }
  .tao-dots {text-align: center; 
    .tao-dot span {width: 10px; height: 10px; margin: 5px 7px; background: #D6D6D6; border-radius: 30px; transition: opacity 200ms ease; 
      &.active, &:hover {background: #869791; } 
    } 
  }
}