SCSS sample

carousel.scss

.page-template-template-services {
	.carousel-inner {
	  margin: auto;
	  width: 90%;
	}
	.carousel-control {
	  width: 4%;
	}


	.carousel-control.left,
	.carousel-control.right {
	  background-image: none;
	}

	@media (max-width: 767px) {
	  .carousel-inner > .item.next,
	  .carousel-inner > .item.active.right {
	  	transition: 15s;
	  	transition-timing-function: ease-in;
	    left: 0;
	    -webkit-transform: translate3d(100%, 0, 0);
	    transform: translate3d(100%, 0, 0);
	  }
	  .carousel-inner > .item.prev,
	  .carousel-inner > .item.active.left {
	  	transition: 15s;
	  	transition-timing-function: ease-in;
	    left: 0;
	    -webkit-transform: translate3d(-100%, 0, 0);
	    transform: translate3d(-100%, 0, 0);
	  }
	}

	@media (min-width: 767px) and (max-width: 992px) {
	  .carousel-inner > .item.next,
	  .carousel-inner > .item.active.right {
	  	transition: 15s;
	  	transition-timing-function: ease-in;
	    left: 0;
	    -webkit-transform: translate3d(25%, 0, 0);
	    transform: translate3d(25%, 0, 0);
	  }
	  .carousel-inner > .item.prev,
	  .carousel-inner > .item.active.left {
	  	transition: 15s;
	  	transition-timing-function: ease-in;
	    left: 0;
	    -webkit-transform: translate3d(-25%, 0, 0);
	    transform: translate3d(-25%, 0, 0);
	  }
	}

	@media (min-width: 992px) {
	  .carousel-inner > .item.next,
	  .carousel-inner > .item.active.right {
	  	transition: 15s;
	  	transition-timing-function: ease-in;
	    left: 0;
	    -webkit-transform: translate3d(25%, 0, 0);
	    transform: translate3d(25%, 0, 0);
	  }
	  .carousel-inner > .item.prev,
	  .carousel-inner > .item.active.left {
	  	transition: 15s;
	  	transition-timing-function: ease-in;
	    left: 0;
	    -webkit-transform: translate3d(-25%, 0, 0);
	    transform: translate3d(-25%, 0, 0);
	  }
	}
}