cui-carousel {
  display: block;
  position: relative;
  width: 640px;
  overflow: hidden; 
}

/*
cui-carousel.__toPrev {
    slide.__isPrev {
        z-index: 0;
    }
    slide.__isNext {
        z-index: 1;
    }
}

cui-carousel.__toNext {
    slide.__isPrev {
        z-index: 1;
    }
    slide.__isNext {
        z-index: 0;
    }
} */
.cui-carousel--arrows {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  z-index: 3; }

.cui-carousel--arrow {
  width: 56.668px;
  bottom: 0;
  top: 25%;
  position: absolute;
  height: 50%;
  opacity: .8; }
  .cui-carousel--arrow:hover {
    opacity: 1; }
  .cui-carousel--arrow:before, .cui-carousel--arrow:after {
    content: '';
    position: absolute;
    height: 25%;
    width: 4px;
    top: 25%;
    background-color: #fff; }

.cui-carousel--arrow-left {
  left: 0;
  -webkit-transform: rotateX(180deg);
          transform: rotateX(180deg); }
  .cui-carousel--arrow-left:before, .cui-carousel--arrow-left:after {
    left: 15px; }
  .cui-carousel--arrow-left:before {
    -webkit-transform-origin: top left;
        -ms-transform-origin: top left;
            transform-origin: top left;
    -webkit-transform: translate(0, 100%) rotate(-33deg);
        -ms-transform: translate(0, 100%) rotate(-33deg);
            transform: translate(0, 100%) rotate(-33deg); }
  .cui-carousel--arrow-left:after {
    -webkit-transform-origin: bottom left;
        -ms-transform-origin: bottom left;
            transform-origin: bottom left;
    -webkit-transform: translate(0, 0) rotate(33deg);
        -ms-transform: translate(0, 0) rotate(33deg);
            transform: translate(0, 0) rotate(33deg); }

.cui-carousel--arrow-right {
  right: 0; }
  .cui-carousel--arrow-right:before, .cui-carousel--arrow-right:after {
    right: 15px; }
  .cui-carousel--arrow-right:before {
    -webkit-transform-origin: top right;
        -ms-transform-origin: top right;
            transform-origin: top right;
    -webkit-transform: translate(0, 100%) rotate(33deg);
        -ms-transform: translate(0, 100%) rotate(33deg);
            transform: translate(0, 100%) rotate(33deg); }
  .cui-carousel--arrow-right:after {
    -webkit-transform-origin: bottom right;
        -ms-transform-origin: bottom right;
            transform-origin: bottom right;
    -webkit-transform: translate(0, 0) rotate(-33deg);
        -ms-transform: translate(0, 0) rotate(-33deg);
            transform: translate(0, 0) rotate(-33deg); }

.cui-carousel--indicators {
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  width: 50%;
  text-align: center;
  position: absolute;
  left: 25%;
  bottom: 15px;
  z-index: 3;
  margin: 0;
  padding: 0; }

.cui-carousel--indicator {
  display: inline-block;
  border-radius: 100%;
  width: 12px;
  height: 12px;
  background-color: #fff;
  margin: 0;
  padding: 0;
  opacity: .8; }
  .cui-carousel--indicator + .cui-carousel--indicator {
    margin-left: 12px; }
  .cui-carousel--indicator.__isActive {
    opacity: 1; }

cui-carousel slide {
  width: 100%;
  display: block;
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  /* overflow: hidden; */
  height: 100%;
  background-color: #f09;
  transition: -webkit-transform ease-in 1s;
  transition: transform ease-in 1s;
  transition: transform ease-in 1s, -webkit-transform ease-in 1s;
  z-index: -1;
  /* float: left; */ }
  cui-carousel slide.__isPrev {
    -webkit-transform: translateX(-100%);
        -ms-transform: translateX(-100%);
            transform: translateX(-100%);
    float: none;
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
    z-index: 1; }
  cui-carousel slide.__isNext {
    -webkit-transform: translateX(100%);
        -ms-transform: translateX(100%);
            transform: translateX(100%);
    float: none;
    z-index: 0; }
  cui-carousel slide.__isCurrent {
    -webkit-transform: translateX(0);
        -ms-transform: translateX(0);
            transform: translateX(0);
    -webkit-transform-origin: left;
        -ms-transform-origin: left;
            transform-origin: left;
    height: 100%;
    position: relative;
    float: left;
    z-index: 2; }

@-webkit-keyframes cuiCarouselNodeInserted {
  from {
    color: currentColor; }
  to {
    color: currentColor; } }

@keyframes cuiCarouselNodeInserted {
  from {
    color: currentColor; }
  to {
    color: currentColor; } }

cui-dialog {
  -webkit-animation-duration: .001s;
          animation-duration: .001s;
  -webkit-animation-name: cuiCarouselNodeInserted;
          animation-name: cuiCarouselNodeInserted; }