/**** slider ****/
#slider .slides {height: 240px;}
#slider {margin: auto;overflow: hidden;padding: 20px;border: 1px solid rgba(0, 0, 0, 0.15);margin-top: 50px;border-radius: 10px;box-shadow: 2px 2px 14px rgba(0, 0, 0, 0.25);position: relative;width: 100%;}
#slider li {float: left;position: relative;width: 634px;display: inline-block;height: 240px;}
#slider ul {list-style: none;position: absolute;left: 0px;top: 0px;width: 9000px;transition: left .3s linear;-moz-transition: left .3s linear;-o-transition: left .3s linear;-webkit-transition: left .3s linear;margin-left: -25px;font-family: century gothic;color: #666;}
/*** Content ***/
.slider-container {margin: 0 auto;padding: 0;width: 100%;min-height: 180px;border-bottom: 1px solid #ccc;}

.slider-container h4 {color: #0A7FAD;text-shadow: -1px 0px 0px rgba(0, 0, 0, 0.50);}
.slider-container p {margin: 10px 25px;font-weight: semi-bold;line-height: 150%;text-align: justify;}
/*** target hooks ****/
@-webkit-keyframes slide-animation {
    0% {opacity: 0;}
    2% {opacity: 1;}
    20% {left: 0px;opacity: 1;}
    22.5% {opacity: 0.6;}
    25% {left: -650px;opacity: 1;}
    45% {left: -650px;opacity: 1;}
    47.5% {opacity: 0.6;}
    50% {left: -1270px;opacity: 1;}
    70% {left: -1270px;opacity: 1;}
    72.5% {opacity: 0.6;}
    75% {left: -1890px;opacity: 1;}
    95% {opacity: 1;}
    98% {left: -1890px;opacity: 0;}
    100% {left: 0px;opacity: 0;}
}
#slider ul {-webkit-animation: slide-animation 25s infinite;}
/* use to paused the content on mouse over */
#slider ul:hover {-moz-animation-play-state: paused;-webkit-animation-play-state: paused;}