/* Text Slider */

#jt-text-slider, #jt-text-slider ul { height: 300px; }
#jt-text-slider { margin: 10px auto; overflow: hidden; padding: 5px; border: 1px solid #000066; border-radius: 10px; box-shadow: 2px 2px 14px #00B0F0; position: relative; width:100%; max-width: 600px; font: 400 100% 'Raleway', 'Lato'; line-height:1.0em; }
#jt-text-slider li { float: left; position: relative; width: 100%; max-width: 600px; display: inline-block; height: 300px; padding-top: 0px; }
#jt-text-slider ul { margin: auto; overflow-y: auto; padding-left: 25px; padding-top: 0px; list-style: none; position: absolute; left: 5px; top: 25px; width: 9000px; transition: left .3s linear; -moz-transition: left .3s linear; -o-transition: left .3s linear; -webkit-transition: left .3s linear; margin-left: -25px; color: #000; }

/*** Content ***/
.jt-slider-container { position: relative; margin: 0; padding: 0 15px; max-width: calc(100%-30px); min-height: 280px; top:0; }
.jt-slider-container h4 { margin: 0!important; padding: 0!important; font-weight: 800; font-size: 180%; color: #000066; line-height:1.0em; border-bottom: 1px solid #000066; }
.jt-slider-container h4:before { display: inline-block; border: 1px solid #000066; content: attr(date) " : "; background-color: #000066; color: #fff; } 
.jt-slider-container img { border: none; display: block; margin: 0 auto; }
.jt-slider-container  p { margin: 5px; text-align: justify; padding-top: 5px; }
.jt-slider-container  p:before { content: attr(title) ":"; font-weight: bold; }
/*** animations ****/
#jt-text-slider ul { -webkit-animation: slide-animation 30s ease-out infinite; }
@-webkit-keyframes slide-animation {
	0% {left:5px; opacity:1;}
	2.5% {left:-595px; opacity:0.6;}
	12% {left:-595px; opacity:1;}
	14.5% {left:-1195px; opacity:0.6;}
	24% {left:-1195px; opacity:1;}
	26.5% {left:-1795px; opacity:0.6;}
	36% {left:-1795px; opacity:1;}
	38.5% {left:-2395px; opacity:0.6;}
	48% {left:-2395px; opacity:1;}
	50.5% {left:-2995px; opacity:0.6;}
	62% {left:-2995px; opacity:1;}
	64.5% {left:-3595px; opacity:0.6;}
	74% {left:-3595px; opacity:1;}
	76.5% {left:-4195px; opacity:0.6;}
	86% {left:-4195px; opacity:1;}
	88.5% {left:5px; opacity:0.6;}
	100% {left:5px; opacity:1;}
}
/* use to paused the content on mouse over */
#jt-text-slider ul:hover { -moz-animation-play-state: paused; -webkit-animation-play-state: paused; }

@media only screen and (max-width: 640px) {
#jt-text-slider { display: none; }
}

@media only screen and (max-width: 480px) {
#jt-text-slider { display: none; }
}