/* Format caption elements. */
.carousel-caption
{
   padding-left: 1em;
   padding-right: 1em;
   background-color: #ccc;
   color: #333;
   text-shadow: none;
   padding-bottom: 0;
   bottom: -20px;
}
   
.carousel-caption h1
{
   margin-top: 0;
   font-size: 110%;
   text-transform: uppercase;
}

.carousel-inner
{
   background-color: #ccc;
}

/*** Bootstrap XS Only ***/
@media screen and (max-width:767px)
{
   /* Turn off slide functionality */
   .carousel-inner>.item,
   .carousel-inner>.item.active,
   .carousel-inner>.item.prev,
   .carousel-inner>.item.next,
   .carousel-inner>.item.left,
   .carousel-inner>.item.right
   {
      display: block !important;
      position: static !important;
      transition: none !important;
      transform: none !important;
   }
   
   /* Adjust slide placement */
   .carousel-inner>.item
   {
      max-width: 85%;
      margin: 1em auto;
      border: 1px solid #999;
   }
   
   .carousel-inner>.item>.container
   {
      background-color: #ccc;
   }

   /* Turn off slide controls */
   .carousel-control,
   .carousel-indicators
   {
      display: none;
   }
   
   /* Center images */
   .carousel-inner img
   {
      display:block;
      margin: 0 auto;
      max-width: 100%;
   }

   /* Display captions below image. */
   .carousel-caption
   {
      position: relative;
      left:0;
      right:0;
      margin-left: -15px;
      margin-right: -15px;
   }
}

/*** Bootstrap SM and MD ***/
@media screen and (min-width:768px)
{
   .carousel-inner .item
   {
      max-height: 320px;
   }

   .carousel-inner .item img
   {
      max-width: 60%;
      max-height: 100%;
   }
   
   .carousel-caption
   {
      //width: 40%;
      width: auto;
      left: 60%;
      //left: initial;
      right:0;
      top: 0;
      padding: .5em 2em;
      margin-bottom: 1em;
      overflow: hidden;
      bottom: 20px;
   }
   
   .carousel-caption h1
   {
      margin-top: 0;
      font-size: 110%;
      text-transform: uppercase;
   }
   
   .carousel-caption a.moreLink
   {
      position: absolute;
      left: 0;
      right: 2%;
      bottom: 0;
      font-size: 100%;
      font-style: italic;
      text-decoration: none;
      background-color: rgba(0, 0, 0, 0);
      background-image: linear-gradient(rgba(204, 204, 204, 0) 0%, #CCC 40%);
      padding-top: 40px;

/* TODO: Prefixes; */
/*  padding: 0;

  padding-bottom: 27px;*/

  text-align: right;
  outline: none;
   }
   
   .carousel-indicators
   {
      left: initial;
      right: 0;
      bottom: 0;
      width: 40%;
      margin-left: auto;
      height: 20px;
   }
   
   .carousel-indicators li
   {
      background-color: #999;
      border-color: #888;
      box-shadow: 1px 1px #eee;
   }
   
   .carousel-indicators li.active
   {
      background-color: #666;
   }
}