/**
*  rIno Carousel CSS3 Transitions
*  v1.3.2
**/
.carousel {
  .carousel-indicators {
    li {
      background-color: $brand-white;
      border: 2px solid $brand-white;
    }
  }
}

.carousel_multi_6 {
  .carousel-inner {
    .item {
      z-index: 0;
      @include transition(all .1s ease-in-out !important);
    }
    > .item.active.right {
      @include translate3d(0%, 0%, 0);
      left: 50%;
    }
    > .item.active.left {
      @include translate3d(0%, 0, 0);
      left: -50%;
    }
    > .item.next{
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.prev {
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.active {
      @include translate3d(0%, 0, 0);
    }
    .active > div:first-child {
      display: block;
    }
    .active > div:first-child + div {
      display: block;
    }
    .active > div:last-child {
      display: none;
    }
  }
}
.carousel_multi_4 {
  .carousel-inner {
    .item {
      z-index: 0;
      @include transition(all .1s ease-in-out !important);
    }
    > .item.active.right {
      @include translate3d(0%, 0%, 0);
      left: 33% !important;
    }
    > .item.active.left {
      @include translate3d(0%, 0, 0);
      left: -33% !important;
    }
    > .item.next{
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.prev {
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.active {
      @include translate3d(0%, 0, 0);
    }
    .active > div:first-child {
      display: block;
    }
    .active > div:first-child + div {
      display: block;
    }
    .active > div:last-child {
      display: none;
    }
  }
}
.carousel_multi_3 {
  .carousel-inner {
    .item {
      z-index: 0;
      @include transition(all .1s ease-in-out !important);
    }
    > .item.active.right {
      @include translate3d(0%, 0%, 0);
      left: 25%;
    }
    > .item.active.left {
      @include translate3d(0%, 0, 0);
      left: -25%;
    }
    > .item.next{
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.prev {
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.active {
      @include translate3d(0%, 0, 0);
    }
    .active > div:first-child {
      display: block;
    }
    .active > div:first-child + div {
      display: block;
    }
    .active > div:last-child {
      display: none;
    }
  }
}
.carousel_multi_2 {
  .carousel-inner {
    .item {
      z-index: 0;
      @include transition(all .1s ease-in-out !important);
    }
    > .item.active.right {
      @include translate3d(0%, 0%, 0);
      left: 16.666666%;
    }
    > .item.active.left {
      @include translate3d(0%, 0, 0);
      left: -16.666666%;
    }
    > .item.next{
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.prev {
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.active {
      @include translate3d(0%, 0, 0);
    }
    .active > div:first-child {
      display: block;
    }
    .active > div:first-child + div {
      display: block;
    }
    .active > div:last-child {
      display: none;
    }
  }
}
.carousel_multi_1 {
  .carousel-inner {
    .item {
      z-index: 0;
      @include transition(all .1s ease-in-out !important);
    }
    > .item.active.right {
      @include translate3d(0%, 0%, 0);
      left: 8.333%;
    }
    > .item.active.left {
      @include translate3d(0%, 0, 0);
      left: -8.333%;
    }
    > .item.next{
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.prev {
      @include translate3d(0%, 0, 0);
      display: none;
    }
    > .item.active {
      @include translate3d(0%, 0, 0);
    }
    .active > div:first-child {
      display: block;
    }
    .active > div:first-child + div {
      display: block;
    }
    .active > div:last-child {
      display: none;
    }
  }
}



/* Carousel Multi Masonry  Style*/
.slider-masonry{
  .item{
    .slide{

      &:hover{
        .item-img{
          a {
            @include scale(1.2);
          }
        }
      }
      .inner-wrap{
        overflow: hidden;
        background-color: $color-white;
        @include box-shadow(3px 3px 15px $color-rg-black-3);
        @include rounded(5px);
      }
      .item-img{
        position: relative;
        height: 150px;
        overflow: hidden;
        a {
          position: absolute;
          top: 0px;
          left: 0px;
          height: 100%;
          width: 100%;
          background-size: cover;
          transition: all .4s ease-in-out;
        }
      }
      .item-title{

      }
    }
  }
}
/**
*  rIno Carousel CSS3 Transitions
*  v1.3.2
**/


.carouselDia {
  .carousel-inner {
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      display: inherit;
      z-index: 0;
      @include transition(.4s ease-in-out top);
      img {
        @include transform-matrix(0.477,-0.162,-0.012,0.608,-39.069,-13.520);
        @include box-shadow( 10px 10px 7px rgba(0, 0, 0, 0.3));
        border: 1px solid $color-grey-f;
      }
      .text-slide{
        display: none;
      }
    }
    .active{
      top: 0%;
      z-index: 25;
      img {
        @include transform-matrix(0.477, -0.162, -0.012, 0.608, 0, 0);
      }
      .text-slide{
        display: inherit;
      }
    }
    .prev,
    .active.left{
      top: 100%;
      z-index: 15;
    }
    .next,
    .active.right{
      top: -5%;
      z-index: 25;
    }
    .out{
      z-index: -15;
      top: 0px;
      img {
        @include transform-matrix(0.477,-0.162,-0.012,0.608,-62.516,-32.264);
      }
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}

.carouselScale {
  .carousel-inner {
    .item {
      @include scale(0.8);
      @include transition(all 0.8s ease-in-out);
    }
    .item.next.left, .item.prev.right{
      @include scale(0.8);

    }
    .item.active{
      @include scale(0.8);
    }
    .out{
      @include scale(0.8);
    }
  }
}
.carouselScaleSlide{
  .carousel-inner {

    .item {
      @include scale(0.8);
      @include transition(all .8s ease-in-out);
    }
    > .item.prev, > .item.active.left{
      @include scale(0.8);
      @include translate3d(-120%, 0, 0);
    }
    > .item.next, > .item.active.right{
      @include scale(0.8);
      @include translate3d(120%, 0, 0);
    }
    .item.next.left, .item.prev.right{
      @include scale(0.8);
    }
    .item.active{
      @include scale(1);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}

.carouselSlideAbsLeft {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      z-index: -100;
      display: inherit;
      @include transition(all .5s ease-in-out);
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    >.item.next.left{
      @include translate3d(0, 0%, 0);
    }
    > .item.prev, > .item.active.left{
      @include translate3d(-100%, 0, 0);
      z-index: 200;
    }
    > .item.next, > .item.active.right{
      @include translate3d(100%, 0, 0);
      z-index: 200;
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
      left:0;
    }
    .out{
      z-index: -100;
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselSlideFade {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      z-index: -100;
      display: inherit;
      opacity: 0;
      @include transition(all .4s ease-in-out);
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include translate3d(100%, 0%, 0);
      opacity: 0;
    }
    > .item.active.left{
      @include translate3d(0%, 0, 0);
      z-index: 200;
    }
    > .item.active.right{
      @include translate3d(0%, 0, 0);
      z-index: 200;
    }
    .item.prev, .item.prev.right{
      @include translate3d(-100%, 0, 0);
      opacity: 0;
    }
    > .item.active{
      @include translate3d(0, 0, 0);
      opacity: 1;
      left:0;
    }
    .out{
      z-index: -100;
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselSlideTopFade {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      z-index: -100;
      display: inherit;
      opacity: 0;
      @include transition(all .5s ease-in-out);
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include translate3d(0%, -100%, 0);
      opacity: 0;
    }
    > .item.active.left{
      @include translate3d(0%, 0, 0);
      z-index: 200;
    }
    > .item.active.right{
      @include translate3d(0%, 0, 0);
      z-index: 200;
    }
    .item.prev, .item.prev.right{
      @include translate3d(0%, 100%, 0);
      opacity: 0;
    }
    > .item.active{
      @include translate3d(0, 0, 0);
      opacity: 1;
      left:0;
    }
    .out{
      z-index: -100;
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselRotate {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      z-index: -100;
      display: inherit;
      @include transition(all .5s ease-in-out);
      -webkit-transform-style: preserve-3d;
      transform-style: preserve-3d;
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include translate3d(0%, 0%, 0%);
      @include scale(0.9);
      @include rotateY(-180deg);
      @include transform-origin(100% 0%);
      @include backface-visibility(visible);
    }
    > .item.active.left{
      @include translate3d(0%, 0%, 0%);
      @include scale(0.9);
      @include rotateY(180deg);
      @include transform-origin(0% 100%);
      z-index: 200;
    }
    > .item.active.right{
      @include translate3d(0%, 0%, 0%);
      @include scale(0.9);
      @include rotateY(-180deg);
      @include transform-origin(100% 0%);
      z-index: 200;
    }
    .item.prev, .item.prev.right{
      @include translate3d(0%, 0%, 0%);
      @include scale(0.9);
      @include rotateY(180deg);
      @include transform-origin(0% 40%);
    }
    > .item.active{
      @include translate3d(0, 0, 0);

      left:0;
    }
    .out{
      z-index: -100;
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselSlideAbsRight {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      z-index: -100;
      display: inherit;
      @include transition(all .5s ease-in-out);
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    >.item.next.left{
      @include translate3d(0, 0%, 0);
    }
    > .item.prev, > .item.active.left{
      @include translate3d(100%, 0, 0);
      z-index: 200;
    }
    > .item.next, > .item.active.right{
      @include translate3d(-100%, 0, 0);
      z-index: 200;
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
      left:0;
    }
    .out{
      z-index: -100;
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselFade {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      z-index: -100;
      @include transition(all .3s linear);
    }
    .active{
      z-index: 200;
      opacity: 1;
    }
    >.item.next.left{
      @include translate3d(0, 0, 0);
    }
    > .item.prev, > .item.active.left{
      @include translate3d(0, 0, 0);
      opacity: 0;
      z-index: 200;
    }
    > .item.next, > .item.active.right{
      opacity: 0;
      z-index: 200;
      @include translate3d(0, 0, 0);
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
      left:0;
    }
    .out{
      z-index: -100;
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselUpDown{
  .carousel-inner {
    .item {
      @include transition(all .5s ease-in-out);
    }
    >.item.next.left{
      @include translate3d(0, 0, 0);
    }
    > .item.prev, > .item.active.left{
      @include translate3d(0, 100%, 0);
      z-index: 200;
    }
    > .item.next, > .item.active.right{
      @include translate3d(0, -100%, 0);
      z-index: 200;
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselDownUp{
  .carousel-inner {
    .item {
      @include transition(all .5s ease-in-out);
    }
    >.item.next.left{
      @include translate3d(0, 0, 0);
    }
    > .item.prev, > .item.active.left{
      @include translate3d(0, -100%, 0);
      z-index: 200;
    }
    > .item.next, > .item.active.right{
      @include translate3d(0, 100%, 0);
      z-index: 200;
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselRotate3da{
  .carousel-inner {
    .item {
      @include transition(all .5s ease-in-out);
    }

    >.item.next.left{
      @include translate3d(0, 0, 0);
    }
    > .item.prev, > .item.active.left{
      @include transform-rotate3d(1, -2, -2, 180deg);
    }
    > .item.next, > .item.active.right{
      @include transform-rotate3d(1, 2, 2, -180deg);
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselRotate3dv{
  .carousel-inner {
    .item {
      @include transition(all .5s ease-in-out);
    }
    >.item.next.left{
      @include translate3d(0, 0, 0);
    }
    > .item.prev, > .item.active.left{
      @include translate3d(0, 0, 0);
      @include transform-rotate3d(1, 0, 0, 180deg);
    }
    > .item.next, > .item.active.right{
      @include translate3d(0, 0, 0);
      @include transform-rotate3d(-1, 0, 0, -180deg);
    }
    > .item.prev.right{
      @include translate3d(0, 0, 0);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselRotateext{
  .carousel-inner {
    .item {
      @include transition(all .8s ease-in-out);
    }
    > .item.prev, > .item.active.left{
      @include transform-rotate3d(0, 1, 0, -180deg);
      @include perspective(100%);
      @include transform-origin(0% 100%);
      @include backface-visibility(hidden);
    }
    > .item.next, > .item.active.right{
      @include transform-rotate3d(0, 1, 0, -180deg);
      @include perspective(100%);
      @include transform-origin(250% 0%);
      @include backface-visibility(hidden);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carousel3dAxis {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      picture, img {
        @include box-shadow(10px 10px 5px rgba(0, 0, 0, 1));
      }
      @include transition(all .5s linear);
      .text-slide{
        display: none;
      }
    }
    .active{
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include translate3d(80%, 0, 0);
      @include rotateY(180deg);
      @include transform-origin(-80% 0%);
      @include backface-visibility(hidden);
      transform-style: preserve-3d;
    }
    > .item.active.left{
      display: inherit;
      @include translate3d(0, 0, 0);
      @include rotateY(180deg);
      @include transform-origin(10% 0%);
      @include backface-visibility(hidden);
      @include perspective(100px 100px);
      transform-style: preserve-3d;
    }
    > .item.active.right{
      display: inherit;
      @include translate3d(0, 0, 0);
      @include rotateY(180deg);
      @include transform-origin(80% 0%);
      @include backface-visibility(hidden);
      @include perspective(100px 100px);
      transform-style: preserve-3d;
    }
    .item.prev, .item.prev.right{
      @include translate3d(-20%, 0, 0);
      @include rotateY(180deg);
      @include transform-origin(20% 0%);
      @include backface-visibility(hidden);
      @include perspective(100px 100px);
      transform-style: preserve-3d;
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselVolet {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      picture, img {
        @include box-shadow(10px 10px 10px rgba(0, 0, 0, 1));
      }
      @include transition(all .7s ease-in-out);
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include translate3d(20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(100% 0%);
    }
    > .item.active.left{
      @include translate3d(-20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(0% 0%);
    }
    > .item.active.right{
      @include translate3d(20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(100% 0%);
    }
    .item.prev, .item.prev.right{
      @include translate3d(-20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(0% 0%);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}
.carouselVoletInv {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      picture, img {
        @include box-shadow(10px 10px 10px rgba(0, 0, 0, 1));
      }
      @include transition(all .7s ease-in-out);
      .text-slide{
        display: none;
      }
    }
    .active{
      z-index: 200;
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include translate3d(-20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(0% 0%);
    }
    > .item.active.left{
      @include translate3d(20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(100% 0%);
    }
    > .item.active.right{
      @include translate3d(-20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(0% 0%);
    }
    .item.prev, .item.prev.right{
      @include translate3d(20%, 0, 0);
      @include rotateY(90deg);
      @include transform-origin(1000% 0%);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}

.carouselRound {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      picture, img {
        @include box-shadow(10px 10px 5px rgba(0, 0, 0, 1));
      }
      @include transition(all .5s linear);
      .text-slide{
        display: none;
      }
    }
    .active{
      .text-slide{
        display: inherit;
      }
    }
    .item.next, .item.next.left{
      @include transform-rotate3d(0, 1, 4, 90deg);
      @include transform-origin(-30px -30px);
    }
    > .item.active.left{
      @include transform-rotate3d(0, 0, 1, -90deg);
      @include transform-origin(-30px -30px);
    }
    > .item.active.right{
      @include transform-rotate3d(0, 0, 1, 90deg);
      @include transform-origin(-30px -30px);
    }
    .item.prev, .item.prev.right{
      @include transform-rotate3d(0, 0, 1, -90deg);
      @include transform-origin(-30px -30px);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}


.carouselTest {
  .carousel-inner {
    width: 100%;
    height: 500px;
    .item {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 500px;
      opacity: 0;
      picture, img {
        @include box-shadow(10px 10px 5px rgba(0, 0, 0, 1));
      }
      @include transition(all .5s linear);
      .text-slide{
        display: none;
      }
    }
    .active{
      .text-slide{
        display: inherit;
      }
      opacity: 1;
    }
    .item.next, .item.next.left{
      @include translate3d(0, 0, 0);
      picture, img {
        -webkit-filter: grayscale(1);
        filter: grayscale(1);
      }
    }
    > .item.active.left{
      @include translate3d(0, 0, 0);
      picture, img {
        filter: blur(5px);
      }
    }
    > .item.active.right{
      @include translate3d(0, 0, 0);
      picture, img {
        filter: blur(5px);
      }
    }
    .item.prev, .item.prev.right{
      @include translate3d(0, 0, 0);
      -webkit-filter: grayscale(1);
      filter: grayscale(1);
    }
    > .item.active{
      @include translate3d(0, 0, 0);
    }
  }
  .carousel-control, .carousel-indicators {
    z-index: 300;
  }
}