/*------------------------------------*\
    $CAROUSEL
\*------------------------------------*/
.carousel{
/*background-color:#303030;*/
}
.text {
    font-size: 10pt;
    text-align: left;
    line-height: 120%;
    color: white;
    padding: 12px;
    background-color: #303030;
    background-image: url(images/point_a.png);
    background-repeat: no-repeat;
}
.carousel h4{
    color:white;
}
.images {
    overflow:hidden;
    width:100%;
    border:none;
    float:left;
}
.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. */        
    -moz-animation:carousel 30s infinite;
    -webkit-animation:carousel 30s infinite;
    animation:carousel 30s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:20%; /* 100 / number of panes */
}
.carousel img{
    display:block;
	width:100%;
}

@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; }
}