.carousel-inner {
  position: relative;
  overflow: hidden;
}
.col-centered {
  float: none;
  margin: 0 auto;
}
.carousel-control { 
  width: 0px;
}
.carousel-control.left,
.carousel-control.right { 
  margin-right: 1%;
  margin-left: 1%; 
  background-image: none;
  opacity: 1;
}
.carousel-control > a > span {
  color: white;
  font-size: 29px !important;
}
.carousel-col { 
  position: relative; 
  float: left;
}
.carousel-col img {width:100%;}
.active > div { display:none; }
.active > div:first-child { display:block; }

/*xs*/
@media (max-width: 767px) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .active.right { left: 50%; }
.carousel-inner .next        { left:  50%; }
.carousel-inner .prev		     { left: -50%; }
.carousel-col                { width: 50%; }
.active > div:first-child + div { display:block; }
}

/*sm*/
@media (min-width: 768px) and (max-width: 991px) {
.carousel-inner .active.left { left: -50%; }
.carousel-inner .active.right { left: 50%; }
.carousel-inner .next        { left:  50%; }
.carousel-inner .prev		     { left: -50%; }
.carousel-col                { width: 50%; }
.active > div:first-child + div { display:block; }
   .carousel-inner > .item.active.right,
   .carousel-inner > .item.next {
      -webkit-transform: translate3d(50%, 0, 0);
      transform: translate3d(50%, 0, 0);
      left: 0;
   }
   .carousel-inner > .item.active.left,
   .carousel-inner > .item.prev {
      -webkit-transform: translate3d(-50%, 0, 0);
      transform: translate3d(-50%, 0, 0);
      left: 0;
   }
   .carousel-inner > .item.left,
   .carousel-inner > .item.prev.right,
   .carousel-inner > .item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
     
   }
}

/*md*/
@media (min-width: 992px) and (max-width: 1199px) {
.carousel-inner .active.left { left: -33%; }
.carousel-inner .active.right { left: 33%; }
.carousel-inner .next        { left:  33%; }
.carousel-inner .prev		     { left: -33%; }
.carousel-col                { width: 33%; }
.active > div:first-child + div { display:block; }
.active > div:first-child + div + div { display:block; }
   .carousel-inner > .item.active.right,
   .carousel-inner > .item.next {
      -webkit-transform: translate3d(33.3%, 0, 0);
      transform: translate3d(33.3%, 0, 0);
      left: 0;
   }
   .carousel-inner > .item.active.left,
   .carousel-inner > .item.prev {
      -webkit-transform: translate3d(-33.3%, 0, 0);
      transform: translate3d(-33.3%, 0, 0);
      left: 0;
   }
   .carousel-inner > .item.left,
   .carousel-inner > .item.prev.right,
   .carousel-inner > .item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
     
   }
}

/*lg*/
@media (min-width: 1200px) {
.carousel-inner .active.left { left: -25%; }
.carousel-inner .active.right{ left:  25%; }
.carousel-inner .next        { left:  25%; }
.carousel-inner .prev		     { left: -25%; }
.carousel-col                { width: 25%; }
.active > div:first-child + div { display:block; }
.active > div:first-child + div + div { display:block; }
.active > div:first-child + div + div + div { display:block; }
}

.block {
width: 306px;
height: 230px;
}

.red {background: red;}

.blue {background: blue;}

.green {background: green;}

.yellow {background: yellow;}

@media all and (min-width: 1200px) and (transform-3d),
all and (min-width: 1200px) and (-webkit-transform-3d) {
   .carousel-inner > .item.active.right,
   .carousel-inner > .item.next {
      -webkit-transform: translate3d(25%, 0, 0);
      transform: translate3d(25%, 0, 0);
      left: 0;
   }
   .carousel-inner > .item.active.left,
   .carousel-inner > .item.prev {
      -webkit-transform: translate3d(-25%, 0, 0);
      transform: translate3d(-25%, 0, 0);
      left: 0;
   }
   .carousel-inner > .item.left,
   .carousel-inner > .item.prev.right,
   .carousel-inner > .item.active {
      -webkit-transform: translate3d(0, 0, 0);
      transform: translate3d(0, 0, 0);
     
   }
}