@charset "UTF-8";
/*------------------------------------*\
    CONTENTS
\*------------------------------------*/
/*
RESET
SHARED
MAIN
CAROUSEL
*/





/*------------------------------------*\
    $RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart...
*/
.carousel, .carousel img, ul.panes{
    margin:0;
    padding:0;
}


/*------------------------------------*\
    $SHARED
\*------------------------------------*/
h1,p,
.carousel{
    margin-bottom:24px;
    margin-bottom:2rem;
}





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
/*html{    
    padding:5% 25%;
}*/


/*------------------------------------*\
    $CAROUSEL
\*------------------------------------*/
.carousel{
    overflow:hidden;
    width:100%;
    position:relative;
    /*background-color:#aaa;*/
}
.panes{
    list-style:none;
    position:relative;
    /* width:500%;  Number of panes /* 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */
}
.panes > li{
    position:relative;
    float:left;
    /*max-width:20%;*/
    /*width:20%;  100 / number of panes */  
}
.panes > li > a{
    display:block;
}
.carousel img{
    display:block;
    /*width:100%;*/
    max-width:100%;
    /*max-height:100%;*/
}
.carousel h2{
    font-size:1em;
    padding:0.5em;
    position:absolute;
    right:10px;
    bottom:10px;
    left:10px;
    text-align:right;
    color:#fff;
    background-color:rgba(0,0,0,0.75);
}

/*@-moz-keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

@-webkit-keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}

@keyframes carousel{
    0%    { left:0; }
    11%   { left:0; }
    12.5% { left:-100%; }
    23.5% { left:-100%; }
    25%   { left:-200%; }
    36%   { left:-200%; }
    37.5% { left:-300%; }
    48.5% { left:-300%; }
    50%   { left:-400%; }
    61%   { left:-400%; }
    62.5% { left:-300%; }
    73.5% { left:-300%; }
    75%   { left:-200%; }
    86%   { left:-200%; }
    87.5% { left:-100%; }
    98.5% { left:-100%; }
    100%  { left:0; }
}*/