home.css~

/*carousel*/
.carousel{
    overflow:hidden;
    width:100%;
}
.panes{
    list-style:none;
    position:relative;
    width:300%; /* Number of panes * 100% */
    overflow:hidden; /* This is used solely to clear floats, it does not add functionality. */

    -webkit-animation:carousel 15s infinite;        
    -moz-animation:carousel 15s infinite;
    -ms-animation:carousel 15s infinite;
    -o-animation:carousel 15s infinite;        
    animation:carousel 15s infinite;
}
.panes > li{
    position:relative;
    float:left;
    width:33%; /* 100 / number of panes */
}
.carousel {
    display:block;
    width:75%;
    max-width:100%;
    margin-top:20px;
	margin-left:auto;
	margin-right:15%;
}
.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);
}

@-webkit-keyframes carousel{
    0%    { left:0; }
    24%   { left:0; }
    25% { left:-100%; }
    49% { left:-100%; }
    50%   { left:-200%; }
    74%   { left:-200%; }
    75% { left:-100%; }
    99% { left:-100%; }
    100%  { left:0; }
}

@keyframes carousel{
    0%    { left:0; }
    24%   { left:0; }
    25% { left:-100%; }
    49% { left:-100%; }
    50%   { left:-200%; }
    74%   { left:-200%; }
    75% { left:-100%; }
    99% { left:-100%; }
    100%  { left:0; }
}
/*end of carousel*/