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





/*------------------------------------*\
    $RESET
\*------------------------------------*/
/*
A more considered reset; more of a restart...
*/
html,body,div,span,applet,object,iframe,
h1,h2,h3,h4,h5,h6,p,blockquote,pre,hr,
a,abbr,address,cite,code,
del,dfn,em,img,ins,kbd,q,s,samp,
small,strong,sub,sup,tt,var,
b,u,i,
dl,dt,dd,ol,ul,li,
fieldset,form,label,legend,
table,caption,tbody,tfoot,thead,tr,th,td,
article,aside,canvas,details,figcaption,figure,
footer,header,hgroup,menu,nav,section,summary,
time,mark,audio,video{
    margin:0;
    padding:0;
}
article,aside,details,figcaption,figure,footer,
header,hgroup,menu,nav,section{
    display:block;
}
table{
    border-collapse:collapse;
    border-spacing:0;
}
strong,b,mark{
    font-weight:bold;
    font-style:inherit;
}
em,i,cite,q,address,dfn,var{
    font-style:italic;
    font-weight:inherit;
}
abbr[title],dfn[title]{
    cursor:help;
    border-bottom:1px dotted;
}
ins{
    border-bottom:1px solid;
}
a,u,ins{
    text-decoration:none;
}
del,s{
    text-decoration:line-through;
}
pre,code,samp,kbd{
    font-family:monospace;
}
small{
    font-size:0.75em;
}
img{
    border:none;
    font-style:italic;
}
input,
select,option,optgroup,
textarea{
    font:inherit;
}





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





/*------------------------------------*\
    $MAIN
\*------------------------------------*/
html{
    font:0.75em/1.5 "Helvetica Neue", Arial, sans-serif;
    color:#333;
    background-color:#fff;
    padding:5% 25%;
}
small{
    color:#999;
}
a{
    color:#09f;
}





/*------------------------------------*\
    $CAROUSEL
\*------------------------------------*/
.carousel{
    overflow:hidden;
    width:100%;
    position:relative;
}
.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. */
     
    -webkit-animation:carousel 30s infinite;
       -moz-animation:carousel 30s infinite;
            animation:carousel 30s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:20%; /* 100 / number of panes */
}
.panes > li > a{
    display:block;
}
.carousel img{
    display:block;
    width:100%;
    max-width: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; }
}