/*********************** slides ***********************/
@media only screen and (max-width:767px){
 .carousel-control.right{right:20px;}
 .carousel-indicators{left:48%;}
}
@media only screen and (min-width:768px){
 .carousel-control.right{right:36%;}
 .carousel-indicators{left:30%;}
 .control-top .glyphicon-chevron-left,.control-top .glyphicon-chevron-right,.carousel-control .glyphicon-chevron-left,.carousel-control .glyphicon-chevron-right{font-size: 20px !important;}
}
/*
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);
    }
}

.slide-out{background:#282828;padding:0}
#carousel{background:url("images/slide-back.png");margin:0 15px}
.carousel-indicators{width:auto;margin-left:0;}
.slide-out .container, .slide-out .slides{padding:0;}
.slide-out .form-group{margin:0}
.carousel-caption{position:relative;left:0%;right:0%;bottom:0px;z-index:10;padding-top:10px;padding-bottom:0px;color:#fff;text-shadow:none;}
.carousel-control{width:auto;}
.slide-out .carousel-control.left{left:30px} 
.item-img{padding:2px 0}
.item-title{font-size:1.7em;text-align:left;margin-bottom:10px}
.item-description{text-align:left}

.outline-btn{border:1px solid rgba(255, 255, 255, 0.7);border-radius:5px;background:rgba(127, 127, 127, 0.5);padding-top:4px;width:30px !important;height:30px !important;}
.outline-btn:hover{background:rgba(204, 204, 204, 0.3);border:1px solid rgba(255, 255, 255, 0.5);opacity:0.5;filter:alpha(opacity=50);}


/* Fade transition for carousel items */
.carousel-fade .item {
  left: 0 !important;
  opacity: 0;
 -webkit-transition: opacity 1s ease;
    -moz-transition: opacity 1s ease;
    -o-transition: opacity 1s ease;
    -ms-transition: opacity 1s ease;
    transition: opacity 1s ease;
    /* -webkit-transition-property: opacity; */
  /* -moz-transition-property: opacity; */
  /* -o-transition-property: opacity; */
  /* transition-property: opacity; */
}
.carousel .item.active {opacity: 1;}
.carousel-control {background-image: none !important; /* remove background gradients on controls */}