.carousel {
width:100%; 
margin:0 auto; /* center your carousel if other than 100% */ 
border-bottom: 2px #eee;
}

.carousel-control.left {
	background: transparent;
	color: #fff;
	text-align: left;
	padding-left: 25px;
}

.carousel-control.right {
	background: transparent;
	color: #fff;
	text-align: right;
	padding-right: 25px; 
}

.preload-slide0 { background: url(/images/jumbotron/Thruster-Pair-1.jpg) no-repeat -9999px -9999px; }
.slide0 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/Thruster-Pair-1.jpg) no-repeat center scroll;
}

.preload-slide1 { background: url(/images/jumbotron/SolarSurfer-2.jpg) no-repeat -9999px -9999px; }
.slide1 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/SolarSurfer-2.jpg) no-repeat center scroll;
}


.preload-slide2 { background: url(/images/jumbotron/sensor-banner.png) no-repeat -9999px -9999px; }
.slide2 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/sensor-banner.png) no-repeat center scroll;
}

.preload-slide3 { background: url(/images/jumbotron/Waves-2.jpg) no-repeat -9999px -9999px; }
.slide3 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/Waves-2.jpg) no-repeat center scroll;
}

.preload-slide4 { background: url(/images/jumbotron/asv-2.jpg) no-repeat -9999px -9999px; }
.slide4 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/asv-2.jpg) no-repeat center scroll;
}

.preload-slide5 { background: url(/images/jumbotron/wte-banner-2.jpg) no-repeat -9999px -9999px; }
.slide5 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/wte-banner-2.jpg) no-repeat center scroll;
}

.preload-slide6 { background: url(https://www.bluerobotics.com/wp-content/uploads/2015/08/fish-banner1.jpg) no-repeat -9999px -9999px; }
.slide6 {
    height:320px;
    background: #1e78b9;
    color: black;
    background: url(https://www.bluerobotics.com/wp-content/uploads/2015/08/fish-banner1.jpg) no-repeat center scroll;
}

.preload-slide7 { background: url(/images/jumbotron/Reef-Wreck-1.jpg) no-repeat -9999px -9999px; }
.slide7 {
    height:320px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/Reef-Wreck-1.jpg) no-repeat center scroll;
}

.preload-slide8 { background: url(/images/jumbotron/3-rov-banner-rock.jpg) no-repeat -9999px -9999px; }
.slide8 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/3-rov-banner-rock.jpg) no-repeat center scroll;
}

.preload-slide9 { background: url(/images/jumbotron/dock-banner-1.jpg) no-repeat -9999px -9999px; }
.slide9 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/dock-banner-1.jpg) no-repeat center scroll;
}

.preload-slide10 { background: url(/images/jumbotron/spool-banner.jpg) no-repeat -9999px -9999px; }
.slide10 {
    height:480px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/spool-banner.jpg) no-repeat center scroll;
}

.preload-store0 { background: url(/images/jumbotron/wte-banner-2.jpg) no-repeat -9999px -9999px; }
.store0 {
    height:240px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/wte-banner-2.jpg) no-repeat center scroll;
    background-size: auto 240px;    
}

.preload-store1 { background: url(/images/jumbotron/feature-kit.jpg) no-repeat -9999px -9999px; }
.store1 {
    height:240px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/feature-kit.jpg) no-repeat center scroll;
    background-size: auto 240px;
}

.preload-store2 { background: url(/images/jumbotron/test-plug-banner.jpg) no-repeat -9999px -9999px; }
.store2 {
    height:240px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/test-plug-banner.jpg) no-repeat center scroll;
    background-size: auto 240px;
}

.preload-store3 { background: url(/images/jumbotron/fathom-banner.jpg) no-repeat -9999px -9999px; }
.store3 {
    height:240px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/fathom-banner.jpg) no-repeat center scroll;
    background-size: auto 240px;
}

.preload-store4 { background: url(/images/jumbotron/end-cap-banner.jpg) no-repeat -9999px -9999px; }
.store4 {
    height:240px;
    background: #1e78b9;
    color: black;
    background: url(/images/jumbotron/end-cap-banner.jpg) no-repeat center scroll;
    background-size: auto 240px;
}

.store-banner {
    height:240px;
    color: black;
    background-size: auto 240px;
}

.carousel-credit {
    position:absolute;
    right:0px; 
    bottom:10px; 
    margin-right:20px;
    z-index:99;
    color: #eee;
    font-size: 0.8em;
}

.carousel-caption {
	left: 15%;
	right: 15%;	
	top: 50% !important;
	transform: translateY(-50%);
	bottom: initial;
}

/*
inspired from http://codepen.io/Rowno/pen/Afykb
& https://jsfiddle.net/q0rgL8ws/
*/
.carousel-fade .carousel-inner .item {
  opacity: 0;
  transition-property: opacity;
    overflow:hidden;
}
.item.active img {
    transition: transform 5000ms linear 0s;
    /* This should be based on your carousel setting. For bs, it should be 5second*/
    transform: scale(1.05, 1.05);
}
.carousel-fade .carousel-inner .active {
  opacity: 1;
}

.carousel-fade .carousel-inner .active.left,
.carousel-fade .carousel-inner .active.right {
  left: 0;
  opacity: 0;
  z-index: 1;
}

.carousel-fade .carousel-inner .next.left,
.carousel-fade .carousel-inner .prev.right {
  opacity: 1;
}

.carousel-fade .carousel-control {
  z-index: 2;
}

/*
WHAT IS NEW IN 3.3: "Added transforms to improve carousel performance in modern browsers."
now override the 3.3 new styles for modern browsers & apply opacity
*/
@media all and (transform-3d), (-webkit-transform-3d) {
    .carousel-fade .carousel-inner > .item.next,
    .carousel-fade .carousel-inner > .item.active.right {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.prev,
    .carousel-fade .carousel-inner > .item.active.left {
      opacity: 0;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
    .carousel-fade .carousel-inner > .item.next.left,
    .carousel-fade .carousel-inner > .item.prev.right,
    .carousel-fade .carousel-inner > .item.active {
      opacity: 1;
      -webkit-transform: translate3d(0, 0, 0);
              transform: translate3d(0, 0, 0);
    }
}


.carousel-control .icon-next, .carousel-control .glyphicon-chevron-right {
	right:25%;
}

.carousel-control .icon-prev, .carousel-control .glyphicon-chevron-left {
	left: 25%;
}