#carousel-content
{
   overflow: hidden;
/* force height - see <http://alistapart.com/article/creating-intrinsic-ratios-for-video> for more */
   padding-top: 28.5%;
   position: relative;
   width: 100%;
}

#carousel-content > *
{
   position: absolute;
}

#carousel-content > .static,
#carousel-content > .dynamic
{
   -webkit-transition-property: transform;
   -webkit-transition-timing-function: ease;
           transition-property: transform;
           transition-timing-function: ease;
   left: 0;
   top: 0;
   width: 100%;
   height: auto;
}
#carousel-content > div.static  { transition-duration: 0ms;    -webkit-transition-duration: 0ms; }
#carousel-content > div.dynamic { transition-duration: 1000ms; -webkit-transition-duration: 1000ms; }

#carousel-content > div.prev    { transform: translateX(-100%); -webkit-transform: translateX(-100%); }
#carousel-content > div.current { transform: translateX(   0);  -webkit-transform: translateX(   0); }
#carousel-content > div.next    { transform: translateX( 100%); -webkit-transform: translateX( 100%); }

#carousel-content img
{
   border: none;
   width: 100%;
   height: auto;
}

#rev,
#fwd
{
   background-color: rgba(255,255,255,.25);
   border-radius: 10%;
   color: #fff;
   cursor: default;
   font: 1.5em "Courier New", courier, monospace;
   text-align: center;
   top: calc(50% - .75em);
   width: 1.25em;
   height: 1.25em;
}
#rev { left: 2.5%; }
#fwd { right: 2.5%; }

#rev:after,
#fwd:after
{
   position: relative;
   top: .075em;
}
#rev:after { content: "\3c"; }
#fwd:after { content: "\3e"; }

   /* text in image */
#carousel-content a > div
{
   background-color: rgba(255,255,255,.25);
   color: #fff;
   -webkit-hyphens: manual;
      -moz-hyphens: manual;
       -ms-hyphens: manual;
        -o-hyphens: manual;
           hyphens: manual;
   padding: 0 .5em .075em .5em;
   position: absolute;
   left: .5em;
   bottom: 5%;
}
#carousel-content a > div.hidden  { display: none; }
#carousel-content a > div.visible { display: block; }

#carousel-content > div > div > strong
{
   font-size: 50%;
}

#carousel-indicator
{
   margin-top: -.15em;
/*   margin-bottom: -.5em;*/
   text-align: center;
}
/*
@media screen and (orientation: landscape)
{
   #carousel-indicator
   {
      margin-bottom: -.75em;
   }
}
*/
#carousel-indicator > *
{
   color: rgba(68,161,43,.25);
   font-family: "Courier New", courier, monospace;
   font-size: 2.0em;
   cursor: pointer;
}

#carousel-indicator > .current
{
   color: rgba(68,161,43,1);
   cursor: default;
}

@media screen and (max-width: 720px) and (orientation: portrait),
                  (max-width: 754px) and (orientation: landscape)
{
   #carousel-content > [class^="txt"]
   {
      font-size: 1em;
   }

   #rev,
   #fwd
   {
      font-size: 1em;
   }

   #carousel-indicator
   {
      font-size: .75em;
   }
}