/*Buttons*/
.carousel-responsive-03 .carousel-control-prev-icon,
.carousel-responsive-03 .carousel-control-next-icon,
.carousel-responsive-03 .carousel-control-prev-icon:active,
.carousel-responsive-03 .carousel-control-next-icon:active  {
  height: 50px;
  width: 50px;
  outline: white;
  background-size: 100%, 100%;
  border: 1px solid white;
  background-image: none;
  background-color: #eee;
}

.carousel-responsive-03 .carousel-control-next-icon:after {
  content: '>';
  font-size: 30px;
  color: black;
}

.carousel-responsive-03 .carousel-control-prev-icon:after {
  content: '<';
  font-size: 30px;
  color: black;
}

.carousel-responsive-03 .carousel-control-prev-icon:hover,
.carousel-responsive-03 .carousel-control-next-icon:hover {
    background-color: #ffc907;
}

.carousel-responsive-03 .carousel-indicators li {
  width: 10px;
  height: 10px;
  border-radius: 100%;
}

.carousel-responsive-03 .carousel-control-prev {
  width: 5%;
}

.carousel-responsive-03 .carousel-control-next {
  width: 5%;
}
/*Buttons*/


/*Responsive*/
@media (min-width: 768px) and (max-width: 991px) {
    /* Show 4th slide on md if col-md-4*/
    .carousel-responsive-03 .carousel-inner .active.col-md-4.carousel-item + .carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -33.3333%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) and (max-width: 768px) {
    /* Show 3rd slide on sm if col-sm-6*/
    .carousel-responsive-03 .carousel-inner .active.col-sm-6.carousel-item + .carousel-item + .carousel-item {
        position: absolute;
        top: 0;
        right: -50%;  /*change this with javascript in the future*/
        z-index: -1;
        display: block;
        visibility: visible;
    }
}
@media (min-width: 576px) {
    .carousel-responsive-03 .carousel-item {
        margin-right: 0;
    }
    /* show 2 items */
    .carousel-responsive-03 .carousel-inner .active + .carousel-item {
        display: block;
    }
    .carousel-responsive-03 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left),
    .carousel-responsive-03 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item {
        transition: none;
    }
    .carousel-responsive-03 .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-responsive-03 .active.carousel-item-left + .carousel-item-next.carousel-item-left,
    .carousel-responsive-03 .carousel-item-next.carousel-item-left + .carousel-item,
    .carousel-responsive-03 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* farthest right hidden item must be also positioned for animations */
    .carousel-responsive-03 .carousel-inner .carousel-item-prev.carousel-item-right {
        position: absolute;
        top: 0;
        left: 0;
        z-index: -1;
        display: block;
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-responsive-03 .active.carousel-item-right + .carousel-item-prev.carousel-item-right,
    .carousel-responsive-03 .carousel-item-prev.carousel-item-right + .carousel-item,
    .carousel-responsive-03 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* MD */
@media (min-width: 768px) {
    /* show 3rd of 3 item slide */
    .carousel-responsive-03 .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-responsive-03 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-responsive-03 .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-responsive-03 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-responsive-03 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/* LG */
@media (min-width: 991px) {
/* show 3rd of 3 item slide */
    .carousel-responsive-03 .carousel-inner .active + .carousel-item + .carousel-item {
        display: block;
    }
    .carousel-responsive-03 .carousel-inner .carousel-item.active:not(.carousel-item-right):not(.carousel-item-left) + .carousel-item + .carousel-item {
        transition: none;
    }
    .carousel-responsive-03 .carousel-inner .carousel-item-next {
        position: relative;
        transform: translate3d(0, 0, 0);
    }
    /* left or forward direction */
    .carousel-responsive-03 .carousel-item-next.carousel-item-left + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(-100%, 0, 0);
        visibility: visible;
    }
    /* right or prev direction */
    .carousel-responsive-03 .carousel-item-prev.carousel-item-right + .carousel-item + .carousel-item + .carousel-item {
        position: relative;
        transform: translate3d(100%, 0, 0);
        visibility: visible;
        display: block;
        visibility: visible;
    }
}
/*Responsive*/