// CAROUSEL
 // --------
 
 .carousel {
   position: relative;
   margin-bottom: @baseLineHeight;
   line-height: 1;
 }
 
 .carousel-inner {
   overflow: hidden;
   width: 100%;
   position: relative;
 }
 
 .carousel {
 
   .item {
     display: none;
     position: relative;
     .transition(.6s ease-in-out left);
   }
 
   // Account for jankitude on images
   .item > img {
     display: block;
     line-height: 1;
   }
 
   .active,
   .next,
   .prev { display: block; }
 
   .active {
     left: 0;
   }
 
   .next,
   .prev {
     position: absolute;
     top: 0;
     width: 100%;
   }
 
   .next {
     left: 100%;
   }
   .prev {
     left: -100%;
   }
   .next.left,
   .prev.right {
     left: 0;
   }
 
   .active.left {
     left: -100%;
   }
   .active.right {
     left: 100%;
   }
 
 }
 
 // Left/right controls for nav
 // ---------------------------
 
 .carousel-control {
   position: absolute;
   top: 40%;
   left: 15pt;
   width: 40pt;
   height: 40pt;
   margin-top: -20pt;
   font-size: 60pt;
   font-weight: 100;
   line-height: 30pt;
   color: @white;
   text-align: center;
   background: @grayDarker;
   border: 3pt solid @white;
   .border-radius(23pt);
   .opacity(50);
 
   // we can't have this transition here
   // because webkit cancels the carousel
   // animation if you trip this while
   // in the middle of another animation
   // ;_;
   // .transition(opacity .2s linear);
 
   // Reposition the right one
   &.right {
     left: auto;
     right: 15pt;
   }
 
   // Hover state
   &:hover {
     color: @white;
     text-decoration: none;
     .opacity(90);
   }
 }
 
 // Caption for text below images
 // -----------------------------
 
 .carousel-caption {
   position: absolute;
   left: 0;
   right: 0;
   bottom: 0;
   padding: 10pt 15pt 5pt;
   background: @grayDark;
   background: rgba(0,0,0,.75);
 }
 .carousel-caption h4,
 .carousel-caption p {
   color: @white;
 }