/* Banner rotativo de imagens tipo carrossel */

@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; }
    /* daqui: http://csswizardry.com/2011/10/fully-fluid-responsive-css-carousel */
}
@keyframes go{
    0%    {  }
    100%    { left:-300%; }
}
@keyframes back{
    0%    { left:0; }
    100%  { left:100%; }
}
.carousel{
    width:100%; 
    overflow:hidden; 
    height:100%;
}

.paineis{
    width:500% /* article w * 5 */; 
    overflow:hidden;  
    height:100%;  
    animation:carousel 38s infinite; position:relative;
}

article{
    float:left; 
    width:20%;
} 

.carrossel{
    height:100%; 
    width:100%}
input[type=checkbox]:checked ~ .paineis{animation-play-state:paused; animation: go 10s}