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

.slider3 {
     width: 430px; /* important to be same as image width */
     height: 150px; /* important to be same as image height */
     position: relative; /* important */
     overflow: hidden; /* important */
     margin-right: 10px;
     margin-top: 20px;
     float: right;
}

.slider3 ul {
     list-style: none;
}

/* keyframes #anim_slider */
@-webkit-keyframes anim_slider3 {
     0% {
             opacity: 0;
     }
     15% {
             opacity: 1;
     }
     50% {
             opacity: 1;
     }
     60% {
             opacity: 0;
     }
     100% {
             opacity: 0;
     }
}

@-moz-keyframes anim_slider3 {
     0% {
             opacity: 0;
     }
     15% {
             opacity: 1;
     }
     50% {
             opacity: 1;
     }
     60% {
             opacity: 0;
     }
     100% {
             opacity: 0;
     }
}

@-ms-keyframes anim_slider3 {
     0% {
             opacity: 0;
     }
     15% {
             opacity: 1;
     }
     50% {
             opacity: 1;
     }
     60% {
             opacity: 0;
     }
     100% {
             opacity: 0;
     }
}

@-o-keyframes anim_slider3 {
     0% {
             opacity: 0;
     }
     15% {
             opacity: 1;
     }
     50% {
             opacity: 1;
     }
     60% {
             opacity: 0;
     }
     100% {
             opacity: 0;
     }
}

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

     -webkit-animation-name: anim_slider3;
     -webkit-animation-duration: 14.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_slider3;
     -moz-animation-duration: 14.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_slider3;
     -ms-animation-duration: 14.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_slider3;
     -o-animation-duration: 14.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 */
.slider3 ul li:nth-child(2), .slider3 ul li:nth-child(2) div {
     -webkit-animation-delay: 7.0s;
     -moz-animation-delay: 7.0s;
     -ms-animation-delay: 7.0s;
     -o-animation-delay: 7.0s;
}


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

.slider3 ul li p {
     color: #fff;
     font-size: 11px;
     font-family: Arial, Helvetica, sans-serif;
     font-style: italic;
     margin-top: -5px;
     padding: 10px 15px;
     filter: alpha(opacity=80);
     -moz-opacity: 0.8;
     -khtml-opacity: 0.8;
     opacity: 0.8;
}

.slider3 ul li img a {
     display: block;
     float: left;
     width: 100%;
}

/* keyframes #captions */
@-webkit-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     15% {
             top: 80%;
             opacity: 1;
     }
     40% {
             top: 80%;
             opacity: 1;
     }
     60% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

@-moz-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     15% {
             top: 80%;
             opacity: 1;
     }
     40% {
             top: 80%;
             opacity: 1;
     }
     60% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

@-ms-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     15% {
             top: 80%;
             opacity: 1;
     }
     40% {
             top: 80%;
             opacity: 1;
     }
     60% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}

@-o-keyframes captions {
     0% {
             top: 100%;
             opacity: 0;
     }
     15% {
             top: 80%;
             opacity: 1;
     }
     40% {
             top: 80%;
             opacity: 1;
     }
     60% {
             top: 100%;
             opacity: 0;
     }
     100% {
             top: 100%;
             opacity: 0;
     }
}


.slider3 ul li div {
     text-align: center;
     color: #fff;
     background-color: rgba(45, 44, 44, 0.7);
     background: rgba(45, 44, 44, 0.7);
     margin: 0;
     padding: 0;
     position: absolute;
     bottom: 0;
     width: 430px; /* important to be same as image width */
     z-index :999;

/* css3 animation */
     -webkit-animation-name: captions;
     -webkit-animation-duration: 14.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: 14.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: 14.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: 14.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;
}
}