* {
     margin: 0 auto;
     padding: 0;
}

.slider {
     width: 330px; /* important to be same as image width */
     height: 330px; /* important to be same as image height */
     position: relative; /* important */
     overflow: hidden; /* important */
     margin: 0;
}

.slider ul {
     list-style: none;
}

/* keyframes #anim_slider */
@-webkit-keyframes anim_slider {
     0% {
             opacity: 0;
     }
     10% {
             opacity: 1;
     }
     35% {
             opacity: 1;
     }
     45% {
             opacity: 0;
     } 
     100% {
             opacity: 0;
     }
}

@-moz-keyframes anim_slider {
     0% {
             opacity: 0;
     }
     10% {
             opacity: 1;
     }
     35% {
             opacity: 1;
     }
     45% {
             opacity: 0;
     } 
     100% {
             opacity: 0;
     }
}

@-ms-keyframes anim_slider {
    0% {
             opacity: 0;
     }
     10% {
             opacity: 1;
     }
     35% {
             opacity: 1;
     }
     45% {
             opacity: 0;
     } 
     100% {
             opacity: 0;
     }
}

@-o-keyframes anim_slider {
     0% {
             opacity: 0;
     }
     10% {
             opacity: 1;
     }
     35% {
             opacity: 1;
     }
     45% {
             opacity: 0;
     } 
     100% {
             opacity: 0;
     }
}

/* animation */
.slider ul li {
     position: absolute;
     opacity: 0;
     top: 0;

     -webkit-animation-name: anim_slider;
     -webkit-animation-duration: 30.0s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: normal;
     -webkit-animation-delay: 0;
     -webkit-animation-play-state: running;
     -webkit-animation-fill-mode: forwards;

     -moz-animation-name: anim_slider;
     -moz-animation-duration: 30.0s;
     -moz-animation-timing-function: linear;
     -moz-animation-iteration-count: infinite;
     -moz-animation-direction: normal;
     -moz-animation-delay: 0;
     -moz-animation-play-state: running;
     -moz-animation-fill-mode: forwards;

     -ms-animation-name: anim_slider;
     -ms-animation-duration: 30.0s;
     -ms-animation-timing-function: linear;
     -ms-animation-iteration-count: infinite;
     -ms-animation-direction: normal;
     -ms-animation-delay: 0;
     -ms-animation-play-state: running;

     -o-animation-name: anim_slider;
     -o-animation-duration: 30.0s;
     -o-animation-timing-function: linear;
     -o-animation-iteration-count: infinite;
     -o-animation-direction: normal;
     -o-animation-delay: 0;
     -o-animation-play-state: running;
     -o-animation-fill-mode: forwards;
}

/* animation delays */
.slider ul li:nth-child(2), .slider ul li:nth-child(2) div {
     -webkit-animation-delay: 10.0s;
     -moz-animation-delay: 10.0s;
     -ms-animation-delay: 10.0s;
     -o-animation-delay: 10.0s;
}

.slider ul li:nth-child(3), .slider ul li:nth-child(3) div {
     -webkit-animation-delay: 20.0s;
     -moz-animation-delay: 20.0s;
     -ms-animation-delay: 20.0s;
     -o-animation-delay: 20.0s;
}


.slider ul li a {
     text-decoration: none;
     color: #fff;
}

.slider ul li p {
     color: #fff;
     font-size: 12px;
     margin-top: -5px;
     padding: 10px 15px;
     filter: alpha(opacity=80);
     -moz-opacity: 0.8;
     -khtml-opacity: 0.8;
     opacity: 0.8;
} .slider ul li img a {
     display: block;
     float: left;
     width: 100%;
}

/* keyframes #captions */
@-webkit-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     6% {
             top: 80%;
             opacity: 1;
     }
     24% {
             top: 80%;
             opacity: 1;
     }
     30% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

@-moz-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     6% {
             top: 80%;
             opacity: 1;
     }
     24% {
             top: 80%;
             opacity: 1;
     }
     30% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

@-ms-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     6% {
             top: 80%;
             opacity: 1;
     }
     24% {
             top: 80%;
             opacity: 1;
     }
     30% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

@-o-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     6% {
             top: 80%;
             opacity: 1;
     }
     24% {
             top: 80%;
             opacity: 1;
     }
     30% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

.slider h3 {
     text-transform: uppercase;
     color: #fff;
     font-size: 14px;
     line-height: 14px;
     padding: 10px 15px 0;
     filter: alpha(opacity=80);
     -moz-opacity: 0.8;
     -khtml-opacity: 0.8;
     opacity: 0.8;
}

.slider ul li div {
     text-align: center;
     color: #fff;
     background-color: #333333;
     background: #333333;
     margin: 0;
     padding: 0;
     position: absolute;
     bottom: 0;
     width: 330px; /* important to be same as image width */
     z-index :999;

/* css3 animation */
     -webkit-animation-name: captions;
     -webkit-animation-duration: 30.0s;
     -webkit-animation-timing-function: linear;
     -webkit-animation-iteration-count: infinite;
     -webkit-animation-direction: normal;
     -webkit-animation-delay: 0;
     -webkit-animation-play-state: running;
     -webkit-animation-fill-mode: forwards;

     -moz-animation-name: captions;
     -moz-animation-duration: 30.0s;
     -moz-animation-timing-function: linear;
     -moz-animation-iteration-count: infinite;
     -moz-animation-direction: normal;
     -moz-animation-delay: 0;
     -moz-animation-play-state: running;
     -moz-animation-fill-mode: forwards;

     -ms-animation-name: captions;
     -ms-animation-duration: 30.0s;
     -ms-animation-timing-function: linear;
     -ms-animation-iteration-count: infinite;
     -ms-animation-direction: normal;
     -ms-animation-delay: 0;
     -ms-animation-play-state: running;
     -ms-animation-fill-mode: forwards;

     -o-animation-name: captions;
     -o-animation-duration: 30.0s;
     -o-animation-timing-function: linear;
     -o-animation-iteration-count: infinite;
     -o-animation-direction: normal;
     -o-animation-delay: 0;
     -o-animation-play-state: running;
     -o-animation-fill-mode: forwards;
}
}